feat: add support for eip5792 getCapabilities and sendCalls

.eslintrc.json

@@ -14,6 +14,7 @@
   "ignorePatterns": [
     "node_modules",
     "*.config.js",
+    "*.config.ts",
     "next-env.d.ts",
     "out",
     "dist",
@@ -22,7 +23,9 @@
     "examples",
     "coverage",
     ".changeset",
-    "playwright-report"
+    "playwright-report",
+    "*.mock.ts",
+    "*.test.ts"
   ],
   "rules": {
     // Core
@@ -65,6 +68,7 @@
     ],
 
     // Typescript
+    "@typescript-eslint/array-type": "off",
     "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
     "@typescript-eslint/dot-notation": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",

apps/laboratory/package.json

@@ -54,6 +54,7 @@
     "@web3modal/siwe": "workspace:*",
     "@web3modal/solana": "workspace:*",
     "@web3modal/wagmi": "workspace:*",
+    "@web3modal/wallet": "workspace:*",
     "bs58": "6.0.0",
     "ethers": "6.13.0",
     "framer-motion": "10.17.9",

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

@@ -4,6 +4,7 @@ import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/rea
 import { EthereumProvider } from '@walletconnect/ethereum-provider'
 import { useChakraToast } from '../Toast'
 import { BrowserProvider } from 'ethers'
+import { W3mFrameProvider } from '@web3modal/wallet'
 import { type GetCallsStatusParams } from '../../types/EIP5792'
 import { EIP_5792_RPC_METHODS } from '../../utils/EIP5792Utils'
 
