Implement functionality to import wallet from mnemonic

src/components/CreateWallet.tsx

@@ -1,5 +1,5 @@
-import { View } from 'react-native';
 import React from 'react';
+import { View } from 'react-native';
 import { Button } from 'react-native-paper';
 
 import { CreateWalletProps } from '../types';

src/components/ImportWalletDialog.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { View, TextInput } from 'react-native';
+import { Dialog, Portal, Paragraph, Button } from 'react-native-paper';
+
+import styles from '../styles/stylesheet';
+
+const ImportWalletDialog = ({
+  visible,
+  hideDialog,
+  importWalletHandler,
+}: {
+  visible: boolean;
+  hideDialog: () => void;
+  importWalletHandler: (recoveryPhrase: string) => Promise<void>;
+}) => {
+  const [words, setWords] = useState<string[]>(Array(12).fill(''));
+
+  const handleWordChange = (index: number, value: string) => {
+    const newWords = [...words];
+    newWords[index] = value;
+    setWords(newWords);
+  };
+
+  return (
+    <Portal>
+      <Dialog visible={visible} onDismiss={hideDialog}>
+        <Dialog.Title>Import your wallet from your mnemonic</Dialog.Title>
+        <Dialog.Content>
+          <Paragraph>
+            (You can paste your entire mnemonic into the first textbox)
+          </Paragraph>
+          <View style={styles.container}>
+            {words.map((word, index) => (
+              <View style={styles.inputContainer} key={index}>
+                <TextInput
+                  value={word}
+                  onChangeText={text => handleWordChange(index, text)}
+                  placeholder={`Word ${index + 1}`}
+                  style={styles.textInput}
+                />
+              </View>
+            ))}
+          </View>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button
+            mode="contained"
+            onPress={() => importWalletHandler(words.join(' '))}>
+            Import Wallet
+          </Button>
+          <Button mode="text" onPress={hideDialog}>
+            Cancel
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};
+
+export default ImportWalletDialog;

src/components/MnemonicDialog.tsx

@@ -8,7 +8,7 @@ import styles from '../styles/stylesheet';
 import GridView from './Grid';
 import { CustomDialogProps } from '../types';
 
-const DialogComponent = ({
+const MnemonicDialog = ({
   visible,
   hideDialog,
   contentText,
@@ -55,4 +55,4 @@ const DialogComponent = ({
   );
 };
 
-export { DialogComponent };
+export { MnemonicDialog };

src/screens/HomeScreen.tsx

@@ -7,7 +7,8 @@ import { useNavigation } from '@react-navigation/native';
 import { getSdkError } from '@walletconnect/utils';
 
 import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
-import { DialogComponent } from '../components/Dialog';
+import { MnemonicDialog } from '../components/MnemonicDialog';
+import ImportWalletDialog from '../components/ImportWalletDialog';
 import { NetworkDropdown } from '../components/NetworkDropdown';
 import Accounts from '../components/Accounts';
 import CreateWallet from '../components/CreateWallet';
@@ -55,12 +56,13 @@ const HomeScreen = () => {
 
   const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
   const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
-  const [walletDialog, setWalletDialog] = useState<boolean>(false);
+  const [importWalletDialog, setImportWalletDialog] = useState<boolean>(false);
+  const [mnemonicDialog, setMnemonicDialog] = useState<boolean>(false);
   const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
   const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(false);
   const [phrase, setPhrase] = useState('');
 
-  const hideWalletDialog = () => setWalletDialog(false);
+  const hideMnemonicDialog = () => setMnemonicDialog(false);
   const hideResetDialog = () => setResetWalletDialog(false);
 
   const fetchAccounts = useCallback(async () => {
@@ -83,12 +85,22 @@ const HomeScreen = () => {
     const mnemonic = await createWallet(networksData);
     if (mnemonic) {
       fetchAccounts();
-      setWalletDialog(true);
+      setMnemonicDialog(true);
       setPhrase(mnemonic);
       setSelectedNetwork(networksData[0]);
     }
   };
 
+  const importWalletHandler = async (recoveryPhrase: string) => {
+    const mnemonic = await createWallet(networksData, recoveryPhrase);
+    if (mnemonic) {
+      fetchAccounts();
+      setPhrase(mnemonic);
+      setSelectedNetwork(networksData[0]);
+      setImportWalletDialog(false);
+    }
+  };
+
   const confirmResetWallet = useCallback(async () => {
     setIsWalletCreated(false);
     setIsWalletCreating(false);
@@ -152,14 +164,28 @@ const HomeScreen = () => {
           </View>
         </>
       ) : (
-        <CreateWallet
+        <>
-          isWalletCreating={isWalletCreating}
+          <CreateWallet
-          createWalletHandler={createWalletHandler}
+            isWalletCreating={isWalletCreating}
-        />
+            createWalletHandler={createWalletHandler}
+          />
+          <View style={styles.createWalletContainer}>
+            <Button
+              mode="contained"
+              onPress={() => setImportWalletDialog(true)}>
+              Import Wallet
+            </Button>
+          </View>
+        </>
       )}
-      <DialogComponent
+      <ImportWalletDialog
-        visible={walletDialog}
+        visible={importWalletDialog}
-        hideDialog={hideWalletDialog}
+        hideDialog={() => setImportWalletDialog(false)}
+        importWalletHandler={importWalletHandler}
+      />
+      <MnemonicDialog
+        visible={mnemonicDialog}
+        hideDialog={hideMnemonicDialog}
         contentText={phrase}
       />
       <ConfirmDialog

src/styles/stylesheet.js

@@ -117,6 +117,12 @@ const styles = StyleSheet.create({
     fontSize: 18,
     padding: 10,
   },
+  textInput: {
+    height: 40,
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 10,
+  },
   requestMessage: {
     borderWidth: 1,
     borderRadius: 5,

src/utils/accounts.ts

@@ -27,12 +27,25 @@ import { COSMOS, EIP155 } from './constants';
 
 const createWallet = async (
   networksData: NetworksDataState[],
+  recoveryPhrase?: string,
 ): Promise<string> => {
-  const mnemonic = utils.entropyToMnemonic(utils.randomBytes(16));
+  const mnemonic = recoveryPhrase
+    ? recoveryPhrase
+    : utils.entropyToMnemonic(utils.randomBytes(16));
   await setInternetCredentials('mnemonicServer', 'mnemonic', mnemonic);
 
   const hdNode = HDNode.fromMnemonic(mnemonic);
 
+  await createWalletFromMnemonic(networksData, hdNode, mnemonic);
+
+  return mnemonic;
+};
+
+const createWalletFromMnemonic = async (
+  networksData: NetworksDataState[],
+  hdNode: HDNode,
+  mnemonic: string,
+): Promise<void> => {
   for (const network of networksData) {
     const hdPath = `m/44'/${network.coinType}'/0'/0/0`;
     const node = hdNode.derivePath(hdPath);
@@ -73,8 +86,6 @@ const createWallet = async (
       ),
     ]);
   }
-
-  return mnemonic;
 };
 
 const addAccount = async (