diff --git a/apps/explorer/src/app/components/links/external-explorer-link/external-chain-icon.tsx b/apps/explorer/src/app/components/links/external-explorer-link/external-chain-icon.tsx new file mode 100644 index 000000000..27f86d034 --- /dev/null +++ b/apps/explorer/src/app/components/links/external-explorer-link/external-chain-icon.tsx @@ -0,0 +1,34 @@ +import type { ChainIdMapping } from './external-chain'; +import { SUPPORTED_CHAIN_IDS, SUPPORTED_CHAIN_LABELS } from './external-chain'; + +export const SUPPORTED_CHAIN_ICON_URLS: ChainIdMapping = { + '1': '/assets/chain-eth-logo.svg', + '100': '/assets/chain-gno-logo.svg', + '42161': '/assets/chain-arb-logo.svg', + '11155111': '/assets/chain-eth-logo.svg', +}; + +export type ExternalChainIconProps = { + chainId?: string; +}; + +export const ExternalChainIcon = ({ + // If chainID is not provided, default to a non-existent chain + chainId = '-1', +}: ExternalChainIconProps) => { + if (SUPPORTED_CHAIN_IDS.includes(chainId)) { + const url = SUPPORTED_CHAIN_ICON_URLS[chainId]; + const alt = SUPPORTED_CHAIN_LABELS[chainId]; + + return ( + {alt} + ); + } else { + return null; + } +}; diff --git a/apps/explorer/src/app/components/links/external-explorer-link/external-chain.ts b/apps/explorer/src/app/components/links/external-explorer-link/external-chain.ts new file mode 100644 index 000000000..6a0a77ac1 --- /dev/null +++ b/apps/explorer/src/app/components/links/external-explorer-link/external-chain.ts @@ -0,0 +1,38 @@ +export type ChainIdMapping = { + [K in typeof SUPPORTED_CHAIN_IDS[number]]: string; +}; +export const SUPPORTED_CHAIN_IDS: string[] = ['1', '100', '42161', '11155111']; + +export const SUPPORTED_CHAIN_LABELS: ChainIdMapping = { + '1': 'Ethereum', + '100': 'Gnosis', + '42161': 'Arbitrum', + '11155111': 'Sepolia', +}; + +export function getExternalExplorerLink(chainId: string, type: string) { + if (SUPPORTED_CHAIN_IDS.includes(chainId)) { + switch (chainId) { + case '1': + return 'https://etherscan.io'; + case '100': + return 'https://gnosisscan.io'; + case '42161': + return 'https://arbiscan.io'; + case '11155111': + return 'https://sepolia.etherscan.io'; + default: + return '#'; + } + } else { + return '#'; + } +} + +export function getExternalChainLabel(chainId?: string) { + if (chainId && SUPPORTED_CHAIN_IDS.includes(chainId)) { + return SUPPORTED_CHAIN_LABELS[chainId]; + } else { + return 'Custom Chain'; + } +} diff --git a/apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx b/apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx index 040d55ec4..29b0e54b6 100644 --- a/apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx +++ b/apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx @@ -1,4 +1,6 @@ import Hash from '../hash'; +import { getExternalExplorerLink } from './external-chain'; +import { ExternalChainIcon } from './external-chain-icon'; export enum EthExplorerLinkTypes { block = 'block', @@ -9,6 +11,7 @@ export enum EthExplorerLinkTypes { export type ExternalExplorerLinkProps = Partial & { id: string; type: EthExplorerLinkTypes; + // Defaults to Ethereum Mainnet, as chain support was added late chain?: string; code?: boolean; }; @@ -36,74 +39,3 @@ export const ExternalExplorerLink = ({ ); }; - -export const SUPPORTED_CHAIN_IDS: string[] = ['1', '100', '42161', '11155111']; - -type ChainIdMapping = { - [K in typeof SUPPORTED_CHAIN_IDS[number]]: string; -}; - -export const SUPPORTED_CHAIN_LABELS: ChainIdMapping = { - '1': 'Ethereum', - '100': 'Gnosis', - '42161': 'Arbitrum', - '11155111': 'Sepolia', -}; - -export const SUPPORTED_CHAIN_ICON_URLS: ChainIdMapping = { - '1': '/assets/chain-eth-logo.svg', - '100': '/assets/chain-gno-logo.svg', - '42161': '/assets/chain-arb-logo.svg', - '11155111': '/assets/chain-eth-logo.svg', -}; - -export function getExternalExplorerLink(chainId: string, type: string) { - if (SUPPORTED_CHAIN_IDS.includes(chainId)) { - switch (chainId) { - case '1': - return 'https://etherscan.io'; - case '100': - return 'https://gnosisscan.io'; - case '42161': - return 'https://arbiscan.io'; - case '11155111': - return 'https://sepolia.etherscan.io'; - default: - return '#'; - } - } else { - return '#'; - } -} - -export function getExternalChainLabel(chainId?: string) { - if (chainId && SUPPORTED_CHAIN_IDS.includes(chainId)) { - return SUPPORTED_CHAIN_LABELS[chainId]; - } else { - return 'Custom Chain'; - } -} - -type ExternalChainIconProps = { - chainId?: string; -}; - -export const ExternalChainIcon = ({ - chainId = '-1', -}: ExternalChainIconProps) => { - if (SUPPORTED_CHAIN_IDS.includes(chainId)) { - const url = SUPPORTED_CHAIN_ICON_URLS[chainId]; - const alt = SUPPORTED_CHAIN_LABELS[chainId]; - - return ( - {alt} - ); - } else { - return null; - } -}; diff --git a/apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx b/apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx index b1cfc4717..2b7fc7927 100644 --- a/apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx +++ b/apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx @@ -3,8 +3,8 @@ import { t } from '@vegaprotocol/i18n'; import { ExternalExplorerLink, EthExplorerLinkTypes, - getExternalChainLabel, } from '../../../links/external-explorer-link/external-explorer-link'; +import { getExternalChainLabel } from '../../../links/external-explorer-link/external-chain'; import type { components } from '../../../../../types/explorer'; import { defaultAbiCoder, base64 } from 'ethers/lib/utils'; import { BigNumber } from 'ethers'; diff --git a/apps/explorer/src/app/components/txs/tx-order-type.tsx b/apps/explorer/src/app/components/txs/tx-order-type.tsx index 8d300d426..239c55de1 100644 --- a/apps/explorer/src/app/components/txs/tx-order-type.tsx +++ b/apps/explorer/src/app/components/txs/tx-order-type.tsx @@ -1,7 +1,7 @@ import { t } from '@vegaprotocol/i18n'; import type { components } from '../../../types/explorer'; import { VoteIcon } from '../vote-icon/vote-icon'; -import { ExternalChainIcon } from '../links/external-explorer-link/external-explorer-link'; +import { ExternalChainIcon } from '../links/external-explorer-link/external-chain-icon'; interface TxOrderTypeProps { orderType: string; diff --git a/apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx b/apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx index b1154415b..30cb7e06b 100644 --- a/apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx +++ b/apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx @@ -3,8 +3,8 @@ import type { SourceType } from './oracle'; import { ExternalExplorerLink, EthExplorerLinkTypes, - getExternalChainLabel, } from '../../../components/links/external-explorer-link/external-explorer-link'; +import { getExternalChainLabel } from '../../../components/links/external-explorer-link/external-chain'; import { t } from 'i18next'; interface OracleDetailsEthSourceProps {