Add support for sub account and the new addAddress RPC

.gitignore

@@ -41,3 +41,5 @@ examples/**/yarn.lock
 
 # next.js
 .next
+
+tsconfig.tsbuildinfo

examples/testapp/package.json

@@ -24,7 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.45.2",
-    "viem": "2.21.1"
+    "viem": "^2.22.16"
   },
   "devDependencies": {
     "@types/react": "18.2.15",

examples/testapp/src/context/CBWSDKReactContextProvider.tsx

@@ -161,11 +161,11 @@ export function CBWSDKReactContextProvider({ children }: CBWSDKProviderProps) {
     setProvider(cbwprovider);
 
     return () => {
-      cbwprovider.removeListener('connect', handleConnect);
-      cbwprovider.removeListener('disconnect', handleDisconnect);
-      cbwprovider.removeListener('accountsChanged', handleAccountsChanged);
-      cbwprovider.removeListener('chainChanged', handleChainChanged);
-      cbwprovider.removeListener('message', handleMessage);
+      cbwprovider.off('connect', handleConnect);
+      cbwprovider.off('disconnect', handleDisconnect);
+      cbwprovider.off('accountsChanged', handleAccountsChanged);
+      cbwprovider.off('chainChanged', handleChainChanged);
+      cbwprovider.off('message', handleMessage);
     };
   }, [version, option, config]);
 

examples/testapp/src/pages/sub-accounts/components/AddAddressButton.tsx

@@ -0,0 +1,47 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useCallback, useState } from 'react';
+
+export function AddAddressButton({ sdk }: { sdk: ReturnType<typeof createCoinbaseWalletSDK> }) {
+  const [subAccount, setSubAccount] = useState<string>();
+
+  const handleAddAddress = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+    const provider = sdk.getProvider();
+    const response = (await provider.request({
+      method: 'wallet_addAddress',
+      params: [
+        {
+          chainId: 84532,
+        },
+      ],
+    })) as { address: string };
+
+    console.info('customlogs: response', response);
+
+    setSubAccount(response.address);
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handleAddAddress}>
+        Add Address
+      </Button>
+      {subAccount && (
+        <Box
+          as="pre"
+          w="full"
+          p={2}
+          bg="gray.900"
+          borderRadius="md"
+          border="1px solid"
+          borderColor="gray.700"
+        >
+          {JSON.stringify(subAccount, null, 2)}
+        </Box>
+      )}
+    </>
+  );
+}

examples/testapp/src/pages/sub-accounts/components/ConnectButton.tsx

@@ -0,0 +1,41 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useCallback, useState } from 'react';
+
+export function ConnectButton({ sdk }: { sdk: ReturnType<typeof createCoinbaseWalletSDK> }) {
+  const [state, setState] = useState<string[]>();
+  const handleConnect = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+
+    const provider = sdk.getProvider();
+    const response = await provider.request({
+      method: 'eth_requestAccounts',
+    });
+
+    console.info('customlogs: response', response);
+    setState(response as string[]);
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handleConnect}>
+        Connect
+      </Button>
+      {state && (
+        <Box
+          as="pre"
+          w="full"
+          p={2}
+          bg="gray.900"
+          borderRadius="md"
+          border="1px solid"
+          borderColor="gray.700"
+        >
+          {JSON.stringify(state, null, 2)}
+        </Box>
+      )}
+    </>
+  );
+}

examples/testapp/src/pages/sub-accounts/components/PersonalSignButton.tsx

@@ -0,0 +1,48 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useCallback, useState } from 'react';
+import { toHex } from 'viem';
+
+export function PersonalSignButton({ sdk }: { sdk: ReturnType<typeof createCoinbaseWalletSDK> }) {
+  const [state, setState] = useState<string>();
+  const handlePersonalSign = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+
+    const provider = sdk.getProvider();
+    try {
+      const response = await provider.request({
+        method: 'personal_sign',
+        params: [toHex('Hello, world!')],
+      });
+      console.info('customlogs: response', response);
+      setState(response as string);
+    } catch (e) {
+      console.error('customlogs: error', e);
+    }
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handlePersonalSign}>
+        Personal Sign
+      </Button>
+      {state && (
+        <Box
+          as="pre"
+          w="full"
+          p={2}
+          bg="gray.900"
+          borderRadius="md"
+          border="1px solid"
+          borderColor="gray.700"
+          overflow="auto"
+          whiteSpace="pre-wrap"
+        >
+          {JSON.stringify(state, null, 2)}
+        </Box>
+      )}
+    </>
+  );
+}

examples/testapp/src/pages/sub-accounts/components/SendCallsButton.tsx

@@ -0,0 +1,59 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useCallback, useState } from 'react';
+import { baseSepolia } from 'viem/chains';
+
+export function SendCallsButton({ sdk }: { sdk: ReturnType<typeof createCoinbaseWalletSDK> }) {
+  const [state, setState] = useState<string>();
+  const handleSendCalls = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+
+    const provider = sdk.getProvider();
+    try {
+      const response = await provider.request({
+        method: 'wallet_sendCalls',
+        params: [
+          {
+            chainId: baseSepolia.id,
+            calls: [],
+            version: '1',
+            // capabilities: {
+            //   paymasterService: {
+            //     url: '',
+            //   },
+            // },
+          },
+        ],
+      });
+      console.info('customlogs: response', response);
+      setState(response as string);
+    } catch (e) {
+      console.error('customlogs: error', e);
+    }
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handleSendCalls}>
+        Send Calls
+      </Button>
+      {state && (
+        <Box
+          as="pre"
+          w="full"
+          p={2}
+          bg="gray.900"
+          borderRadius="md"
+          border="1px solid"
+          borderColor="gray.700"
+          overflow="auto"
+          whiteSpace="pre-wrap"
+        >
+          {JSON.stringify(state, null, 2)}
+        </Box>
+      )}
+    </>
+  );
+}

