diff --git a/docs/05-supported-chains/overview.mdx b/docs/05-supported-chains/overview.mdx
index f348063b..dbdb8fc6 100644
--- a/docs/05-supported-chains/overview.mdx
+++ b/docs/05-supported-chains/overview.mdx
@@ -6,22 +6,6 @@ hide_sidebar: true
hide_table_of_contents: true
---
-import {
- EVMChainData,
- EVMStreamChainData,
- EVMAuthChainData,
- EVMRpcChainData,
-} from "@site/src/components/SupportedChains";
-import {
- SolanaChainData,
- SolanaStreamChainData,
- SolanaAuthChainData,
-} from "@site/src/components/SupportedChains";
-import {
- AptosChainData,
- AptosStreamsChainData,
- AptosAuthChainData,
-} from "@site/src/components/SupportedChains";
import {
EVMChainsCombined,
SolanaCombined,
diff --git a/src/components/SupportedChains/EVM/combined/index.tsx b/src/components/SupportedChains/EVM/combined/index.tsx
index 41f0c24c..98130fbc 100644
--- a/src/components/SupportedChains/EVM/combined/index.tsx
+++ b/src/components/SupportedChains/EVM/combined/index.tsx
@@ -1,20 +1,122 @@
-import React from "react";
+// import React from "react";
+// import chainData from "../../../../../docs/configs/api-reference/evmChainData";
+// import GenericTable from "../../Utils/ChainTable";
+
+// const headers = [
+// { key: "name", label: "Name" },
+// { key: "type", label: "Type" },
+// { key: "chainID", label: "Chain ID" },
+// { key: "evmChain", label: "EvmChain" },
+// { key: "evmApi", label: "EVM API" },
+// { key: "streamsApi", label: "Streams API" },
+// { key: "rpcNodes", label: "RPC Nodes" },
+// { key: "authApi", label: "Auth API" },
+// ];
+
+// const EVMChainsCombined = () => (
+//
+// );
+
+// export default EVMChainsCombined;
+
+import React, { useState, useEffect } from "react";
+import { useLocation } from "@docusaurus/router";
import chainData from "../../../../../docs/configs/api-reference/evmChainData";
import GenericTable from "../../Utils/ChainTable";
+import styles from "../../tabsStyles.module.css";
-const headers = [
+const baseHeaders = [
{ key: "name", label: "Name" },
{ key: "type", label: "Type" },
{ key: "chainID", label: "Chain ID" },
{ key: "evmChain", label: "EvmChain" },
+];
+
+const serviceHeaders = {
+ web3api: { key: "evmApi", label: "EVM API" },
+ streamsapi: { key: "streamsApi", label: "Streams API" },
+ authapi: { key: "authApi", label: "Auth API" },
+ rpc: { key: "rpcNodes", label: "RPC Nodes" },
+};
+
+const allHeaders = [
+ ...baseHeaders,
{ key: "evmApi", label: "EVM API" },
{ key: "streamsApi", label: "Streams API" },
- { key: "rpcNodes", label: "RPC Nodes" },
{ key: "authApi", label: "Auth API" },
+ { key: "rpcNodes", label: "RPC Nodes" },
];
-const EVMChainsCombined = () => (
-
-);
+const EVMChainsCombined = () => {
+ const [service, setService] = useState("");
+ const [list, setList] = useState("");
+ const location = useLocation();
+
+ useEffect(() => {
+ const params = new URLSearchParams(location.search);
+ const listParam = params.get("list");
+ const serviceParam = params.get("service");
+
+ setList(listParam || "");
+
+ if (!listParam || listParam === "evm") {
+ setService(serviceParam || "");
+ } else {
+ setService("");
+ }
+ }, [location]);
+
+ const getHeaders = () => {
+ if (!service) return allHeaders;
+ return [...baseHeaders, serviceHeaders[service]];
+ };
+
+ const getFilteredData = () => {
+ if (!service) return chainData;
+ return chainData.filter(
+ (chain) => chain[serviceHeaders[service].key]?.supported
+ );
+ };
+
+ const handleServiceChange = (event) => {
+ const newService = event.target.value;
+ setService(newService);
+ const searchParams = new URLSearchParams(location.search);
+ if (newService) {
+ searchParams.set("service", newService);
+ } else {
+ searchParams.delete("service");
+ }
+ if (list === "evm") {
+ searchParams.set("list", "evm");
+ }
+ window.history.pushState(
+ {},
+ "",
+ `${location.pathname}?${searchParams.toString()}`
+ );
+ };
+
+ const showDropdown = !list || list === "evm";
+
+ return (
+
+ {showDropdown && (
+
+ )}
+
+
+ );
+};
export default EVMChainsCombined;
diff --git a/src/components/SupportedChains/tabsStyles.module.css b/src/components/SupportedChains/tabsStyles.module.css
index c8da63b2..3985b7b0 100644
--- a/src/components/SupportedChains/tabsStyles.module.css
+++ b/src/components/SupportedChains/tabsStyles.module.css
@@ -1,20 +1,29 @@
/* Parent Tabs */
.parentTab {
- color: #007acc; /* Change this to your desired color for parent tabs */
- font-weight: bold;
- }
- .parentTab[aria-selected='true'] {
- border-bottom-color: #007acc; /* Underline color for active parent tab */
- }
-
- /* Child Tabs */
- .childTab {
- color: #555; /* Darker text for child tabs */
- font-weight: normal;
- padding-top: 0%;
- padding-bottom: 0%;
- }
- .childTab[aria-selected='true'] {
- border-bottom-color: #555; /* Underline color for active child tab */
- }
-
\ No newline at end of file
+ color: #007acc; /* Change this to your desired color for parent tabs */
+ font-weight: bold;
+}
+.parentTab[aria-selected="true"] {
+ border-bottom-color: #007acc; /* Underline color for active parent tab */
+}
+
+/* Child Tabs */
+.childTab {
+ color: #555; /* Darker text for child tabs */
+ font-weight: normal;
+ padding-top: 0%;
+ padding-bottom: 0%;
+}
+.childTab[aria-selected="true"] {
+ border-bottom-color: #555; /* Underline color for active child tab */
+}
+
+.serviceSelect {
+ background: #f7f7f7;
+ padding: 8px 20px;
+ border-radius: 3px;
+ text-align: left;
+ margin-bottom: 15px;
+ border: 1px solid #d9ddde;
+ cursor: pointer;
+}