852: Fixed loading transactions from localStorage (#877)

airswap · Dec 20, 2023 · ac18b82 · ac18b82
1 parent 4bbb045
commit ac18b82
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/src/components/@widgets/SwapWidget/SwapWidget.tsx b/src/components/@widgets/SwapWidget/SwapWidget.tsx
@@ -215,7 +215,7 @@ const SwapWidget: FC = () => {
     baseTokenInfo,
     baseAmount
   );
-  const shouldApprove = !hasSufficientAllowance && swapType !== 'wrapOrUnwrap';
+  const shouldApprove = !hasSufficientAllowance && swapType !== "wrapOrUnwrap";
 
   const hasApprovalPending = useApprovalPending(baseToken);
   const maxAmount = useMaxAmount(baseToken);

diff --git a/src/features/metadata/metadataSubscriber.ts b/src/features/metadata/metadataSubscriber.ts
@@ -93,10 +93,17 @@ export const subscribeToSavedTokenChangesForLocalStoragePersisting = () => {
       ) {
         transactionCache[wallet.address!][wallet.chainId!] =
           mostRecentTransactions;
+
+        // Filter out processing transactions to prevent them being stuck perpetually, we should enable this again once we have a better solution
+        // TODO: https://github.com/airswap/airswap-web/issues/876
+        const updatedLocalStorageTransactions = mostRecentTransactions.filter(
+          (tx) => tx.status !== "processing"
+        );
+
         localStorage.setItem(
           getTransactionsLocalStorageKey(wallet.address!, wallet.chainId!),
           JSON.stringify({
-            all: mostRecentTransactions,
+            all: updatedLocalStorageTransactions,
           })
         );
       }

diff --git a/src/features/transactions/useHistoricalTransactions.ts b/src/features/transactions/useHistoricalTransactions.ts
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useCustomCompareEffect } from "@react-hookz/web/esm";
 import { useWeb3React } from "@web3-react/core";
@@ -10,6 +10,7 @@ import Weth9 from "../../constants/Weth9";
 import {
   checkPendingTransactionState,
   getSwapArgsFromWrappedSwapForLog,
+  getTransactionsLocalStorageKey,
   SwapEventArgs,
 } from "./transactionUtils";
 import {
@@ -23,13 +24,14 @@ import useTransactionsFromLocalStorage from "./useTransactionsFromLocalStorage";
 const useHistoricalTransactions = () => {
   const { chainId, library, account } = useWeb3React();
   const { result: swapLogs, status: swapLogStatus } = useSwapLogs();
-  const transactions = useAppSelector(selectTransactions);
   const {
     transactions: localStorageTransactions,
     setTransactions: setLocalStorageTransactions,
   } = useTransactionsFromLocalStorage();
   const dispatch = useAppDispatch();
 
+  const [activeLocalStorageKey, setActiveLocalStorageKey] = useState<string>();
+
   useCustomCompareEffect(
     () => {
       if (swapLogStatus === "loading" || swapLogStatus === "not-executed")
@@ -170,8 +172,20 @@ const useHistoricalTransactions = () => {
   );
 
   useEffect(() => {
-    setLocalStorageTransactions({ all: transactions });
-  }, [transactions]);
+    if (!chainId || !account) {
+      return;
+    }
+
+    const localStorageKey = getTransactionsLocalStorageKey(account, chainId);
+
+    if (localStorageKey === activeLocalStorageKey) {
+      return;
+    }
+
+    setActiveLocalStorageKey(localStorageKey);
+
+    dispatch(setTransactions(localStorageTransactions?.all || []));
+  }, [localStorageTransactions]);
 };
 
 export default useHistoricalTransactions;