From e20ba3ed6e443e7227310e9a556745eb3ee7f3d5 Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Wed, 14 Jun 2023 16:28:34 +0200 Subject: [PATCH] fix router and stylized 404 error page --- .../src/components/not-found/NotFound404.js | 47 +++++++++++++++---- client/src/constants.js | 2 +- client/src/gamedata/ar/strings.json | 5 +- client/src/gamedata/en/strings.json | 4 +- client/src/gamedata/es/strings.json | 6 ++- client/src/gamedata/fr/strings.json | 4 +- client/src/gamedata/ja/strings.json | 4 +- client/src/gamedata/pt_br/strings.json | 4 +- client/src/gamedata/ru/strings.json | 4 +- client/src/gamedata/tr/strings.json | 4 +- client/src/gamedata/zh_cn/strings.json | 4 +- client/src/gamedata/zh_tw/strings.json | 4 +- client/src/index.js | 2 +- client/src/styles/app.css | 16 +++++++ 14 files changed, 87 insertions(+), 23 deletions(-) diff --git a/client/src/components/not-found/NotFound404.js b/client/src/components/not-found/NotFound404.js index c7168c97c..0e464f10f 100644 --- a/client/src/components/not-found/NotFound404.js +++ b/client/src/components/not-found/NotFound404.js @@ -1,12 +1,39 @@ -import React from 'react' - -const NotFound404 = () => { - return ( -
-
-

404 Not Found

-
- ) +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 ( +
+
+
+

{randBadIcon()}

+

{strings.PageNotFoundTitle}

+

{strings.PageNotFoundText}

+
+ {/* Footer */} +
+
+ ); + } +} + +function mapStateToProps(state) { + return { + language: state.lang, + }; +} + +function mapDispatchToProps(dispatch) { + return bindActionCreators({}, dispatch); } -export default NotFound404 +export default connect(mapStateToProps, mapDispatchToProps)(NotFound404); diff --git a/client/src/constants.js b/client/src/constants.js index 7a636004c..dd06f6ca1 100644 --- a/client/src/constants.js +++ b/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) diff --git a/client/src/gamedata/ar/strings.json b/client/src/gamedata/ar/strings.json index 014524fdb..5b1b68996 100644 --- a/client/src/gamedata/ar/strings.json +++ b/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": "عفوًا! لا يمكن العثور على الصفحة التي تبحث عنها." + } diff --git a/client/src/gamedata/en/strings.json b/client/src/gamedata/en/strings.json index 45a01777a..19b54c08f 100644 --- a/client/src/gamedata/en/strings.json +++ b/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." } diff --git a/client/src/gamedata/es/strings.json b/client/src/gamedata/es/strings.json index d5003406f..e3d9d07bc 100644 --- a/client/src/gamedata/es/strings.json +++ b/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 repositorio de Github 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." } diff --git a/client/src/gamedata/fr/strings.json b/client/src/gamedata/fr/strings.json index b35b452f9..22370a43d 100644 --- a/client/src/gamedata/fr/strings.json +++ b/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." } diff --git a/client/src/gamedata/ja/strings.json b/client/src/gamedata/ja/strings.json index 92e769fa7..e8afd4896 100644 --- a/client/src/gamedata/ja/strings.json +++ b/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": "おっと！お探しのページが見つかりませんでした。" } diff --git a/client/src/gamedata/pt_br/strings.json b/client/src/gamedata/pt_br/strings.json index 4cab77c33..a13a5e885 100644 --- a/client/src/gamedata/pt_br/strings.json +++ b/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." } diff --git a/client/src/gamedata/ru/strings.json b/client/src/gamedata/ru/strings.json index 172673d01..49b8c3cf3 100644 --- a/client/src/gamedata/ru/strings.json +++ b/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": "Ой! Страница, которую вы ищете, не может быть найдена." } diff --git a/client/src/gamedata/tr/strings.json b/client/src/gamedata/tr/strings.json index a67cfca94..fbe24e9d9 100644 --- a/client/src/gamedata/tr/strings.json +++ b/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ı." } diff --git a/client/src/gamedata/zh_cn/strings.json b/client/src/gamedata/zh_cn/strings.json index 8900b5c90..06065c9cd 100644 --- a/client/src/gamedata/zh_cn/strings.json +++ b/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": "哎呀！您要访问的页面未找到。" } diff --git a/client/src/gamedata/zh_tw/strings.json b/client/src/gamedata/zh_tw/strings.json index 34f75799e..5e45b94ed 100644 --- a/client/src/gamedata/zh_tw/strings.json +++ b/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": "哎呀！您要訪問的頁面未找到。" } diff --git a/client/src/index.js b/client/src/index.js index cab678f98..ceba3c64c 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -60,7 +60,7 @@ root.render( } /> } /> } /> - } /> + } /> diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 803ca51dc..dcd777063 100644 --- a/client/src/styles/app.css +++ b/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; +} \ No newline at end of file