Improved the navbar and the metamask events handling

web/app/components/AccountMenu.tsx

@@ -0,0 +1,100 @@
+import { LinkOff } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  Typography,
+} from "@mui/material";
+import React, { FC, useState } from "react";
+import { useEthereum } from "~/context/EthereumContext";
+import { useVoter } from "~/context/VoterContext";
+import { formatAccountString } from "~/lib/utils";
+
+export const AccountMenu: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const { account, logoutEthereumAccount, loading } = useEthereum();
+  const { voter } = useVoter();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id="account-menu"
+        aria-controls={open ? "account-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        color="neutral"
+      >
+        <Stack direction="row" spacing={1}>
+          <Typography>
+            {voter && account ? `${voter.firstName} ${voter.lastName}` : ""}
+          </Typography>
+          <Box
+            component="img"
+            src="/metamask-fox.svg"
+            sx={{
+              width: 22,
+            }}
+          />
+          <Typography
+            sx={{
+              fontWeight: "bold",
+              minWidth: 120,
+              display: "inline-block",
+              textAlign: "left",
+            }}
+          >
+            {loading
+              ? "loading..."
+              : (account && formatAccountString(account)) || "not connected"}
+          </Typography>
+        </Stack>
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "basic-button",
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        sx={{
+          marginTop: 1,
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            logoutEthereumAccount();
+            handleClose();
+          }}
+        >
+          <ListItemIcon>
+            <LinkOff />
+          </ListItemIcon>
+          <ListItemText>Disconnect</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

web/app/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { Box, Container } from "@mui/material";
 import { FC } from "react";
 import { useLocation } from "remix";
-import { Navbar } from "../../public/Navbar";
+import { Navbar } from "./Navbar";
 
 export const Layout: FC = ({ children }) => {
   const location = useLocation();

web/public/Navbar.tsx → web/app/components/Navbar.tsx

@@ -1,8 +1,10 @@
+import { Language } from "@mui/icons-material";
 import { Box, Container, Stack, Typography } from "@mui/material";
 import { FC } from "react";
 import { Link } from "remix";
 import { useEthereum } from "~/context/EthereumContext";
-import { useVoter } from "../app/context/VoterContext";
+import { useVoter } from "../context/VoterContext";
+import { AccountMenu } from "./AccountMenu";
 
 export const Navbar: FC = () => {
   const { account, network } = useEthereum();
@@ -54,31 +56,25 @@ export const Navbar: FC = () => {
             </Stack>
           </Box>
           <Box>
-            <Typography
+            <Stack
+              direction="row"
+              spacing={2}
               sx={{
-                fontSize: "0.5rem",
+                alignItems: "center",
               }}
             >
-              Account: {account || "(not connected)"}
-            </Typography>
-            {network && (
-              <Typography
+              <AccountMenu />
+              <Stack
+                direction="row"
+                spacing={1}
                 sx={{
-                  fontSize: "0.5rem",
+                  minWidth: 120,
                 }}
               >
-                Chain: {network.name} {network.chainId}{" "}
-                {network.connected ? "🟢" : "🔴"}
-              </Typography>
-            )}
-            <Typography
-              sx={{
-                fontSize: "0.5rem",
-              }}
-            >
-              Voter:{" "}
-              {voter ? `${voter.firstName} ${voter.lastName}` : "unverified"}
-            </Typography>
+                <Language />
+                {network && <Typography>{network.name}</Typography>}
+              </Stack>
+            </Stack>
           </Box>
         </Container>
       </Box>

web/app/context/BallotContext.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useNavigate } from "remix";
+import { useLocation, useNavigate } from "remix";
 import invariant from "tiny-invariant";
 import { VoteEvent, VoterAllowedEvent } from "types/ethers-contracts/Ballot";
 import { TypedListener } from "types/ethers-contracts/common";
@@ -43,7 +43,8 @@ const UNPROTECTED_ROUTES = [
   "/errors/no-ethereum-provider",
   "/errors/nonce-too-high",
 ];
-const isProtected = (route: string) => !UNPROTECTED_ROUTES.includes(route);
+const routeRequiresBallot = (route: string) =>
+  !UNPROTECTED_ROUTES.includes(route);
 
 const BallotContext = createContext<BallotContextInterface>({
   loading: true,
@@ -56,15 +57,22 @@ const BallotContext = createContext<BallotContextInterface>({
 });
 
 export const BallotProvider: FC = ({ children }) => {
+  const [ballotExists, setBallotExists] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [proposals, setProposals] = useState<Proposal[]>([]);
   const [voteRightReceived, setVoteRightReceived] = useState(false);
   const [currentVoterVoteStatus, setCurrentVoterVoteStatus] =
     useState<VoterVoteStatus>("unknown");
   const ballotRef = useRef<Ballot | null>(null);
   const providerRef = useRef<ethers.providers.Web3Provider | null>(null);
-  const { ethereumExists, loading: ethereumLoading, account } = useEthereum();
+  const {
+    ethereumExists,
+    loading: ethereumLoading,
+    account,
+    network,
+  } = useEthereum();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const voteEventsListener: TypedListener<VoteEvent> = (voterAccount) => {
     fetchProposals();
@@ -103,12 +111,11 @@ export const BallotProvider: FC = ({ children }) => {
       try {
         await ballot.chairperson();
         console.log("[BallotContext] Contract is accessible 👍");
+        setBallotExists(true);
         fetchProposals();
       } catch (error) {
-        console.error(error);
-        if (isProtected(window.location.pathname)) {
-          navigate("/errors/ballot-not-found");
-        }
+        console.log("[BallotContext] Contract is NOT accessible 👎");
+        setBallotExists(false);
       } finally {
         setLoading(false);
       }
@@ -121,7 +128,22 @@ export const BallotProvider: FC = ({ children }) => {
       ballot.off("Vote", voteEventsListener);
       ballot.off("VoterAllowed", voterAllowedEventsListener);
     };
-  }, [ethereumLoading, ethereumExists]);
+  }, [ethereumLoading, ethereumExists, network]);
+
+  useEffect(() => {
+    if (!loading) {
+      if (ballotExists) {
+        if (location.pathname === "/errors/ballot-not-found") {
+          navigate("/getstarted");
+        }
+      } else {
+        // alert(`ballotExists: ${ballotExists}, loading: ${loading}`);
+        if (routeRequiresBallot(location.pathname)) {
+          navigate("/errors/ballot-not-found");
+        }
+      }
+    }
+  }, [loading, location.pathname, ballotExists]);
 
   function fetchProposals() {
     const ballot = ballotRef.current;
@@ -175,9 +197,9 @@ export const BallotProvider: FC = ({ children }) => {
     };
   }
 
-  const value = {
+  const value: BallotContextInterface = {
     loading,
-    ballotExists: ballotRef.current !== null,
+    ballotExists,
     proposals,
     voteRightReceived,
     currentVoterVoteStatus,

web/app/context/EthereumContext.tsx

@@ -22,6 +22,7 @@ interface EthereumContextInterface {
   account: string | null;
   signer?: JsonRpcSigner;
   connectWithMetamask: () => void;
+  logoutEthereumAccount: () => void;
 }
 
 export const HARDHAT_CHAIN_ID = 31337;
@@ -40,6 +41,7 @@ const EthereumContext = createContext<EthereumContextInterface>({
   network: null,
   account: null,
   connectWithMetamask: () => {},
+  logoutEthereumAccount: () => {},
 });
 
 export const EthereumProvider: FC = ({ children }) => {
@@ -68,11 +70,11 @@ export const EthereumProvider: FC = ({ children }) => {
       });
 
       provider.on("network", handleNetworkChange);
-
-      // TODO: Detect les account changes
+      ethereum.on("accountsChanged", handleAccountsChanged);
 
       return () => {
         provider.off("network", handleNetworkChange);
+        ethereum.removeListener("accountsChanged", handleAccountsChanged);
       };
     } else {
       setLoading(false);
@@ -109,6 +111,20 @@ export const EthereumProvider: FC = ({ children }) => {
     });
   }
 
+  function handleAccountsChanged(accounts: string[]) {
+    if (!accounts.length) {
+      logoutEthereumAccount();
+    } else {
+      setAccount(accounts[0]);
+      // TODO: Destroy session / login the other account and setup new session?
+    }
+  }
+
+  function logoutEthereumAccount() {
+    setAccount(null);
+    // TODO: Destroy session
+  }
+
   async function connectWithMetamask() {
     const provider = providerRef.current;
     invariant(provider, "Provider should be defined");
@@ -130,13 +146,14 @@ export const EthereumProvider: FC = ({ children }) => {
     }
   }
 
-  const value = {
+  const value: EthereumContextInterface = {
     loading,
     ethereumExists,
     network,
     account,
     signer,
     connectWithMetamask,
+    logoutEthereumAccount,
   };
 
   return (

web/app/context/VoterContext.tsx

@@ -21,6 +21,7 @@ const VoterContext = createContext<VoterContextInterface>({
 
 const UNPROTECTED_ROUTES = [
   "/",
+  "/results",
   "/getstarted/register",
   "/getstarted/verify",
   "/errors/ballot-not-found",

web/app/lib/utils.ts

@@ -0,0 +1,3 @@
+export const formatAccountString = (address: string) => {
+  return address.slice(0, 6) + "..." + address.slice(-4);
+};

web/app/mui/theme.ts

@@ -10,13 +10,32 @@ declare module "@mui/material/Typography" {
   }
 }
 
+declare module "@mui/material/styles" {
+  interface Palette {
+    neutral: Palette["primary"];
+  }
+  interface PaletteOptions {
+    neutral: PaletteOptions["primary"];
+  }
+}
+
+// Update the Button's color prop options
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    neutral: true;
+  }
+}
+
 // Create a theme instance.
 const theme = createTheme({
   palette: {
     grey: grey,
     primary: {
       main: blue[800],
     },
+    neutral: {
+      main: grey[800],
+    },
     secondary: {
       main: grey[800],
     },

web/app/routes/errors/ballot-not-found.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import { GenericPageLayoutWithBackButton } from "~/components/GenericPageLayout";
 
-function NoEthereumProvider() {
+function BallotNotFound() {
   return (
     <GenericPageLayoutWithBackButton>
       <Typography variant="pageTitle">
@@ -20,4 +20,4 @@ function NoEthereumProvider() {
   );
 }
 
-export default NoEthereumProvider;
+export default BallotNotFound;