test: bump Synpress to v4

.eslintignore

@@ -1,9 +1,9 @@
 node_modules
 dist
-synpress.config.ts
-tailwind.config.js
+cypress.config.ts
+cypress.cctp.config.ts
+tailwind.config.mjs
 
-packages/arb-token-bridge/craco.config.js
-packages/arb-token-bridge/prettier.config.js
-packages/arb-token-bridge/build/static/js/*.js
-packages/arb-token-bridge/tests/**/*.ts
+packages/arb-token-bridge-ui/prettier.config.cjs
+packages/arb-token-bridge-ui/build/static/js/*.js
+packages/arb-token-bridge-ui/tests/**/*.ts

package.json

@@ -17,8 +17,8 @@
     "lint:fix": "yarn workspace arb-token-bridge-ui lint:fix",
     "postinstall": "yarn install:chromium",
     "install:chromium": "npx @puppeteer/browsers install chrome@$npm_package_config_chromeVersion --path $npm_package_config_chromePath",
-    "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile synpress.config.ts",
-    "test:e2e:cctp": "yarn test:e2e --configFile synpress.cctp.config.ts",
+    "test:e2e": "yarn workspace arb-token-bridge-ui env-cmd --silent --file .e2e.env yarn synpress run --configFile cypress.config.ts",
+    "test:e2e:cctp": "yarn test:e2e --configFile cypress.cctp.config.ts",
     "test:e2e:orbit": "E2E_ORBIT=true yarn test:e2e",
     "test:e2e:orbit:custom-gas-token": "E2E_ORBIT_CUSTOM_GAS_TOKEN=true yarn test:e2e"
   },

packages/arb-token-bridge-ui/.e2e.env.sample

@@ -14,9 +14,6 @@ PRIVATE_KEY_CUSTOM=b6b15c8cb491557369f3c7d2c287b053eb229daa9c22138887752191c9520
 
 PRIVATE_KEY_CCTP=
 
-# We set up MetaMask ourselves
-SKIP_METAMASK_SETUP=true
-
 # Private key of the user wallet with enough deposits and withdrawals on Sepolia to pass the tx history tests
 # Also funded by E2E_PRIVATE_KEY wallet and used for all the tests
 PRIVATE_KEY_USER=c791f745783e3545f83e7b4f0adcc0c2f591c5c8bc796e042c639824ec5d7bf0

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

@@ -1,8 +1,9 @@
 import { BigNumber, Contract, 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 { configureSynpressForMetaMask } from '@synthetixio/synpress/cypress'
+
 import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
 import {
   setupCypressTasks,
@@ -237,13 +238,20 @@ export default defineConfig({
         await createCctpTx('deposit', customAddress as Address, '0.00013')
       }
 
+      configureSynpressForMetaMask(on, config)
       setupCypressTasks(on, { requiresNetworkSetup: false })
-      synpressPlugins(on, config)
+
+      config.browsers = [
+        {
+          ...browserConfig,
+          family: 'chromium' // type issue if not added here
+        }
+      ]
+
       return config
     },
     baseUrl: 'http://localhost:3000',
     specPattern: tests,
-    supportFile: 'tests/support/index.ts',
-    browsers: [browserConfig]
+    supportFile: 'tests/support/e2e.ts',
   }
 })

packages/arb-token-bridge-ui/synpress.config.ts → packages/arb-token-bridge-ui/cypress.config.ts

@@ -9,7 +9,7 @@ import {
 import { formatUnits, parseUnits } from 'ethers/lib/utils'
 import { defineConfig } from 'cypress'
 import { StaticJsonRpcProvider } from '@ethersproject/providers'
-import synpressPlugins from '@synthetixio/synpress/plugins'
+import { configureSynpressForMetaMask } from '@synthetixio/synpress/cypress'
 import { TestERC20__factory } from '@arbitrum/sdk/dist/lib/abi/factories/TestERC20__factory'
 import { TestWETH9__factory } from '@arbitrum/sdk/dist/lib/abi/factories/TestWETH9__factory'
 import { Erc20Bridger, EthBridger } from '@arbitrum/sdk'
@@ -227,15 +227,23 @@ export default defineConfig({
       config.env.REDEEM_RETRYABLE_TEST_TX =
         await generateTestTxForRedeemRetryable()
 
-      synpressPlugins(on, config)
       setupCypressTasks(on, { requiresNetworkSetup: true })
+
+      config.browsers = [
+        {
+          ...browserConfig,
+          family: 'chromium' // type issue if not added here
+        }
+      ]
+
+      configureSynpressForMetaMask(on, config)
+
       return config
     },
     baseUrl: 'http://localhost:3000',
     specPattern: tests,
-    supportFile: 'tests/support/index.ts',
-    defaultCommandTimeout: 20_000,
-    browsers: [browserConfig]
+    supportFile: 'tests/support/e2e.ts',
+    defaultCommandTimeout: 20_000
   }
 })
 

