dashboard: core contracts

wormhole-foundation · May 9, 2024 · f0c3455 · f0c3455
1 parent 0397388
commit f0c3455
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 7 deletions.
diff --git a/dashboard/src/components/Contracts.tsx b/dashboard/src/components/Contracts.tsx
@@ -0,0 +1,104 @@
+import {
+  Card,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@mui/material';
+import {
+  Chain,
+  chainToChainId,
+  chainToPlatform,
+  chains,
+  contracts,
+  rpc,
+} from '@wormhole-foundation/sdk-base';
+import { useEffect, useState } from 'react';
+import { useNetworkContext } from '../contexts/NetworkContext';
+import CollapsibleSection from './CollapsibleSection';
+import { callContractMethod, getMethodId } from '@wormhole-foundation/wormhole-monitor-common';
+
+const coreBridgeChains = chains.filter((chain) => contracts.coreBridge.get('Mainnet', chain));
+
+function useGetGuardianSet(chain: Chain, address: string | undefined) {
+  const network = useNetworkContext();
+  const [guardianSet, setGuardianSet] = useState<[bigint | null, string | null]>([null, null]);
+  useEffect(() => {
+    setGuardianSet([null, null]);
+    if (!address) return;
+    let cancelled = false;
+    if (chainToPlatform(chain) === 'Evm') {
+      const rpcUrl = rpc.rpcAddress(network.currentNetwork.env, chain);
+      if (!rpcUrl) return;
+      (async () => {
+        try {
+          const gsi = await callContractMethod(
+            rpcUrl,
+            address,
+            getMethodId('getCurrentGuardianSetIndex()')
+          );
+          if (cancelled) return;
+          const gs = await callContractMethod(
+            rpcUrl,
+            address,
+            getMethodId('getGuardianSet(uint32)'),
+            gsi.substring(2) // strip 0x
+          );
+          if (cancelled) return;
+          setGuardianSet([BigInt(gsi), gs]);
+        } catch (e) {}
+      })();
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [network.currentNetwork.env, chain, address]);
+  return guardianSet;
+}
+
+function CoreBridgeInfo({ chain, address }: { chain: Chain; address: string | undefined }) {
+  const guardianSet = useGetGuardianSet(chain, address);
+  const guardianSetIndex = guardianSet[0]?.toString();
+  if (!address) return null;
+  return (
+    <TableRow>
+      <TableCell>{chain}</TableCell>
+      <TableCell>{chainToChainId(chain)}</TableCell>
+      <TableCell>{address}</TableCell>
+      <TableCell>{guardianSetIndex}</TableCell>
+    </TableRow>
+  );
+}
+
+function Contracts() {
+  return (
+    <CollapsibleSection header="Core">
+      <Card>
+        <TableContainer>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>Chain Name</TableCell>
+                <TableCell>Chain ID</TableCell>
+                <TableCell>Address</TableCell>
+                <TableCell>Guardian Set Index</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {coreBridgeChains.map((chain: Chain) => (
+                <CoreBridgeInfo
+                  key={chain}
+                  chain={chain}
+                  address={contracts.coreBridge.get('Mainnet', chain)}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Card>
+    </CollapsibleSection>
+  );
+}
+export default Contracts;
diff --git a/dashboard/src/components/Main.tsx b/dashboard/src/components/Main.tsx
@@ -1,11 +1,17 @@
-import { GitHub } from '@mui/icons-material';
+import {
+  AnalyticsOutlined,
+  GitHub,
+  ReceiptLongOutlined,
+  SyncAltOutlined,
+} from '@mui/icons-material';
 import { AppBar, Box, Button, Hidden, IconButton, Toolbar, Typography } from '@mui/material';
 import { NavLink, Route, Switch, useLocation } from 'react-router-dom';
 import useChainHeartbeats from '../hooks/useChainHeartbeats';
 import useHeartbeats from '../hooks/useHeartbeats';
 import useLatestRelease from '../hooks/useLatestRelease';
 import WormholeStatsIcon from '../icons/WormholeStatsIcon';
 import Alerts from './Alerts';
+import Contracts from './Contracts';
 import Home from './Home';
 import Metrics from './Metrics';
 import NTTMetrics from './NTTMetrics';
@@ -33,31 +39,74 @@ function NavLinks() {
         <Box display="flex" alignItems="center">
           <WormholeStatsIcon />
         </Box>
-        <Hidden smDown>
+        <Hidden mdDown>
           <Typography variant="h6" sx={{ pl: 0.75 }}>
             Dashboard
           </Typography>
         </Hidden>
       </NavLink>
+      <NavLink
+        to={`/contracts${search}`}
+        exact
+        component={NavButton}
+        color="inherit"
+        activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
+        style={{
+          paddingRight: 8,
+          marginLeft: 8,
+          textTransform: 'none',
+          borderRadius: 0,
+          minWidth: 0,
+        }}
+      >
+        <Hidden mdUp>
+          <ReceiptLongOutlined />
+        </Hidden>
+        <Hidden mdDown>
+          <Typography variant="h6">Contracts</Typography>
+        </Hidden>
+      </NavLink>
       <NavLink
         to={`/metrics${search}`}
         exact
         component={NavButton}
         color="inherit"
         activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
-        style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
+        style={{
+          paddingRight: 8,
+          marginLeft: 8,
+          textTransform: 'none',
+          borderRadius: 0,
+          minWidth: 0,
+        }}
       >
-        <Typography variant="h6">Metrics</Typography>
+        <Hidden mdUp>
+          <AnalyticsOutlined />
+        </Hidden>
+        <Hidden mdDown>
+          <Typography variant="h6">Metrics</Typography>
+        </Hidden>
       </NavLink>
       <NavLink
         to={`/ntt-metrics${search}`}
         exact
         component={NavButton}
         color="inherit"
         activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
-        style={{ paddingRight: 8, marginLeft: 8, textTransform: 'none', borderRadius: 0 }}
+        style={{
+          paddingRight: 8,
+          marginLeft: 8,
+          textTransform: 'none',
+          borderRadius: 0,
+          minWidth: 0,
+        }}
       >
-        <Typography variant="h6">NTT</Typography>
+        <Hidden mdUp>
+          <SyncAltOutlined />
+        </Hidden>
+        <Hidden mdDown>
+          <Typography variant="h6">NTT</Typography>
+        </Hidden>
       </NavLink>
     </>
   );
@@ -70,7 +119,7 @@ function Main() {
   return (
     <>
       <AppBar position="static">
-        <Toolbar variant="dense">
+        <Toolbar variant="dense" sx={{ minHeight: 40 }}>
           <NavLinks />
           <Box flexGrow={1} />
           <Hidden smDown>
@@ -100,6 +149,9 @@ function Main() {
         <Route path="/metrics">
           <Metrics />
         </Route>
+        <Route path="/contracts">
+          <Contracts />
+        </Route>
         <Route path="/">
           <Home
             heartbeats={heartbeats}