feat: add superchain contract address table

components/SuperchainContractTable.tsx

@@ -0,0 +1,65 @@
+import type { ReactElement } from 'react'
+import { useEffect, useState } from 'react'
+import { AddressTable, TableAddresses } from '@/components/AddressTable'
+
+const CONFIG_URL = 'https://raw.githubusercontent.com/ethereum-optimism/superchain-registry/main/superchain/configs/configs.json';
+
+export function SuperchainContractTable({
+  chain,
+  explorer,
+}: {
+  chain: string,
+  explorer: string,
+}): ReactElement {
+  const [config, setConfig] = useState<Record<string, any> | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchAddresses() {
+      try {
+        const response = await fetch(CONFIG_URL)
+        if (!response.ok) {
+          throw new Error('Failed to fetch config')
+        }
+        const data = await response.json()
+        setConfig(data)
+      } catch (err) {
+        setError(err.message)
+        console.error('Error fetching config:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchAddresses()
+  }, [])
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
+  // Find the superchain config for the given chain.
+  const superchain = config?.superchains.find(
+    (sc: any) => sc.config.L1.ChainID.toString() === chain
+  )
+
+  // Create a TableAddresses object with the ProtocolVersions and SuperchainConfig addresses.
+  const addresses: TableAddresses | undefined = superchain && {
+    ProtocolVersions: superchain.config.ProtocolVersionsAddr,
+    SuperchainConfig: superchain.config.SuperchainConfigAddr,
+  };
+
+  return (
+    <AddressTable
+      chain={chain}
+      explorer={explorer}
+      legacy={false}
+      addresses={addresses}
+    />
+  )
+}

pages/chain/addresses.mdx

@@ -7,6 +7,7 @@ description: This reference guide lists all the contract addresses for Mainnet a
 import { Callout } from 'nextra/components'
 import { L1ContractTable } from '@/components/L1ContractTable'
 import { L2ContractTable } from '@/components/L2ContractTable'
+import { SuperchainContractTable } from '@/components/SuperchainContractTable'
 
 # Contract Addresses
 
@@ -19,6 +20,10 @@ This page is automatically generated from packages in the [superchain-registry](
 
 ## Mainnet
 
+### Ethereum Superchain Contracts (L1)
+
+<SuperchainContractTable chain="1" explorer="1" />
+
 ### Ethereum (L1)
 
 <L1ContractTable chain="10" explorer="1" legacy={false} />
@@ -37,6 +42,10 @@ This page is automatically generated from packages in the [superchain-registry](
 
 ## Testnet (Sepolia)
 
+### Sepolia Superchain Contracts (L1)
+
+<SuperchainContractTable chain="11155111" explorer="11155111" />
+
 ### Sepolia (L1)
 
 <L1ContractTable chain="11155420" explorer="11155111" legacy={false} />