feat: app demo scaffold

Author: ultraviolet10

demos/react/src/App.tsx

@@ -1,4 +1,5 @@
 import { useHappyChain } from "@happy.tech/react"
+import CallBatchDemo from "./demo-components/CallBatchDemo"
 import ChainSwitchingDemo from "./demo-components/ChainSwitchingDemo"
 import ConnectionDemo from "./demo-components/ConnectionDemo"
 import SessionKeyDemo from "./demo-components/SessionKeyDemo"
@@ -24,6 +25,7 @@ function App() {
                 <ChainSwitchingDemo />
                 <WalletFunctionalityDemo />
                 <SessionKeyDemo />
+                <CallBatchDemo />
             </div>
         </main>
     )

demos/react/src/demo-components/CallBatchDemo.tsx

@@ -0,0 +1,41 @@
+import useClients from "../useClients"
+
+const CallBatchDemo = () => {
+    const { walletClient } = useClients()
+
+    async function getCapabilities() {
+        // const caps = await walletClient?.getCapabilities()
+    }
+
+    async function sendBatch() {
+        // const bundles = await walletClient?.sendCalls()
+    }
+
+    async function getCallsStatus() {
+        // const stat = await walletClient?.getCallsStatus()
+    }
+
+    return (
+        <div className="grid grid-cols-2 gap-4 backdrop-blur-sm bg-gray-200/35 p-4 rounded-lg">
+            <div className="text-lg font-bold col-span-2">EIP-5792</div>
+
+            <button type="button" onClick={getCapabilities} className="rounded-lg bg-sky-300 p-2 shadow-xl font-mono">
+                wallet_getCapabilities
+            </button>
+
+            <button
+                type="button"
+                onClick={sendBatch}
+                className="rounded-lg bg-sky-300 p-2 shadow-xl text-center font-mono"
+            >
+                wallet_sendCalls
+            </button>
+
+            <button type="button" onClick={getCallsStatus} className="rounded-lg bg-sky-300 p-2 shadow-xl font-mono">
+                wallet_getCallsStatus
+            </button>
+        </div>
+    )
+}
+
+export default CallBatchDemo

demos/react/src/useClients.ts

@@ -9,13 +9,14 @@ import {
     createWalletClient,
     custom,
 } from "viem"
+import { type Eip5792Actions, eip5792Actions } from "viem/experimental"
 
 /**
  * Creates custom public + wallet clients using the HappyProvider.
  */
 export default function useClients(): {
     publicClient: PublicClient
-    walletClient: WalletClient<CustomTransport, undefined, Account> | null
+    walletClient: (WalletClient<CustomTransport, undefined, Account> & Eip5792Actions) | null
 } {
     const { provider, user } = useHappyChain()
 
@@ -27,7 +28,7 @@ export default function useClients(): {
                 ? createWalletClient({
                       account: user.address,
                       transport: custom(provider),
-                  })
+                  }).extend(eip5792Actions())
                 : null,
         [user, provider],
     )