feat: decode txs in swap modal [SWAP-81]

src/components/tx-flow/flows/SafeAppsTx/index.tsx

@@ -22,7 +22,7 @@ const SafeAppsTxFlow = ({
   return (
     <TxLayout
       title="Confirm transaction"
-      subtitle={<AppTitle name={data.app?.name} logoUri={data.app?.iconUrl} />}
+      subtitle={<AppTitle name={data.app?.name} logoUri={data.app?.iconUrl} txs={data.txs} />}
       step={0}
     >
       <ReviewSafeAppsTx safeAppsTx={data} onSubmit={onSubmit} />

src/components/tx-flow/flows/SignMessage/index.tsx

@@ -6,17 +6,26 @@ import { useAppSelector } from '@/store'
 import { Box, Typography } from '@mui/material'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import { ErrorBoundary } from '@sentry/react'
+import { type BaseTransaction } from '@safe-global/safe-apps-sdk'
 
 const APP_LOGO_FALLBACK_IMAGE = '/images/apps/apps-icon.svg'
 const APP_NAME_FALLBACK = 'Sign message'
 
-export const AppTitle = ({ name, logoUri }: { name?: string | null; logoUri?: string | null }) => {
+export const AppTitle = ({
+  name,
+  logoUri,
+  txs,
+}: {
+  name?: string | null
+  logoUri?: string | null
+  txs?: BaseTransaction[]
+}) => {
   const swapParams = useAppSelector(selectSwapParams)
 
   const appName = name || APP_NAME_FALLBACK
   const appLogo = logoUri || APP_LOGO_FALLBACK_IMAGE
 
-  const title = name === SWAP_TITLE ? getSwapTitle(swapParams.tradeType) : appName
+  const title = name === SWAP_TITLE ? getSwapTitle(swapParams.tradeType, txs) : appName
 
   return (
     <Box display="flex" alignItems="center">

src/features/swap/index.tsx

@@ -27,9 +27,16 @@ import { isBlockedAddress } from '@/services/ofac'
 import { selectSwapParams, setSwapParams, type SwapState } from './store/swapParamsSlice'
 import { setSwapOrder } from '@/store/swapOrderSlice'
 import useChainId from '@/hooks/useChainId'
+import { type BaseTransaction } from '@safe-global/safe-apps-sdk'
+import { APPROVAL_SIGNATURE_HASH } from '@/components/tx/ApprovalEditor/utils/approvals'
+import { id } from 'ethers'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
 
+const PRE_SIGN_SIGHASH = id('setPreSignature(bytes,bool)').slice(0, 10)
+const WRAP_SIGHASH = id('deposit()').slice(0, 10)
+const UNWRAP_SIGHASH = id('withdraw(uint256)').slice(0, 10)
+
 type Params = {
   sell?: {
     asset: string
@@ -39,8 +46,20 @@ type Params = {
 
 export const SWAP_TITLE = 'Safe Swap'
 
-export const getSwapTitle = (tradeType: SwapState['tradeType']) => {
-  return tradeType === 'limit' ? 'Limit order' : 'Swap order'
+export const getSwapTitle = (tradeType: SwapState['tradeType'], txs: BaseTransaction[] | undefined) => {
+  const hashToLabel = {
+    [PRE_SIGN_SIGHASH]: tradeType === 'limit' ? 'Limit order' : 'Swap order',
+    [APPROVAL_SIGNATURE_HASH]: 'Approve',
+    [WRAP_SIGHASH]: 'Wrap',
+    [UNWRAP_SIGHASH]: 'Unwrap',
+  }
+
+  const swapTitle = txs
+    ?.map((tx) => hashToLabel[tx.data.slice(0, 10)])
+    .filter(Boolean)
+    .join(' and ')
+
+  return swapTitle
 }
 
 const SwapWidget = ({ sell }: Params) => {