feat: search by id | chain not found

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"
     }
   },
   "CHAINPAGE": {

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"
     }
   },
   "CHAINPAGE": {

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/index.ts

@@ -6,3 +6,4 @@ export * from './SearchBar';
 export * from './TotalValueLocked';
 export * from './Title';
 export * from './TitleBanner';
+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>
   );
 };