[#522] fix bugs in usePendingTransaction

govtool/frontend/.eslintrc.cjs

@@ -51,6 +51,7 @@ module.exports = {
     "operator-linebreak": "off",
     "implicit-arrow-linebreak": "off",
     "consistent-return": "off",
+    "no-console": ["error", { allow: ["warn", "error"] }],
     "no-shadow": "off",
     "function-paren-newline": "off",
     "object-curly-newline": "off",

govtool/frontend/src/context/getUtxos.ts

@@ -77,7 +77,6 @@ export const getUtxos = async (
     return utxos;
   } catch (err) {
     Sentry.captureException(err);
-    // eslint-disable-next-line no-console
     console.error(err);
   }
 };

govtool/frontend/src/context/pendingTransaction/types.ts

@@ -15,14 +15,14 @@ export type TransactionType =
 export type TransactionStateWithoutResource = {
   type: TransactionTypeWithoutResource;
   transactionHash: string;
-  time: Date;
+  time: string;
   resourceId?: never;
 };
 
 export type TransactionStateWithResource = {
   type: TransactionTypeWithResource;
   transactionHash: string;
-  time: Date;
+  time: string;
   resourceId: string;
 };
 

govtool/frontend/src/context/pendingTransaction/usePendingTransaction.ts

@@ -20,15 +20,13 @@ const DB_SYNC_REFRESH_TIME = 3 * 1000; // 3 SECONDS
 const DB_SYNC_MAX_ATTEMPTS = 10;
 
 type UsePendingTransactionProps = {
-  dRepID: string;
   isEnabled: boolean;
   stakeKey: string | undefined;
 };
 
 export const usePendingTransaction = ({
   isEnabled,
   stakeKey,
-  dRepID,
 }: UsePendingTransactionProps) => {
   const { t } = useTranslation();
   const { openModal, closeModal } = useModal<StatusModalState>();
@@ -57,11 +55,10 @@ export const usePendingTransaction = ({
       const fromLocalStorage = getItemFromLocalStorage(
         `${PENDING_TRANSACTION_KEY}_${stakeKey}`
       );
-      setTransaction(
-        fromLocalStorage
-          ? { ...fromLocalStorage, time: new Date(fromLocalStorage.time) }
-          : null
-      );
+      setTransaction({
+        ...fromLocalStorage,
+        resourceId: fromLocalStorage?.resourceId ?? undefined,
+      });
     }
   }, [isEnabled, stakeKey]);
 
@@ -84,9 +81,7 @@ export const usePendingTransaction = ({
         if (isEnabled) {
           const desiredResult = getDesiredResult(
             type,
-            dRepID,
             resourceId,
-            stakeKey
           );
           const queryKey = getQueryKey(type, transaction);
 
@@ -105,13 +100,13 @@ export const usePendingTransaction = ({
               await wait(DB_SYNC_REFRESH_TIME);
             }
           }
-
-          if (isTransactionExpired(transaction.time)) {
-            addErrorAlert(t(`alerts.${type}.failed`));
-            resetTransaction();
-          }
         }
       }
+
+      if (isTransactionExpired(transaction.time)) {
+        addErrorAlert(t(`alerts.${type}.failed`));
+        resetTransaction();
+      }
     };
 
     let interval = setInterval(checkTransaction, TRANSACTION_REFRESH_TIME);
@@ -120,7 +115,7 @@ export const usePendingTransaction = ({
     if (isEnabled && transaction) {
       addWarningAlert(t("alerts.transactionInProgress"), 10000);
     }
-  }, [transaction]);
+  }, [isEnabled, transaction]);
 
   const isPendingTransaction = useCallback(() => {
     if (transaction) {
@@ -144,14 +139,17 @@ export const usePendingTransaction = ({
 
   const updateTransaction = (data: Omit<TransactionState, "time">) => {
     const newTransaction = {
-      time: new Date(),
+      time: new Date().toISOString(),
       ...data,
     } as TransactionState;
 
     setTransaction(newTransaction);
     setItemToLocalStorage(
       `${PENDING_TRANSACTION_KEY}_${stakeKey}`,
-      JSON.stringify(newTransaction)
+      {
+        ...newTransaction,
+        resourceId: newTransaction.resourceId || null,
+      }
     );
   };
 
@@ -162,5 +160,5 @@ export const usePendingTransaction = ({
   };
 };
 
-const isTransactionExpired = (time: Date): boolean =>
-  Date.now() - time.getTime() > TIME_TO_EXPIRE_TRANSACTION;
+const isTransactionExpired = (time: string): boolean =>
+  Date.now() - new Date(time).getTime() > TIME_TO_EXPIRE_TRANSACTION;

govtool/frontend/src/context/pendingTransaction/utils.tsx

@@ -4,17 +4,14 @@ import { TransactionType, TransactionState } from "./types";
 
 export const getDesiredResult = (
   type: TransactionType,
-  dRepID: string,
   resourceId: string | undefined,
-  stakeKey?: string
 ) => {
   switch (type) {
     case "delegate": {
       // current delegation
-      if (resourceId === dRepID) return dRepID;
       if (resourceId === "no confidence") return "drep_always_no_confidence";
       if (resourceId === "abstain") return "drep_always_abstain";
-      return stakeKey;
+      return resourceId;
     }
     case "registerAsDrep":
     case "registerAsSoleVoter":
@@ -38,9 +35,9 @@ export const getQueryKey = (
     case "retireAsDrep":
     case "registerAsSoleVoter":
     case "retireAsSoleVoter":
-      return [QUERY_KEYS.useGetDRepInfoKey, transaction];
+      return [QUERY_KEYS.useGetDRepInfoKey, transaction?.transactionHash];
     case "delegate":
-      return [QUERY_KEYS.getAdaHolderCurrentDelegationKey, transaction];
+      return [QUERY_KEYS.getAdaHolderCurrentDelegationKey, transaction?.transactionHash];
     default:
       return undefined;
   }
@@ -58,7 +55,7 @@ export const refetchData = async (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const data = await queryClient.getQueryData<any>(queryKey);
 
-  if (type === "delegate") return data.currentDelegation;
+  if (type === "delegate") return data;
   if (type === "registerAsDrep" || type === "retireAsDrep") return data.isRegisteredAsDRep;
   if (type === "registerAsSoleVoter" || type === "retireAsSoleVoter") return data.isRegisteredAsSoleVoter;
   return undefined;