feat: multi chain (#2528)

Co-authored-by: tomiir <[email protected]>
Co-authored-by: Sven <[email protected]>
Co-authored-by: Sven <[email protected]>

.github/workflows/pr_checks.yml

@@ -33,6 +33,7 @@ jobs:
           - prettier
           - typecheck
           - danger
+          - build:sample-apps
     steps:
       - name: checkout
         uses: actions/checkout@v3
@@ -58,6 +59,7 @@ jobs:
         run: pnpm ${{ matrix.style-command }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
 
   bundle_size:
     runs-on: ubuntu-latest

.github/workflows/ui_tests.yml

@@ -53,8 +53,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4]
-        shardTotal: [4]
+        shard: [1, 2, 3, 4, 5]
+        shardTotal: [5]
     timeout-minutes: 20
     steps:
       - name: Tune GitHub-hosted runner network

.vscode/settings.json

@@ -6,7 +6,6 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
   "explorer.sortOrder": "type",
   "extensions.ignoreRecommendations": true,
-  "files.autoSave": "onWindowChange",
   "files.exclude": {
     "**/.DS_Store": true,
     "**/.git": true,
@@ -22,4 +21,4 @@
   "typescript.updateImportsOnFileMove.enabled": "always",
   "css.lint.unknownAtRules": "ignore",
   "css.validate": true
-}
+}

