Better handling of manual claim case

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;

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]);

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}