From 13ab22a130792cd98b71ed1bf9e204bda8f2227b Mon Sep 17 00:00:00 2001 From: mswilkison Date: Wed, 26 Jul 2023 09:06:16 -0400 Subject: [PATCH 1/6] remove bridge under construction notice --- src/components/tBTC/TakeNoteList.tsx | 11 ----------- 1 file changed, 11 deletions(-) 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. - - - - ) } From 2a26f76d3733dcb7f00ee63d75ea2ef3f993969a Mon Sep 17 00:00:00 2001 From: Matt Luongo Date: Tue, 25 Jul 2023 13:59:35 -0400 Subject: [PATCH 2/6] s/Unmit/Unmint/g --- src/pages/tBTC/Bridge/Unmint.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/tBTC/Bridge/Unmint.tsx b/src/pages/tBTC/Bridge/Unmint.tsx index a57b424f5..8d1b10d77 100644 --- a/src/pages/tBTC/Bridge/Unmint.tsx +++ b/src/pages/tBTC/Bridge/Unmint.tsx @@ -227,7 +227,7 @@ type UnmintFormValues = { wallet: RedemptionWalletData } -type UnmitnFormProps = { +type UnmintFormProps = { onSubmitForm: (values: UnmintFormValues) => void findRedemptionWallet: ( amount: string, @@ -235,7 +235,7 @@ type UnmitnFormProps = { ) => Promise } & UnmintFormBaseProps -const UnmintForm = withFormik({ +const UnmintForm = withFormik({ mapPropsToValues: () => ({ amount: "", btcAddress: "", @@ -298,7 +298,7 @@ export const UnmintPageLayout: PageComponent = ({}) => { ) : ( )} From 898a68884fc37f8ee4734a5a167a9ccec2800a1d Mon Sep 17 00:00:00 2001 From: michalsmiarowski Date: Mon, 26 Jun 2023 08:57:33 +0200 Subject: [PATCH 3/6] Fix issue with Link Overlay in tBTC Explorer We encountered an issue with the component from chakra-ui while using it in the History table on the tBTC Explorer page. This component was intended to facilitate navigation for each row, directing the user to the corresponding etherscan link. However, we noticed an abnormal behavior specifically on real mobile devices, even though it worked correctly in the mobile view on Chrome. On mobile, the overlay for the last item appeared to cover the entire page. As a result, any other links on the tBTC Explorer page, such as "View on Dune Analytics" or "Start Minting," unintentionally redirected the user to etherscan. The cause of this was that the `LinkBox` component uses `position: relative` to contain the absolute positioned `LinkOverlay`. Unfortunately `` component, which we passed to the `as property, does not allow `position: relative`. As a hacky workaround we are applying `transform: scale(1)` to the tr element. --- src/pages/tBTC/Explorer/index.tsx | 1 + 1 file changed, 1 insertion(+) 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)" > From 1884a6a009c206a2074d3d7bbb182eac95f57993 Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 13:18:38 +0200 Subject: [PATCH 4/6] 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 ad5bf17b46bd8755cfcb3dc7390c9f095eb012eb Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 15:27:58 +0200 Subject: [PATCH 5/6] 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 d5ac3e90169c90f0f1173934d8ef0d150d7ee95c Mon Sep 17 00:00:00 2001 From: Rafal Czajkowski Date: Wed, 26 Jul 2023 16:53:58 +0200 Subject: [PATCH 6/6] 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