Merge branch 'dev' into feat/chain-page-details

public/locales/en/common.json

@@ -11,7 +11,8 @@
       "nativeToken": "Native token",
       "tvl": "TVL - L1",
       "type": "Type",
-      "search": "Search by chain name or id..."
+      "search": "Search by chain name or id...",
+      "notFound": "Chain not found"
     }
   },
   "CHAIN": {

public/locales/es/common.json

@@ -11,7 +11,8 @@
       "nativeToken": "Token nativo",
       "tvl": "TVL - L1",
       "type": "Tipo",
-      "search": "Buscar por nombre o ID de la cadena..."
+      "search": "Buscar por nombre o ID de la cadena...",
+      "notFound": "Cadena no encontrada"
     }
   },
   "CHAIN": {

src/components/NotFound.tsx

@@ -0,0 +1,11 @@
+interface NotFoundProps {
+  text: string;
+}
+
+export const NotFound = ({ text }: NotFoundProps) => {
+  return (
+    <div>
+      <p>{text}</p>
+    </div>
+  );
+};

src/components/Table.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 
 import { EcosystemChainData } from '~/types';
+import { formatDataNumber } from '~/utils';
 
 interface TableProps {
   chains: EcosystemChainData[];
@@ -31,7 +32,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/components/index.ts

@@ -11,3 +11,4 @@ export * from './FeeParams';
 export * from './RPC';
 export * from './TVL';
 export * from './ChainInformation';
+export * from './NotFound';

src/containers/Dashboard/index.tsx

@@ -1,31 +1,40 @@
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { SearchBar, Table, Title } from '~/components';
+import { NotFound, SearchBar, Table, Title } from '~/components';
 import { useData } from '~/hooks';
 
 export const Dashboard = () => {
   const { t } = useTranslation();
   const { ecosystemData } = useData();
   const [searchTerm, setSearchTerm] = useState<string>('');
 
+  const filteredChains = ecosystemData?.chains.filter((chain) => {
+    const chainIdStr = String(chain.id);
+    const formattedSearchTerm = String(searchTerm).toLowerCase();
+
+    // Check if either chain name or chain ID matches the search term
+    const matchesName = chain.name.toLowerCase().includes(formattedSearchTerm);
+    const matchesId = chainIdStr.includes(formattedSearchTerm);
+
+    return matchesName || matchesId;
+  });
+
+  const availableChains = filteredChains?.length > 0;
+
   const handleChange = (value: string) => {
     setSearchTerm(value);
   };
 
-  // Filter chains based on search term
-  const filteredChains = ecosystemData?.chains.filter((chain) =>
-    chain.name.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
   return (
     <section>
       <header>
         <Title title={t('HOME.DASHBOARD.title')} />
         <SearchBar value={searchTerm} onChange={handleChange} />
       </header>
 
-      <Table chains={filteredChains} />
+      {availableChains && <Table chains={filteredChains} />}
+      {!availableChains && <NotFound text={t('HOME.DASHBOARD.notFound')} />}
     </section>
   );
 };

src/containers/LockedAssets/index.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'next-i18next';
 
 import { TotalValueLocked, Title } from '~/components';
 import { useData } from '~/hooks';
+import { formatDataNumber } from '~/utils';
 
 export const LockedAssets = () => {
   const { t } = useTranslation();
@@ -11,7 +12,7 @@ export const LockedAssets = () => {
     <section>
       {ecosystemData && (
         <>
-          <Title title={`${t('HOME.lockedAssets')}: ${ecosystemData.total}`} />
+          <Title title={`${t('HOME.lockedAssets')}: ${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

@@ -4,4 +4,46 @@ export const truncateAddress = (address: string) => {
 
 export const formatTimestampToDate = (timestamp: number): string => {
   return new Date(timestamp * 1000).toLocaleDateString();
+
+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+$/, '');
 };