refactor: add ui driver for cctp (part 3)

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx

@@ -402,8 +402,29 @@ export function TransferPanel() {
     return confirmed
   }
 
-  function executeStep(step: UiDriverStep) {
+  async function executeStep(step: UiDriverStep) {
+    console.log(step)
     switch (step.type) {
+      // todo: catch should stop further execution
+      case 'tx': {
+        try {
+          const tx = await signer!.sendTransaction(step.txRequest)
+          const txReceipt = await tx.wait()
+
+          return txReceipt
+        } catch (error) {
+          if (isUserRejectedError(error)) {
+            return
+          }
+
+          errorToast(`${(error as Error)?.message ?? error}`)
+          return
+        }
+      }
+
+      case 'scw_delay':
+        return showDelayedSmartContractTxRequest()
+
       case 'deposit_usdc.e':
         return depositToken()
 
@@ -416,6 +437,10 @@ export function TransferPanel() {
           return confirmUsdcWithdrawalForCctp()
         }
 
+        if (step.dialog === 'cctp_allowance') {
+          return tokenAllowanceApprovalCctp()
+        }
+
         if (step.dialog === 'custom_dest_addr_warn') {
           return confirmCustomDestinationAddressForSCWallets()
         }
@@ -448,7 +473,11 @@ export function TransferPanel() {
         isDepositMode,
         isSmartContractWallet,
         walletAddress,
-        destinationAddress
+        destinationAddress,
+        sourceChainProvider,
+        destinationChainProvider,
+        amount: amountBigNumber,
+        signer
       })
 
       let nextStep = await steps.next()
@@ -467,54 +496,14 @@ export function TransferPanel() {
         nextStep = await steps.next(result)
       }
 
-      const cctpTransferStarter = new CctpTransferStarter({
-        sourceChainProvider,
-        destinationChainProvider
-      })
-
-      const isTokenApprovalRequired =
-        await cctpTransferStarter.requiresTokenApproval({
-          amount: amountBigNumber,
-          signer
-        })
-
-      if (isTokenApprovalRequired) {
-        const userConfirmation = await tokenAllowanceApprovalCctp()
-        if (!userConfirmation) return false
-
-        if (isSmartContractWallet) {
-          showDelayedSmartContractTxRequest()
-        }
-        try {
-          const tx = await cctpTransferStarter.approveToken({
-            signer,
-            amount: amountBigNumber
-          })
-
-          await tx.wait()
-        } catch (error) {
-          if (isUserRejectedError(error)) {
-            return
-          }
-          captureSentryErrorWithExtraData({
-            error,
-            originFunction: 'cctpTransferStarter.approveToken'
-          })
-          errorToast(
-            `USDC approval transaction failed: ${
-              (error as Error)?.message ?? error
-            }`
-          )
-          return
-        }
-      }
-
       let depositForBurnTx
 
       try {
-        if (isSmartContractWallet) {
-          showDelayedSmartContractTxRequest()
-        }
+        const cctpTransferStarter = new CctpTransferStarter({
+          sourceChainProvider,
+          destinationChainProvider
+        })
+
         const transfer = await cctpTransferStarter.transfer({
           amount: amountBigNumber,
           signer,

packages/arb-token-bridge-ui/src/token-bridge-sdk/CctpTransferStarter.ts

@@ -1,5 +1,5 @@
 import { prepareWriteContract, writeContract } from '@wagmi/core'
-import { constants, utils } from 'ethers'
+import { BigNumber, constants, utils } from 'ethers'
 import { ERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/ERC20__factory'
 
 import {
@@ -15,6 +15,7 @@ import { getChainIdFromProvider, getAddressFromSigner } from './utils'
 import { fetchErc20Allowance } from '../util/TokenUtils'
 import { TokenMessengerAbi } from '../util/cctp/TokenMessengerAbi'
 import { Address } from '../util/AddressUtils'
+import { TransactionRequest } from '@ethersproject/providers'
 
 export class CctpTransferStarter extends BridgeTransferStarter {
   public transferType: TransferType = 'cctp'
@@ -67,6 +68,28 @@ export class CctpTransferStarter extends BridgeTransferStarter {
     )
   }
 
+  public async approveTokenPrepareTransactionRequest({
+    signer,
+    amount
+  }: ApproveTokenProps): Promise<TransactionRequest> {
+    const sourceChainId = await getChainIdFromProvider(this.sourceChainProvider)
+
+    const { usdcContractAddress, tokenMessengerContractAddress } =
+      getCctpContracts({ sourceChainId })
+
+    // approve USDC token for burn
+    const contract = ERC20__factory.connect(usdcContractAddress, signer)
+
+    return {
+      to: usdcContractAddress,
+      data: contract.interface.encodeFunctionData('approve', [
+        tokenMessengerContractAddress,
+        amount ?? constants.MaxInt256
+      ]),
+      value: BigNumber.from(0)
+    }
+  }
+
   public async approveTokenEstimateGas({ signer, amount }: ApproveTokenProps) {
     const sourceChainId = await getChainIdFromProvider(this.sourceChainProvider)
     const { usdcContractAddress, tokenMessengerContractAddress } =

packages/arb-token-bridge-ui/src/ui-driver/CctpUiDriver.ts

@@ -1,24 +1,39 @@
+import { CctpTransferStarter } from '@/token-bridge-sdk/CctpTransferStarter'
+import { Provider, TransactionRequest } from '@ethersproject/providers'
+import { BigNumber, Signer } from 'ethers'
+
 export type Dialog =
   | 'cctp_deposit'
   | 'cctp_withdrawal'
+  | 'cctp_allowance'
   | 'custom_dest_addr_warn'
-  | 'test'
 
 export type UiDriverStepDialog = {
   type: 'dialog'
   dialog: Dialog
 }
 
+export type UiDriverStepTransaction = {
+  type: 'tx'
+  txRequest: TransactionRequest
+}
+
 export type UiDriverStep =
   | UiDriverStepDialog
+  | UiDriverStepTransaction
   | { type: 'deposit_usdc.e' }
+  | { type: 'scw_delay' }
   | { type: 'return' }
 
 export type UiDriverContext = {
   isDepositMode: boolean
   isSmartContractWallet: boolean
   walletAddress?: string
   destinationAddress?: string
+  sourceChainProvider: Provider
+  destinationChainProvider: Provider
+  signer: Signer
+  amount: BigNumber
 }
 
 export class CctpUiDriver {
@@ -53,7 +68,7 @@ export class CctpUiDriver {
       // todo: add tests
       addressesEqual(context.walletAddress, context.destinationAddress)
     ) {
-      const userInput = yield {
+      const userInput: boolean = yield {
         type: 'dialog',
         dialog: 'custom_dest_addr_warn'
       }
@@ -62,6 +77,45 @@ export class CctpUiDriver {
         return yield { type: 'return' }
       }
     }
+
+    const cctpTransferStarter = new CctpTransferStarter({
+      sourceChainProvider: context.sourceChainProvider,
+      destinationChainProvider: context.destinationChainProvider
+    })
+
+    const isTokenApprovalRequired =
+      await cctpTransferStarter.requiresTokenApproval({
+        amount: context.amount,
+        signer: context.signer
+      })
+
+    if (isTokenApprovalRequired) {
+      const userInput: boolean = yield {
+        type: 'dialog',
+        dialog: 'cctp_allowance'
+      }
+
+      if (!userInput) {
+        return yield { type: 'return' }
+      }
+
+      if (context.isSmartContractWallet) {
+        yield { type: 'scw_delay' }
+      }
+
+      yield {
+        type: 'tx',
+        txRequest:
+          await cctpTransferStarter.approveTokenPrepareTransactionRequest({
+            amount: context.amount,
+            signer: context.signer
+          })
+      }
+    }
+
+    if (context.isSmartContractWallet) {
+      yield { type: 'scw_delay' }
+    }
   }
 }