Merge pull request #540 from lidofinance/fix/chain-id-in-scan-links

fix: chain id in scan links

shared/components/tx-link-etherscan/tx-link-etherscan.tsx

@@ -12,14 +12,17 @@ type TxLinkEtherscanProps = {
 
 export const TxLinkEtherscan = (props: TxLinkEtherscanProps) => {
   const { txHash, text = 'View on Etherscan', onClick } = props;
-  const { chainId } = useDappStatus();
+  const { walletChainId } = useDappStatus();
 
   if (!txHash) return null;
 
+  // This component is used in TransactionModal, which is wrapped by SupportL1Chains,
+  // but not wrapped by SupportL2Chains (the chainId will never be a L2 network).
+  // This is currently the fastest solution.
   return (
     <Link
       onClick={onClick}
-      href={getEtherscanTxLink(chainId as CHAINS, txHash)}
+      href={getEtherscanTxLink(walletChainId as CHAINS, txHash)}
     >
       {text}
     </Link>

shared/wallet/wallet-modal/wallet-modal.tsx

@@ -10,6 +10,7 @@ import {
 import { openWindow } from '@lido-sdk/helpers';
 import { useConnectorInfo, useDisconnect } from 'reef-knot/core-react';
 
+import { CHAINS } from 'consts/chains';
 import type { ModalComponentType } from 'providers/modal-provider';
 import { useCopyToClipboard } from 'shared/hooks';
 import { getEtherscanAddressLink } from 'utils/get-etherscan-address-link';
@@ -25,7 +26,7 @@ import {
 import { useDappStatus } from 'modules/web3';
 
 export const WalletModal: ModalComponentType = ({ onClose, ...props }) => {
-  const { address, chainId } = useDappStatus();
+  const { address, chainId, walletChainId } = useDappStatus();
   const { connectorName } = useConnectorInfo();
   const { disconnect } = useDisconnect();
 
@@ -36,9 +37,16 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => {
 
   const handleCopy = useCopyToClipboard(address ?? '');
   const handleEtherscan = useCallback(() => {
-    const link = getEtherscanAddressLink(chainId, address ?? '', chainId);
+    // This component is wrapped by SupportL1Chains,
+    // but not wrapped by SupportL2Chains (the chainId will never be a L2 network).
+    // This is currently the fastest solution.
+    const link = getEtherscanAddressLink(
+      walletChainId as CHAINS,
+      address ?? '',
+      chainId,
+    );
     openWindow(link);
-  }, [address, chainId]);
+  }, [address, chainId, walletChainId]);
 
   useEffect(() => {
     // Close the modal if a wallet was somehow disconnected while the modal was open