use writeContract for useHats

hackdays-io · Dec 16, 2024 · f00c613 · f00c613
1 parent 83ea203
commit f00c613
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 41 deletions.
diff --git a/pkgs/frontend/hooks/useHats.ts b/pkgs/frontend/hooks/useHats.ts
@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Address, decodeEventLog, encodeFunctionData } from "viem";
 import { base, optimism, sepolia } from "viem/chains";
 import { HATS_ADDRESS } from "./useContracts";
-import { useSmartAccountClient } from "./useWallet";
+import { useActiveWallet, useSmartAccountClient } from "./useWallet";
 import { currentChain, publicClient } from "./useViem";
 
 // ###############################################################
@@ -59,7 +59,7 @@ export const useTreeInfo = (treeId: number) => {
  * @returns
  */
 export const useHats = () => {
-  const smartAccountClient = useSmartAccountClient();
+  const { wallet } = useActiveWallet();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -243,30 +243,44 @@ export const useHats = () => {
       mutable?: boolean;
       imageURI?: string;
     }) => {
-      if (!smartAccountClient) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartAccountClient.sendTransaction({
-          calls: [
-            {
-              to: HATS_ADDRESS,
-              data: encodeFunctionData({
-                abi: HATS_ABI,
-                functionName: "createHat",
-                args: [
-                  params.parentHatId,
-                  params.details || "",
-                  params.maxSupply || 5,
-                  params.eligibility ||
-                    "0x0000000000000000000000000000000000004a75",
-                  params.toggle || "0x0000000000000000000000000000000000004a75",
-                  params.mutable || true,
-                  params.imageURI || "",
-                ],
-              }),
-            },
+        // const txHash = await wallet.sendTransaction({
+        //   calls: [
+        //     {
+        //       to: HATS_ADDRESS,
+        //       data: encodeFunctionData({
+        //         abi: HATS_ABI,
+        //         functionName: "createHat",
+        //         args: [
+        //           params.parentHatId,
+        //           params.details || "",
+        //           params.maxSupply || 5,
+        //           params.eligibility ||
+        //             "0x0000000000000000000000000000000000004a75",
+        //           params.toggle || "0x0000000000000000000000000000000000004a75",
+        //           params.mutable || true,
+        //           params.imageURI || "",
+        //         ],
+        //       }),
+        //     },
+        //   ],
+        // });
+        const txHash = await wallet.writeContract({
+          abi: HATS_ABI,
+          address: HATS_ADDRESS,
+          functionName: "createHat",
+          args: [
+            params.parentHatId,
+            params.details || "",
+            params.maxSupply || 5,
+            params.eligibility || "0x0000000000000000000000000000000000004a75",
+            params.toggle || "0x0000000000000000000000000000000000004a75",
+            params.mutable || true,
+            params.imageURI || "",
           ],
         });
 
@@ -302,7 +316,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [wallet]
   );
 
   /**
@@ -312,22 +326,16 @@ export const useHats = () => {
    */
   const mintHat = useCallback(
     async (params: { hatId: bigint; wearer: Address }) => {
-      if (!smartAccountClient) return;
+      if (!wallet) return;
 
       setIsLoading(true);
 
       try {
-        const txHash = await smartAccountClient.sendTransaction({
-          calls: [
-            {
-              to: HATS_ADDRESS,
-              data: encodeFunctionData({
-                abi: HATS_ABI,
-                functionName: "mintHat",
-                args: [params.hatId, params.wearer],
-              }),
-            },
-          ],
+        const txHash = await wallet.writeContract({
+          abi: HATS_ABI,
+          address: HATS_ADDRESS,
+          functionName: "mintHat",
+          args: [params.hatId, params.wearer],
         });
 
         const receipt = await publicClient.waitForTransactionReceipt({
@@ -343,7 +351,7 @@ export const useHats = () => {
         setIsLoading(false);
       }
     },
-    [smartAccountClient]
+    [wallet]
   );
 
   return {

diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
@@ -3,8 +3,21 @@ import { createSmartAccountClient, SmartAccountClient } from "permissionless";
 import { toSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Address, createWalletClient, custom, http, WalletClient } from "viem";
-import { entryPoint07Address } from "viem/account-abstraction";
+import {
+  Account,
+  Address,
+  createWalletClient,
+  custom,
+  CustomTransport,
+  http,
+  Transport,
+  WalletClient,
+} from "viem";
+import {
+  entryPoint07Address,
+  SmartAccount,
+  SmartAccountImplementation,
+} from "viem/account-abstraction";
 import { currentChain, publicClient } from "./useViem";
 
 // Pimlico API endpoint URL
@@ -27,7 +40,14 @@ export const pimlicoClient = createPimlicoClient({
  * Pimlico 向けの React Hooks
  */
 export const useSmartAccountClient = () => {
-  const [client, setClient] = useState<SmartAccountClient>();
+  const [client, setClient] =
+    useState<
+      SmartAccountClient<
+        Transport,
+        typeof currentChain,
+        SmartAccount<SmartAccountImplementation>
+      >
+    >();
   const { wallets } = useWallets();
 
   useEffect(() => {
@@ -65,7 +85,7 @@ export const useSmartAccountClient = () => {
         },
       });
 
-      setClient(smartAccountClient);
+      setClient(smartAccountClient as any);
     };
     create();
   }, [wallets]);
@@ -76,7 +96,8 @@ export const useSmartAccountClient = () => {
 export const useAccountClient = () => {
   const { wallets } = useWallets();
 
-  const [client, setClient] = useState<WalletClient>();
+  const [client, setClient] =
+    useState<WalletClient<CustomTransport, typeof currentChain, Account>>();
 
   useEffect(() => {
     const create = async () => {