refactor: add wagmi tx step type to ui driver

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

@@ -4,6 +4,7 @@ import Tippy from '@tippyjs/react'
 import { constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
 import { useAccount, useConfig } from 'wagmi'
+import { writeContract } from '@wagmi/core'
 import { TransactionResponse } from '@ethersproject/providers'
 import { twMerge } from 'tailwind-merge'
 import { scaleFrom18DecimalsToNativeTokenDecimals } from '@arbitrum/sdk'
@@ -383,6 +384,21 @@ export function TransferPanel() {
     return true
   }
 
+  const handleTxSigningError = (error: unknown, txRequestLabel: string) => {
+    // capture error and show toast for anything that's not user rejecting error
+    if (!isUserRejectedError(error)) {
+      handleError({
+        error,
+        label: txRequestLabel,
+        category: 'transaction_signing'
+      })
+
+      errorToast(`${(error as Error)?.message ?? error}`)
+    }
+
+    return { error: error as unknown as Error }
+  }
+
   const stepExecutor: UiDriverStepExecutor = async (context, step) => {
     if (process.env.NODE_ENV === 'development') {
       console.log(step)
@@ -416,18 +432,24 @@ export function TransferPanel() {
 
           return { data: txReceipt }
         } catch (error) {
-          // capture error and show toast for anything that's not user rejecting error
-          if (!isUserRejectedError(error)) {
-            handleError({
-              error,
-              label: step.payload.txRequestLabel,
-              category: 'transaction_signing'
-            })
-
-            errorToast(`${(error as Error)?.message ?? error}`)
-          }
+          return handleTxSigningError(error, step.payload.txRequestLabel)
+        }
+      }
+
+      case 'tx_wagmi': {
+        try {
+          const txHash = await writeContract(
+            wagmiConfig,
+            step.payload.txRequest.request
+          )
+          const txReceipt =
+            await context.transferStarter.sourceChainProvider.waitForTransaction(
+              txHash
+            )
 
-          return { error: error as unknown as Error }
+          return { data: txReceipt }
+        } catch (error) {
+          return handleTxSigningError(error, step.payload.txRequestLabel)
         }
       }
     }

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

@@ -1,5 +1,6 @@
 import { BigNumber, providers } from 'ethers'
 import { BridgeTransferStarter } from '@/token-bridge-sdk/BridgeTransferStarter'
+import { SimulateContractReturnType } from '@wagmi/core'
 
 import { DialogType } from '../components/common/Dialog2'
 
@@ -32,6 +33,13 @@ export type UiDriverStep =
         txRequestLabel: string
       }
     }
+  | {
+      type: 'tx_wagmi'
+      payload: {
+        txRequest: SimulateContractReturnType
+        txRequestLabel: string
+      }
+    }
 
 export type UiDriverStepType = UiDriverStep['type']
 
@@ -55,7 +63,7 @@ export type UiDriverStepResultFor<TStepType extends UiDriverStepType> =
     ? boolean
     : TStepType extends 'scw_tooltip'
     ? void
-    : TStepType extends 'tx_ethers'
+    : TStepType extends 'tx_ethers' | 'tx_wagmi'
     ? Result<providers.TransactionReceipt>
     : never
 

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

@@ -61,3 +61,29 @@ export const stepGeneratorForTransactionEthers: UiDriverStepGeneratorForTransact
       return data
     }
   }
+
+export type UiDriverStepGeneratorForTransactionWagmi<
+  TStep extends UiDriverStep = UiDriverStep
+> = (
+  context: UiDriverContext,
+  payload: UiDriverStepPayloadFor<'tx_wagmi'>
+) => AsyncGenerator<
+  TStep,
+  providers.TransactionReceipt | void,
+  UiDriverStepResultFor<TStep['type']>
+>
+
+export const stepGeneratorForTransactionWagmi: UiDriverStepGeneratorForTransactionWagmi =
+  async function* (context, payload) {
+    if (context.isSmartContractWallet) {
+      yield* step({ type: 'scw_tooltip' })
+    }
+
+    const { error, data } = yield* step({ type: 'tx_wagmi', payload })
+
+    if (typeof error !== 'undefined') {
+      yield* step({ type: 'return' })
+    } else {
+      return data
+    }
+  }