404 page

packages/react-app/src/App.jsx

@@ -21,6 +21,7 @@ import { USER_ROLES } from "./helpers/constants";
 import { providerPromiseWrapper } from "./helpers/blockchainProviders";
 import BlockchainProvidersContext from "./contexts/blockchainProvidersContext";
 import SiteFooter from "./components/SiteFooter";
+import NotFoundView from "./views/NotFoundView";
 
 // 😬 Sorry for all the console logging
 const DEBUG = true;
@@ -215,6 +216,12 @@ function App() {
           <Route path="/activity" exact>
             <ActivityView />
           </Route>
+          <Route path="/404" exact>
+            <NotFoundView />
+          </Route>
+          <Route path="*">
+            <Redirect to="/404" />
+          </Route>
         </Switch>
         <ColorModeSwitcher />
       </div>

packages/react-app/src/views/ChallengeDetailView.jsx

@@ -67,9 +67,8 @@ export default function ChallengeDetailView({ serverUrl, address, userProvider,
   }, [isAnonymous, isWalletConnected, onOpen, userRole, openModalOnLoad, setOpenModalOnLoad]);
 
   if (!challenge) {
-    // TODO implement a 404 page
-    // this looks good: https://ant.design/components/result/#components-result-demo-404
     history.push("/404");
+    return null;
   }
 
   const handleSubmitChallengeModal = async () => {

packages/react-app/src/views/NotFoundView.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Box, Button, Container, Heading, Image, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+
+export default function NotFoundView() {
+  const bgColor = useColorModeValue("sre.cardBackground", "sreDark.cardBackground");
+
+  return (
+    <Box bgColor={bgColor} py={10}>
+      <Container maxW="container.lg" centerContent>
+        <Image mb="5" src="assets/not_found.svg" maxW="300px" />
+        <Heading mb="3">404</Heading>
+        <Text
+          mb="5"
+          fontSize={{
+            base: "lg",
+            lg: "md",
+          }}
+          textAlign="center"
+        >
+          Sorry, the page you visited does not exist.
+        </Text>
+        <Link as={RouterLink} to="/">
+          <Button>Back Home</Button>
+        </Link>
+      </Container>
+    </Box>
+  );
+}