feat: future setup for support other l2

features/rewards/components/IndexerLink.tsx

@@ -1,5 +1,5 @@
 import { Box, External as ExternalLinkIcon } from '@lidofinance/lido-ui';
-import { getEtherscanTxLink } from 'utils/get-etherscan-tx-link';
+import { getEtherscanTxLink } from 'utils/etherscan';
 
 import { config } from 'config';
 

features/stake/lido-stats/lido-stats.tsx

@@ -1,17 +1,16 @@
 import { FC, memo, useMemo } from 'react';
 
-import { getEtherscanTokenLink } from '@lido-sdk/helpers';
 import { useSDK } from '@lido-sdk/react';
 import { getTokenAddress, TOKENS } from '@lido-sdk/constants';
 import { Block, DataTable, Question, Tooltip } from '@lidofinance/lido-ui';
 
-import { Section, MatomoLink } from 'shared/components';
-import { useLidoApr, useLidoStats } from 'shared/hooks';
-
 import { config } from 'config';
-
 import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text';
 import { MATOMO_CLICK_EVENTS_TYPES } from 'consts/matomo-click-events';
+import { getEtherscanTokenLink } from 'utils/etherscan';
+
+import { Section, MatomoLink } from 'shared/components';
+import { useLidoApr, useLidoStats } from 'shared/hooks';
 
 import { FlexCenterVertical } from './styles';
 import { LidoStatsItem } from './lido-stats-item';

features/wsteth/shared/wrap-faq/ethereum-faq/faq.tsx

@@ -0,0 +1,21 @@
+import {
+  WhatIsWsteth,
+  HowCanIGetWsteth,
+  HowCanIUseWsteth,
+  DoIGetMyStakingRewards,
+  DoINeedToClaimMyStakingRewards,
+  HowCouldIUnwrapWstethToSteth,
+  DoINeedToUnwrapMyWsteth,
+} from './list';
+
+export const EthereumFAQ = () => (
+  <>
+    <WhatIsWsteth />
+    <HowCanIGetWsteth />
+    <HowCanIUseWsteth />
+    <DoIGetMyStakingRewards />
+    <DoINeedToClaimMyStakingRewards />
+    <HowCouldIUnwrapWstethToSteth />
+    <DoINeedToUnwrapMyWsteth />
+  </>
+);

features/wsteth/shared/wrap-faq/optimism-faq/faq.tsx

@@ -0,0 +1,23 @@
+import {
+  WhatIsWstethOnOptimism,
+  HowCanIGetWstethOnOptimism,
+  HowCanIUseWstethOnOptimism,
+  CanIStakeMyETHDirectlyOnOptimism,
+  DoIStillGetStakingRewardsWithStETHOrWstETHOnOptimism,
+  DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnOptimism,
+  HowCouldIUnwrapWstETHBackToStETHOnOptimism,
+  WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimism,
+} from './list';
+
+export const OptimismFAQ = () => (
+  <>
+    <WhatIsWstethOnOptimism />
+    <HowCanIGetWstethOnOptimism />
+    <HowCanIUseWstethOnOptimism />
+    <CanIStakeMyETHDirectlyOnOptimism />
+    <DoIStillGetStakingRewardsWithStETHOrWstETHOnOptimism />
+    <DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnOptimism />
+    <HowCouldIUnwrapWstETHBackToStETHOnOptimism />
+    <WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimism />
+  </>
+);

features/wsteth/shared/wrap-faq/wrap-faq.tsx

@@ -1,56 +1,28 @@
+import React from 'react';
 import { Section } from 'shared/components';
 import { useMatomoEventHandle } from 'shared/hooks';
 import { useDappStatus, DAPP_CHAIN_TYPE } from 'modules/web3';
 
-import {
-  WhatIsWsteth,
-  HowCanIGetWsteth,
-  HowCanIUseWsteth,
-  DoIGetMyStakingRewards,
-  DoINeedToClaimMyStakingRewards,
-  HowCouldIUnwrapWstethToSteth,
-  DoINeedToUnwrapMyWsteth,
-} from './list';
+import { EthereumFAQ } from './ethereum-faq/faq';
+import { OptimismFAQ } from './optimism-faq/faq';
 
