commit thousand separator

src/app/get-aura/mobile-table.tsx

@@ -6,6 +6,7 @@ import "./table-mobile.css";
 import carretUp from "@/assets/icons/ic_carret_up.svg";
 import clock from "@/assets/icons/ic_clock.svg";
 import Image from "next/image";
+import { formatNumber } from "../utils/numbers";
 
 interface MobileTableItemProps {
   txTime: string;
@@ -32,7 +33,7 @@ const MobileTableItem: React.FC<props> = ({ tableItem }) => {
             </div>
             <div className="time-and-message">
               <div className="time">
-              <Image src={clock} alt="" height={14} />
+                <Image src={clock} alt="" height={14} />
                 <div className="cell-text2">{dayjs(tableItem.txTime).format("HH:mm:ss DD/MM/YYYY")}</div>
               </div>
             </div>
@@ -46,15 +47,15 @@ const MobileTableItem: React.FC<props> = ({ tableItem }) => {
               setExpand(!expand);
             }}
           >
-            <Image src={carretUp} className={expand ? 'expanded': ''} alt="" height={16} />
+            <Image src={carretUp} className={expand ? "expanded" : ""} alt="" height={16} />
           </div>
         </div>
         {expand && (
           <div className="flex flex-col w-full gap-2">
             <div className="line-18"></div>
             <div className="frame-29708">
               <div className="amount">Amount</div>
-              <div className="_200-aura">{formatUnits(BigInt(tableItem.amount), 18)} AURA</div>
+              <div className="_200-aura">{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA</div>
             </div>
             <div className="frame-29707">
               <div className="cosmos-tx-hash">Cosmos TX hash</div>

src/app/get-aura/table-item.tsx

@@ -2,6 +2,7 @@ import Address from "@/components/address";
 import dayjs from "dayjs";
 import React from "react";
 import { formatUnits } from "viem";
+import { formatNumber } from "../utils/numbers";
 
 interface TableItemProps {
   txTime: string;
@@ -33,7 +34,7 @@ const TableItem: React.FC<props> = ({ tableItem }) => {
           <Address address={tableItem?.depAddress} link={true} ellipsis={true} />
         </div>
         <div className="frame-561">
-          <div className="_20-aura">{formatUnits(BigInt(tableItem?.amount), 18)} AURA</div>
+          <div className="_20-aura">{formatNumber(formatUnits(BigInt(tableItem?.amount), 18))} AURA</div>
         </div>
         <div className="frame-572">
           <div className={tableItem?.status?.toLowerCase()}>{tableItem?.status}</div>

src/app/utils/numbers.ts

@@ -0,0 +1,15 @@
+function formatNumber(amount: number | null | undefined | string, maximumFractionDigits: number = 2, compact?: boolean) {
+  const { format } = new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: maximumFractionDigits,
+    notation: compact ? "compact" : "standard",
+  });
+  if (amount === null || amount === undefined || amount === 0 || amount === "0") {
+    return "-";
+  }
+  if (Number(amount) >= 1000000000) {
+    return "1B";
+  }
+  return format(+amount);
+}
+
+export { formatNumber }