feat: implement wallet_getSubAccounts rpc

Author: montycheese

examples/testapp/src/pages/add-sub-account/components/GetSubAccounts.tsx

@@ -0,0 +1,67 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import { useCallback, useState } from 'react';
+
+type GetSubAccountsProps = {
+  sdk: ReturnType<typeof createCoinbaseWalletSDK>;
+};
+
+export function GetSubAccounts({ sdk }: GetSubAccountsProps) {
+  const [subAccounts, setSubAccounts] = useState<any>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGetSubAccounts = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const provider = sdk.getProvider();
+      const accounts = await provider.request({
+        method: 'eth_requestAccounts',
+      }) as string[];
+      if (accounts.length < 2) {
+        throw new Error('Create a sub account first by clicking the Add Address button');
+      }
+      const response = await provider.request({
+        method: 'wallet_getSubAccounts',
+        params: [{
+          account: accounts[1],
+          domain: window.location.origin,
+        }],
+      });
+
+      console.info('getSubAccounts response', response);
+      setSubAccounts(response);
+    } catch (error) {
+      console.error('Error getting sub accounts:', error);
+      setSubAccounts({ error: error instanceof Error ? error.message : 'Unknown error' });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handleGetSubAccounts} isLoading={isLoading} loadingText="Getting Sub Accounts...">
+        Get Sub Accounts
+      </Button>
+      {subAccounts && (
+        <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(subAccounts, null, 2)}
+        </Box>
+      )}
+    </>
+  );
+} 

examples/testapp/src/pages/add-sub-account/index.page.tsx

@@ -19,6 +19,7 @@ import { AddSubAccount } from './components/AddSubAccount';
 import { AddSubAccountWithoutKeys } from './components/AddSubAccountWithoutKeys';
 import { Connect } from './components/Connect';
 import { GenerateNewSigner } from './components/GenerateNewSigner';
+import { GetSubAccounts } from './components/GetSubAccounts';
 import { GrantSpendPermission } from './components/GrantSpendPermission';
 import { PersonalSign } from './components/PersonalSign';
 import { SendCalls } from './components/SendCalls';
@@ -81,6 +82,7 @@ export default function SubAccounts() {
           onAddSubAccount={setSubAccountAddress}
           signerFn={getSubAccountSigner}
         />
+        <GetSubAccounts sdk={sdk} />
         <AddSubAccountWithoutKeys
           sdk={sdk}
           onAddSubAccount={setSubAccountAddress}

packages/wallet-sdk/src/core/rpc/wallet_getSubAccount.ts

@@ -0,0 +1,22 @@
+import { Address, Hex } from 'viem';
+
+export type GetSubAccountRequest = {
+  account: Address;
+  domain: string;
+};
+
+export type GetSubAccountResponseItem = {
+  address: Address;
+  factory: Address;
+  factoryCalldata: Hex;
+};
+
+export type GetSubAccountResponse = {
+  subAccounts: GetSubAccountResponseItem[];
+};
+
+export type GetSubAccountSchema = {
+  Method: 'wallet_getSubAccount';
+  Parameters: [GetSubAccountRequest];
+  ReturnType: GetSubAccountResponse;
+};

packages/wallet-sdk/src/sign/scw/SCWSigner.ts

@@ -155,7 +155,7 @@ export class SCWSigner implements Signer {
     }
   }
 
