diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 5451f12..58bc09c 100644
--- a/public/locales/en/common.json
+++ b/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": {
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 6c8e324..f85b9a8 100644
--- a/public/locales/es/common.json
+++ b/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": {
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..358cdd8
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,11 @@
+interface NotFoundProps {
+ text: string;
+}
+
+export const NotFound = ({ text }: NotFoundProps) => {
+ return (
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index e2912ee..7657955 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,3 +6,4 @@ export * from './SearchBar';
export * from './TotalValueLocked';
export * from './Title';
export * from './TitleBanner';
+export * from './NotFound';
diff --git a/src/containers/Dashboard/index.tsx b/src/containers/Dashboard/index.tsx
index eb023e4..8410897 100644
--- a/src/containers/Dashboard/index.tsx
+++ b/src/containers/Dashboard/index.tsx
@@ -1,7 +1,7 @@
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 = () => {
@@ -9,15 +9,23 @@ export const Dashboard = () => {
const { ecosystemData } = useData();
const [searchTerm, setSearchTerm] = useState('');
+ 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 (
@@ -25,7 +33,8 @@ export const Dashboard = () => {
-
+ {availableChains && }
+ {!availableChains && }
);
};