diff --git a/src/components/chainlist.jsx b/src/components/chainlist.jsx index b19ab7440..8cb57fde6 100644 --- a/src/components/chainlist.jsx +++ b/src/components/chainlist.jsx @@ -1,6 +1,46 @@ -import { useState, useEffect } from 'react' +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" + +function ChainListRow({ chainId, name, identifier, environment }) { + return ( + + {identifier} + {name} + {chainId} + + + + + ) +} + + +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) + } + index.set(chain.network_id, chain) + } + return index +} export default ({ environment }) => { + const chainIndex = useMemo(() => { + switch (environment) { + case `mainnet`: + return createChainIndex([...mainnetEvmMetadata, ...mainnetCosmosMetadata]) + case `testnet`: + return createChainIndex([...testnetEvmMetadata, ...testnetCosmosMetadata]) + default: + console.error(`invalid environment ${environment}`) + return null + } + }, [environment]); const [fetching, setFetching] = useState(false) const [response, setResponse] = useState(null) @@ -11,34 +51,63 @@ export default ({ environment }) => { }, [response]) const request = async () => { - + 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`; - fetch(endpoint_url) - .then(data => data.json()) - .then(chains => setResponse(chains)) - .catch(error => setError(true)) - .finally(() => setFetching(false)) + 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)) } - if (fetching) + const tableRowData = useMemo(() => { + if (!response) return null + return response.chains.map((chainIdentifier, idx) => { + const chainData = chainIndex.get(chainIdentifier) + if (!chainData) { + console.error(`chain ${chainIdentifier} not found in chain index`) + return null + } + + return + }); + }, [response, environment]) + + if (fetching) return
- Fetching active chains... + Fetching active chains...
- if (error) + if (error) return
- Error loading chains. Please refresh this page. + Error loading chains. Please refresh this page.
- + return (
- {response && response.chains && response.chains.map(chain =>
* {chain}
)} + + + + + + + + + + + {tableRowData} + +
Chain IdentifierChain NameChain ID (EVM)Add Chain
) } \ No newline at end of file