examples/testapp/src/pages/sub-accounts/index.tsx

@@ -0,0 +1,44 @@
+import { Container, VStack } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import React, { useEffect, useState } from 'react';
+
+import { AddAddressButton } from './components/AddAddressButton';
+import { ConnectButton } from './components/ConnectButton';
+import { PersonalSignButton } from './components/PersonalSignButton';
+import { SendCallsButton } from './components/SendCallsButton';
+
+export default function SubAccounts() {
+  const [sdk, setSDK] = useState<ReturnType<typeof createCoinbaseWalletSDK>>();
+
+  useEffect(() => {
+    const sdk = createCoinbaseWalletSDK({
+      appName: 'CryptoPlayground',
+      preference: {
+        keysUrl: 'http://localhost:3005/connect',
+        options: 'smartWalletOnly',
+      },
+    });
+
+    if (!sdk) {
+      return;
+    }
+
+    setSDK(sdk);
+    const provider = sdk.getProvider();
+
+    provider.on('accountsChanged', (accounts) => {
+      console.info('customlogs: accountsChanged', accounts);
+    });
+  }, []);
+
+  return (
+    <Container mb={16}>
+      <VStack w="full" spacing={4}>
+        <ConnectButton sdk={sdk} />
+        <AddAddressButton sdk={sdk} />
+        <PersonalSignButton sdk={sdk} />
+        <SendCallsButton sdk={sdk} />
+      </VStack>
+    </Container>
+  );
+}

packages/wallet-sdk/package.json

@@ -33,7 +33,12 @@
     "@noble/hashes": "^1.4.0",
     "clsx": "^1.2.1",
     "eventemitter3": "^5.0.1",
-    "preact": "^10.24.2"
+    "idb-keyval": "^6.2.1",
+    "ox": "^0.6.5",
+    "preact": "^10.24.2",
+    "viem": "^2.22.16",
+    "webauthn-p256": "^0.0.10",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@size-limit/preset-big-lib": "^11.1.6",
@@ -48,6 +53,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "fake-indexeddb": "^6.0.0",
     "glob": "^11.0.0",
     "jest-websocket-mock": "^2.4.0",
     "jsdom": "^25.0.1",

packages/wallet-sdk/src/core/message/RPCResponse.ts

@@ -1,5 +1,11 @@
 import { SerializedEthereumRpcError } from '../error/utils.js';
 
+type NativeCurrency = {
+  symbol: string;
+  name: string;
+  decimal: number;
+};
+
 export type RPCResponse = {
   result:
     | {
@@ -11,6 +17,7 @@ export type RPCResponse = {
   data?: {
     // optional data
     chains?: { [key: number]: string };
+    nativeCurrencies?: { [key: number]: NativeCurrency };
     capabilities?: Record<`0x${string}`, Record<string, unknown>>;
   };
 };

packages/wallet-sdk/src/core/storage/createIdbStorage.test.ts

@@ -0,0 +1,27 @@
+import { createIdbStorage } from './createIdbStorage.js';
+
+describe('createIdbStorage', () => {
+  it('should create an indexedDB storage', () => {
+    const storage = createIdbStorage('test', 'test');
+    expect(storage).toBeDefined();
+  });
+
+  it('getItem', async () => {
+    const storage = createIdbStorage('test', 'test');
+    await storage.setItem('foo', 'bar');
+    expect(await storage.getItem('foo')).toEqual('bar');
+  });
+
+  it('setItem', async () => {
+    const storage = createIdbStorage('test', 'test');
+    await storage.setItem('foo', 'bar');
+    expect(await storage.getItem('foo')).toEqual('bar');
+  });
+
+  it('removeItem', async () => {
+    const storage = createIdbStorage('test', 'test');
+    await storage.setItem('foo', 'bar');
+    await storage.removeItem('foo');
+    expect(await storage.getItem('foo')).toEqual(null);
+  });
+});

packages/wallet-sdk/src/core/storage/createIdbStorage.ts

@@ -0,0 +1,26 @@
+import { createStore, del, get, set } from 'idb-keyval';
+
+export type IdbStorage = {
+  getItem: <T>(key: string) => Promise<T | null>;
+  removeItem: (key: string) => Promise<void>;
+  setItem: (key: string, value: unknown) => Promise<void>;
+};
+
+export function createIdbStorage(scope: string, name: string): IdbStorage {
+  const store = typeof indexedDB !== 'undefined' ? createStore(scope, name) : undefined;
+  return {
+    getItem: async (key: string) => {
+      const value = await get(key, store);
+      if (!value) {
+        return null;
+      }
+      return value;
+    },
+    removeItem: async (key: string) => {
+      return del(key, store);
+    },
+    setItem: async (key: string, value: unknown) => {
+      return set(key, value, store);
+    },
+  };
+}