diff --git a/src/pages/tBTC/Bridge/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx index fc5b72f2d..7be233d28 100644 --- a/src/pages/tBTC/Bridge/UnmintDetails.tsx +++ b/src/pages/tBTC/Bridge/UnmintDetails.tsx @@ -14,6 +14,7 @@ import { LabelSm, List, ListItem, + ONE_MINUTE_IN_SECONDS, SkeletonText, useColorModeValue, } from "@threshold-network/components" @@ -52,25 +53,8 @@ import { ProcessCompletedBrandGradientIcon } from "./components/BridgeProcessDet import { featureFlags } from "../../../constants" import { useFetchRedemptionDetails } from "../../../hooks/tbtc/useFetchRedemptionDetails" import { BridgeProcessDetailsPageSkeleton } from "./components/BridgeProcessDetailsPageSkeleton" -import { BigNumber } from "ethers" import { ExternalHref } from "../../../enums" -const pendingRedemption = { - redemptionRequestedTxHash: - "0xf7d0c92c8de4d117d915c2a8a54ee550047f926bc00b91b651c40628751cfe29", - walletPublicKeyHash: "0x03b74d6893ad46dfdd01b9e0e3b3385f4fce2d1e", - redeemerOutputScript: "0x160014751E76E8199196D454941C45D1B3A323F1433BD6", - redeemer: "0x086813525A7dC7dafFf015Cdf03896Fd276eab60", -} - -const completedRedemption = { - redemptionRequestedTxHash: - "0x0b5d66b89c5fe276ac5b0fd1874142f99329ea6f66485334a558e2bccd977618", - walletPublicKeyHash: "0x03b74d6893ad46dfdd01b9e0e3b3385f4fce2d1e", - redeemerOutputScript: "0x17A91486884E6BE1525DAB5AE0B451BD2C72CEE67DCF4187", - redeemer: "0x68ad60CC5e8f3B7cC53beaB321cf0e6036962dBc", -} - export const UnmintDetails: PageComponent = () => { const [searchParams] = useSearchParams() const walletPublicKeyHash = searchParams.get("walletPublicKeyHash") @@ -93,7 +77,7 @@ export const UnmintDetails: PageComponent = () => { const btcTxHash = data?.redemptionCompletedTxHash?.bitcoin useEffect(() => { - if (!!btcTxHash) setShouldDisplaySuccessStep(true) + setShouldDisplaySuccessStep(!!btcTxHash) }, [btcTxHash]) const isProcessCompleted = !!data?.redemptionCompletedTxHash?.bitcoin @@ -102,9 +86,38 @@ export const UnmintDetails: PageComponent = () => { const thresholdNetworkFee = data?.treasuryFee ?? "0" const btcAddress = data?.btcAddress - const time = dateAs( - (data?.completedAt ?? dateToUnixTimestamp()) - (data?.requestedAt ?? 0) - ) + const redemptionCompletedAt = data?.completedAt + const redemptionRequestedAt = data?.requestedAt + const [redemptionTime, setRedemptionTime] = useState< + ReturnType + >({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }) + useEffect(() => { + let intervalId: ReturnType + + if (!redemptionCompletedAt && redemptionRequestedAt) { + intervalId = setInterval(() => { + setRedemptionTime( + dateAs( + redemptionCompletedAt ?? + dateToUnixTimestamp() - (data?.requestedAt ?? 0) + ) + ) + }, ONE_MINUTE_IN_SECONDS) + } else if (redemptionCompletedAt && redemptionRequestedAt) { + setRedemptionTime(dateAs(redemptionCompletedAt - redemptionRequestedAt)) + } + + return () => { + if (intervalId) { + clearInterval(intervalId) + } + } + }, [redemptionCompletedAt, redemptionRequestedAt]) const transactions: { label: string @@ -257,7 +270,7 @@ export const UnmintDetails: PageComponent = () => { {isProcessCompleted ? "total time" : "elapsed time"} - {`${time.days}d ${time.hours}h ${time.minutes}m`} + {`${redemptionTime.days}d ${redemptionTime.hours}h ${redemptionTime.minutes}m`} Transaction History