RPC Rename

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

@@ -0,0 +1,47 @@
+import { Box, Button } from '@chakra-ui/react';
+import { createCoinbaseWalletSDK, getCryptoKeyAccount } from '@coinbase/wallet-sdk';
+import React, { useCallback, useState } from 'react';
+import { baseSepolia } from 'viem/chains';
+
+export function AddOwner({ sdk }: { sdk: ReturnType<typeof createCoinbaseWalletSDK> }) {
+  const [subAccount, setSubAccount] = useState<string>();
+
+  const handleAddOwner = useCallback(async () => {
+    if (!sdk) {
+      return;
+    }
+
+    try {
+      const ckaccount = await getCryptoKeyAccount();
+      const subaccount = await sdk.subaccount.addOwner({
+        chainId: baseSepolia.id,
+        publicKey: ckaccount.account.publicKey,
+      });
+      console.info('customlogs: response', subaccount);
+      setSubAccount(subaccount);
+    } catch (error) {
+      console.error('customlogs: error', error);
+    }
+  }, [sdk]);
+
+  return (
+    <>
+      <Button w="full" onClick={handleAddOwner}>
+        Add Owner
+      </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/add-address/components/AddAddress.tsx → examples/testapp/src/pages/add-sub-account/components/AddSubAccount.tsx

@@ -1,44 +1,53 @@
 import { Box, Button } from '@chakra-ui/react';
 import { createCoinbaseWalletSDK, getCryptoKeyAccount } from '@coinbase/wallet-sdk';
 import React, { useCallback, useState } from 'react';
+import { numberToHex } from 'viem';
 
-type AddAddressProps = {
+type AddSubAccountProps = {
   sdk: ReturnType<typeof createCoinbaseWalletSDK>;
-  onAddAddress: (address: string) => void;
+  onAddSubAccount: (address: string) => void;
 };
 
-export function AddAddress({ sdk, onAddAddress }: AddAddressProps) {
+export function AddSubAccount({ sdk, onAddSubAccount }: AddSubAccountProps) {
   const [subAccount, setSubAccount] = useState<string>();
 
-  const handleAddAddress = useCallback(async () => {
+  const handleAddSubAccount = useCallback(async () => {
     if (!sdk) {
       return;
     }
     const provider = sdk.getProvider();
     const { account } = await getCryptoKeyAccount();
+    await provider.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: numberToHex(84532) }],
+    });
+
     const response = (await provider.request({
-      method: 'wallet_addAddress',
+      method: 'wallet_addSubAccount',
       params: [
         {
           version: '1',
-          chainId: 84532,
-          capabilities: {
-            createAccount: {
-              signer: account.publicKey,
-            },
+          account: {
+            type: 'create',
+            keys: [
+              {
+                type: 'webauthn-p256',
+                key: account.publicKey,
+              },
+            ],
           },
         },
       ],
     })) as { address: string };
 
     console.info('customlogs: response', response);
     setSubAccount(response.address);
-    onAddAddress(response.address);
-  }, [sdk, onAddAddress]);
+    onAddSubAccount(response.address);
+  }, [sdk, onAddSubAccount]);
 
   return (
     <>
-      <Button w="full" onClick={handleAddAddress}>
+      <Button w="full" onClick={handleAddSubAccount}>
         Add Address
       </Button>
       {subAccount && (

examples/testapp/src/pages/add-address/components/GrantSpendPermission.tsx → examples/testapp/src/pages/add-sub-account/components/GrantSpendPermission.tsx

@@ -1,5 +1,5 @@
 import { Box, Button } from '@chakra-ui/react';
-import { createCoinbaseWalletSDK, getCryptoKeyAccount } from '@coinbase/wallet-sdk';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
 import React, { useCallback, useState } from 'react';
 import { Address, Hex } from 'viem';
 import { baseSepolia } from 'viem/chains';
@@ -67,10 +67,10 @@ const makeSpendPermissionTypedData = ({
 
 export function GrantSpendPermission({
   sdk,
-  appAccount,
+  subAccountAddress,
 }: {
   sdk: ReturnType<typeof createCoinbaseWalletSDK>;
-  appAccount: string;
+  subAccountAddress: string;
 }) {
   const [state, setState] = useState<Hex>();
 
@@ -81,26 +81,22 @@ export function GrantSpendPermission({
 
     try {
       const provider = sdk.getProvider();
-      const { account } = await getCryptoKeyAccount();
-      const subaccount = (await provider?.request({
-        method: 'wallet_addAddress',
+      const accounts = (await provider?.request({
+        method: 'eth_accounts',
         params: [
           {
             version: '1',
-            chainId: 84532,
             capabilities: {
-              createAccount: {
-                signer: account.publicKey,
-              },
+              getSubAccounts: true,
             },
           },
         ],
-      })) as { address: Address; root: Address };
+      })) as string[];
 
       const data = {
         chainId: baseSepolia.id,
-        account: subaccount.root,
-        spender: appAccount,
+        account: accounts[0],
+        spender: subAccountAddress,
         token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
         allowance: '0x2386F26FC10000',
         period: 86400,
@@ -112,8 +108,8 @@ export function GrantSpendPermission({
 
       const spendPermission = makeSpendPermissionTypedData({
         chainId: baseSepolia.id,
-        account: subaccount.root,
-        spender: subaccount.address,
+        account: accounts[0] as Address,
+        spender: subAccountAddress as Address,
         token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
         allowance: '0x2386F26FC10000',
         period: 86400,
@@ -125,7 +121,7 @@ export function GrantSpendPermission({
 
       const response = await provider?.request({
         method: 'eth_signTypedData_v4',
-        params: [subaccount.root, spendPermission],
+        params: [accounts[0] as Address, spendPermission],
       });
       console.info('customlogs: response', response);
       localStorage.setItem('cbwsdk.demo.spend-permission.signature', response as Hex);
@@ -134,7 +130,7 @@ export function GrantSpendPermission({
     } catch (error) {
       console.error('customlogs: error', error);
     }
-  }, [sdk, appAccount]);
+  }, [sdk, subAccountAddress]);
 
   return (
     <>

examples/testapp/src/pages/add-address/components/PersonalSign.tsx → examples/testapp/src/pages/add-sub-account/components/PersonalSign.tsx

@@ -5,10 +5,10 @@ import { toHex } from 'viem';
 
 export function PersonalSign({
   sdk,
-  appAccount,
+  subAccountAddress,
 }: {
   sdk: ReturnType<typeof createCoinbaseWalletSDK>;
-  appAccount: string;
+  subAccountAddress: string;
 }) {
   const [state, setState] = useState<string>();
   const handlePersonalSign = useCallback(async () => {
@@ -20,14 +20,14 @@ export function PersonalSign({
     try {
       const response = await provider.request({
         method: 'personal_sign',
-        params: [toHex('Hello, world!'), appAccount],
+        params: [toHex('Hello, world!'), subAccountAddress],
       });
       console.info('customlogs: response', response);
       setState(response as string);
     } catch (e) {
       console.error('customlogs: error', e);
     }
-  }, [sdk, appAccount]);
+  }, [sdk, subAccountAddress]);
 
   return (
     <>

examples/testapp/src/pages/add-address/components/SendCalls.tsx → examples/testapp/src/pages/add-sub-account/components/SendCalls.tsx

@@ -5,10 +5,10 @@ import { baseSepolia } from 'viem/chains';
 
 export function SendCalls({
   sdk,
-  appAccount,
+  subAccountAddress,
 }: {
   sdk: ReturnType<typeof createCoinbaseWalletSDK>;
-  appAccount: string;
+  subAccountAddress: string;
 }) {
   const [state, setState] = useState<string>();
   const handleSendCalls = useCallback(async () => {
@@ -23,7 +23,7 @@ export function SendCalls({
         params: [
           {
             chainId: baseSepolia.id,
-            from: appAccount,
+            from: subAccountAddress,
             calls: [],
             version: '1',
             capabilities: {
@@ -39,7 +39,7 @@ export function SendCalls({
     } catch (e) {
       console.error('customlogs: error', e);
     }
-  }, [sdk, appAccount]);
+  }, [sdk, subAccountAddress]);
 
   return (
     <>

examples/testapp/src/pages/add-address/components/SpendPermissions.tsx → examples/testapp/src/pages/add-sub-account/components/SpendPermissions.tsx

@@ -11,10 +11,10 @@ import {
 
 export function SpendPermissions({
   sdk,
-  appAccount,
+  subAccountAddress,
 }: {
   sdk: ReturnType<typeof createCoinbaseWalletSDK>;
-  appAccount: string;
+  subAccountAddress: string;
 }) {
   const [state, setState] = useState<string>();
 
@@ -52,7 +52,7 @@ export function SpendPermissions({
           {
             version: '1',
             chainId: baseSepolia.id,
-            from: appAccount,
+            from: subAccountAddress,
             calls: [
               {
                 to: SPEND_PERMISSION_MANAGER_ADDRESS,
@@ -82,7 +82,7 @@ export function SpendPermissions({
     } catch (error) {
       console.error('customlogs: error', error);
     }
-  }, [appAccount, sdk]);
+  }, [subAccountAddress, sdk]);
 
   return (
     <>