Scr 222 remove comma in decimals

apps/bridge/src/components/ConnectWallet.tsx

@@ -6,11 +6,15 @@ import StateContext from "@providers/stateContext";
 
 import { useAccount, useConnect, useDisconnect, useNetwork } from "wagmi";
 
-import { truncateAddress } from "@utils/formatStrings";
 import { CHAINS, L1_CHAIN_ID, L2_CHAIN_ID } from "@config/constants";
 
 import Avatar from "@mantle/ui/src/presentational/Avatar";
-import { ArrowDownIcon, Button, WalletModal } from "@mantle/ui";
+import {
+  ArrowDownIcon,
+  Button,
+  WalletModal,
+  truncateAddress,
+} from "@mantle/ui";
 import { BiError } from "react-icons/bi";
 
 import { useIsChainID } from "@hooks/web3/read/useIsChainID";

apps/bridge/src/components/bridge/TokenSelect.tsx

@@ -16,9 +16,9 @@ import {
   L1_CHAIN_ID,
   L2_CHAIN_ID,
 } from "@config/constants";
-import { localeZero, formatBigNumberString } from "@utils/formatStrings";
+import { localeZero } from "@utils/formatStrings";
 import { formatUnits, parseUnits } from "ethers/lib/utils.js";
-
+import { formatBigNumberString } from "@mantle/ui";
 import DirectionLabel from "@components/bridge/utils/DirectionLabel";
 import { MantleLogo } from "@components/bridge/utils/MantleLogo";
 import KindReminder from "@components/bridge/utils/KindReminder";

apps/bridge/src/components/bridge/TransactionPanel.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 
 import StateContext from "@providers/stateContext";
 
-import { Typography } from "@mantle/ui";
+import { Typography, formatBigNumberString } from "@mantle/ui";
 
 import {
   Direction,
@@ -15,11 +15,7 @@ import {
 
 import { formatEther, formatUnits, parseUnits } from "ethers/lib/utils.js";
 import { BigNumber, constants } from "ethers";
-import {
-  localeZero,
-  formatBigNumberString,
-  formatTime,
-} from "@utils/formatStrings";
+import { localeZero, formatTime } from "@utils/formatStrings";
 import { useIsChainID } from "@hooks/web3/read/useIsChainID";
 import { useMantleSDK } from "@providers/mantleSDKContext";
 import { useQuery } from "wagmi";

apps/bridge/src/components/bridge/utils/TxLink.tsx

@@ -1,5 +1,5 @@
 import { CHAINS } from "@config/constants";
-import { truncateAddress } from "@utils/formatStrings";
+import { truncateAddress } from "@mantle/ui/src/formatString";
 
 // a link to the networks block explorer
 export default function TxLink({

apps/bridge/src/utils/formatStrings.ts

@@ -1,60 +1,12 @@
 "use client";
 
-import Decimal from "decimal.js";
-
 export const localeZero = new Intl.NumberFormat(
   globalThis.navigator?.language || "en",
   {
     minimumFractionDigits: 1,
   }
 ).format(Number("0.0"));
 
-export const formatBigNumberString = (
-  str: string,
-  precision = 6,
-  groupingInt = true,
-  groupingFrac = true,
-  locale = globalThis.navigator?.language || "en"
-) => {
-  const integerPart = BigInt(str.split(".")[0] || 0);
-  const fractionPart = new Decimal(
-    `0.${str?.split(".")?.[1]?.slice(0, precision) || 0}`
-  )
-    .toFixed(precision)
-    .toString()
-    .replace(/^0|0+$/g, "")
-    .replace(/^([^0-9])$/, "$10");
-
-  // format according to the given locale
-  const mainFormatInt = new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 0,
-    useGrouping: groupingInt,
-  });
-  // format according to the given locale
-  const mainFormatFrac = new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 0,
-    useGrouping: groupingFrac,
-  });
-
-  // construct a template to pull locales decimal seperator
-  const template = mainFormatInt.format(1.1);
-
-  // reconnect the number parts and place templates seperator
-  return `${mainFormatInt.format(integerPart)}${template[1]}${mainFormatFrac
-    .format(
-      (fractionPart.length === 1 ? `${fractionPart}0` : fractionPart)
-        .split("")
-        .reverse()
-        .join("") as unknown as number
-    )
-    .split("")
-    .reverse()
-    .join("")}`;
-};
-
-export const truncateAddress = (address: `0x${string}`) =>
-  `${address.slice(0, 6)}...${address.slice(-4)}`;
-
 // format a given time into a nice representation
 export const formatTime = (
   seconds: number,

apps/converter/src/components/ConnectWallet.tsx

@@ -8,11 +8,15 @@ import StateContext from "@providers/stateContext";
 import { useAccount, useConnect, useDisconnect, useNetwork } from "wagmi";
 import { InjectedConnector } from "wagmi/connectors/injected";
 
-import { truncateAddress } from "@utils/formatStrings";
 import { CHAINS, L1_CHAIN_ID } from "@config/constants";
 
 import Avatar from "@mantle/ui/src/presentational/Avatar";
-import { ArrowDownIcon, Button, WalletModal } from "@mantle/ui";
+import {
+  ArrowDownIcon,
+  Button,
+  WalletModal,
+  truncateAddress,
+} from "@mantle/ui";
 import { BiError } from "react-icons/bi";
 
 import { useIsChainID } from "@hooks/web3/read/useIsChainID";

apps/converter/src/components/converter/From.tsx

@@ -4,11 +4,10 @@ import StateContext from "@providers/stateContext";
 import Image from "next/image";
 
 import { L1_BITDAO_TOKEN } from "@config/constants";
-import { formatBigNumberString } from "@utils/formatStrings";
+import { formatBigNumberString, Button } from "@mantle/ui";
 import { formatUnits, parseUnits } from "ethers/lib/utils.js";
 
 import BalanceLabel from "@components/converter/utils/BalanceLabel";
-import { Button } from "@mantle/ui";
 import { MantleLogo } from "./utils/MantleLogo";
 
 export default function TokenSelect() {
@@ -280,7 +279,10 @@ export default function TokenSelect() {
                 )
                   ? "0.0"
                   : formatBigNumberString(
-                      balances?.[L1_BITDAO_TOKEN.address]
+                      balances?.[L1_BITDAO_TOKEN.address],
+                      L1_BITDAO_TOKEN.decimals,
+                      true,
+                      false
                     ) || "0.0"
               }${" "}${L1_BITDAO_TOKEN.symbol}`}
             />

apps/converter/src/components/converter/To.tsx

@@ -9,7 +9,7 @@ import BalanceLabel from "@components/converter/utils/BalanceLabel";
 import { formatUnits, parseUnits } from "ethers/lib/utils.js";
 import { useContext, useMemo } from "react";
 import StateContext from "@providers/stateContext";
-import { formatBigNumberString } from "@utils/formatStrings";
+import { formatBigNumberString } from "@mantle/ui";
 
 export default function Destination() {
   const { amount, balances } = useContext(StateContext);
@@ -36,7 +36,12 @@ export default function Destination() {
               className="max-w-[min(346px,100vw)] truncate"
               title={`${value} MNT`}
             >
-              {formatBigNumberString(value, L1_MANTLE_TOKEN.decimals, false)}
+              {formatBigNumberString(
+                value,
+                L1_MANTLE_TOKEN.decimals,
+                true,
+                false
+              )}
             </div>
             <span className="text-[#C4C4C4] font-bold">MNT</span>
           </div>
@@ -53,8 +58,12 @@ export default function Destination() {
                 parseFloat(balances?.[L1_MANTLE_TOKEN.address] || "")
               )
                 ? "0"
-                : formatBigNumberString(balances?.[L1_MANTLE_TOKEN.address]) ||
-                  "0"
+                : formatBigNumberString(
+                    balances?.[L1_MANTLE_TOKEN.address],
+                    L1_MANTLE_TOKEN.decimals,
+                    true,
+                    false
+                  ) || "0"
             }${" "}${L1_MANTLE_TOKEN.symbol}`}
           />
         </div>

