wip

Author: spsjvc

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

@@ -452,6 +452,13 @@ export function TransferPanel() {
           return handleTxSigningError(error, step.payload.txRequestLabel)
         }
       }
+
+      case 'tx_history_add': {
+        addPendingTransaction(step.payload)
+        switchToTransactionHistoryTab()
+
+        return
+      }
     }
   }
 
@@ -472,22 +479,31 @@ export function TransferPanel() {
     const destinationAddress = latestDestinationAddress.current
 
     try {
-      const { sourceChainProvider, destinationChainProvider, sourceChain } =
-        latestNetworks.current
+      const {
+        sourceChainProvider,
+        destinationChainProvider,
+        sourceChain,
+        destinationChain
+      } = latestNetworks.current
 
       const cctpTransferStarter = new CctpTransferStarter({
         sourceChainProvider,
         destinationChainProvider
       })
 
       const returnEarly = await drive(stepGeneratorForCctp, stepExecutor, {
+        amount,
         amountBigNumber,
         isDepositMode,
         isSmartContractWallet,
         walletAddress,
         destinationAddress,
         transferStarter: cctpTransferStarter,
-        wagmiConfig
+        wagmiConfig,
+        sourceChain,
+        destinationChain,
+        childChain,
+        parentChain
       })
 
       // this is only necessary while we are migrating to the ui driver
@@ -498,94 +514,6 @@ export function TransferPanel() {
         return
       }
 
-      let depositForBurnTx
-
-      try {
-        if (isSmartContractWallet) {
-          showDelayedSmartContractTxRequest()
-        }
-        const transfer = await cctpTransferStarter.transfer({
-          amount: amountBigNumber,
-          signer,
-          destinationAddress,
-          wagmiConfig
-        })
-        depositForBurnTx = transfer.sourceChainTransaction
-      } catch (error) {
-        if (isUserRejectedError(error)) {
-          return
-        }
-        handleError({
-          error,
-          label: 'cctp_transfer',
-          category: 'transaction_signing'
-        })
-        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()
       clearRoute()

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

@@ -1,8 +1,11 @@
 import { BigNumber, providers } from 'ethers'
 import { BridgeTransferStarter } from '@/token-bridge-sdk/BridgeTransferStarter'
 import { Config, SimulateContractReturnType } from '@wagmi/core'
+import { Chain } from 'wagmi/chains'
 
 import { DialogType } from '../components/common/Dialog2'
+import { trackEvent } from '../util/AnalyticsUtils'
+import { MergedTransaction } from '../state/app/state'
 
 export type Dialog = Extract<
   DialogType,
@@ -13,13 +16,18 @@ export type Dialog = Extract<
 >
 
 export type UiDriverContext = {
+  amount: string
   amountBigNumber: BigNumber
   isDepositMode: boolean
   isSmartContractWallet: boolean
   walletAddress: string
   destinationAddress?: string
   transferStarter: BridgeTransferStarter
   wagmiConfig: Config
+  sourceChain: Chain
+  destinationChain: Chain
+  childChain: Chain
+  parentChain: Chain
 }
 
 export type UiDriverStep =
@@ -41,6 +49,17 @@ export type UiDriverStep =
         txRequestLabel: string
       }
     }
+  | {
+      type: 'analytics'
+      payload: {
+        event: Parameters<typeof trackEvent>[0]
+        properties?: Parameters<typeof trackEvent>[1]
+      }
+    }
+  | {
+      type: 'tx_history_add'
+      payload: MergedTransaction
+    }
 
 export type UiDriverStepType = UiDriverStep['type']
 
@@ -66,6 +85,10 @@ export type UiDriverStepResultFor<TStepType extends UiDriverStepType> =
     ? void
     : TStepType extends 'tx_ethers' | 'tx_wagmi'
     ? Result<providers.TransactionReceipt>
+    : TStepType extends 'analytics'
+    ? void
+    : TStepType extends 'tx_history_add'
+    ? void
     : never
 
 export type UiDriverStepGenerator<TStep extends UiDriverStep = UiDriverStep> = (

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

@@ -1,11 +1,18 @@
-import { step, UiDriverStepGenerator } from './UiDriver'
+import dayjs from 'dayjs'
+
+import { step, UiDriverStepGenerator, UiDriverContext } from './UiDriver'
 import {
   stepGeneratorForDialog,
   stepGeneratorForSmartContractWalletDestinationDialog,
   stepGeneratorForTransactionEthers,
   stepGeneratorForTransactionWagmi
 } from './UiDriverCommon'
 
+import { getNetworkName } from '../util/networks'
+import { DepositStatus, MergedTransaction } from '../state/app/state'
+import { AssetType } from '../hooks/arbTokenBridge.types'
+import { getUsdcTokenAddressFromSourceChainId } from '../state/cctpState'
+
 export const stepGeneratorForCctp: UiDriverStepGenerator = async function* (
   context
 ) {
@@ -41,9 +48,76 @@ export const stepGeneratorForCctp: UiDriverStepGenerator = async function* (
     wagmiConfig: context.wagmiConfig
   })
 
-  yield* stepGeneratorForTransactionWagmi(context, {
+  const receipt = yield* stepGeneratorForTransactionWagmi(context, {
     // @ts-expect-error - TODO: fix this
     txRequest: request,
     txRequestLabel: 'stepGeneratorForCctp.transfer'
   })
+
+  if (typeof receipt === 'undefined') {
+    return
+  }
+
+  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_history_add',
+    payload: createMergedTransaction(context, receipt.transactionHash)
+  }
+}
+
+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
+  }
 }