Fixing a theme color and combining the hooks for tracking transfers

wormhole-connect/src/hooks/useTrackTransfer.ts

@@ -1,78 +1,106 @@
-import { isCompleted } from '@wormhole-foundation/sdk';
-import { RouteContext } from 'contexts/RouteContext';
-import { useContext, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { setRedeemTx, setTransferComplete } from 'store/redeem';
-import type { RootState } from 'store';
+import { useEffect, useState } from 'react';
+import { isCompleted, routes, TransferState } from '@wormhole-foundation/sdk';
+
+import config, { getWormholeContextV2 } from 'config';
 import { sleep } from 'utils';
 
+import type { AttestationReceipt } from '@wormhole-foundation/sdk';
+
+const TRACK_INTERVAL = 5000;
+const TRACK_INTERVAL_FAST = 1000;
 const TRACK_TIMEOUT = 120 * 1000;
 
-// TODO: document this hook, especially since it sets and depends on the receipt state
-const useTrackTransfer = (): void => {
-  const dispatch = useDispatch();
+type Props = {
+  route: string | undefined;
+  receipt: routes.Receipt<AttestationReceipt> | null;
+  eta?: number;
+};
+
+type ReturnProps = {
+  isCompleted: boolean;
+  isReadyToClaim: boolean;
+};
+
+const useTrackTransferV2 = (props: Props): ReturnProps => {
+  const [completed, setCompleted] = useState(false);
+  const [readyToClaim, setReadyToClaim] = useState(false);
+  const [receipt, setReceipt] = useState<routes.Receipt<AttestationReceipt>>();
 
-  const routeContext = useContext(RouteContext);
+  const { eta, route: routeName } = props;
 
-  const { txData, timestamp } = useSelector((state: RootState) => state.redeem);
+  // Set initial receipt from the caller
+  useEffect(() => {
+    if (props.receipt) {
+      setReceipt(props.receipt);
+    }
+  }, [props.receipt]);
 
   useEffect(() => {
     let isActive = true;
 
-    let sleepTime = 5000;
+    let sleepTime = TRACK_INTERVAL;
 
-    if (txData && txData.eta && txData.eta < 30_000) {
+    if (eta && eta < 30_000) {
       // Poll aggressively for very fast transfers
-      sleepTime = 1000;
+      sleepTime = TRACK_INTERVAL_FAST;
     }
 
     const track = async () => {
-      const { route, receipt } = routeContext;
+      if (!routeName || !receipt) {
+        return;
+      }
 
-      if (!route || !receipt) {
+      const route = config.routes.get(routeName);
+
+      if (!route) {
         return;
       }
 
+      const wh = await getWormholeContextV2();
+      const sdkRoute = new route.rc(wh);
+
       let stateChanged = false;
 
       while (isActive && !isCompleted(receipt) && !stateChanged) {
         try {
           // We need to consume all of the values the track generator yields in case any of them
           // update the receipt state.
-          // When the receipt state is updated, we set the new receipt in the route context
-          // and break out of the loop.
-          // The hook will then be re-run and the new receipt will be used to continue tracking
-          // unless the transfer is completed.
-          for await (const currentReceipt of route.track(
+          for await (const currentReceipt of sdkRoute.track(
             receipt,
             TRACK_TIMEOUT,
           )) {
             if (!isActive) {
               break;
             }
 
+            // When the receipt state is updated, we set the new receipt in the local state
+            // and break out of the loop.
+            // The hook will then be re-run and the new receipt will be used to continue tracking
+            // until the transfer is completed.
             if (currentReceipt.state !== receipt.state) {
-              routeContext.setReceipt(currentReceipt);
+              setReceipt(currentReceipt);
 
               if (isCompleted(currentReceipt)) {
-                dispatch(setTransferComplete(true));
-
-                const lastTx = currentReceipt.destinationTxs?.slice(-1)[0];
-                if (lastTx) {
-                  dispatch(setRedeemTx(lastTx.txid));
-                }
+                setCompleted(true);
+                stateChanged = true;
+                break;
               }
 
-              stateChanged = true;
-              break;
+              // Check whether this is a manual transaction ready to claim
+              if (
+                !route.AUTOMATIC_DEPOSIT &&
+                currentReceipt.state >= TransferState.Attested
+              ) {
+                setReadyToClaim(true);
+              }
             }
           }
         } catch (e) {
           console.error('Error tracking transfer:', e);
-          sleepTime = 5000; // Back off if we were polling aggressively
+          sleepTime = TRACK_INTERVAL; // Back off if we were polling aggressively
         }
 
-        // retry
+        // Retry
         // TODO: exponential backoff depending on the current state?
         await sleep(sleepTime);
       }
@@ -83,7 +111,12 @@ const useTrackTransfer = (): void => {
     return () => {
       isActive = false;
     };
-  }, [routeContext, txData?.eta, timestamp]);
+  }, [eta, receipt, routeName]);
+
+  return {
+    isCompleted: completed,
+    isReadyToClaim: readyToClaim,
+  };
 };
 
-export default useTrackTransfer;
+export default useTrackTransferV2;

wormhole-connect/src/views/v2/Bridge/ReviewTransaction/index.tsx

@@ -357,7 +357,10 @@ const ReviewTransaction = (props: Props) => {
             gap={1}
             textTransform="none"
           >
-            <CircularProgress color="secondary" size={16} />
+            <CircularProgress
+              size={16}
+              sx={{ color: theme.palette.primary.contrastText }}
+            />
             {mobile ? 'Preparing' : 'Preparing transaction'}
           </Typography>
         ) : !isTransactionInProgress && props.isFetchingQuotes ? (

wormhole-connect/src/views/v2/Redeem/index.tsx

@@ -146,15 +146,11 @@ const Redeem = () => {
 
   const [isWalletSidebarOpen, setIsWalletSidebarOpen] = useState(false);
 
-  // Start tracking changes in the transaction
-  useTrackTransfer();
-
   const routeContext = React.useContext(RouteContext);
 
   useConnectToLastUsedWallet();
 
   const {
-    transferComplete: isTxComplete,
     route: routeName,
     timestamp: txTimestamp,
     isResumeTx,
@@ -184,6 +180,12 @@ const Redeem = () => {
 
   const getUSDAmount = useUSDamountGetter();
 
+  // Start tracking changes in the transaction
+  const { isCompleted: isTxComplete } = useTrackTransfer({
+    receipt,
+    route: routeName,
+  });
+
   const isAutomaticRoute = useMemo(() => {
     if (!routeName) {
       return false;
@@ -753,7 +755,12 @@ const Redeem = () => {
             gap={1}
             textTransform="none"
           >
-            <CircularProgress color="secondary" size={16} />
+            <CircularProgress
+              size={16}
+              sx={{
+                color: theme.palette.primary.contrastText,
+              }}
+            />
             Transfer in progress
           </Typography>
         </Button>

wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx

@@ -21,7 +21,7 @@ import { makeStyles } from 'tss-react/mui';
 import AlertBannerV2 from 'components/v2/AlertBanner';
 import config, { getWormholeContextV2 } from 'config';
 import { RouteContext } from 'contexts/RouteContext';
-import useTrackTransferInProgress from 'hooks/useTrackTransferInProgress';
+import useTrackTransfer from 'hooks/useTrackTransfer';
 import ArrowRight from 'icons/ArrowRight';
 import TokenIcon from 'icons/TokenIcons';
 import TxCompleteIcon from 'icons/TxComplete';
@@ -99,7 +99,7 @@ const WidgetItem = (props: Props) => {
     onExpire: () => setEtaExpired(true),
   });
 
-  const { isCompleted, isReadyToClaim } = useTrackTransferInProgress({
+  const { isCompleted, isReadyToClaim } = useTrackTransfer({
     eta,
     receipt,
     route,