Merge pull request #204 from hackdays-io/feature/wallet

unify wallet and smart wallet

pkgs/frontend/app/routes/login.tsx

@@ -11,7 +11,7 @@ const Login: FC = () => {
   const navigate = useNavigate();
   const { connectOrCreateWallet, logout } = usePrivy();
   const { wallets } = useWallets();
-  const { wallet, smartWallet, isSmartWallet } = useActiveWallet();
+  const { wallet, isSmartWallet } = useActiveWallet();
   const { fetchNames } = useNamesByAddresses();
 
   // ToDo：Metamask、Privyアカウント、どちらともディスコネクトできないので修正する
@@ -26,11 +26,9 @@ const Login: FC = () => {
 
   useEffect(() => {
     const afterLogin = async () => {
-      if (!wallet && !smartWallet) return;
+      if (!wallet) return;
 
-      const names = await fetchNames([
-        isSmartWallet ? smartWallet?.account?.address! : wallet.address,
-      ]);
+      const names = await fetchNames([wallet.account?.address!]);
 
       if (names?.[0].length === 0) {
         navigate("/signup");

pkgs/frontend/app/routes/signup.tsx

@@ -5,7 +5,7 @@ import { useAddressesByNames, useSetName } from "hooks/useENS";
 import { useUploadImageFileToIpfs } from "hooks/useIpfs";
 import { useActiveWallet } from "hooks/useWallet";
 import { TextRecords } from "namestone-sdk";
-import { FC, useEffect, useMemo, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { BasicButton } from "~/components/BasicButton";
 import { CommonInput } from "~/components/common/CommonInput";
 import { UserIcon } from "~/components/icon/UserIcon";
@@ -22,7 +22,7 @@ const Login: FC = () => {
     isLoading: isIpfsLoading,
   } = useUploadImageFileToIpfs();
 
-  const { wallet, smartWallet, isSmartWallet } = useActiveWallet();
+  const { wallet } = useActiveWallet();
 
   const { setName, isLoading: isSetNameLoading } = useSetName();
 
@@ -38,15 +38,15 @@ const Login: FC = () => {
   }, [userName, addresses]);
 
   const handleSubmit = async () => {
-    if (!smartWallet && !wallet) return;
+    if (!wallet) return;
 
     const params: {
       name: string;
       address: string;
       text_records: TextRecords;
     } = {
       name: userName,
-      address: isSmartWallet ? smartWallet?.account?.address! : wallet?.address,
+      address: wallet.account?.address!,
       text_records: {},
     };
 

pkgs/frontend/hooks/useWallet.ts

@@ -2,8 +2,8 @@ import { useWallets } from "@privy-io/react-auth";
 import { createSmartAccountClient, SmartAccountClient } from "permissionless";
 import { toSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoClient } from "permissionless/clients/pimlico";
-import { useEffect, useMemo, useState } from "react";
-import { http } from "viem";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createWalletClient, custom, http, WalletClient } from "viem";
 import { entryPoint07Address } from "viem/account-abstraction";
 import { currentChain, publicClient } from "./useViem";
 
@@ -71,18 +71,43 @@ export const useSmartAccountClient = () => {
   return client;
 };
 
-export const useActiveWallet = () => {
+export const useAccountClient = () => {
   const { wallets } = useWallets();
 
-  const smartWallet = useSmartAccountClient();
+  const [client, setClient] = useState<WalletClient>();
 
-  const wallet = useMemo(() => {
-    return wallets[0];
+  useEffect(() => {
+    const create = async () => {
+      if (!wallets[0]) return;
+      const wallet = wallets[0];
+
+      const provider = await wallet.getEthereumProvider();
+
+      const walletClient = createWalletClient({
+        chain: currentChain,
+        transport: custom(provider),
+      });
+
+      setClient(walletClient);
+    };
+
+    create();
   }, [wallets]);
 
+  return client;
+};
+
+export const useActiveWallet = () => {
+  const walletClient = useAccountClient();
+  const smartWalletClient = useSmartAccountClient();
+
   const isSmartWallet = useMemo(() => {
-    return smartWallet ? true : false;
-  }, [smartWallet]);
+    return !!smartWalletClient;
+  }, [smartWalletClient]);
+
+  const wallet = useMemo(() => {
+    return smartWalletClient ? smartWalletClient : walletClient;
+  }, [walletClient, smartWalletClient]);
 
-  return { wallet, smartWallet, isSmartWallet };
+  return { wallet, isSmartWallet };
 };