From d23ac6f4a753ad26ec613beb27e72c0c9e6d595a Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Wed, 28 Aug 2024 16:55:47 +0200 Subject: [PATCH 1/6] :heavy_plus_sign: Add connect MetaMask modal --- client/src/containers/App.js | 25 +++++++++++- client/src/gamedata/ar/strings.json | 2 + client/src/gamedata/en/strings.json | 3 ++ client/src/gamedata/es/strings.json | 2 + client/src/gamedata/fr/strings.json | 2 + client/src/gamedata/ja/strings.json | 2 + client/src/gamedata/pt_br/strings.json | 2 + client/src/gamedata/ru/strings.json | 2 + client/src/gamedata/tr/strings.json | 2 + client/src/gamedata/zh_cn/strings.json | 2 + client/src/gamedata/zh_tw/strings.json | 2 + client/src/index.js | 26 ++++++++---- client/src/styles/app.css | 56 ++++++++++++++++++++++++++ 13 files changed, 119 insertions(+), 9 deletions(-) diff --git a/client/src/containers/App.js b/client/src/containers/App.js index 7f089c227..27e2d2c60 100644 --- a/client/src/containers/App.js +++ b/client/src/containers/App.js @@ -18,7 +18,6 @@ import { } from "../utils/networkDeprecation"; import { Helmet } from "react-helmet"; - class App extends React.Component { constructor() { super(); @@ -122,6 +121,13 @@ class App extends React.Component { deployWindow[0].style.display = "none"; } + async function requestAccounts() { + await window.ethereum.request({ method: "eth_requestAccounts" }); + const deployWindow = document.querySelectorAll(".account-connection-window-bg"); + deployWindow[0].style.display = "none"; + window.location.reload(); + } + return (
@@ -187,6 +193,22 @@ class App extends React.Component { + {/*not Account Connected window*/} +
+
+

{randBadIcon()}

+
+

{strings.accountNotConnectedTitle}

+
+

{strings.accountNotConnectedMessage}

+
+ +
+
{/*not Deployed window*/}
{!networkOnDeprecationOrDeprecated(this.state.chainId) ? ( @@ -194,7 +216,6 @@ class App extends React.Component { {/*deploy window*/}

{randGoodIcon()}

{strings.deployMessageTitle}

-
{strings.deployMessage} {supportedNetworksList(supportedNetworks)}

{strings.deployConfirmation}

diff --git a/client/src/gamedata/ar/strings.json b/client/src/gamedata/ar/strings.json index cf640631e..8e9e57be0 100644 --- a/client/src/gamedata/ar/strings.json +++ b/client/src/gamedata/ar/strings.json @@ -26,6 +26,8 @@ "sources": "مصادر", "submitInstance": "تسليم النسخة", "getNewInstance": "احصل على نسخة جديدة", + "accountNotConnectedTitle": "حساب MetaMask غير متصل", + "accountNotConnectedMessage": "لبدء مغامرتك، قم بتوصيل محفظة MetaMask الخاصة بك! تتفاعل لعبتنا بشكل مباشر مع عقود Ethernaut على السلسلة، مما يعني أن أفعالك في اللعبة مسجلة على blockchain. من خلال ربط حساب MetaMask الخاص بك، يمكنك التفاعل بأمان مع هذه العقود الذكية، مما يسمح لك بحل التحديات والتقدم في اللعبة.", "deployMessageTitle": "لم يتم نشر اللعبة", "deployMessage": "تدُعم اللُعبة حاليًا هذه الشبكات فقط:", "deprecatedNetwork": "شبكة عفا عليها الزمن", diff --git a/client/src/gamedata/en/strings.json b/client/src/gamedata/en/strings.json index 9d975b683..077904155 100644 --- a/client/src/gamedata/en/strings.json +++ b/client/src/gamedata/en/strings.json @@ -26,6 +26,9 @@ "sources": "Sources", "submitInstance": "Submit instance", "getNewInstance": "Get new instance", + "accountNotConnectedTitle": "MetaMask account not connected", + "accountNotConnectedMessage": "To begin your adventure, connect your MetaMask wallet! Our game interacts directly with Ethernaut on-chain contracts, which means that your actions in the game are recorded on the blockchain. By linking your MetaMask account, you can securely engage with these smart contracts, allowing you to solve challenges, and progress in the game.", + "connectAccount": "Connect", "deployMessageTitle": "Game not deployed", "deprecatedNetwork": "Network deprecated", "networkBeingDeprecated": "Network being deprecated", diff --git a/client/src/gamedata/es/strings.json b/client/src/gamedata/es/strings.json index 535965f15..5c592ca61 100644 --- a/client/src/gamedata/es/strings.json +++ b/client/src/gamedata/es/strings.json @@ -26,6 +26,8 @@ "sources": "Código", "submitInstance": "Comprueba instancia", "getNewInstance": "Nueva instancia", + "accountNotConnectedTitle": "Cuenta MetaMask no conectada", + "accountNotConnectedMessage": "Para comenzar tu aventura, conecta tu billetera MetaMask. Nuestro juego interactúa directamente con los contratos en cadena de Ethernaut, lo que significa que tus acciones en el juego quedan registradas en la cadena de bloques. Al vincular tu cuenta MetaMask, puedes interactuar de forma segura con estos contratos inteligentes, lo que te permite resolver desafíos y progresar en el juego.", "deployMessageTitle": "Juego no desplegado", "deprecatedNetwork": "Red obsoleta", "networkBeingDeprecated": "Red en desuso", diff --git a/client/src/gamedata/fr/strings.json b/client/src/gamedata/fr/strings.json index a5d59ae31..25c0b5404 100644 --- a/client/src/gamedata/fr/strings.json +++ b/client/src/gamedata/fr/strings.json @@ -26,6 +26,8 @@ "sources": "Sources", "submitInstance": "Soumettre une instance", "getNewInstance": "Créer une nouvelle instance", + "accountNotConnectedTitle": "Compte MetaMask non connecté", + "accountNotConnectedMessage": "Pour commencer votre aventure, connectez votre portefeuille MetaMask ! Notre jeu interagit directement avec les contrats on-chain d'Ethernaut, ce qui signifie que vos actions dans le jeu sont enregistrées sur la blockchain. En liant votre compte MetaMask, vous pouvez interagir en toute sécurité avec ces contrats intelligents, vous permettant de résoudre des défis et de progresser dans le jeu.", "deployMessageTitle": "Jeu non déployé", "deprecatedNetwork": "Réseau obsolète", "networkBeingDeprecated": "Réseau désaffecté", diff --git a/client/src/gamedata/ja/strings.json b/client/src/gamedata/ja/strings.json index ce5d32656..cab0b0891 100644 --- a/client/src/gamedata/ja/strings.json +++ b/client/src/gamedata/ja/strings.json @@ -26,6 +26,8 @@ "sources": "ソース", "submitInstance": "インスタンスの提出", "getNewInstance": "インスタンスの生成", + "accountNotConnectedTitle": "MetaMask アカウントが接続されていません", + "accountNotConnectedMessage": "冒険を始めるには、MetaMask ウォレットを接続してください。私たちのゲームは Ethernaut オンチェーン コントラクトと直接やり取りします。つまり、ゲーム内でのアクションはブロックチェーンに記録されます。MetaMask アカウントをリンクすることで、これらのスマート コントラクトに安全に関与し、課題を解決してゲームを進めることができます。", "deployMessageTitle": "ゲームが展開されていません", "deployMessage": "現在、ゲームはこれらのネットワークのみをサポートしています:", "deprecatedNetwork": "ネットワークは放棄されています", diff --git a/client/src/gamedata/pt_br/strings.json b/client/src/gamedata/pt_br/strings.json index f33c24a31..27e8995b0 100644 --- a/client/src/gamedata/pt_br/strings.json +++ b/client/src/gamedata/pt_br/strings.json @@ -26,6 +26,8 @@ "sources": "Código", "submitInstance": "Enviar instância", "getNewInstance": "Obter nova instância", + "accountNotConnectedTitle": "Conta MetaMask não ligada", + "accountNotConnectedMessage": "Para começar a sua aventura, ligue a sua carteira MetaMask! O nosso jogo interage diretamente com os contratos on-chain do Ethernaut, o que significa que as suas ações no jogo são registadas na blockchain. Ao ligar a sua conta MetaMask, pode interagir com segurança com estes contratos inteligentes, permitindo-lhe resolver desafios e progredir no jogo.", "deployMessageTitle": "Jogo não implantado", "deprecatedNetwork": "Rede obsoleta", "networkBeingDeprecated": "Rede sendo obsoleta", diff --git a/client/src/gamedata/ru/strings.json b/client/src/gamedata/ru/strings.json index 3d289c5aa..a8d40d744 100644 --- a/client/src/gamedata/ru/strings.json +++ b/client/src/gamedata/ru/strings.json @@ -26,6 +26,8 @@ "sources": "Исходный код", "submitInstance": "Отправить инстанс на проверку", "getNewInstance": "Создать новый инстанс", + "accountNotConnectedTitle": "Учетная запись MetaMask не подключена", + "accountNotConnectedMessage": "Чтобы начать приключение, подключите свой кошелек MetaMask! Наша игра напрямую взаимодействует с ончейн-контрактами Ethernaut, что означает, что ваши действия в игре записываются в блокчейн. Подключив свой аккаунт MetaMask, вы можете безопасно взаимодействовать с этими смарт-контрактами, что позволит вам решать задачи и продвигаться в игре.", "deployMessageTitle": "Игра не развернута", "deprecatedNetwork": "заброшенная сеть", "networkBeingDeprecated": "сеть в процессе закрытия", diff --git a/client/src/gamedata/tr/strings.json b/client/src/gamedata/tr/strings.json index f8326636b..e15bcb339 100644 --- a/client/src/gamedata/tr/strings.json +++ b/client/src/gamedata/tr/strings.json @@ -26,6 +26,8 @@ "sources": "Kaynaklar", "submitInstance": "Durum gönder", "getNewInstance": "Yeni durum al", + "accountNotConnectedTitle": "MetaMask hesabı bağlı değil", + "accountNotConnectedMessage": "Maceranıza başlamak için MetaMask cüzdanınızı bağlayın! Oyunumuz doğrudan Ethernaut zincir üstü sözleşmeleriyle etkileşime girer, bu da oyundaki eylemlerinizin blok zincirinde kaydedildiği anlamına gelir. MetaMask hesabınızı bağlayarak bu akıllı sözleşmelerle güvenli bir şekilde etkileşime girebilir, zorlukları çözebilir ve oyunda ilerleyebilirsiniz.", "deployMessageTitle": "Oyun dağıtılmadı", "deprecatedNetwork": "Ağ kullanımdan kaldırıldı", "networkBeingDeprecated": "Ağ kullanımdan kaldırılıyor", diff --git a/client/src/gamedata/zh_cn/strings.json b/client/src/gamedata/zh_cn/strings.json index c4f5fe700..45a3f5062 100644 --- a/client/src/gamedata/zh_cn/strings.json +++ b/client/src/gamedata/zh_cn/strings.json @@ -26,6 +26,8 @@ "sources": "源码", "submitInstance": "提交该实例", "getNewInstance": "生成新实例", + "accountNotConnectedTitle": "MetaMask 帐户未连接", + "accountNotConnectedMessage": "要开始您的冒险，请连接您的 MetaMask 钱包！我们的游戏直接与 Ethernaut 链上合约交互，这意味着您在游戏中的行为会记录在区块链上。通过链接您的 MetaMask 帐户，您可以安全地与这些智能合约互动，从而让您解决​​挑战并在游戏中取得进展。", "deployMessageTitle": "Game not deployed", "deprecatedNetwork": "Network deprecated", "networkBeingDeprecated": "Network being deprecated", diff --git a/client/src/gamedata/zh_tw/strings.json b/client/src/gamedata/zh_tw/strings.json index 5274791aa..c608a8740 100644 --- a/client/src/gamedata/zh_tw/strings.json +++ b/client/src/gamedata/zh_tw/strings.json @@ -26,6 +26,8 @@ "sources": "原始碼", "submitInstance": "提交該實例", "getNewInstance": "產生新實例", + "accountNotConnectedTitle": "MetaMask 帳戶未連接", + "accountNotConnectedMessage": "要開始您的冒險，請連接您的 MetaMask 錢包！我們的遊戲直接與 Ethernaut 鏈上合約交互，這意味著您在遊戲中的行為都會記錄在區塊鏈上。透過連結您的 MetaMask 帳戶，您可以安全地使用這些智能合約，從而解決挑戰並在遊戲中取得進展。", "deployMessageTitle": "遊戲未部署", "deprecatedNetwork": "網路已棄用", "networkBeingDeprecated": "網路將來將被棄用", diff --git a/client/src/index.js b/client/src/index.js index 6fcc2cce5..299dab14c 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -36,6 +36,7 @@ Sentry.init({ store.dispatch(actions.connectWeb3(window.ethereum)); const container = document.getElementById("root"); const root = createRoot(container); + if (!window.ethereum) { //root.render(

Hey, You dont have the supported wallet!

); // let language = localStorage.getItem("lang"); @@ -43,10 +44,18 @@ if (!window.ethereum) { // store.dispatch(actions.setNetworkId(parseInt("5"))); store.dispatch(actions.loadGamedata()); } else { - window.ethereum.request({ method: "eth_chainId" }).then((res) => { - store.dispatch(actions.setNetworkId(parseInt(res))); - store.dispatch(actions.loadGamedata()); - }) + window.ethereum.request({ method: "eth_accounts" }).then((res) => { + if (res.length !== 0) { + console.log(res) + window.ethereum.request({ method: "eth_chainId" }).then((res) => { + store.dispatch(actions.setNetworkId(parseInt(res))); + store.dispatch(actions.loadGamedata()); + }); + } else { + const accountConnectionWindow = document.querySelectorAll('.account-connection-window-bg'); + if (accountConnectionWindow[0]) accountConnectionWindow[0].style.display = 'block'; + } + }); } root.render( @@ -69,7 +78,11 @@ root.render( // Post-load actions. window.addEventListener("load", async () => { - if (window.ethereum) { + // Check if any MetaMask account is connected to the frontend + const eth_accounts = await window.ethereum.request({ method: "eth_accounts" }); + const accountConnected = eth_accounts.length !== 0; + + if (window.ethereum && accountConnected) { window.web3 = new constants.Web3(window.ethereum); try { await window.ethereum.request({ method: `eth_requestAccounts` }); @@ -79,8 +92,7 @@ window.addEventListener("load", async () => { window.web3 = null; } } - - if (window.web3) { + if (window.web3 && accountConnected) { ethutil.setWeb3(window.web3); // ethutil.attachLogger(); diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 1bc810aa4..493d06dea 100644 --- a/client/src/styles/app.css +++ b/client/src/styles/app.css @@ -275,6 +275,54 @@ nav li { margin-bottom: 2em; } +.account-connection-window-bg{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.3); + z-index: 4; + display: none; +} + +.account-connection-window { + position: fixed; + top: 20%; + width: 40%; + left: 30%; + right: 30%; + display: inherit; + background-color: var(--primary-color); + z-index: 5; + padding: 2% 2% 2% 2%; + box-shadow: black 0px 0px 60px; + border: 2px solid var(--secondary-color); + border-radius: 6px; +} + +.account-connection-window h1 { + text-align: center; +} + +.account-connection-window h2 { + font-size: 2.5em; + text-align: center; +} + +.account-connection-window button { + display: block; + margin-left: auto; + margin-right: auto; + width: fit-content; +} + +.account-connection-window p { + font-size: 1.1em; + text-align: justify; +} + + .deploy-window-bg { position: fixed; top: 0; @@ -309,6 +357,14 @@ nav li { text-align: center; } +.deploy-window h2 { + font-size: 2.5em; +} + +.deploy-window p { + font-size: 1.1em; +} + .choice-buttons { display: flex; justify-content: space-evenly; From c6d46c75fad462ff3a65f0f5e86733a97ea080e4 Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Wed, 28 Aug 2024 22:33:39 +0200 Subject: [PATCH 2/6] :heavy_plus_sign: Add read-only mode --- client/src/actions/index.js | 3 + client/src/containers/App.js | 31 +++++++-- client/src/containers/Header.js | 78 ++++++++++++----------- client/src/containers/Level.js | 3 +- client/src/gamedata/ar/strings.json | 1 + client/src/gamedata/en/strings.json | 1 + client/src/gamedata/es/strings.json | 1 + client/src/gamedata/fr/strings.json | 1 + client/src/gamedata/ja/strings.json | 1 + client/src/gamedata/pt_br/strings.json | 1 + client/src/gamedata/ru/strings.json | 1 + client/src/gamedata/tr/strings.json | 1 + client/src/gamedata/zh_cn/strings.json | 1 + client/src/gamedata/zh_tw/strings.json | 2 +- client/src/index.js | 11 ++-- client/src/middlewares/setGameReadOnly.js | 8 +++ client/src/reducers/gamedataReducer.js | 7 ++ client/src/styles/app.css | 7 -- 18 files changed, 100 insertions(+), 59 deletions(-) create mode 100644 client/src/middlewares/setGameReadOnly.js diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 9c08b059e..ac2577057 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -10,6 +10,9 @@ export const setNetworkId = id => ({ type: SET_NETWORK_ID, id }) export const SET_PLAYER_ADDRESS = "SET_PLAYER_ADDRESS"; export const setPlayerAddress = address => ({ type: SET_PLAYER_ADDRESS, address }) +export const SET_GAME_READ_ONLY = "SET_GAME_READ_ONLY"; +export const setGameReadOnly = readOnly => ({ type: SET_GAME_READ_ONLY, readOnly }) + export const LOAD_GAME_DATA = "LOAD_GAME_DATA"; export const loadGamedata = () => ({ type: LOAD_GAME_DATA, levels: undefined }) diff --git a/client/src/containers/App.js b/client/src/containers/App.js index 27e2d2c60..949ad7b78 100644 --- a/client/src/containers/App.js +++ b/client/src/containers/App.js @@ -17,6 +17,8 @@ import { deprecationDate, } from "../utils/networkDeprecation"; import { Helmet } from "react-helmet"; +import { store } from "./../store"; +import * as actions from "../../src/actions"; class App extends React.Component { constructor() { @@ -121,10 +123,22 @@ class App extends React.Component { deployWindow[0].style.display = "none"; } + async function continueInReadOnly(){ + store.dispatch(actions.loadGamedata()); + store.dispatch(actions.setGameReadOnly(true)); + const accountConnectionWindow = document.querySelectorAll( + ".account-connection-window-bg" + ); + accountConnectionWindow[0].style.display = "none"; + console.log(store.getState().gamedata.readOnly) + } + async function requestAccounts() { await window.ethereum.request({ method: "eth_requestAccounts" }); - const deployWindow = document.querySelectorAll(".account-connection-window-bg"); - deployWindow[0].style.display = "none"; + const accountConnectionWindow = document.querySelectorAll( + ".account-connection-window-bg" + ); + accountConnectionWindow[0].style.display = "none"; window.location.reload(); } @@ -202,11 +216,14 @@ class App extends React.Component {

{strings.accountNotConnectedMessage}


- +
+ + +
{/*not Deployed window*/} diff --git a/client/src/containers/Header.js b/client/src/containers/Header.js index b008a72a5..ac2bf25d2 100644 --- a/client/src/containers/Header.js +++ b/client/src/containers/Header.js @@ -11,6 +11,7 @@ import PropTypes from "prop-types"; import { ProgressBar } from "react-loader-spinner"; import { svgFilter } from "../utils/svg"; import LeaderIcon from "../components/leaderboard/LeaderIcon"; +import { store } from "../store"; // import parse from "html-react-parser"; class Header extends React.Component { @@ -24,7 +25,7 @@ class Header extends React.Component { multiDDOpen: false, }; - if (this.props.web3) { + if (this.props.web3 && !store.getState().gamedata.readOnly) { window.ethereum.request({ method: "eth_chainId" }).then((id) => { this.setState({ chainId: Number(id) }); }); @@ -325,7 +326,8 @@ class Header extends React.Component { {window.location.pathname === constants.PATH_ROOT && - !!this.props.web3 && ( + !!this.props.web3 && + !store.getState().gamedata.readOnly && ( this.toggleDropdownState()} to={constants.PATH_LEADERBOARD} @@ -344,43 +346,43 @@ class Header extends React.Component { /> - -
-

this.setActiveTab(2)}> - - {strings.Networks} -

-
- {Object.values(constants.NETWORKS_INGAME).map( - (network, index) => { - if (network && network.name !== "local") { - if (Number(network.id) === this.state.chainId) - return false; // filter out current network - return ( -
{ - e.preventDefault(); - this.changeNetwork(network); - }} - className="dropdown-pill" - > - - {network.name} - -
- ); + {this.props.web3 && !store.getState().gamedata.readOnly && ( +
+

this.setActiveTab(2)}> + + {strings.Networks} +

+
+ {Object.values(constants.NETWORKS_INGAME).map( + (network, index) => { + if (network && network.name !== "local") { + if (Number(network.id) === this.state.chainId) + return false; // filter out current network + return ( +
{ + e.preventDefault(); + this.changeNetwork(network); + }} + className="dropdown-pill" + > + + {network.name} + +
+ ); + } + return null; } - return null; - } - )} + )} +
-
- + )}

this.setActiveTab(1)}> @@ -438,7 +440,7 @@ class Header extends React.Component { wrapperClass="progress-bar-wrapper" visible={true} /> - {!this.props.web3 && ( + {!this.props.web3 && !store.getState().gamedata.readOnly && (

{ if (res.length !== 0) { - console.log(res) window.ethereum.request({ method: "eth_chainId" }).then((res) => { store.dispatch(actions.setNetworkId(parseInt(res))); store.dispatch(actions.loadGamedata()); @@ -79,10 +78,12 @@ root.render( // Post-load actions. window.addEventListener("load", async () => { // Check if any MetaMask account is connected to the frontend - const eth_accounts = await window.ethereum.request({ method: "eth_accounts" }); - const accountConnected = eth_accounts.length !== 0; - - if (window.ethereum && accountConnected) { + let accountConnected = false; + if(window.ethereum) { + const eth_accounts = await window.ethereum.request({ method: "eth_accounts" }); + accountConnected = eth_accounts.length !== 0; + } + if (accountConnected) { window.web3 = new constants.Web3(window.ethereum); try { await window.ethereum.request({ method: `eth_requestAccounts` }); diff --git a/client/src/middlewares/setGameReadOnly.js b/client/src/middlewares/setGameReadOnly.js new file mode 100644 index 000000000..8cedf957b --- /dev/null +++ b/client/src/middlewares/setGameReadOnly.js @@ -0,0 +1,8 @@ +import * as actions from '../actions'; + +const setGameReadOnly = store => next => action => { + if (action.type !== actions.SET_GAME_READ_ONLY) return next(action) + +} + +export default setGameReadOnly diff --git a/client/src/reducers/gamedataReducer.js b/client/src/reducers/gamedataReducer.js index b4e129773..78ede1f19 100644 --- a/client/src/reducers/gamedataReducer.js +++ b/client/src/reducers/gamedataReducer.js @@ -1,6 +1,7 @@ import * as actions from '../actions'; const initialState = { + readOnly: false, ethernautAddress: undefined, activeLevel: undefined, levels: [] @@ -9,6 +10,12 @@ const initialState = { const gameDataReducer = function(state = initialState, action) { switch(action.type) { + case actions.SET_GAME_READ_ONLY: + return { + ...state, + readOnly: action.readOnly + } + case actions.LOAD_GAME_DATA: return { ...state, diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 493d06dea..3463ca861 100644 --- a/client/src/styles/app.css +++ b/client/src/styles/app.css @@ -310,13 +310,6 @@ nav li { text-align: center; } -.account-connection-window button { - display: block; - margin-left: auto; - margin-right: auto; - width: fit-content; -} - .account-connection-window p { font-size: 1.1em; text-align: justify; From 7f9e89e90ab64caf49c8eab53d421f296f6f8aff Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Thu, 29 Aug 2024 09:32:29 +0200 Subject: [PATCH 3/6] :heavy_plus_sign: Add `connectAccount` string to translations --- client/src/gamedata/ar/strings.json | 1 + client/src/gamedata/es/strings.json | 1 + client/src/gamedata/fr/strings.json | 1 + client/src/gamedata/ja/strings.json | 1 + client/src/gamedata/pt_br/strings.json | 1 + client/src/gamedata/ru/strings.json | 1 + client/src/gamedata/tr/strings.json | 1 + client/src/gamedata/zh_cn/strings.json | 1 + client/src/gamedata/zh_tw/strings.json | 1 + 9 files changed, 9 insertions(+) diff --git a/client/src/gamedata/ar/strings.json b/client/src/gamedata/ar/strings.json index 6a5941c22..45a4f856a 100644 --- a/client/src/gamedata/ar/strings.json +++ b/client/src/gamedata/ar/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "حساب MetaMask غير متصل", "accountNotConnectedMessage": "لبدء مغامرتك، قم بتوصيل محفظة MetaMask الخاصة بك! تتفاعل لعبتنا بشكل مباشر مع عقود Ethernaut على السلسلة، مما يعني أن أفعالك في اللعبة مسجلة على blockchain. من خلال ربط حساب MetaMask الخاص بك، يمكنك التفاعل بأمان مع هذه العقود الذكية، مما يسمح لك بحل التحديات والتقدم في اللعبة.", "continueInReadOnly" : "متابعة في القراءة فقط", + "connectAccount": "يتصل", "deployMessageTitle": "لم يتم نشر اللعبة", "deployMessage": "تدُعم اللُعبة حاليًا هذه الشبكات فقط:", "deprecatedNetwork": "شبكة عفا عليها الزمن", diff --git a/client/src/gamedata/es/strings.json b/client/src/gamedata/es/strings.json index 62b971ab3..c95cdd65f 100644 --- a/client/src/gamedata/es/strings.json +++ b/client/src/gamedata/es/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "Cuenta MetaMask no conectada", "accountNotConnectedMessage": "Para comenzar tu aventura, conecta tu billetera MetaMask. Nuestro juego interactúa directamente con los contratos en cadena de Ethernaut, lo que significa que tus acciones en el juego quedan registradas en la cadena de bloques. Al vincular tu cuenta MetaMask, puedes interactuar de forma segura con estos contratos inteligentes, lo que te permite resolver desafíos y progresar en el juego.", "continueInReadOnly" : "Modo solo lectura", + "connectAccount": "Conectar", "deployMessageTitle": "Juego no desplegado", "deprecatedNetwork": "Red obsoleta", "networkBeingDeprecated": "Red en desuso", diff --git a/client/src/gamedata/fr/strings.json b/client/src/gamedata/fr/strings.json index 7bdbb05fe..2af67b085 100644 --- a/client/src/gamedata/fr/strings.json +++ b/client/src/gamedata/fr/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "Compte MetaMask non connecté", "accountNotConnectedMessage": "Pour commencer votre aventure, connectez votre portefeuille MetaMask ! Notre jeu interagit directement avec les contrats on-chain d'Ethernaut, ce qui signifie que vos actions dans le jeu sont enregistrées sur la blockchain. En liant votre compte MetaMask, vous pouvez interagir en toute sécurité avec ces contrats intelligents, vous permettant de résoudre des défis et de progresser dans le jeu.", "continueInReadOnly" : "mode lecture seule", + "connectAccount": "Connecter", "deployMessageTitle": "Jeu non déployé", "deprecatedNetwork": "Réseau obsolète", "networkBeingDeprecated": "Réseau désaffecté", diff --git a/client/src/gamedata/ja/strings.json b/client/src/gamedata/ja/strings.json index 82cc57344..f31a72be3 100644 --- a/client/src/gamedata/ja/strings.json +++ b/client/src/gamedata/ja/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "MetaMask アカウントが接続されていません", "accountNotConnectedMessage": "冒険を始めるには、MetaMask ウォレットを接続してください。私たちのゲームは Ethernaut オンチェーン コントラクトと直接やり取りします。つまり、ゲーム内でのアクションはブロックチェーンに記録されます。MetaMask アカウントをリンクすることで、これらのスマート コントラクトに安全に関与し、課題を解決してゲームを進めることができます。", "continueInReadOnly" : "読み取り専用モード", + "connectAccount": "接続する", "deployMessageTitle": "ゲームが展開されていません", "deployMessage": "現在、ゲームはこれらのネットワークのみをサポートしています:", "deprecatedNetwork": "ネットワークは放棄されています", diff --git a/client/src/gamedata/pt_br/strings.json b/client/src/gamedata/pt_br/strings.json index c1452ad4d..ab5942419 100644 --- a/client/src/gamedata/pt_br/strings.json +++ b/client/src/gamedata/pt_br/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "Conta MetaMask não ligada", "accountNotConnectedMessage": "Para começar a sua aventura, ligue a sua carteira MetaMask! O nosso jogo interage diretamente com os contratos on-chain do Ethernaut, o que significa que as suas ações no jogo são registadas na blockchain. Ao ligar a sua conta MetaMask, pode interagir com segurança com estes contratos inteligentes, permitindo-lhe resolver desafios e progredir no jogo.", "continueInReadOnly" : "modo de leitura apenas", + "connectAccount": "Ligar", "deployMessageTitle": "Jogo não implantado", "deprecatedNetwork": "Rede obsoleta", "networkBeingDeprecated": "Rede sendo obsoleta", diff --git a/client/src/gamedata/ru/strings.json b/client/src/gamedata/ru/strings.json index 49e9a005d..fafdc9d17 100644 --- a/client/src/gamedata/ru/strings.json +++ b/client/src/gamedata/ru/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "Учетная запись MetaMask не подключена", "accountNotConnectedMessage": "Чтобы начать приключение, подключите свой кошелек MetaMask! Наша игра напрямую взаимодействует с ончейн-контрактами Ethernaut, что означает, что ваши действия в игре записываются в блокчейн. Подключив свой аккаунт MetaMask, вы можете безопасно взаимодействовать с этими смарт-контрактами, что позволит вам решать задачи и продвигаться в игре.", "continueInReadOnly" : "режим только для чтения", + "connectAccount": "Bağlamak", "deployMessageTitle": "Игра не развернута", "deprecatedNetwork": "заброшенная сеть", "networkBeingDeprecated": "сеть в процессе закрытия", diff --git a/client/src/gamedata/tr/strings.json b/client/src/gamedata/tr/strings.json index 6ed1ec254..9c519b2d4 100644 --- a/client/src/gamedata/tr/strings.json +++ b/client/src/gamedata/tr/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "MetaMask hesabı bağlı değil", "accountNotConnectedMessage": "Maceranıza başlamak için MetaMask cüzdanınızı bağlayın! Oyunumuz doğrudan Ethernaut zincir üstü sözleşmeleriyle etkileşime girer, bu da oyundaki eylemlerinizin blok zincirinde kaydedildiği anlamına gelir. MetaMask hesabınızı bağlayarak bu akıllı sözleşmelerle güvenli bir şekilde etkileşime girebilir, zorlukları çözebilir ve oyunda ilerleyebilirsiniz.", "continueInReadOnly" : "salt okunur modu", + "connectAccount": "Bağlamak", "deployMessageTitle": "Oyun dağıtılmadı", "deprecatedNetwork": "Ağ kullanımdan kaldırıldı", "networkBeingDeprecated": "Ağ kullanımdan kaldırılıyor", diff --git a/client/src/gamedata/zh_cn/strings.json b/client/src/gamedata/zh_cn/strings.json index 29cab6d2b..b7fcbd083 100644 --- a/client/src/gamedata/zh_cn/strings.json +++ b/client/src/gamedata/zh_cn/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "MetaMask 帐户未连接", "accountNotConnectedMessage": "要开始您的冒险，请连接您的 MetaMask 钱包！我们的游戏直接与 Ethernaut 链上合约交互，这意味着您在游戏中的行为会记录在区块链上。通过链接您的 MetaMask 帐户，您可以安全地与这些智能合约互动，从而让您解决​​挑战并在游戏中取得进展。", "continueInReadOnly" : "只读模式", + "connectAccount": "连接", "deployMessageTitle": "Game not deployed", "deprecatedNetwork": "Network deprecated", "networkBeingDeprecated": "Network being deprecated", diff --git a/client/src/gamedata/zh_tw/strings.json b/client/src/gamedata/zh_tw/strings.json index 6b7f0a9fc..dcf99ecf4 100644 --- a/client/src/gamedata/zh_tw/strings.json +++ b/client/src/gamedata/zh_tw/strings.json @@ -29,6 +29,7 @@ "accountNotConnectedTitle": "MetaMask 帳戶未連接", "accountNotConnectedMessage": "要開始您的冒險，請連接您的 MetaMask 錢包！我們的遊戲直接與 Ethernaut 鏈上合約交互，這意味著您在遊戲中的行為都會記錄在區塊鏈上。透過連結您的 MetaMask 帳戶，您可以安全地使用這些智能合約，從而解決挑戰並在遊戲中取得進展。", "continueInReadOnly" : "唯讀模式", + "connectAccount": "連接", "deployMessageTitle": "遊戲未部署", "deprecatedNetwork": "網路已棄用", "networkBeingDeprecated": "網路將來將被棄用", From acfbf0d979c32254e235d975150a276236d6cff1 Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Thu, 29 Aug 2024 09:45:19 +0200 Subject: [PATCH 4/6] :recycle: Re-factor functions definitions --- client/src/containers/App.js | 72 ++++++++++++++++++++++-------------- 1 file changed, 44 insertions(+), 28 deletions(-) diff --git a/client/src/containers/App.js b/client/src/containers/App.js index 949ad7b78..6bc44a82b 100644 --- a/client/src/containers/App.js +++ b/client/src/containers/App.js @@ -62,6 +62,37 @@ class App extends React.Component { this.props.navigate(`${constants.PATH_LEVEL_ROOT}${target}`); } + async continueAnyway() { + const deployWindow = document.querySelectorAll(".deploy-window-bg"); + deployWindow[0].style.display = "none"; + } + + async continueInReadOnly() { + store.dispatch(actions.loadGamedata()); + store.dispatch(actions.setGameReadOnly(true)); + const accountConnectionWindow = document.querySelectorAll( + ".account-connection-window-bg" + ); + accountConnectionWindow[0].style.display = "none"; + console.log(store.getState().gamedata.readOnly); + } + + displayConnectionWindow() { + const accountConnectionWindow = document.querySelectorAll( + ".account-connection-window-bg" + ); + accountConnectionWindow[0].style.display = "block"; + } + + async requestAccounts() { + await window.ethereum.request({ method: "eth_requestAccounts" }); + const accountConnectionWindow = document.querySelectorAll( + ".account-connection-window-bg" + ); + accountConnectionWindow[0].style.display = "none"; + } + + render() { let language = localStorage.getItem("lang"); let strings = loadTranslations(language); @@ -118,30 +149,6 @@ class App extends React.Component { } } - async function continueAnyway() { - const deployWindow = document.querySelectorAll(".deploy-window-bg"); - deployWindow[0].style.display = "none"; - } - - async function continueInReadOnly(){ - store.dispatch(actions.loadGamedata()); - store.dispatch(actions.setGameReadOnly(true)); - const accountConnectionWindow = document.querySelectorAll( - ".account-connection-window-bg" - ); - accountConnectionWindow[0].style.display = "none"; - console.log(store.getState().gamedata.readOnly) - } - - async function requestAccounts() { - await window.ethereum.request({ method: "eth_requestAccounts" }); - const accountConnectionWindow = document.querySelectorAll( - ".account-connection-window-bg" - ); - accountConnectionWindow[0].style.display = "none"; - window.location.reload(); - } - return (
@@ -200,7 +207,10 @@ class App extends React.Component { />
    -
@@ -263,7 +279,7 @@ class App extends React.Component { {strings.switchToSepolia} {!isDeprecatedNetwork(this.state.chainId) && ( - )} From 436115d47d745979cc70efee346fa2776cdd8212 Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Thu, 29 Aug 2024 10:38:59 +0200 Subject: [PATCH 5/6] :heavy_plus_sign: Adding connect button --- client/src/containers/App.js | 13 +++++++------ client/src/containers/Header.js | 15 ++++++++++++++- client/src/styles/app.css | 4 ++++ 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/client/src/containers/App.js b/client/src/containers/App.js index 6bc44a82b..7b7060994 100644 --- a/client/src/containers/App.js +++ b/client/src/containers/App.js @@ -74,10 +74,9 @@ class App extends React.Component { ".account-connection-window-bg" ); accountConnectionWindow[0].style.display = "none"; - console.log(store.getState().gamedata.readOnly); } - displayConnectionWindow() { + async displayConnectionWindow() { const accountConnectionWindow = document.querySelectorAll( ".account-connection-window-bg" ); @@ -92,7 +91,6 @@ class App extends React.Component { accountConnectionWindow[0].style.display = "none"; } - render() { let language = localStorage.getItem("lang"); let strings = loadTranslations(language); @@ -207,9 +205,12 @@ class App extends React.Component { />
    + )} +
{this.props.web3 && !store.getState().gamedata.readOnly && ( diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 3463ca861..88f2274b0 100644 --- a/client/src/styles/app.css +++ b/client/src/styles/app.css @@ -315,6 +315,10 @@ nav li { text-align: justify; } +.connect-button{ + margin-left: auto; +} + .deploy-window-bg { position: fixed; From 22d4ee356bbc37d0c37dfdb34db2722a59c18414 Mon Sep 17 00:00:00 2001 From: GianfrancoBazzani Date: Mon, 2 Sep 2024 18:24:01 +0200 Subject: [PATCH 6/6] :recycle: Replace read only button with X to close the modal --- client/src/containers/App.js | 8 +- client/src/gamedata/ar/strings.json | 1 - client/src/gamedata/en/strings.json | 1 - client/src/gamedata/es/strings.json | 1 - client/src/gamedata/fr/strings.json | 1 - client/src/gamedata/ja/strings.json | 1 - client/src/gamedata/pt_br/strings.json | 1 - client/src/gamedata/ru/strings.json | 1 - client/src/gamedata/tr/strings.json | 1 - client/src/gamedata/zh_cn/strings.json | 1 - client/src/gamedata/zh_tw/strings.json | 1 - client/src/styles/app.css | 112 +++++++++++++------------ 12 files changed, 62 insertions(+), 68 deletions(-) diff --git a/client/src/containers/App.js b/client/src/containers/App.js index 7b7060994..b7baba979 100644 --- a/client/src/containers/App.js +++ b/client/src/containers/App.js @@ -221,6 +221,11 @@ class App extends React.Component { {/*not Account Connected window*/}
+

{randBadIcon()}


{strings.accountNotConnectedTitle}

@@ -237,9 +242,6 @@ class App extends React.Component { > {strings.connectAccount} -
diff --git a/client/src/gamedata/ar/strings.json b/client/src/gamedata/ar/strings.json index 45a4f856a..e052fe024 100644 --- a/client/src/gamedata/ar/strings.json +++ b/client/src/gamedata/ar/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "احصل على نسخة جديدة", "accountNotConnectedTitle": "حساب MetaMask غير متصل", "accountNotConnectedMessage": "لبدء مغامرتك، قم بتوصيل محفظة MetaMask الخاصة بك! تتفاعل لعبتنا بشكل مباشر مع عقود Ethernaut على السلسلة، مما يعني أن أفعالك في اللعبة مسجلة على blockchain. من خلال ربط حساب MetaMask الخاص بك، يمكنك التفاعل بأمان مع هذه العقود الذكية، مما يسمح لك بحل التحديات والتقدم في اللعبة.", - "continueInReadOnly" : "متابعة في القراءة فقط", "connectAccount": "يتصل", "deployMessageTitle": "لم يتم نشر اللعبة", "deployMessage": "تدُعم اللُعبة حاليًا هذه الشبكات فقط:", diff --git a/client/src/gamedata/en/strings.json b/client/src/gamedata/en/strings.json index e06cb0de0..077904155 100644 --- a/client/src/gamedata/en/strings.json +++ b/client/src/gamedata/en/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Get new instance", "accountNotConnectedTitle": "MetaMask account not connected", "accountNotConnectedMessage": "To begin your adventure, connect your MetaMask wallet! Our game interacts directly with Ethernaut on-chain contracts, which means that your actions in the game are recorded on the blockchain. By linking your MetaMask account, you can securely engage with these smart contracts, allowing you to solve challenges, and progress in the game.", - "continueInReadOnly" : "Continue in read-only", "connectAccount": "Connect", "deployMessageTitle": "Game not deployed", "deprecatedNetwork": "Network deprecated", diff --git a/client/src/gamedata/es/strings.json b/client/src/gamedata/es/strings.json index c95cdd65f..afed6ab74 100644 --- a/client/src/gamedata/es/strings.json +++ b/client/src/gamedata/es/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Nueva instancia", "accountNotConnectedTitle": "Cuenta MetaMask no conectada", "accountNotConnectedMessage": "Para comenzar tu aventura, conecta tu billetera MetaMask. Nuestro juego interactúa directamente con los contratos en cadena de Ethernaut, lo que significa que tus acciones en el juego quedan registradas en la cadena de bloques. Al vincular tu cuenta MetaMask, puedes interactuar de forma segura con estos contratos inteligentes, lo que te permite resolver desafíos y progresar en el juego.", - "continueInReadOnly" : "Modo solo lectura", "connectAccount": "Conectar", "deployMessageTitle": "Juego no desplegado", "deprecatedNetwork": "Red obsoleta", diff --git a/client/src/gamedata/fr/strings.json b/client/src/gamedata/fr/strings.json index 2af67b085..20cd09e0a 100644 --- a/client/src/gamedata/fr/strings.json +++ b/client/src/gamedata/fr/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Créer une nouvelle instance", "accountNotConnectedTitle": "Compte MetaMask non connecté", "accountNotConnectedMessage": "Pour commencer votre aventure, connectez votre portefeuille MetaMask ! Notre jeu interagit directement avec les contrats on-chain d'Ethernaut, ce qui signifie que vos actions dans le jeu sont enregistrées sur la blockchain. En liant votre compte MetaMask, vous pouvez interagir en toute sécurité avec ces contrats intelligents, vous permettant de résoudre des défis et de progresser dans le jeu.", - "continueInReadOnly" : "mode lecture seule", "connectAccount": "Connecter", "deployMessageTitle": "Jeu non déployé", "deprecatedNetwork": "Réseau obsolète", diff --git a/client/src/gamedata/ja/strings.json b/client/src/gamedata/ja/strings.json index f31a72be3..177ed8bcc 100644 --- a/client/src/gamedata/ja/strings.json +++ b/client/src/gamedata/ja/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "インスタンスの生成", "accountNotConnectedTitle": "MetaMask アカウントが接続されていません", "accountNotConnectedMessage": "冒険を始めるには、MetaMask ウォレットを接続してください。私たちのゲームは Ethernaut オンチェーン コントラクトと直接やり取りします。つまり、ゲーム内でのアクションはブロックチェーンに記録されます。MetaMask アカウントをリンクすることで、これらのスマート コントラクトに安全に関与し、課題を解決してゲームを進めることができます。", - "continueInReadOnly" : "読み取り専用モード", "connectAccount": "接続する", "deployMessageTitle": "ゲームが展開されていません", "deployMessage": "現在、ゲームはこれらのネットワークのみをサポートしています:", diff --git a/client/src/gamedata/pt_br/strings.json b/client/src/gamedata/pt_br/strings.json index ab5942419..7553a13e0 100644 --- a/client/src/gamedata/pt_br/strings.json +++ b/client/src/gamedata/pt_br/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Obter nova instância", "accountNotConnectedTitle": "Conta MetaMask não ligada", "accountNotConnectedMessage": "Para começar a sua aventura, ligue a sua carteira MetaMask! O nosso jogo interage diretamente com os contratos on-chain do Ethernaut, o que significa que as suas ações no jogo são registadas na blockchain. Ao ligar a sua conta MetaMask, pode interagir com segurança com estes contratos inteligentes, permitindo-lhe resolver desafios e progredir no jogo.", - "continueInReadOnly" : "modo de leitura apenas", "connectAccount": "Ligar", "deployMessageTitle": "Jogo não implantado", "deprecatedNetwork": "Rede obsoleta", diff --git a/client/src/gamedata/ru/strings.json b/client/src/gamedata/ru/strings.json index fafdc9d17..7f0eee3dd 100644 --- a/client/src/gamedata/ru/strings.json +++ b/client/src/gamedata/ru/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Создать новый инстанс", "accountNotConnectedTitle": "Учетная запись MetaMask не подключена", "accountNotConnectedMessage": "Чтобы начать приключение, подключите свой кошелек MetaMask! Наша игра напрямую взаимодействует с ончейн-контрактами Ethernaut, что означает, что ваши действия в игре записываются в блокчейн. Подключив свой аккаунт MetaMask, вы можете безопасно взаимодействовать с этими смарт-контрактами, что позволит вам решать задачи и продвигаться в игре.", - "continueInReadOnly" : "режим только для чтения", "connectAccount": "Bağlamak", "deployMessageTitle": "Игра не развернута", "deprecatedNetwork": "заброшенная сеть", diff --git a/client/src/gamedata/tr/strings.json b/client/src/gamedata/tr/strings.json index 9c519b2d4..0c6b9a6b3 100644 --- a/client/src/gamedata/tr/strings.json +++ b/client/src/gamedata/tr/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "Yeni durum al", "accountNotConnectedTitle": "MetaMask hesabı bağlı değil", "accountNotConnectedMessage": "Maceranıza başlamak için MetaMask cüzdanınızı bağlayın! Oyunumuz doğrudan Ethernaut zincir üstü sözleşmeleriyle etkileşime girer, bu da oyundaki eylemlerinizin blok zincirinde kaydedildiği anlamına gelir. MetaMask hesabınızı bağlayarak bu akıllı sözleşmelerle güvenli bir şekilde etkileşime girebilir, zorlukları çözebilir ve oyunda ilerleyebilirsiniz.", - "continueInReadOnly" : "salt okunur modu", "connectAccount": "Bağlamak", "deployMessageTitle": "Oyun dağıtılmadı", "deprecatedNetwork": "Ağ kullanımdan kaldırıldı", diff --git a/client/src/gamedata/zh_cn/strings.json b/client/src/gamedata/zh_cn/strings.json index b7fcbd083..d136c5065 100644 --- a/client/src/gamedata/zh_cn/strings.json +++ b/client/src/gamedata/zh_cn/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "生成新实例", "accountNotConnectedTitle": "MetaMask 帐户未连接", "accountNotConnectedMessage": "要开始您的冒险，请连接您的 MetaMask 钱包！我们的游戏直接与 Ethernaut 链上合约交互，这意味着您在游戏中的行为会记录在区块链上。通过链接您的 MetaMask 帐户，您可以安全地与这些智能合约互动，从而让您解决​​挑战并在游戏中取得进展。", - "continueInReadOnly" : "只读模式", "connectAccount": "连接", "deployMessageTitle": "Game not deployed", "deprecatedNetwork": "Network deprecated", diff --git a/client/src/gamedata/zh_tw/strings.json b/client/src/gamedata/zh_tw/strings.json index dcf99ecf4..88705e573 100644 --- a/client/src/gamedata/zh_tw/strings.json +++ b/client/src/gamedata/zh_tw/strings.json @@ -28,7 +28,6 @@ "getNewInstance": "產生新實例", "accountNotConnectedTitle": "MetaMask 帳戶未連接", "accountNotConnectedMessage": "要開始您的冒險，請連接您的 MetaMask 錢包！我們的遊戲直接與 Ethernaut 鏈上合約交互，這意味著您在遊戲中的行為都會記錄在區塊鏈上。透過連結您的 MetaMask 帳戶，您可以安全地使用這些智能合約，從而解決挑戰並在遊戲中取得進展。", - "continueInReadOnly" : "唯讀模式", "connectAccount": "連接", "deployMessageTitle": "遊戲未部署", "deprecatedNetwork": "網路已棄用", diff --git a/client/src/styles/app.css b/client/src/styles/app.css index 88f2274b0..0b1a7279c 100644 --- a/client/src/styles/app.css +++ b/client/src/styles/app.css @@ -85,7 +85,6 @@ ul { margin-top: -15%; } */ - .lines { margin-bottom: 4%; margin-top: 2%; @@ -154,19 +153,18 @@ button :hover { align-items: center; } - .top-banner { display: flex; gap: 10%; align-items: center; justify-content: space-between; - width: 100%; + width: 100%; height: 80px; border-radius: 6px; border: 2px solid var(--secondary-color); margin-bottom: 4%; margin-top: 2%; - padding: 2% + padding: 2%; } .top-banner-text { @@ -205,7 +203,7 @@ nav li { font-family: helvetica, sans-serif; } -.nav-links button i:hover{ +.nav-links button i:hover { outline: none; background: transparent; } @@ -275,7 +273,7 @@ nav li { margin-bottom: 2em; } -.account-connection-window-bg{ +.account-connection-window-bg { position: fixed; top: 0; left: 0; @@ -287,7 +285,7 @@ nav li { } .account-connection-window { - position: fixed; + position: relative; top: 20%; width: 40%; left: 30%; @@ -303,22 +301,29 @@ nav li { .account-connection-window h1 { text-align: center; -} +} .account-connection-window h2 { font-size: 2.5em; text-align: center; -} +} .account-connection-window p { font-size: 1.1em; text-align: justify; } -.connect-button{ - margin-left: auto; +.account-connection-close-x { + position: absolute; + right: 2.5%; + top: 2.5%; + width: 1.75rem; + height: 1.75rem; } +.connect-button { + margin-left: auto; +} .deploy-window-bg { position: fixed; @@ -477,10 +482,10 @@ nav li { padding-left: 50px; padding-right: 50px; } -.author-section-border{ +.author-section-border { border: none !important; } -.author-section{ +.author-section { width: 60%; margin-left: 20%; @@ -603,13 +608,12 @@ footer { display: none; } - /* --------- styles for multi dropdowns --------------*/ -.multi-dropdown{ +.multi-dropdown { padding: 0% 0px; } -.multi-dropdown__icon{ +.multi-dropdown__icon { color: var(--primary-color); background-color: var(--secondary-color); padding: 4px 9px; @@ -622,11 +626,11 @@ footer { font-size: 20px; } -.multi-dropdown__icon:hover{ - opacity: 0.90; +.multi-dropdown__icon:hover { + opacity: 0.9; } -.multi-dropdown__dropdown{ +.multi-dropdown__dropdown { background-color: var(--secondary-color); color: var(--primary-color); border: solid 10px var(--secondary-color); @@ -639,31 +643,31 @@ footer { margin-top: 5px; } -.multi-dropdown__dropdown.--closed{ +.multi-dropdown__dropdown.--closed { display: none; } -.multi-dropdown__dropdown > div{ +.multi-dropdown__dropdown > div { background-color: var(--primary-color); - color: var(--secondary-color); + color: var(--secondary-color); margin-bottom: 7px; transition: 300ms; } -.multi-dropdown__dropdown > div:last-of-type{ +.multi-dropdown__dropdown > div:last-of-type { margin-bottom: 0; } -.multi-dropdown__dropdown div:hover{ +.multi-dropdown__dropdown div:hover { opacity: 0.95; } -.single-dropdown{ +.single-dropdown { padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } -.single-dropdown.--hidden{ +.single-dropdown.--hidden { display: none; } @@ -687,37 +691,37 @@ footer { gap: 3px; } -.single-dropdown > div.hide{ +.single-dropdown > div.hide { display: none; } -.dropdown-pill{ - background-color: var(--secondary-color); - color: var(--primary-color); +.dropdown-pill { + background-color: var(--secondary-color); + color: var(--primary-color); border-radius: 3px; padding: 5px 10px; cursor: pointer; line-height: 16px; } -.dropdown-pill a, .dropdown-pill span{ +.dropdown-pill a, +.dropdown-pill span { text-decoration: none; - color: var(--secondary-color); + color: var(--secondary-color); } -.dropdown-pill div{ +.dropdown-pill div { display: flex; align-items: center; } -.dropdown-pill.--left{ +.dropdown-pill.--left { text-align: left; } - -.single-dropdown a{ +.single-dropdown a { text-decoration: none; - color: var(--primary-color);; + color: var(--primary-color); } .toggle.--small { @@ -730,7 +734,7 @@ footer { height: 15px; } -.filled-icon{ +.filled-icon { background-color: var(--secondary-color); color: var(--primary-color); width: fit-content; @@ -738,7 +742,7 @@ footer { border-radius: 5px; } -.filled-icon svg{ +.filled-icon svg { fill: var(--primary-color); display: inline-block; height: 13px; @@ -749,7 +753,7 @@ footer { } /* --------- styles for multi dropdowns --------------*/ -@media only screen and (max-width: 1029px){ +@media only screen and (max-width: 1029px) { :root { margin-left: 10%; margin-right: 10%; @@ -766,20 +770,18 @@ footer { .tooltip-container { background-color: var(--secondary-color); color: var(--primary-color); - padding:5px 10px; + padding: 5px 10px; border-radius: 5px; } @media only screen and (max-width: 956px) { - .multi-dropdown__dropdown{ + .multi-dropdown__dropdown { margin-left: -15.8em; } - } - @media only screen and (max-width: 885px) { - .appcontainer{ + .appcontainer { width: 100vw; } @@ -796,18 +798,18 @@ footer { width: 95%; } - .multi-dropdown{ + .multi-dropdown { padding: 4px 9px; } - .header-ul{ + .header-ul { display: flex; margin-right: 20px; } - .helpcontainer{ + .helpcontainer { width: calc(100vw - 40px); } - .header-ul > .dropdown.chains{ + .header-ul > .dropdown.chains { display: none; } @@ -840,7 +842,7 @@ footer { width: calc(100vw - 40px); } - .author-section-border{ + .author-section-border { padding: 0; } @@ -866,10 +868,10 @@ footer { align-items: center; } - .page-not-found-title{ - margin-top: 3rem; - } +.page-not-found-title { + margin-top: 3rem; +} - .page-not-found-text{ +.page-not-found-text { margin-top: 1rem; -} \ No newline at end of file +}