Combines states

components/HDPath.tsx

@@ -3,8 +3,7 @@ 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';
+import { Account, PathState } from '../types';
 
 const HDPath = ({
   pathCode,
@@ -18,13 +17,26 @@ const HDPath = ({
   hideDialog: () => void;
 }) => {
   const [isAccountCreating, setIsAccountCreating] = useState(false);
-  const [firstNumber, setFirstNumber] = useState('');
-  const [secondNumber, setSecondNumber] = useState('');
-  const [thirdNumber, setThirdNumber] = useState('');
+  const [path, setPath] = useState<PathState>({
+    firstNumber: '',
+    secondNumber: '',
+    thirdNumber: '',
+  });
+
+  const handleChange = (key: keyof PathState, value: string) => {
+    setPath({
+      ...path,
+      [key]: value.replace(/[^0-9]/g, ''), // Allow only numeric characters
+    });
+  };
 
   const createFromHDPathHandler = async () => {
     setIsAccountCreating(true);
-    const hdPath = pathCode + `${firstNumber}'/${secondNumber}/${thirdNumber}`;
+
+    const hdPath =
+      pathCode +
+      `${path.firstNumber}'/${path.secondNumber}/${path.thirdNumber}`;
+
     try {
       const newAccount = await addAccountFromHDPath(hdPath);
       if (newAccount) {
@@ -46,8 +58,8 @@ const HDPath = ({
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={setFirstNumber}
-          value={firstNumber}
+          onChangeText={text => handleChange('firstNumber', text)}
+          value={path.firstNumber}
           style={styles.textInput}
           maxLength={1}
         />
@@ -55,17 +67,17 @@ const HDPath = ({
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={setSecondNumber}
-          value={secondNumber}
+          onChangeText={text => handleChange('secondNumber', text)}
+          value={path.secondNumber}
           style={styles.textInput}
           maxLength={1}
         />
-        <Text style={styles.text}>'/</Text>
+        <Text style={styles.text}>/</Text>
         <TextInput
           keyboardType="numeric"
           mode="outlined"
-          onChangeText={setThirdNumber}
-          value={thirdNumber}
+          onChangeText={text => handleChange('thirdNumber', text)}
+          value={path.thirdNumber}
           style={styles.textInput}
           maxLength={1}
         />

types.ts

@@ -71,3 +71,9 @@ export type HDPathDialogProps = {
 export type GridViewProps = {
   words: string[];
 };
+
+export type PathState = {
+  firstNumber: string;
+  secondNumber: string;
+  thirdNumber: string;
+};