feat: developer tools page

docs/network/0-overview.mdx

@@ -272,59 +272,7 @@ Configuration for all Flare networks, along with public and private RPCs, blockc
 ## Community tools
 
 Developer tools for Flare built by the community including RPCs, bridges, indexers, account abstraction, wallet SDKs, and more.
-
-<Tabs block groupId="network">
-  <TabItem value="flare" label="Flare Mainnet" default>
-
-    | RPCs                 | [QuickNode](https://www.quicknode.com/chains/flare), [Ankr](https://www.ankr.com/rpc/flare/), [Thirdweb](https://14.rpc.thirdweb.com), [ChainList<IconExternalLink/>](https://ChainList.org/chain/14)                                                                                                                                                                                                                                                                                                   |
-    | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-    | Bridging             | [LayerZero V2](https://docs.layerzero.network/v2/developers/evm/technical-reference/deployed-contracts#flare), [Stargate V2](https://stargateprotocol.gitbook.io/stargate/v/v2-developer-docs/technical-reference/mainnet-contracts#flare) ([OFTs](https://stargateprotocol.gitbook.io/stargate/v/v2-developer-docs/technical-reference/v2-supported-networks-and-assets#flare)), [zkBridge](https://docs.zkbridge.com/layerzero-zklightclient-configurations/layerzero-v2-zklightclient-dvn-addresses) |
-    | Indexers             | [Goldsky](https://docs.goldsky.com/chains/flare), [SubQuery](https://github.com/subquery/flare-subql-starter/tree/main/Flare/flare-starter), [sqd](https://docs.sqd.dev/subsquid-network/reference/networks/#evm--ethereum-compatible)                                                                                                                                                                                                                                                     |
-    | OAuth Login          | [Web3Auth](https://web3auth.io/docs/connect-blockchain/evm/flare)                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-    | Account Abstraction  | [Etherspot Prime SDK](https://etherspot.fyi/prime-sdk/intro)                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-    | Wallet SDK           | [Wagmi](https://wagmi.sh/react/chains), [RainbowKit](https://www.rainbowkit.com/docs/introduction)                                                                                                                                                                                                                                                                                                                                                                                                      |
-    | Full-stack Dev Infra | [Tenderly](https://tenderly.co)                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-
-  </TabItem>
-
-  <TabItem value="coston2" label="Flare Testnet Coston2">
-
-    |                 RPCs | [QuickNode](https://www.quicknode.com/chains/flare), [Ankr](https://www.ankr.com/rpc/flare/), [Thirdweb](https://114.rpc.thirdweb.com), [ChainList<IconExternalLink/>](https://ChainList.org/chain/114) |
-    | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-    |             Bridging | [LayerZero V2](https://docs.layerzero.network/v2/developers/evm/technical-reference/deployed-contracts#flare-testnet)                                                                                   |
-    |             Indexers | [Goldsky](https://docs.goldsky.com/chains/flare)                                                                                                                                           |
-    |          OAuth Login | [Web3Auth](https://web3auth.io/docs/connect-blockchain/evm/flare)                                                                                                                                       |
-    |  Account Abstraction | [Etherspot Prime SDK](https://etherspot.fyi/prime-sdk/intro)                                                                                                                                            |
-    |           Wallet SDK | [Wagmi](https://wagmi.sh/react/chains), [RainbowKit](https://www.rainbowkit.com/docs/introduction)                                                                                                      |
-    | Full-stack Dev Infra | [Tenderly](https://tenderly.co)                                                                                                                                                                         |
-
-  </TabItem>
-    <TabItem value="songbird" label="Songbird Canary-Network">
-
-    | RPCs                 | [Ankr](https://www.ankr.com/rpc/flare/), [Thirdweb](https://19.rpc.thirdweb.com), [ChainList<IconExternalLink/>](https://ChainList.org/chain/19) |
-    | :------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
-    | Bridging             | -                                                                                                                                                |
-    | Indexers             | [SubQuery](https://github.com/subquery/flare-subql-starter/tree/main/Flare/songbird-starter)                                                     |
-    | OAuth Login          | [Web3Auth](https://web3auth.io/docs/connect-blockchain/evm/songbird/)                                                                            |
-    | Account Abstraction  | -                                                                                                                                                |
-    | Wallet SDK           | [Wagmi](https://wagmi.sh/react/chains), [RainbowKit](https://www.rainbowkit.com/docs/introduction)                                               |
-    | Full-stack Dev Infra | [Tenderly](https://tenderly.co)                                                                                                                  |
-
-  </TabItem>
-  <TabItem value="coston" label="Songbird Testnet Coston">
-
-    | RPCs                 | [Ankr](https://www.ankr.com/rpc/flare/), [Thirdweb](https://16.rpc.thirdweb.com), [ChainList<IconExternalLink/>](https://ChainList.org/chain/16) |
-    | :------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
-    | Bridging             | -                                                                                                                                                |
-    | Indexers             | -                                                                                                                                                |
-    | OAuth Login          | [Web3Auth](https://web3auth.io/docs/connect-blockchain/evm/songbird/)                                                                            |
-    | Account Abstraction  | -                                                                                                                                                |
-    | Wallet SDK           | [Wagmi](https://wagmi.sh/react/chains), [RainbowKit](https://www.rainbowkit.com/docs/introduction)                                               |
-    | Full-stack Dev Infra | [Tenderly](https://tenderly.co)                                                                                                                  |
-
-  </TabItem>
-
-</Tabs>
+This section has been moved to the [Developer Tools](/network/developer-tools) page.
 
 ## Supported wallets
 

docs/network/5-developer-tools.mdx

@@ -0,0 +1,31 @@
+---
+id: developer-tools
+title: Developer Tools
+sidebar_label: Developer Tools
+description: Developer tools for Flare built by the community including RPCs, bridges, indexers, account abstraction, wallet SDKs, and more.
+keywords: [developer tools, rpc, bridge, indexer, sdk, wallet]
+toc_min_heading_level: 2
+toc_max_heading_level: 3
+---
+
+import DeveloperTools from "@site/src/components/developerTools";
+
+<DeveloperTools />
+
+<div className="visually-hidden">
+
+    ## RPCs
+
+    ## Bridging
+
+    ## Indexers
+
+    ## OAuth Login
+
+    ## Account Abstraction
+
+    ## Wallet SDK
+
+    ## Full-stack Dev Infra
+
+</div>

sidebars.ts

@@ -20,6 +20,7 @@ const sidebars: SidebarsConfig = {
       link: { type: "doc", id: "network/overview" },
       items: [
         "network/getting-started",
+        "network/developer-tools",
         {
           type: "category",
           label: "Network Guides",

src/components/developerTools.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import Heading from "@theme/Heading";
+import toolsDataRaw from "@site/src/data/developerTools.json";
+
+// Define the type for tool items
+type ToolItem = {
+  name: string;
+  link: string;
+  subtext?: string;
+};
+
+// Define the type for categories
+type ToolCategories = {
+  [category: string]: ToolItem[];
+};
+
+// Define the type for network data
+type NetworkData = {
+  name: string;
+  categories: ToolCategories;
+};
+
+// Define the type for network tools
+type NetworkTools = {
+  [network: string]: NetworkData;
+};
+
+// Define the type for the complete tools data
+type ToolsData = {
+  toolDescriptions: { [key: string]: string };
+  networkTools: NetworkTools;
+};
+
+const DeveloperTools = () => {
+  const [activeNetwork, setActiveNetwork] = useState("flare");
+  const [isClient, setIsClient] = useState(false);
+
+  // Parse the imported JSON file
+  const toolsData = toolsDataRaw as ToolsData;
+  const { toolDescriptions, networkTools } = toolsData;
+
+  // Handle client-side only rendering and scroll to anchor if present
+  useEffect(() => {
+    setIsClient(true);
+
+    // Handle anchor scrolling
+    if (typeof window !== "undefined") {
+      const hash = window.location.hash;
+      if (hash) {
+        // Remove the '#' character
+        const id = hash.substring(1);
+        setTimeout(() => {
+          const element = document.getElementById(id);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth" });
+          }
+        }, 100);
+      }
+    }
+  }, []);
+
+  if (!isClient || !networkTools[activeNetwork]) {
+    return null;
+  }
+
+  const networkData = networkTools[activeNetwork];
+
+  return (
+    <div className="developer-tools-container">
+      <div className="developer-tools-header">
+        <p>
+          Developer tools for Flare built by the community including RPCs,
+          bridges, indexers, account abstraction, wallet SDKs, and more.
+        </p>
+
+        <div className="network-selector-container">
+          <div className="network-selector">
+            <label htmlFor="network-select">Network:</label>
+            <select
+              id="network-select"
+              value={activeNetwork}
+              onChange={(e) => setActiveNetwork(e.target.value)}
+              className="network-select"
+              aria-label="Select a network"
+            >
+              {Object.keys(networkTools).map((networkKey) => (
+                <option key={networkKey} value={networkKey}>
+                  {networkTools[networkKey].name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="tools-grid">
+        {Object.entries(networkData.categories).map(([category, tools]) => (
+          <div key={category} className="category-section">
+            <Heading
+              as="h2"
+              className="category-title"
+              id={`${category.toLowerCase().replace(/\s+/g, "-")}`}
+            >
+              {category}
+            </Heading>
+            <div className="tools-cards">
+              {Array.isArray(tools) && tools.length === 0 ? (
+                <div className="empty-category">
+                  No tools available in this category
+                </div>
+              ) : (
+                Array.isArray(tools) &&
+                tools.map((tool) => (
+                  <Link
+                    key={tool.name}
+                    to={tool.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="tool-card"
+                  >
+                    <div className="tool-info">
+                      <Heading as="h3" className="tool-name">
+                        {tool.name}
+                        {tool.subtext && (
+                          <span className="tool-subtext"> {tool.subtext}</span>
+                        )}
+                      </Heading>
+                      <p className="tool-description">
+                        {toolDescriptions[tool.name] ||
+                          "A tool for Flare ecosystem development."}
+                      </p>
+                    </div>
+                    <div className="tool-arrow" aria-hidden="true">
+                      →
+                    </div>
+                  </Link>
+                ))
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DeveloperTools;