From 94a5bbb6870660d2605f07a4cd6cb7ce75a71fe0 Mon Sep 17 00:00:00 2001
From: jxom <7336481+jxom@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:18:26 +1100
Subject: [PATCH] feat: useCreateSessionKey

---
 examples/wagmi/src/App.tsx  | 48 ++++++++++++++++++++++++++++++-------
 examples/wagmi/src/hooks.ts | 30 ++++++++++++++++++++++-
 src/internal/provider.ts    | 11 +++++----
 src/internal/rpcSchema.ts   |  2 +-
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/examples/wagmi/src/App.tsx b/examples/wagmi/src/App.tsx
index 9cd9f84..888a537 100644
--- a/examples/wagmi/src/App.tsx
+++ b/examples/wagmi/src/App.tsx
@@ -2,7 +2,7 @@ import { formatEther, parseEther } from 'viem'
 import { type BaseError, useAccount, useConnect, useReadContract } from 'wagmi'
 import { useCallsStatus, useSendCalls } from 'wagmi/experimental'
 import { ExperimentERC20 } from './contracts'
-import { useCreateAccount, useDisconnect } from './hooks'
+import { useCreateAccount, useCreateSessionKey, useDisconnect } from './hooks'
 
 export function App() {
   const { isConnected } = useAccount()
@@ -13,6 +13,7 @@ export function App() {
       {isConnected && (
         <>
           <Balance />
+          <CreateSessionKey />
           <Mint />
         </>
       )}
@@ -94,6 +95,23 @@ function Balance() {
   )
 }
 
+function CreateSessionKey() {
+  const { data, error, mutate: createSessionKey } = useCreateSessionKey()
+
+  return (
+    <div>
+      <h2>Create Session Key</h2>
+      <button onClick={() => createSessionKey()} type="button">
+        Create Session Key
+      </button>
+      {data && <div>Session Key created.</div>}
+      {error && (
+        <div>Error: {(error as BaseError).shortMessage || error.message}</div>
+      )}
+    </div>
+  )
+}
+
 function Mint() {
   const { address } = useAccount()
   const { data: id, error, isPending, sendCalls } = useSendCalls()
@@ -112,9 +130,13 @@ function Mint() {
   return (
     <div>
       <h2>Mint EXP</h2>
-      <button
-        disabled={isPending}
-        onClick={() =>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+
+          const formData = new FormData(e.target as HTMLFormElement)
+          const sessionKeyEnabled = Boolean(formData.get('sessionKeyEnabled'))
+
           sendCalls({
             calls: [
               {
@@ -124,12 +146,22 @@ function Mint() {
                 args: [address!, parseEther('100')],
               },
             ],
+            capabilities: {
+              sessionKey: {
+                enabled: sessionKeyEnabled,
+              },
+            },
           })
-        }
-        type="button"
+        }}
       >
-        {isPending ? 'Confirming...' : 'Mint 100 EXP'}
-      </button>
+        <button disabled={isPending} type="submit">
+          {isPending ? 'Confirming...' : 'Mint 100 EXP'}
+        </button>
+        <label>
+          <input name="sessionKeyEnabled" type="checkbox" />
+          Use Session Key
+        </label>
+      </form>
       {id && <div>Transaction Hash: {id}</div>}
       {isConfirming && 'Waiting for confirmation...'}
       {isConfirmed && 'Transaction confirmed.'}
diff --git a/examples/wagmi/src/hooks.ts b/examples/wagmi/src/hooks.ts
index 9d63e5a..2466f74 100644
--- a/examples/wagmi/src/hooks.ts
+++ b/examples/wagmi/src/hooks.ts
@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
-import type { EIP1193Provider } from 'viem'
+import type { Address, EIP1193Provider, Hex } from 'viem'
 import {
   type Connector,
   ConnectorNotFoundError,
@@ -26,6 +26,34 @@ export function useCreateAccount() {
   })
 }
 
+export function useCreateSessionKey() {
+  const { connector } = useAccount()
+  return useMutation({
+    mutationFn: async () => {
+      if (!connector) throw new ConnectorNotFoundError()
+      const provider = (await connector.getProvider()) as EIP1193Provider
+      return provider.request<{
+        Method: 'experimental_createSessionKey'
+        Parameters:
+          | [
+              {
+                address?: Address | undefined
+                expiry?: number | undefined
+              },
+            ]
+          | []
+        ReturnType: {
+          expiry: number
+          id: Hex
+        }
+      }>({
+        method: 'experimental_createSessionKey',
+        params: [],
+      })
+    },
+  })
+}
+
 export function useDisconnect() {
   const { connector } = useAccount()
   const { disconnectAsync } = useDisconnect_wagmi()
diff --git a/src/internal/provider.ts b/src/internal/provider.ts
index be5a7b8..d0db5cf 100644
--- a/src/internal/provider.ts
+++ b/src/internal/provider.ts
@@ -161,11 +161,12 @@ export function from<
             {
               address,
               expiry = Math.floor(Date.now() / 1000) + 60 * 15, // 15 minutes
-            },
-          ] = params as RpcSchema.ExtractParams<
-            RpcSchema_internal.Schema,
-            'experimental_createSessionKey'
-          >
+            } = {},
+          ] =
+            (params as RpcSchema.ExtractParams<
+              RpcSchema_internal.Schema,
+              'experimental_createSessionKey'
+            >) ?? []
 
           const account = address
             ? state.accounts.find((account) =>
diff --git a/src/internal/rpcSchema.ts b/src/internal/rpcSchema.ts
index 6677f6d..f3481e5 100644
--- a/src/internal/rpcSchema.ts
+++ b/src/internal/rpcSchema.ts
@@ -20,7 +20,7 @@ export type Schema = RpcSchema.From<
   | {
       Request: {
         method: 'experimental_createSessionKey'
-        params: [CreateSessionKeyParameters]
+        params?: [CreateSessionKeyParameters] | undefined
       }
       ReturnType: CreateSessionKeyReturnType
     }