Merge pull request #523 from noviulian/main

add filter by service in support chains component

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,

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 = () => (
+//   <GenericTable data={chainData} headers={headers} />
+// );
+
+// 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 = () => (
-  <GenericTable data={chainData} headers={headers} />
-);
+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 (
+    <div>
+      {showDropdown && (
+        <select
+          className={styles.serviceSelect}
+          value={service}
+          onChange={handleServiceChange}
+        >
+          <option value="">All Services</option>
+          <option value="web3api">Web3 API</option>
+          <option value="streamsapi">Streams API</option>
+          <option value="authapi">Auth API</option>
+          <option value="rpc">RPC Nodes</option>
+        </select>
+      )}
+      <GenericTable data={getFilteredData()} headers={getHeaders()} />
+    </div>
+  );
+};
 
 export default EVMChainsCombined;

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 */
-  }
-
+  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;
+}