Use dialog box to add accounts using HD path

components/Accounts.tsx

@@ -8,6 +8,7 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { AccountsProps, StackParamsList, Account } from '../types';
 import { addAccount } from '../utils';
 import styles from '../styles/stylesheet';
+import HDPathDialog from './HDPathDialog';
 
 const Accounts: React.FC<AccountsProps> = ({
   network,
@@ -21,6 +22,7 @@ const Accounts: React.FC<AccountsProps> = ({
 
   const [expanded, setExpanded] = useState(false);
   const [isAccountCreating, setIsAccountCreating] = useState(false);
+  const [hdDialog, setHdDialog] = useState(false);
   const handlePress = () => setExpanded(!expanded);
 
   const addAccountHandler = async () => {
@@ -59,6 +61,12 @@ const Accounts: React.FC<AccountsProps> = ({
 
   return (
     <View>
+      <HDPathDialog
+        visible={hdDialog}
+        hideDialog={() => setHdDialog(false)}
+        updateAccounts={updateAccounts}
+        updateIndex={updateId}
+      />
       <List.Accordion
         title={`Account ${currentIndex + 1}`}
         expanded={expanded}
@@ -75,6 +83,16 @@ const Accounts: React.FC<AccountsProps> = ({
         </Button>
       </View>
 
+      <View style={styles.addAccountButton}>
+        <Button
+          mode="contained"
+          onPress={() => {
+            setHdDialog(true);
+          }}>
+          Add Account from HD path
+        </Button>
+      </View>
+
       <View style={styles.accountContainer}>
         <Text variant="bodyLarge">
           <Text style={styles.highlight}>Address: </Text>

components/HDPath.tsx

@@ -1,34 +1,35 @@
 import React, { useState } from 'react';
-import { ScrollView, View, Alert } from 'react-native';
-import { Button, Text, TextInput } from 'react-native-paper';
+import { ScrollView, View } from 'react-native';
+import { Button, TextInput } from 'react-native-paper';
 
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
-
-import { StackParamsList } from '../types';
 import { addAccountFromHDPath } from '../utils';
+import { Account } from '../types';
 
-type HDPathProps = NativeStackScreenProps<StackParamsList, 'HDPath'>;
-
-const HDPath: React.FC<HDPathProps> = ({}) => {
+const HDPath = ({
+  updateAccounts,
+  updateIndex,
+  hideDialog,
+}: {
+  updateIndex: (index: number) => void;
+  updateAccounts: (account: Account) => void;
+  hideDialog: () => void;
+}) => {
   const [path, setPath] = useState<string>('');
-  const [account, setAccount] = useState<any>(null);
   const [isAccountCreating, setIsAccountCreating] = useState(false);
 
   const createFromHDPathHandler = async () => {
     setIsAccountCreating(true);
     const newAccount = await addAccountFromHDPath(path);
     setIsAccountCreating(false);
-    setAccount(newAccount);
-    Alert.alert('Account Created');
+    if (newAccount) {
+      updateAccounts(newAccount);
+      updateIndex(newAccount.counterId);
+      hideDialog();
+    }
   };
 
   return (
     <ScrollView style={{ marginTop: 24, paddingHorizontal: 24 }}>
-      <View style={{ marginTop: 24, marginBottom: 30 }}>
-        <Text variant="bodyLarge">
-          <Text style={{ fontWeight: '700' }}>Enter the HD Path: </Text>
-        </Text>
-      </View>
       <TextInput
         mode="outlined"
         onChangeText={text => setPath(text)}
@@ -42,20 +43,6 @@ const HDPath: React.FC<HDPathProps> = ({}) => {
           {isAccountCreating ? 'Adding' : 'Add Account'}
         </Button>
       </View>
-      <View style={{ marginTop: 24 }}>
-        {account && (
-          <>
-            <Text variant="bodyLarge">
-              <Text style={{ fontWeight: '700' }}>Address: </Text>
-              {account.address}
-            </Text>
-            <Text variant="bodyLarge">
-              <Text style={{ fontWeight: '700' }}>Public Key: </Text>
-              {account.pubKey}
-            </Text>
-          </>
-        )}
-      </View>
     </ScrollView>
   );
 };

components/HDPathDialog.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Portal, Dialog } from 'react-native-paper';
+import { HDPathDialogProps } from '../types';
+import HDPath from './HDPath';
+
+const HDPathDialog = ({
+  visible,
+  hideDialog,
+  updateIndex,
+  updateAccounts,
+}: HDPathDialogProps) => {
+  return (
+    <Portal>
+      <Dialog visible={visible} onDismiss={hideDialog}>
+        <Dialog.Title>Add account from HD path</Dialog.Title>
+        <Dialog.Content>
+          <HDPath
+            updateIndex={updateIndex}
+            updateAccounts={updateAccounts}
+            hideDialog={hideDialog}
+          />
+        </Dialog.Content>
+      </Dialog>
+    </Portal>
+  );
+};
+
+export default HDPathDialog;

types.ts

@@ -1,7 +1,12 @@
 export type StackParamsList = {
   Laconic: undefined;
   SignMessage: { selectedNetwork: string; accountInfo: Account } | undefined;
-  HDPath: undefined;
+  HDPath:
+  | {
+    updateIndex: (index: number) => void;
+    updateAccounts: (account: Account) => void;
+  }
+  | undefined;
 };
 
 export type Account = {
@@ -55,6 +60,13 @@ export type ResetDialogProps = {
   onConfirm: () => void;
 };
 
+export type HDPathDialogProps = {
+  visible: boolean;
+  hideDialog: () => void;
+  updateIndex: (index: number) => void;
+  updateAccounts: (account: Account) => void;
+};
+
 export type GridViewProps = {
   words: string[];
 };

utils.ts

@@ -154,7 +154,10 @@ const addAccount = async (network: string): Promise<Account | undefined> => {
 
 const addAccountFromHDPath = async (
   hdPath: string,
-): Promise<{ pubKey: string; address: string } | undefined> => {
+): Promise<
+  | { counterId: number; pubKey: string; address: string; hdPath: string }
+  | undefined
+> => {
   try {
     const account = await accountInfoFromHDPath(hdPath);
     if (!account) {
@@ -207,9 +210,7 @@ const addAccountFromHDPath = async (
         break;
     }
 
-    console.log(pubKey, address);
-
-    return { pubKey, address };
+    return { counterId, pubKey, address, hdPath };
   } catch (error) {
     console.error(error);
   }
@@ -236,7 +237,6 @@ const accountInfoFromHDPath = async (
   const parts = hdPath.split('/');
   const path = parts.slice(-3).join('/');
   const coinType = parts[2];
-  console.log(path);
 
   let network: string;
   let address: string;