fix infinite load

hackdays-io · Feb 11, 2025 · 61c94cd · 61c94cd
1 parent e388bf6
commit 61c94cd
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 346 deletions.
diff --git a/pkgs/frontend/app/components/roles/RoleWithBalance.tsx b/pkgs/frontend/app/components/roles/RoleWithBalance.tsx
@@ -19,16 +19,24 @@ interface RoleProps {
 }
 
 const RoleWithBalance: FC<RoleProps> = (params) => {
-  const { detail, imageUri, balance, treeId, hatId, address, showSendButton } =
-    params;
+  const {
+    detail,
+    imageUri,
+    balance,
+    treeId,
+    hatId,
+    address,
+    showSendButton,
+    wearer,
+  } = params;
 
   const navigate = useNavigate();
 
-  const wearer = useMemo(() => {
-    if (!params.wearer) return [];
-    return [params.wearer];
-  }, [params.wearer]);
-  const { names } = useNamesByAddresses(wearer);
+  const wearers = useMemo(() => {
+    if (!wearer) return [];
+    return [wearer];
+  }, [wearer]);
+  const { names } = useNamesByAddresses(wearers);
 
   const wearerIconUri = useMemo(() => {
     return names?.[0]?.[0].text_records?.avatar;

diff --git a/pkgs/frontend/app/routes/$treeId_.$hatId_.$address_.assistcredit.send.tsx b/pkgs/frontend/app/routes/$treeId_.$hatId_.$address_.assistcredit.send.tsx
@@ -43,6 +43,7 @@ const AssistCreditSend: FC = () => {
 
   const { treeId, hatId, address } = useParams();
   const me = useActiveWalletIdentity();
+
   const balanceOfToken = useBalanceOfFractionToken(
     me.identity?.address as Address,
     address as Address,
@@ -89,7 +90,7 @@ const AssistCreditSend: FC = () => {
   const [amount, setAmount] = useState<number>(0);
 
   const { transferFractionToken, isLoading } = useTransferFractionToken(
-    BigInt(hatId ?? ""),
+    BigInt(hatId || 0),
     address as Address,
   );
   const send = useCallback(async () => {

diff --git a/pkgs/frontend/hooks/useFractionToken.ts b/pkgs/frontend/hooks/useFractionToken.ts
@@ -37,7 +37,7 @@ export const useTokenRecipients = (
     }[]
   >([]);
 
-  const { getTokenId, getTokenRecipients } = useFractionToken();
+  const { getTokenId } = useFractionToken();
 
   useEffect(() => {
     const fetch = async () => {
@@ -49,9 +49,14 @@ export const useTokenRecipients = (
               account: wearer,
             });
             if (!tokenId) return;
+            const assistants = await publicClient.readContract({
+              ...fractionTokenBaseConfig,
+              functionName: "getTokenRecipients",
+              args: [tokenId],
+            });
             return {
               hatId,
-              assistants: (await getTokenRecipients({ tokenId })) || [],
+              assistants,
             };
           }),
         );
@@ -83,7 +88,7 @@ export const useTokenRecipients = (
     };
 
     fetch();
-  }, [params, getTokenId, getTokenRecipients]);
+  }, [params, getTokenId]);
 
   return recipients;
 };
@@ -197,31 +202,6 @@ export const useFractionToken = () => {
   const { wallet } = useActiveWallet();
   const [isLoading, setIsLoading] = useState(false);
 
-  /**
-   * tokenRecipientsを取得するコールバック関数
-   * @param tokenId
-   */
-  const getTokenRecipients = useCallback(
-    async (params: { tokenId: bigint }) => {
-      setIsLoading(true);
-
-      try {
-        const res = await publicClient.readContract({
-          ...fractionTokenBaseConfig,
-          functionName: "getTokenRecipients",
-          args: [params.tokenId],
-        });
-
-        return res;
-      } catch (error) {
-        console.error("error occured when fetching tokenRecipients:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [],
-  );
-
   /**
    * tokenIdを取得するコールバック関数
    * @param hatId
@@ -410,7 +390,6 @@ export const useFractionToken = () => {
 
   return {
     isLoading,
-    getTokenRecipients,
     getTokenId,
     mintInitialSupplyFractionToken,
     mintFractionToken,
@@ -425,7 +404,7 @@ export const useTransferFractionToken = (hatId: bigint, wearer: Address) => {
   const [tokenId, setTokenId] = useState<bigint>();
   const [initialized, setInitialized] = useState(false);
 
-  const { getTokenRecipients, getTokenId } = useFractionToken();
+  const { getTokenId } = useFractionToken();
 
   useEffect(() => {
     const fetch = async () => {
@@ -435,13 +414,18 @@ export const useTransferFractionToken = (hatId: bigint, wearer: Address) => {
       });
       if (!_tokenId) return;
       setTokenId(_tokenId);
-      const recipients = await getTokenRecipients({ tokenId: _tokenId });
+
+      const recipients = await publicClient.readContract({
+        ...fractionTokenBaseConfig,
+        functionName: "getTokenRecipients",
+        args: [_tokenId],
+      });
       if (recipients?.some((r) => r.toLowerCase() === wearer.toLowerCase())) {
         setInitialized(true);
       }
     };
     fetch();
-  }, [hatId, wearer, getTokenId, getTokenRecipients]);
+  }, [hatId, wearer, getTokenId]);
 
   const transferFractionToken = useCallback(
     async (to: Address, amount: bigint) => {

diff --git a/pkgs/frontend/package.json b/pkgs/frontend/package.json
@@ -23,7 +23,7 @@
     "@emotion/server": "^11.11.0",
     "@hatsprotocol/sdk-v1-core": "^0.10.0",
     "@hatsprotocol/sdk-v1-subgraph": "^1.0.0",
-    "@privy-io/react-auth": "^1.99.0",
+    "@privy-io/react-auth": "^2.4.2",
     "@remix-run/node": "^2.15.0",
     "@remix-run/react": "^2.15.0",
     "@remix-run/serve": "^2.15.0",