Merge branch 'V4' into feat/email-state-fix

.eslintrc.json

@@ -21,7 +21,8 @@
     ".turbo",
     "exbamples",
     "coverage",
-    ".changeset"
+    ".changeset",
+    "playwright-report"
   ],
   "rules": {
     // Core

.github/workflows/ci_canary.yml

@@ -49,7 +49,7 @@ jobs:
           IMAGE_TAG: V4
         with:
           context: .
-          file: Dockerfile
+          file: Dockerfile.canary
           push: true
           tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
           cache-from: type=local,src=/tmp/.buildx-cache

.github/workflows/ui_tests.yml

@@ -39,7 +39,8 @@ on:
 jobs:
   ui_tests:
     name: 'Playwright Tests'
-    runs-on: ubuntu-latest
+    runs-on:
+      group: ubuntu-runners
     timeout-minutes: 15
     steps:
       - name: checkout

apps/gallery/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @apps/gallery
 
+## 4.0.5
+
+### Patch Changes
+
+- [#1917](https://github.com/WalletConnect/web3modal/pull/1917) [`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97) Thanks [@tomiir](https://github.com/tomiir)! - Replaces public url with blockchain api for supported networks
+
+- Updated dependencies [[`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97)]:
+  - @web3modal/common@4.0.5
+  - @web3modal/ui@4.0.5
+
 ## 4.0.4
 
 ### Patch Changes

apps/gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/gallery",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "4.0.4",
-    "@web3modal/ui": "4.0.4",
+    "@web3modal/common": "4.0.5",
+    "@web3modal/ui": "4.0.5",
     "lit": "3.1.0",
     "storybook": "7.6.7"
   },

apps/laboratory/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @apps/laboratory
 
+## 4.0.5
+
+### Patch Changes
+
+- [#1917](https://github.com/WalletConnect/web3modal/pull/1917) [`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97) Thanks [@tomiir](https://github.com/tomiir)! - Replaces public url with blockchain api for supported networks
+
+- Updated dependencies [[`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97)]:
+  - @web3modal/wagmi@4.0.5
+  - @web3modal/ethers@4.0.5
+  - @web3modal/ethers5@4.0.5
+
 ## 4.0.4
 
 ### Patch Changes

apps/laboratory/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@apps/laboratory",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
     "build:laboratory": "next build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "playwright:start": "npm run dev:laboratory",
     "playwright:install": "npx playwright install --with-deps",
-    "playwright:test": "npx playwright test --grep-invert canary.spec.ts",
+    "playwright:test": "npx playwright test",
     "playwright:test:wallet": "npx playwright test --grep connect.spec.ts",
-    "playwright:test:canary": "npx playwright test --grep canary.spec.ts",
-    "playwright:debug": "npx playwright test --debug --grep-invert canary.spec.ts",
+    "playwright:test:canary": "npx playwright test --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
+    "playwright:debug": "npx playwright test --debug",
     "playwright:debug:wallet": "npx playwright test --debug --grep connect.spec.ts",
-    "playwright:debug:canary": "npx playwright test --debug --grep canary.spec.ts"
+    "playwright:debug:canary": "npx playwright test --debug --grep canary.spec.ts --project='Desktop Chrome/wagmi'"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",
@@ -22,9 +22,9 @@
     "@sentry/browser": "7.92.0",
     "@sentry/react": "7.92.0",
     "@tanstack/react-query": "5.17.19",
-    "@web3modal/ethers": "4.0.4",
-    "@web3modal/ethers5": "4.0.4",
-    "@web3modal/wagmi": "4.0.4",
+    "@web3modal/ethers": "4.0.5",
+    "@web3modal/ethers5": "4.0.5",
+    "@web3modal/wagmi": "4.0.5",
     "framer-motion": "10.17.9",
     "next": "14.0.4",
     "next-auth": "4.24.5",

apps/laboratory/playwright.config.ts

@@ -3,18 +3,21 @@ import { BASE_URL } from './tests/shared/constants'
 
 import { config } from 'dotenv'
 import type { ModalFixture } from './tests/shared/fixtures/w3m-fixture'
-import { DEVICES } from './tests/shared/constants/devices'
-config({ path: './.env' })
+import { getAvailableDevices } from './tests/shared/utils/device'
+config({ path: './.env.local' })
+const availableDevices = getAvailableDevices()
 
 const LIBRARIES = ['wagmi', 'ethers'] as const
-const PERMUTATIONS = DEVICES.flatMap(device => LIBRARIES.map(library => ({ device, library })))
+const PERMUTATIONS = availableDevices.flatMap(device =>
+  LIBRARIES.map(library => ({ device, library }))
+)
 
 export default defineConfig<ModalFixture>({
   testDir: './tests',
 
   fullyParallel: true,
-  retries: 0,
-  workers: 1,
+  retries: 2,
+  workers: 8,
   reporter: process.env['CI']
     ? [['list'], ['html', { open: 'never' }]]
     : [['list'], ['html', { host: '0.0.0.0' }]],
@@ -28,6 +31,9 @@ export default defineConfig<ModalFixture>({
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: BASE_URL,
 
+    /* Take a screenshot when the test fails */
+    screenshot: 'only-on-failure',
+
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
 

apps/laboratory/tests/README.md

@@ -7,12 +7,13 @@ We use Playwright as our functional test runner. It's configured to try multiple
 
 ## Setup
 
-- Make sure your `.env` is set up (see `.env.example` for reference)
+- Make sure your `.env.local` is set up (see `.env.example` for reference)
 - Run `npm run playwright:install` to install the browsers required to run the tests
+- Build Web3Modal by running `npm run build` in the root directory
 
 ## Running Tests
 
-- `npx playwright test` to run in default mode.
+- `npm run playwright:test` to run in default mode.
 - `npm run playwright:debug` to step by step see what the tests are doing
 
 ## Debugging

apps/laboratory/tests/canary.spec.ts

@@ -2,60 +2,44 @@ import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
 import { uploadCanaryResultsToCloudWatch } from './shared/utils/metrics'
 
-const ENV = process.env['ENV'] || 'dev'
+const ENV = process.env['ENVIRONMENT'] || 'dev'
 const REGION = process.env['REGION'] || 'eu-central-1'
 
 let startTime = 0
 
-testMW.beforeEach(
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    startTime = Date.now()
-    // Canary doesn't need all platforms
-    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-      return
-    }
-    await modalPage.copyConnectUriToClipboard()
-    await walletPage.connect()
-    await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
-    await modalValidator.expectConnected()
-    await walletValidator.expectConnected()
-  }
-)
+testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  // Give us extra time in a potentially slow canary deployment
+  testMW.setTimeout(120_000)
 
-testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserName }) => {
-  // Canary doesn't need all platforms
-  if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-    return
-  }
+  startTime = Date.now()
+  const uri = await modalPage.getConnectUri()
+  await walletPage.connectWithUri(uri)
+  await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
+  await modalValidator.expectConnected()
+  await walletValidator.expectConnected()
+})
+
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => {
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
   await walletValidator.expectDisconnected()
 })
 
-testMW(
-  'it should sign',
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Canary doesn't need all platforms
-    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
-      testMW.skip()
-
-      return
-    }
-    await modalPage.sign()
-    await walletValidator.expectReceivedSign({})
-    await walletPage.handleRequest({ accept: true })
-    await modalValidator.expectAcceptedSign()
+testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  await modalPage.sign()
+  await walletValidator.expectReceivedSign({})
+  await walletPage.handleRequest({ accept: true })
+  await modalValidator.expectAcceptedSign()
 
-    if (ENV !== 'dev') {
-      const duration: number = Date.now() - startTime
-      await uploadCanaryResultsToCloudWatch(
-        ENV,
-        REGION,
-        'https://lab.web3modal.com/',
-        'HappyPath.sign',
-        true,
-        duration
-      )
-    }
+  if (ENV !== 'dev') {
+    const duration: number = Date.now() - startTime
+    await uploadCanaryResultsToCloudWatch(
+      ENV,
+      REGION,
+      'https://lab.web3modal.com/',
+      'HappyPath.sign',
+      true,
+      duration
+    )
   }
-)
+})

apps/laboratory/tests/connect.spec.ts

@@ -1,71 +1,40 @@
-import { DEFAULT_SESSION_PARAMS } from './shared/constants'
+import { DEFAULT_CHAIN_NAME, DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
 
-testMW.beforeEach(
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Webkit cannot use clipboard.
-    if (browserName === 'webkit') {
-      return
-    }
-    await modalPage.copyConnectUriToClipboard()
-    await walletPage.connect()
-    await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
-    await modalValidator.expectConnected()
-    await walletValidator.expectConnected()
-  }
-)
+testMW.beforeEach(async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  const uri = await modalPage.getConnectUri()
+  await walletPage.connectWithUri(uri)
+  await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
+  await modalValidator.expectConnected()
+  await walletValidator.expectConnected()
+})
 
-testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserName }) => {
-  // Webkit cannot use clipboard.
-  if (browserName === 'webkit') {
-    return
-  }
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => {
   await modalPage.disconnect()
   await modalValidator.expectDisconnected()
   await walletValidator.expectDisconnected()
 })
 
-testMW(
-  'it should sign',
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Webkit cannot use clipboard.
-    if (browserName === 'webkit') {
-      testMW.skip()
-
-      return
-    }
-    await modalPage.sign()
-    await walletValidator.expectReceivedSign({})
-    await walletPage.handleRequest({ accept: true })
-    await modalValidator.expectAcceptedSign()
-  }
-)
+testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+  await modalPage.sign()
+  await walletValidator.expectReceivedSign({ chainName: DEFAULT_CHAIN_NAME })
+  await walletPage.handleRequest({ accept: true })
+  await modalValidator.expectAcceptedSign()
+})
 
 testMW(
   'it should reject sign',
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Webkit cannot use clipboard.
-    if (browserName === 'webkit') {
-      testMW.skip()
-
-      return
-    }
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
     await modalPage.sign()
-    await walletValidator.expectReceivedSign({})
+    await walletValidator.expectReceivedSign({ chainName: DEFAULT_CHAIN_NAME })
     await walletPage.handleRequest({ accept: false })
     await modalValidator.expectRejectedSign()
   }
 )
 
 testMW(
   'it should switch networks and sign',
-  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
-    // Webkit cannot use clipboard.
-    if (browserName === 'webkit') {
-      testMW.skip()
-
-      return
-    }
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
     let targetChain = 'Polygon'
     await modalPage.switchNetwork(targetChain)
     await modalPage.sign()

apps/laboratory/tests/email.spec.ts

@@ -6,6 +6,7 @@ import { Email } from './shared/utils/email'
 const AVAILABLE_MAILSAC_ADDRESSES = 10
 
 testMEmail.beforeEach(async ({ modalPage, context, modalValidator }) => {
+  testMEmail.skip()
   // Skip wagmi as it's not working
   if (modalPage.library === 'wagmi') {
     return

apps/laboratory/tests/shared/constants/index.ts

@@ -8,3 +8,4 @@ export const DEFAULT_SESSION_PARAMS: SessionParams = {
   optAccounts: ['1', '2'],
   accept: true
 }
+export const DEFAULT_CHAIN_NAME = process.env['DEFAULT_CHAIN_NAME'] || 'Ethereum'

apps/laboratory/tests/shared/constants/timeouts.ts

@@ -0,0 +1 @@
+export const MAXIMUM_WAIT_CONNECTIONS = 14 * 1000

apps/laboratory/tests/shared/fixtures/w3m-wallet-fixture.ts

@@ -10,12 +10,7 @@ interface ModalWalletFixture {
 
 // MW -> test Modal + Wallet
 export const testMW = base.extend<ModalWalletFixture>({
-  walletPage: async ({ context, browserName }, use) => {
-    // WalletPage needs clipboard permissions with chromium to paste URI
-    if (browserName === 'chromium') {
-      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
-    }
-
+  walletPage: async ({ context }, use) => {
     // Use a new page, to open alongside the modal
     const walletPage = new WalletPage(await context.newPage())
     await walletPage.load()
@@ -27,12 +22,7 @@ export const testMW = base.extend<ModalWalletFixture>({
   }
 })
 export const testMWSiwe = siwe.extend<ModalWalletFixture>({
-  walletPage: async ({ context, browserName }, use) => {
-    // WalletPage needs clipboard permissions with chromium to paste URI
-    if (browserName === 'chromium') {
-      await context.grantPermissions(['clipboard-read', 'clipboard-write'])
-    }
-
+  walletPage: async ({ context }, use) => {
     // Use a new page, to open alongside the modal
     const walletPage = new WalletPage(await context.newPage())
     await walletPage.load()