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

package.json

@@ -23,6 +23,7 @@
     "@react-navigation/native-stack": "^6.9.18",
     "@walletconnect/react-native-compat": "^2.11.2",
     "@walletconnect/web3wallet": "^1.10.2",
+    "chain-registry": "^1.41.2",
     "cosmjs-types": "^0.9.0",
     "ethers": "5.7.2",
     "fast-text-encoding": "^1.0.6",
@@ -44,7 +45,8 @@
     "react-native-svg": "^15.1.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-vision-camera": "^3.9.0",
-    "text-encoding-polyfill": "^0.6.7"
+    "text-encoding-polyfill": "^0.6.7",
+    "use-debounce": "^10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

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(updatedNetworks[0]);
-    );
-    setSelectedNetwork(currentNetwork!);
     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');
+    fetchChainDetails(watchChainId);
-  }, [setValue, namespace]);
+  }, [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"

yarn.lock

@@ -1167,6 +1167,11 @@
     deepmerge "^3.2.0"
     hoist-non-react-statics "^3.3.0"
 
+"@chain-registry/types@^0.25.1":
+  version "0.25.1"
+  resolved "https://registry.yarnpkg.com/@chain-registry/types/-/types-0.25.1.tgz#95ce2b822863a375596c54c798158524afa08d26"
+  integrity sha512-AbsJ2peoi9EjmdScFCLMqNhthJpLQUlEg3aiqSEonoqbKs6y1AuHqice2BuGBFGiAGQuAwUZR8HQDN46cIII3A==
+
 "@confio/ics23@^0.6.8":
   version "0.6.8"
   resolved "https://registry.yarnpkg.com/@confio/ics23/-/ics23-0.6.8.tgz#2a6b4f1f2b7b20a35d9a0745bb5a446e72930b3d"
@@ -3812,6 +3817,13 @@ caniuse-lite@^1.0.30001580:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001585.tgz#0b4e848d84919c783b2a41c13f7de8ce96744401"
   integrity sha512-yr2BWR1yLXQ8fMpdS/4ZZXpseBgE7o4g41x3a6AJOqZuOi+iE/WdJYAuZ6Y95i4Ohd2Y+9MzIWRR+uGABH4s3Q==
 
+chain-registry@^1.41.2:
+  version "1.41.2"
+  resolved "https://registry.yarnpkg.com/chain-registry/-/chain-registry-1.41.2.tgz#5291d033598fdda40ffc151f7d406f9e9294e3d3"
+  integrity sha512-knxtrOgtCrOf6Fa9V9u/ZhF5oEjgRkoSVLH3wgaID0HAx3gbLwSmlDUl7jaCnOlBxtfQHenjuLEJeqs198GFjQ==
+  dependencies:
+    "@chain-registry/types" "^0.25.1"
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -9037,6 +9049,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.0.tgz#5091b18d6c16292605f588bae3c0d2cfae756ff2"
+  integrity sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==
+
 use-latest-callback@^0.1.5, use-latest-callback@^0.1.7:
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.9.tgz#10191dc54257e65a8e52322127643a8940271e2a"