diff --git a/packages/react-app/public/assets/not_found.svg b/packages/react-app/public/assets/not_found.svg
new file mode 100644
index 00000000..218d8339
--- /dev/null
+++ b/packages/react-app/public/assets/not_found.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
index 1ad7fd10..28ad0112 100644
--- a/packages/react-app/src/App.jsx
+++ b/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() {
+
+
+
+
+
+
diff --git a/packages/react-app/src/views/ChallengeDetailView.jsx b/packages/react-app/src/views/ChallengeDetailView.jsx
index b0af25b1..4f67aed2 100644
--- a/packages/react-app/src/views/ChallengeDetailView.jsx
+++ b/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 () => {
diff --git a/packages/react-app/src/views/NotFoundView.jsx b/packages/react-app/src/views/NotFoundView.jsx
new file mode 100644
index 00000000..4e61fb02
--- /dev/null
+++ b/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 (
+
+
+
+ 404
+
+ Sorry, the page you visited does not exist.
+
+
+
+
+
+
+ );
+}