Merge branch 'V4' into chore/wallet-search-optimization

.github/workflows/ui_tests.yml

@@ -74,8 +74,13 @@ jobs:
           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}-${{ hashFiles('apps/laboratory/tests/shared/constants/devices.ts') }}
       - name: install
         run: npm ci
-      - name: build
-        run: npm run build
+      - name: build packages and lab
+        run: npm run build:laboratory
+        env:
+          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+          NEXTAUTH_SECRET: ${{ secrets.TESTS_NEXTAUTH_SECRET }}
+          MAILSAC_API_KEY: ${{ secrets.TESTS_MAILSEC_API_KEY }}
+          NEXT_PUBLIC_SECURE_SITE_SDK_URL: ${{ inputs.secure-site-url }}
       - name: Install Playwright Browsers
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         working-directory: ./apps/laboratory/

Dockerfile.canary

@@ -1,4 +1,5 @@
 FROM node:20-bookworm
+RUN apt update && apt install -y awscli
 
 WORKDIR /src
 
@@ -11,5 +12,8 @@ WORKDIR ./apps/laboratory/
 RUN npm run playwright:install
 
 ENV TIMING_LOGS=true
+ENV CI=true
+ENV SKIP_PLAYWRIGHT_WEBSERVER=true
+ENV BASE_URL=https://lab.web3modal.com/
 
-CMD ["npm", "run", "playwright:test:canary"]
+CMD ["bash", "./docker-canary.sh"]

apps/laboratory/docker-canary.sh

@@ -0,0 +1,7 @@
+# Not adding `set -e` so that S3 upload happens regardless
+
+npm run playwright:test:canary
+
+destination="s3://$TEST_RESULTS_BUCKET/web3modal-canary/$(date --iso-8601=seconds)/test-results/"
+echo "Uploading test results to $destination"
+aws s3 cp ./test-results/ $destination --recursive

apps/laboratory/package.json

@@ -4,9 +4,10 @@
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
+    "start:laboratory": "next start",
     "build:laboratory": "next build",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "playwright:start": "npm run dev:laboratory",
+    "playwright:start": "npm run start:laboratory",
     "playwright:install": "playwright install --with-deps",
     "playwright:test": "playwright test",
     "playwright:test:wallet": "playwright test --grep 'connect-qr.spec.ts|wallet.spec.ts'",
