refactor: add ui driver for cctp (part 4)

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

@@ -422,6 +422,12 @@ export function TransferPanel() {
         }
       }
 
+      case 'analytics':
+        return trackEvent(step.payload.event, step.payload.properties)
+
+      case 'tx_add_pending':
+        return addPendingTransaction(step.payload)
+
       case 'scw_delay':
         return showDelayedSmartContractTxRequest()
 
@@ -466,18 +472,27 @@ export function TransferPanel() {
     setTransferring(true)
 
     try {
-      const { sourceChainProvider, destinationChainProvider, sourceChain } =
-        networks
+      const {
+        sourceChain,
+        sourceChainProvider,
+        destinationChain,
+        destinationChainProvider
+      } = networks
 
       const steps = CctpUiDriver.createSteps({
         isDepositMode,
         isSmartContractWallet,
         walletAddress,
         destinationAddress,
+        sourceChain,
         sourceChainProvider,
+        destinationChain,
         destinationChainProvider,
-        amount: amountBigNumber,
-        signer
+        amount,
+        amountBigNumber,
+        signer,
+        parentChain,
+        childChain
       })
 
       let nextStep = await steps.next()
@@ -496,93 +511,6 @@ export function TransferPanel() {
         nextStep = await steps.next(result)
       }
 
-      let depositForBurnTx
-
-      try {
-        const cctpTransferStarter = new CctpTransferStarter({
-          sourceChainProvider,
-          destinationChainProvider
-        })
-
-        const transfer = await cctpTransferStarter.transfer({
-          amount: amountBigNumber,
-          signer,
-          destinationAddress
-        })
-        depositForBurnTx = transfer.sourceChainTransaction
-      } catch (error) {
-        if (isUserRejectedError(error)) {
-          return
-        }
-        captureSentryErrorWithExtraData({
-          error,
-          originFunction: 'cctpTransferStarter.transfer'
-        })
-        errorToast(
-          `USDC ${
-            isDepositMode ? 'Deposit' : 'Withdrawal'
-          } transaction failed: ${(error as Error)?.message ?? error}`
-        )
-      }
-
-      const childChainName = getNetworkName(childChain.id)
-
-      if (isSmartContractWallet) {
-        // For SCW, we assume that the transaction went through
-        trackEvent(isDepositMode ? 'CCTP Deposit' : 'CCTP Withdrawal', {
-          accountType: 'Smart Contract',
-          network: childChainName,
-          amount: Number(amount),
-          complete: false,
-          version: 2
-        })
-
-        return
-      }
-
-      if (!depositForBurnTx) {
-        return
-      }
-
-      trackEvent(isDepositMode ? 'CCTP Deposit' : 'CCTP Withdrawal', {
-        accountType: 'EOA',
-        network: childChainName,
-        amount: Number(amount),
-        complete: false,
-        version: 2
-      })
-
-      const newTransfer: MergedTransaction = {
-        txId: depositForBurnTx.hash,
-        asset: 'USDC',
-        assetType: AssetType.ERC20,
-        blockNum: null,
-        createdAt: dayjs().valueOf(),
-        direction: isDepositMode ? 'deposit' : 'withdraw',
-        isWithdrawal: !isDepositMode,
-        resolvedAt: null,
-        status: 'pending',
-        uniqueId: null,
-        value: amount,
-        depositStatus: DepositStatus.CCTP_DEFAULT_STATE,
-        destination: destinationAddress ?? walletAddress,
-        sender: walletAddress,
-        isCctp: true,
-        tokenAddress: getUsdcTokenAddressFromSourceChainId(sourceChain.id),
-        cctpData: {
-          sourceChainId: sourceChain.id,
-          attestationHash: null,
-          messageBytes: null,
-          receiveMessageTransactionHash: null,
-          receiveMessageTimestamp: null
-        },
-        parentChainId: parentChain.id,
-        childChainId: childChain.id,
-        sourceChainId: networks.sourceChain.id,
-        destinationChainId: networks.destinationChain.id
-      }
-
-      addPendingTransaction(newTransfer)
       switchToTransactionHistoryTab()
       setTransferring(false)
       clearAmountInput()

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

@@ -106,7 +106,11 @@ export class CctpTransferStarter extends BridgeTransferStarter {
     return undefined
   }
 
-  public async transfer({ signer, amount, destinationAddress }: TransferProps) {
+  public async transferPrepareTransactionRequest({
+    signer,
+    amount,
+    destinationAddress
+  }: TransferProps) {
     const sourceChainId = await getChainIdFromProvider(this.sourceChainProvider)
 
     const address = await getAddressFromSigner(signer)
@@ -149,7 +153,17 @@ export class CctpTransferStarter extends BridgeTransferStarter {
       args: [amount, targetChainDomain, mintRecipient, usdcContractAddress]
     })
 
-    const depositForBurnTx = await writeContract(config)
+    return config
+  }
+
+  public async transfer({ signer, amount, destinationAddress }: TransferProps) {
+    const depositForBurnTx = await writeContract(
+      await this.transferPrepareTransactionRequest({
+        signer,
+        amount,
+        destinationAddress
+      })
+    )
 
     return {
       transferType: this.transferType,

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

@@ -1,6 +1,17 @@
 import { CctpTransferStarter } from '@/token-bridge-sdk/CctpTransferStarter'
-import { Provider, TransactionRequest } from '@ethersproject/providers'
+import {
+  Provider,
+  TransactionReceipt,
+  TransactionRequest
+} from '@ethersproject/providers'
 import { BigNumber, Signer } from 'ethers'
+import { trackEvent } from '../util/AnalyticsUtils'
+import { DepositStatus, MergedTransaction } from '../state/app/state'
+import { AssetType } from '../hooks/arbTokenBridge.types'
+import dayjs from 'dayjs'
+import { Chain } from 'wagmi'
+import { getUsdcTokenAddressFromSourceChainId } from '../state/cctpState'
+import { getNetworkName } from '../util/networks'
 
 export type Dialog =
   | 'cctp_deposit'
@@ -18,9 +29,24 @@ export type UiDriverStepTransaction = {
   txRequest: TransactionRequest
 }
 
+export type UiDriverStepAddPendingTransaction = {
+  type: 'tx_add_pending'
+  payload: MergedTransaction
+}
+
+export type UiDriverStepAnalytics = {
+  type: 'analytics'
+  payload: {
+    event: Parameters<typeof trackEvent>[0]
+    properties?: Parameters<typeof trackEvent>[1]
+  }
+}
+
 export type UiDriverStep =
   | UiDriverStepDialog
   | UiDriverStepTransaction
+  | UiDriverStepAnalytics
+  | UiDriverStepAddPendingTransaction
   | { type: 'deposit_usdc.e' }
   | { type: 'scw_delay' }
   | { type: 'return' }
@@ -30,10 +56,15 @@ export type UiDriverContext = {
   isSmartContractWallet: boolean
   walletAddress?: string
   destinationAddress?: string
+  sourceChain: Chain
   sourceChainProvider: Provider
+  destinationChain: Chain
   destinationChainProvider: Provider
   signer: Signer
-  amount: BigNumber
+  amount: string
+  amountBigNumber: BigNumber
+  parentChain: Chain
+  childChain: Chain
 }
 
 export class CctpUiDriver {
@@ -85,7 +116,7 @@ export class CctpUiDriver {
 
     const isTokenApprovalRequired =
       await cctpTransferStarter.requiresTokenApproval({
-        amount: context.amount,
+        amount: context.amountBigNumber,
         signer: context.signer
       })
 
@@ -107,7 +138,7 @@ export class CctpUiDriver {
         type: 'tx',
         txRequest:
           await cctpTransferStarter.approveTokenPrepareTransactionRequest({
-            amount: context.amount,
+            amount: context.amountBigNumber,
             signer: context.signer
           })
       }
@@ -116,6 +147,37 @@ export class CctpUiDriver {
     if (context.isSmartContractWallet) {
       yield { type: 'scw_delay' }
     }
+
+    const something =
+      await cctpTransferStarter.transferPrepareTransactionRequest({
+        amount: context.amountBigNumber,
+        signer: context.signer,
+        destinationAddress: context.destinationAddress
+      })
+
+    const receipt: TransactionReceipt = yield {
+      type: 'tx',
+      txRequest: something.request
+    }
+
+    yield {
+      type: 'analytics',
+      payload: {
+        event: context.isDepositMode ? 'CCTP Deposit' : 'CCTP Withdrawal',
+        properties: {
+          accountType: context.isSmartContractWallet ? 'Smart Contract' : 'EOA',
+          network: getNetworkName(context.childChain.id),
+          amount: Number(context.amount),
+          complete: false,
+          version: 2
+        }
+      }
+    }
+
+    yield {
+      type: 'tx_add_pending',
+      payload: createMergedTransaction(context, receipt.transactionHash)
+    }
   }
 }
 
@@ -125,3 +187,47 @@ function addressesEqual(
 ) {
   return address1?.trim().toLowerCase() === address2?.trim().toLowerCase()
 }
+
+function createMergedTransaction(
+  {
+    isDepositMode,
+    walletAddress,
+    destinationAddress,
+    sourceChain,
+    destinationChain,
+    amount,
+    parentChain,
+    childChain
+  }: UiDriverContext,
+  depositForBurnTxHash: string
+): MergedTransaction {
+  return {
+    txId: depositForBurnTxHash,
+    asset: 'USDC',
+    assetType: AssetType.ERC20,
+    blockNum: null,
+    createdAt: dayjs().valueOf(),
+    direction: isDepositMode ? 'deposit' : 'withdraw',
+    isWithdrawal: !isDepositMode,
+    resolvedAt: null,
+    status: 'pending',
+    uniqueId: null,
+    value: amount,
+    depositStatus: DepositStatus.CCTP_DEFAULT_STATE,
+    destination: destinationAddress ?? walletAddress,
+    sender: walletAddress,
+    isCctp: true,
+    tokenAddress: getUsdcTokenAddressFromSourceChainId(sourceChain.id),
+    cctpData: {
+      sourceChainId: sourceChain.id,
+      attestationHash: null,
+      messageBytes: null,
+      receiveMessageTransactionHash: null,
+      receiveMessageTimestamp: null
+    },
+    parentChainId: parentChain.id,
+    childChainId: childChain.id,
+    sourceChainId: sourceChain.id,
+    destinationChainId: destinationChain.id
+  }
+}