feat: Use different titles depending on the type of swap (#3649)

* feat: Use different titles depending on the type of swap

* fix: Handle swap title in AppTitle component

* fix: Remove dependency, toLowerCase in reducer

* fix: Swap icon

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

@@ -1,21 +1,25 @@
+import { isSwapTxInfo } from '@/utils/transaction-guards'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import TxLayout from '@/components/tx-flow/common/TxLayout'
 import ConfirmProposedTx from './ConfirmProposedTx'
 import { useTransactionType } from '@/hooks/useTransactionType'
 import TxInfo from '@/components/transactions/TxInfo'
+import SwapIcon from '@/public/images/common/swap.svg'
 
 const ConfirmTxFlow = ({ txSummary }: { txSummary: TransactionSummary }) => {
   const { text } = useTransactionType(txSummary)
+  const isSwapOrder = isSwapTxInfo(txSummary.txInfo)
 
   return (
     <TxLayout
       title="Confirm transaction"
       subtitle={
         <>
           {text}&nbsp;
-          <TxInfo info={txSummary.txInfo} withLogo={false} omitSign />
+          {!isSwapOrder && <TxInfo info={txSummary.txInfo} withLogo={false} omitSign />}
         </>
       }
+      icon={isSwapOrder && SwapIcon}
       step={0}
       txSummary={txSummary}
     >

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

@@ -1,19 +1,27 @@
 import TxLayout from '@/components/tx-flow/common/TxLayout'
 import SignMessage, { type ConfirmProps, type ProposeProps } from '@/components/tx-flow/flows/SignMessage/SignMessage'
+import { getSwapTitle, SWAP_TITLE } from '@/features/swap'
+import { selectSwapParams } from '@/features/swap/store/swapParamsSlice'
+import { useAppSelector } from '@/store'
 import { Box, Typography } from '@mui/material'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 
 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 }) => {
+  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
+
   return (
     <Box display="flex" alignItems="center">
-      <SafeAppIconCard src={appLogo} alt={name || 'The icon of the application'} width={24} height={24} />
-      <Typography variant="h4" pl={1}>
-        {appName}
+      <SafeAppIconCard src={appLogo} alt={name || 'The icon of the application'} width={32} height={32} />
+      <Typography variant="h4" pl={2} fontWeight="bold">
+        {title}
       </Typography>
     </Box>
   )

src/features/swap/index.tsx

@@ -24,7 +24,7 @@ import { isBlockedAddress } from '@/services/ofac'
 import useSwapConsent from './useSwapConsent'
 import Disclaimer from '@/components/common/Disclaimer'
 import LegalDisclaimerContent from '@/components/common/LegalDisclaimerContent'
-import { selectSwapParams, setSwapParams } from './store/swapParamsSlice'
+import { selectSwapParams, setSwapParams, type SwapState } from './store/swapParamsSlice'
 import { setSwapOrder } from '@/store/swapOrderSlice'
 
 const BASE_URL = typeof window !== 'undefined' && window.location.origin ? window.location.origin : ''
@@ -36,18 +36,12 @@ type Params = {
   }
 }
 
-const appData: SafeAppData = {
-  id: 1,
-  url: 'https://app.safe.global',
-  name: 'Safe Swap',
-  iconUrl: 'https://app.safe.global/icon.png',
-  description: 'Safe Apps',
-  chainIds: ['1', '100'],
-  accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
-  tags: ['safe-apps'],
-  features: [SafeAppFeatures.BATCHED_TRANSACTIONS],
-  socialProfiles: [],
+export const SWAP_TITLE = 'Safe Swap'
+
+export const getSwapTitle = (tradeType: SwapState['tradeType']) => {
+  return tradeType === 'limit' ? 'Limit order' : 'Swap order'
 }
+
 const SwapWidget = ({ sell }: Params) => {
   const chainId = useChainId()
   const { palette } = useTheme()
@@ -61,6 +55,23 @@ const SwapWidget = ({ sell }: Params) => {
   const wallet = useWallet()
   const { isConsentAccepted, onAccept } = useSwapConsent()
 
+  const appData: SafeAppData = useMemo(
+    () => ({
+      id: 1,
+      url: 'https://app.safe.global',
+      name: SWAP_TITLE,
+      iconUrl: darkMode ? './images/common/safe-swap-dark.svg' : './images/common/safe-swap.svg',
+      description: 'Safe Apps',
+      chainIds: ['1', '100'],
+      accessControl: { type: SafeAppAccessPolicyTypes.NoRestrictions },
+      tags: ['safe-apps'],
+      features: [SafeAppFeatures.BATCHED_TRANSACTIONS],
+      socialProfiles: [],
+    }),
+    [darkMode],
+  )
+
+  const groupKey = 'swap-order-status'
   const listeners = useMemo<CowEventListeners>(() => {
     return [
       {

src/features/swap/store/swapParamsSlice.ts

@@ -2,6 +2,7 @@ import type { RootState } from '@/store'
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
 
+// Using TradeType from the cow widget library results in lint errors
 enum TradeType {
   SWAP = 'swap',
   LIMIT = 'limit',
@@ -19,7 +20,11 @@ export const swapParamsSlice = createSlice({
   name: 'swapParams',
   initialState,
   reducers: {
-    setSwapParams: (_, action: PayloadAction<SwapState>) => action.payload,
+    setSwapParams: (_, action: PayloadAction<SwapState>) => {
+      return {
+        tradeType: action.payload.tradeType.toLowerCase() as TradeType,
+      }
+    },
   },
 })
 

src/hooks/useTransactionType.ts

@@ -1,3 +1,4 @@
+import { getOrderClass } from '@/features/swap/helpers/utils'
 import { useMemo } from 'react'
 import {
   type AddressEx,
@@ -36,7 +37,6 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
   const toAddress = getTxTo(tx)
   const addressBookName = toAddress?.value ? addressBook[toAddress.value] : undefined
 
-  console.log('tx.txInfo.type:', tx.txInfo.type, TransactionInfoType.SWAP_ORDER)
   switch (tx.txInfo.type) {
     case TransactionInfoType.CREATION: {
       return {
@@ -63,9 +63,11 @@ export const getTransactionType = (tx: TransactionSummary, addressBook: AddressB
       }
     }
     case TransactionInfoType.SWAP_ORDER: {
+      const orderClass = getOrderClass(tx.txInfo)
+
       return {
         icon: '/images/transactions/cow-logo.png',
-        text: 'Swap order',
+        text: orderClass === 'limit' ? 'Limit order' : 'Swap order',
       }
     }
     case TransactionInfoType.CUSTOM: {