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}