From 9c089e07f86406df20b7907a1039fb4b74103b01 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 13:18:38 +0200 Subject: [PATCH 1/3] Update the copy on the Redemption page Currently 3 hours is quite optimistic and it often takes around 5 hours (experienced that during UATs several times). Here we update a copy saying that a redemption takes `3-5 hours`. --- src/pages/tBTC/Bridge/Unmint.tsx | 5 +++-- src/pages/tBTC/Bridge/UnmintDetails.tsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) 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..a24df0af9 100644 --- a/src/pages/tBTC/Bridge/UnmintDetails.tsx +++ b/src/pages/tBTC/Bridge/UnmintDetails.tsx @@ -167,7 +167,7 @@ export const UnmintDetails: PageComponent = () => { left="50%" transform="translateX(-50%)" > - usual duration - 3 hours + usual duration - 3-5 hours @@ -236,7 +236,7 @@ export const UnmintDetails: PageComponent = () => { > Your redemption request is being processed. This will take - around 5 hours. + around 3-5 hours. )} From ec4cca8a82db2a88e8a9bf4eae27f0179c0aef1f Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 15:27:58 +0200 Subject: [PATCH 2/3] Fix typo `transacion` -> `transaction` --- src/components/Modal/tBTC/InitiateUnminting.tsx | 2 +- .../{TransacionDetails => TransactionDetails}/index.tsx | 0 src/hooks/useAddErc20ToMetamask.ts | 2 +- src/pages/tBTC/Bridge/DepositDetails.tsx | 2 +- src/pages/tBTC/Bridge/UnmintDetails.tsx | 4 ++-- .../tBTC/Bridge/components/MintingTransactionDetails.tsx | 2 +- src/threshold-ts/tbtc/index.ts | 4 ++-- src/threshold-ts/utils/bitcoin.ts | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) rename src/components/{TransacionDetails => TransactionDetails}/index.tsx (100%) 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/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx index a24df0af9..fc5b72f2d 100644 --- a/src/pages/tBTC/Bridge/UnmintDetails.tsx +++ b/src/pages/tBTC/Bridge/UnmintDetails.tsx @@ -28,7 +28,7 @@ import { import { TransactionDetailsAmountItem, TransactionDetailsItem, -} from "../../../components/TransacionDetails" +} from "../../../components/TransactionDetails" import { InlineTokenBalance } from "../../../components/TokenBalance" import ViewInBlockExplorer, { Chain as ViewInBlockExplorerChain, @@ -260,7 +260,7 @@ export const UnmintDetails: PageComponent = () => { {`${time.days}d ${time.hours}h ${time.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 => { From 1c9b30860730a6395ee4df7ad5bc9765b43e14a0 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 16:53:58 +0200 Subject: [PATCH 3/3] 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. --- src/pages/tBTC/Bridge/UnmintDetails.tsx | 57 +++++++++++++++---------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/src/pages/tBTC/Bridge/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx index fc5b72f2d..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" @@ -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 @@ -257,7 +270,7 @@ 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`} Transaction History