Count elapsed time on the Redemption details page

The Elapsed Time should be a dynamic countdown. Here we update the elapsed time every one minute.
threshold-network · Jul 27, 2023 · d5ac3e9 · d5ac3e9
1 parent ad5bf17
commit d5ac3e9
Showing 1 changed file with 35 additions and 22 deletions.
diff --git 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<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
@@ -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>