fix: automatic address table

Updates L1ContractTable to pull addresses from the JSON file
directly instead of getting it as an NPM dependency which needs
to be updated regularly.

Author: smartcontracts

components/AddressTable.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import { CHAIN_CONSTANTS, LEGACY_CONTRACT_NAMES } from '@/utils/constants'
 
-interface TableAddresses {
+export interface TableAddresses {
   [contract: string]: string
 }
 
@@ -37,7 +37,7 @@ export function AddressTable({
           Object.entries(filtered)
             .map(([contract, address]) => {
               return (
-                <tr key={`${chain}.${address}`} className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20">
+                <tr key={`${chain}.${contract}.${address}`} className="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20">
                   <td className="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600">
                     <code className="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10">
                       {contract}

components/L1ContractTable.tsx

@@ -1,6 +1,8 @@
 import type { ReactElement } from 'react'
-import * as addresses from 'superchain-registry/superchain/extra/addresses/addresses.json'
-import { AddressTable } from '@/components/AddressTable'
+import { useEffect, useState } from 'react'
+import { AddressTable, TableAddresses } from '@/components/AddressTable'
+
+const ADDRESSES_URL = 'https://raw.githubusercontent.com/ethereum-optimism/superchain-registry/main/superchain/extra/addresses/addresses.json';
 
 export function L1ContractTable({
   chain,
@@ -11,16 +13,47 @@ export function L1ContractTable({
   explorer: string,
   legacy: boolean
 }): ReactElement {
+  const [addresses, setAddresses] = 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(ADDRESSES_URL)
+        if (!response.ok) {
+          throw new Error('Failed to fetch addresses')
+        }
+        const data = await response.json()
+        setAddresses(data)
+      } catch (err) {
+        setError(err.message)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchAddresses()
+  }, [])
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (error) {
+    return <div>Error: {error}</div>
+  }
+
   return (
     <AddressTable
       chain={chain}
       explorer={explorer}
       legacy={legacy}
       addresses={
-        Object.entries(addresses)
+        addresses && Object.entries(addresses)
           .find(([chainid, ]) => {
             return chainid === chain
-          })[1]
+          })?.[1] as TableAddresses
       }
     />
   )

package.json

@@ -22,8 +22,7 @@
     "nextra": "2.13.2",
     "nextra-theme-docs": "2.13.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "superchain-registry": "github:ethereum-optimism/superchain-registry#main"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@double-great/remark-lint-alt-text": "^1.0.0",