Skip to content

Commit

Permalink
Count elapsed time on the Redemption details page
Browse files Browse the repository at this point in the history
The Elapsed Time should be a dynamic countdown. Here we update the
elapsed time every one minute.
  • Loading branch information
r-czajkowski committed Jul 27, 2023
1 parent ad5bf17 commit d5ac3e9
Showing 1 changed file with 35 additions and 22 deletions.
57 changes: 35 additions & 22 deletions src/pages/tBTC/Bridge/UnmintDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
LabelSm,
List,
ListItem,
ONE_MINUTE_IN_SECONDS,
SkeletonText,
useColorModeValue,
} from "@threshold-network/components"
Expand Down Expand Up @@ -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")
Expand All @@ -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
Expand All @@ -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<typeof dateAs>
>({
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
})
useEffect(() => {
let intervalId: ReturnType<typeof setInterval>

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
Expand Down Expand Up @@ -257,7 +270,7 @@ export const UnmintDetails: PageComponent = () => {
{isProcessCompleted ? "total time" : "elapsed time"}
</LabelSm>
<BodyLg mt="2.5" color="gray.500">
{`${time.days}d ${time.hours}h ${time.minutes}m`}
{`${redemptionTime.days}d ${redemptionTime.hours}h ${redemptionTime.minutes}m`}
</BodyLg>

<LabelSm mt="5">Transaction History</LabelSm>
Expand Down

0 comments on commit d5ac3e9

Please sign in to comment.