apps/gallery/stories/composites/wui-select.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-select'
+import type { WuiSelect } from '@web3modal/ui/src/composites/wui-select'
+import { html } from 'lit'
+import { networkImageSrc } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiSelect>
+
+export default {
+  title: 'Composites/wui-select',
+  args: {
+    imageSrc: networkImageSrc
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`<wui-select imageSrc=${args.imageSrc}></wui-select>`
+}

apps/laboratory/package.json

@@ -16,25 +16,25 @@
     "playwright:test:basic": "playwright test --grep 'basic-tests.spec.ts'",
     "playwright:test:wallet": "playwright test --grep 'wallet.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
-    "playwright:test:social": "playwright test --grep 'social.spec.ts'",
     "playwright:test:siwe": "playwright test --grep siwe.spec.ts",
     "playwright:test:siwe-email": "playwright test --grep siwe-email.spec.ts",
     "playwright:test:siwe-sa": "playwright test --grep siwe-sa.spec.ts",
     "playwright:test:sa": "playwright test --grep smart-account.spec.ts",
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
     "playwright:test:wallet-features": "playwright test --grep wallet-features.spec.ts",
+    "playwright:test:verify": "playwright test --grep verify.spec.ts",
     "playwright:debug": "pnpm playwright:test --debug",
     "playwright:debug:metamask": "pnpm playwright:test:metamask --debug",
     "playwright:debug:basic": "pnpm playwright:test:basic --debug",
     "playwright:debug:wallet": "pnpm playwright:test:wallet --debug",
     "playwright:debug:email": "pnpm playwright:test:email --debug",
-    "playwright:debug:social": "pnpm playwright:test:social --debug",
     "playwright:debug:siwe": "pnpm playwright:test:siwe --debug",
     "playwright:debug:siwe-email": "pnpm playwright:test:siwe-email --debug",
     "playwright:debug:siwe-sa": "pnpm playwright:test:siwe-sa --debug",
     "playwright:debug:sa": "pnpm playwright:test:sa --debug",
     "playwright:debug:canary": "pnpm playwright:test:canary --debug",
-    "playwright:debug:wallet-features": "pnpm playwright:test:wallet-features --debug"
+    "playwright:debug:wallet-features": "pnpm playwright:test:wallet-features --debug",
+    "playwright:debug:verify": "pnpm playwright:test:verify --debug"
   },
   "dependencies": {
     "@chakra-ui/icons": "2.1.1",
@@ -50,13 +50,17 @@
     "@wagmi/core": "2.13.4",
     "@walletconnect/ethereum-provider": "2.15.1",
     "@walletconnect/utils": "2.15.1",
+    "@web3modal/base": "workspace:*",
     "@web3modal/ethers": "workspace:*",
+    "@web3modal/ethers5": "workspace:*",
     "@web3modal/siwe": "workspace:*",
     "@web3modal/solana": "workspace:*",
     "@web3modal/wagmi": "workspace:*",
     "@web3modal/wallet": "workspace:*",
+    "axios": "1.7.2",
     "bs58": "6.0.0",
     "ethers": "6.13.0",
+    "ethers5": "npm:[email protected]",
     "framer-motion": "10.17.9",
     "next": "14.2.3",
     "next-auth": "4.24.5",
@@ -68,14 +72,13 @@
     "valtio": "1.11.2",
     "viem": "2.19.6",
     "wagmi": "2.12.5",
-    "webauthn-p256": "0.0.2",
-    "axios": "1.7.2"
+    "webauthn-p256": "0.0.2"
   },
   "devDependencies": {
     "@aws-sdk/client-cloudwatch": "3.509.0",
-    "@synthetixio/synpress": "4.0.0-alpha.7",
     "@mailsac/api": "1.0.5",
     "@playwright/test": "1.44.0",
+    "@synthetixio/synpress": "4.0.0-alpha.7",
     "@types/node": "20.11.5",
     "@types/react": "18.2.62",
     "@types/react-dom": "18.2.7",

apps/laboratory/src/components/AppKitInfo.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-
 import {
   StackDivider,
   Card,
@@ -39,6 +38,7 @@ export function AppKitInfo({ address, chainId, clientId }: AppKitInfoProps) {
             </Heading>
             <Text data-testid="w3m-chain-id">{chainId}</Text>
           </Box>
+
           {clientId && (
             <Box>
               <Heading size="xs" textTransform="uppercase" pb="2">

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

@@ -0,0 +1,98 @@
+import { Button, Stack, Text, Input } from '@chakra-ui/react'
+import { useState } from 'react'
+import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers5/react'
+import { EthereumProvider } from '@walletconnect/ethereum-provider'
+import { useChakraToast } from '../Toast'
+import { ethers } from 'ethers5'
+import { W3mFrameProvider } from '@web3modal/wallet'
+import { type GetCallsStatusParams } from '../../types/EIP5792'
+import { EIP_5792_RPC_METHODS } from '../../utils/EIP5792Utils'
+
+export function Ethers5GetCallsStatusTest() {
+  const [isLoading, setLoading] = useState(false)
+  const [batchCallId, setBatchCallId] = useState('')
+
+  const { address, chainId, isConnected } = useWeb3ModalAccount()
+  const { walletProvider } = useWeb3ModalProvider()
+  const toast = useChakraToast()
+
+  async function onGetCallsStatus() {
+    try {
+      setLoading(true)
+      if (!walletProvider || !address) {
+        throw Error('user is disconnected')
+      }
+      if (!chainId) {
+        throw Error('chain not selected')
+      }
+      if (!batchCallId) {
+        throw Error('call id not valid')
+      }
+      const provider = new ethers.providers.Web3Provider(walletProvider, chainId)
+      const batchCallsStatus = await provider.send(EIP_5792_RPC_METHODS.WALLET_GET_CALLS_STATUS, [
+        batchCallId as GetCallsStatusParams
+      ])
+      toast({
+        title: 'Success',
+        description: JSON.stringify(batchCallsStatus),
+        type: 'success'
+      })
+    } catch {
+      toast({
+        title: 'Error',
+        description: 'Failed to get call status',
+        type: 'error'
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+  function isGetCallsStatusSupported(): boolean {
+    // We are currently checking capabilities above. We should use those capabilities instead of this check.
+    if (walletProvider instanceof W3mFrameProvider) {
+      return true
+    }
+    if (walletProvider instanceof EthereumProvider) {
+      return Boolean(
+        walletProvider?.signer?.session?.namespaces?.['eip155']?.methods?.includes(
+          EIP_5792_RPC_METHODS.WALLET_GET_CALLS_STATUS
+        )
+      )
+    }
+
+    return false
+  }
+
+  if (!isConnected || !address || !walletProvider) {
+    return (
+      <Text fontSize="md" color="yellow">
+        Wallet not connected
+      </Text>
+    )
+  }
+  if (!isGetCallsStatusSupported()) {
+    return (
+      <Text fontSize="md" color="yellow">
+        Wallet does not support wallet_getCallsStatus rpc method
+      </Text>
+    )
+  }
+
+  return (
+    <Stack direction={['column', 'column', 'row']}>
+      <Input
+        placeholder="0xf34ffa..."
+        onChange={e => setBatchCallId(e.target.value)}
+        value={batchCallId}
+        isDisabled={isLoading}
+      />
+      <Button
+        data-testid="get-calls-status-button"
+        onClick={onGetCallsStatus}
+        isDisabled={isLoading}
+      >
+        Get Calls Status
+      </Button>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers5/react'
+import EthereumProvider from '@walletconnect/ethereum-provider'
+
+import { AppKitInfo } from '../AppKitInfo'
+
+export function Ethers5ModalInfo() {
+  const { isConnected, address, chainId } = useWeb3ModalAccount()
+  const [ready, setReady] = React.useState(false)
+  const [clientId, setClientId] = React.useState<string | null>(null)
+  const { walletProvider, walletProviderType } = useWeb3ModalProvider()
+  async function getClientId() {
+    if (walletProviderType === 'walletConnect') {
+      const ethereumProvider = walletProvider as unknown as EthereumProvider
+
+      return await ethereumProvider?.signer?.client?.core?.crypto?.getClientId()
+    }
+
+    return null
+  }
+
+  React.useEffect(() => {
+    getClientId().then(setClientId)
+  }, [walletProvider])
+
+  React.useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return ready && isConnected ? (
+    <AppKitInfo address={address} chainId={chainId} clientId={clientId} />
+  ) : null
+}