diff --git a/.changeset/afraid-emus-relate.md b/.changeset/afraid-emus-relate.md new file mode 100644 index 000000000..8a0a761b4 --- /dev/null +++ b/.changeset/afraid-emus-relate.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': minor +--- + +Fix token amount overflow on success screen diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx index e1037e675..d7a13e780 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx +++ b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx @@ -20,7 +20,7 @@ import { useRelayClient } from '../../../../hooks/index.js' import { faClockFour } from '@fortawesome/free-solid-svg-icons/faClockFour' import type { Execute } from '@reservoir0x/relay-sdk' import { bitcoin } from '../../../../utils/bitcoin.js' -import { formatBN } from '../../../../utils/numbers.js' +import { formatBN, formatToSignificantDigits } from '../../../../utils/numbers.js' import { TransactionsByChain } from './TransactionsByChain.js' import { faArrowRight } from '@fortawesome/free-solid-svg-icons' @@ -62,10 +62,13 @@ export const SwapSuccessStep: FC = ({ const isUnwrap = details?.operation === 'unwrap' const _fromAmountFormatted = transaction?.data?.metadata?.currencyIn?.amount - ? formatBN( - transaction?.data?.metadata?.currencyIn?.amount, - 5, - transaction?.data?.metadata?.currencyIn?.currency?.decimals ?? 18 + ? formatToSignificantDigits( + formatBN( + transaction?.data?.metadata?.currencyIn?.amount, + 20, + transaction?.data?.metadata?.currencyIn?.currency?.decimals ?? 18, + false + ) ) : fromAmountFormatted const _fromToken = @@ -74,10 +77,13 @@ export const SwapSuccessStep: FC = ({ transaction?.data?.metadata?.currencyIn?.currency?.metadata?.logoURI ?? fromToken?.logoURI const _toAmountFormatted = transaction?.data?.metadata?.currencyOut?.amount - ? formatBN( - transaction?.data?.metadata?.currencyOut?.amount, - 5, - transaction?.data?.metadata?.currencyOut?.currency?.decimals ?? 18 + ? formatToSignificantDigits( + formatBN( + transaction?.data?.metadata?.currencyOut?.amount, + 20, + transaction?.data?.metadata?.currencyOut?.currency?.decimals ?? 18, + false + ) ) : toAmountFormatted const _toToken = transaction?.data?.metadata?.currencyOut?.currency ?? toToken @@ -112,10 +118,13 @@ export const SwapSuccessStep: FC = ({ transaction?.data?.metadata?.currencyGasTopup?.currency const formattedGasTopUpAmount = transaction?.data?.metadata?.currencyGasTopup ?.amount - ? formatBN( - BigInt(transaction?.data?.metadata?.currencyGasTopup?.amount), - 5, - gasTopUpAmountCurrency?.decimals ?? 18 + ? formatToSignificantDigits( + formatBN( + BigInt(transaction?.data?.metadata?.currencyGasTopup?.amount), + 20, + gasTopUpAmountCurrency?.decimals ?? 18, + false + ) ) : undefined diff --git a/packages/ui/src/utils/numbers.ts b/packages/ui/src/utils/numbers.ts index f8b117fba..b7a1ce99d 100644 --- a/packages/ui/src/utils/numbers.ts +++ b/packages/ui/src/utils/numbers.ts @@ -240,10 +240,29 @@ function formatFixedLength(amount: string, maxLength: number) { return result } +/** + * Formats a number to show a specified number of significant digits + * @param amount The number to format (string, number, or bigint) + * @param significantDigits The number of significant digits to show (defaults to 6) + * @returns A string representation with the specified significant digits + */ +function formatToSignificantDigits(amount: string | number | bigint, significantDigits: number = 6): string { + if (amount === null || amount === undefined) return '-' + + const num = typeof amount === 'string' ? parseFloat(amount) : Number(amount) + + if (num === 0 || isNaN(num)) return '0' + + const formatted = num.toPrecision(significantDigits) + + return formatted.replace(/\.?0+$/, '').replace(/\.?0+e/, 'e') +} + export { formatDollar, formatBN, formatFixedLength, formatNumber, + formatToSignificantDigits, truncateBalance }