Merge branch 'V3' into fix/ethers-loading-state

.github/workflows/ui_tests.yml

@@ -23,7 +23,7 @@ jobs:
   ui_tests:
     name: 'Playwright Tests'
     runs-on: ubuntu-latest
-    timeout-minutes: 5
+    timeout-minutes: 15
     steps:
       - name: checkout
         uses: actions/checkout@v3
@@ -33,16 +33,29 @@ jobs:
           node-version: 18.x
           cache: 'npm'
           cache-dependency-path: 'package-lock.json'
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package-lock.json').packages['apps/laboratory']['devDependencies']['@playwright/test'])")" >> $GITHUB_ENV
+      - name: Cache playwright binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
       - name: install
         run: npm ci
       - name: build
         run: npm run build
       - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: ./apps/laboratory/
         run: npm run playwright:install
       - name: Run Playwright tests
         env:
           NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+          NEXTAUTH_SECRET: ${{ secrets.TESTS_NEXTAUTH_SECRET }}
+          CI: true
         working-directory: ./apps/laboratory/
         run: npm run playwright:test
       - uses: actions/upload-artifact@v3

apps/gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/gallery",
-  "version": "3.6.0-229eeee",
+  "version": "3.6.0-f682e195",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -9,18 +9,18 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "3.6.0-229eeee",
-    "@web3modal/ui": "3.6.0-229eeee",
+    "@web3modal/common": "3.6.0-f682e195",
+    "@web3modal/ui": "3.6.0-f682e195",
     "lit": "3.1.0",
-    "storybook": "7.6.6"
+    "storybook": "7.6.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-links": "7.6.6",
-    "@storybook/blocks": "7.6.6",
-    "@storybook/theming": "7.6.6",
-    "@storybook/web-components": "7.6.6",
-    "@storybook/web-components-vite": "7.6.6",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-links": "7.6.7",
+    "@storybook/blocks": "7.6.7",
+    "@storybook/theming": "7.6.7",
+    "@storybook/web-components": "7.6.7",
+    "@storybook/web-components-vite": "7.6.7",
     "file-system-cache": "2.4.4"
   }
 }

apps/laboratory/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/laboratory",
-  "version": "3.6.0-229eeee",
+  "version": "3.6.0-f682e195",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
@@ -13,13 +13,13 @@
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@sentry/browser": "7.89.0",
-    "@sentry/react": "7.89.0",
-    "@web3modal/ethers": "3.6.0-229eeee",
-    "@web3modal/ethers5": "3.6.0-229eeee",
-    "@web3modal/wagmi": "3.6.0-229eeee",
+    "@sentry/browser": "7.91.0",
+    "@sentry/react": "7.91.0",
+    "@web3modal/ethers": "3.6.0-f682e195",
+    "@web3modal/ethers5": "3.6.0-f682e195",
+    "@web3modal/wagmi": "3.6.0-f682e195",
     "framer-motion": "10.16.16",
     "next": "14.0.4",
     "next-auth": "4.24.5",

apps/laboratory/playwright.config.ts

