Add dynamic table for Gas API supported networks (#1914)

* Add Sonic to Gas API supported networks

* Add dynamic table for Gas API supported networks

* update what's new

Author: alexandratran

docs/whats-new.md

@@ -9,7 +9,12 @@ The latest major MetaMask documentation updates are listed by the month they wer
 For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom
 of the [MetaMask developer page](https://metamask.io/developer/).
 
-## February
+## March 2025
+
+- Added full table for [Gas API supported networks](/services/get-started/endpoints/#gas-api).
+  ([#1914](https://github.com/MetaMask/metamask-docs/pull/1914))
+
+## February 2025
 
 - Documented [Unichain Mainnet](/services/reference/unichain) support. ([#1878](https://github.com/MetaMask/metamask-docs/pull/1878))
 

services/get-started/endpoints.md

@@ -4,6 +4,8 @@ sidebar_position: 2
 toc_max_heading_level: 3
 ---
 
+import GasApiNetworks from "@site/src/components/GasApiNetworks.tsx";
+
 # All endpoints
 
 The following lists all the network endpoints supported by Infura.
@@ -190,80 +192,4 @@ The Gas REST API supports multiple networks.
 
 Specify the chain ID in your request to interact with the relevant network.
 
-#### Arbitrum
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 42161    |
-| Nova    | 42170    |
-
-#### Avalanche (C-Chain)
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 43114    |
-
-#### Base
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 8453     |
-
-#### BNB Chain
-
-| Network         | Chain ID |
-|-----------------|----------|
-| Mainnet         | 56       |
-| opBNB (layer 2) | 204      |
-
-#### Cronos
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 25       |
-
-#### Ethereum
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 1        |
-| Holesky | 17000    |
-| Sepolia | 11155111 |
-
-#### Fantom
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 250      |
-
-#### Filecoin
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 314      |
-
-#### Linea
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 59144    |
-| Sepolia | 59141    |
-
-#### Optimism
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 10       |
-
-#### Polygon
-
-| Network | Network ID |
-|---------|------------|
-| Mainnet | 137        |
-| Amoy    | 80002      |
-
-#### ZKsync Era
-
-| Network | Chain ID |
-|---------|----------|
-| Mainnet | 324      |
+<GasApiNetworks />

src/components/GasApiNetworks.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+
+const GasApiNetworks = () => {
+  const [networks, setNetworks] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('https://gas.api.cx.metamask.io/v1/supportedChainNames');
+        const data = await response.json();
+        setNetworks(data);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // Convert the networks object into an array of [chainId, networkName] pairs
+  const networksArray = Object.entries(networks);
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Network</th>
+          <th>Chain ID</th>
+        </tr>
+      </thead>
+      <tbody>
+        {networksArray.map(([chainId, networkName]) => (
+          <tr key={chainId}>
+            <td>{networkName}</td>
+            <td>{chainId}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default GasApiNetworks;