Add grant permissions example message (#1434)

* add grant permissions method

* lint

Author: spencerstock

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

@@ -172,7 +172,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
                 <AccordionPanel pb={4}>
                   <HStack spacing={2}>
                     {shortcuts.map((shortcut) => (
-                      <HStack key={shortcut.key} spacing={1}>
+                      <VStack key={shortcut.key} spacing={1}>
                         <Button onClick={() => submit(shortcut.data)}>{shortcut.key}</Button>
                         {shortcut.data.message && (
                           <Button
@@ -187,7 +187,7 @@ export function RpcMethodCard({ format, method, params, shortcuts }) {
                             Copy
                           </Button>
                         )}
-                      </HStack>
+                      </VStack>
                     ))}
                   </HStack>
                 </AccordionPanel>

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

@@ -130,6 +130,41 @@ const ethSignTypedDataV4Shortcuts: (chainId: number) => ShortcutType[] = (chainI
       address: ADDR_TO_FILL,
     },
   },
+  {
+    key: 'Grant Permission',
+    data: {
+      message: {
+        domain: {
+          name: 'Spend Permission Manager',
+          version: '1',
+          chainId,
+          verifyingContract: '0x4ba47ee994d7fd63e8e8029431c35afa8487b8a5',
+        },
+        types: {
+          SpendPermission: [
+            { name: 'account', type: 'address' },
+            { name: 'spender', type: 'address' },
+            { name: 'token', type: 'address' },
+            { name: 'start', type: 'uint48' },
+            { name: 'end', type: 'uint48' },
+            { name: 'period', type: 'uint48' },
+            { name: 'allowance', type: 'uint160' },
+          ],
+        },
+        primaryType: 'SpendPermission',
+        message: {
+          account: '0xd4e17478581878A967aA22d45a5158A9fE96AA08',
+          spender: '0x0000000000000000000000000000000000000000',
+          token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
+          end: 17242884802,
+          start: 1724264802,
+          period: 86400,
+          allowance: '10000000000000000',
+        },
+      },
+      address: ADDR_TO_FILL,
+    },
+  },
 ];
 
 export const signMessageShortcutsMap = (chainId: number) => ({