Merge branch 'V4' of github.com:WalletConnect/web3modal into chore/un…

…ify-wallet-connect-events

.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

apps/gallery/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @apps/gallery
 
+## 4.0.6
+
+### Patch Changes
+
+- Email stability fixes
+
+- Updated dependencies []:
+  - @web3modal/common@4.0.6
+  - @web3modal/ui@4.0.6
+
 ## 4.0.5
 
 ### Patch Changes

apps/gallery/package.json

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

apps/laboratory/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @apps/laboratory
 
+## 4.0.6
+
+### Patch Changes
+
+- Email stability fixes
+
+- Updated dependencies []:
+  - @web3modal/ethers@4.0.6
+  - @web3modal/ethers5@4.0.6
+  - @web3modal/wagmi@4.0.6
+
 ## 4.0.5
 
 ### Patch Changes

apps/laboratory/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@apps/laboratory",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "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.5",
-    "@web3modal/ethers5": "4.0.5",
-    "@web3modal/wagmi": "4.0.5",
+    "@web3modal/ethers": "4.0.6",
+    "@web3modal/ethers5": "4.0.6",
+    "@web3modal/wagmi": "4.0.6",
     "framer-motion": "10.17.9",
     "next": "14.0.4",
     "next-auth": "4.24.5",

apps/laboratory/playwright.config.ts

@@ -4,7 +4,7 @@ import { BASE_URL } from './tests/shared/constants'
 import { config } from 'dotenv'
 import type { ModalFixture } from './tests/shared/fixtures/w3m-fixture'
 import { getAvailableDevices } from './tests/shared/utils/device'
-config({ path: './.env' })
+config({ path: './.env.local' })
 const availableDevices = getAvailableDevices()
 
 const LIBRARIES = ['wagmi', 'ethers'] as const

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

@@ -1,10 +1,12 @@
 import { Button, useToast } from '@chakra-ui/react'
-import { useSignMessage } from 'wagmi'
+import { useSignMessage, useAccount } from 'wagmi'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
 export function WagmiSignMessageTest() {
   const toast = useToast()
   const { signMessageAsync } = useSignMessage()
+  const { status } = useAccount()
+  const isConnected = status === 'connected'
 
   async function onSignMessage() {
     try {
@@ -26,7 +28,7 @@ export function WagmiSignMessageTest() {
   }
 
   return (
-    <Button data-testid="sign-message-button" onClick={onSignMessage}>
+    <Button data-testid="sign-message-button" onClick={onSignMessage} isDisabled={!isConnected}>
       Sign Message
     </Button>
   )

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

@@ -28,13 +28,14 @@ const message = {
 
 export function WagmiSignTypedDataTest() {
   const toast = useToast()
-  const { chain } = useAccount()
+  const { chain, status } = useAccount()
   const domain = {
     name: 'Ether Mail',
     version: '1',
     chainId: chain?.id,
     verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC'
   } as const
+  const isConnected = status === 'connected'
 
   const { signTypedDataAsync } = useSignTypedData()
 
@@ -58,7 +59,11 @@ export function WagmiSignTypedDataTest() {
   }
 
   return (
-    <Button data-testid="sign-typed-data-button" onClick={onSignTypedData}>
+    <Button
+      data-testid="sign-typed-data-button"
+      onClick={onSignTypedData}
+      isDisabled={!isConnected}
+    >
       Sign Typed Data
     </Button>
   )

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

@@ -1,14 +1,11 @@
-import { useAccount } from 'wagmi'
 import { WagmiTransactionTest } from './WagmiTransactionTest'
 import { WagmiSignMessageTest } from './WagmiSignMessageTest'
 import { WagmiSignTypedDataTest } from './WagmiSignTypedDataTest'
 import { StackDivider, Card, CardHeader, Heading, CardBody, Box, Stack } from '@chakra-ui/react'
 import { WagmiWriteContractTest } from './WagmiWriteContractTest'
 
 export function WagmiTests() {
-  const { isConnected } = useAccount()
-
-  return isConnected ? (
+  return (
     <Card marginTop={10} marginBottom={10}>
       <CardHeader>
         <Heading size="md">Test Interactions</Heading>
@@ -45,5 +42,5 @@ export function WagmiTests() {
         </Stack>
       </CardBody>
     </Card>
-  ) : null
+  )
 }

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

@@ -15,6 +15,7 @@ export function WagmiTransactionTest() {
   const { status, chain } = useAccount()
   const { data: gas, error: prepareError } = useEstimateGas(TEST_TX)
   const [isLoading, setLoading] = useState(false)
+  const isConnected = status === 'connected'
   const { sendTransaction } = useSendTransaction({
     mutation: {
       onSuccess: hash => {
@@ -61,7 +62,7 @@ export function WagmiTransactionTest() {
         data-test-id="sign-transaction-button"
         onClick={onSendTransaction}
         disabled={!sendTransaction}
-        isDisabled={isLoading}
+        isDisabled={isLoading || !isConnected}
       >
         Send Transaction to Vitalik
       </Button>

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

@@ -26,6 +26,7 @@ export function WagmiWriteContractTest() {
     args: [1]
   })
   const { writeContract, reset, data, error, isPending } = useWriteContract()
+  const isConnected = status === 'connected'
 
   const onSendTransaction = useCallback(async () => {
     if (simulateError || !simulateData?.request) {
@@ -66,7 +67,7 @@ export function WagmiWriteContractTest() {
         data-test-id="sign-transaction-button"
         onClick={onSendTransaction}
         disabled={!simulateData?.request}
-        isDisabled={isPending}
+        isDisabled={isPending || !isConnected}
       >
         Purchase crypto donut
       </Button>

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
-    }
-    const uri = await modalPage.getConnectUri()
-    await walletPage.connectWithUri(uri)
-    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/shared/pages/ModalPage.ts

@@ -26,13 +26,23 @@ export class ModalPage {
     await this.page.goto(this.url)
   }
 
+  assertDefined<T>(value: T | undefined | null): T {
+    expect(value).toBeDefined()
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return value!
+  }
+
   async getConnectUri(): Promise<string> {
     await this.page.goto(this.url)
     await this.connectButton.click()
     await this.page.getByTestId('wallet-selector-walletconnect').click()
-    await this.page.waitForTimeout(1500)
 
-    return (await this.page.getByTestId('wui-qr-code').getAttribute('uri')) || ''
+    // Using getByTestId() doesn't work on my machine, I'm guessing because this element is inside of a <slot>
+    const qrCode = this.page.locator('wui-qr-code')
+    await expect(qrCode).toBeVisible()
+
+    return this.assertDefined(await qrCode.getAttribute('uri'))
   }
 
   async loginWithEmail(email: string) {

examples/html-ethers5/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @examples/html-ethers5
 
+## 4.0.6
+
+### Patch Changes
+
+- Email stability fixes
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.0.6
+
 ## 4.0.5
 
 ### Patch Changes

examples/html-ethers5/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@examples/html-ethers5",
   "private": true,
-  "version": "4.0.5",
+  "version": "4.0.6",
   "scripts": {
     "dev:example": "vite --port 3011",
     "build:examples": "vite build"
   },
   "dependencies": {
-    "@web3modal/ethers5": "4.0.5",
+    "@web3modal/ethers5": "4.0.6",
     "ethers": "5.7.2"
   },
   "devDependencies": {