From 2778dd1ce935edaba083e5c7244fba053b82ad87 Mon Sep 17 00:00:00 2001
From: yu23ki14 <yuki_021423@yahoo.co.jp>
Date: Thu, 5 Dec 2024 18:25:02 +0900
Subject: [PATCH] unify wallet and smart wallet

---
 pkgs/frontend/app/routes/login.tsx  |  8 ++----
 pkgs/frontend/app/routes/signup.tsx |  8 +++---
 pkgs/frontend/hooks/useWallet.ts    | 43 +++++++++++++++++++++++------
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/pkgs/frontend/app/routes/login.tsx b/pkgs/frontend/app/routes/login.tsx
index f3ec0f4..c4b864c 100644
--- a/pkgs/frontend/app/routes/login.tsx
+++ b/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");
diff --git a/pkgs/frontend/app/routes/signup.tsx b/pkgs/frontend/app/routes/signup.tsx
index ac3ac05..cebcc21 100644
--- a/pkgs/frontend/app/routes/signup.tsx
+++ b/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,7 +38,7 @@ const Login: FC = () => {
   }, [userName, addresses]);
 
   const handleSubmit = async () => {
-    if (!smartWallet && !wallet) return;
+    if (!wallet) return;
 
     const params: {
       name: string;
@@ -46,7 +46,7 @@ const Login: FC = () => {
       text_records: TextRecords;
     } = {
       name: userName,
-      address: isSmartWallet ? smartWallet?.account?.address! : wallet?.address,
+      address: wallet.account?.address!,
       text_records: {},
     };
 
diff --git a/pkgs/frontend/hooks/useWallet.ts b/pkgs/frontend/hooks/useWallet.ts
index 7441f92..8fce2b8 100644
--- a/pkgs/frontend/hooks/useWallet.ts
+++ b/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 };
 };