@@ -47,6 +48,10 @@ export function EthersGetCallsStatusTest() {
     }
   }
   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(
@@ -82,7 +87,7 @@ export function EthersGetCallsStatusTest() {
         isDisabled={isLoading}
       />
       <Button
-        data-test-id="get-calls-status-button"
+        data-testid="get-calls-status-button"
         onClick={onGetCallsStatus}
         isDisabled={isLoading}
       >

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

@@ -1,16 +1,19 @@
-import { Button, Stack, Text, Spacer } from '@chakra-ui/react'
-import { useState } from 'react'
+import { Button, Stack, Text, Spacer, Heading } from '@chakra-ui/react'
+import { useState, useEffect } from 'react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { EthereumProvider } from '@walletconnect/ethereum-provider'
 import { useChakraToast } from '../Toast'
-import { parseGwei, type Address } from 'viem'
+import type { Address } from 'viem'
 import { vitalikEthAddress } from '../../utils/DataUtil'
 import { BrowserProvider } from 'ethers'
 import {
   EIP_5792_RPC_METHODS,
   WALLET_CAPABILITIES,
   getCapabilitySupportedChainInfo
 } from '../../utils/EIP5792Utils'
+import { W3mFrameProvider } from '@web3modal/wallet'
+
+type Provider = W3mFrameProvider | Awaited<ReturnType<(typeof EthereumProvider)['init']>>
 
 export function EthersSendCallsTest() {
   const [loading, setLoading] = useState(false)
@@ -19,12 +22,25 @@ export function EthersSendCallsTest() {
   const { walletProvider } = useWeb3ModalProvider()
   const toast = useChakraToast()
 
-  const atomicBatchSupportedChains =
-    address && walletProvider instanceof EthereumProvider
-      ? getCapabilitySupportedChainInfo(WALLET_CAPABILITIES.ATOMIC_BATCH, walletProvider, address)
-      : []
+  const [atomicBatchSupportedChains, setAtomicBatchSupportedChains] = useState<
+    Awaited<ReturnType<typeof getCapabilitySupportedChainInfo>>
+  >([])
+
+  const [lastCallsBatchId, setLastCallsBatchId] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (address && walletProvider) {
+      getCapabilitySupportedChainInfo(
+        WALLET_CAPABILITIES.ATOMIC_BATCH,
+        walletProvider as Provider,
+        address
+      ).then(capabilities => setAtomicBatchSupportedChains(capabilities))
+    } else {
+      setAtomicBatchSupportedChains([])
+    }
+  }, [address, walletProvider, isConnected])
 
-  const atomicBatchSupportedChainNames = atomicBatchSupportedChains
+  const atomicBatchSupportedChainsNames = atomicBatchSupportedChains
     .map(ci => ci.chainName)
     .join(', ')
   const currentChainsInfo = atomicBatchSupportedChains.find(
@@ -41,12 +57,11 @@ export function EthersSendCallsTest() {
         throw Error('chain not selected')
       }
       const provider = new BrowserProvider(walletProvider, chainId)
-      const amountToSend = parseGwei('0.001').toString(16)
       const calls = [
         {
           to: vitalikEthAddress as `0x${string}`,
           data: '0x' as `0x${string}`,
-          value: `0x${amountToSend}`
+          value: `0x0`
         },
         {
           to: vitalikEthAddress as Address,
@@ -63,6 +78,8 @@ export function EthersSendCallsTest() {
       const batchCallHash = await provider.send(EIP_5792_RPC_METHODS.WALLET_SEND_CALLS, [
         sendCallsParams
       ])
+
+      setLastCallsBatchId(batchCallHash)
       toast({
         title: 'Success',
         description: batchCallHash,
@@ -79,6 +96,9 @@ export function EthersSendCallsTest() {
     }
   }
   function isSendCallsSupported(): boolean {
+    if (walletProvider instanceof W3mFrameProvider) {
+      return true
+    }
     if (walletProvider instanceof EthereumProvider) {
       return Boolean(
         walletProvider?.signer?.session?.namespaces?.['eip155']?.methods?.includes(
@@ -113,15 +133,26 @@ export function EthersSendCallsTest() {
   }
 
   return currentChainsInfo ? (
-    <Stack direction={['column', 'column', 'row']}>
-      <Button data-test-id="send-calls-button" onClick={onSendCalls} isDisabled={loading}>
+    <Stack direction={['column', 'column']}>
+      <Button
+        data-testid="send-calls-button"
+        onClick={onSendCalls}
+        isDisabled={loading}
+        maxWidth={'50%'}
+      >
         Send Batch Calls to Vitalik
       </Button>
       <Spacer />
+      {lastCallsBatchId && (
+        <>
+          <Heading size="xs">Last batch call ID:</Heading>
+          <Text data-testid="send-calls-id">{lastCallsBatchId}</Text>
+        </>
+      )}
     </Stack>
   ) : (
     <Text fontSize="md" color="yellow">
-      Switch to {atomicBatchSupportedChainNames} to test atomic batch feature
+      Switch to {atomicBatchSupportedChainsNames} to test atomic batch feature
     </Text>
   )
 }

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

@@ -1,5 +1,5 @@
 import { Button, Stack, Text, Input, Tooltip } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useWeb3ModalAccount, useWeb3ModalProvider } from '@web3modal/ethers/react'
 import { EthereumProvider } from '@walletconnect/ethereum-provider'
 import { useChakraToast } from '../Toast'
@@ -11,6 +11,7 @@ import {
   WALLET_CAPABILITIES,
   getCapabilitySupportedChainInfo
 } from '../../utils/EIP5792Utils'
+import { W3mFrameProvider } from '@web3modal/wallet'
 
 export function EthersSendCallsWithPaymasterServiceTest() {
   const [paymasterServiceUrl, setPaymasterServiceUrl] = useState<string>('')
@@ -20,14 +21,27 @@ export function EthersSendCallsWithPaymasterServiceTest() {
   const { walletProvider } = useWeb3ModalProvider()
   const toast = useChakraToast()
 
-  const paymasterServiceSupportedChains =
-    address && walletProvider instanceof EthereumProvider
-      ? getCapabilitySupportedChainInfo(
-          WALLET_CAPABILITIES.PAYMASTER_SERVICE,
-          walletProvider,
-          address
-        )
-      : []
+  const [paymasterServiceSupportedChains, setPaymasterServiceSupportedChains] = useState<
+    Awaited<ReturnType<typeof getCapabilitySupportedChainInfo>>
+  >([])
+
+  useEffect(() => {
+    if (
+      address &&
+      (walletProvider instanceof EthereumProvider || walletProvider instanceof W3mFrameProvider)
+    ) {
+      getCapabilitySupportedChainInfo(
+        WALLET_CAPABILITIES.PAYMASTER_SERVICE,
+        walletProvider,
+        address
+      ).then(capabilities => {
+        setPaymasterServiceSupportedChains(capabilities)
+      })
+    } else {
+      setPaymasterServiceSupportedChains([])
+    }
+  }, [address, walletProvider])
+
   const paymasterServiceSupportedChainNames = paymasterServiceSupportedChains
     .map(ci => ci.chainName)
     .join(', ')
@@ -90,6 +104,7 @@ export function EthersSendCallsWithPaymasterServiceTest() {
   }
 
   function isSendCallsSupported(): boolean {
+    // We are currently checking capabilities above. We should use those capabilities instead of this check.
     if (walletProvider instanceof EthereumProvider) {
       return Boolean(
         walletProvider?.signer?.session?.namespaces?.['eip155']?.methods?.includes(
@@ -98,7 +113,7 @@ export function EthersSendCallsWithPaymasterServiceTest() {
       )
     }
 
-    return false
+    return walletProvider instanceof W3mFrameProvider
   }
 
   if (!isConnected || !walletProvider || !address) {
@@ -137,7 +152,7 @@ export function EthersSendCallsWithPaymasterServiceTest() {
       </Tooltip>
       <Button
         width={'fit-content'}
-        data-test-id="send-calls-paymaster-service-button"
+        data-testid="send-calls-paymaster-service-button"
         onClick={onSendCalls}
         isDisabled={isLoading || !paymasterServiceUrl}
       >

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

@@ -44,7 +44,7 @@ export function EthersTransactionTest() {
   return Number(chainId) !== mainnet.chainId && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
-        data-test-id="sign-transaction-button"
+        data-testid="sign-transaction-button"
         onClick={onSendTransaction}
         isDisabled={loading}
       >

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

@@ -44,7 +44,7 @@ export function EthersWriteContractTest() {
   return allowedChains.includes(Number(chainId)) && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
-        data-test-id="sign-transaction-button"
+        data-testid="sign-transaction-button"
         onClick={onSendTransaction}
         isDisabled={loading}
       >

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

@@ -142,7 +142,7 @@ export function SolanaSendTransactionTest() {
   return (
     <Stack direction={['column', 'column', 'row']}>
       <Button
-        data-test-id="sign-transaction-button"
+        data-testid="sign-transaction-button"
         onClick={onSendTransaction}
         isDisabled={loading}
       >

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

@@ -128,7 +128,7 @@ export function SolanaSignTransactionTest() {
   return (
     <Stack direction={['column', 'column', 'row']}>
       <Button
-        data-test-id="sign-transaction-button"
+        data-testid="sign-transaction-button"
         onClick={onSignTransaction}
         isDisabled={loading}
       >

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

@@ -8,24 +8,23 @@ import { useCallsStatus } from 'wagmi/experimental'
 import { useWagmiAvailableCapabilities } from '../../hooks/useWagmiActiveCapabilities'
 
 export function WagmiGetCallsStatusTest() {
-  const { ethereumProvider, isMethodSupported: isGetCallsStatusSupported } =
-    useWagmiAvailableCapabilities({
-      method: EIP_5792_RPC_METHODS.WALLET_GET_CALLS_STATUS
-    })
+  const { supported } = useWagmiAvailableCapabilities({
+    method: EIP_5792_RPC_METHODS.WALLET_GET_CALLS_STATUS
+  })
 
   const { status, address } = useAccount()
 
   const isConnected = status === 'connected'
 
-  if (!isConnected || !ethereumProvider || !address) {
+  if (!isConnected || !address) {
     return (
       <Text fontSize="md" color="yellow">
         Wallet not connected
       </Text>
     )
   }
 
-  if (!isGetCallsStatusSupported()) {
+  if (!supported) {
     return (
       <Text fontSize="md" color="yellow">
         Wallet does not support the "wallet_getCallsStatus" RPC method
@@ -74,9 +73,10 @@ function AvailableTestContent() {
         onChange={e => setBatchCallId(e.target.value)}
         value={batchCallId}
         isDisabled={isLoading}
+        data-testid="get-calls-id-input"
       />
       <Button
-        data-test-id="get-calls-status-button"
+        data-testid="get-calls-status-button"
         onClick={onGetCallsStatus}
         isDisabled={isLoading || !batchCallId}
         isLoading={isLoading}

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

@@ -141,7 +141,7 @@ export function WagmiRequestPermissionsTest() {
   return (
     <Stack direction={['column', 'column', 'row']}>
       <Button
-        data-test-id="request-permissions-button"
+        data-testid="request-permissions-button"
         onClick={onRequestPermissions}
         isDisabled={Boolean(
           isRequestPermissionLoading || Boolean(grantedPermissions) || !isConnected
@@ -151,7 +151,7 @@ export function WagmiRequestPermissionsTest() {
         Request Permissions
       </Button>
       <Button
-        data-test-id="clear-permissions-button"
+        data-testid="clear-permissions-button"
         onClick={onClearPermissions}
         isDisabled={!grantedPermissions}
       >