ux: Add warning message when metamask is not detected in burner walle…

…t flow
zkemail · Oct 11, 2024 · abbac01 · abbac01
1 parent 9ff0f61
commit abbac01
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ export const StepsContext = createContext(null);
 
 function App() {
   const [step, setStep] = useState(STEPS.STEP_SELECTION);
-
+  
   return (
     <AppContextProvider>
       <ThemeProvider theme={theme}>
@@ -30,7 +30,8 @@ function App() {
           <Web3Provider>
             <BrowserRouter>
               <NavBar />
-              <Grid container
+              <Grid
+                container
                 style={{ padding: 16, height: "calc(100vh - 70px - 32px)" }}
                 justifyContent={"center"}
                 alignItems={"center"}

diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx
@@ -36,6 +36,12 @@ const LandingPage = () => {
         return navigate("/safe-wallet");
       case "BURNER_WALLET":
         toast("Please disconnect previously created wallet");
+        if (!!window?.ethereum?.isMetaMask === false) {
+          toast.error(
+            "It appears that the Metamask extension is not installed. To ensure the website functions correctly, please install Metamask before proceeding.",
+            { duration: 5000000 }
+          );
+        }
         return navigate("/burner-wallet");
       case "WALLET_RECOVERY":
         return navigate("/wallet-recovery");