Add multiple textboxes

components/HDPath.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { ScrollView, View, Text } from 'react-native';
+import { ScrollView, View, Text, StyleSheet } from 'react-native';
 import { Button, TextInput } from 'react-native-paper';
 
 import { addAccountFromHDPath } from '../utils/Accounts';
 import { Account } from '../types';
+import { HDNode } from 'ethers/lib/utils';
 
 const HDPath = ({
   pathCode,
@@ -16,12 +17,14 @@ const HDPath = ({
   updateAccounts: (account: Account) => void;
   hideDialog: () => void;
 }) => {
-  const [path, setPath] = useState<string>('');
   const [isAccountCreating, setIsAccountCreating] = useState(false);
+  const [firstNumber, setFirstNumber] = useState('');
+  const [secondNumber, setSecondNumber] = useState('');
+  const [thirdNumber, setThirdNumber] = useState('');
 
   const createFromHDPathHandler = async () => {
     setIsAccountCreating(true);
-    const hdPath = pathCode + path;
+    const hdPath = pathCode + `${firstNumber}'/${secondNumber}/${thirdNumber}`;
     try {
       const newAccount = await addAccountFromHDPath(hdPath);
       if (newAccount) {
@@ -37,19 +40,37 @@ const HDPath = ({
   };
 
   return (
-    <ScrollView style={{ marginTop: 24, paddingHorizontal: 24 }}>
+    <ScrollView style={styles.container}>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <View style={styles.rowContainer}>
-        <Text style={{ color: 'black', fontSize: 18, padding: 10 }}>
+        <Text style={styles.text}>{pathCode}</Text>
-          {pathCode}
-        </Text>
         <TextInput
+          keyboardType="numeric"
           mode="outlined"
-          onChangeText={setPath}
+          onChangeText={setFirstNumber}
-          value={path}
+          value={firstNumber}
-          style={{ flex: 1 }}
+          style={styles.textInput}
+          maxLength={1}
+        />
+        <Text style={styles.text}>'/</Text>
+        <TextInput
+          keyboardType="numeric"
+          mode="outlined"
+          onChangeText={setSecondNumber}
+          value={secondNumber}
+          style={styles.textInput}
+          maxLength={1}
+        />
+        <Text style={styles.text}>'/</Text>
+        <TextInput
+          keyboardType="numeric"
+          mode="outlined"
+          onChangeText={setThirdNumber}
+          value={thirdNumber}
+          style={styles.textInput}
+          maxLength={1}
         />
       </View>
-      <View style={{ marginTop: 20, width: 200, alignSelf: 'center' }}>
+      <View style={styles.buttonContainer}>
         <Button
           mode="contained"
           onPress={createFromHDPathHandler}
@@ -61,4 +82,28 @@ const HDPath = ({
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+    paddingHorizontal: 8,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    color: 'black',
+    fontSize: 18,
+    padding: 10,
+  },
+  textInput: {
+    flex: 1,
+  },
+  buttonContainer: {
+    marginTop: 20,
+    width: 200,
+    alignSelf: 'center',
+  },
+});
+
 export default HDPath;