Add snackbar for invalid mnemonic error

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>

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>
   );
 };

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);