fix(trading): external explorer link (#5973)

apps/explorer/src/app/components/links/external-explorer-link/external-chain-icon.tsx

@@ -1,5 +1,8 @@
-import type { ChainIdMapping } from './external-chain';
+import type { ChainIdMapping } from '@vegaprotocol/environment';
-import { SUPPORTED_CHAIN_IDS, SUPPORTED_CHAIN_LABELS } from './external-chain';
+import {
+  SUPPORTED_CHAIN_IDS,
+  SUPPORTED_CHAIN_LABELS,
+} from '@vegaprotocol/environment';
 
 export const SUPPORTED_CHAIN_ICON_URLS: ChainIdMapping = {
   '1': '/assets/chain-eth-logo.svg',

apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx

@@ -1,5 +1,5 @@
 import Hash from '../hash';
-import { getExternalExplorerLink } from './external-chain';
+import { getExternalExplorerLink } from '@vegaprotocol/environment';
 import { ExternalChainIcon } from './external-chain-icon';
 
 export enum EthExplorerLinkTypes {
@@ -23,7 +23,7 @@ export const ExternalExplorerLink = ({
   code = false,
   ...props
 }: ExternalExplorerLinkProps) => {
-  const link = `${getExternalExplorerLink(chain, type)}/${type}/${id}${
+  const link = `${getExternalExplorerLink(chain)}/${type}/${id}${
     code ? '#code' : ''
   }`;
   return (

apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx

@@ -4,7 +4,7 @@ import {
   ExternalExplorerLink,
   EthExplorerLinkTypes,
 } from '../../../links/external-explorer-link/external-explorer-link';
-import { getExternalChainLabel } from '../../../links/external-explorer-link/external-chain';
+import { getExternalChainLabel } from '@vegaprotocol/environment';
 import type { components } from '../../../../../types/explorer';
 import { defaultAbiCoder, base64 } from 'ethers/lib/utils';
 import { BigNumber } from 'ethers';

apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx

@@ -4,7 +4,7 @@ import {
   ExternalExplorerLink,
   EthExplorerLinkTypes,
 } from '../../../components/links/external-explorer-link/external-explorer-link';
-import { getExternalChainLabel } from '../../../components/links/external-explorer-link/external-chain';
+import { getExternalChainLabel } from '@vegaprotocol/environment';
 import { t } from 'i18next';
 
 interface OracleDetailsEthSourceProps {

libs/environment/src/components/etherscan-link.tsx

@@ -2,18 +2,21 @@ import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import type { ComponentProps } from 'react';
 import { ETHERSCAN_ADDRESS, ETHERSCAN_TX, useEtherscanLink } from '../hooks';
 import { useT } from '../use-t';
+import { getExternalChainLabel } from '../external-chain';
 
 export const EtherscanLink = ({
   address,
   tx,
+  sourceChainId,
   children,
   ...props
 }: {
   address?: string;
   tx?: string;
+  sourceChainId?: number;
 } & ComponentProps<typeof ExternalLink>) => {
   const t = useT();
-  const etherscanLink = useEtherscanLink();
+  const etherscanLink = useEtherscanLink(sourceChainId);
   let href = '';
 
   if ((!address && !tx) || (address && tx)) {
@@ -30,7 +33,13 @@ export const EtherscanLink = ({
   return (
     <ExternalLink
       href={href}
-      title={t('View on Etherscan (opens in a new tab)')}
+      title={
+        sourceChainId
+          ? t('View on {{chainLabel}} (opens in a new tab)', {
+              chainLabel: getExternalChainLabel(sourceChainId.toString()),
+            })
+          : t('View on Etherscan (opens in a new tab)')
+      }
       {...props}
     >
       {children || address || tx}

libs/environment/src/external-chain.ts

@@ -10,7 +10,7 @@ export const SUPPORTED_CHAIN_LABELS: ChainIdMapping = {
   '11155111': 'Sepolia',
 };
 
-export function getExternalExplorerLink(chainId: string, type: string) {
+export function getExternalExplorerLink(chainId: string) {
   if (SUPPORTED_CHAIN_IDS.includes(chainId)) {
     switch (chainId) {
       case '1':

libs/environment/src/hooks/use-links.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { Networks } from '../types';
 import { ENV, useEnvironment } from './use-environment';
 import { stripFullStops } from '@vegaprotocol/utils';
+import { getExternalExplorerLink } from '../external-chain';
 
 const VEGA_DOCS_URL =
   process.env['NX_VEGA_DOCS_URL'] || 'https://docs.vega.xyz/mainnet';
@@ -119,9 +120,15 @@ export const useLinks = (dapp: DApp, network?: Net) => {
   return link;
 };
 
-export const useEtherscanLink = () => {
+export const useEtherscanLink = (sourceChainId?: number) => {
   const { ETHERSCAN_URL } = useEnvironment();
-  const baseUrl = trim(ETHERSCAN_URL, '/');
+
+  const otherScanUrl = sourceChainId
+    ? getExternalExplorerLink(sourceChainId.toString())
+    : undefined;
+
+  const baseUrl = trim(otherScanUrl || ETHERSCAN_URL, '/');
+
   const link = useCallback(
     (url?: string) => `${baseUrl}/${trim(url, '/') || ''}`,
     [baseUrl]

libs/environment/src/index.ts

@@ -9,3 +9,6 @@ export * from './types';
 
 // Utils
 export * from './utils/__generated__/NodeCheck';
+
+// External chain environments
+export * from './external-chain';

libs/i18n/src/locales/en/environment.json

@@ -38,6 +38,7 @@
   "This app will only work on {{VEGA_ENV}}. Select a node to connect to.": "This app will only work on {{VEGA_ENV}}. Select a node to connect to.",
   "VALIDATOR_TESTNET": "VALIDATOR_TESTNET",
   "View on Etherscan (opens in a new tab)": "View on Etherscan (opens in a new tab)",
+  "View on {{chainLabel}} (opens in a new tab)": "View on {{chainLabel}} (opens in a new tab)",
   "Warning delay ( >{{warningLatency}} sec): {{blockUpdateLatency}} sec": "Warning delay ( >{{warningLatency}} sec): {{blockUpdateLatency}} sec",
   "Yes": "Yes"
 }

libs/i18n/src/locales/en/markets.json

@@ -144,6 +144,7 @@
   "View governance proposal": "View governance proposal",
   "View liquidity provision table": "View liquidity provision table",
   "View on Etherscan": "View on Etherscan",
+  "View on {{chainLabel}}": "View on {{chainLabel}}",
   "View settlement data specification": "View settlement data specification",
   "View settlement schedule specification": "View settlement schedule specification",
   "View termination specification": "View termination specification",

libs/markets/src/lib/components/market-info/MarketInfo.graphql

@@ -46,6 +46,7 @@ fragment DataSource on DataSourceSpec {
                 operator
               }
             }
+            sourceChainId
           }
           ... on DataSourceSpecConfiguration {
             signers {

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -58,6 +58,7 @@ import {
   useEnvironment,
   useLinks,
   DocsLinks,
+  getExternalChainLabel,
 } from '@vegaprotocol/environment';
 import type { Provider } from '../../oracle-schema';
 import { OracleBasicProfile } from '../../components/oracle-basic-profile';
@@ -893,8 +894,15 @@ export const EthOraclePanel = ({ sourceType }: { sourceType: EthCallSpec }) => {
           </KeyValueTable>
 
           <div className="my-2">
-            <EtherscanLink address={sourceType.address}>
+            <EtherscanLink
-              {t('View on Etherscan')}
+              address={sourceType.address}
+              sourceChainId={sourceType.sourceChainId}
+            >
+              {t('View on {{chainLabel}}', {
+                chainLabel: getExternalChainLabel(
+                  sourceType.sourceChainId.toString()
+                ),
+              })}
             </EtherscanLink>
           </div>
         </>