wallet_sign in playground (#145)

Author: fan-zhang-sv

examples/testapp/src/components/RpcMethods/RpcMethodCard.tsx

@@ -76,13 +76,42 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
           (shortcut) => Number(shortcut.data.chainId) === hexToNumber(chainId)
         )?.data.chain ?? mainnet;
 
+      if (method.includes('wallet_sign')) {
+        const type = data.type || (data.request as any).type;
+        const walletSignData = data.data || (data.request as any).data;
+        let result: string | null = null;
+        if (type === '0x01') {
+          result = await verifySignMsg({
+            method: 'eth_signTypedData_v4',
+            from: data.address?.toLowerCase(),
+            sign: response,
+            message: walletSignData,
+            chain: chain as Chain,
+          });
+        }
+        if (type === '0x45') {
+          result = await verifySignMsg({
+            method: 'personal_sign',
+            from: data.address?.toLowerCase(),
+            sign: response,
+            message: walletSignData.message,
+            chain: chain as Chain,
+          });
+        }
+        if (result) {
+          setVerifyResult(result);
+          return;
+        }
+      }
+
       const verifyResult = await verifySignMsg({
         method,
         from: data.address?.toLowerCase(),
         sign: response,
         message: data.message,
         chain: chain as Chain,
       });
+
       if (verifyResult) {
         setVerifyResult(verifyResult);
         return;
@@ -118,7 +147,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
       }
       try {
         const response = (await provider.request({
-          method,
+          method: method.split('#')[0], // so we can use # to add a description in method name
           params: values,
           // biome-ignore lint/suspicious/noExplicitAny: old code, refactor soon
         })) as any;

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

@@ -1,3 +1,4 @@
+import { parseMessage } from '../shortcut/ShortcutType';
 import { RpcRequestInput } from './RpcRequestInput';
 
 const walletSendCallsEphemeral: RpcRequestInput = {
@@ -16,12 +17,48 @@ const walletSendCallsEphemeral: RpcRequestInput = {
   ],
 };
 
-const walletSignEphemeral: RpcRequestInput = {
-  method: 'wallet_sign',
-  params: [{ key: 'message', required: true }],
+const walletSignOldSpecEphemeral: RpcRequestInput = {
+  method: 'wallet_sign#old',
+  params: [
+    { key: 'version', required: true },
+    { key: 'type', required: true },
+    { key: 'address', required: false },
+    { key: 'data', required: true },
+    { key: 'capabilities', required: false },
+  ],
+  format: (data: Record<string, string>) => [
+    {
+      version: data.version,
+      type: data.type,
+      address: data.address,
+      data: parseMessage(data.data),
+      capabilities: data.capabilities,
+    },
+  ],
+};
+
+const walletSignNewSpecEphemeral: RpcRequestInput = {
+  method: 'wallet_sign#new',
+  params: [
+    { key: 'version', required: true },
+    { key: 'request', required: true },
+    { key: 'address', required: false },
+    { key: 'capabilities', required: false },
+    { key: 'mutableData', required: false },
+  ],
   format: (data: Record<string, string>) => [
-    `0x${Buffer.from(data.message, 'utf8').toString('hex')}`,
+    {
+      version: data.version,
+      request: parseMessage(data.request),
+      address: data.address,
+      mutableData: data.mutableData,
+      capabilities: data.capabilities,
+    },
   ],
 };
 
-export const ephemeralMethods = [walletSendCallsEphemeral, walletSignEphemeral];
+export const ephemeralMethods = [
+  walletSendCallsEphemeral,
+  walletSignOldSpecEphemeral,
+  walletSignNewSpecEphemeral,
+];

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

@@ -1,4 +1,4 @@
-import { Chain, createPublicClient, http, TypedDataDomain } from 'viem';
+import { Chain, TypedDataDomain, createPublicClient, http } from 'viem';
 
 import { parseMessage } from '../shortcut/ShortcutType';
 import { RpcRequestInput } from './RpcRequestInput';
@@ -54,12 +54,54 @@ const ethSignTypedDataV4: RpcRequestInput = {
   format: (data: Record<string, string>) => [data.address, parseMessage(data.message)],
 };
 
+const walletSignOldSpec: RpcRequestInput = {
+  method: 'wallet_sign#old',
+  params: [
+    { key: 'version', required: true },
+    { key: 'type', required: true },
+    { key: 'address', required: false },
+    { key: 'data', required: true },
+    { key: 'capabilities', required: false },
+  ],
+  format: (data: Record<string, string>) => [
+    {
+      version: data.version,
+      type: data.type,
+      address: data.address,
+      data: parseMessage(data.data),
+      capabilities: data.capabilities,
+    },
+  ],
+};
+
+const walletSignNewSpec: RpcRequestInput = {
+  method: 'wallet_sign#new',
+  params: [
+    { key: 'version', required: true },
+    { key: 'request', required: true },
+    { key: 'address', required: false },
+    { key: 'capabilities', required: false },
+    { key: 'mutableData', required: false },
+  ],
+  format: (data: Record<string, string>) => [
+    {
+      version: data.version,
+      request: parseMessage(data.request),
+      address: data.address,
+      mutableData: data.mutableData,
+      capabilities: data.capabilities,
+    },
+  ],
+};
+
 export const signMessageMethods = [
   ethSign,
   personalSign,
   ethSignTypedDataV1,
   ethSignTypedDataV3,
   ethSignTypedDataV4,
+  walletSignOldSpec,
+  walletSignNewSpec,
 ];
 
 export const verifySignMsg = async ({

examples/testapp/src/components/RpcMethods/shortcut/ephemeralMethodShortcuts.ts

@@ -1,5 +1,53 @@
 import { ShortcutType } from './ShortcutType';
 
+const PLACEHOLDER_ADDRESS = '0xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+const BASE_PAY_DATA = {
+  domain: {
+    chainId: 8453,
+    name: 'USDC',
+    verifyingContract: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913',
+    version: '2',
+  },
+  message: {
+    from: PLACEHOLDER_ADDRESS,
+    nonce: '0xbda37619d3004dba4ac2491022bc82b7df64c2f68e8a349422c71983a80d16ca',
+    to: '0xbc4c0191af73c4953b54f21ae0c74b31fc6cb21b',
+    validAfter: '0',
+    validBefore: '1914749767655',
+    value: '10000',
+  },
+  primaryType: 'ReceiveWithAuthorization',
+  types: {
+    ReceiveWithAuthorization: [
+      {
+        name: 'from',
+        type: 'address',
+      },
+      {
+        name: 'to',
+        type: 'address',
+      },
+      {
+        name: 'value',
+        type: 'uint256',
+      },
+      {
+        name: 'validAfter',
+        type: 'uint256',
+      },
+      {
+        name: 'validBefore',
+        type: 'uint256',
+      },
+      {
+        name: 'nonce',
+        type: 'bytes32',
+      },
+    ],
+  },
+};
+
 const walletSendCallsEphemeralShortcuts: ShortcutType[] = [
   {
     key: 'wallet_sendCalls',
@@ -11,16 +59,32 @@ const walletSendCallsEphemeralShortcuts: ShortcutType[] = [
   },
 ];
 
-const walletSignEphemeralShortcuts: ShortcutType[] = [
+const walletSignOldSpecEphemeralShortcuts: ShortcutType[] = [
+  {
+    key: 'Base Pay',
+    data: {
+      version: '1.0',
+      type: '0x01',
+      data: BASE_PAY_DATA,
+    },
+  },
+];
+
+const walletSignNewSpecEphemeralShortcuts: ShortcutType[] = [
   {
-    key: 'wallet_sign',
+    key: 'Base Pay',
     data: {
-      message: 'Hello, world!',
+      version: '1.0',
+      request: {
+        type: '0x01',
+        data: BASE_PAY_DATA,
+      },
     },
   },
 ];
 
 export const ephemeralMethodShortcutsMap = {
   wallet_sendCalls: walletSendCallsEphemeralShortcuts,
-  wallet_sign: walletSignEphemeralShortcuts,
+  ['wallet_sign#old']: walletSignOldSpecEphemeralShortcuts,
+  ['wallet_sign#new']: walletSignNewSpecEphemeralShortcuts,
 };