Round the fees up

We're displaying 5 digits of the fees calculated on the deposit/withdrawal form. If the real fee amount has bigger precision we display the amount rounded down. Let's value round up - it's better to show user the bigger value and then subtract less fee in practice than to show them less and subtract slightly more.
thesis · Aug 16, 2024 · ff3cc86 · ff3cc86
1 parent 8054c94
commit ff3cc86
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 15 deletions.
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx
@@ -6,7 +6,7 @@ import { useTokenAmountField } from "#/components/shared/TokenAmountForm/TokenAm
 import { FeesTooltip } from "#/components/TransactionModal/FeesTooltip"
 import { useMinDepositAmount, useTransactionDetails } from "#/hooks"
 import { CurrencyType } from "#/types"
-import { DESIRED_DECIMALS_FOR_FEE, FEE_CEIL_PRECISION } from "#/constants"
+import { DESIRED_DECIMALS_FOR_FEE } from "#/constants"
 
 function StakeDetails({ currency }: { currency: CurrencyType }) {
   const { value = 0n } = useTokenAmountField()
@@ -36,7 +36,7 @@ function StakeDetails({ currency }: { currency: CurrencyType }) {
           currency,
           amount: total,
           desiredDecimals: DESIRED_DECIMALS_FOR_FEE,
-          ceilPrecision: FEE_CEIL_PRECISION,
+          withRoundUp: true,
         }}
         to={{
           currency: "usd",

diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/UnstakeDetails.tsx
@@ -49,6 +49,7 @@ function UnstakeDetails({
             currency,
             amount: total,
             desiredDecimals: DESIRED_DECIMALS_FOR_FEE,
+            withRoundUp: true,
           }}
           to={{
             currency: "usd",

diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
@@ -22,6 +22,7 @@ export function FeesTooltipItem({ label, amount, ...props }: FeesItemType) {
         balanceFontWeight="semibold"
         symbolFontWeight="semibold"
         desiredDecimals={DESIRED_DECIMALS_FOR_FEE}
+        withRoundUp
         {...props}
       />
     </ListItem>

diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx
@@ -16,8 +16,8 @@ export type CurrencyBalanceProps = {
   currency: CurrencyType
   amount?: AmountType
   shouldBeFormatted?: boolean
+  withRoundUp?: boolean
   desiredDecimals?: number
-  ceilPrecision?: number
   size?: ResponsiveValue<string>
   variant?: ResponsiveValue<
     | "greater-balance-md"
@@ -34,8 +34,8 @@ export function CurrencyBalance({
   currency,
   amount,
   shouldBeFormatted = true,
+  withRoundUp = false,
   desiredDecimals: customDesiredDecimals,
-  ceilPrecision,
   size,
   variant,
   balanceFontWeight = "bold",
@@ -60,10 +60,10 @@ export function CurrencyBalance({
   const balance = useMemo(() => {
     const value = amount ?? 0
     if (shouldBeFormatted || typeof value === "bigint")
-      return formatTokenAmount(value, decimals, desiredDecimals, ceilPrecision)
+      return formatTokenAmount(value, decimals, desiredDecimals, withRoundUp)
 
     return numberToLocaleString(value, desiredDecimals)
-  }, [amount, decimals, desiredDecimals, shouldBeFormatted, ceilPrecision])
+  }, [amount, decimals, desiredDecimals, shouldBeFormatted, withRoundUp])
 
   return (
     <Box as={as} __css={styles.container}>

diff --git a/dapp/src/constants/currency.ts b/dapp/src/constants/currency.ts
@@ -2,7 +2,6 @@ import { Currency, CurrencyType } from "#/types"
 import env from "./env"
 
 export const DESIRED_DECIMALS_FOR_FEE = 5
-export const FEE_CEIL_PRECISION = 4
 
 export const BITCOIN: Currency = {
   name: "Bitcoin",

diff --git a/dapp/src/utils/numbers.ts b/dapp/src/utils/numbers.ts
@@ -1,3 +1,7 @@
+export function roundUp(amount: number, desiredDecimals = 2): number {
+  return Math.ceil(amount * 10 ** desiredDecimals) / 10 ** desiredDecimals
+}
+
 export const numberToLocaleString = (
   value: string | number,
   desiredDecimals = 2,
@@ -52,31 +56,30 @@ export const formatTokenAmount = (
   amount: number | string | bigint,
   decimals = 18,
   desiredDecimals = 2,
-  ceilPrecision = desiredDecimals,
+  withRoundUp = false,
 ) => {
   const fixedPoint = BigInt(amount)
 
   if (fixedPoint === 0n) {
     return `0.${"0".repeat(desiredDecimals)}`
   }
 
-  let formattedAmount = bigIntToUserAmount(
+  const formattedAmount = bigIntToUserAmount(
     fixedPoint,
     decimals,
-    desiredDecimals,
+    withRoundUp ? desiredDecimals + 1 : desiredDecimals,
   )
-  if (ceilPrecision !== desiredDecimals) {
-    formattedAmount =
-      Math.ceil(formattedAmount * 10 ** ceilPrecision) / 10 ** ceilPrecision
-  }
 
   const minAmountToDisplay = 1 / 10 ** Math.min(desiredDecimals, decimals)
 
   if (minAmountToDisplay > formattedAmount) {
     return `<0.${"0".repeat(desiredDecimals - 1)}1`
   }
 
-  return numberToLocaleString(formattedAmount, desiredDecimals)
+  const finalFormattedAmount = withRoundUp
+    ? roundUp(formattedAmount, desiredDecimals)
+    : formattedAmount
+  return numberToLocaleString(finalFormattedAmount, desiredDecimals)
 }
 
 export const formatSatoshiAmount = (