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/components/tBTC/TakeNoteList.tsx b/src/components/tBTC/TakeNoteList.tsx index 68a54caa7..22f339986 100644 --- a/src/components/tBTC/TakeNoteList.tsx +++ b/src/components/tBTC/TakeNoteList.tsx @@ -60,17 +60,6 @@ export const TakeNoteList: FC<{ size?: "sm" | "md" }> = ({ size = "md" }) => { - - Bridging back BTC - - - - Bridging back is under construction! The ability to bridge BTC - back to the Bitcoin network won't be enabled for 3 to 6 months. - - - - ) } 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 a57b424f5..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 @@ -227,7 +228,7 @@ type UnmintFormValues = { wallet: RedemptionWalletData } -type UnmitnFormProps = { +type UnmintFormProps = { onSubmitForm: (values: UnmintFormValues) => void findRedemptionWallet: ( amount: string, @@ -235,7 +236,7 @@ type UnmitnFormProps = { ) => Promise } & UnmintFormBaseProps -const UnmintForm = withFormik({ +const UnmintForm = withFormik({ mapPropsToValues: () => ({ amount: "", btcAddress: "", @@ -298,7 +299,7 @@ export const UnmintPageLayout: PageComponent = ({}) => { ) : ( )} 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/pages/tBTC/Explorer/index.tsx b/src/pages/tBTC/Explorer/index.tsx index ba2c98fd2..493e766ab 100644 --- a/src/pages/tBTC/Explorer/index.tsx +++ b/src/pages/tBTC/Explorer/index.tsx @@ -157,6 +157,7 @@ const HistoryRow: FC = ({ txHash, address, amount, date }) => { key={`latest-mints-${txHash}`} _odd={{ backgroundColor: "gray.50" }} sx={{ td: { borderBottom: "none" } }} + transform="scale(1)" > 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 => {