@@ -22,6 +23,7 @@
     "playwright:debug:canary": "npm run playwright:test:canary -- --debug"
   },
   "dependencies": {
+    "@chakra-ui/icons": "2.1.1",
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",

apps/laboratory/playwright.config.ts

@@ -28,8 +28,8 @@ export default defineConfig<ModalFixture>({
     /* 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',
+    /* Collect trace regardless so we can debug latency regressions. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on',
 
     video: 'retain-on-failure'
   },

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

@@ -1,10 +1,11 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { useChakraToast } from '../Toast'
 
 export function EthersSignMessageTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -16,18 +17,17 @@ export function EthersSignMessageTest() {
       const provider = new BrowserProvider(walletProvider, chainId)
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
+
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,
         description: signature,
-        status: 'success',
-        isClosable: true
+        type: 'success'
       })
     } catch {
       toast({
         title: ConstantsUtil.SigningFailedToastTitle,
         description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     }
   }

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

@@ -1,7 +1,8 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner } from 'ethers'
 import type { TypedDataField } from 'ethers'
+import { useChakraToast } from '../Toast'
 
 const types: Record<string, TypedDataField[]> = {
   Person: [
@@ -28,7 +29,7 @@ const message = {
 } as const
 
 export function EthersSignTypedDataTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -48,13 +49,16 @@ export function EthersSignTypedDataTest() {
 
       const signature = await signer?.signTypedData(domain, types, message)
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: 'Success',
+        description: signature,
+        type: 'success'
+      })
     } catch {
       toast({
         title: 'Error',
         description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     }
   }

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

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { useWeb3ModalAccount } from '@web3modal/ethers/react'
 import { EthersSignMessageTest } from './EthersSignMessageTest'
 import { EthersSignTypedDataTest } from './EthersSignTypedDataTest'
@@ -6,8 +7,17 @@ import { EthersTransactionTest } from './EthersTransactionTest'
 import { EthersWriteContractTest } from './EthersWriteContractTest'
 
 export function EthersTests() {
+  const [ready, setReady] = React.useState(false)
   const { isConnected } = useWeb3ModalAccount()
 
+  React.useEffect(() => {
+    setReady(true)
+  }, [])
+
+  if (!ready) {
+    return null
+  }
+
   return isConnected ? (
     <Card marginTop={10} marginBottom={10}>
       <CardHeader>

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

@@ -1,12 +1,13 @@
-import { Button, useToast, Stack, Link, Text, Spacer } from '@chakra-ui/react'
+import { Button, Stack, Link, Text, Spacer } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner, ethers } from 'ethers'
 import { sepolia, optimism } from '../../utils/ChainsUtil'
 import { useState } from 'react'
 import { vitalikEthAddress } from '../../utils/DataUtil'
+import { useChakraToast } from '../Toast'
 
 export function EthersTransactionTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -23,13 +24,17 @@ export function EthersTransactionTest() {
         to: vitalikEthAddress,
         value: ethers.parseUnits('0.0001', 'gwei')
       })
-      toast({ title: 'Succcess', description: tx.hash, status: 'success', isClosable: true })
+
+      toast({
+        title: 'Success',
+        description: tx.hash,
+        type: 'success'
+      })
     } catch {
       toast({
         title: 'Error',
         description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     } finally {
       setLoading(false)

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

@@ -1,13 +1,14 @@
-import { Button, useToast, Stack, Link, Text, Spacer } from '@chakra-ui/react'
+import { Button, Stack, Link, Text, Spacer } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { BrowserProvider, JsonRpcSigner, ethers } from 'ethers'
 import { optimism, sepolia } from '../../utils/ChainsUtil'
 import { useState } from 'react'
 
 import { abi, address as donutAddress } from '../../utils/DonutContract'
+import { useChakraToast } from '../Toast'
 
 export function EthersWriteContractTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -23,13 +24,16 @@ export function EthersWriteContractTest() {
       const contract = new ethers.Contract(donutAddress, abi, signer)
       // @ts-expect-error ethers types are correct
       const tx = await contract.purchase(1, { value: ethers.parseEther('0.0001') })
-      toast({ title: 'Succcess', description: tx.hash, status: 'success', isClosable: true })
+      toast({
+        title: 'Success',
+        description: tx.hash,
+        type: 'success'
+      })
     } catch {
       toast({
         title: 'Error',
         description: 'Failed to sign transaction',
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Solana/SolanaSendTransactionTest.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, useToast, Stack, Text, Spacer, Link } from '@chakra-ui/react'
+import { Button, Stack, Text, Spacer, Link } from '@chakra-ui/react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
 import {
   PublicKey,
@@ -11,13 +11,14 @@ import {
 } from '@solana/web3.js'
 
 import { solana } from '../../utils/ChainsUtil'
+import { useChakraToast } from '../Toast'
 
 const PHANTOM_TESTNET_ADDRESS = 'EmT8r4E8ZjoQgt8sXGbaWBRMKfUXsVT1wonoSnJZ4nBn'
 const recipientAddress = new PublicKey(PHANTOM_TESTNET_ADDRESS)
 const amountInLamports = 100000000
 
 export function SolanaSendTransactionTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address, chainId } = useWeb3ModalAccount()
   const { walletProvider, connection } = useWeb3ModalProvider()
   const [loading, setLoading] = useState(false)
@@ -53,13 +54,16 @@ export function SolanaSendTransactionTest() {
       transaction.recentBlockhash = blockhash
 
       const signature = await walletProvider.sendTransaction(transaction, connection as Connection)
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({
+        title: 'Success',
+        description: signature,
+        type: 'success'
+      })
     } catch (err) {
       toast({
         title: 'Error',
         description: (err as Error).message,
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     } finally {
       setLoading(false)
@@ -106,13 +110,17 @@ export function SolanaSendTransactionTest() {
         transactionV0,
         connection as Connection
       )
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+
+      toast({
+        title: 'Success',
+        description: signature,
+        type: 'success'
+      })
     } catch (err) {
       toast({
         title: 'Error',
         description: (err as Error).message,
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     } finally {
       setLoading(false)

apps/laboratory/src/components/Solana/SolanaSignMessageTest.tsx

@@ -1,11 +1,12 @@
-import { Button, useToast } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/solana/react'
 
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { useChakraToast } from '../Toast'
 
 export function SolanaSignMessageTest() {
-  const toast = useToast()
+  const toast = useChakraToast()
   const { address } = useWeb3ModalAccount()
   const { walletProvider } = useWeb3ModalProvider()
 
@@ -23,24 +24,21 @@ export function SolanaSignMessageTest() {
         toast({
           title: ConstantsUtil.SigningSucceededToastTitle,
           description: (signature as { signature: Uint8Array }).signature,
-          status: 'success',
-          isClosable: true
+          type: 'success'
         })
 
         return
       }
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,
         description: signature as Uint8Array,
-        status: 'success',
-        isClosable: true
+        type: 'success'
       })
     } catch (err) {
       toast({
         title: ConstantsUtil.SigningFailedToastTitle,
         description: 'Failed to sign message',
-        status: 'error',
-        isClosable: true
+        type: 'error'
       })
     }
   }