test: Add CCTP synpress config

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": {

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
 

packages/arb-token-bridge-ui/synpress.cctp.config.ts

@@ -0,0 +1,135 @@
+import { Wallet, utils } from 'ethers'
+import { defineConfig } from 'cypress'
+import { 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,
+  fundUsdc,
+  getCustomDestinationAddress
+} from './tests/support/common'
+import specFiles from './tests/e2e/cctp.json'
+import { sepolia } from 'wagmi'
+
+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 ARB_SEPOLIA_INFURA_RPC_URL = `https://arbitrum-sepolia.infura.io/v3/${INFURA_KEY}`
+
+const sepoliaProvider = new StaticJsonRpcProvider(SEPOLIA_INFURA_RPC_URL)
+const arbSepoliaProvider = new StaticJsonRpcProvider(ARB_SEPOLIA_INFURA_RPC_URL)
+
+if (!process.env.PRIVATE_KEY_CCTP) {
+  throw new Error('PRIVATE_KEY_CCTP 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()
+
+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.')
+}
+
+async function fundWallets() {
+  const userWalletAddress = await userWallet.getAddress()
+  console.log(`Funding wallet ${userWalletAddress}`)
+
+  const fundEthHelper = (network: 'sepolia' | 'arbSepolia') => {
+    return () =>
+      fundEth({
+        address: userWalletAddress,
+        sourceWallet: localWallet,
+        ...(network === 'sepolia'
+          ? {
+              provider: sepoliaProvider,
+              amount: ethAmountSepolia
+            }
+          : {
+              provider: arbSepoliaProvider,
+              amount: ethAmountArbSepolia
+            })
+      })
+  }
+  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 = SEPOLIA_INFURA_RPC_URL
+      config.env.ARB_SEPOLIA_INFURA_RPC_URL = ARB_SEPOLIA_INFURA_RPC_URL
+      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'
+  }
+})

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,16 @@ 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')
         }),
         fundEth({
-          networkType: 'childChain',
           address: userWalletAddress,
-          parentProvider,
-          childProvider,
-          sourceWallet: localWallet
+          provider: childProvider,
+          sourceWallet: localWallet,
+          amount: utils.parseEther('2')
         })
       ])
 
@@ -163,7 +141,7 @@ export default defineConfig({
         await generateTestTxForRedeemRetryable()
 
       synpressPlugins(on, config)
-      setupCypressTasks(on)
+      setupCypressTasks(on, { requiresNetworkSetup: true })
       return config
     },
     baseUrl: 'http://localhost:3000',
@@ -327,11 +305,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 +339,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
-    }
-  })
-}

packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts

@@ -5,9 +5,6 @@ import {
   login,
   logout,
   openTransactionsPanel,
-  resetCctpAllowance,
-  fundUserUsdcTestnet,
-  fundUserWalletEth,
   searchAndSelectToken,
   fillCustomDestinationAddress,
   typeAmount,
@@ -22,7 +19,8 @@ import {
   findTransactionDetailsCustomDestinationAddress,
   findTransactionInTransactionHistory,
   findClaimButton,
-  selectTransactionsPanelTab
+  selectTransactionsPanelTab,
+  confirmSpending
 } from '../support/commands'
 import { NetworkType, NetworkName } from '../support/common'
 
@@ -44,9 +42,6 @@ declare global {
       logout(): typeof logout
       selectTransactionsPanelTab: typeof selectTransactionsPanelTab
       openTransactionsPanel: typeof openTransactionsPanel
-      resetCctpAllowance: typeof resetCctpAllowance
-      fundUserUsdcTestnet: typeof fundUserUsdcTestnet
-      fundUserWalletEth: typeof fundUserWalletEth
       typeRecursively(text: string): Chainable<JQuery<HTMLElement>>
       searchAndSelectToken({
         tokenName,
@@ -68,6 +63,7 @@ declare global {
       findTransactionDetailsCustomDestinationAddress: typeof findTransactionDetailsCustomDestinationAddress
       findTransactionInTransactionHistory: typeof findTransactionInTransactionHistory
       findClaimButton: typeof findClaimButton
+      confirmSpending: typeof confirmSpending
     }
   }
 }

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
+}

packages/arb-token-bridge-ui/tests/e2e/specs/approveToken.cy.ts

@@ -40,7 +40,7 @@ describe('Approve token for deposit', () => {
       cy.findByRole('button', {
         name: /Pay approval fee of/
       }).click()
-      cy.confirmMetamaskPermissionToSpend('1')
+      cy.confirmSpending({ spendLimit: '1' })
     })
   })
 })