packages/arb-token-bridge-ui/next.config.js → packages/arb-token-bridge-ui/next.config.mjs

@@ -4,7 +4,7 @@
  * @type {import('next').NextConfig}
  **/
 
-module.exports = {
+export default {
   distDir: 'build',
   productionBrowserSourceMaps: true,
   reactStrictMode: true,

packages/arb-token-bridge-ui/package.json

@@ -3,6 +3,7 @@
   "version": "3.3.0",
   "license": "Apache-2.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@apollo/client": "^3.7.11",
     "@arbitrum/sdk": "^4.0.2",
@@ -62,10 +63,10 @@
     "lint": "tsc && eslint 'src/**/*.{js,ts,tsx}'",
     "lint:fix": "tsc && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "prettier:format": "prettier --config-precedence file-override --write \"src/**/*.{tsx,ts,scss,md,json}\"",
-    "generateDenylist": "ts-node --project ./scripts/tsconfig.json ./scripts/generateDenylist.ts",
-    "generateOpenGraphImages": "ts-node --project ./scripts/tsconfig.json ./src/generateOpenGraphImages.tsx",
-    "generateCoreChainsToMonitor": "ts-node --project ./scripts/tsconfig.json ./scripts/generateCoreChainsToMonitor.ts",
-    "generateOrbitChainsToMonitor": "ts-node --project ./scripts/tsconfig.json ./scripts/generateOrbitChainsToMonitor.ts"
+    "generateDenylist": "env-cmd --silent --file .env tsx ./scripts/generateDenylist.ts",
+    "generateOpenGraphImages": "env-cmd --silent --file .env tsx ./scripts/generateOpenGraphImages.tsx",
+    "generateCoreChainsToMonitor": "env-cmd --silent --file .env tsx ./scripts/generateCoreChainsToMonitor.ts",
+    "generateOrbitChainsToMonitor": "env-cmd --silent --file .env tsx ./scripts/generateOrbitChainsToMonitor.ts"
   },
   "browserslist": {
     "production": [
@@ -83,11 +84,13 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.1.5",
-    "@synthetixio/synpress": "3.7.3",
+    "@synthetixio/synpress": "^4.0.5",
+    "@synthetixio/synpress-tsconfig": "^0.0.6",
+    "@testing-library/cypress": "^10.0.3",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.1",
     "@types/lodash-es": "^4.17.6",
-    "@types/node": "^16.6.1",
+    "@types/node": "^22.13.1",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -96,6 +99,7 @@
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^6.13.2",
     "autoprefixer": "^10.4.13",
+    "cypress": "^14.0.2",
     "cypress-terminal-report": "^5.3.10",
     "env-cmd": "^10.1.0",
     "eslint": "^7.32.0",
@@ -118,7 +122,7 @@
     "satori": "^0.12.0",
     "start-server-and-test": "^2.0.9",
     "tailwindcss": "^3.4.16",
-    "ts-node": "^10.9.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.2.2"
   }
 }

packages/arb-token-bridge-ui/postcss.config.ts

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/arb-token-bridge-ui/prettier.config.cjs

@@ -0,0 +1,17 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+
+  // Plugins
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: require('./tailwind.config.mjs')
+}

packages/arb-token-bridge-ui/src/generateOpenGraphImages.tsx → packages/arb-token-bridge-ui/scripts/generateOpenGraphImages.tsx

@@ -2,17 +2,11 @@ import React from 'react'
 import satori, { Font } from 'satori'
 import sharp from 'sharp'
 import fs from 'fs'
-import path from 'path'
-import dotenv from 'dotenv'
 
