[SDK] Handle very large numbers in BuyWidget component (#7503)

Author: joaquim-verges

.changeset/legal-fans-enjoy.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle very large numbers in BuyWidget

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);
   };
 

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`,
       }}
     >
       <Text

packages/thirdweb/src/utils/format-number.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { formatNumber } from "./formatNumber.js";
+import { formatNumber, numberToPlainString } from "./formatNumber.js";
 
 test("formatNumber", () => {
   // 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");
+});

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)}`;
+  }
+}