diff --git a/src/components/Modal/tBTC/InitiateUnminting.tsx b/src/components/Modal/tBTC/InitiateUnminting.tsx
index fbb4e5210..adc1a1b28 100644
--- a/src/components/Modal/tBTC/InitiateUnminting.tsx
+++ b/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"
diff --git a/src/components/TransacionDetails/index.tsx b/src/components/TransactionDetails/index.tsx
similarity index 100%
rename from src/components/TransacionDetails/index.tsx
rename to src/components/TransactionDetails/index.tsx
diff --git a/src/hooks/useAddErc20ToMetamask.ts b/src/hooks/useAddErc20ToMetamask.ts
index e754b1c5a..380ef2aa3 100644
--- a/src/hooks/useAddErc20ToMetamask.ts
+++ b/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.
diff --git a/src/pages/tBTC/Bridge/DepositDetails.tsx b/src/pages/tBTC/Bridge/DepositDetails.tsx
index 87990de17..563bdcbfa 100644
--- a/src/pages/tBTC/Bridge/DepositDetails.tsx
+++ b/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 = () => {
diff --git a/src/pages/tBTC/Bridge/Unmint.tsx b/src/pages/tBTC/Bridge/Unmint.tsx
index 8d1b10d77..ef9a3ecbf 100644
--- a/src/pages/tBTC/Bridge/Unmint.tsx
+++ b/src/pages/tBTC/Bridge/Unmint.tsx
@@ -101,7 +101,8 @@ const UnmintFormPage: PageComponent = ({}) => {
subTitle="Unmint your tBTC tokens"
/>
- Unminting requires one Ethereum transaction and it takes around 3 hours.
+ Unminting requires one Ethereum transaction and it takes around 3-5
+ hours.
{
Duration
- ~ 3 Hours
+ ~ 3-5 Hours
diff --git a/src/pages/tBTC/Bridge/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx
index 4053adfff..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"
@@ -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
+ >({
+ 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
@@ -167,7 +180,7 @@ export const UnmintDetails: PageComponent = () => {
left="50%"
transform="translateX(-50%)"
>
- usual duration - 3 hours
+ usual duration - 3-5 hours
@@ -236,7 +249,7 @@ export const UnmintDetails: PageComponent = () => {
>
Your redemption request is being processed. This will take
- around 5 hours.
+ around 3-5 hours.
)}
@@ -257,10 +270,10 @@ 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`}
- Transacion History
+ Transaction History
{transactions
.filter((item) => !!item.txHash)
diff --git a/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx b/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx
index f66d43683..607db7b50 100644
--- a/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx
+++ b/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"
diff --git a/src/threshold-ts/tbtc/index.ts b/src/threshold-ts/tbtc/index.ts
index 45735dc50..b4b15dd6c 100644
--- a/src/threshold-ts/tbtc/index.ts
+++ b/src/threshold-ts/tbtc/index.ts
@@ -1028,10 +1028,10 @@ export class TBTC implements ITBTC {
}
getBitcoinTransaction = async (
- transacionHash: string
+ transactionHash: string
): Promise => {
return this._bitcoinClient.getTransaction(
- TransactionHash.from(transacionHash)
+ TransactionHash.from(transactionHash)
)
}
diff --git a/src/threshold-ts/utils/bitcoin.ts b/src/threshold-ts/utils/bitcoin.ts
index 1a5953ef5..31d90e391 100644
--- a/src/threshold-ts/utils/bitcoin.ts
+++ b/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 => {