better handling of manual claim case (#2704)

wormhole-foundation · Sep 24, 2024 · 6046c3b · 6046c3b
1 parent eb4e064
commit 6046c3b
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 67 deletions.
diff --git a/wormhole-connect/src/icons/TxReadyForClaim.tsx b/wormhole-connect/src/icons/TxReadyForClaim.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+const TxCompleteIcon = createSvgIcon(
+  <svg
+    width="107"
+    height="106"
+    viewBox="0 0 107 106"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      fill="currentColor"
+      d="M53.2,105.5c29,0,52.6-23.5,52.6-52.5S82.2.5,53.2.5.6,24,.6,53s23.5,52.5,52.6,52.5ZM53.2,102.1c27.2,0,49.2-22,49.2-49.1S80.4,3.9,53.2,3.9,4,25.9,4,53s22,49.1,49.2,49.1Z"
+    />
+    <rect fill="currentColor" x="51" y="28.8" width="5" height="42.6" />
+    <rect
+      fill="currentColor"
+      x="48"
+      y="63.9"
+      width="25.5"
+      height="5"
+      transform="translate(-29.2 62.4) rotate(-45)"
+    />
+    <rect
+      fill="currentColor"
+      x="43.8"
+      y="53.7"
+      width="5"
+      height="25.5"
+      transform="translate(-33.4 52.2) rotate(-45)"
+    />
+  </svg>,
+  'Alert',
+);
+
+export default TxCompleteIcon;
diff --git a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx
@@ -270,20 +270,16 @@ const TransactionDetails = () => {
   const timeToDestination = useMemo(() => {
     let etaDisplay: string | ReactNode = <CircularProgress size={14} />;
 
-    if (eta) {
-      etaDisplay = millisToHumanString(eta);
-    }
+    if (!eta) return null;
+
+    etaDisplay = millisToHumanString(eta);
 
     return (
       <Stack direction="row" justifyContent="space-between">
         <Typography color={theme.palette.text.secondary} fontSize={14}>
           {`Time to ${toChain}`}
         </Typography>
-        {!eta ? (
-          <CircularProgress size={14} />
-        ) : (
-          <Typography fontSize={14}>{etaDisplay}</Typography>
-        )}
+        <Typography fontSize={14}>{etaDisplay}</Typography>
       </Stack>
     );
   }, [eta]);

diff --git a/wormhole-connect/src/views/v2/Redeem/index.tsx b/wormhole-connect/src/views/v2/Redeem/index.tsx
@@ -28,7 +28,7 @@ import PoweredByIcon from 'icons/PoweredBy';
 import { SDKv2Signer } from 'routes/sdkv2/signer';
 import { setRoute } from 'store/router';
 import { useUSDamountGetter } from 'hooks/useUSDamountGetter';
-import { displayAddress, getDisplayName, millisToHumanString } from 'utils';
+import { millisToHumanString } from 'utils';
 import { interpretTransferError } from 'utils/errors';
 import { joinClass } from 'utils/style';
 import { minutesAndSecondsWithPadding } from 'utils/transferValidation';
@@ -46,6 +46,7 @@ import TxWarningIcon from 'icons/TxWarning';
 import TxFailedIcon from 'icons/TxFailed';
 import { getAssociatedTokenAddressSync } from '@solana/spl-token';
 import { PublicKey } from '@solana/web3.js';
+import TxReadyForClaim from 'icons/TxReadyForClaim';
 
 const useStyles = makeStyles()((theme) => ({
   spacer: {
@@ -236,15 +237,8 @@ const Redeem = () => {
       return <Stack>Transaction failed</Stack>;
     } else if (isTxDestQueued) {
       return <Stack>Transaction delayed</Stack>;
-    } else if (isTxAttested) {
-      const token = config.tokens[receivedTokenKey];
-      const displayName = token ? getDisplayName(token, toChain) : '';
-      return (
-        <Stack>{`${receiveAmount} ${displayName} received at ${displayAddress(
-          toChain,
-          recipient,
-        )}`}</Stack>
-      );
+    } else if (isTxAttested && !isAutomaticRoute) {
+      return <Stack>Ready to claim on {toChain}</Stack>;
     }
 
     return <Stack>Transaction submitted</Stack>;
@@ -295,54 +289,72 @@ const Redeem = () => {
 
   // Circular progress indicator component for ETA countdown
   const etaCircle = useMemo(() => {
-    return (
-      <>
-        <Box sx={{ position: 'relative', display: 'inline-flex' }}>
-          {isTxComplete ? (
-            <TxCompleteIcon className={classes.txStatusIcon} />
-          ) : isTxRefunded || isTxDestQueued ? (
-            <TxWarningIcon
-              className={classes.txStatusIcon}
-              sx={{
-                color: theme.palette.warning.main,
-              }}
-            />
-          ) : isTxFailed ? (
-            <TxFailedIcon
-              className={classes.txStatusIcon}
-              sx={{
-                color: theme.palette.error.light,
-              }}
-            />
-          ) : (
-            <>
-              <CircularProgress
-                size={120}
-                sx={{
-                  color: theme.palette.primary.main,
-                }}
-                thickness={2}
-              />
-              <Box
-                sx={{
-                  top: 0,
-                  left: 0,
-                  bottom: 0,
-                  right: 0,
-                  position: 'absolute',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                {etaDisplay}
-              </Box>
-            </>
-          )}
-        </Box>
-      </>
-    );
-  }, [etaDisplay, isTxComplete, isTxRefunded, isTxFailed, isTxDestQueued]);
+    if (isTxComplete) {
+      return <TxCompleteIcon className={classes.txStatusIcon} />;
+    } else if (isTxRefunded || isTxDestQueued) {
+      return (
+        <TxWarningIcon
+          className={classes.txStatusIcon}
+          sx={{
+            color: theme.palette.warning.main,
+          }}
+        />
+      );
+    } else if (isTxFailed) {
+      return (
+        <TxFailedIcon
+          className={classes.txStatusIcon}
+          sx={{
+            color: theme.palette.error.light,
+          }}
+        />
+      );
+    } else if (!isAutomaticRoute && isTxAttested) {
+      // Waiting for manual redeem
+      return (
+        <TxReadyForClaim
+          className={classes.txStatusIcon}
+          sx={{
+            color: theme.palette.warning.light,
+          }}
+        />
+      );
+    } else {
+      // In progress
+      return (
+        <>
+          <CircularProgress
+            size={120}
+            sx={{
+              color: theme.palette.primary.main,
+            }}
+            thickness={2}
+          />
+          <Box
+            sx={{
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {etaDisplay}
+          </Box>
+        </>
+      );
+    }
+  }, [
+    etaDisplay,
+    isTxComplete,
+    isTxRefunded,
+    isTxFailed,
+    isTxDestQueued,
+    isTxAttested,
+  ]);
 
   useEffect(() => {
     let timer: NodeJS.Timeout | undefined;
@@ -619,7 +631,9 @@ const Redeem = () => {
     <div className={joinClass([classes.container, classes.spacer])}>
       {header}
       {statusHeader}
-      {etaCircle}
+      <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+        {etaCircle}
+      </Box>
       <TransactionDetails />
       {actionButton}
       {txDelayedText}