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 (
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
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({
+ setMessage: () => {},
+});
+
+export const useMessageContext = () => useContext(MessageContext);
+
+export interface MessageContextProviderProps {
+ children: React.ReactNode;
+}
+
+export const MessageContextProvider = ({
+ children,
+}: MessageContextProviderProps) => {
+ const [text, setText] = useState(null);
+ const [level, setLevel] = useState("warning");
+
+ const setMessage = ({ text, level }: Message) => {
+ // Values are stored separately to fix a glitch of the Snackbar component
+ setText(text);
+ setLevel(level);
+ };
+
+ return (
+
+ setText(null)}
+ anchorOrigin={{ vertical: "top", horizontal: "center" }}
+ >
+ setText(null)}
+ severity={level}
+ variant="filled"
+ sx={{ width: "100%" }}
+ >
+ {text}
+
+
+ {children}
+
+ );
+};