feat: support passing chainIds to wallet_connect in playground

examples/testapp/src/components/RpcMethods/method/connectionMethods.ts

@@ -1,3 +1,4 @@
+import { type Hex, numberToHex } from 'viem';
 import { RpcRequestInput } from './RpcRequestInput';
 
 const ethRequestAccounts: RpcRequestInput = {
@@ -18,15 +19,31 @@ const walletConnect: RpcRequestInput = {
       required: true,
     },
     {
-      key: 'capabilities',
+      key: 'chainIds',
     },
-  ],
-  format: (data: Record<string, string>) => [
     {
-      version: data.version,
-      capabilities: data.capabilities,
+      key: 'capabilities',
     },
   ],
+  format: (data: Record<string, string>) => {
+    const chainIds = (data.chainIds ?? '')
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v.length > 0)
+      .map((v) => {
+        try {
+          return numberToHex(BigInt(v));
+        } catch (_) {
+          return undefined;
+        }
+      })
+      .filter((v): v is Hex => Boolean(v));
+
+    const payload: Record<string, unknown> = { version: data.version };
+    if (chainIds.length > 0) payload.chainIds = chainIds;
+    if (data.capabilities) payload.capabilities = data.capabilities;
+    return [payload];
+  },
 };
 
 export const connectionMethods = [ethRequestAccounts, ethAccounts, walletConnect];

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

@@ -40,6 +40,7 @@ export default function AutoSubAccount() {
     siwe: false,
     addSubAccount: false,
   });
+  const [walletConnectChainIds, setWalletConnectChainIds] = useState<string>('');
   const { subAccountsConfig, setSubAccountsConfig, config, setConfig } = useConfig();
   const { provider } = useEIP1193Provider();
 
@@ -185,8 +186,24 @@ export default function AutoSubAccount() {
 
     let params: unknown[] = [];
 
-    // Build params based on selected capabilities
-    if (walletConnectCapabilities.siwe || walletConnectCapabilities.addSubAccount) {
+    // Build params based on selected capabilities and chainIds input
+    const chainIds = walletConnectChainIds
+      .split(',')
+      .map((v) => v.trim())
+      .filter((v) => v.length > 0)
+      .flatMap((v) => {
+        try {
+          return [numberToHex(BigInt(v))];
+        } catch (_) {
+          return [] as string[];
+        }
+      });
+
+    if (
+      walletConnectCapabilities.siwe ||
+      walletConnectCapabilities.addSubAccount ||
+      chainIds.length > 0
+    ) {
       const capabilities: Record<string, unknown> = {};
 
       // Add SIWE capability if selected
@@ -215,8 +232,9 @@ export default function AutoSubAccount() {
 
       params = [
         {
-          ...(walletConnectCapabilities.siwe && { version: '1' }),
-          capabilities,
+          version: '1',
+          ...(chainIds.length > 0 && { chainIds }),
+          ...(Object.keys(capabilities).length > 0 && { capabilities }),
         },
       ];
     }
@@ -374,6 +392,14 @@ export default function AutoSubAccount() {
             >
               Add Sub Account
             </Checkbox>
+            <Box>
+              <FormLabel>Chain IDs (comma separated integers)</FormLabel>
+              <Input
+                placeholder="e.g. 1, 8453"
+                value={walletConnectChainIds}
+                onChange={(e) => setWalletConnectChainIds(e.target.value)}
+              />
+            </Box>
           </Stack>
         </FormControl>
         {accounts.length > 0 && (