Merge pull request #27 from deep-stack/ag-textboxes

Add multiple textboxes to HD Path dialog

components/HDPath.tsx

@@ -3,7 +3,8 @@ import { ScrollView, View, Text } from 'react-native';
 import { Button, TextInput } from 'react-native-paper';
 
 import { addAccountFromHDPath } from '../utils/Accounts';
-import { Account } from '../types';
+import { Account, PathState } from '../types';
+import styles from '../styles/stylesheet';
 
 const HDPath = ({
   pathCode,
@@ -16,12 +17,25 @@ const HDPath = ({
   updateAccounts: (account: Account) => void;
   hideDialog: () => void;
 }) => {
-  const [path, setPath] = useState<string>('');
   const [isAccountCreating, setIsAccountCreating] = useState(false);
+  const [path, setPath] = useState<PathState>({
+    firstNumber: '',
+    secondNumber: '',
+    thirdNumber: '',
+  });
+
+  const handleChange = (key: keyof PathState, value: string) => {
+    setPath({
+      ...path,
+      [key]: value.replace(/[^0-9]/g, ''),
+    });
+  };
 
   const createFromHDPathHandler = async () => {
     setIsAccountCreating(true);
-    const hdPath = pathCode + path;
+    const hdPath =
+      pathCode +
+      `${path.firstNumber}'/${path.secondNumber}/${path.thirdNumber}`;
     try {
       const newAccount = await addAccountFromHDPath(hdPath);
       if (newAccount) {
@@ -37,19 +51,34 @@ const HDPath = ({
   };
 
   return (
-    <ScrollView style={{ marginTop: 24, paddingHorizontal: 24 }}>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <Text style={{ color: 'black', fontSize: 18, padding: 10 }}>
-          {pathCode}
-        </Text>
+    <ScrollView style={styles.HDcontainer}>
+      <View style={styles.HDrowContainer}>
+        <Text style={styles.HDtext}>{pathCode}</Text>
         <TextInput
+          keyboardType="numeric"
           mode="outlined"
-          onChangeText={setPath}
-          value={path}
-          style={{ flex: 1 }}
+          onChangeText={text => handleChange('firstNumber', text)}
+          value={path.firstNumber}
+          style={styles.HDtextInput}
+        />
+        <Text style={styles.HDtext}>'/</Text>
+        <TextInput
+          keyboardType="numeric"
+          mode="outlined"
+          onChangeText={text => handleChange('secondNumber', text)}
+          value={path.secondNumber}
+          style={styles.HDtextInput}
+        />
+        <Text style={styles.HDtext}>/</Text>
+        <TextInput
+          keyboardType="numeric"
+          mode="outlined"
+          onChangeText={text => handleChange('thirdNumber', text)}
+          value={path.thirdNumber}
+          style={styles.HDtextInput}
         />
       </View>
-      <View style={{ marginTop: 20, width: 200, alignSelf: 'center' }}>
+      <View style={styles.HDbuttonContainer}>
         <Button
           mode="contained"
           onPress={createFromHDPathHandler}

styles/stylesheet.js

@@ -81,6 +81,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
+  HDcontainer: {
+    marginTop: 24,
+    paddingHorizontal: 8,
+  },
+  HDrowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  HDtext: {
+    color: 'black',
+    fontSize: 18,
+    margin: 4,
+  },
+  HDtextInput: {
+    flex: 1,
+  },
+  HDbuttonContainer: {
+    marginTop: 20,
+    width: 200,
+    alignSelf: 'center',
+  },
 });
 
 export default styles;

types.ts

@@ -2,11 +2,11 @@ export type StackParamsList = {
   Laconic: undefined;
   SignMessage: { selectedNetwork: string; accountInfo: Account } | undefined;
   HDPath:
-  | {
-    updateIndex: (index: number) => void;
-    updateAccounts: (account: Account) => void;
-  }
-  | undefined;
+    | {
+        updateIndex: (index: number) => void;
+        updateAccounts: (account: Account) => void;
+      }
+    | undefined;
 };
 
 export type Account = {
@@ -71,3 +71,9 @@ export type HDPathDialogProps = {
 export type GridViewProps = {
   words: string[];
 };
+
+export type PathState = {
+  firstNumber: string;
+  secondNumber: string;
+  thirdNumber: string;
+};