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 => {