[BuyWidget] Handle very large numbers in FundWallet component

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

@@ -112,9 +112,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 = toPlainString(
+      Number.parseFloat(tokenAmount.toFixed(6)),
+    );
     setAmount(formattedAmount);
   };
 
@@ -341,3 +341,36 @@ export function FundWallet({
     </WithHeader>
   );
 }
+
+function toPlainString(num: number) {
+  const str = num.toString();
+
+  // If no exponential notation, return as-is
+  if (str.indexOf("e") === -1) {
+    return str;
+  }
+
+  // Parse exponential notation
+  const parts = str.split("e");
+  const coefficient = parts[0];
+  const exponent = parseInt(parts[1] ?? "0");
+
+  // Handle negative exponents (small numbers)
+  if (exponent < 0) {
+    const zeros = "0".repeat(Math.abs(exponent) - 1);
+    const digits = coefficient?.replace(".", "") || "";
+    return `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 {
+    const insertAt = (integer?.length ?? 0) + zerosNeeded;
+    const result = integer + decimal;
+    return `${result.slice(0, insertAt)}.${result.slice(insertAt)}`;
+  }
+}

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