-// this has to be called before import from "networks.ts"
-// to ensure that the environment variables are loaded
-dotenv.config({ path: path.resolve(__dirname, '../.env') })
-
-import { isNetwork } from './util/networks'
-import { ChainId } from './types/ChainId'
-import { getBridgeUiConfigForChain } from './util/bridgeUiConfig'
-import { orbitMainnets, orbitTestnets } from './util/orbitChainsList'
+import { ChainId } from '../src/types/ChainId.js'
+import { getBridgeUiConfigForChain } from '../src/util/bridgeUiConfig.js'
+import { orbitMainnets, orbitTestnets } from '../src/util/orbitChainsList.js'
+import { isNetwork } from '../src/util/networks.js'
 
 const dimensions = {
   width: 1200,

packages/arb-token-bridge-ui/scripts/tsconfig.json

@@ -1,20 +1,6 @@
 {
-  // This is an alias to @tsconfig/node16: https://github.com/tsconfig/bases
-  "extends": "ts-node/node16/tsconfig.json",
-  // Most ts-node options can be specified here using their programmatic names.
-  "ts-node": {
-    // It is faster to skip typechecking.
-    // Remove if you want ts-node to do typechecking.
-    "transpileOnly": true,
-    "files": true,
-    "compilerOptions": {
-      // compilerOptions specified here will override those declared below,
-      // but *only* in ts-node.  Useful if you want ts-node and tsc to use
-      // different options with a single tsconfig.json.
-    }
-  },
   "compilerOptions": {
-    // typescript options here
+    "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "jsx": "react"
   }

packages/arb-token-bridge-ui/tests/basic.setup.ts

@@ -0,0 +1,20 @@
+import { defineWalletSetup } from '@synthetixio/synpress'
+import { MetaMask } from '@synthetixio/synpress/playwright'
+import 'dotenv/config'
+
+const SEED_PHRASE = process.env.SEED_PHRASE
+const PASSWORD = process.env.WALLET_PASSWORD
+
+if (!SEED_PHRASE) {
+    throw new Error('SEED_PHRASE must be set in .e2e.env')
+}
+
+if (!PASSWORD) {
+    throw new Error('WALLET_PASSWORD must be set in .e2e.env')
+}
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+  const metamask = new MetaMask(context, walletPage, PASSWORD)
+
+  await metamask.importWallet(SEED_PHRASE)
+})

packages/arb-token-bridge-ui/tests/e2e/browser.config.ts

@@ -1,5 +1,5 @@
-import { config as packageConfig } from '../../../../package.json'
 import { join, resolve } from 'path'
+import { config as packageConfig } from '../../../../package.json'
 
 const getBrowserPath = () => {
   const workspaceRoot = resolve(process.cwd(), '../..')
@@ -26,10 +26,12 @@ const getBrowserPath = () => {
 
 export const browserConfig = {
   name: 'chrome',
-  family: 'chromium',
   channel: 'stable',
+  family: 'chromium',
   displayName: 'Chromium',
   version: packageConfig.chromeVersion,
   majorVersion: packageConfig.chromeVersion.split('.')[0],
-  path: getBrowserPath()
+  path: getBrowserPath(),
+  isHeaded: true,
+  isHeadless: false
 }

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

@@ -16,7 +16,7 @@ import {
   findMoveFundsButton,
   clickMoveFundsButton,
   findSelectTokenButton,
-  openTransactionDetails,
+  openTransactionHistoryDetails,
   closeTransactionDetails,
   findTransactionDetailsCustomDestinationAddress,
   findTransactionInTransactionHistory,
@@ -64,7 +64,7 @@ declare global {
       findMoveFundsButton: typeof findMoveFundsButton
       clickMoveFundsButton: typeof clickMoveFundsButton
       findSelectTokenButton: typeof findSelectTokenButton
-      openTransactionDetails: typeof openTransactionDetails
+      openTransactionHistoryDetails: typeof openTransactionHistoryDetails
       closeTransactionDetails: typeof closeTransactionDetails
       switchToTransferPanelTab: typeof switchToTransferPanelTab
       switchToTransactionHistoryTab: typeof switchToTransactionHistoryTab

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

@@ -0,0 +1,10 @@
+declare global {
+    namespace NodeJS {
+      interface ProcessEnv {
+        SEED_PHRASE: string
+        WALLET_PASSWORD: string
+      }
+    }
+  }
+
+  export {}

packages/arb-token-bridge-ui/tests/e2e/getCommonSynpressConfig.ts

@@ -16,6 +16,6 @@ export function getCommonSynpressConfig(shouldRecordVideo: boolean) {
     },
     defaultCommandTimeout: 30000,
     pageLoadTimeout: 30000,
-    requestTimeout: 30000
+    requestTimeout: 30000,
   } as const satisfies Cypress.ConfigOptions
 }

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

@@ -34,24 +34,20 @@ describe('Approve token for deposit', () => {
       cy.findGasFeeForChain(getL1NetworkName(), zeroToLessThanOneEth)
       cy.findGasFeeForChain(getL2NetworkName(), zeroToLessThanOneNativeToken)
 
-      cy.waitUntil(() => cy.findMoveFundsButton().should('not.be.disabled'), {
-        errorMsg: 'move funds button is disabled (expected to be enabled)',
-        timeout: 50000,
-        interval: 500
-      })
+      cy.findMoveFundsButton().should('not.be.disabled')
       cy.clickMoveFundsButton({ shouldConfirmInMetamask: false })
       cy.findByText(/pay a one-time approval fee/).click()
       cy.findByRole('button', {
         name: /Pay approval fee of/
       }).click()
-      cy.confirmSpending('5')
+      cy.confirmSpending(5)
 
       /**
        * If confirm spending fails, test is still considered to be passing by Cypress
        * We add another check to make sure the test fails if needed
        */
       cy.wait(25_000)
-      cy.rejectMetamaskTransaction()
+      cy.rejectTransaction()
     })
   })
 })