Merge pull request #15 from fairDataSociety/feat/network-error

feat: network error message

src/App.tsx

@@ -6,20 +6,23 @@ import { LocalesContextProvider } from "./context/LocalesContext";
 import { ThemeContextProvider } from "./context/ThemeContext";
 import { WalletContextProvider } from "./context/WalletContext";
 import Routes from "./routes/Routes";
+import { MessageContextProvider } from "./context/MessageContext";
 
 function App() {
   return (
     <BrowserRouter>
       <ThemeContextProvider>
         <LocalesContextProvider>
-          <WalletContextProvider>
-            <DappContextProvider>
-              <CssBaseline />
-              <AppLayout>
-                <Routes />
-              </AppLayout>
-            </DappContextProvider>
-          </WalletContextProvider>
+          <MessageContextProvider>
+            <WalletContextProvider>
+              <DappContextProvider>
+                <CssBaseline />
+                <AppLayout>
+                  <Routes />
+                </AppLayout>
+              </DappContextProvider>
+            </WalletContextProvider>
+          </MessageContextProvider>
         </LocalesContextProvider>
       </ThemeContextProvider>
     </BrowserRouter>

src/assets/locales/en-US.json

@@ -39,5 +39,6 @@
   "EXPIRED_DAPPS": "My Expired dApps",
   "RECORD_HASH": "Record hash",
   "SWARM_LOCATION": "Swarm location",
-  "COPY_TO_CLIPBOARD_MESSAGE": "Text copied to clipboard"
+  "COPY_TO_CLIPBOARD_MESSAGE": "Text copied to clipboard",
+  "SWITCH_NETWORK": "Cannot connect, please switch network to {network}"
 }

src/components/ConnectButton/ConnectButton.tsx

@@ -3,16 +3,32 @@ import intl from "react-intl-universal";
 import { ethers } from "ethers";
 import { ButtonProps, Button, CircularProgress } from "@mui/material";
 import { useWalletContext } from "../../context/WalletContext";
+import { useMessageContext } from "../../context/MessageContext";
 
 const ConnectButton = (props: ButtonProps) => {
   const { connected, loading, setWallet, removeWallet } = useWalletContext();
+  const { setMessage } = useMessageContext();
 
   const connect = async () => {
-    const provider = new ethers.providers.Web3Provider(window.ethereum, "any");
-    await provider.send("eth_requestAccounts", []);
-    const address = await provider.getSigner().getAddress();
+    try {
+      const provider = new ethers.providers.Web3Provider(
+        window.ethereum,
+        "any"
+      );
+      await provider.send("eth_requestAccounts", []);
+      const address = await provider.getSigner().getAddress();
 
-    setWallet(provider.getSigner(), address);
+      await setWallet(provider.getSigner(), address);
+    } catch (error) {
+      console.error(error);
+
+      setMessage({
+        text: intl.get("SWITCH_NETWORK", {
+          network: import.meta.env.VITE_ENVIRONMENT,
+        }),
+        level: "warning",
+      });
+    }
   };
 
   if (loading) {

src/context/MessageContext.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { createContext, useContext } from "react";
+import { Alert, Snackbar } from "@mui/material";
+
+type MessgeLevel = "warning" | "error";
+
+export interface Message {
+  text: string;
+  level: MessgeLevel;
+}
+
+export interface MessageContext {
+  setMessage: (message: Message) => void;
+}
+
+const MessageContext = createContext<MessageContext>({
+  setMessage: () => {},
+});
+
+export const useMessageContext = () => useContext(MessageContext);
+
+export interface MessageContextProviderProps {
+  children: React.ReactNode;
+}
+
+export const MessageContextProvider = ({
+  children,
+}: MessageContextProviderProps) => {
+  const [text, setText] = useState<string | null>(null);
+  const [level, setLevel] = useState<MessgeLevel>("warning");
+
+  const setMessage = ({ text, level }: Message) => {
+    // Values are stored separately to fix a glitch of the Snackbar component
+    setText(text);
+    setLevel(level);
+  };
+
+  return (
+    <MessageContext.Provider value={{ setMessage }}>
+      <Snackbar
+        open={text !== null}
+        autoHideDuration={8000}
+        onClose={() => setText(null)}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+      >
+        <Alert
+          onClose={() => setText(null)}
+          severity={level}
+          variant="filled"
+          sx={{ width: "100%" }}
+        >
+          {text}
+        </Alert>
+      </Snackbar>
+      {children}
+    </MessageContext.Provider>
+  );
+};