apps/converter/src/components/converter/utils/TxLink.tsx

@@ -1,5 +1,5 @@
 import { CHAINS } from "@config/constants";
-import { truncateAddress } from "@utils/formatStrings";
+import { truncateAddress } from "@mantle/ui/src/formatString";
 
 // a link to the networks block explorer
 export default function TxLink({

packages/ui/index.tsx

@@ -71,8 +71,15 @@ export * from './src/fonts/ThemeFonts'
  */
 export { LocaleSwitcher } from './src/LocaleSwitcher'
 
+/**
+ * Format string utils
+ *
+ */
+export * from './src/formatString'
+
 /**
  * Locale Selector (given a list of locales and the currect selection)
  *
  */
 export { Cookies } from './src/scripts/Cookies'
+

packages/ui/package.json

@@ -30,6 +30,7 @@
     "boring-avatars": "^1.7.0",
     "classnames": "^2.3.2",
     "clsx": "^1.2.1",
+    "decimal.js": "^10.4.3",
     "react-wrap-balancer": "^0.4.0",
     "tailwind-merge": "^1.10.0"
   }

packages/ui/src/formatString.ts

@@ -0,0 +1,49 @@
+'use client'
+
+import Decimal from 'decimal.js'
+
+export const formatBigNumberString = (
+  str: string,
+  precision = 6,
+  groupingInt = true,
+  groupingFrac = true,
+  locale = globalThis.navigator?.language || 'en',
+) => {
+  const integerPart = BigInt(str.split('.')[0] || 0)
+  const fractionPart = new Decimal(
+    `0.${str?.split('.')?.[1]?.slice(0, precision) || 0}`,
+  )
+    .toFixed(precision)
+    .toString()
+    .replace(/^0|0+$/g, '')
+    .replace(/^([^0-9])$/, '$10')
+
+  // format according to the given locale
+  const mainFormatInt = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    useGrouping: groupingInt,
+  })
+  // format according to the given locale
+  const mainFormatFrac = new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 0,
+    useGrouping: groupingFrac,
+  })
+
+  // construct a template to pull locales decimal seperator
+  const template = mainFormatInt.format(1.1)
+
+  // reconnect the number parts and place templates seperator
+  return `${mainFormatInt.format(integerPart)}${template[1]}${mainFormatFrac
+    .format(
+      (fractionPart.length === 1 ? `${fractionPart}0` : fractionPart)
+        .split('')
+        .reverse()
+        .join('') as unknown as number,
+    )
+    .split('')
+    .reverse()
+    .join('')}`
+}
+
+export const truncateAddress = (address: `0x${string}`) =>
+  `${address.slice(0, 6)}...${address.slice(-4)}`