Add form validation for add network form (#101)

* Use zod for validation

* Return to index 0 after deleting network

* Make url optional

* Use form schema according to the selected nw

* Fix type for networks data

* Accept numeric value for coin type

* Fix form type issue

package.json

@@ -16,6 +16,7 @@
     "@cosmjs/proto-signing": "^0.32.3",
     "@cosmjs/stargate": "^0.32.3",
     "@ethersproject/shims": "^5.7.0",
+    "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-native-community/netinfo": "^11.3.1",
@@ -46,7 +47,8 @@
     "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.0",
     "text-encoding-polyfill": "^0.6.7",
-    "use-debounce": "^10.0.0"
+    "use-debounce": "^10.0.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/Accounts.tsx

@@ -21,7 +21,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
-  const { accounts, setAccounts } = useAccounts();
+  const { accounts, setAccounts, setCurrentIndex } = useAccounts();
   const { networksData, selectedNetwork, setNetworksData, setSelectedNetwork } =
     useNetworks();
   const [expanded, setExpanded] = useState(false);
@@ -108,6 +108,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
     );
 
     setSelectedNetwork(updatedNetworks[0]);
+    setCurrentIndex(0);
     setDeleteNetworkDialog(false);
     setNetworksData(updatedNetworks);
   };

src/components/NetworkDropdown.tsx

@@ -25,7 +25,7 @@ const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
         onPress={() => setExpanded(!expanded)}>
         {networksData.map(networkData => (
           <List.Item
-            key={networkData.chainId}
+            key={networkData.networkId}
             title={networkData.networkName}
             onPress={() => handleNetworkPress(networkData)}
           />

src/screens/AddNetwork.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
-import { useForm, Controller, useWatch } from 'react-hook-form';
+import { useForm, Controller, useWatch, FieldErrors } from 'react-hook-form';
 import { TextInput, Button, HelperText } from 'react-native-paper';
 import {
   getInternetCredentials,
@@ -9,12 +9,14 @@ import {
 import { HDNode } from 'ethers/lib/utils';
 import { chains } from 'chain-registry';
 import { useDebouncedCallback } from 'use-debounce';
+import { z } from 'zod';
 
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
+import { zodResolver } from '@hookform/resolvers/zod';
 
 import styles from '../styles/stylesheet';
-import { NetworksDataState, NetworksFormData, StackParamsList } from '../types';
+import { StackParamsList } from '../types';
 import { SelectNetworkType } from '../components/SelectNetworkType';
 import { storeNetworkData } from '../utils/accounts';
 import { useNetworks } from '../context/NetworksContext';
@@ -22,19 +24,45 @@ import { COSMOS, EIP155, CHAINID_DEBOUNCE_DELAY } from '../utils/constants';
 import { getCosmosAccounts } from '../utils/accounts';
 import ETH_CHAINS from '../assets/ethereum-chains.json';
 
-// TODO: Add validation to form inputs
+const ethNetworkDataSchema = z.object({
+  chainId: z.string().min(1),
+  networkName: z.string().min(1),
+  rpcUrl: z.string().url(),
+  blockExplorerUrl: z.string().url().or(z.literal('')),
+  coinType: z.string().regex(/^\d+$/).min(1),
+  currencySymbol: z.string().min(1),
+});
+
+const cosmosNetworkDataSchema = z.object({
+  chainId: z.string().min(1),
+  networkName: z.string().min(1),
+  rpcUrl: z.string().url(),
+  blockExplorerUrl: z.string().url().or(z.literal('')),
+  coinType: z.string().regex(/^\d+$/).min(1),
+  nativeDenom: z.string().min(1),
+  addressPrefix: z.string().min(1),
+});
+
 const AddNetwork = () => {
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
+  const { setNetworksData } = useNetworks();
+
+  const [namespace, setNamespace] = useState<string>(EIP155);
+
+  const networksFormDataSchema =
+    namespace === EIP155 ? ethNetworkDataSchema : cosmosNetworkDataSchema;
+
   const {
     control,
-    formState: { errors, isValid },
+    formState: { errors },
     handleSubmit,
     setValue,
     reset,
-  } = useForm<NetworksDataState>({
+  } = useForm<z.infer<typeof networksFormDataSchema>>({
     mode: 'onChange',
+    resolver: zodResolver(networksFormDataSchema),
   });
 
   const watchChainId = useWatch({
@@ -42,10 +70,6 @@ const AddNetwork = () => {
     name: 'chainId',
   });
 
-  const { setNetworksData } = useNetworks();
-
-  const [namespace, setNamespace] = useState<string>(EIP155);
-
   const updateNetworkType = (newNetworkType: string) => {
     setNamespace(newNetworkType);
   };
@@ -80,7 +104,7 @@ const AddNetwork = () => {
   }, CHAINID_DEBOUNCE_DELAY);
 
   const submit = useCallback(
-    async (data: NetworksFormData) => {
+    async (data: z.infer<typeof networksFormDataSchema>) => {
       const newNetworkData = {
         ...data,
         namespace,
@@ -110,7 +134,8 @@ const AddNetwork = () => {
             await getCosmosAccounts(
               mnemonic,
               hdPath,
-              newNetworkData.addressPrefix,
+              (newNetworkData as z.infer<typeof cosmosNetworkDataSchema>)
+                .addressPrefix,
             )
           ).data.address;
           break;
@@ -262,7 +287,10 @@ const AddNetwork = () => {
                 onChangeText={textValue => onChange(textValue)}
               />
               <HelperText type="error">
-                {errors.currencySymbol?.message}
+                {
+                  (errors as FieldErrors<z.infer<typeof ethNetworkDataSchema>>)
+                    .currencySymbol?.message
+                }
               </HelperText>
             </>
           )}
@@ -283,7 +311,13 @@ const AddNetwork = () => {
                   onChangeText={textValue => onChange(textValue)}
                 />
                 <HelperText type="error">
-                  {errors.nativeDenom?.message}
+                  {
+                    (
+                      errors as FieldErrors<
+                        z.infer<typeof cosmosNetworkDataSchema>
+                      >
+                    ).nativeDenom?.message
+                  }
                 </HelperText>
               </>
             )}
@@ -302,17 +336,20 @@ const AddNetwork = () => {
                   onChangeText={textValue => onChange(textValue)}
                 />
                 <HelperText type="error">
-                  {errors.addressPrefix?.message}
+                  {
+                    (
+                      errors as FieldErrors<
+                        z.infer<typeof cosmosNetworkDataSchema>
+                      >
+                    ).addressPrefix?.message
+                  }
                 </HelperText>
               </>
             )}
           />
         </>
       )}
-      <Button
+      <Button mode="contained" onPress={handleSubmit(submit)}>
-        mode="contained"
-        onPress={handleSubmit(submit)}
-        disabled={!isValid}>
         Submit
       </Button>
     </ScrollView>

yarn.lock

@@ -1692,6 +1692,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@hookform/resolvers@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-3.3.4.tgz#de9b668c2835eb06892290192de6e2a5c906229b"
+  integrity sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -9361,3 +9366,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^3.22.4:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==