feat(web): query-refetch-hook

kleros · May 24, 2024 · 1ff8771 · 1ff8771
1 parent e940260
commit 1ff8771
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 11 deletions.
diff --git a/web/src/hooks/useQueryRefetch.ts b/web/src/hooks/useQueryRefetch.ts
@@ -0,0 +1,28 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+/**
+ *
+ * @required This hook needs to be used within the QueryClientProvider
+ * @param queryKeys An Array of Query  :   [ [ "key1" ], [ "key2" ] ]
+ * @param waitFor Optional - Time to wait before refetching
+ * @returns refetchQuery - A function that takes in the query keys array to refetch
+ * @example refetchQuery([["refetchOnBlock","myQuery"],["myOtherQuery"]])
+ * @warning The order of keys in the query key array matters
+ */
+export const useQueryRefetch = () => {
+  const queryClient = useQueryClient();
+
+  const refetchQuery = useCallback(
+    async (queryKeys: string[][], waitFor = 4000) => {
+      await new Promise((res) => setTimeout(() => res(true), waitFor));
+
+      for (const queryKey of queryKeys) {
+        queryClient.refetchQueries(queryKey);
+      }
+    },
+    [queryClient]
+  );
+
+  return refetchQuery;
+};
diff --git a/...src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx b/...src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
@@ -8,6 +8,7 @@ import {
   usePrepareEscrowUniversalAcceptSettlement,
   useEscrowUniversalAcceptSettlement,
 } from "hooks/contracts/generated";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 interface IAcceptButton {
   toggleModal?: () => void;
@@ -17,6 +18,7 @@ const AcceptButton: React.FC<IAcceptButton> = ({ toggleModal }) => {
   const [isSending, setIsSending] = useState<boolean>(false);
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
+  const refetchQuery = useQueryRefetch();
 
   const { config: acceptSettlementConfig } = usePrepareEscrowUniversalAcceptSettlement({
     args: [BigInt(id)],
@@ -32,6 +34,7 @@ const AcceptButton: React.FC<IAcceptButton> = ({ toggleModal }) => {
           if (!wrapResult.status) {
             setIsSending(false);
           }
+          refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
         })
         .catch((error) => {
           console.error("Error raising dispute as buyer:", error);

diff --git a/...rc/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx b/...rc/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
@@ -9,6 +9,7 @@ import {
   usePrepareEscrowUniversalProposeSettlement,
   useEscrowUniversalProposeSettlement,
 } from "hooks/contracts/generated";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 interface IProposeSettlementButton {
   toggleModal?: () => void;
@@ -26,6 +27,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   const [isSending, setIsSending] = useState<boolean>(false);
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
+  const refetchQuery = useQueryRefetch();
 
   const { config: proposeSettlementConfig } = usePrepareEscrowUniversalProposeSettlement({
     args: [BigInt(id), parseEther(amountProposed)],
@@ -38,9 +40,9 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
       setIsSending(true);
       wrapWithToast(async () => await proposeSettlement().then((response) => response.hash), publicClient)
         .then((wrapResult) => {
-          if (wrapResult.status && toggleModal) {
-            toggleModal();
-          } else if (wrapResult.status) {
+          if (wrapResult.status) {
+            toggleModal && toggleModal();
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           } else {
             setIsSending(false);
           }

diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
@@ -10,6 +10,7 @@ import {
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 interface IRaiseDisputeButton {
   toggleModal?: () => void;
@@ -23,6 +24,7 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
   const publicClient = usePublicClient();
   const { buyer, id } = useTransactionDetailsContext();
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
+  const refetchQuery = useQueryRefetch();
 
   const { config: payArbitrationFeeByBuyerConfig } = usePrepareEscrowUniversalPayArbitrationFeeByBuyer({
     args: [BigInt(id)],
@@ -34,17 +36,20 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
     value: arbitrationCost,
   });
 
-  const { writeAsync: payArbitrationFeeByBuyer } = useEscrowUniversalPayArbitrationFeeByBuyer(payArbitrationFeeByBuyerConfig);
-  const { writeAsync: payArbitrationFeeBySeller } = useEscrowUniversalPayArbitrationFeeBySeller(payArbitrationFeeBySellerConfig);
+  const { writeAsync: payArbitrationFeeByBuyer } =
+    useEscrowUniversalPayArbitrationFeeByBuyer(payArbitrationFeeByBuyerConfig);
+  const { writeAsync: payArbitrationFeeBySeller } = useEscrowUniversalPayArbitrationFeeBySeller(
+    payArbitrationFeeBySellerConfig
+  );
 
   const handleRaiseDispute = () => {
     if (isBuyer && !isUndefined(payArbitrationFeeByBuyer)) {
       setIsSending(true);
       wrapWithToast(async () => await payArbitrationFeeByBuyer().then((response) => response.hash), publicClient)
         .then((wrapResult) => {
-          if (wrapResult.status && toggleModal) {
-            toggleModal();
-          } else if (wrapResult.status) {
+          if (wrapResult.status) {
+            toggleModal && toggleModal();
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           } else {
             setIsSending(false);
           }
@@ -57,9 +62,9 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
       setIsSending(true);
       wrapWithToast(async () => await payArbitrationFeeBySeller().then((response) => response.hash), publicClient)
         .then((wrapResult) => {
-          if (wrapResult.status && toggleModal) {
-            toggleModal();
-          } else if (wrapResult.status) {
+          if (wrapResult.status) {
+            toggleModal && toggleModal();
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           } else {
             setIsSending(false);
           }

diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
@@ -10,13 +10,15 @@ import {
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 const TimeOutButton: React.FC = () => {
   const { address } = useAccount();
   const [isSending, setIsSending] = useState<boolean>(false);
   const publicClient = usePublicClient();
   const { buyer, id } = useTransactionDetailsContext();
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
+  const refetchQuery = useQueryRefetch();
 
   const { config: timeOutByBuyerConfig } = usePrepareEscrowUniversalTimeOutByBuyer({
     args: [BigInt(id)],
@@ -36,6 +38,7 @@ const TimeOutButton: React.FC = () => {
         .then((wrapResult) => {
           if (!wrapResult.status) {
             setIsSending(false);
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           }
         })
         .catch((error) => {
@@ -48,6 +51,7 @@ const TimeOutButton: React.FC = () => {
         .then((wrapResult) => {
           if (!wrapResult.status) {
             setIsSending(false);
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           }
         })
         .catch((error) => {

diff --git a/...c/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx b/...c/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
@@ -7,12 +7,14 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { usePublicClient } from "wagmi";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 const ReleasePaymentButton: React.FC = () => {
   const [isModalOpen, toggleModal] = useToggle(false);
   const [isSending, setIsSending] = useState<boolean>(false);
   const publicClient = usePublicClient();
   const { id, amount } = useTransactionDetailsContext();
+  const refetchQuery = useQueryRefetch();
 
   const { config: releaseFullPaymentConfig } = usePrepareEscrowUniversalPay({
     args: [id, amount],
@@ -27,6 +29,7 @@ const ReleasePaymentButton: React.FC = () => {
         .then((wrapResult) => {
           if (wrapResult.status) {
             toggleModal();
+            refetchQuery([["refetchOnBlock", "useTransactionDetailsQuery"]]);
           }
         })
         .catch((error) => {

diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
@@ -23,6 +23,7 @@ import { parseEther, parseUnits } from "viem";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { ethAddressPattern } from "utils/validateAddress";
+import { useQueryRefetch } from "hooks/useQueryRefetch";
 
 const StyledButton = styled(Button)``;
 
@@ -43,6 +44,7 @@ const DepositPaymentButton: React.FC = () => {
   const [finalRecipientAddress, setFinalRecipientAddress] = useState(sellerAddress);
   const publicClient = usePublicClient();
   const navigate = useNavigate();
+  const refetchQuery = useQueryRefetch();
   const [isSending, setIsSending] = useState(false);
   const [isApproved, setIsApproved] = useState(false);
   const { address } = useAccount();
@@ -183,6 +185,7 @@ const DepositPaymentButton: React.FC = () => {
           publicClient
         );
         if (wrapResult.status) {
+          refetchQuery([["refetchOnBlock", "useMyTransactionsQuery"], ["useUserQuery"]]);
           resetContext();
           navigate("/my-transactions/display/1/desc/all");
         }