diff --git a/wormhole-connect/src/icons/TxReadyForClaim.tsx b/wormhole-connect/src/icons/TxReadyForClaim.tsx
new file mode 100644
index 000000000..dfb5b70dd
--- /dev/null
+++ b/wormhole-connect/src/icons/TxReadyForClaim.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { createSvgIcon } from '@mui/material';
+
+const TxCompleteIcon = createSvgIcon(
+ ,
+ '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
index 58cfb68f4..5ba769306 100644
--- 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 = ;
- if (eta) {
- etaDisplay = millisToHumanString(eta);
- }
+ if (!eta) return null;
+
+ etaDisplay = millisToHumanString(eta);
return (
{`Time to ${toChain}`}
- {!eta ? (
-
- ) : (
- {etaDisplay}
- )}
+ {etaDisplay}
);
}, [eta]);
diff --git a/wormhole-connect/src/views/v2/Redeem/index.tsx b/wormhole-connect/src/views/v2/Redeem/index.tsx
index 4820b2a23..6d73c4bb6 100644
--- 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 Transaction failed;
} else if (isTxDestQueued) {
return Transaction delayed;
- } else if (isTxAttested) {
- const token = config.tokens[receivedTokenKey];
- const displayName = token ? getDisplayName(token, toChain) : '';
- return (
- {`${receiveAmount} ${displayName} received at ${displayAddress(
- toChain,
- recipient,
- )}`}
- );
+ } else if (isTxAttested && !isAutomaticRoute) {
+ return Ready to claim on {toChain};
}
return Transaction submitted;
@@ -295,54 +289,72 @@ const Redeem = () => {
// Circular progress indicator component for ETA countdown
const etaCircle = useMemo(() => {
- return (
- <>
-
- {isTxComplete ? (
-
- ) : isTxRefunded || isTxDestQueued ? (
-
- ) : isTxFailed ? (
-
- ) : (
- <>
-
-
- {etaDisplay}
-
- >
- )}
-
- >
- );
- }, [etaDisplay, isTxComplete, isTxRefunded, isTxFailed, isTxDestQueued]);
+ if (isTxComplete) {
+ return ;
+ } else if (isTxRefunded || isTxDestQueued) {
+ return (
+
+ );
+ } else if (isTxFailed) {
+ return (
+
+ );
+ } else if (!isAutomaticRoute && isTxAttested) {
+ // Waiting for manual redeem
+ return (
+
+ );
+ } else {
+ // In progress
+ return (
+ <>
+
+
+ {etaDisplay}
+
+ >
+ );
+ }
+ }, [
+ etaDisplay,
+ isTxComplete,
+ isTxRefunded,
+ isTxFailed,
+ isTxDestQueued,
+ isTxAttested,
+ ]);
useEffect(() => {
let timer: NodeJS.Timeout | undefined;
@@ -619,7 +631,9 @@ const Redeem = () => {
{header}
{statusHeader}
- {etaCircle}
+
+ {etaCircle}
+
{actionButton}
{txDelayedText}