update isFetchingLastTransactionStatus as lastTransactionHasCompleted

Author: toddkao

packages/widget/src/hooks/useTxHistory.ts

@@ -2,7 +2,6 @@ import { TxsStatus, useBroadcastedTxsStatus } from "@/pages/SwapExecutionPage/us
 import { useSyncTxStatus } from "@/pages/SwapExecutionPage/useSyncTxStatus";
 import { removeTransactionHistoryItemAtom, TransactionHistoryItem } from "@/state/history";
 import { skipChainsAtom } from "@/state/skipClient";
-import { skipSubmitSwapExecutionAtom, swapExecutionStateAtom } from "@/state/swapExecutionPage";
 import { SimpleStatus } from "@/utils/clientType";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
@@ -17,8 +16,6 @@ export const useTxHistory = ({ txHistoryItem, index }: useTxHistoryProps) => {
 
   const removeTransactionHistoryItem = useSetAtom(removeTransactionHistoryItemAtom);
 
-  const { isPending: executeRouteIsPending } = useAtomValue(skipSubmitSwapExecutionAtom);
-
   const txs = txHistoryItem?.transactionDetails?.map((tx) => ({
     chainID: tx.chainID,
     txHash: tx.txHash,
@@ -32,9 +29,7 @@ export const useTxHistory = ({ txHistoryItem, index }: useTxHistoryProps) => {
 
   const txsRequired = txHistoryItem?.route?.txsRequired;
 
-  const shouldFetchStatus =
-    (!txHistoryItem?.isSettled && txs?.length === txsRequired && chainIdFound) ||
-    executeRouteIsPending;
+  const shouldFetchStatus = !txHistoryItem?.isSettled && txs !== undefined && chainIdFound;
 
   let statusData: TransactionHistoryItem | TxsStatus | undefined = txHistoryItem;
 

packages/widget/src/pages/SwapExecutionPage/useSyncTxStatus.tsx

@@ -73,16 +73,14 @@ export const useSyncTxStatus = ({
   ]);
 
   useEffect(() => {
-    setOverallStatus(computedSwapStatus);
-
     if (computedSwapStatus) {
       const index = historyIndex ?? transactionHistoryIndex;
       setTransactionHistoryItem({
         ...txHistory[index],
         ...statusData,
         status: computedSwapStatus,
       });
-      console.log(computedSwapStatus);
+      setOverallStatus(computedSwapStatus);
     }
   }, [
     clientOperations,

packages/widget/src/pages/SwapPage/SwapPageHeader.tsx

@@ -5,25 +5,23 @@ import { sourceAssetAtom } from "@/state/swapPage";
 import { PageHeader } from "../../components/PageHeader";
 import { currentPageAtom, Routes } from "@/state/router";
 import { ConnectedWalletContent } from "./ConnectedWalletContent";
-import { lastTransactionHasCompletedAtom, transactionHistoryAtom } from "@/state/history";
+import { isFetchingLastTransactionStatusAtom, transactionHistoryAtom } from "@/state/history";
 import { track } from "@amplitude/analytics-browser";
 import { SpinnerIcon } from "@/icons/SpinnerIcon";
 import { useGetAccount } from "@/hooks/useGetAccount";
 import { useTxHistory } from "@/hooks/useTxHistory";
-import { skipSubmitSwapExecutionAtom } from "@/state/swapExecutionPage";
 
 export const SwapPageHeader = memo(() => {
   const setCurrentPage = useSetAtom(currentPageAtom);
   const sourceAsset = useAtomValue(sourceAssetAtom);
-  const { isPending } = useAtomValue(skipSubmitSwapExecutionAtom);
 
-  const lastTransactionHasCompleted = useAtomValue(lastTransactionHasCompletedAtom);
+  const isFetchingLastTransactionStatus = useAtomValue(isFetchingLastTransactionStatusAtom);
 
   const getAccount = useGetAccount();
   const sourceAccount = getAccount(sourceAsset?.chainID);
 
   const historyPageIcon = useMemo(() => {
-    if (!lastTransactionHasCompleted || isPending) {
+    if (isFetchingLastTransactionStatus) {
       return (
         <div
           style={{
@@ -45,10 +43,10 @@ export const SwapPageHeader = memo(() => {
     }
 
     return ICONS.history;
-  }, [isPending, lastTransactionHasCompleted]);
+  }, [isFetchingLastTransactionStatus]);
 
   const historyPageButton = useMemo(() => {
-    if (lastTransactionHasCompleted === undefined) return;
+    if (isFetchingLastTransactionStatus === undefined) return;
 
     return {
       label: "History",
@@ -58,7 +56,7 @@ export const SwapPageHeader = memo(() => {
         setCurrentPage(Routes.TransactionHistoryPage);
       },
     };
-  }, [lastTransactionHasCompleted, historyPageIcon, setCurrentPage]);
+  }, [isFetchingLastTransactionStatus, historyPageIcon, setCurrentPage]);
 
   return (
     <>

packages/widget/src/state/history.ts

@@ -1,6 +1,6 @@
 import { RouteResponse } from "@skip-go/client";
 import { atomFamily, atomWithStorage } from "jotai/utils";
-import { TransactionDetails } from "./swapExecutionPage";
+import { skipSubmitSwapExecutionAtom, TransactionDetails } from "./swapExecutionPage";
 import { SimpleStatus } from "@/utils/clientType";
 import { atom } from "jotai";
 import { TxsStatus } from "@/pages/SwapExecutionPage/useBroadcastedTxs";
@@ -47,8 +47,14 @@ export const removeTransactionHistoryItemAtom = atom(null, (get, set, index: num
   transactionHistoryItemAtom.remove(index);
 });
 
-export const lastTransactionHasCompletedAtom = atom((get) => {
-  const txHistoryItem = get(transactionHistoryAtom).at(-1);
+export const isFetchingLastTransactionStatusAtom = atom((get) => {
+  const lastTxHistoryItem = get(transactionHistoryAtom).at(-1);
 
-  return txHistoryItem?.isSettled;
+  const { isPending: executeRouteIsPending } = get(skipSubmitSwapExecutionAtom);
+
+  const isFetchingLastTxStatus =
+    (!lastTxHistoryItem?.isSettled && lastTxHistoryItem?.transactionDetails !== undefined) ||
+    executeRouteIsPending;
+
+  return isFetchingLastTxStatus;
 });