Swap prepare functions for actions to reduce number of API calls

PaimaStudios · Dec 13, 2023 · 4aa76eb · 4aa76eb
1 parent 24553c7
commit 4aa76eb
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 121 deletions.
diff --git a/dapp/src/components/evm/CollectionLockButton.tsx b/dapp/src/components/evm/CollectionLockButton.tsx
@@ -1,10 +1,7 @@
 "use client";
-import { useAccount, useContractWrite, useWaitForTransaction } from "wagmi";
+import { useAccount, useWaitForTransaction } from "wagmi";
 import { hololockerConfig } from "../../utils/evm/contracts";
-import {
-  useErc721IsApprovedForAll,
-  usePrepareHololockerLock,
-} from "../../generated";
+import { useErc721IsApprovedForAll } from "../../generated";
 import TransactionButton from "../TransactionButton";
 import FunctionKey from "../../utils/functionKey";
 import { useQueryClient } from "@tanstack/react-query";
@@ -13,6 +10,7 @@ import ApproveCollectionDialog from "../../dialogs/ApproveCollectionDialog";
 import { useEffect, useState } from "react";
 import { useSnackbar } from "notistack";
 import { SnackbarMessage } from "../../utils/texts";
+import { writeContract } from "@wagmi/core";
 
 type Props = {
   token: string;
@@ -25,6 +23,8 @@ export default function CollectionLockButton({ token, tokenIds }: Props) {
   const queryClient = useQueryClient();
   const { showModal } = useModal();
   const [approvalTxHash, setApprovalTxHash] = useState<`0x${string}`>();
+  const [isLoading, setIsLoading] = useState(false);
+  const [lockTxHash, setLockTxHash] = useState<`0x${string}`>();
 
   const { data: isApproved, refetch: refetchIsApproved } =
     useErc721IsApprovedForAll({
@@ -33,21 +33,9 @@ export default function CollectionLockButton({ token, tokenIds }: Props) {
       enabled: !!address,
     });
 
-  const { config: configHololockerLock } = usePrepareHololockerLock({
-    address: hololockerConfig.address,
-    args: [Array(tokenIds.length).fill(token), tokenIds, address!],
-    enabled: !!address && !!isApproved,
-  });
-
-  const {
-    write: writeHololockerLock,
-    data: dataHololockerLock,
-    isLoading: isLoadingHololockerLock,
-  } = useContractWrite(configHololockerLock);
-
   const { isLoading: isPendingHololockerLock, isSuccess: isSuccessLock } =
     useWaitForTransaction({
-      hash: dataHololockerLock?.hash,
+      hash: lockTxHash,
       onSuccess: () => {
         queryClient.invalidateQueries({
           queryKey: [FunctionKey.NFTS],
@@ -95,7 +83,20 @@ export default function CollectionLockButton({ token, tokenIds }: Props) {
 
   async function handleClickButton() {
     if (isApproved) {
-      writeHololockerLock?.();
+      if (!address) return;
+      setIsLoading(true);
+      try {
+        const { hash } = await writeContract({
+          ...hololockerConfig,
+          functionName: "lock",
+          args: [Array(tokenIds.length).fill(token), tokenIds, address!],
+        });
+        setLockTxHash(hash);
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
     } else {
       const modal = showModal(ApproveCollectionDialog, {
         tokens: [token],
@@ -116,7 +117,7 @@ export default function CollectionLockButton({ token, tokenIds }: Props) {
   return (
     <TransactionButton
       onClick={handleClickButton}
-      isLoading={isLoadingHololockerLock}
+      isLoading={isLoading}
       isPending={isPendingHololockerLock || isPendingSetApproval}
       actionText={"Lock all NFTs in this collection"}
     />

diff --git a/dapp/src/components/evm/CollectionUnlockButton.tsx b/dapp/src/components/evm/CollectionUnlockButton.tsx
@@ -1,13 +1,13 @@
 "use client";
-import { useAccount, useContractWrite, useWaitForTransaction } from "wagmi";
+import { useAccount, useWaitForTransaction } from "wagmi";
 import { hololockerConfig } from "../../utils/evm/contracts";
-import { usePrepareHololockerRequestUnlock } from "../../generated";
 import TransactionButton from "../TransactionButton";
 import FunctionKey from "../../utils/functionKey";
 import { useQueryClient } from "@tanstack/react-query";
 import { useSnackbar } from "notistack";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SnackbarMessage } from "../../utils/texts";
+import { writeContract } from "@wagmi/core";
 
 type Props = {
   token: string;
@@ -18,21 +18,11 @@ export default function CollectionUnlockButton({ token, tokenIds }: Props) {
   const { enqueueSnackbar } = useSnackbar();
   const { address } = useAccount();
   const queryClient = useQueryClient();
-
-  const { config: configHololockerUnlock } = usePrepareHololockerRequestUnlock({
-    address: hololockerConfig.address,
-    args: [Array(tokenIds.length).fill(token), tokenIds],
-    enabled: !!address,
-  });
-
-  const {
-    write: writeHololockerUnlock,
-    data: dataHololockerUnlock,
-    isLoading: isLoadingHololockerUnlock,
-  } = useContractWrite(configHololockerUnlock);
+  const [isLoading, setIsLoading] = useState(false);
+  const [txHash, setTxHash] = useState<`0x${string}`>();
 
   const { isLoading: isPending, isSuccess } = useWaitForTransaction({
-    hash: dataHololockerUnlock?.hash,
+    hash: txHash,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [FunctionKey.LOCKS],
@@ -59,13 +49,26 @@ export default function CollectionUnlockButton({ token, tokenIds }: Props) {
   }, [isSuccess]);
 
   async function requestUnlock() {
-    writeHololockerUnlock?.();
+    if (!address) return;
+    setIsLoading(true);
+    try {
+      const { hash } = await writeContract({
+        ...hololockerConfig,
+        functionName: "requestUnlock",
+        args: [Array(tokenIds.length).fill(token), tokenIds],
+      });
+      setTxHash(hash);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (
     <TransactionButton
       onClick={requestUnlock}
-      isLoading={isLoadingHololockerUnlock}
+      isLoading={isLoading}
       isPending={isPending}
       disabled={tokenIds.length === 0}
       actionText={`Request unlock for all locked tokens (${tokenIds.length})`}

diff --git a/dapp/src/components/evm/CollectionWithdrawButton.tsx b/dapp/src/components/evm/CollectionWithdrawButton.tsx
@@ -1,13 +1,13 @@
 "use client";
-import { useAccount, useContractWrite, useWaitForTransaction } from "wagmi";
+import { useAccount, useWaitForTransaction } from "wagmi";
 import { hololockerConfig } from "../../utils/evm/contracts";
-import { usePrepareHololockerWithdraw } from "../../generated";
 import TransactionButton from "../TransactionButton";
 import { useQueryClient } from "@tanstack/react-query";
 import FunctionKey from "../../utils/functionKey";
 import { useSnackbar } from "notistack";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SnackbarMessage } from "../../utils/texts";
+import { writeContract } from "@wagmi/core";
 
 type Props = {
   token: string;
@@ -18,21 +18,11 @@ export default function CollectionWithdrawButton({ token, tokenIds }: Props) {
   const { enqueueSnackbar } = useSnackbar();
   const { address } = useAccount();
   const queryClient = useQueryClient();
-
-  const { config: configHololockerWithdraw } = usePrepareHololockerWithdraw({
-    address: hololockerConfig.address,
-    args: [Array(tokenIds.length).fill(token), tokenIds],
-    enabled: !!address,
-  });
-
-  const {
-    write: writeHololockerWithdraw,
-    data: dataHololockerWithdraw,
-    isLoading: isLoadingHololockerWithdraw,
-  } = useContractWrite(configHololockerWithdraw);
+  const [isLoading, setIsLoading] = useState(false);
+  const [txHash, setTxHash] = useState<`0x${string}`>();
 
   const { isLoading: isPending, isSuccess } = useWaitForTransaction({
-    hash: dataHololockerWithdraw?.hash,
+    hash: txHash,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [FunctionKey.LOCKS],
@@ -62,13 +52,26 @@ export default function CollectionWithdrawButton({ token, tokenIds }: Props) {
   }, [isSuccess]);
 
   async function withdraw() {
-    writeHololockerWithdraw?.();
+    if (!address) return;
+    setIsLoading(true);
+    try {
+      const { hash } = await writeContract({
+        ...hololockerConfig,
+        functionName: "withdraw",
+        args: [Array(tokenIds.length).fill(token), tokenIds],
+      });
+      setTxHash(hash);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (
     <TransactionButton
       onClick={withdraw}
-      isLoading={isLoadingHololockerWithdraw}
+      isLoading={isLoading}
       isPending={isPending}
       disabled={tokenIds.length === 0}
       actionText={`Withdraw all withdrawable tokens (${tokenIds.length})`}

diff --git a/dapp/src/components/evm/LockNftButton.tsx b/dapp/src/components/evm/LockNftButton.tsx
@@ -1,13 +1,13 @@
 "use client";
-import { useAccount, useContractWrite, useWaitForTransaction } from "wagmi";
+import { erc721ABI, useAccount, useWaitForTransaction } from "wagmi";
 import { hololockerConfig } from "../../utils/evm/contracts";
-import { usePrepareErc721SafeTransferFrom } from "../../generated";
 import TransactionButton from "../TransactionButton";
 import { useQueryClient } from "@tanstack/react-query";
 import FunctionKey from "../../utils/functionKey";
 import { useSnackbar } from "notistack";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { SnackbarMessage } from "../../utils/texts";
+import { writeContract } from "@wagmi/core";
 
 type Props = {
   token: string;
@@ -18,17 +18,11 @@ export default function LockNftButton({ token, tokenId }: Props) {
   const { address } = useAccount();
   const { enqueueSnackbar } = useSnackbar();
   const queryClient = useQueryClient();
-
-  const { config } = usePrepareErc721SafeTransferFrom({
-    address: token as `0x${string}`,
-    args: [address!, hololockerConfig.address, tokenId],
-    enabled: !!address,
-  });
-
-  const { write, data, isLoading } = useContractWrite(config);
+  const [isLoading, setIsLoading] = useState(false);
+  const [txHash, setTxHash] = useState<`0x${string}`>();
 
   const { isLoading: isPending, isSuccess } = useWaitForTransaction({
-    hash: data?.hash,
+    hash: txHash,
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [FunctionKey.NFTS],
@@ -58,7 +52,21 @@ export default function LockNftButton({ token, tokenId }: Props) {
   }, [isSuccess]);
 
   async function lockNft() {
-    write?.();
+    if (!address) return;
+    setIsLoading(true);
+    try {
+      const { hash } = await writeContract({
+        abi: erc721ABI,
+        address: token as `0x${string}`,
+        functionName: "safeTransferFrom",
+        args: [address, hololockerConfig.address, tokenId],
+      });
+      setTxHash(hash);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   return (

diff --git a/dapp/src/components/evm/LockNftList.tsx b/dapp/src/components/evm/LockNftList.tsx
@@ -86,7 +86,7 @@ function LockNftListItem({
 }) {
   const someTokenHasImage = !!nfts.find((nft) => nft.media.length > 0);
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }} sx={{ width: "100%" }}>
+    <Accordion sx={{ width: "100%" }}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Stack>
           <CopyableTypography