-import {
-  WhatIsWstethOnOptimism,
-  HowCanIGetWstethOnOptimism,
-  HowCanIUseWstethOnOptimism,
-  CanIStakeMyETHDirectlyOnOptimism,
-  DoIStillGetStakingRewardsWithStETHOrWstETHOnOptimism,
-  DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnOptimism,
-  HowCouldIUnwrapWstETHBackToStETHOnOptimism,
-  WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimism,
-} from './optimism-list';
+export const faqComponentsMap = new Map([
+  [DAPP_CHAIN_TYPE.Ethereum, EthereumFAQ],
+  [DAPP_CHAIN_TYPE.Optimism, OptimismFAQ],
+  // FAQ for other networks
+]);
 
 export const WrapFaq = () => {
   const { isWalletConnected, chainType } = useDappStatus();
   const onClickHandler = useMatomoEventHandle();
 
-  if (isWalletConnected && chainType === DAPP_CHAIN_TYPE.Optimism) {
-    return (
-      <Section title="FAQ" onClick={onClickHandler}>
-        <WhatIsWstethOnOptimism />
-        <HowCanIGetWstethOnOptimism />
-        <HowCanIUseWstethOnOptimism />
-        <CanIStakeMyETHDirectlyOnOptimism />
-        <DoIStillGetStakingRewardsWithStETHOrWstETHOnOptimism />
-        <DoINeedToClaimMyStakingRewardsIfIWrapStETHToWstETHOnOptimism />
-        <HowCouldIUnwrapWstETHBackToStETHOnOptimism />
-        <WhatHappensIfIWantToUnstakeETHOnEthereumCanIDoThatFromOptimism />
-      </Section>
-    );
-  }
+  const FAQ = !isWalletConnected
+    ? EthereumFAQ
+    : faqComponentsMap.get(chainType) || EthereumFAQ;
 
   return (
     <Section title="FAQ" onClick={onClickHandler}>
-      <WhatIsWsteth />
-      <HowCanIGetWsteth />
-      <HowCanIUseWsteth />
-      <DoIGetMyStakingRewards />
-      <DoINeedToClaimMyStakingRewards />
-      <HowCouldIUnwrapWstethToSteth />
-      <DoINeedToUnwrapMyWsteth />
+      <FAQ />
     </Section>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Link } from '@lidofinance/lido-ui';
 
-import { CHAINS } from 'consts/chains';
-import { getEtherscanTxLink } from 'utils/get-etherscan-tx-link';
+import { config } from 'config';
+import { getEtherscanTxLink } from 'utils/etherscan';
 import { useDappStatus } from 'modules/web3';
 
 type TxLinkEtherscanProps = {
@@ -12,14 +12,14 @@ 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;
 
   return (
     <Link
       onClick={onClick}
-      href={getEtherscanTxLink(chainId as CHAINS, txHash)}
+      href={getEtherscanTxLink(walletChainId ?? config.defaultChain, txHash)}
     >
       {text}
     </Link>

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

@@ -10,9 +10,10 @@ import {
 import { openWindow } from '@lido-sdk/helpers';
 import { useConnectorInfo, useDisconnect } from 'reef-knot/core-react';
 
+import { config } from 'config';
 import type { ModalComponentType } from 'providers/modal-provider';
 import { useCopyToClipboard } from 'shared/hooks';
-import { getEtherscanAddressLink } from 'utils/get-etherscan-address-link';
+import { getEtherscanAddressLink } from 'utils/etherscan';
 import {
   WalletModalContentStyle,
   WalletModalConnectedStyle,
@@ -25,7 +26,7 @@ import {
 import { useDappStatus } from 'modules/web3';
 
 export const WalletModal: ModalComponentType = ({ onClose, ...props }) => {
-  const { address, chainId } = useDappStatus();
+  const { address, walletChainId } = useDappStatus();
   const { connectorName } = useConnectorInfo();
   const { disconnect } = useDisconnect();
 
@@ -36,9 +37,12 @@ export const WalletModal: ModalComponentType = ({ onClose, ...props }) => {
 
   const handleCopy = useCopyToClipboard(address ?? '');
   const handleEtherscan = useCallback(() => {
-    const link = getEtherscanAddressLink(chainId, address ?? '', chainId);
+    const link = getEtherscanAddressLink(
+      walletChainId ?? config.defaultChain,
+      address ?? '',
+    );
     openWindow(link);
-  }, [address, chainId]);
+  }, [address, walletChainId]);
 
   useEffect(() => {
     // Close the modal if a wallet was somehow disconnected while the modal was open

utils/etherscan.ts

@@ -0,0 +1,36 @@
+import invariant from 'tiny-invariant';
+import { wagmiChainMap } from 'modules/web3/web3-provider/web3-provider';
+
+export enum ETHERSCAN_ENTITIES {
+  TX = 'tx',
+  TOKEN = 'token',
+  ADDRESS = 'address',
+}
+
+export const getEtherscanLink = (
+  chainId: number,
+  hash: string,
+  entity: ETHERSCAN_ENTITIES,
+): string => {
+  const wagmiChain = wagmiChainMap[chainId];
+  invariant(wagmiChain, `chainId ${chainId} is unknown by wagmiChainMap`);
+  return `${wagmiChain?.blockExplorers?.default?.url}/${entity}/${hash}`;
+};
+
+export const getEtherscanTxLink = (chainId: number, hash: string): string => {
+  return getEtherscanLink(chainId, hash, ETHERSCAN_ENTITIES.TX);
+};
+
+export const getEtherscanTokenLink = (
+  chainId: number,
+  hash: string,
+): string => {
+  return getEtherscanLink(chainId, hash, ETHERSCAN_ENTITIES.TOKEN);
+};
+
+export const getEtherscanAddressLink = (
+  chainId: number,
+  hash: string,
+): string => {
+  return getEtherscanLink(chainId, hash, ETHERSCAN_ENTITIES.ADDRESS);
+};