Table network status improvement (#2745)

* draft: dynamic status and explorer links

* simplified approach

* removed opBNB status page: 404

* added new status pages

* unichain domain fix

* refactor

Author: dev-dist

src/features/feeds/components/Tables.tsx

@@ -166,6 +166,22 @@ const CopyableAddress = ({
   )
 }
 
+const getNetworkStatusUrl = (network: NetworkData): string | null => {
+  if (network.networkStatus) {
+    return network.networkStatus
+  }
+
+  if (network.mainnet?.explorerUrl) {
+    try {
+      return new URL(network.mainnet.explorerUrl.replace("%s", "")).origin
+    } catch {
+      return null
+    }
+  }
+
+  return null
+}
+
 const DefaultTHead = ({ showExtraDetails, networkName }: { showExtraDetails: boolean; networkName: string }) => {
   const isAptosNetwork = networkName === "Aptos Mainnet" || networkName === "Aptos Testnet"
 
@@ -495,6 +511,7 @@ export const StreamsNetworkAddressesTable = () => {
         </thead>
         <tbody>
           {filteredNetworks.map((network: NetworkData, index: number) => {
+            const statusUrl = getNetworkStatusUrl(network)
             return (
               <Fragment key={network.network}>
                 {network.mainnet &&
@@ -598,18 +615,19 @@ export const StreamsNetworkAddressesTable = () => {
                       </td>
                     </tr>
                   )}
-
-                {network.networkStatus && (
-                  <tr key={`${network.network}-status`} className={tableStyles.statusRow}>
+                {statusUrl && (
+                  <tr key={`${network.network}-status-explorer`} className={tableStyles.statusRow}>
                     <td colSpan={3} className={tableStyles.statusCell}>
-                      <a
-                        href={network.networkStatus}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className={tableStyles.statusLink}
-                      >
-                        View {network.network} Network Status →
-                      </a>
+                      <div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end" }}>
+                        <a
+                          href={statusUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={tableStyles.statusLink}
+                        >
+                          View {network.network} Network Status →
+                        </a>
+                      </div>
                     </td>
                   </tr>
                 )}

src/features/feeds/data/StreamsNetworksData.ts

@@ -323,7 +323,6 @@ export const StreamsNetworksData: NetworkData[] = [
   {
     network: "opBNB",
     logoUrl: "/assets/chains/opbnb.svg",
-    networkStatus: "https://opbnb-status.bnbchain.org/",
     mainnet: {
       label: "opBNB Mainnet",
       verifierProxy: "0x7D543D1a715ED544f7e3Ae9e3b1777BCdA56bF8e",
@@ -381,6 +380,7 @@ export const StreamsNetworksData: NetworkData[] = [
   },
   {
     network: "Scroll",
+    networkStatus: "https://status.scroll.io/",
     logoUrl: "/assets/chains/scroll.svg",
     mainnet: {
       label: "Scroll Mainnet",
@@ -470,6 +470,7 @@ export const StreamsNetworksData: NetworkData[] = [
   {
     network: "Unichain",
     logoUrl: "/assets/chains/unichain.svg",
+    networkStatus: "https://status.unichain.org/",
     mainnet: {
       label: "Unichain Mainnet",
       verifierProxy: "0x60fAa7faC949aF392DFc858F5d97E3EEfa07E9EB",
@@ -484,6 +485,7 @@ export const StreamsNetworksData: NetworkData[] = [
   {
     network: "World Chain",
     logoUrl: "/assets/chains/worldchain.svg",
+    networkStatus: "https://worldchain-mainnet-status.alchemy.com/",
     mainnet: {
       label: "World Chain Mainnet",
       verifierProxy: "0x6733e9106094b0C794e8E0297c96611fF60460Bf",