From 103c8bb8315a25474ceaf2ce9a10921939f69f91 Mon Sep 17 00:00:00 2001
From: Vladan <tomic.vladan.mail@gmail.com>
Date: Wed, 17 Apr 2024 11:09:33 +0200
Subject: [PATCH] feat: network error message

---
 src/App.tsx                                   | 19 +++---
 src/assets/locales/en-US.json                 |  3 +-
 .../ConnectButton/ConnectButton.tsx           | 24 ++++++--
 src/context/MessageContext.tsx                | 58 +++++++++++++++++++
 4 files changed, 91 insertions(+), 13 deletions(-)
 create mode 100644 src/context/MessageContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index daf10c2..7303afa 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/assets/locales/en-US.json b/src/assets/locales/en-US.json
index c57f170..f80fad0 100644
--- a/src/assets/locales/en-US.json
+++ b/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}"
 }
diff --git a/src/components/ConnectButton/ConnectButton.tsx b/src/components/ConnectButton/ConnectButton.tsx
index 6460daa..3976d82 100644
--- a/src/components/ConnectButton/ConnectButton.tsx
+++ b/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) {
diff --git a/src/context/MessageContext.tsx b/src/context/MessageContext.tsx
new file mode 100644
index 0000000..290ca2f
--- /dev/null
+++ b/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>
+  );
+};