feat: add the 'chain id toggler' instead of the 'chain type toggler'

features/wsteth/shared/wallet/wallet.tsx

@@ -1,5 +1,8 @@
+import { useConnectorInfo } from 'reef-knot/core-react';
 import { Divider, Text } from '@lidofinance/lido-ui';
 
+import { useConfig } from 'config';
+
 import { FormatToken } from 'shared/formatters';
 import { TokenToWallet } from 'shared/components';
 import {
@@ -8,15 +11,12 @@ import {
   useStethBalance,
   useWstethBalance,
   useWstethBySteth,
-  DAPP_CHAIN_TYPE,
   useStETHByWstETH,
 } from 'modules/web3';
+import { useIsLedgerLive } from 'shared/hooks/useIsLedgerLive';
 import { CardBalance, CardRow, CardAccount, Fallback } from 'shared/wallet';
 
 import { StyledCard } from './styles';
-import { useIsLedgerLive } from 'shared/hooks/useIsLedgerLive';
-import { useConfig } from 'config';
-import { useConnectorInfo } from 'reef-knot/core-react';
 
 const WalletComponent = () => {
   const { isDappActiveOnL2 } = useDappStatus();
@@ -110,14 +110,12 @@ export const Wallet = ({ isUnwrapMode }: WrapWalletProps) => {
   const isLedgerLive = useIsLedgerLive();
   const { isLedger: isLedgerHardware } = useConnectorInfo();
   const { featureFlags } = useConfig().externalConfig;
-  const { chainType } = useDappStatus();
+  const { isChainIdOnL2 } = useDappStatus();
 
   const isLedgerLiveOptimism =
-    !featureFlags.ledgerLiveL2 &&
-    isLedgerLive &&
-    chainType === DAPP_CHAIN_TYPE.Optimism;
-  const isLedgerHardwareOptimism =
-    isLedgerHardware && chainType === DAPP_CHAIN_TYPE.Optimism;
+    !featureFlags.ledgerLiveL2 && isLedgerLive && isChainIdOnL2;
+
+  const isLedgerHardwareOptimism = isLedgerHardware && isChainIdOnL2;
 
   if (isLedgerLiveOptimism || isLedgerHardwareOptimism) {
     const error = `Optimism is currently not supported in ${isLedgerLiveOptimism ? 'Ledger Live' : 'Ledger Hardware'}.`;

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

@@ -1,24 +1,28 @@
 import React from 'react';
+
+import { CHAINS } from 'consts/chains';
+import { useDappStatus } from 'modules/web3';
 import { Section } from 'shared/components';
 import { useMatomoEventHandle } from 'shared/hooks';
-import { useDappStatus, DAPP_CHAIN_TYPE } from 'modules/web3';
 
 import { EthereumFAQ } from './ethereum-faq/faq';
 import { OptimismFAQ } from './optimism-faq/faq';
 
 export const faqComponentsMap = new Map([
-  [DAPP_CHAIN_TYPE.Ethereum, EthereumFAQ],
-  [DAPP_CHAIN_TYPE.Optimism, OptimismFAQ],
-  // FAQ for other networks
+  [CHAINS.Mainnet, EthereumFAQ],
+  [CHAINS.Sepolia, EthereumFAQ],
+  [CHAINS.Holesky, EthereumFAQ],
+  [CHAINS.Optimism, OptimismFAQ],
+  [CHAINS.OptimismSepolia, OptimismFAQ],
 ]);
 
 export const WrapFaq = () => {
-  const { isWalletConnected, chainType } = useDappStatus();
+  const { isWalletConnected, chainId } = useDappStatus();
   const onClickHandler = useMatomoEventHandle();
 
   const FAQ = !isWalletConnected
     ? EthereumFAQ
-    : faqComponentsMap.get(chainType) || EthereumFAQ;
+    : faqComponentsMap.get(chainId) || EthereumFAQ;
 
   return (
     <Section title="FAQ" onClick={onClickHandler}>

features/wsteth/unwrap/hooks/use-unwrap-tx-on-l2-approve.ts

@@ -13,7 +13,7 @@ type UseUnwrapTxApproveArgs = {
 };
 
 export const useUnwrapTxOnL2Approve = ({ amount }: UseUnwrapTxApproveArgs) => {
-  const { isDappActiveOnL2, isChainTypeOnL2, address } = useDappStatus();
+  const { isDappActiveOnL2, isChainIdOnL2, address } = useDappStatus();
   const { l2, core } = useLidoSDKL2();
   const { txModalStages } = useTxModalWrap();
 
@@ -77,8 +77,8 @@ export const useUnwrapTxOnL2Approve = ({ amount }: UseUnwrapTxApproveArgs) => {
       isAllowanceLoading,
       // There are 2 cases when we show the allowance on the unwrap page:
       // 1. wallet chain is any Optimism supported chain and chain switcher is Optimism (isDappActiveOnL2)
-      // 2. or wallet chain is any ETH supported chain, but chain switcher is Optimism (isChainTypeOnL2)
-      isShowAllowance: isDappActiveOnL2 || isChainTypeOnL2,
+      // 2. or wallet chain is any ETH supported chain, but chain switcher is Optimism (isChainIdOnL2)
+      isShowAllowance: isDappActiveOnL2 || isChainIdOnL2,
     }),
     [
       processApproveTx,
@@ -87,7 +87,7 @@ export const useUnwrapTxOnL2Approve = ({ amount }: UseUnwrapTxApproveArgs) => {
       isApprovalNeededBeforeUnwrap,
       isAllowanceLoading,
       isDappActiveOnL2,
-      isChainTypeOnL2,
+      isChainIdOnL2,
     ],
   );
 };

features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx

@@ -17,25 +17,25 @@ import { useUnwrapFormData, UnwrapFormInputType } from '../unwrap-form-context';
 import { TOKENS_TO_WRAP } from '../../shared/types';
 
 export const UnwrapStats = () => {
-  const { isDappActiveOnL2, chainTypeChainId } = useDappStatus();
+  const { isDappActiveOnL2, chainId } = useDappStatus();
   const { allowance, isAllowanceLoading, isShowAllowance } =
     useUnwrapFormData();
   const amount = useWatch<UnwrapFormInputType, 'amount'>({ name: 'amount' });
 
   const unwrapGasLimit = useUnwrapGasLimit();
   // The 'unwrapGasLimit' difference between the networks is insignificant
-  // and can be neglected in the '!isChainTypeMatched' case
+  // and can be neglected in the '!isChainIdMatched' case
   //
-  // Using the chainTypeChainId (chainId from the chain switcher) for TX calculation (and below for 'approveTxCostInUsd'),
+  // Using the chainId (chainId from the chain switcher) for TX calculation (and below for 'approveTxCostInUsd'),
   // because the statistics here are shown for the chain from the chain switcher
   const { txCostUsd: unwrapTxCostInUsd, isLoading: isUnwrapTxCostLoading } =
-    useTxCostInUsd(unwrapGasLimit, chainTypeChainId);
+    useTxCostInUsd(unwrapGasLimit, chainId);
 
   const approveGasLimit = useApproveGasLimit();
   // The 'approveGasLimit' difference between the networks is insignificant
-  // and can be neglected in the '!isChainTypeMatched' case
+  // and can be neglected in the '!isChainIdMatched' case
   const { txCostUsd: approveTxCostInUsd, isLoading: isApproveCostLoading } =
-    useTxCostInUsd(approveGasLimit, chainTypeChainId);
+    useTxCostInUsd(approveGasLimit, chainId);
 
   const { data: willReceiveStETH, isLoading: isWillReceiveStETHLoading } =
     useDebouncedStethByWsteth(amount);

features/wsteth/wrap/hooks/use-wrap-tx-on-l1-approve.ts

@@ -22,7 +22,7 @@ export const useWrapTxOnL1Approve = ({
   amount,
   token,
 }: UseWrapTxApproveArgs) => {
-  const { address, isWalletConnected, isDappActiveOnL1, isChainTypeOnL2 } =
+  const { address, isWalletConnected, isDappActiveOnL1, isChainIdOnL2 } =
     useDappStatus();
   const { wrap } = useLidoSDK();
   const { txModalStages } = useTxModalWrap();
@@ -90,9 +90,8 @@ export const useWrapTxOnL1Approve = ({
       // There are 3 cases when we show the allowance on the wrap page:
       // 1. is wallet not connected (!isWalletConnected)
       // 2. or wallet chain is any ETH supported chain and chain switcher is ETH (isDappActiveOnL1)
-      // 3. or wallet chain is any Optimism supported chain, but chain switcher is ETH (!isChainTypeOnL2)
-      isShowAllowance:
-        !isWalletConnected || isDappActiveOnL1 || !isChainTypeOnL2,
+      // 3. or wallet chain is any Optimism supported chain, but chain switcher is ETH (!isChainIdOnL2)
+      isShowAllowance: !isWalletConnected || isDappActiveOnL1 || !isChainIdOnL2,
     }),
     [
       processApproveTx,
@@ -103,7 +102,7 @@ export const useWrapTxOnL1Approve = ({
       refetchAllowance,
       isWalletConnected,
       isDappActiveOnL1,
-      isChainTypeOnL2,
+      isChainIdOnL2,
     ],
   );
 };

features/wsteth/wrap/wrap-form/wrap-stats.tsx

@@ -16,7 +16,7 @@ import { useApproveGasLimit } from '../hooks/use-approve-gas-limit';
 import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
 
 export const WrapFormStats = () => {
-  const { isDappActive, chainTypeChainId } = useDappStatus();
+  const { isDappActive, chainId } = useDappStatus();
   const { allowance, isShowAllowance, wrapGasLimit, isAllowanceLoading } =
     useWrapFormData();
 
@@ -32,18 +32,18 @@ export const WrapFormStats = () => {
     useWstethBySteth(ONE_stETH);
 
   // The 'approveGasLimit' difference between the networks is insignificant
-  // and can be neglected in the '!isChainTypeMatched' case
+  // and can be neglected in the '!isChainIdMatched' case
   //
-  // Using the chainTypeChainId (chainId from the chain switcher) for TX calculation (and below for 'wrapTxCostInUsd'),
+  // Using the chainId (chainId from the chain switcher) for TX calculation (and below for 'wrapTxCostInUsd'),
   // because the statistics here are shown for the chain from the chain switcher
   const approveGasLimit = useApproveGasLimit();
   const { txCostUsd: approveTxCostInUsd, isLoading: isApproveCostLoading } =
-    useTxCostInUsd(approveGasLimit, chainTypeChainId);
+    useTxCostInUsd(approveGasLimit, chainId);
 
   // The 'wrapGasLimit' difference between the networks is insignificant
-  // and can be neglected in the '!isChainTypeMatched' case
+  // and can be neglected in the '!isChainIdMatched' case
   const { txCostUsd: wrapTxCostInUsd, isLoading: isWrapCostLoading } =
-    useTxCostInUsd(wrapGasLimit, chainTypeChainId);
+    useTxCostInUsd(wrapGasLimit, chainId);
 
   return (
     <DataTable data-testid="wrapStats">

modules/web3/consts/chains.ts

@@ -0,0 +1,43 @@
+import { ReactComponent as OptimismLogo } from 'assets/icons/chain-toggler/optimism.svg';
+import { ReactComponent as EthereumMainnetLogo } from 'assets/icons/chain-toggler/mainnet.svg';
+
+import { CHAINS } from 'consts/chains';
+
+export enum DAPP_CHAIN_TYPE {
+  Ethereum = 'Ethereum',
+  Optimism = 'Optimism',
+}
+
+export type SupportedChainLabels = {
+  [key in DAPP_CHAIN_TYPE]: string;
+};
+
+export const ETHEREUM_CHAINS = new Set([
+  CHAINS.Mainnet,
+  CHAINS.Holesky,
+  CHAINS.Sepolia,
+]);
+
+export const OPTIMISM_CHAINS = new Set([
+  CHAINS.Optimism,
+  CHAINS.OptimismSepolia,
+]);
+
+export const getChainTypeByChainId = (
+  chainId: number,
+): DAPP_CHAIN_TYPE | null => {
+  if (ETHEREUM_CHAINS.has(chainId)) {
+    return DAPP_CHAIN_TYPE.Ethereum;
+  } else if (OPTIMISM_CHAINS.has(chainId)) {
+    return DAPP_CHAIN_TYPE.Optimism;
+  }
+  return null;
+};
+
+export const CHAIN_ICONS_MAP = new Map([
+  [CHAINS.Mainnet, EthereumMainnetLogo],
+  [CHAINS.Holesky, EthereumMainnetLogo],
+  [CHAINS.Sepolia, EthereumMainnetLogo],
+  [CHAINS.Optimism, OptimismLogo],
+  [CHAINS.OptimismSepolia, OptimismLogo],
+]);

modules/web3/consts/index.ts

@@ -1,3 +1,4 @@
+export * from './chains';
 export * from './symbols';
 export * from './tx';
 export * from './units';

modules/web3/hooks/use-dapp-status.ts

@@ -13,15 +13,16 @@ export const useDappStatus = () => {
   // this can change between pages based on their dapp-chain context(or lack of)
   const dappChain = useDappChain();
 
-  const { isSupportedChain, isChainTypeMatched } = dappChain;
+  const { isSupportedChain, isChainIdMatched, isSwitchChainWait } = dappChain;
 
   const isAccountActive = walletChainId
     ? isWalletConnected && isSupportedChain
     : false;
 
   const isL2 = isSDKSupportedL2Chain(walletChainId);
 
-  const isDappActive = isAccountActive && isChainTypeMatched;
+  const isDappActive =
+    isAccountActive && isChainIdMatched && !isSwitchChainWait;
 
   const isDappActiveOnL1 = isDappActive && !isL2;
 
@@ -36,6 +37,7 @@ export const useDappStatus = () => {
     isDappActiveOnL2,
     isDappActiveOnL1,
     isWalletConnected,
+    isSwitchChainWait,
     walletChainId,
     address,
   };

modules/web3/index.ts

@@ -7,5 +7,4 @@ export {
   useLidoSDK,
   useLidoSDKL2,
   SupportL2Chains,
-  DAPP_CHAIN_TYPE,
 } from './web3-provider';