feat: format numbers

src/components/SearchBar.tsx

@@ -10,7 +10,7 @@ export const SearchBar = ({ value, onChange }: SearchBarProps) => {
 
   return (
     <form>
-      <input type='text' value={value} onChange={handleChange} placeholder='Search...' />
+      <input type='text' value={value} onChange={handleChange} placeholder='Search chain...' />
     </form>
   );
 };

src/components/Table.tsx

@@ -1,4 +1,5 @@
 import { EcosystemChainData } from '~/types';
+import { formatDataNumber } from '~/utils';
 
 interface TableProps {
   chains: EcosystemChainData[];
@@ -21,7 +22,7 @@ export const Table = ({ chains }: TableProps) => {
             <td>{data.name}</td>
             <td>{data.id}</td>
             <td>{data.nativeToken}</td>
-            <td>{data.tvl}</td>
+            <td>{formatDataNumber(data.tvl, 0, true)}</td>
             <td>{data.type}</td>
           </tr>
         );

src/components/TotalValueLocked.tsx

@@ -1,3 +1,5 @@
+import { formatDataNumber } from '~/utils';
+
 export interface TokenValueLocked {
   token: string;
   value: number;
@@ -13,7 +15,7 @@ export const TotalValueLocked = ({ tvl }: TotalValueLockedProps) => {
       {tvl.map((data, index) => (
         <div key={index}>
           <span>{data.token}</span>
-          <span>{data.value}</span>
+          <span>{formatDataNumber(data.value, 0, true)}</span>
         </div>
       ))}
     </div>

src/containers/LockedAssets/index.tsx

@@ -1,6 +1,6 @@
-import { TotalValueLocked } from '~/components';
-import { Title } from '~/components/Title';
+import { TotalValueLocked, Title } from '~/components';
 import { useData } from '~/hooks';
+import { formatDataNumber } from '~/utils';
 
 export const LockedAssets = () => {
   const { ecosystemData } = useData();
@@ -9,7 +9,7 @@ export const LockedAssets = () => {
     <section>
       {ecosystemData && (
         <>
-          <Title title={`Locked assets in shared bridge: ${ecosystemData.total}`} />
+          <Title title={`Locked assets in shared bridge: ${formatDataNumber(ecosystemData.total, 0, true, true)}`} />
           <TotalValueLocked tvl={ecosystemData.tvl} />
         </>
       )}

src/data/ecosystemMockData.json

@@ -50,7 +50,7 @@
       "type": "Validium"
     }
   ],
-  "total": 7000000,
+  "total": 700000000,
   "tvl": [
     {
       "token": "ETH",

src/utils/format.ts

@@ -1,3 +1,46 @@
 export const truncateAddress = (address: string) => {
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 };
+
+export function formatDataNumber(input: string | number, formatDecimal = 3, currency?: boolean, compact?: boolean) {
+  const res: number = Number.parseFloat(input.toString());
+
+  if (res === 0 || isNaN(res)) return `${currency ? '$0' : '0'}`;
+
+  if (res < 0.01) return formatSmallNumber(res);
+
+  const userNotation = compact ? 'compact' : 'standard';
+  const notation = res > 1e12 ? 'scientific' : userNotation;
+
+  return new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: formatDecimal,
+    notation: notation,
+    style: currency ? 'currency' : 'decimal',
+    currency: 'USD',
+  }).format(res);
+}
+
+export const formatSmallNumber = (value: number) => {
+  if (value === 0) {
+    return '0';
+  }
+
+  const formattedValue = value.toString();
+
+  let numLeadingZeros = 0;
+
+  // Count the leading zeros and decimal point
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (formattedValue[i] === '0' || formattedValue[i] === '.') {
+      numLeadingZeros++;
+    } else {
+      break;
+    }
+  }
+
+  // Return the number with 3 digits after the last leading zero
+  const result = formattedValue.slice(0, numLeadingZeros + 3);
+
+  // Trim any trailing zeros from the result
+  return result.replace(/\.?0+$/, '');
+};