Group all contract addresses by blockchain (#131)

docs/reference/testnet.mdx

@@ -31,11 +31,11 @@ For a list of RPC endpoints, refer to the [API endpoints page](/reference/api).
 Source:
 https://github.com/zeta-chain/protocol-contracts/blob/main/data/addresses.json
 
-## Transition from Athens-2 to Athens-3
+## Transition from Athens 2 to Athens 3
 
-Apps that were deployed to Athens-2 are or will transition to Athens-3 as a
+Apps that were deployed to Athens 2 are or will transition to Athens 3 as a
 long-term testnet. If you need to upgrade your wallet to use this new network
-instead of Athens-2, please follow these instructions.
+instead of Athens 2, please follow these instructions.
 
 1. In your wallet, remove the ZetaChain network that you are currently using.
 
@@ -55,5 +55,5 @@ instead of Athens-2, please follow these instructions.
 | Chain ID        | 7001                                                       |
 
 > By moving to the new RPC/network, you will not keep assets or any data from
-> Athens-2. No assets on any testnet should be worth any value, but if you want
+> Athens 2. No assets on any testnet should be worth any value, but if you want
 > to keep anything, you can transfer it to a different chain from ZetaChain.

src/components/ContractAddresses/ContractAddresses.tsx

@@ -44,12 +44,18 @@ const DataFetch: React.FC = () => {
     return title.replace(/_/g, " ").split(" ").map(handleEdgeCases).join(" ");
   };
 
-  const renderTable = (tableData: DataObject, title: string): ReactNode => {
-    const validEntries = Object.entries(tableData).filter(
-      ([key, value]) => value && value.trim() !== ""
-    );
+  const renderTable = (
+    blockchainData: NestedObject[],
+    title: string
+  ): ReactNode => {
+    const allEntries = blockchainData.reduce((acc, tableData) => {
+      const validEntries = Object.entries(tableData).filter(
+        ([key, value]) => value && value.trim() !== ""
+      );
+      return [...acc, ...validEntries];
+    }, [] as [string, string][]);
 
-    if (validEntries.length === 0) {
+    if (allEntries.length === 0) {
       return null;
     }
 
@@ -64,8 +70,8 @@ const DataFetch: React.FC = () => {
             </tr>
           </thead>
           <tbody>
-            {validEntries.map(([key, value]) => (
-              <tr key={key}>
+            {allEntries.map(([key, value], index) => (
+              <tr key={index}>
                 <td>{key}</td>
                 <td>{value}</td>
               </tr>
@@ -76,13 +82,22 @@ const DataFetch: React.FC = () => {
     );
   };
 
+  // Generate a mapping of blockchain to all its categories' data
+  const blockchainMapping: { [key: string]: NestedObject[] } = {};
+  Object.values(data).forEach((nestedObject) => {
+    Object.entries(nestedObject).forEach(([blockchain, blockchainData]) => {
+      if (!blockchainMapping[blockchain]) {
+        blockchainMapping[blockchain] = [];
+      }
+      blockchainMapping[blockchain].push(blockchainData);
+    });
+  });
+
   return (
     <div>
-      {Object.entries(data).map(([key, value]) => {
-        return Object.entries(value).map(([subKey, subValue]) =>
-          renderTable(subValue, `${key} - ${subKey}`)
-        );
-      })}
+      {Object.entries(blockchainMapping).map(([blockchain, blockchainData]) =>
+        renderTable(blockchainData, blockchain)
+      )}
     </div>
   );
 };