improve alert on network mismatch; suggest logout from metamask

Etherium-Work · Dec 7, 2021 · f8b869e · f8b869e
1 parent 13a7922
commit f8b869e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -252,6 +252,7 @@ function App(props) {
         localChainId={localChainId}
         selectedChainId={selectedChainId}
         targetNetwork={targetNetwork}
+        logoutOfWeb3Modal={logoutOfWeb3Modal}
       />
       <Menu style={{ textAlign: "center" }} selectedKeys={[location.pathname]} mode="horizontal">
         <Menu.Item key="/">

diff --git a/packages/react-app/src/components/NetworkDisplay.jsx b/packages/react-app/src/components/NetworkDisplay.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { NETWORK } from "../constants";
 import { Alert, Button } from "antd";
 
-function NetworkDisplay({ NETWORKCHECK, localChainId, selectedChainId, targetNetwork }) {
+function NetworkDisplay({ NETWORKCHECK, localChainId, selectedChainId, targetNetwork, logoutOfWeb3Modal }) {
   let networkDisplay = "";
   if (NETWORKCHECK && localChainId && selectedChainId && localChainId !== selectedChainId) {
     const networkSelected = NETWORK(selectedChainId);
@@ -25,11 +25,21 @@ function NetworkDisplay({ NETWORKCHECK, localChainId, selectedChainId, targetNet
         </div>
       );
     } else {
+      const showLogout = networkSelected && networkSelected.name !== "localhost";
       networkDisplay = (
         <div style={{ zIndex: 2, position: "absolute", right: 0, top: 60, padding: 16 }}>
           <Alert
             message="⚠️ Wrong Network"
             description={
+              showLogout
+              ? <div>
+                  You are <b>logged in</b> via Metamask to an external network.
+                  <br/>For local development it is recommended to{" "}
+                  <Button onClick={
+                    logoutOfWeb3Modal
+                  }>logout</Button>
+              </div>
+              :
               <div>
                 You have <b>{networkSelected && networkSelected.name}</b> selected and you need to be on{" "}
                 <Button

diff --git a/yarn.lock b/yarn.lock
@@ -8718,10 +8718,10 @@ eth-gas-reporter@^0.2.20:
     sha1 "^1.1.1"
     sync-request "^6.0.0"
 
-eth-hooks@2.3.8:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/eth-hooks/-/eth-hooks-2.3.8.tgz#419246a1f37efd8822813b0f7298399c16f4bba1"
-  integrity sha512-MnmW2LDaUWjdQbHoR1wEHAMu6L9vaRse2Ofs6O43Wu27tn6fZuNPAZVlYSC6D4aD9JYxKZXR7Uz/bkCczJO0pQ==
+eth-hooks@2.3.14:
+  version "2.3.14"
+  resolved "https://registry.yarnpkg.com/eth-hooks/-/eth-hooks-2.3.14.tgz#b1cc495fc36410f67b4b661b5396da4877c50410"
+  integrity sha512-TXADvpC+IwOYy3hQIoeoi8Pxf1Uodqiuz3MCjI06mJcxXrOx8a72mUmaX/XnX+DiuFGbajnlNkbtYj4dZeDa/g==
   dependencies:
     "@ethersproject/address" "^5.4.0"
     "@ethersproject/bignumber" "^5.4.0"