@@ -14,7 +14,7 @@ export default defineConfig<ModalFixture>({
   reporter: [['list'], ['html']],
 
   expect: {
-    timeout: (process.env['CI'] ? 60 : 5) * 1000
+    timeout: (process.env['CI'] ? 60 : 15) * 1000
   },
   timeout: 60 * 1000,
 

apps/laboratory/src/components/Ethers/EthersConnectButton.tsx

@@ -3,6 +3,7 @@ import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/rea
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { EthersTransactionButton } from './EthersTransactionButton'
 import type { TypedDataField } from 'ethers'
+import { SigningFailedToastTitle, SigningSucceededToastTitle } from '../../constants'
 
 // Example data
 const types: Record<string, TypedDataField[]> = {
@@ -44,10 +45,15 @@ export function EthersConnectButton() {
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
 
-      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: SigningSucceededToastTitle,
+        description: signature,
+        status: 'success',
+        isClosable: true
+      })
     } catch {
       toast({
-        title: 'Error',
+        title: SigningFailedToastTitle,
         description: 'Failed to sign message',
         status: 'error',
         isClosable: true

apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx

@@ -2,6 +2,7 @@ import { Button, useToast } from '@chakra-ui/react'
 import { useAccount, useNetwork, useSignMessage, useSignTypedData } from 'wagmi'
 import { WagmiTransactionButton } from './WagmiTransactionButton'
 import { useEffect, useState } from 'react'
+import { SigningFailedToastTitle, SigningSucceededToastTitle } from '../../constants'
 
 // Example data
 
@@ -59,10 +60,15 @@ export function WagmiConnectButton() {
   async function onSignMessage() {
     try {
       const signature = await signMessageAsync()
-      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: SigningSucceededToastTitle,
+        description: signature,
+        status: 'success',
+        isClosable: true
+      })
     } catch {
       toast({
-        title: 'Error',
+        title: SigningFailedToastTitle,
         description: 'Failed to sign message',
         status: 'error',
         isClosable: true

apps/laboratory/src/constants.ts

@@ -0,0 +1,3 @@
+export const SigningSucceededToastTitle = 'Signing Succeeded'
+export const SigningFailedToastTitle = 'Signing Failed'
+export const TestIdSiweAuthenticationStatus = 'w3m-authentication-status'

apps/laboratory/src/pages/library/ethers-siwe.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../utils/ChainsUtil'
 import type { SIWECreateMessageArgs, SIWESession, SIWEVerifyMessageArgs } from '@web3modal/core'
 import { createSIWEConfig } from '@web3modal/siwe'
+import { TestIdSiweAuthenticationStatus } from '../../constants'
 
 const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
 if (!projectId) {
@@ -133,7 +134,7 @@ export default function EthersSiwe() {
       </Center>
       <Center h="65vh">
         <VStack gap={4}>
-          <Text>SIWE Status: {status}</Text>
+          <Text data-testid={TestIdSiweAuthenticationStatus}>SIWE Status: {status}</Text>
           {session && (
             <>
               <Text>Network: eip155:{session.chainId}</Text>

apps/laboratory/src/pages/library/wagmi-siwe.tsx

@@ -23,6 +23,7 @@ import { NetworksButton } from '../../components/NetworksButton'
 import { ThemeStore } from '../../utils/StoreUtil'
 import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs, SIWESession } from '@web3modal/core'
 import { createSIWEConfig } from '@web3modal/siwe'
+import { TestIdSiweAuthenticationStatus } from '../../constants'
 
 // 1. Get projectId
 const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
@@ -145,7 +146,7 @@ export default function Wagmi() {
       </Center>
       <Center h="65vh">
         <VStack gap={4}>
-          <Text>Status: {status}</Text>
+          <Text data-testid={TestIdSiweAuthenticationStatus}>Status: {status}</Text>
           {session && (
             <>
               <Text>Network: eip155:{session.chainId}</Text>

apps/laboratory/tests/README.md

@@ -1,3 +1,15 @@
-# Debugging
+# Functional Tests
+
+We use Playwright as our functional test runner. It's configured to try multiple permutations:
+
+- Browsers: Chromium/Firefox
+- Modal flavors: default/SIWE/email
+
+## Running Tests
+
+- `npx playwright test` to run in default mode (make sure your `.env` is set up)
+- `npm run playwright:debug` to step by step see what the tests are doing
+
+## Debugging
 
 For scenarios when tests pass locally but not remotely you can `await this.page.screenshot({ path: './screenshots/wallet.png' })` and the screenshot will be uploaded to GitHub Actions.

apps/laboratory/tests/connect.spec.ts

@@ -21,3 +21,33 @@ testMW('it should sign', async ({ modalPage, walletPage, modalValidator, walletV
   await walletPage.handleRequest({ accept: true })
   await modalValidator.expectAcceptedSign()
 })
+
+testMW(
+  'it should reject sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({})
+    await walletPage.handleRequest({ accept: false })
+    await modalValidator.expectRejectedSign()
+  }
+)
+
+testMW(
+  'it should switch networks and sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+    let targetChain = 'Polygon'
+    await modalPage.switchNetwork(targetChain)
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({ chainName: targetChain })
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+
+    // Switch to Ethereum
+    targetChain = 'Ethereum'
+    await modalPage.switchNetwork(targetChain)
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({ chainName: targetChain })
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+  }
+)

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

@@ -13,7 +13,19 @@ export interface ModalFixture {
 export const testM = base.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library)
+    const modalPage = new ModalPage(page, library, 'default')
+    await modalPage.load()
+    await use(modalPage)
+  },
+  modalValidator: async ({ modalPage }, use) => {
+    const modalValidator = new ModalValidator(modalPage.page)
+    await use(modalValidator)
+  }
+})
+export const testMSiwe = base.extend<ModalFixture>({
+  library: ['wagmi', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library, 'siwe')
     await modalPage.load()
     await use(modalPage)
   },

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

@@ -1,4 +1,4 @@
-import { testM as base } from './w3m-fixture'
+import { testM as base, testMSiwe as siwe } from './w3m-fixture'
 import { WalletPage } from '../pages/WalletPage'
 import { WalletValidator } from '../validators/WalletValidator'
 
@@ -26,4 +26,21 @@ export const testMW = base.extend<ModalWalletFixture>({
     await use(walletValidator)
   }
 })
+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'])
+    }
+
+    // Use a new page, to open alongside the modal
+    const walletPage = new WalletPage(await context.newPage())
+    await walletPage.load()
+    await use(walletPage)
+  },
+  walletValidator: async ({ walletPage }, use) => {
+    const walletValidator = new WalletValidator(walletPage.page)
+    await use(walletValidator)
+  }
+})
 export { expect } from '@playwright/test'

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -1,24 +1,32 @@
 import type { Locator, Page } from '@playwright/test'
 import { BASE_URL } from '../constants'
 
+export type ModalFlavor = 'default' | 'siwe'
+
 export class ModalPage {
   private readonly baseURL = BASE_URL
 
   private readonly connectButton: Locator
+  private readonly url: string
 
   constructor(
     public readonly page: Page,
-    public readonly library: string
+    public readonly library: string,
+    public readonly flavor: ModalFlavor
   ) {
     this.connectButton = this.page.getByTestId('connect-button')
+    this.url =
+      flavor === 'siwe'
+        ? `${this.baseURL}library/${this.library}-siwe/`
+        : `${this.baseURL}library/${this.library}/`
   }
 
   async load() {
-    await this.page.goto(`${this.baseURL}library/${this.library}/`)
+    await this.page.goto(this.url)
   }
 
   async copyConnectUriToClipboard() {
-    await this.page.goto(`${this.baseURL}library/${this.library}/`)
+    await this.page.goto(this.url)
     await this.connectButton.click()
     await this.page.getByTestId('wallet-selector-walletconnect').click()
     await this.page.waitForTimeout(2000)
@@ -33,4 +41,19 @@ export class ModalPage {
   async sign() {
     await this.page.getByTestId('sign-message-button').click()
   }
+
+  async promptSiwe() {
+    await this.page.getByTestId('w3m-connecting-siwe-sign').click()
+  }
+
+  async cancelSiwe() {
+    await this.page.getByTestId('w3m-connecting-siwe-cancel').click()
+  }
+
+  async switchNetwork(network: string) {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('w3m-account-select-network').click()
+    await this.page.getByTestId(`w3m-network-switch-${network}`).click()
+    await this.page.getByTestId(`w3m-header-close`).click()
+  }
 }

apps/laboratory/tests/shared/pages/WalletPage.ts

@@ -36,13 +36,15 @@ export class WalletPage {
    */
   async handleSessionProposal(opts: SessionParams) {
     const variant = opts.accept ? `approve` : `reject`
+    // `.click` doesn't work here, so we use `.focus` and `Space`
     await this.page.getByTestId(`session-${variant}-button`).isEnabled()
     await this.page.getByTestId(`session-${variant}-button`).focus()
     await this.page.keyboard.press('Space')
   }
 
   async handleRequest({ accept }: { accept: boolean }) {
     const variant = accept ? `approve` : `reject`
+    // `.click` doesn't work here, so we use `.focus` and `Space`
     await this.page.getByTestId(`session-${variant}-button`).isEnabled()
     await this.page.getByTestId(`session-${variant}-button`).focus()
     await this.page.keyboard.press('Space')