feat: improve number formatting

Author: gregfromstl

packages/thirdweb/src/react/web/ui/Bridge/TokenBalanceRow.tsx

@@ -82,7 +82,10 @@ export function TokenBalanceRow({
               whiteSpace: "nowrap",
             }}
           >
-            {`${amount} ${token.symbol}`}
+            {`${Number(amount).toLocaleString(undefined, {
+              maximumFractionDigits: 6,
+              minimumFractionDigits: 0,
+            })} ${token.symbol}`}
           </Text>
         </Container>
       </Container>

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx

@@ -43,7 +43,13 @@ export function FiatValue(
 
   return cryptoToFiatQuery.data?.result ? (
     <Text {...props}>
-      ${formatNumber(cryptoToFiatQuery.data.result, 2).toFixed(2)}
+      $
+      {Number(
+        formatNumber(cryptoToFiatQuery.data.result, 2).toFixed(2),
+      ).toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })}
     </Text>
   ) : null;
 }

packages/thirdweb/src/stories/Bridge/RoutePreview.stories.tsx

@@ -10,7 +10,7 @@ import {
   STORY_MOCK_WALLET,
   buyWithApprovalQuote,
   complexBuyQuote,
-  longTokenNameBuyQuote,
+  longTextBuyQuote,
   onrampWithSwapsQuote,
   simpleBuyQuote,
   simpleOnrampQuote,
@@ -220,10 +220,10 @@ export const BuySimpleLight: Story = {
   },
 };
 
-export const BuyWithLongTokenName: Story = {
+export const BuyWithLongText: Story = {
   args: {
     theme: "dark",
-    preparedQuote: longTokenNameBuyQuote,
+    preparedQuote: longTextBuyQuote,
     paymentMethod: ethCryptoPaymentMethod,
     client: storyClient,
   },

packages/thirdweb/src/stories/Bridge/fixtures.ts

@@ -273,11 +273,11 @@ export const simpleBuyQuote: BridgePrepareResult = JSON.parse(
   }),
 );
 
-export const longTokenNameBuyQuote: BridgePrepareResult = JSON.parse(
+export const longTextBuyQuote: BridgePrepareResult = JSON.parse(
   stringify({
     type: "buy",
     originAmount: 1000000000000000000n, // 1 ETH
-    destinationAmount: 100000000n, // 100 USDC
+    destinationAmount: 1000394284092830482309n,
     timestamp: Date.now(),
     estimatedExecutionTimeMs: 60000,
     steps: [
@@ -303,7 +303,7 @@ export const longTokenNameBuyQuote: BridgePrepareResult = JSON.parse(
             "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png",
         },
         originAmount: 1000000000000000000n,
-        destinationAmount: 100000000n,
+        destinationAmount: 1000394284092830482309n,
         estimatedExecutionTimeMs: 60000,
         transactions: [
           {