Display BTC and fees in UnmintDetails

Display estimated BTC that will be received and fees in UnmintDetails. Besides that I've added `isEstimated` parameter to `formatTokenAmount` function - it displays the tilde next to the amount no matter the value.
threshold-network · Jul 13, 2023 · 0aad890 · 0aad890
1 parent c729940
commit 0aad890
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 17 deletions.
diff --git a/src/components/Modal/tBTC/InitiateUnminting.tsx b/src/components/Modal/tBTC/InitiateUnminting.tsx
@@ -79,14 +79,15 @@ const InitiateUnmintingBase: FC<InitiateUnmintingProps> = ({
       <ModalBody>
         <InfoBox variant="modal" mb="6">
           <H5>
-            Through unminting you will get back{" ~"}
+            Through unminting you will get back{" "}
             <InlineTokenBalance
               tokenSymbol="BTC"
               tokenDecimals={8}
               precision={6}
               higherPrecision={8}
               tokenAmount={estimatedBTCAmount}
               displayTildeBelow={0}
+              isEstimated
             />{" "}
             BTC
           </H5>

diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx
@@ -31,6 +31,7 @@ export interface TokenBalanceProps {
   precision?: number
   higherPrecision?: number
   displayTildeBelow?: number
+  isEstimated?: boolean
 }
 
 export const InlineTokenBalance: FC<TokenBalanceProps & BoxProps> = ({
@@ -43,6 +44,7 @@ export const InlineTokenBalance: FC<TokenBalanceProps & BoxProps> = ({
   higherPrecision = 6,
   withHigherPrecision,
   displayTildeBelow = 1,
+  isEstimated = false,
   ...restProps
 }) => {
   const _tokenAmount = useMemo(() => {
@@ -51,7 +53,8 @@ export const InlineTokenBalance: FC<TokenBalanceProps & BoxProps> = ({
       tokenFormat,
       tokenDecimals,
       precision,
-      displayTildeBelow
+      displayTildeBelow,
+      isEstimated
     )
   }, [tokenAmount, tokenFormat, tokenDecimals, precision])
 
@@ -60,7 +63,9 @@ export const InlineTokenBalance: FC<TokenBalanceProps & BoxProps> = ({
       tokenAmount || 0,
       tokenFormat,
       tokenDecimals,
-      higherPrecision
+      higherPrecision,
+      1,
+      isEstimated
     )
   }, [tokenAmount, tokenFormat, tokenDecimals, higherPrecision])
 

diff --git a/src/hooks/tbtc/useFetchRedemptionDetails.ts b/src/hooks/tbtc/useFetchRedemptionDetails.ts
@@ -14,6 +14,7 @@ interface RedemptionDetails {
   }
   requestedAt: number
   completedAt?: number
+  treasuryFee: string
   isTimedOut: boolean
   redemptionTimedOutTxHash?: string
   btcAddress?: string
@@ -158,6 +159,7 @@ export const useFetchRedemptionDetails = (
             redemptionCompletedTxHash: undefined,
             requestedAt: requestedAt,
             redemptionTimedOutTxHash: timedOutTxHash,
+            treasuryFee: redemptionRequest.treasuryFee,
             isTimedOut,
           })
           return
@@ -205,6 +207,7 @@ export const useFetchRedemptionDetails = (
               },
               requestedAt: redemptionRequestedEventTimestamp,
               completedAt: redemptionCompletedTimestamp,
+              treasuryFee: redemptionRequest.treasuryFee,
               isTimedOut: false,
               // TODO: convert the `scriptPubKey` to address.
               btcAddress: "2Mzs2YNphdHmBoE7SE77cGB57JBXveNGtae",

diff --git a/src/pages/tBTC/Bridge/UnmintDetails.tsx b/src/pages/tBTC/Bridge/UnmintDetails.tsx
@@ -52,6 +52,7 @@ import { ProcessCompletedBrandGradientIcon } from "./components/BridgeProcessDet
 import { featureFlags } from "../../../constants"
 import { useFetchRedemptionDetails } from "../../../hooks/tbtc/useFetchRedemptionDetails"
 import { BridgeProcessDetailsPageSkeleton } from "./components/BridgeProcessDetailsPageSkeleton"
+import { BigNumber } from "ethers"
 
 const pendingRedemption = {
   redemptionRequestedTxHash:
@@ -95,9 +96,15 @@ export const UnmintDetails: PageComponent = () => {
   }, [btcTxHash])
 
   const isProcessCompleted = !!data?.redemptionCompletedTxHash?.bitcoin
-  const unmintedAmount = data?.amount ?? "0"
+  // requested unmint amount of tBTC in satoshi!. This means that this value is
+  // the amount before subtracting the fees.
+  const unmintAmount = data?.amount ?? "0"
+
+  const thresholdNetworkFee = data?.treasuryFee ?? "0"
+  const estimatedAmountToBeReceived = BigNumber.from(unmintAmount)
+    .sub(thresholdNetworkFee)
+    .toString()
   const btcAddress = data?.btcAddress
-  const fee = "20000000000000000"
   const time = dateAs(
     (data?.completedAt ?? dateToUnixTimestamp()) - (data?.requestedAt ?? 0)
   )
@@ -145,12 +152,15 @@ export const UnmintDetails: PageComponent = () => {
                 </Box>
               )}
               <InlineTokenBalance
-                tokenAmount={unmintedAmount}
+                tokenAmount={estimatedAmountToBeReceived}
                 withSymbol
-                tokenSymbol="tBTC"
+                tokenSymbol="BTC"
                 ml="auto"
                 tokenDecimals={8}
+                precision={6}
+                higherPrecision={8}
                 withHigherPrecision
+                isEstimated
               />
             </BridgeProcessCardSubTitle>
             <Timeline>
@@ -214,8 +224,8 @@ export const UnmintDetails: PageComponent = () => {
             </Timeline>
             {shouldDisplaySuccessStep || isProcessCompleted ? (
               <SuccessStep
-                unmintedAmount={unmintedAmount}
-                thresholdNetworkFee={fee}
+                estimatedAmountToBeReceived={estimatedAmountToBeReceived}
+                thresholdNetworkFee={thresholdNetworkFee}
                 btcAddress={btcAddress!}
               />
             ) : (
@@ -290,27 +300,30 @@ export const UnmintDetails: PageComponent = () => {
 }
 
 const SuccessStep: FC<{
-  unmintedAmount: string
+  estimatedAmountToBeReceived: string
   thresholdNetworkFee: string
   btcAddress: string
-}> = ({ unmintedAmount, thresholdNetworkFee, btcAddress }) => {
+}> = ({ estimatedAmountToBeReceived, thresholdNetworkFee, btcAddress }) => {
   return (
     <>
       <H5 mt="4">Success!</H5>
       <Divider mt="9" mb="4" />
       <List spacing="4">
         <TransactionDetailsAmountItem
           label="Unminted Amount"
-          tokenAmount={unmintedAmount}
-          tokenSymbol="tBTC"
+          tokenAmount={estimatedAmountToBeReceived}
+          tokenSymbol="BTC"
           tokenDecimals={8}
           precision={6}
           higherPrecision={8}
+          withHigherPrecision
+          isEstimated
         />
         <TransactionDetailsAmountItem
           label="Threshold Network Fee"
           tokenAmount={thresholdNetworkFee}
-          tokenSymbol="tBTC"
+          tokenSymbol="BTC"
+          tokenDecimals={8}
           precision={6}
           higherPrecision={8}
         />

diff --git a/src/utils/formatAmount.ts b/src/utils/formatAmount.ts
@@ -11,7 +11,8 @@ export const formatTokenAmount = (
   format = "0,00.[0]0",
   decimals = 18,
   precision = 2,
-  displayTildeBelow = 1
+  displayTildeBelow = 1,
+  isEstimated = false // adds tilde to the amount no matter the value
 ) => {
   const minAmountToDisplay = BigNumber.from(10).pow(decimals - precision)
   const _rawAmount = BigNumber.from(rawAmount)
@@ -39,9 +40,10 @@ export const formatTokenAmount = (
   const amountFromFormattedValue = numeral(formattedAmount).value() ?? 0
 
   if (
-    Number.parseFloat(amountFromFormattedValue.toString()) !==
+    isEstimated ||
+    (Number.parseFloat(amountFromFormattedValue.toString()) !==
       Number.parseFloat(tokenAmountInHumanReadableFormat) &&
-    displayTildeBelow > amountFromFormattedValue
+      displayTildeBelow > amountFromFormattedValue)
   ) {
     return `~${formattedAmount}`
   }