From ff3cc86a1703ff8fc40d98300305fb95d8b948dc Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 16 Aug 2024 11:32:57 +0200 Subject: [PATCH] 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. --- .../StakeFormModal/StakeDetails.tsx | 4 ++-- .../UnstakeFormModal/UnstakeDetails.tsx | 1 + .../FeesTooltip/FeesTooltipItem.tsx | 1 + .../shared/CurrencyBalance/index.tsx | 8 ++++---- dapp/src/constants/currency.ts | 1 - dapp/src/utils/numbers.ts | 19 +++++++++++-------- 6 files changed, 19 insertions(+), 15 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/StakeDetails.tsx index 0b65197ca..bc236151b 100644 --- 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 index 1fb5344de..a31cd23b8 100644 --- 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 index efa995f0d..e8a4b83e4 100644 --- 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} /> diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx index 502e9c186..1e05004a4 100644 --- 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 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 ( diff --git a/dapp/src/constants/currency.ts b/dapp/src/constants/currency.ts index db51cdcf7..6c82e4f42 100644 --- 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 index d61ab1c59..6e37be3ad 100644 --- 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,7 +56,7 @@ export const formatTokenAmount = ( amount: number | string | bigint, decimals = 18, desiredDecimals = 2, - ceilPrecision = desiredDecimals, + withRoundUp = false, ) => { const fixedPoint = BigInt(amount) @@ -60,15 +64,11 @@ export const formatTokenAmount = ( 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) @@ -76,7 +76,10 @@ export const formatTokenAmount = ( 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 = (