[Redesign] Adding back button to redeem view and addressing other fee…

…dback Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>
wormhole-foundation · Oct 18, 2024 · f799808 · f799808
1 parent a96a592
commit f799808
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/wormhole-connect/src/hooks/useTrackTransferInProgress.ts b/wormhole-connect/src/hooks/useTrackTransferInProgress.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isCompleted, routes } from '@wormhole-foundation/sdk';
+import { isCompleted, routes, TransferState } from '@wormhole-foundation/sdk';
 
 import config, { getWormholeContextV2 } from 'config';
 import { sleep } from 'utils';
@@ -18,10 +18,12 @@ type Props = {
 
 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 { eta, route: routeName } = props;
@@ -83,6 +85,14 @@ const useTrackTransferV2 = (props: Props): ReturnProps => {
                 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) {
@@ -105,6 +115,7 @@ const useTrackTransferV2 = (props: Props): ReturnProps => {
 
   return {
     isCompleted: completed,
+    isReadyToClaim: readyToClaim,
   };
 };
 

diff --git a/wormhole-connect/src/views/v2/Redeem/index.tsx b/wormhole-connect/src/views/v2/Redeem/index.tsx
@@ -4,6 +4,8 @@ import { useTimer } from 'react-timer-hook';
 import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import ChevronLeft from '@mui/icons-material/ChevronLeft';
+import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import {
@@ -29,6 +31,7 @@ import { SDKv2Signer } from 'routes/sdkv2/signer';
 import { setRoute } from 'store/router';
 import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
 import { interpretTransferError } from 'utils/errors';
+import { removeTxFromLocalStorage } from 'utils/inProgressTxCache';
 import { joinClass } from 'utils/style';
 import {
   millisToMinutesAndSeconds,
@@ -81,6 +84,11 @@ const useStyles = makeStyles<StyleProps>()((theme, { transitionDuration }) => ({
     maxWidth: '420px',
     width: '100%',
   },
+  backButton: {
+    alignItems: 'start',
+    maxWidth: '420px',
+    width: '100%',
+  },
   claimButton: {
     backgroundColor: theme.palette.warning.light,
     color:
@@ -169,22 +177,29 @@ const Redeem = () => {
 
   useEffect(() => {
     // When we see the transfer was complete for the first time,
-    // fire a transfer.success telemetry event.
-    if (isTxComplete && !transferSuccessEventFired) {
-      setTransferSuccessEventFired(true);
+    // fire a transfer.success telemetry event
+    if (isTxComplete) {
+      if (!transferSuccessEventFired) {
+        setTransferSuccessEventFired(true);
+
+        config.triggerEvent({
+          type: 'transfer.success',
+          details: getTransferDetails(
+            routeName!,
+            tokenKey,
+            receivedTokenKey,
+            fromChain,
+            toChain,
+            amount,
+            getUSDAmount,
+          ),
+        });
+      }
 
-      config.triggerEvent({
-        type: 'transfer.success',
-        details: getTransferDetails(
-          routeName!,
-          tokenKey,
-          receivedTokenKey,
-          fromChain,
-          toChain,
-          amount,
-          getUSDAmount,
-        ),
-      });
+      // Remove the in-progress tx from local storage
+      if (txData?.sendTx) {
+        removeTxFromLocalStorage(txData?.sendTx);
+      }
     }
   }, [isTxComplete]);
 
@@ -724,6 +739,14 @@ const Redeem = () => {
   return (
     <div className={joinClass([classes.container, classes.spacer])}>
       {header}
+      <Stack className={classes.backButton}>
+        <IconButton
+          sx={{ padding: 0 }}
+          onClick={() => dispatch(setRoute('bridge'))}
+        >
+          <ChevronLeft sx={{ fontSize: '32px' }} />
+        </IconButton>
+      </Stack>
       {statusHeader}
       <Box
         sx={{

diff --git a/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx b/wormhole-connect/src/views/v2/TxHistory/Widget/Item.tsx
@@ -78,7 +78,7 @@ const WidgetItem = (props: Props) => {
     onExpire: () => setEtaExpired(true),
   });
 
-  const { isCompleted } = useTrackTransferInProgress({
+  const { isCompleted, isReadyToClaim } = useTrackTransferInProgress({
     eta,
     receipt,
     route,
@@ -112,6 +112,10 @@ const WidgetItem = (props: Props) => {
 
   // Displays the countdown
   const etaCountdown = useMemo(() => {
+    if (isReadyToClaim) {
+      return 'Ready to claim...';
+    }
+
     if (etaExpired || etaRemaining === 0) {
       return 'Wrapping up...';
     }
@@ -121,7 +125,7 @@ const WidgetItem = (props: Props) => {
     }
 
     return <CircularProgress size={16} />;
-  }, [etaExpired, etaRemaining, isRunning, minutes, seconds]);
+  }, [etaExpired, etaRemaining, isReadyToClaim, isRunning, minutes, seconds]);
 
   // A number value between 0-100
   const progressBarValue = useMemo(() => {