diff --git a/src/components/chainlist.jsx b/src/components/chainlist.jsx
index 8cb57fde6..9359cd129 100644
--- a/src/components/chainlist.jsx
+++ b/src/components/chainlist.jsx
@@ -1,7 +1,13 @@
-import { useState, useEffect, useMemo } from 'react'
-import { mainnet as mainnetEvmMetadata, testnet as testnetEvmMetadata } from "../../src/data/evm_chains.json"
-import { mainnet as mainnetCosmosMetadata, testnet as testnetCosmosMetadata } from "../../src/data/cosmos_chains.json"
-import AddKeplr from "./keplr"
+import { useState, useEffect, useMemo } from "react";
+import {
+ mainnet as mainnetEvmMetadata,
+ testnet as testnetEvmMetadata,
+} from "../../src/data/evm_chains.json";
+import {
+ mainnet as mainnetCosmosMetadata,
+ testnet as testnetCosmosMetadata,
+} from "../../src/data/cosmos_chains.json";
+import AddKeplr from "./keplr/add-keplr";
function ChainListRow({ chainId, name, identifier, environment }) {
return (
@@ -13,85 +19,93 @@ function ChainListRow({ chainId, name, identifier, environment }) {
- )
+ );
}
-
const createChainIndex = (chains) => {
const index = new Map();
for (const chain of chains) {
if (index.has(chain.chain_id)) {
- console.error(`duplicate chain ${chain.chain_id}. Removing to be safe`)
- index.delete(chain.chain_id)
+ console.error(`duplicate chain ${chain.chain_id}. Removing to be safe`);
+ index.delete(chain.chain_id);
}
- index.set(chain.network_id, chain)
+ index.set(chain.network_id, chain);
}
- return index
-}
+ return index;
+};
export default ({ environment }) => {
const chainIndex = useMemo(() => {
switch (environment) {
case `mainnet`:
- return createChainIndex([...mainnetEvmMetadata, ...mainnetCosmosMetadata])
+ return createChainIndex([
+ ...mainnetEvmMetadata,
+ ...mainnetCosmosMetadata,
+ ]);
case `testnet`:
- return createChainIndex([...testnetEvmMetadata, ...testnetCosmosMetadata])
+ return createChainIndex([
+ ...testnetEvmMetadata,
+ ...testnetCosmosMetadata,
+ ]);
default:
- console.error(`invalid environment ${environment}`)
- return null
+ console.error(`invalid environment ${environment}`);
+ return null;
}
}, [environment]);
- const [fetching, setFetching] = useState(false)
- const [response, setResponse] = useState(null)
- const [error, setError] = useState(null)
+ const [fetching, setFetching] = useState(false);
+ const [response, setResponse] = useState(null);
+ const [error, setError] = useState(null);
useEffect(() => {
if (!response) request();
- }, [response])
+ }, [response]);
const request = async () => {
+ setFetching(true);
- setFetching(true)
-
- const endpoint_url = environment === `testnet`
- ? `https://lcd-axelar-testnet.imperator.co/axelar/nexus/v1beta1/chains?status=1`
- : `https://lcd-axelar.imperator.co/axelar/nexus/v1beta1/chains?status=1`;
+ const endpoint_url =
+ environment === `testnet`
+ ? `https://lcd-axelar-testnet.imperator.co/axelar/nexus/v1beta1/chains?status=1`
+ : `https://lcd-axelar.imperator.co/axelar/nexus/v1beta1/chains?status=1`;
fetch(endpoint_url)
- .then(data => data.json())
- .then(chains => setResponse(chains))
- .catch(error => setError(true))
- .finally(() => setFetching(false))
- }
+ .then((data) => data.json())
+ .then((chains) => setResponse(chains))
+ .catch((error) => setError(true))
+ .finally(() => setFetching(false));
+ };
const tableRowData = useMemo(() => {
- if (!response) return null
+ if (!response) return null;
return response.chains.map((chainIdentifier, idx) => {
- const chainData = chainIndex.get(chainIdentifier)
+ const chainData = chainIndex.get(chainIdentifier);
if (!chainData) {
- console.error(`chain ${chainIdentifier} not found in chain index`)
- return null
+ console.error(`chain ${chainIdentifier} not found in chain index`);
+ return null;
}
- return
+ return (
+
+ );
});
- }, [response, environment])
+ }, [response, environment]);
if (fetching)
- return
- Fetching active chains...
-
+ return Fetching active chains...
;
if (error)
- return
- Error loading chains. Please refresh this page.
-
+ return (
+
+ Error loading chains. Please refresh this page.
+
+ );
return (
@@ -104,10 +118,8 @@ export default ({ environment }) => {
Add Chain |
-
- {tableRowData}
-
+ {tableRowData}
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/src/components/keplr/add-custom-keplr.jsx b/src/components/keplr/add-custom-keplr.jsx
new file mode 100644
index 000000000..435ebd241
--- /dev/null
+++ b/src/components/keplr/add-custom-keplr.jsx
@@ -0,0 +1,67 @@
+export default ({
+ providedSettings = null,
+ title = "Add Custom Chain Config",
+}) => {
+ let settings;
+ const addNetwork = async () => {
+ if (!providedSettings) {
+ let field = document.getElementById("keplr_wallet_json_configuration");
+ console.log("field", field);
+
+ // re-layout the field
+ try {
+ const ugly = field.value;
+ document.getElementById("keplr_wallet_json_configuration").value =
+ JSON.stringify(JSON.parse(ugly), undefined, 4);
+ } catch (error) {
+ if (error instanceof SyntaxError) {
+ alert(
+ "There was a syntax error. Please correct it and try again: " +
+ error.message
+ );
+ } else {
+ throw error;
+ }
+ }
+
+ try {
+ settings = JSON.parse(field.value);
+ } catch (error) {
+ if (error instanceof SyntaxError) {
+ alert(
+ "There was a syntax error. Please correct it and try again: " +
+ error.message
+ );
+ } else {
+ alert(error.message);
+ }
+ }
+ } else {
+ settings = providedSettings;
+ }
+ console.log("settings were determined to be", settings);
+
+ try {
+ await window.keplr.enable(settings.chainId);
+ alert(settings.chainId + " already added");
+ } catch (e) {
+ console.log(
+ "Unable to connect to wallet natively, so trying experimental chain"
+ );
+ try {
+ await window.keplr.experimentalSuggestChain(settings);
+ await window.keplr.enable(settings.chainId);
+ } catch (e2) {
+ alert("Invalid Keplr JSON configuration. " + e2.message);
+ console.log("and yet there is a problem in trying to do that too", e2);
+ }
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/keplr/index.jsx b/src/components/keplr/add-keplr.jsx
similarity index 100%
rename from src/components/keplr/index.jsx
rename to src/components/keplr/add-keplr.jsx
diff --git a/src/components/textarea.jsx b/src/components/textarea.jsx
index 00efb708d..8ebb9bc05 100644
--- a/src/components/textarea.jsx
+++ b/src/components/textarea.jsx
@@ -1,24 +1,28 @@
import { useState } from "react";
-const placeholder = '{"rpc":"https://axelartest-rpc.quickapi.com:443","rest":"https://axelartest-lcd.quickapi.com:443","chainId":"axelar-testnet-lisbon-3","chainName":"Axelar Testnet","stakeCurrency":{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6},"bech32Config":{"bech32PrefixAccAddr":"axelar","bech32PrefixAccPub":"axelarpub","bech32PrefixValAddr":"axelarvaloper","bech32PrefixValPub":"axelarvaloperpub","bech32PrefixConsAddr":"axelarvalcons","bech32PrefixConsPub":"axelarvalconspub"},"bip44":{"coinType":118},"currencies":[{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6}],"gasPriceStep":{"low":0.05,"average":0.125,"high":0.2},"features":["stargate","no-legacy-stdTx","ibc-transfer"]}'
+const placeholder =
+ '{"rpc":"https://axelartest-rpc.quickapi.com:443","rest":"https://axelartest-lcd.quickapi.com:443","chainId":"axelar-testnet-lisbon-3","chainName":"Axelar Testnet","stakeCurrency":{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6},"bech32Config":{"bech32PrefixAccAddr":"axelar","bech32PrefixAccPub":"axelarpub","bech32PrefixValAddr":"axelarvaloper","bech32PrefixValPub":"axelarvaloperpub","bech32PrefixConsAddr":"axelarvalcons","bech32PrefixConsPub":"axelarvalconspub"},"bip44":{"coinType":118},"currencies":[{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"AXL","coinMinimalDenom":"uaxl","coinDecimals":6}],"gasPriceStep":{"low":0.05,"average":0.125,"high":0.2},"features":["stargate","no-legacy-stdTx","ibc-transfer"]}';
export default ({}) => {
+ const [value, setValue] = useState(placeholder);
- const [value, setValue] = useState(placeholder);
-
- return <>
-
-
+ return (
+ <>
+
+
>
-};
\ No newline at end of file
+ );
+};
diff --git a/src/pages/resources/keplr.mdx b/src/pages/resources/keplr.mdx
index 6e381f0f4..0c52cd7c7 100644
--- a/src/pages/resources/keplr.mdx
+++ b/src/pages/resources/keplr.mdx
@@ -1,9 +1,11 @@
# Add a custom network to Keplr
import Button from "../../components/keplr/addKeplrWallet";
-import AddKeplr from "../../components/keplr";
+import AddKeplr from "../../components/keplr/add-keplr";
+import AddCustomKeplr from "../../components/keplr/add-custom-keplr";
import Form from "../../components/textarea";
+
## Don't have the Keplr Browser extension? Add it here:
[Add Keplr Wallet](https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap?hl=en")
@@ -28,49 +30,6 @@ import Form from "../../components/textarea";
| Terra-2 | | |
## Add your custom network
-
-
-
+
+