Add token symbols to swap transaction summary

fix: make icons circular

fix: increase overlap and right margin of token symbols

fix: align text for swap orders with other tx types

feat: implement swap label according to design

src/components/common/TokenIcon/index.tsx

@@ -1,6 +1,7 @@
 import { type ReactElement } from 'react'
 import ImageFallback from '../ImageFallback'
 import css from './styles.module.css'
+import classNames from 'classnames'
 
 const FALLBACK_ICON = '/images/common/token-placeholder.svg'
 
@@ -9,19 +10,21 @@ const TokenIcon = ({
   tokenSymbol,
   size = 26,
   fallbackSrc,
+  rounded,
 }: {
   logoUri?: string
   tokenSymbol?: string
   size?: number
   fallbackSrc?: string
+  rounded?: boolean
 }): ReactElement => {
   return (
     <ImageFallback
       src={logoUri}
       alt={tokenSymbol}
       fallbackSrc={fallbackSrc || FALLBACK_ICON}
       height={size}
-      className={css.image}
+      className={classNames(css.image, { [css.rounded]: rounded })}
     />
   )
 }

src/components/common/TokenIcon/styles.module.css

@@ -8,3 +8,8 @@
   border-radius: 4px;
   padding: 2px;
 }
+
+.rounded {
+  border-radius: 12px !important;
+  background-color: #ffffff;
+}

src/components/transactions/TxInfo/index.tsx

@@ -23,6 +23,8 @@ import {
 } from '@/utils/transaction-guards'
 import { ellipsis, shortenAddress } from '@/utils/formatters'
 import { useCurrentChain } from '@/hooks/useChains'
+import TokenIcon from '@/components/common/TokenIcon'
+import { Box, Typography } from '@mui/material'
 
 export const TransferTx = ({
   info,
@@ -91,9 +93,19 @@ const MultiSendTx = ({ info }: { info: MultiSend }): ReactElement => {
 
 const SwapTx = ({ info }: { info: SwapOrder }): ReactElement => {
   return (
-    <>
-      Swap {info.sellToken.symbol} to {info.buyToken.symbol}
-    </>
+    <Box display="flex">
+      <Typography display="flex" alignItems="center" fontWeight="bold">
+        Swap{' '}
+        <Box style={{ paddingLeft: 5, paddingRight: 5, display: 'inline-block' }}>
+          <TokenIcon logoUri={info.sellToken.logoUri || undefined} tokenSymbol={info.sellToken.symbol} rounded={true} />
+        </Box>
+        {info.sellToken.symbol} to
+        <Box style={{ paddingLeft: 5, paddingRight: 5, display: 'inline-block' }}>
+          <TokenIcon logoUri={info.buyToken.logoUri || undefined} tokenSymbol={info.buyToken.symbol} rounded={true} />
+        </Box>{' '}
+        {info.buyToken.symbol}
+      </Typography>
+    </Box>
   )
 }
 const SettingsChangeTx = ({ info }: { info: SettingsChange }): ReactElement => {