test: bump Synpress to v4

.eslintignore

@@ -1,9 +1,12 @@
 node_modules
 dist
-synpress.config.ts
+cypress.config.ts
+cypress.cctp.config.ts
 tailwind.config.js
+additional.d.ts
+jest.config.ts
+postcss.config.js
 
-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.js
+packages/arb-token-bridge-ui/build/static/js/*.js
+packages/arb-token-bridge-ui/tests/**/*.ts

.eslintrc.js

@@ -6,6 +6,14 @@ module.exports = {
     "plugin:jest/recommended",
     "next",
   ],
+  overrides: [
+    {
+      files: ["*.config.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: ["./tsconfig.eslint.json", "./packages/*/tsconfig.json"],

.gitignore

@@ -4,4 +4,6 @@ yarn-error.log
 .DS_Store
 tsconfig.tsbuildinfo
 __auto-generated-denylist.json
-
+.cache-synpress
+**/downloads
+**/cypress/screenshots

.prettierignore

@@ -4,3 +4,4 @@
 **/dist
 .github/
 **/src/styles/
+**/.cache-synpress

package.json

@@ -15,10 +15,9 @@
     "prettier:format": "./node_modules/.bin/prettier --write .",
     "lint": "yarn workspace arb-token-bridge-ui lint",
     "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:build-wallet-cache": "yarn workspace arb-token-bridge-e2e synpress ./wallet-setup/",
+    "test:e2e": "yarn workspace arb-token-bridge-e2e env-cmd --silent --file .e2e.env yarn cypress run --headed --browser chrome",
+    "test:e2e:cctp": "yarn test:e2e --config 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"
   },
@@ -35,7 +34,8 @@
   "keywords": [],
   "author": "",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "packages/arb-token-bridge-ui/tests"
   ],
   "devDependencies": {
     "audit-ci": "^6.3.0"

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/jest.config.js → packages/arb-token-bridge-ui/jest.config.ts

@@ -1,4 +1,4 @@
-const nextJest = require('next/jest')
+import nextJest from 'next/jest'
 
 const createJestConfig = nextJest({
   dir: './'

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

@@ -62,10 +62,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 +83,10 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.1.5",
-    "@synthetixio/synpress": "3.7.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,7 +95,6 @@
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^6.13.2",
     "autoprefixer": "^10.4.13",
-    "cypress-terminal-report": "^5.3.10",
     "env-cmd": "^10.1.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^14.0.3",
@@ -119,6 +117,7 @@
     "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/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/src/components/TopNavBar.tsx

@@ -8,7 +8,7 @@ import { useTransactionReminderInfo } from './TransactionHistory/useTransactionR
 function StyledTab({ children, ...props }: PropsWithChildren) {
   return (
     <Tab
-      className="flex h-full items-center justify-center gap-2 rounded p-1 text-lg ui-selected:bg-black/75"
+      className="ui-selected:bg-black/75 flex h-full items-center justify-center gap-2 rounded p-1 text-lg"
       {...props}
     >
       {children}

packages/arb-token-bridge-ui/src/components/TransactionHistory/PendingDepositWarning.tsx

@@ -21,7 +21,7 @@ export function PendingDepositWarning() {
             page until the transaction succeeds.
           </p>
         </div>
-        <ChevronRightIcon className="ml-auto h-3 w-3 shrink-0 ui-open:rotate-90 ui-open:transform" />
+        <ChevronRightIcon className="ui-open:rotate-90 ui-open:transform ml-auto h-3 w-3 shrink-0" />
       </Disclosure.Button>
       <Disclosure.Panel className="flex flex-col gap-2 pl-4">
         <p>

packages/arb-token-bridge-ui/src/components/common/HeaderAccountPopover.tsx

@@ -63,8 +63,8 @@ export function HeaderAccountPopover({
           'ui-open:bg-white/20 ui-not-open:bg-transparent ui-not-open:hover:bg-white/20',
           'sm:w-max sm:rounded sm:border sm:px-2 sm:py-1',
           isTestnet
-            ? 'sm:border-white sm:ui-not-open:bg-white/20'
-            : 'sm:border-gray-1 sm:ui-not-open:bg-gray-1 sm:ui-not-open:hover:bg-white/10'
+            ? 'sm:ui-not-open:bg-white/20 sm:border-white'
+            : 'sm:ui-not-open:bg-gray-1 sm:ui-not-open:hover:bg-white/10 sm:border-gray-1'
         )}
         style={destinationChainStyle}
         role="button"

packages/arb-token-bridge-ui/src/components/common/atoms/Switch.tsx

@@ -28,8 +28,8 @@ export const Switch = ({
             checked={checked}
             onChange={onChange}
             className={twMerge(
-              'relative inline-flex h-3 w-7 items-center rounded-full transition-colors ui-checked:bg-white ui-not-checked:bg-white/50 [&:disabled]:cursor-not-allowed',
-              'duration-200 [&_span]:bg-black [&_span]:ui-checked:translate-x-[22px] [&_span]:ui-not-checked:translate-x-[3px] [&~*]:ui-checked:text-white',
+              'ui-checked:bg-white ui-not-checked:bg-white/50 relative inline-flex h-3 w-7 items-center rounded-full transition-colors [&:disabled]:cursor-not-allowed',
+              '[&_span]:ui-checked:translate-x-[22px] [&_span]:ui-not-checked:translate-x-[3px] [&~*]:ui-checked:text-white duration-200 [&_span]:bg-black',
               className
             )}
             disabled={disabled}

packages/arb-token-bridge-ui/src/constants.ts

@@ -26,9 +26,6 @@ export const ORBIT_QUICKSTART_LINK =
 export const CCTP_DOCUMENTATION =
   'https://www.circle.com/en/cross-chain-transfer-protocol'
 
-export const MULTICALL_TESTNET_ADDRESS =
-  '0xcA11bde05977b3631167028862bE2a173976CA11'
-
 export const ETHER_TOKEN_LOGO = '/images/EthereumLogoRound.svg'
 
 export const ether = { name: 'Ether', symbol: 'ETH', decimals: 18 } as const

packages/arb-token-bridge-ui/src/util/TokenListUtils.ts

@@ -9,7 +9,7 @@ import CoinGeckoLogo from '@/images/lists/coinGecko.svg'
 import ArbitrumLogo from '@/images/lists/ArbitrumLogo.png'
 import { ArbTokenBridge } from '../hooks/arbTokenBridge.types'
 import { ChainId } from '../types/ChainId'
-import orbitChainsData from './orbitChainsData.json'
+import orbitChainsData from './orbitChainsData.json' assert { type: 'json' }
 
 export const SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID =
   'SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID'

packages/arb-token-bridge-ui/src/util/networksNitroTestnode.ts

@@ -1,4 +1,4 @@
-import { ArbitrumNetwork } from '@arbitrum/sdk'
+import { type ArbitrumNetwork } from '@arbitrum/sdk'
 
 import { ChainId } from '../types/ChainId'
 

packages/arb-token-bridge-ui/src/util/orbitChainsList.ts

@@ -2,7 +2,7 @@ import { NativeCurrencyBase } from '../hooks/useNativeCurrency'
 import { ChainId } from '../types/ChainId'
 import { isE2eTestingEnvironment } from './CommonUtils'
 import { ChainWithRpcUrl } from './networks'
-import orbitChainsData from './orbitChainsData.json'
+import orbitChainsData from './orbitChainsData.json' assert { type: 'json' }
 
 export type NetworkType =
   | 'Ethereum'

packages/arb-token-bridge-ui/tailwind.config.js

@@ -4,7 +4,7 @@ module.exports = {
     './src/**/*.{js,ts,jsx,tsx}',
     '../../node_modules/@offchainlabs/cobalt/**/*.{js,ts,jsx,tsx}'
   ],
-  plugins: [require('@headlessui/tailwindcss')],
+  plugins: ['@headlessui/tailwindcss'],
   theme: {
     extend: {
       backgroundImage: {

packages/arb-token-bridge-ui/.e2e.env.sample → packages/arb-token-bridge-ui/tests/.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.config.ts → packages/arb-token-bridge-ui/tests/cypress.config.ts

@@ -9,14 +9,14 @@ 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'
 import logsPrinter from 'cypress-terminal-report/src/installLogsPrinter'
-import { getL2ERC20Address } from './src/util/TokenUtils'
-import specFiles from './tests/e2e/specfiles.json'
-import { contractAbi, contractByteCode } from './testErc20Token'
+import { getL2ERC20Address } from './support/helpers'
+import specFiles from './e2e/specfiles.json' assert { type: 'json' }
+import { contractAbi, contractByteCode } from './support/testErc20Token'
 import {
   checkForAssertions,
   generateActivityOnChains,
@@ -27,16 +27,15 @@ import {
   ERC20TokenDecimals,
   ERC20TokenName,
   getNativeTokenDecimals
-} from './tests/support/common'
+} from './support/common'
 
-import { registerLocalNetwork } from './src/util/networks'
+import { registerLocalNetwork } from './support/helpers'
 import {
   defaultL2Network,
   defaultL3Network,
   defaultL3CustomGasTokenNetwork
-} from './src/util/networksNitroTestnode'
-import { getCommonSynpressConfig } from './tests/e2e/getCommonSynpressConfig'
-import { browserConfig } from './tests/e2e/browser.config'
+} from './support/networksNitroTestnode'
+import { getCommonSynpressConfig } from './e2e/getCommonSynpressConfig'
 
 const tests = process.env.TEST_FILE
   ? [process.env.TEST_FILE]
@@ -204,7 +203,6 @@ export default defineConfig({
       config.env.PRIVATE_KEY = userWallet.privateKey
       config.env.INFURA_KEY = process.env.NEXT_PUBLIC_INFURA_KEY
       config.env.ERC20_TOKEN_ADDRESS_PARENT_CHAIN = l1ERC20Token.address
-      config.env.LOCAL_WALLET_PRIVATE_KEY = localWallet.privateKey
       config.env.ORBIT_TEST = isOrbitTest ? '1' : '0'
       config.env.NATIVE_TOKEN_SYMBOL = isCustomFeeToken ? 'TN' : 'ETH'
       config.env.NATIVE_TOKEN_ADDRESS = ethBridger.nativeToken
@@ -227,15 +225,18 @@ export default defineConfig({
       config.env.REDEEM_RETRYABLE_TEST_TX =
         await generateTestTxForRedeemRetryable()
 
-      synpressPlugins(on, config)
       setupCypressTasks(on, { requiresNetworkSetup: true })
+
+      configureSynpressForMetaMask(on, config, true)
+
       return config
     },
     baseUrl: 'http://localhost:3000',
     specPattern: tests,
-    supportFile: 'tests/support/index.ts',
+    supportFile: './support/e2e.ts',
     defaultCommandTimeout: 20_000,
-    browsers: [browserConfig]
+    defaultBrowser: 'chrome',
+    testIsolation: false
   }
 })
 

packages/arb-token-bridge-ui/tests/e2e/cypress.d.ts → packages/arb-token-bridge-ui/tests/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