Merge pull request #664 from OpenZeppelin/659-fix-react-router-to-fal…

…lback-in-404

fix react router and stylized 404 error page

client/src/components/not-found/NotFound404.js

@@ -1,12 +1,39 @@
-import React from 'react'
-
-const NotFound404 = () => {
-  return (
-    <div className="container">
-      <br/>
-      <h3 className="title">404 Not Found</h3>
-    </div>
-  )
+import React from "react";
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { loadTranslations } from "../../utils/translations";
+import { randBadIcon } from "../../utils/^^";
+import "../../styles/app.css"
+import Footer from "../common/Footer";
+
+class NotFound404 extends React.Component {
+  render() {
+    let language = localStorage.getItem("lang");
+    let strings = loadTranslations(language);
+
+    return (
+      <div className="helpcontainer">
+        <div className="lines"></div>
+        <main className="page-not-found-container">
+          <h1>{randBadIcon()}</h1>
+          <h3 className="page-not-found-title">{strings.PageNotFoundTitle}</h3>
+          <h4 className="page-not-found-text">{strings.PageNotFoundText}</h4>
+        </main>
+        {/* Footer */}
+        <Footer></Footer>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    language: state.lang,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({}, dispatch);
 }
 
-export default NotFound404
+export default connect(mapStateToProps, mapDispatchToProps)(NotFound404);

client/src/constants.js

@@ -177,7 +177,7 @@ export const SHOW_VERSION = true;
 // export const ACTIVE_NETWORK = NETWORKS.MUMBAI
 // export const ACTIVE_NETWORK = NETWORKS.OPTIMISM_GOERLI
 // export const ACTIVE_NETWORK = NETWORKS.ARBITRUM_GOERLI
-// export const ACTIVE_NETWORK = NETWORKS.LOCAL;
+export const ACTIVE_NETWORK = NETWORKS.LOCAL;
 
 let id_to_network = {};
 Object.keys(NETWORKS)

client/src/gamedata/ar/strings.json

@@ -107,5 +107,8 @@
   "HundredPercentMessage": "100٪: مبارك! رحلتك في حفرة الأرنب في ويب 3 مبهرة ويجب الاحتفال بها! لديك الآن المهارات اللازمة لكسر العقود الذكية! ما التالي من هنا حالا؟ تقدم بطلب لتصبح  باحث أمن البلوكتشين في OpenZeppelin ، وساهم في تأمين أفضل البروتوكولات في الويب3! https://grnh.se/26c05aac3us",
   "Menu": "قائمة",
   "Networks": "الشبكات",
-  "Languages": "اللغات"
+  "Languages": "اللغات",
+  "PageNotFoundTitle": "خطأ 404 - الصفحة غير موجودة",
+  "PageNotFoundText": "عفوًا! لا يمكن العثور على الصفحة التي تبحث عنها."
+
 }

client/src/gamedata/en/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "Menu",
   "Networks": "Networks",
-  "Languages": "Languages"
+  "Languages": "Languages",
+  "PageNotFoundTitle": "404 Error - Page Not Found",
+  "PageNotFoundText": "Oops! The page you are looking for could not be found."
 }

client/src/gamedata/es/strings.json

@@ -30,7 +30,7 @@
   "deployNote": "Nota: si implementa todos los niveles, lo guiaremos para que envíe todo el juego implementado en esta red.",
   "deployGame": "Desplegar juego",
   "switchToGoerli": "Cambiar a Goerli",
-  "deployLevel": "Nivel de implementación",
+  "deployLevel": "Desplegar implementación",
   "helperDeployAllContracts": "Implemente todos los contratos restantes en la red actual.",
   "confirmMainnetDeploy": "Estás en una red principal, el juego no tiene valor monetario, no debes implementarlo en esta red.",
   "submitLevelFooter": "Implemente todos los niveles (deployAllContracts() en la consola) para agregar la red actual a nuestro <a href='https://github.com/OpenZeppelin/ethernaut'>repositorio de Github</a> como una nueva red compatible.",
@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "Menú",
   "Networks": "Redes",
-  "Languages": "Idiomas"
+  "Languages": "Idiomas",
+  "PageNotFoundTitle": "Error 404 - Página no encontrada",
+  "PageNotFoundText": "¡Ups! La página que estás buscando no se pudo encontrar."
 }

