From 476230d471aa468ce707ecfa9cb9e59f8bdca778 Mon Sep 17 00:00:00 2001
From: Christophe Deveaux <contact@christophedeveaux.com>
Date: Mon, 2 Sep 2024 16:13:15 +0200
Subject: [PATCH] test: add CCTP synpress config (#1861)

---
 package.json                                  |   2 +-
 packages/arb-token-bridge-ui/.e2e.env.sample  |   2 +
 .../TransferPanel/AdvancedSettings.tsx        |   1 +
 .../synpress.cctp.config.ts                   | 162 ++++++++++++++++++
 .../arb-token-bridge-ui/synpress.config.ts    |  91 ++--------
 .../tests/e2e/cypress.d.ts                    |  10 +-
 .../tests/e2e/getCommonSynpressConfig.ts      |  21 +++
 .../tests/e2e/specs/approveToken.cy.ts        |   4 +-
 .../tests/support/commands.ts                 | 109 +++---------
 .../tests/support/common.ts                   | 114 +++++++-----
 .../tests/support/index.ts                    |   3 +-
 tsconfig.eslint.json                          |   3 +-
 12 files changed, 313 insertions(+), 209 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/synpress.cctp.config.ts
 create mode 100644 packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts

diff --git a/package.json b/package.json
index 74e39a32d6..c60ae31523 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "lint": "yarn workspace arb-token-bridge-ui lint",
     "lint:fix": "yarn workspace arb-token-bridge-ui lint:fix",
     "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile synpress.config.ts",
-    "test:e2e:cctp": "E2E_CCTP=true yarn test:e2e",
+    "test:e2e:cctp": "yarn test:e2e --configFile synpress.cctp.config.ts",
     "test:e2e:orbit": "E2E_ORBIT=true yarn test:e2e"
   },
   "resolutions": {
diff --git a/packages/arb-token-bridge-ui/.e2e.env.sample b/packages/arb-token-bridge-ui/.e2e.env.sample
index 573ce3d690..28ca742afc 100644
--- a/packages/arb-token-bridge-ui/.e2e.env.sample
+++ b/packages/arb-token-bridge-ui/.e2e.env.sample
@@ -12,6 +12,8 @@ CYPRESS_RECORD_VIDEO=false
 # Below key is only used to fund the newly created wallet
 PRIVATE_KEY_CUSTOM=b6b15c8cb491557369f3c7d2c287b053eb229daa9c22138887752191c9520659
 
+PRIVATE_KEY_CCTP=
+
 # We set up MetaMask ourselves
 SKIP_METAMASK_SETUP=true
 
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
index ca44aef3ff..a6fb791c63 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx
@@ -263,6 +263,7 @@ export const AdvancedSettings = () => {
               onChange={e =>
                 setDestinationAddress(e.target.value?.toLowerCase().trim())
               }
+              aria-label="Custom Destination Address Input"
             />
             {isEOA && (
               <button
diff --git a/packages/arb-token-bridge-ui/synpress.cctp.config.ts b/packages/arb-token-bridge-ui/synpress.cctp.config.ts
new file mode 100644
index 0000000000..77de5afedf
--- /dev/null
+++ b/packages/arb-token-bridge-ui/synpress.cctp.config.ts
@@ -0,0 +1,162 @@
+import { BigNumber, Wallet, utils } from 'ethers'
+import { defineConfig } from 'cypress'
+import { Provider, StaticJsonRpcProvider } from '@ethersproject/providers'
+import synpressPlugins from '@synthetixio/synpress/plugins'
+import logsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
+import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
+import {
+  setupCypressTasks,
+  fundEth,
+  getCustomDestinationAddress,
+  NetworkType
+} from './tests/support/common'
+import specFiles from './tests/e2e/cctp.json'
+import { CommonAddress } from './src/util/CommonAddressUtils'
+import { ERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/ERC20__factory'
+
+export async function fundUsdc({
+  address, // wallet address where funding is required
+  provider,
+  amount,
+  networkType,
+  sourceWallet
+}: {
+  address: string
+  provider: Provider
+  amount: BigNumber
+  sourceWallet: Wallet
+  networkType: NetworkType
+}) {
+  console.log(`Funding USDC ${address} on ${networkType}...`)
+  const usdcContractAddress =
+    networkType === 'parentChain'
+      ? CommonAddress.Sepolia.USDC
+      : CommonAddress.ArbitrumSepolia.USDC
+
+  const contract = new ERC20__factory().connect(sourceWallet.connect(provider))
+  const token = contract.attach(usdcContractAddress)
+  await token.deployed()
+  const tx = await token.transfer(address, amount)
+  await tx.wait()
+}
+
+const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
+
+const tests = process.env.TEST_FILE
+  ? [process.env.TEST_FILE]
+  : specFiles.map(file => file.file)
+
+const INFURA_KEY = process.env.NEXT_PUBLIC_INFURA_KEY
+if (typeof INFURA_KEY === 'undefined') {
+  throw new Error('Infura API key not provided')
+}
+
+const SEPOLIA_INFURA_RPC_URL = `https://sepolia.infura.io/v3/${INFURA_KEY}`
+const sepoliaRpcUrl =
+  process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL ?? SEPOLIA_INFURA_RPC_URL
+const arbSepoliaRpcUrl = 'https://sepolia-rollup.arbitrum.io/rpc'
+
+const sepoliaProvider = new StaticJsonRpcProvider(sepoliaRpcUrl)
+const arbSepoliaProvider = new StaticJsonRpcProvider(arbSepoliaRpcUrl)
+
+if (!process.env.PRIVATE_KEY_CCTP) {
+  throw new Error('PRIVATE_KEY_CCTP variable missing.')
+}
+
+if (!process.env.PRIVATE_KEY_USER) {
+  throw new Error('PRIVATE_KEY_USER variable missing.')
+}
+
+// Wallet funded on Sepolia and ArbSepolia with ETH and USDC
+const localWallet = new Wallet(process.env.PRIVATE_KEY_CCTP)
+// Generate a new wallet every time
+const userWallet = Wallet.createRandom()
+
+async function fundWallets() {
+  const userWalletAddress = userWallet.address
+  console.log(`Funding wallet ${userWalletAddress}`)
+
+  const fundEthHelper = (network: 'sepolia' | 'arbSepolia') => {
+    return () =>
+      fundEth({
+        address: userWalletAddress,
+        sourceWallet: localWallet,
+        ...(network === 'sepolia'
+          ? {
+              provider: sepoliaProvider,
+              amount: ethAmountSepolia,
+              networkType: 'parentChain'
+            }
+          : {
+              provider: arbSepoliaProvider,
+              amount: ethAmountArbSepolia,
+              networkType: 'childChain'
+            })
+      })
+  }
+  const fundUsdcHelper = (network: 'sepolia' | 'arbSepolia') => {
+    return () =>
+      fundUsdc({
+        address: userWalletAddress,
+        sourceWallet: localWallet,
+        amount: usdcAmount,
+        ...(network === 'sepolia'
+          ? {
+              provider: sepoliaProvider,
+              networkType: 'parentChain'
+            }
+          : {
+              provider: arbSepoliaProvider,
+              networkType: 'childChain'
+            })
+      })
+  }
+
+  /**
+   * We need 0.0002 USDC per test (0.0001 for same address and 0.0001 for custom address)
+   * And in the worst case, we run each tests 3 time
+   */
+  const usdcAmount = utils.parseUnits('0.0006', 6)
+  const ethAmountSepolia = utils.parseEther('0.01')
+  const ethAmountArbSepolia = utils.parseEther('0.002')
+  const ethPromises: (() => Promise<void>)[] = []
+  const usdcPromises: (() => Promise<void>)[] = []
+
+  if (tests.some(testFile => testFile.includes('deposit'))) {
+    ethPromises.push(fundEthHelper('sepolia'))
+    usdcPromises.push(fundUsdcHelper('sepolia'))
+  }
+
+  if (tests.some(testFile => testFile.includes('withdraw'))) {
+    ethPromises.push(fundEthHelper('arbSepolia'))
+    usdcPromises.push(fundUsdcHelper('arbSepolia'))
+  }
+
+  await Promise.all(ethPromises.map(fn => fn()))
+  await Promise.all(usdcPromises.map(fn => fn()))
+}
+
+export default defineConfig({
+  ...getCommonSynpressConfig(shouldRecordVideo),
+  e2e: {
+    async setupNodeEvents(on, config) {
+      logsPrinter(on)
+
+      await fundWallets()
+
+      config.env.PRIVATE_KEY = userWallet.privateKey
+      config.env.PRIVATE_KEY_CCTP = process.env.PRIVATE_KEY_CCTP
+      config.env.SEPOLIA_INFURA_RPC_URL = sepoliaRpcUrl
+      config.env.ARB_SEPOLIA_INFURA_RPC_URL = arbSepoliaRpcUrl
+      config.env.CUSTOM_DESTINATION_ADDRESS =
+        await getCustomDestinationAddress()
+
+      setupCypressTasks(on, { requiresNetworkSetup: false })
+      synpressPlugins(on, config)
+      return config
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: tests,
+    supportFile: 'tests/support/index.ts'
+  }
+})
diff --git a/packages/arb-token-bridge-ui/synpress.config.ts b/packages/arb-token-bridge-ui/synpress.config.ts
index f0a528f108..7b85b3ede7 100644
--- a/packages/arb-token-bridge-ui/synpress.config.ts
+++ b/packages/arb-token-bridge-ui/synpress.config.ts
@@ -12,16 +12,17 @@ import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import synpressPlugins from '@synthetixio/synpress/plugins'
 import { TestWETH9__factory } from '@arbitrum/sdk/dist/lib/abi/factories/TestWETH9__factory'
 import { Erc20Bridger } from '@arbitrum/sdk'
+import logsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
 import { getL2ERC20Address } from './src/util/TokenUtils'
 import specFiles from './tests/e2e/specfiles.json'
-import cctpFiles from './tests/e2e/cctp.json'
 import { contractAbi, contractByteCode } from './testErc20Token'
 import {
-  NetworkName,
   checkForAssertions,
   generateActivityOnChains,
   NetworkType,
   fundEth,
+  setupCypressTasks,
+  getCustomDestinationAddress,
   ERC20TokenSymbol,
   ERC20TokenDecimals,
   ERC20TokenName
@@ -32,15 +33,11 @@ import {
   defaultL3Network,
   registerLocalNetwork
 } from './src/util/networks'
+import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
 
-let tests: string[]
-if (process.env.TEST_FILE) {
-  tests = [process.env.TEST_FILE]
-} else if (process.env.E2E_CCTP) {
-  tests = cctpFiles.map(file => file.file)
-} else {
-  tests = specFiles.map(file => file.file)
-}
+const tests = process.env.TEST_FILE
+  ? [process.env.TEST_FILE]
+  : specFiles.map(file => file.file)
 
 const isOrbitTest = process.env.E2E_ORBIT == 'true'
 const shouldRecordVideo = process.env.CYPRESS_RECORD_VIDEO === 'true'
@@ -58,27 +55,10 @@ const l2WethAddress = isOrbitTest
   : defaultL2Network.tokenBridge!.childWeth
 
 export default defineConfig({
-  userAgent: 'synpress',
-  retries: shouldRecordVideo ? 0 : 2,
-  screenshotsFolder: 'cypress/screenshots',
-  videosFolder: 'cypress/videos',
-  video: shouldRecordVideo,
-  screenshotOnRunFailure: true,
-  chromeWebSecurity: true,
-  modifyObstructiveCode: false,
-  scrollBehavior: false,
-  viewportWidth: 1366,
-  viewportHeight: 850,
-  env: {
-    coverage: false
-  },
-  defaultCommandTimeout: 30000,
-  pageLoadTimeout: 30000,
-  requestTimeout: 30000,
+  ...getCommonSynpressConfig(shouldRecordVideo),
   e2e: {
-    // @ts-ignore
     async setupNodeEvents(on, config) {
-      require('cypress-terminal-report/src/installLogsPrinter')(on)
+      logsPrinter(on)
       registerLocalNetwork()
 
       if (!ethRpcUrl && !isOrbitTest) {
@@ -101,18 +81,18 @@ export default defineConfig({
       // Fund the userWallet. We do this to run tests on a small amount of ETH.
       await Promise.all([
         fundEth({
-          networkType: 'parentChain',
           address: userWalletAddress,
-          parentProvider,
-          childProvider,
-          sourceWallet: localWallet
+          provider: parentProvider,
+          sourceWallet: localWallet,
+          amount: utils.parseEther('2'),
+          networkType: 'parentChain'
         }),
         fundEth({
-          networkType: 'childChain',
           address: userWalletAddress,
-          parentProvider,
-          childProvider,
-          sourceWallet: localWallet
+          provider: childProvider,
+          sourceWallet: localWallet,
+          amount: utils.parseEther('2'),
+          networkType: 'childChain'
         })
       ])
 
@@ -163,7 +143,7 @@ export default defineConfig({
         await generateTestTxForRedeemRetryable()
 
       synpressPlugins(on, config)
-      setupCypressTasks(on)
+      setupCypressTasks(on, { requiresNetworkSetup: true })
       return config
     },
     baseUrl: 'http://localhost:3000',
@@ -327,11 +307,6 @@ async function fundErc20ToChildChain(l1ERC20Token: Contract) {
   await depositRec.waitForChildTransactionReceipt(childProvider)
 }
 
-async function getCustomDestinationAddress() {
-  console.log('Getting custom destination address...')
-  return (await Wallet.createRandom().getAddress()).toLowerCase()
-}
-
 async function generateTestTxForRedeemRetryable() {
   console.log('Adding a test transaction for redeeming retryable...')
 
@@ -366,33 +341,3 @@ async function generateTestTxForRedeemRetryable() {
   const receipt = await tx.wait()
   return receipt.transactionHash
 }
-
-function setupCypressTasks(on: Cypress.PluginEvents) {
-  let currentNetworkName: NetworkName | null = null
-  let networkSetupComplete = false
-  let walletConnectedToDapp = false
-
-  on('task', {
-    setCurrentNetworkName: (networkName: NetworkName) => {
-      currentNetworkName = networkName
-      return null
-    },
-    getCurrentNetworkName: () => {
-      return currentNetworkName
-    },
-    setNetworkSetupComplete: () => {
-      networkSetupComplete = true
-      return null
-    },
-    getNetworkSetupComplete: () => {
-      return networkSetupComplete
-    },
-    setWalletConnectedToDapp: () => {
-      walletConnectedToDapp = true
-      return null
-    },
-    getWalletConnectedToDapp: () => {
-      return walletConnectedToDapp
-    }
-  })
-}
diff --git a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
index f9596e541e..bc371580ce 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts
@@ -5,9 +5,6 @@ import {
   login,
   logout,
   openTransactionsPanel,
-  resetCctpAllowance,
-  fundUserUsdcTestnet,
-  fundUserWalletEth,
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
@@ -23,7 +20,8 @@ import {
   findTransactionDetailsCustomDestinationAddress,
   findTransactionInTransactionHistory,
   findClaimButton,
-  selectTransactionsPanelTab
+  selectTransactionsPanelTab,
+  confirmSpending
 } from '../support/commands'
 import { NetworkType, NetworkName } from '../support/common'
 
@@ -45,9 +43,6 @@ declare global {
       logout(): typeof logout
       selectTransactionsPanelTab: typeof selectTransactionsPanelTab
       openTransactionsPanel: typeof openTransactionsPanel
-      resetCctpAllowance: typeof resetCctpAllowance
-      fundUserUsdcTestnet: typeof fundUserUsdcTestnet
-      fundUserWalletEth: typeof fundUserWalletEth
       searchAndSelectToken({
         tokenName,
         tokenAddress
@@ -69,6 +64,7 @@ declare global {
       findTransactionDetailsCustomDestinationAddress: typeof findTransactionDetailsCustomDestinationAddress
       findTransactionInTransactionHistory: typeof findTransactionInTransactionHistory
       findClaimButton: typeof findClaimButton
+      confirmSpending: typeof confirmSpending
     }
   }
 }
diff --git a/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts b/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts
new file mode 100644
index 0000000000..b74879e34a
--- /dev/null
+++ b/packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts
@@ -0,0 +1,21 @@
+export function getCommonSynpressConfig(shouldRecordVideo: boolean) {
+  return {
+    userAgent: 'synpress',
+    retries: shouldRecordVideo ? 0 : 2,
+    screenshotsFolder: 'cypress/screenshots',
+    videosFolder: 'cypress/videos',
+    video: shouldRecordVideo,
+    screenshotOnRunFailure: true,
+    chromeWebSecurity: true,
+    modifyObstructiveCode: false,
+    scrollBehavior: false,
+    viewportWidth: 1366,
+    viewportHeight: 850,
+    env: {
+      coverage: false
+    },
+    defaultCommandTimeout: 30000,
+    pageLoadTimeout: 30000,
+    requestTimeout: 30000
+  } as const satisfies Cypress.ConfigOptions
+}
diff --git a/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts b/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
index dedd71466d..ae22f84043 100644
--- a/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
+++ b/packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts
@@ -40,7 +40,9 @@ describe('Approve token for deposit', () => {
       cy.findByRole('button', {
         name: /Pay approval fee of/
       }).click()
-      cy.confirmMetamaskPermissionToSpend('1')
+      cy.confirmSpending('5')
+      cy.wait(10_000)
+      cy.rejectMetamaskTransaction()
     })
   })
 })
diff --git a/packages/arb-token-bridge-ui/tests/support/commands.ts b/packages/arb-token-bridge-ui/tests/support/commands.ts
index 6671c79693..ca7c54442d 100644
--- a/packages/arb-token-bridge-ui/tests/support/commands.ts
+++ b/packages/arb-token-bridge-ui/tests/support/commands.ts
@@ -13,14 +13,8 @@ import {
   NetworkName,
   startWebApp,
   getL1NetworkConfig,
-  getL2NetworkConfig,
-  getInitialERC20Balance
+  getL2NetworkConfig
 } from './common'
-import { Wallet, utils } from 'ethers'
-import { CommonAddress } from '../../src/util/CommonAddressUtils'
-import { StaticJsonRpcProvider } from '@ethersproject/providers'
-import { ERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/ERC20__factory'
-import { MULTICALL_TESTNET_ADDRESS } from '../../src/constants'
 import { shortenAddress } from '../../src/util/CommonUtils'
 
 function shouldChangeNetwork(networkName: NetworkName) {
@@ -56,7 +50,7 @@ export function login({
 
     // when testing Orbit chains we want to set destination chain to L3
     const destinationChain =
-      networkType === 'parentChain' && network.chainId === '412346'
+      networkType === 'parentChain' && network.chainId === 412346
         ? 'l3-localhost'
         : ''
     startWebApp(url, {
@@ -137,77 +131,6 @@ export const openTransactionsPanel = (tab: 'pending' | 'settled') => {
   )
 }
 
-const l1RpcUrl = Cypress.env('ETH_SEPOLIA_RPC_URL')
-const l2RpcUrl = Cypress.env('ARB_SEPOLIA_RPC_URL')
-const l1Provider = new StaticJsonRpcProvider(l1RpcUrl)
-const l2Provider = new StaticJsonRpcProvider(l2RpcUrl)
-const userWallet = new Wallet(Cypress.env('PRIVATE_KEY'))
-const localWallet = new Wallet(Cypress.env('LOCAL_WALLET_PRIVATE_KEY'))
-
-export async function resetCctpAllowance(networkType: NetworkType) {
-  const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-  const { USDC, tokenMessengerContractAddress } =
-    networkType === 'parentChain'
-      ? CommonAddress.Sepolia
-      : CommonAddress.ArbitrumSepolia
-
-  const contract = ERC20__factory.connect(USDC, userWallet.connect(provider))
-  const allowance = await contract.allowance(
-    userWallet.address,
-    tokenMessengerContractAddress
-  )
-  if (allowance.gt(0)) {
-    await contract.decreaseAllowance(tokenMessengerContractAddress, allowance)
-  }
-}
-
-export async function fundUserUsdcTestnet(networkType: NetworkType) {
-  console.log(`Funding USDC to user wallet (testnet): ${networkType}...`)
-  const usdcContractAddress =
-    networkType === 'parentChain'
-      ? CommonAddress.Sepolia.USDC
-      : CommonAddress.ArbitrumSepolia.USDC
-
-  const usdcBalance = await getInitialERC20Balance({
-    address: userWallet.address,
-    rpcURL: networkType === 'parentChain' ? l1RpcUrl : l2RpcUrl,
-    tokenAddress: usdcContractAddress,
-    multiCallerAddress: MULTICALL_TESTNET_ADDRESS
-  })
-
-  // Fund only if the balance is less than 0.0001 USDC
-  if (usdcBalance && usdcBalance.lt(utils.parseUnits('0.0001', 6))) {
-    console.log(`Adding USDC to user wallet (testnet): ${networkType}...`)
-    const l1Provider = new StaticJsonRpcProvider(l1RpcUrl)
-    const l2Provider = new StaticJsonRpcProvider(l2RpcUrl)
-    const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-    const contract = new ERC20__factory().connect(localWallet.connect(provider))
-    const token = contract.attach(usdcContractAddress)
-    await token.deployed()
-    const tx = await token.transfer(
-      userWallet.address,
-      utils.parseUnits('1', 6)
-    )
-    await tx.wait()
-  }
-}
-
-export async function fundUserWalletEth(networkType: NetworkType) {
-  console.log(`Funding ETH to user wallet (testnet): ${networkType}...`)
-  const address = await userWallet.getAddress()
-  const provider = networkType === 'parentChain' ? l1Provider : l2Provider
-  const balance = await provider.getBalance(address)
-  // Fund only if the balance is less than 0.005 eth
-  const amountToTransfer = '0.005'
-  if (balance.lt(utils.parseEther(amountToTransfer))) {
-    const tx = await localWallet.connect(provider).sendTransaction({
-      to: address,
-      value: utils.parseEther(amountToTransfer)
-    })
-    await tx.wait()
-  }
-}
-
 export const searchAndSelectToken = ({
   tokenName,
   tokenAddress
@@ -244,7 +167,7 @@ export const fillCustomDestinationAddress = () => {
     .should('be.visible')
     .click()
 
-  cy.findByPlaceholderText(Cypress.env('ADDRESS'))
+  cy.findByLabelText('Custom Destination Address Input')
     .should('be.visible')
     .type(Cypress.env('CUSTOM_DESTINATION_ADDRESS'))
 }
@@ -378,15 +301,32 @@ export function findClaimButton(
   return cy.findByLabelText(`Claim ${amountToClaim}`)
 }
 
+/**
+ * Currently, Synpress confirmMetamaskPermissionToSpend is clicking only once
+ * We need to call it twice to confirm it.
+ * shouldWaitForPopupClosure needs to be set to true for the test to pass
+ */
+export function confirmSpending(
+  spendLimit: Parameters<
+    typeof cy.confirmMetamaskPermissionToSpend
+  >[0]['spendLimit']
+) {
+  cy.confirmMetamaskPermissionToSpend({
+    spendLimit,
+    shouldWaitForPopupClosure: true
+  })
+  cy.confirmMetamaskPermissionToSpend({
+    spendLimit,
+    shouldWaitForPopupClosure: true
+  })
+}
+
 Cypress.Commands.addAll({
   connectToApp,
   login,
   logout,
   openTransactionsPanel,
   selectTransactionsPanelTab,
-  resetCctpAllowance,
-  fundUserUsdcTestnet,
-  fundUserWalletEth,
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
@@ -401,5 +341,6 @@ Cypress.Commands.addAll({
   closeTransactionDetails,
   findTransactionInTransactionHistory,
   findClaimButton,
-  findTransactionDetailsCustomDestinationAddress
+  findTransactionDetailsCustomDestinationAddress,
+  confirmSpending
 })
diff --git a/packages/arb-token-bridge-ui/tests/support/common.ts b/packages/arb-token-bridge-ui/tests/support/common.ts
index d17eab02db..b1cc0011b1 100644
--- a/packages/arb-token-bridge-ui/tests/support/common.ts
+++ b/packages/arb-token-bridge-ui/tests/support/common.ts
@@ -21,7 +21,7 @@ export type NetworkName =
 type NetworkConfig = {
   networkName: NetworkName
   rpcUrl: string
-  chainId: string
+  chainId: number
   symbol: string
   isTestnet: boolean
   multiCall: string
@@ -43,7 +43,7 @@ export const getL1NetworkConfig = (): NetworkConfig => {
   return {
     networkName: isOrbitTest ? 'arbitrum-localhost' : 'custom-localhost',
     rpcUrl: Cypress.env('ETH_RPC_URL'),
-    chainId: isOrbitTest ? '412346' : '1337',
+    chainId: isOrbitTest ? 412346 : 1337,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: isOrbitTest
@@ -58,7 +58,7 @@ export const getL2NetworkConfig = (): NetworkConfig => {
   return {
     networkName: isOrbitTest ? 'l3-localhost' : 'arbitrum-localhost',
     rpcUrl: Cypress.env('ARB_RPC_URL'),
-    chainId: isOrbitTest ? '333333' : '412346',
+    chainId: isOrbitTest ? 333333 : 412346,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: isOrbitTest
@@ -71,7 +71,7 @@ export const getL1TestnetNetworkConfig = (): NetworkConfig => {
   return {
     networkName: 'sepolia',
     rpcUrl: Cypress.env('ETH_SEPOLIA_RPC_URL'),
-    chainId: '11155111',
+    chainId: 11155111,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: MULTICALL_TESTNET_ADDRESS
@@ -82,7 +82,7 @@ export const getL2TestnetNetworkConfig = (): NetworkConfig => {
   return {
     networkName: 'arbitrum-sepolia',
     rpcUrl: Cypress.env('ARB_SEPOLIA_RPC_URL'),
-    chainId: '421614',
+    chainId: 421614,
     symbol: 'ETH',
     isTestnet: true,
     multiCall: MULTICALL_TESTNET_ADDRESS
@@ -181,33 +181,6 @@ export const wait = (ms = 0): Promise<void> => {
   return new Promise(res => setTimeout(res, ms))
 }
 
-export async function fundEth({
-  address, // wallet address where funding is required
-  networkType, // parentChain or childChain
-  parentProvider,
-  childProvider,
-  sourceWallet // source wallet that will fund the `address`
-}: {
-  address: string
-  parentProvider: Provider
-  childProvider: Provider
-  sourceWallet: Wallet
-  networkType: NetworkType
-}) {
-  console.log(`Funding ETH to user wallet: ${networkType}...`)
-  const provider =
-    networkType === 'parentChain' ? parentProvider : childProvider
-  const balance = await provider.getBalance(address)
-  // Fund only if the balance is less than 2 eth
-  if (balance.lt(utils.parseEther('2'))) {
-    const tx = await sourceWallet.connect(provider).sendTransaction({
-      to: address,
-      value: utils.parseEther('2')
-    })
-    await tx.wait()
-  }
-}
-
 export async function generateActivityOnChains({
   parentProvider,
   childProvider,
@@ -236,20 +209,18 @@ export async function generateActivityOnChains({
   const minerParent = Wallet.createRandom().connect(parentProvider)
   await fundEth({
     address: await minerParent.getAddress(),
-    networkType: 'parentChain',
-    parentProvider,
-    childProvider,
-    sourceWallet: wallet
+    provider: parentProvider,
+    sourceWallet: wallet,
+    networkType: 'parentChain'
   })
 
   console.log('Generating activity on childChain...')
   const minerChild = Wallet.createRandom().connect(childProvider)
   await fundEth({
     address: await minerChild.getAddress(),
-    networkType: 'childChain',
-    parentProvider,
-    childProvider,
-    sourceWallet: wallet
+    provider: childProvider,
+    sourceWallet: wallet,
+    networkType: 'childChain'
   })
 
   await Promise.allSettled([keepMining(minerParent), keepMining(minerChild)])
@@ -293,3 +264,66 @@ export async function checkForAssertions({
     )
   }
 }
+
+export async function fundEth({
+  address, // wallet address where funding is required
+  provider,
+  sourceWallet, // source wallet that will fund the `address`,
+  networkType,
+  amount = utils.parseEther('2')
+}: {
+  address: string
+  provider: Provider
+  sourceWallet: Wallet
+  networkType: NetworkType
+  amount?: BigNumber
+}) {
+  console.log(`Funding ETH ${address} on ${networkType}...`)
+  const balance = await provider.getBalance(address)
+  // Fund only if the balance is less than 2 eth
+  if (balance.lt(amount)) {
+    const tx = await sourceWallet.connect(provider).sendTransaction({
+      to: address,
+      value: amount
+    })
+    await tx.wait()
+  }
+}
+
+export async function getCustomDestinationAddress() {
+  console.log('Getting custom destination address...')
+  return (await Wallet.createRandom().getAddress()).toLowerCase()
+}
+
+export function setupCypressTasks(
+  on: Cypress.PluginEvents,
+  { requiresNetworkSetup }: { requiresNetworkSetup: boolean }
+) {
+  let currentNetworkName: NetworkName | null = null
+  let networkSetupComplete = !requiresNetworkSetup
+  let walletConnectedToDapp = false
+
+  on('task', {
+    setCurrentNetworkName: (networkName: NetworkName) => {
+      currentNetworkName = networkName
+      return null
+    },
+    getCurrentNetworkName: () => {
+      return currentNetworkName
+    },
+    setNetworkSetupComplete: () => {
+      networkSetupComplete = true
+      return null
+    },
+    getNetworkSetupComplete: () => {
+      return networkSetupComplete
+    },
+    setWalletConnectedToDapp: () => {
+      walletConnectedToDapp = true
+      return null
+    },
+    getWalletConnectedToDapp: () => {
+      return walletConnectedToDapp
+    }
+  })
+}
diff --git a/packages/arb-token-bridge-ui/tests/support/index.ts b/packages/arb-token-bridge-ui/tests/support/index.ts
index 7d992ca6e9..e02bb38ad5 100644
--- a/packages/arb-token-bridge-ui/tests/support/index.ts
+++ b/packages/arb-token-bridge-ui/tests/support/index.ts
@@ -1,4 +1,3 @@
-import './commands'
 import '@synthetixio/synpress/support'
 import logCollector from 'cypress-terminal-report/src/installLogsCollector'
 
@@ -7,6 +6,7 @@ import {
   getL2NetworkConfig,
   getL2TestnetNetworkConfig
 } from './common'
+import './commands'
 
 logCollector({
   collectTypes: [
@@ -15,7 +15,6 @@ logCollector({
     'cons:debug',
     'cons:error',
     'cons:info',
-    'cons:log',
     'cons:warn'
   ]
 })
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index 456b61d6a1..d0a591b7ca 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -10,6 +10,7 @@
     // adding eslintrc here fixes eslint from throwing an error
     // https://stackoverflow.com/questions/63118405/how-to-fix-eslintrc-the-file-does-not-match-your-project-config
     ".eslintrc.js",
-    "./packages/arb-token-bridge-ui/tests/**/*.ts"
+    "./packages/arb-token-bridge-ui/tests/**/*.ts",
+    "./packages/arb-token-bridge-ui/synpress*.ts"
   ]
 }