feat: slight UI improvements to the new tx flow [SWAP-89]

src/components/tx-flow/common/TxButton.tsx

@@ -10,6 +10,8 @@ import { useContext } from 'react'
 import { TxModalContext } from '..'
 import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
+import SwapIcon from '@/public/images/common/swap.svg'
+import AssetsIcon from '@/public/images/sidebar/assets.svg'
 
 const buttonSx = {
   height: '58px',
@@ -19,7 +21,14 @@ const buttonSx = {
 export const SendTokensButton = ({ onClick, sx }: { onClick: () => void; sx?: ButtonProps['sx'] }) => {
   return (
     <Track {...MODALS_EVENTS.SEND_FUNDS}>
-      <Button data-testid="send-tokens-btn" onClick={onClick} variant="contained" sx={sx ?? buttonSx} fullWidth>
+      <Button
+        data-testid="send-tokens-btn"
+        onClick={onClick}
+        variant="contained"
+        sx={sx ?? buttonSx}
+        fullWidth
+        startIcon={<AssetsIcon width={20} />}
+      >
         Send tokens
       </Button>
     </Track>
@@ -60,10 +69,37 @@ export const TxBuilderButton = () => {
   return (
     <Track {...MODALS_EVENTS.CONTRACT_INTERACTION}>
       <Link href={txBuilder.link} passHref style={{ width: '100%' }}>
-        <Button variant="outlined" sx={buttonSx} fullWidth onClick={onClick}>
+        <Button
+          variant="outlined"
+          sx={buttonSx}
+          fullWidth
+          onClick={onClick}
+          startIcon={<img src={txBuilder.app.iconUrl} height={24} width="auto" alt={txBuilder.app.name} />}
+        >
           Transaction Builder
         </Button>
       </Link>
     </Track>
   )
 }
+
+export const MakeASwapButton = () => {
+  const router = useRouter()
+  const { setTxFlow } = useContext(TxModalContext)
+  const isEnabled = useHasFeature(FEATURES.NATIVE_SWAPS)
+
+  if (!isEnabled) return null
+
+  const isSwapPage = router.pathname === AppRoutes.swap
+  const onClick = isSwapPage ? () => setTxFlow(undefined) : undefined
+
+  return (
+    <Track {...MODALS_EVENTS.SWAP}>
+      <Link href={{ pathname: AppRoutes.swap, query: { safe: router.query.safe } }} passHref legacyBehavior>
+        <Button variant="contained" sx={buttonSx} fullWidth onClick={onClick} startIcon={<SwapIcon width={20} />}>
+          Swap tokens
+        </Button>
+      </Link>
+    </Track>
+  )
+}

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

@@ -1,9 +1,8 @@
 import { useCallback, useContext } from 'react'
-import { SendNFTsButton, SendTokensButton, TxBuilderButton } from '@/components/tx-flow/common/TxButton'
-import { Container, Grid, Paper, SvgIcon, Typography } from '@mui/material'
+import { MakeASwapButton, SendTokensButton, TxBuilderButton } from '@/components/tx-flow/common/TxButton'
+import { Container, Grid, Paper, Typography } from '@mui/material'
 import { TxModalContext } from '../../'
 import TokenTransferFlow from '../TokenTransfer'
-import AssetsIcon from '@/public/images/sidebar/assets.svg'
 import { useTxBuilderApp } from '@/hooks/safe-apps/useTxBuilderApp'
 import { ProgressBar } from '@/components/common/ProgressBar'
 import ChainIndicator from '@/components/common/ChainIndicator'
@@ -44,19 +43,16 @@ const NewTxFlow = () => {
 
             <Grid item xs={12} md={5} className={css.pane} gap={2}>
               <Typography variant="h4" className={css.type}>
-                <SvgIcon component={AssetsIcon} inheritViewBox color="secondary" />
-                Assets
+                Manage assets
               </Typography>
 
               <SendTokensButton onClick={onTokensClick} />
-
-              <SendNFTsButton />
+              <MakeASwapButton />
 
               {txBuilder?.app && (
                 <>
                   <Typography variant="h4" className={css.type} mt={3}>
-                    <img src={txBuilder.app.iconUrl} height={24} width="auto" alt={txBuilder.app.name} /> Contract
-                    interaction
+                    Interact with contracts
                   </Typography>
 
                   <TxBuilderButton />

src/services/analytics/events/modals.ts

@@ -63,6 +63,10 @@ export const MODALS_EVENTS = {
     category: MODALS_CATEGORY,
     event: EventType.CLICK,
   },
+  SWAP: {
+    action: 'Swap',
+    category: MODALS_CATEGORY,
+  },
 }
 
 export enum MODAL_NAVIGATION {