client/src/gamedata/fr/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "Menu",
   "Networks": "Réseaux",
-  "Languages": "Langues"
+  "Languages": "Langues",
+  "PageNotFoundTitle": "Erreur 404 - Page non trouvée",
+  "PageNotFoundText": "Oups ! La page que vous recherchez est introuvable."
 }

client/src/gamedata/ja/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "メニュー",
   "Networks": "ネットワーク",
-  "Languages": "言語"
+  "Languages": "言語",
+  "PageNotFoundTitle": "404エラー - ページが見つかりません",
+  "PageNotFoundText": "おっと！お探しのページが見つかりませんでした。"
 }

client/src/gamedata/pt_br/strings.json

@@ -90,5 +90,7 @@
   "setupMetamask": "Se você ainda não tem, instale o [MetaMask browser extension](https://metamask.io/) (no Chrome, Firefox, Brave ou Opera em seu computador). \n\nConfigure a carteira da extensão e use o seletor de rede para apontar para a rede preferida no canto superior esquerdo da interface da extensão. Alternativamente, você pode usar o botão para alternar entre as redes. Se você selecionar uma rede não suportada, o jogo irá notificá-lo e levá-lo para o Goerli testnet padrão. \n\nUma vez feito, volte aqui e recarregue a página",
   "Menu": "Menu",
   "Networks": "Redes",
-  "Languages": "línguas"
+  "Languages": "línguas",
+  "PageNotFoundTitle": "Erro 404 - Página não encontrada",
+  "PageNotFoundText": "Ops! A página que você está procurando não pôde ser encontrada."
 }

client/src/gamedata/ru/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "Меню",
   "Networks": "сети",
-  "Languages": "Языки"
+  "Languages": "Языки",
+  "PageNotFoundTitle": "Ошибка 404 - Страница не найдена",
+  "PageNotFoundText": "Ой! Страница, которую вы ищете, не может быть найдена."
 }

client/src/gamedata/tr/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "Menü",
   "Networks": "ağlar",
-  "Languages": "Diller"
+  "Languages": "Diller",
+  "PageNotFoundTitle": "404 Hata - Sayfa Bulunamadı",
+  "PageNotFoundText": "Oops! Aradığınız sayfa bulunamadı."
 }

client/src/gamedata/zh_cn/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "菜单",
   "Networks": "网络",
-  "Languages": "语言"
+  "Languages": "语言",
+  "PageNotFoundTitle": "404错误 - 页面未找到",
+  "PageNotFoundText": "哎呀！您要访问的页面未找到。"
 }

client/src/gamedata/zh_tw/strings.json

@@ -107,5 +107,7 @@
   "HundredPercentMessage": "100%: Congratulations! Your journey down the web3 rabbit hole is impressive and should be celebrated! You now have the skills to break smart contracts! What’s next from here anon? Apply to be a Blockchain Security Researcher at OpenZeppelin, and contribute to securing the top protocols in web3! https://grnh.se/26c05aac3us",
   "Menu": "菜單",
   "Networks": "網絡",
-  "Languages": "語言"
+  "Languages": "語言",
+  "PageNotFoundTitle": "404錯誤 - 頁面未找到",
+  "PageNotFoundText": "哎呀！您要訪問的頁面未找到。"
 }

client/src/index.js

@@ -60,7 +60,7 @@ root.render(
           <Route path={constants.PATH_STATS} element={<Stats />} />
           <Route path={constants.PATH_LEADERBOARD} element={<Leaderboard />} />
           <Route exact path="/" element={<App />} />
-          <Route path="/" element={<NotFound404 />} />
+          <Route path="*" element={<NotFound404 />} />
         </Routes>
       </Suspense>
     </Router>

client/src/styles/app.css

@@ -755,3 +755,19 @@ footer {
     width: 60%;
   }
 }
+
+/* 404 Page Not found*/
+.page-not-found-container {
+  width: 800px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+ .page-not-found-title{
+    margin-top: 3rem;
+ }
+
+ .page-not-found-text{
+  margin-top: 1rem;
+}