-  async _request(request: RequestArguments) {
+  async  _request(request: RequestArguments) {
     if (this.accounts.length === 0) {
       switch (request.method) {
         case 'eth_requestAccounts': {
@@ -179,7 +179,7 @@ export class SCWSigner implements Signer {
           this.callback?.('connect', { chainId: numberToHex(this.chain.id) });
           return this.accounts;
         }
-        case 'wallet_switchEthereumChain': {
+        case 'wallet_switchEthereumChain': { 
           assertParamsChainId(request.params);
           this.chain.id = Number(request.params[0].chainId);
           return;
@@ -280,6 +280,17 @@ export class SCWSigner implements Signer {
         return this.sendRequestToPopup(modifiedRequest);
       }
       // Sub Account Support
+      case 'wallet_getSubAccounts':
+        const client = getClient(this.chain.id);
+        assertPresence(
+          client,
+          standardErrors.rpc.internal(
+            `client not found for chainId ${this.chain.id} when fetching sub accounts`
+          )
+        );
+        const subAccounts = await client.request(request);
+        return subAccounts;
+
       case 'wallet_addSubAccount':
         return this.addSubAccount(request);
       case 'coinbase_fetchPermissions': {

packages/wallet-sdk/src/store/chain-clients/extensions.ts

@@ -0,0 +1,41 @@
+import { PublicClient } from 'viem';
+
+import { GetSubAccountSchema } from ':core/rpc/wallet_getSubAccount.js';
+
+export type ExtendedRpcMethods = {
+  getSubAccount: (args: GetSubAccountSchema['Parameters'][0]) => Promise<GetSubAccountSchema['ReturnType']>;
+  // Add more non-standardmethods here as needed
+};
+
+// Configuration for RPC method extensions
+export type RpcMethodConfig<T extends keyof ExtendedRpcMethods> = {
+  methodName: T;
+  rpcMethod: string;
+  handler: (client: PublicClient, args: Parameters<ExtendedRpcMethods[T]>[0]) => ReturnType<ExtendedRpcMethods[T]>;
+};
+
+// Define all extended RPC methods here
+// To add a new method, add a new configuration object to this array
+export const extendedRpcMethods: RpcMethodConfig<keyof ExtendedRpcMethods>[] = [
+  {
+    methodName: 'getSubAccount',
+    rpcMethod: 'wallet_getSubAccount',
+    handler: (client, args) => client.request<GetSubAccountSchema>({
+      method: 'wallet_getSubAccount',
+      params: [args],
+    }),
+  },
+];
+
+// Generic function to create extended client
+export function createExtendedClient(baseClient: PublicClient): PublicClient & ExtendedRpcMethods {
+  return baseClient.extend((client) => {
+    const extensions = {} as ExtendedRpcMethods;
+    
+    extendedRpcMethods.forEach((config) => {
+      extensions[config.methodName] = (args: any) => config.handler(client, args);
+    });
+    
+    return extensions;
+  });
+} 

packages/wallet-sdk/src/store/chain-clients/store.ts

@@ -2,9 +2,11 @@ import { PublicClient } from 'viem';
 import { BundlerClient } from 'viem/account-abstraction';
 import { createStore } from 'zustand/vanilla';
 
+import { ExtendedRpcMethods } from './extensions.js';
+
 export type ChainClientState = {
   [key: number]: {
-    client: PublicClient;
+    client: PublicClient & ExtendedRpcMethods;
     bundlerClient: BundlerClient;
   };
 };

packages/wallet-sdk/src/store/chain-clients/utils.ts

@@ -1,8 +1,9 @@
-import { createPublicClient, defineChain, http, PublicClient } from 'viem';
+import { createPublicClient, defineChain, http } from 'viem';
 import { BundlerClient, createBundlerClient } from 'viem/account-abstraction';
 
-import { ChainClients } from './store.js';
 import { RPCResponseNativeCurrency } from ':core/message/RPCResponse.js';
+import { createExtendedClient } from './extensions.js';
+import { ChainClients } from './store.js';
 
 export type SDKChain = {
   id: number;
@@ -30,12 +31,16 @@ export function createClients(chains: SDKChain[]) {
       },
     });
 
-    const client = createPublicClient({
+    const baseClient = createPublicClient({
       chain: viemchain,
       transport: http(c.rpcUrl),
     });
+
+    // Create extended client with all custom RPC methods
+    const client = createExtendedClient(baseClient);
+
     const bundlerClient = createBundlerClient({
-      client,
+      client: baseClient,
       transport: http(c.rpcUrl),
     });
 
@@ -48,10 +53,10 @@ export function createClients(chains: SDKChain[]) {
   });
 }
 
-export function getClient(chainId: number): PublicClient | undefined {
+export function getClient(chainId: number) {
   return ChainClients.getState()[chainId]?.client;
 }
 
 export function getBundlerClient(chainId: number): BundlerClient | undefined {
   return ChainClients.getState()[chainId]?.bundlerClient;
-}
+}