Merge pull request #583 from threshold-network/redemption-improvements

Redemption improvements

Adds some improvements to Redemptions in T dapp.

### Main changes:
- fix typos
- update the copy- adjust the redemption time saying it's around 3-5 hours
- make `Elapsed Time` on the Redemption details page  as dynamic countdown

src/components/Modal/tBTC/InitiateUnminting.tsx

@@ -30,7 +30,7 @@ import { InlineTokenBalance } from "../../TokenBalance"
 import {
   TransactionDetailsAmountItem,
   TransactionDetailsItem,
-} from "../../TransacionDetails"
+} from "../../TransactionDetails"
 import ModalCloseButton from "../ModalCloseButton"
 import withBaseModal from "../withBaseModal"
 

src/hooks/useAddErc20ToMetamask.ts

@@ -25,7 +25,7 @@ const useAddErc20ToMetamask = (tokenContract?: Contract | null) => {
       }
       // Based on the docs, the result from request should be `boolean` but it
       // returns an object in Chrome. On Firefox browser, this request blocks
-      // the MM provider and the dapp can't trigger transacion and fetch
+      // the MM provider and the dapp can't trigger transaction and fetch
       // on-chain data. Also the MM provider doesn't return any result from this
       // request. On Chrome browser, this request returns a result as an object,
       // even if the user does not make any interaction in the MM popup.

src/pages/tBTC/Bridge/DepositDetails.tsx

@@ -70,7 +70,7 @@ import { PageComponent } from "../../../types"
 import { CurveFactoryPoolId, ExternalHref } from "../../../enums"
 import { ExternalPool } from "../../../components/tBTC/ExternalPool"
 import { useFetchExternalPoolData } from "../../../hooks/useFetchExternalPoolData"
-import { TransactionDetailsAmountItem } from "../../../components/TransacionDetails"
+import { TransactionDetailsAmountItem } from "../../../components/TransactionDetails"
 import { BridgeProcessDetailsPageSkeleton } from "./components/BridgeProcessDetailsPageSkeleton"
 
 export const DepositDetails: PageComponent = () => {

src/pages/tBTC/Bridge/Unmint.tsx

@@ -101,7 +101,8 @@ const UnmintFormPage: PageComponent = ({}) => {
         subTitle="Unmint your tBTC tokens"
       />
       <BodyMd color="gray.500">
-        Unminting requires one Ethereum transaction and it takes around 3 hours.
+        Unminting requires one Ethereum transaction and it takes around 3-5
+        hours.
       </BodyMd>
       <UnmintForm
         maxTokenAmount={balance.toString()}
@@ -122,7 +123,7 @@ const UnmintAsideLayout = () => {
       <LabelSm>Duration</LabelSm>
       <HStack mt="4" spacing="4">
         <BoxLabel variant="solid" status="primary">
-          ~ 3 Hours
+          ~ 3-5 Hours
         </BoxLabel>
         <Box>
           <BodyXs as="span" color="gray.500">

src/pages/tBTC/Bridge/UnmintDetails.tsx

@@ -14,6 +14,7 @@ import {
   LabelSm,
   List,
   ListItem,
+  ONE_MINUTE_IN_SECONDS,
   SkeletonText,
   useColorModeValue,
 } from "@threshold-network/components"
@@ -28,7 +29,7 @@ import {
 import {
   TransactionDetailsAmountItem,
   TransactionDetailsItem,
-} from "../../../components/TransacionDetails"
+} from "../../../components/TransactionDetails"
 import { InlineTokenBalance } from "../../../components/TokenBalance"
 import ViewInBlockExplorer, {
   Chain as ViewInBlockExplorerChain,
@@ -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
@@ -167,7 +180,7 @@ export const UnmintDetails: PageComponent = () => {
                 left="50%"
                 transform="translateX(-50%)"
               >
-                usual duration - 3 hours
+                usual duration - 3-5 hours
               </Badge>
               <TimelineItem status="active">
                 <TimelineBreakpoint>
@@ -236,7 +249,7 @@ export const UnmintDetails: PageComponent = () => {
               >
                 <BodyMd mt="6" px="3.5" mb="10" alignSelf="flex-start">
                   Your redemption request is being processed. This will take
-                  around 5 hours.
+                  around 3-5 hours.
                 </BodyMd>
               </BridgeProcessStep>
             )}
@@ -257,10 +270,10 @@ 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">Transacion History</LabelSm>
+            <LabelSm mt="5">Transaction History</LabelSm>
             <List mt="6" color="gray.500" spacing="2" mb="20">
               {transactions
                 .filter((item) => !!item.txHash)

src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx

@@ -2,7 +2,7 @@ import { List } from "@threshold-network/components"
 import {
   TransactionDetailsAmountItem,
   TransactionDetailsItem,
-} from "../../../../components/TransacionDetails"
+} from "../../../../components/TransactionDetails"
 import { useTbtcState } from "../../../../hooks/useTbtcState"
 import shortenAddress from "../../../../utils/shortenAddress"
 

src/threshold-ts/tbtc/index.ts

@@ -1028,10 +1028,10 @@ export class TBTC implements ITBTC {
   }
 
   getBitcoinTransaction = async (
-    transacionHash: string
+    transactionHash: string
   ): Promise<BitcoinTransaction> => {
     return this._bitcoinClient.getTransaction(
-      TransactionHash.from(transacionHash)
+      TransactionHash.from(transactionHash)
     )
   }
 

src/threshold-ts/utils/bitcoin.ts

@@ -40,7 +40,7 @@ export const isPayToScriptHashTypeAddress = (address: string): boolean => {
  * Bitcoin transaction hash is stored on Ethereum in native Bitcoin
  * little-endian format but to get the confirmations for this transaction we
  * need to reverse its hash.
- * @param {string} txHash Transacion hash as string.
+ * @param {string} txHash Transaction hash as string.
  * @return {TransactionHash} Reversed transaction hash.
  */
 export const reverseTxHash = (txHash: string): TransactionHash => {