Auto-populate cosmos chain details from chain id (#95)

* Autplopulate cosmos chain details from chain id

* Display rpc url

* Remove assert

* Make review changes

* Use watch to trigger function

* Use usewatch

src/components/Accounts.tsx

@@ -161,10 +161,8 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
       '_',
       JSON.stringify(updatedNetworks),
     );
-    const currentNetwork = networksData.find(
-      networkData => networkData.networkId === '0',
-    );
-    setSelectedNetwork(currentNetwork!);
+
+    setSelectedNetwork(updatedNetworks[0]);
     setDeleteNetworkDialog(false);
     setNetworksData(updatedNetworks);
   };

src/screens/AddNetwork.tsx

@@ -1,12 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollView } from 'react-native';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, useWatch } from 'react-hook-form';
 import { TextInput, Button, HelperText } from 'react-native-paper';
 import {
   getInternetCredentials,
   setInternetCredentials,
 } from 'react-native-keychain';
 import { HDNode } from 'ethers/lib/utils';
+import { chains } from 'chain-registry';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
@@ -33,6 +35,11 @@ const AddNetwork = () => {
     mode: 'onChange',
   });
 
+  const watchChainId = useWatch({
+    control,
+    name: 'chainId',
+  });
+
   const { setNetworksData } = useNetworks();
 
   const [namespace, setNamespace] = useState<string>(EIP155);
@@ -41,6 +48,22 @@ const AddNetwork = () => {
     setNamespace(newNetworkType);
   };
 
+  const fetchChainDetails = useDebouncedCallback((chainId: string) => {
+    const cosmosChainDetails = chains.find(
+      ({ chain_id }) => chain_id === chainId,
+    );
+
+    if (!cosmosChainDetails) {
+      return;
+    }
+    setValue('networkName', cosmosChainDetails.pretty_name);
+    setValue('rpcUrl', cosmosChainDetails.apis?.rpc?.[0]?.address || '');
+    setValue('blockExplorerUrl', cosmosChainDetails.explorers?.[0].url || '');
+    setValue('addressPrefix', cosmosChainDetails.bech32_prefix);
+    setValue('coinType', String(cosmosChainDetails.slip44));
+    setValue('nativeDenom', cosmosChainDetails.fees?.fee_tokens[0].denom || '');
+  }, 2000);
+
   const submit = useCallback(
     async (data: NetworksFormData) => {
       const newNetworkData = {
@@ -110,12 +133,31 @@ const AddNetwork = () => {
   );
 
   useEffect(() => {
-    setValue('coinType', namespace === EIP155 ? '60' : '118');
-  }, [setValue, namespace]);
+    fetchChainDetails(watchChainId);
+  }, [watchChainId, fetchChainDetails]);
 
   return (
     // TODO: get form data from json file
     <ScrollView contentContainerStyle={styles.signPage}>
+      <SelectNetworkType updateNetworkType={updateNetworkType} />
+
+      <Controller
+        control={control}
+        name="chainId"
+        defaultValue=""
+        render={({ field: { onChange, onBlur, value } }) => (
+          <>
+            <TextInput
+              mode="outlined"
+              value={value}
+              label="Chain ID"
+              onBlur={onBlur}
+              onChangeText={value => onChange(value)}
+            />
+            <HelperText type="error">{errors.chainId?.message}</HelperText>
+          </>
+        )}
+      />
       <Controller
         control={control}
         defaultValue=""
@@ -150,23 +192,7 @@ const AddNetwork = () => {
           </>
         )}
       />
-      <Controller
-        control={control}
-        name="chainId"
-        defaultValue=""
-        render={({ field: { onChange, onBlur, value } }) => (
-          <>
-            <TextInput
-              mode="outlined"
-              value={value}
-              label="Chain ID"
-              onBlur={onBlur}
-              onChangeText={value => onChange(value)}
-            />
-            <HelperText type="error">{errors.chainId?.message}</HelperText>
-          </>
-        )}
-      />
+
       <Controller
         control={control}
         defaultValue=""
@@ -186,7 +212,6 @@ const AddNetwork = () => {
           </>
         )}
       />
-      <SelectNetworkType updateNetworkType={updateNetworkType} />
       <Controller
         control={control}
         name="coinType"