web: add guardians page

web/src/App.tsx

@@ -19,7 +19,8 @@ import {
 import CustomThemeProvider from "./components/CustomThemeProvider";
 import ErrorFallback from "./components/ErrorFallback";
 import Governance from "./components/Governance";
-import Main from "./components/Main";
+import Guardians from "./components/Guardians";
+import Home from "./components/Home";
 import { NetworkContextProvider } from "./contexts/NetworkContext";
 import { SettingsContextProvider } from "./contexts/SettingsContext";
 import WormholeStatsIcon from "./icons/WormholeStatsIcon";
@@ -50,6 +51,9 @@ function App() {
                     <Button component={Link} to="/governance">
                       Governance
                     </Button>
+                    <Button component={Link} to="/guardians">
+                      Guardians
+                    </Button>
                   </Box>
                   <Box flexGrow={1} />
                   <Box>
@@ -66,11 +70,14 @@ function App() {
                 </Toolbar>
               </AppBar>
               <Switch>
+                <Route exact path="/guardians">
+                  <Guardians />
+                </Route>
                 <Route exact path="/governance">
                   <Governance />
                 </Route>
                 <Route exact path="/">
-                  <Main />
+                  <Home />
                 </Route>
                 <Route>
                   <Redirect to="/" />

web/src/components/Guardians.tsx

@@ -1,4 +1,4 @@
-import { Card } from "@mui/material";
+import { Box, Card, Typography } from "@mui/material";
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -7,7 +7,7 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { useState } from "react";
-import { HeartbeatResponse } from "../hooks/useHeartbeats";
+import useHeartbeats, { HeartbeatResponse } from "../hooks/useHeartbeats";
 import longToDate from "../utils/longToDate";
 import Table from "./Table";
 
@@ -43,10 +43,16 @@ const columns = [
   }),
   columnHelper.accessor("guardianaddr", {
     header: () => "Address",
+    cell: (info) => (
+      <Box component="pre" m={0}>
+        {info.getValue()}
+      </Box>
+    ),
   }),
 ];
 
-function Guardians({ heartbeats }: { heartbeats: HeartbeatResponse[] }) {
+function Guardians() {
+  const heartbeats = useHeartbeats();
   const [sorting, setSorting] = useState<SortingState>([]);
   const table = useReactTable({
     columns,
@@ -60,9 +66,11 @@ function Guardians({ heartbeats }: { heartbeats: HeartbeatResponse[] }) {
     onSortingChange: setSorting,
   });
   return (
-    <Card>
-      <Table<HeartbeatResponse> table={table} />
-    </Card>
+    <Box m={2}>
+      <Card>
+        <Table<HeartbeatResponse> table={table} />
+      </Card>
+    </Box>
   );
 }
 

web/src/components/Home.tsx

@@ -4,7 +4,7 @@ import useHeartbeats from "../hooks/useHeartbeats";
 import Chains from "./Chains";
 import LatestVAAs from "./LatestVAAs";
 
-function Main() {
+function Home() {
   const heartbeats = useHeartbeats();
   const chainIdsToHeartbeats = useChainHeartbeats(heartbeats);
   return (
@@ -14,4 +14,4 @@ function Main() {
     </Box>
   );
 }
-export default Main;
+export default Home;