fix: Enable spending limit txs in new flow

src/components/address-book/AddressBookTable/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useContext, useMemo, useState } from 'react'
 import { Box } from '@mui/material'
 import EnhancedTable from '@/components/common/EnhancedTable'
 import type { AddressEntry } from '@/components/address-book/EntryDialog'
@@ -21,8 +21,8 @@ import PagePlaceholder from '@/components/common/PagePlaceholder'
 import NoEntriesIcon from '@/public/images/address-book/no-entries.svg'
 import { useCurrentChain } from '@/hooks/useChains'
 import tableCss from '@/components/common/EnhancedTable/styles.module.css'
-import TokenTransferModal from '@/components/tx/modals/TokenTransferModal'
-import { SendAssetsField } from '@/components/tx/modals/TokenTransferModal/SendAssetsForm'
+import { TxModalContext } from '@/components/tx-flow'
+import TokenTransferFlow from '@/components/tx-flow/flows/TokenTransfer'
 import CheckWallet from '@/components/common/CheckWallet'
 
 const headCells = [
@@ -47,10 +47,11 @@ const defaultOpen = {
 
 const AddressBookTable = () => {
   const chain = useCurrentChain()
+  const { setTxFlow } = useContext(TxModalContext)
+
   const [open, setOpen] = useState<typeof defaultOpen>(defaultOpen)
   const [searchQuery, setSearchQuery] = useState('')
   const [defaultValues, setDefaultValues] = useState<AddressEntry | undefined>(undefined)
-  const [selectedAddress, setSelectedAddress] = useState<string | undefined>()
 
   const handleOpenModal = (type: keyof typeof open) => () => {
     setOpen((prev) => ({ ...prev, [type]: true }))
@@ -117,7 +118,7 @@ const AddressBookTable = () => {
                     variant="contained"
                     color="primary"
                     size="small"
-                    onClick={() => setSelectedAddress(address)}
+                    onClick={() => setTxFlow(<TokenTransferFlow recipient={address} />)}
                     disabled={!isOk}
                   >
                     Send
@@ -165,14 +166,6 @@ const AddressBookTable = () => {
       )}
 
       {open[ModalType.REMOVE] && <RemoveDialog handleClose={handleClose} address={defaultValues?.address || ''} />}
-
-      {/* Send funds modal */}
-      {selectedAddress && (
-        <TokenTransferModal
-          onClose={() => setSelectedAddress(undefined)}
-          initialData={[{ [SendAssetsField.recipient]: selectedAddress }]}
-        />
-      )}
     </>
   )
 }

src/components/transactions/TxDetails/TxData/Transfer/TransferActions.tsx

@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react'
-import { type ReactElement, useState } from 'react'
+import { type ReactElement, useContext, useState } from 'react'
 import IconButton from '@mui/material/IconButton'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
 import MenuItem from '@mui/material/MenuItem'
@@ -8,29 +8,31 @@ import ListItemText from '@mui/material/ListItemText'
 import useAddressBook from '@/hooks/useAddressBook'
 import EntryDialog from '@/components/address-book/EntryDialog'
 import ContextMenu from '@/components/common/ContextMenu'
-import TokenTransferModal from '@/components/tx/modals/TokenTransferModal'
+import TokenTransferFlow from '@/components/tx-flow/flows/TokenTransfer'
 import type { Transfer } from '@safe-global/safe-gateway-typescript-sdk'
 import { TransferDirection } from '@safe-global/safe-gateway-typescript-sdk'
 import { ZERO_ADDRESS } from '@safe-global/safe-core-sdk/dist/src/utils/constants'
 import { isERC20Transfer, isNativeTokenTransfer } from '@/utils/transaction-guards'
 import { trackEvent, TX_LIST_EVENTS } from '@/services/analytics'
 import { safeFormatUnits } from '@/utils/formatters'
 import CheckWallet from '@/components/common/CheckWallet'
+import { TxModalContext } from '@/components/tx-flow'
 
+// TODO: No need for an enum anymore
 enum ModalType {
-  SEND_AGAIN = 'SEND_AGAIN',
   ADD_TO_AB = 'ADD_TO_AB',
 }
 
 const ETHER = 'ether'
 
-const defaultOpen = { [ModalType.SEND_AGAIN]: false, [ModalType.ADD_TO_AB]: false }
+const defaultOpen = { [ModalType.ADD_TO_AB]: false }
 
 const TransferActions = ({ address, txInfo }: { address: string; txInfo: Transfer }): ReactElement => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
   const [open, setOpen] = useState<typeof defaultOpen>(defaultOpen)
   const addressBook = useAddressBook()
   const name = addressBook?.[address]
+  const { setTxFlow } = useContext(TxModalContext)
 
   const handleOpenContextMenu = (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {
     setAnchorEl(e.currentTarget)
@@ -75,7 +77,13 @@ const TransferActions = ({ address, txInfo }: { address: string; txInfo: Transfe
         {canSendAgain && (
           <CheckWallet>
             {(isOk) => (
-              <MenuItem onClick={handleOpenModal(ModalType.SEND_AGAIN, TX_LIST_EVENTS.SEND_AGAIN)} disabled={!isOk}>
+              <MenuItem
+                onClick={() => {
+                  handleCloseContextMenu()
+                  setTxFlow(<TokenTransferFlow recipient={recipient} tokenAddress={tokenAddress} amount={amount} />)
+                }}
+                disabled={!isOk}
+              >
                 <ListItemText>Send again</ListItemText>
               </MenuItem>
             )}
@@ -87,10 +95,6 @@ const TransferActions = ({ address, txInfo }: { address: string; txInfo: Transfe
         </MenuItem>
       </ContextMenu>
 
-      {open[ModalType.SEND_AGAIN] && (
-        <TokenTransferModal onClose={handleCloseModal} initialData={[{ recipient, tokenAddress, amount }]} />
-      )}
-
       {open[ModalType.ADD_TO_AB] && (
         <EntryDialog handleClose={handleCloseModal} defaultValues={{ name, address }} disableAddressInput />
       )}

src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx

@@ -18,7 +18,7 @@ import { parseUnits, defaultAbiCoder } from 'ethers/lib/utils'
 
 import AddressBookInput from '@/components/common/AddressBookInput'
 import { validateAmount, validateDecimalLength } from '@/utils/validation'
-import { AutocompleteItem } from '@/components/tx/modals/TokenTransferModal/SendAssetsForm'
+import { AutocompleteItem } from '@/components/tx-flow/flows/TokenTransfer/CreateTokenTransfer'
 import useChainId from '@/hooks/useChainId'
 import { getResetTimeOptions } from '@/components/transactions/TxDetails/TxData/SpendingLimits'
 import NumberField from '@/components/common/NumberField'

src/components/tx-flow/flows/NewSpendingLimit/ReviewSpendingLimit.tsx

@@ -5,7 +5,7 @@ import { Typography, Box } from '@mui/material'
 
 import SpendingLimitLabel from '@/components/common/SpendingLimitLabel'
 import { getResetTimeOptions } from '@/components/transactions/TxDetails/TxData/SpendingLimits'
-import { TokenTransferReview } from '@/components/tx/modals/TokenTransferModal/ReviewTokenTx'
+import { AmountBlock } from '@/components/tx-flow/flows/TokenTransfer/SendAmountBlock'
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
 import useBalances from '@/hooks/useBalances'
 import useChainId from '@/hooks/useChainId'
@@ -59,16 +59,16 @@ export const ReviewSpendingLimit = ({ params }: { params: NewSpendingLimitFlowPr
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       {token && (
-        <TokenTransferReview amount={params.amount} tokenInfo={token.tokenInfo}>
+        <AmountBlock amount={params.amount} tokenInfo={token.tokenInfo}>
           {!!existingSpendingLimit && (
             <>
-              <Typography color="error" sx={{ textDecoration: 'line-through' }} component="span" fontSize={20}>
-                {formatVisualAmount(BigNumber.from(existingSpendingLimit.amount), decimals)} {symbol}
+              <Typography color="error" sx={{ textDecoration: 'line-through' }} component="span">
+                {formatVisualAmount(BigNumber.from(existingSpendingLimit.amount), decimals)}
               </Typography>
-              {' → '}
+              {'→'}
             </>
           )}
-        </TokenTransferReview>
+        </AmountBlock>
       )}
       <Typography color={({ palette }) => palette.text.secondary} pb={1}>
         Beneficiary

src/components/tx-flow/flows/RemoveSpendingLimit/RemoveSpendingLimit.tsx

@@ -9,7 +9,7 @@ import type { SpendingLimitState } from '@/store/spendingLimitsSlice'
 import { relativeTime } from '@/utils/date'
 import { trackEvent, SETTINGS_EVENTS } from '@/services/analytics'
 import useBalances from '@/hooks/useBalances'
-import { TokenTransferReview } from '@/components/tx/modals/TokenTransferModal/ReviewTokenTx'
+import { AmountBlock } from '@/components/tx-flow/flows/TokenTransfer/SendAmountBlock'
 import { safeFormatUnits } from '@/utils/formatters'
 import SpendingLimitLabel from '@/components/common/SpendingLimitLabel'
 import { createTx } from '@/services/tx/tx-sender'
@@ -49,10 +49,7 @@ export const RemoveSpendingLimit = ({ params }: { params: SpendingLimitState })
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       {token && (
-        <TokenTransferReview
-          amount={safeFormatUnits(params.amount, token.tokenInfo.decimals)}
-          tokenInfo={token.tokenInfo}
-        />
+        <AmountBlock amount={safeFormatUnits(params.amount, token.tokenInfo.decimals)} tokenInfo={token.tokenInfo} />
       )}
       <Typography sx={({ palette }) => ({ color: palette.primary.light })}>Beneficiary</Typography>
       <EthHashInfo address={params.beneficiary} showCopyButton hasExplorer shortAddress={false} />

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

@@ -1,9 +1,10 @@
 import { type ReactElement, useMemo, useState, useCallback } from 'react'
+import { type TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { useVisibleBalances } from '@/hooks/useVisibleBalances'
 import useAddressBook from '@/hooks/useAddressBook'
 import useChainId from '@/hooks/useChainId'
 import { getSafeTokenAddress } from '@/components/common/SafeTokenWidget'
-import useIsSafeTokenPaused from '@/components/tx/modals/TokenTransferModal/useIsSafeTokenPaused'
+import useIsSafeTokenPaused from '@/hooks/useIsSafeTokenPaused'
 import useIsOnlySpendingLimitBeneficiary from '@/hooks/useIsOnlySpendingLimitBeneficiary'
 import { useAppSelector } from '@/store'
 import { selectSpendingLimits } from '@/store/spendingLimitsSlice'
@@ -39,6 +40,20 @@ import { formatVisualAmount, safeFormatUnits } from '@/utils/formatters'
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import css from './styles.module.css'
 
+export const AutocompleteItem = (item: { tokenInfo: TokenInfo; balance: string }): ReactElement => (
+  <Grid container alignItems="center" gap={1}>
+    <TokenIcon logoUri={item.tokenInfo.logoUri} tokenSymbol={item.tokenInfo.symbol} />
+
+    <Grid item xs>
+      <Typography variant="body2">{item.tokenInfo.name}</Typography>
+
+      <Typography variant="caption" component="p">
+        {formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}
+      </Typography>
+    </Grid>
+  </Grid>
+)
+
 const CreateTokenTransfer = ({
   params,
   onSubmit,
@@ -201,19 +216,7 @@ const CreateTokenTransfer = ({
               >
                 {balancesItems.map((item) => (
                   <MenuItem key={item.tokenInfo.address} value={item.tokenInfo.address}>
-                    <Grid container alignItems="center" gap={1}>
-                      <TokenIcon logoUri={item.tokenInfo.logoUri} tokenSymbol={item.tokenInfo.symbol} />
-
-                      <Grid item xs>
-                        <Typography variant="body2" lineHeight="18px">
-                          {item.tokenInfo.name}
-                        </Typography>
-
-                        <Typography variant="caption" component="p">
-                          {formatVisualAmount(item.balance, item.tokenInfo.decimals)} {item.tokenInfo.symbol}
-                        </Typography>
-                      </Grid>
-                    </Grid>
+                    <AutocompleteItem {...item} />
                   </MenuItem>
                 ))}
               </TextField>

src/components/tx/modals/TokenTransferModal/ReviewSpendingLimitTx.tsx → src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx

@@ -1,11 +1,10 @@
 import type { ReactElement, SyntheticEvent } from 'react'
 import { useMemo, useState } from 'react'
 import type { BigNumberish, BytesLike } from 'ethers'
-import { Button, DialogContent, Typography } from '@mui/material'
-import SendFromBlock from '@/components/tx/SendFromBlock'
-import SendToBlock from '@/components/tx/SendToBlock'
-import type { TokenTransferModalProps } from '.'
-import { TokenTransferReview } from '@/components/tx/modals/TokenTransferModal/ReviewTokenTx'
+import { Button, CardActions, Typography } from '@mui/material'
+import SendToBlock from '@/components/tx-flow/flows/TokenTransfer/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'
 import useSpendingLimit from '@/hooks/useSpendingLimit'
 import useSpendingLimitGas from '@/hooks/useSpendingLimitGas'
@@ -22,6 +21,7 @@ import { MODALS_EVENTS, trackEvent } from '@/services/analytics'
 import useOnboard from '@/hooks/wallets/useOnboard'
 import { WrongChainWarning } from '@/components/tx/WrongChainWarning'
 import { asError } from '@/services/exceptions/utils'
+import TxCard from '@/components/tx-flow/common/TxCard'
 
 export type SpendingLimitTxParams = {
   safeAddress: string
@@ -34,7 +34,13 @@ export type SpendingLimitTxParams = {
   signature: BytesLike
 }
 
-const ReviewSpendingLimitTx = ({ params, onSubmit }: TokenTransferModalProps): ReactElement => {
+const ReviewSpendingLimitTx = ({
+  params,
+  onSubmit,
+}: {
+  params: TokenTransferParams
+  onSubmit: () => void
+}): ReactElement => {
   const [isSubmittable, setIsSubmittable] = useState<boolean>(true)
   const [submitError, setSubmitError] = useState<Error | undefined>()
   const currentChain = useCurrentChain()
@@ -67,10 +73,7 @@ const ReviewSpendingLimitTx = ({ params, onSubmit }: TokenTransferModalProps): R
 
   const { gasLimit, gasLimitLoading } = useSpendingLimitGas(txParams)
 
-  const [advancedParams, setManualParams] = useAdvancedParams({
-    gasLimit,
-    nonce: params.txNonce,
-  })
+  const [advancedParams, setManualParams] = useAdvancedParams(gasLimit)
 
   const handleSubmit = async (e: SyntheticEvent) => {
     e.preventDefault()
@@ -99,15 +102,14 @@ const ReviewSpendingLimitTx = ({ params, onSubmit }: TokenTransferModalProps): R
 
   return (
     <form onSubmit={handleSubmit}>
-      <DialogContent>
-        <Typography variant="body2" mb={4}>
+      <TxCard>
+        <Typography variant="body2">
           Spending limit transactions only appear in the interface once they are successfully processed and indexed.
           Pending transactions can only be viewed in your signer wallet application or under your wallet address on a
           Blockchain Explorer.
         </Typography>
-        {token && <TokenTransferReview amount={params.amount} tokenInfo={token.tokenInfo} />}
 
-        <SendFromBlock />
+        {token && <SendAmountBlock amount={params.amount} tokenInfo={token.tokenInfo} />}
 
         <SendToBlock address={params.recipient} />
 
@@ -119,14 +121,16 @@ const ReviewSpendingLimitTx = ({ params, onSubmit }: TokenTransferModalProps): R
           <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
         )}
 
-        <Typography variant="body2" color="primary.light" textAlign="center" mt={3}>
+        <Typography variant="body2" color="primary.light" textAlign="center">
           You&apos;re about to create a transaction and will need to confirm it with your currently connected wallet.
         </Typography>
 
-        <Button variant="contained" type="submit" disabled={submitDisabled}>
-          Submit
-        </Button>
-      </DialogContent>
+        <CardActions>
+          <Button variant="contained" type="submit" disabled={submitDisabled}>
+            Submit
+          </Button>
+        </CardActions>
+      </TxCard>
     </form>
   )
 }

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

@@ -0,0 +1,25 @@
+import { type ReactElement } from 'react'
+import { type TokenTransferParams, TokenTransferType } from '@/components/tx-flow/flows/TokenTransfer/index'
+import ReviewTokenTransfer from '@/components/tx-flow/flows/TokenTransfer/ReviewTokenTransfer'
+import ReviewSpendingLimitTx from '@/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx'
+
+// TODO: Split this into separate flows
+const ReviewTokenTx = ({
+  params,
+  onSubmit,
+  txNonce,
+}: {
+  params: TokenTransferParams
+  onSubmit: () => void
+  txNonce?: number
+}): ReactElement => {
+  const isSpendingLimitTx = params.type === TokenTransferType.spendingLimit
+
+  return isSpendingLimitTx ? (
+    <ReviewSpendingLimitTx params={params} onSubmit={onSubmit} />
+  ) : (
+    <ReviewTokenTransfer params={params} onSubmit={onSubmit} txNonce={txNonce} />
+  )
+}
+
+export default ReviewTokenTx