From 2b4eade2d153708f9be831b750cf25f776633ea3 Mon Sep 17 00:00:00 2001
From: IshaVenikar <ishavenikar7@gmail.com>
Date: Fri, 9 Aug 2024 15:04:31 +0530
Subject: [PATCH] Add snackbar for invalid mnemonic error

---
 src/components/ImportWalletDialog.tsx |  6 +++++-
 src/screens/HomeScreen.tsx            | 30 +++++++++++++++++++++------
 src/utils/accounts.ts                 |  2 +-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/ImportWalletDialog.tsx b/src/components/ImportWalletDialog.tsx
index ea3fd5a..c05b428 100644
--- a/src/components/ImportWalletDialog.tsx
+++ b/src/components/ImportWalletDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Grid, Button, Typography } from "@mui/material";
 
@@ -29,6 +29,10 @@ const ImportWalletDialog = ({
     }
   };
 
+  useEffect(() => {
+    setWords(Array(12).fill(''));
+  },[visible]);
+
   return (
     <Dialog open={visible} onClose={hideDialog}>
       <DialogTitle>Import your wallet from your mnemonic</DialogTitle>
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index fafa42a..83996a6 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -5,6 +5,7 @@ import { Button, Text } from 'react-native-paper';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
 import { getSdkError } from '@walletconnect/utils';
+import { Portal, Snackbar } from '@mui/material';
 
 import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
 import { MnemonicDialog } from '../components/MnemonicDialog';
@@ -59,6 +60,8 @@ const HomeScreen = () => {
   const [importWalletDialog, setImportWalletDialog] = useState<boolean>(false);
   const [mnemonicDialog, setMnemonicDialog] = useState<boolean>(false);
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
+  const [toastVisible, setToastVisible] = useState(false);
+  const [invalidMnemonicError, setInvalidMnemonicError] = useState('');
   const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(true);
   const [phrase, setPhrase] = useState('');
 
@@ -92,12 +95,17 @@ const HomeScreen = () => {
   };
 
   const importWalletHandler = async (recoveryPhrase: string) => {
-    const mnemonic = await createWallet(networksData, recoveryPhrase);
-    if (mnemonic) {
-      fetchAccounts();
-      setPhrase(mnemonic);
-      setSelectedNetwork(networksData[0]);
-      setImportWalletDialog(false);
+    try{
+      const mnemonic = await createWallet(networksData, recoveryPhrase);
+      if (mnemonic) {
+        fetchAccounts();
+        setPhrase(mnemonic);
+        setSelectedNetwork(networksData[0]);
+        setImportWalletDialog(false);
+      }
+    } catch (error: any) {
+      setInvalidMnemonicError((error.message as string).toUpperCase())
+      setToastVisible(true);
     }
   };
 
@@ -194,6 +202,16 @@ const HomeScreen = () => {
         hideDialog={hideResetDialog}
         onConfirm={confirmResetWallet}
       />
+      <Portal>
+        <Snackbar
+          open={toastVisible}
+          autoHideDuration={3000}
+          message={invalidMnemonicError}
+          onClose={() => setToastVisible(false)}
+          anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
+          ContentProps={{ style: { backgroundColor: 'red', color: 'white'} }}
+        />
+      </Portal>
     </View>
   );
 };
diff --git a/src/utils/accounts.ts b/src/utils/accounts.ts
index 3a9f56e..d7921a6 100644
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@@ -30,9 +30,9 @@ const createWallet = async (
   recoveryPhrase?: string,
 ): Promise<string> => {
   const mnemonic = recoveryPhrase ? recoveryPhrase : utils.entropyToMnemonic(utils.randomBytes(16));
-  await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
 
   const hdNode = HDNode.fromMnemonic(mnemonic);
+  await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
 
   await createWalletFromMnemonic(networksData, hdNode, mnemonic);