Fix token amount overflow on success screen

.changeset/afraid-emus-relate.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': minor
+---
+
+Fix token amount overflow on success screen

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<SwapSuccessStepProps> = ({
   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<SwapSuccessStepProps> = ({
     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<SwapSuccessStepProps> = ({
     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
 

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
 }