From 7e0b308ed33d2502ca23765052fd39d15effb1cf Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Wed, 2 Jul 2025 22:45:16 +1200 Subject: [PATCH] [BuyWidget] Handle very large numbers in FundWallet component --- .changeset/legal-fans-enjoy.md | 5 ++ .../src/react/web/ui/Bridge/FundWallet.tsx | 7 +-- .../web/ui/Bridge/common/TokenAndChain.tsx | 4 +- .../thirdweb/src/utils/format-number.test.ts | 51 ++++++++++++++++++- packages/thirdweb/src/utils/formatNumber.ts | 40 +++++++++++++++ 5 files changed, 101 insertions(+), 6 deletions(-) create mode 100644 .changeset/legal-fans-enjoy.md diff --git a/.changeset/legal-fans-enjoy.md b/.changeset/legal-fans-enjoy.md new file mode 100644 index 00000000000..a1df23fb5b2 --- /dev/null +++ b/.changeset/legal-fans-enjoy.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Handle very large numbers in BuyWidget diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx index 15a6f64df4c..297dce875a5 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx @@ -3,6 +3,7 @@ import { useRef, useState } from "react"; import type { Token } from "../../../../bridge/types/Token.js"; import type { ThirdwebClient } from "../../../../client/client.js"; import { type Address, getAddress } from "../../../../utils/address.js"; +import { numberToPlainString } from "../../../../utils/formatNumber.js"; import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js"; import { fontSize, @@ -112,9 +113,9 @@ export function FundWallet({ // Convert USD amount to token amount using token price const tokenAmount = usdAmount / uiOptions.destinationToken.priceUsd; // Format to reasonable decimal places (up to 6 decimals, remove trailing zeros) - const formattedAmount = Number.parseFloat( - tokenAmount.toFixed(6), - ).toString(); + const formattedAmount = numberToPlainString( + Number.parseFloat(tokenAmount.toFixed(6)), + ); setAmount(formattedAmount); }; diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx index a8b32108383..a8b7b1e2de1 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx @@ -138,10 +138,10 @@ function TokenIconWithFallback(props: { border: `1px solid ${theme.colors.borderColor}`, borderRadius: "50%", display: "flex", - height: `${iconSize.md}px`, + height: `${iconSize[props.size]}px`, justifyContent: "center", padding: spacing.xs, - width: `${iconSize.md}px`, + width: `${iconSize[props.size]}px`, }} > { // no decimals @@ -27,3 +27,52 @@ test("formatNumber", () => { expect(formatNumber(0.00000000000009, 3)).toEqual(0.001); expect(formatNumber(0.00000000000001, 3)).toEqual(0.001); }); + +test("numberToPlainString", () => { + // Numbers without exponential notation (should return as-is) + expect(numberToPlainString(123)).toEqual("123"); + expect(numberToPlainString(0.123)).toEqual("0.123"); + expect(numberToPlainString(0)).toEqual("0"); + expect(numberToPlainString(-456)).toEqual("-456"); + expect(numberToPlainString(-0.789)).toEqual("-0.789"); + + // Small numbers with negative exponents + expect(numberToPlainString(1e-1)).toEqual("0.1"); + expect(numberToPlainString(1e-2)).toEqual("0.01"); + expect(numberToPlainString(1e-3)).toEqual("0.001"); + expect(numberToPlainString(1.23e-4)).toEqual("0.000123"); + expect(numberToPlainString(1.2345e-6)).toEqual("0.0000012345"); + expect(numberToPlainString(5e-10)).toEqual("0.0000000005"); + expect(numberToPlainString(-5e-10)).toEqual("-0.0000000005"); + + // Large numbers with positive exponents - zerosNeeded >= 0 + expect(numberToPlainString(1e1)).toEqual("10"); + expect(numberToPlainString(1e2)).toEqual("100"); + expect(numberToPlainString(1.23e3)).toEqual("1230"); + expect(numberToPlainString(1.23e5)).toEqual("123000"); + expect(numberToPlainString(5.67e10)).toEqual("56700000000"); + + // Large numbers with positive exponents - zerosNeeded < 0 (decimal point insertion) + expect(numberToPlainString(1.2345e2)).toEqual("123.45"); + expect(numberToPlainString(1.23e1)).toEqual("12.3"); + expect(numberToPlainString(9.876e2)).toEqual("987.6"); + expect(numberToPlainString(1.23456e3)).toEqual("1234.56"); + expect(numberToPlainString(5.4321e1)).toEqual("54.321"); + + // Edge cases where exponent equals decimal length + expect(numberToPlainString(1.23e2)).toEqual("123"); + expect(numberToPlainString(1.234e3)).toEqual("1234"); + + // Negative numbers + expect(numberToPlainString(-1.2345e2)).toEqual("-123.45"); + expect(numberToPlainString(-1.23e-4)).toEqual("-0.000123"); + + // Very large numbers (JavaScript precision limits apply) + expect(numberToPlainString(1.0523871386385944e21)).toEqual( + "1052387138638594400000", + ); + + // Numbers that would normally show exponential notation + expect(numberToPlainString(0.0000001)).toEqual("0.0000001"); + expect(numberToPlainString(10000000)).toEqual("10000000"); +}); diff --git a/packages/thirdweb/src/utils/formatNumber.ts b/packages/thirdweb/src/utils/formatNumber.ts index 4506812fc00..94a2e270cbb 100644 --- a/packages/thirdweb/src/utils/formatNumber.ts +++ b/packages/thirdweb/src/utils/formatNumber.ts @@ -14,3 +14,43 @@ export function formatNumber(value: number, decimalPlaces: number) { const fn: "ceil" | "round" = value < threshold ? "ceil" : "round"; return Math[fn]((value + Number.EPSILON) * precision) / precision; } + +/** + * Convert a number to a plain string, removing exponential notation + * @internal + */ +export function numberToPlainString(num: number) { + const str = num.toString(); + + // If no exponential notation, return as-is + if (str.indexOf("e") === -1) { + return str; + } + + // Parse exponential notation + const [rawCoeff, rawExp = "0"] = str.split("e"); + const exponent = parseInt(rawExp, 10); + // Separate sign and absolute coefficient + const sign = rawCoeff?.startsWith("-") ? "-" : ""; + const coefficient = rawCoeff?.replace(/^[-+]/, "") || ""; + // Handle negative exponents (small numbers) + if (exponent < 0) { + const zeros = "0".repeat(Math.abs(exponent) - 1); + const digits = coefficient.replace(".", ""); + return `${sign}0.${zeros}${digits}`; + } + + // Handle positive exponents (large numbers) + const [integer, decimal = ""] = coefficient?.split(".") || []; + const zerosNeeded = exponent - decimal.length; + + if (zerosNeeded >= 0) { + return `${integer}${decimal}${"0".repeat(zerosNeeded)}`; + } else { + // When exponent < decimal.length, we need to insert decimal point + // at the correct position: integer.length + exponent + const insertAt = (integer?.length ?? 0) + exponent; + const result = integer + decimal; + return `${result.slice(0, insertAt)}.${result.slice(insertAt)}`; + } +}