Fixed Cursor Jumping & Input Precision

.eslintrc.json

@@ -6,7 +6,8 @@
   "extends": [
     "standard",
     "eslint:recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "prettier"
   ],
   "globals": {
     "Atomics": "readonly",
@@ -28,10 +29,10 @@
     }
   },
   "rules": {
-    "indent": [
-      2,
-      4
-    ],
+    // "indent": [
+    //   2,
+    //   4
+    // ],
     "arrow-parens": [
       2,
       "always"

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "tabWidth": 4,
+    "useTabs": false,
+    "singleQuote": true,
+    "semi": true,
+    "trailingComma": "all"
+}

src/components/TextField/index.js

@@ -30,7 +30,26 @@ const useStyles = makeStyles(() => ({
 
 const TextField = (props) => {
     const onChange = (e) => {
-        props.onChange(e.target.value);
+        // Prevents cursor from jumping to the end of the input (see https://stackoverflow.com/a/62433499)
+        // input.type of 'text' for numeric inputs is required in order to enable setting of selectionStart and selectionEnd
+        const caret = e.currentTarget.selectionStart;
+        const element = e.target;
+        window.requestAnimationFrame(() => {
+            try {
+                element.selectionStart = caret;
+                element.selectionEnd = caret;
+            } catch (err) {
+                console.error(err);
+            }
+        });
+        // manually handle numeric input.
+        if (props.type === 'number') {
+            const parsedNumber = +(e.target.value);
+            const nextVal = Number.isNaN(parsedNumber) ? (+props.value ? props.value : '0') : e.target.value;
+            props.onChange(nextVal);
+        } else {
+            props.onChange(e.target.value);
+        }
     };
 
     return (
@@ -45,11 +64,13 @@ const TextField = (props) => {
                 </span>
                 : ''}
             id={props.id}
+            // ensures that manually parsed numeric inputs are displayed as numbers
+            inputMode={props.type === 'number' ? 'numeric' : 'text'}
             margin="normal"
             multiline={props.multiline ? props.multiline : false}
             name={props.name}
             placeholder={props.placeholder}
-            type={props.type ? props.type : 'text'}
+            type={props.type && props.type !== 'number' ? props.type : 'text'}
             value={props.value}
             variant="outlined"
             onChange={onChange}/>

src/config.js

@@ -1,4 +1,122 @@
-export const config = {
+const configs =
+    JSON.parse(localStorage.getItem('chain-registry') || 'null') || [];
+
+const globalConfigs = configs;
+
+window.configs = configs;
+
+const latestCommitPromise = fetch(
+    `https://api.github.com/repos/cosmos/chain-registry/commits/master`,
+)
+    .then((r) => r.json())
+    .then((r) => r.sha);
+
+const fetchCached = async (url, options) => {
+    const latestCommitHash = await latestCommitPromise;
+    const cache = sessionStorage.getItem(latestCommitHash + url);
+    if (cache) {
+        return Promise.resolve(JSON.parse(cache));
+    }
+    return fetch(url, options)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            throw new Error(response.statusText);
+        })
+        .then((json) => {
+            sessionStorage.setItem(
+                latestCommitHash + url,
+                JSON.stringify(json),
+            );
+            return json;
+        });
+};
+fetchCached('https://api.github.com/repos/cosmos/chain-registry/contents').then(
+    async (data) => {
+        const configs = [];
+        for (const file of data) {
+            try {
+                if (file.name.startsWith('.') || file.type !== 'dir') {
+                    continue;
+                }
+                const assetsConfig = await fetchCached(
+                    `https://raw.githubusercontent.com/cosmos/chain-registry/master/${file.name}/assetlist.json`,
+                );
+                const chainConfig = await fetchCached(
+                    `https://raw.githubusercontent.com/cosmos/chain-registry/master/${file.name}/chain.json`,
+                );
+                const stakingAsset = assetsConfig.assets[0];
+                const sortApis = (apis, type) => {
+                    const getValue = (api) => {
+                        return (
+                            api.address.includes('zenchainlabs') +
+                            api.address.includes('.com') +
+                            api.address.includes('.io')
+                        );
+                    };
+                    const result = apis.sort((a, b) => {
+                        return getValue(b) - getValue(a);
+                    });
+
+                    const isIPAddress = Number.isInteger(
+                        +new URL(result[0].address).hostname.replaceAll(
+                            '.',
+                            '',
+                        ),
+                    );
+                    if (result[0] && isIPAddress) {
+                        result.unshift({
+                            ...result[0],
+                            address: `https://${type}-${chainConfig.chain_name.toLowerCase()}.keplr.app`,
+                        });
+                    }
+                    return result;
+                };
+                const decimals = (
+                    stakingAsset.denom_units.find(
+                        (unit) => unit.denom === stakingAsset.display,
+                    ) || {}
+                ).exponent;
+                const config = {
+                    RPC_URL: sortApis([...chainConfig.apis.rpc], 'rpc')[0]
+                        .address,
+                    REST_URL: sortApis([...chainConfig.apis.rest], 'lcd')[0]
+                        .address,
+                    EXPLORER_URL: `https://www.mintscan.io/${chainConfig.chain_name}`,
+                    NETWORK_NAME: chainConfig.pretty_name,
+                    NETWORK_TYPE: 'mainnet',
+                    CHAIN_ID: chainConfig.chain_id,
+                    CHAIN_NAME: chainConfig.chain_name,
+                    COIN_DENOM: stakingAsset.symbol,
+                    COIN_MINIMAL_DENOM: stakingAsset.base,
+                    COIN_DECIMALS: decimals === undefined ? 6 : decimals,
+                    PREFIX: stakingAsset.display,
+                    COIN_TYPE: 118,
+                    COINGECKO_ID: 'juno-network',
+                    DEFAULT_GAS: 250000,
+                    GAS_PRICE_STEP_LOW: 0.005,
+                    GAS_PRICE_STEP_AVERAGE: 0.025,
+                    GAS_PRICE_STEP_HIGH: 0.08,
+                    FEATURES: ['stargate', 'ibc-transfer'],
+                };
+                configs.push(config);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+        console.log(configs);
+        // localStorage.setItem('chain', prompt('Enter chain name: ' + configs.map((c) => c.CHAIN_NAME).join(', ')));
+        if (JSON.stringify(globalConfigs) !== JSON.stringify(configs)) {
+            localStorage.setItem('chain-registry', JSON.stringify(configs));
+            window.location.reload();
+        }
+    },
+);
+
+export const config = configs.find(
+    (c) => c.NETWORK_NAME === localStorage.getItem('chain'),
+) || {
     RPC_URL: 'https://rpc.juno.omniflix.co',
     REST_URL: 'https://api.juno.omniflix.co',
     EXPLORER_URL: 'https://www.mintscan.io/juno',