Fix: don't cut address in tx flow (#3041)

* Fix: don't cut address in tx flow

* Fix "interact with"

src/components/tx-flow/flows/ExecuteBatch/ReviewBatch.tsx

@@ -24,7 +24,7 @@ import TxCard from '../../common/TxCard'
 import CheckWallet from '@/components/common/CheckWallet'
 import type { ExecuteBatchFlowProps } from '.'
 import { asError } from '@/services/exceptions/utils'
-import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
+import SendToBlock from '@/components/tx/SendToBlock'
 import ConfirmationTitle, { ConfirmationTitleTypes } from '@/components/tx/SignOrExecuteForm/ConfirmationTitle'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TxModalContext } from '@/components/tx-flow'
@@ -135,7 +135,7 @@ export const ReviewBatch = ({ params }: { params: ExecuteBatchFlowProps }) => {
           over the execute button.
         </Typography>
 
-        {multiSendContract && <SendToBlock address={multiSendContract.getAddress()} title="Interact with:" />}
+        {multiSendContract && <SendToBlock address={multiSendContract.getAddress()} title="Interact with" />}
 
         {multiSendTxData && (
           <div>

src/components/tx-flow/flows/NftTransfer/ReviewNftBatch.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, useEffect, useContext } from 'react'
 import { Grid, Typography } from '@mui/material'
-import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
+import SendToBlock from '@/components/tx/SendToBlock'
 import { createNftTransferParams } from '@/services/tx/tokenTransferParams'
 import type { NftTransferParams } from '.'
 import useSafeAddress from '@/hooks/useSafeAddress'

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

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useMemo } from 'react'
 import type { ReactElement } from 'react'
 import type { SafeTransaction } from '@safe-global/safe-core-sdk-types'
-import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
+import SendToBlock from '@/components/tx/SendToBlock'
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
 import { useCurrentChain } from '@/hooks/useChains'
 import type { SafeAppsTxParams } from '.'

src/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer.tsx

@@ -11,7 +11,7 @@ import { Box, Button, CardActions, Divider, FormControl, Grid, SvgIcon, Typograp
 import TokenIcon from '@/components/common/TokenIcon'
 import AddressBookInput from '@/components/common/AddressBookInput'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import SpendingLimitRow from '@/components/tx/SpendingLimitRow'
+import SpendingLimitRow from '@/components/tx-flow/flows/TokenTransfer/SpendingLimitRow'
 import { TokenTransferFields, type TokenTransferParams, TokenTransferType } from '.'
 import TxCard from '../../common/TxCard'
 import { formatVisualAmount } from '@/utils/formatters'

src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx

@@ -2,7 +2,7 @@ import type { ReactElement, SyntheticEvent } from 'react'
 import { useContext, useMemo, useState } from 'react'
 import type { BigNumberish, BytesLike } from 'ethers'
 import { Button, CardActions, Typography } from '@mui/material'
-import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
+import SendToBlock from '@/components/tx/SendToBlock'
 import { type TokenTransferParams } from '@/components/tx-flow/flows/TokenTransfer/index'
 import SendAmountBlock from '@/components/tx-flow/flows/TokenTransfer/SendAmountBlock'
 import useBalances from '@/hooks/useBalances'

src/components/tx-flow/flows/TokenTransfer/ReviewTokenTransfer.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect } from 'react'
 import useBalances from '@/hooks/useBalances'
 import SignOrExecuteForm, { type SubmitCallback } from '@/components/tx/SignOrExecuteForm'
 import SendAmountBlock from '@/components/tx-flow/flows/TokenTransfer/SendAmountBlock'
-import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/SendToBlock'
+import SendToBlock from '@/components/tx/SendToBlock'
 import { createTokenTransferParams } from '@/services/tx/tokenTransferParams'
 import { createTx } from '@/services/tx/tx-sender'
 import type { TokenTransferParams } from '.'

src/components/tx-flow/flows/TokenTransfer/SendAmountBlock.tsx

@@ -1,33 +1,10 @@
 import { type ReactNode } from 'react'
 import { type TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
-import { Grid, Typography } from '@mui/material'
-import css from './styles.module.css'
+import { Box, Typography } from '@mui/material'
 import TokenIcon from '@/components/common/TokenIcon'
 import { formatAmountPrecise } from '@/utils/formatNumber'
 import { PSEUDO_APPROVAL_VALUES } from '@/components/tx/ApprovalEditor/utils/approvals'
-
-const AmountBlock = ({
-  amount,
-  tokenInfo,
-  children,
-}: {
-  amount: number | string
-  tokenInfo: Omit<TokenInfo, 'name' | 'logoUri'> & { logoUri?: string }
-  children?: ReactNode
-}) => {
-  return (
-    <Grid item md={10} className={css.token}>
-      <TokenIcon logoUri={tokenInfo.logoUri} tokenSymbol={tokenInfo.symbol} />
-      <Typography fontWeight="bold">{tokenInfo.symbol}</Typography>
-      {children}
-      {amount === PSEUDO_APPROVAL_VALUES.UNLIMITED ? (
-        <Typography>{PSEUDO_APPROVAL_VALUES.UNLIMITED}</Typography>
-      ) : (
-        <Typography>{formatAmountPrecise(amount, tokenInfo.decimals)}</Typography>
-      )}
-    </Grid>
-  )
-}
+import FieldsGrid from '@/components/tx/FieldsGrid'
 
 const SendAmountBlock = ({
   amount,
@@ -41,16 +18,21 @@ const SendAmountBlock = ({
   title?: string
 }) => {
   return (
-    <Grid container alignItems="center" sx={{ gap: 1 }}>
-      <Grid item md>
-        <Typography variant="body2" color="text.secondary">
-          {title}
-        </Typography>
-      </Grid>
-      <AmountBlock amount={amount} tokenInfo={tokenInfo}>
+    <FieldsGrid title={title}>
+      <Box display="flex" alignItems="center" gap={1}>
+        <TokenIcon logoUri={tokenInfo.logoUri} tokenSymbol={tokenInfo.symbol} />
+
+        <Typography fontWeight="bold">{tokenInfo.symbol}</Typography>
+
         {children}
-      </AmountBlock>
-    </Grid>
+
+        {amount === PSEUDO_APPROVAL_VALUES.UNLIMITED ? (
+          <Typography>{PSEUDO_APPROVAL_VALUES.UNLIMITED}</Typography>
+        ) : (
+          <Typography>{formatAmountPrecise(amount, tokenInfo.decimals)}</Typography>
+        )}
+      </Box>
+    </FieldsGrid>
   )
 }
 

src/components/tx/FieldsGrid/index.tsx

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react'
+import { Grid, Typography } from '@mui/material'
+
+const FieldsGrid = ({ title, children }: { title: string; children: ReactNode }) => {
+  return (
+    <Grid container alignItems="center" gap={1}>
+      <Grid item xs={1} xl={2} minWidth={90}>
+        <Typography variant="body2" color="text.secondary" noWrap>
+          {title}
+        </Typography>
+      </Grid>
+
+      <Grid item xs>
+        {children}
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FieldsGrid

src/components/tx/SendToBlock/index.tsx

@@ -1,18 +1,14 @@
-import { Box, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
+import FieldsGrid from '../FieldsGrid'
 
-// TODO: Remove this file after replacing in all tx flow components
-const SendToBlock = ({ address, title = 'Recipient' }: { address: string; title?: string }) => {
+const SendToBlock = ({ address, title = 'To' }: { address: string; title?: string }) => {
   return (
-    <Box mb={3}>
-      <Typography color={({ palette }) => palette.text.secondary} mb={1}>
-        {title}
-      </Typography>
-
+    <FieldsGrid title={title}>
       <Typography variant="body2" component="div">
         <EthHashInfo address={address} shortAddress={false} hasExplorer showCopyButton />
       </Typography>
-    </Box>
+    </FieldsGrid>
   )
 }