Refactoring single source of truth for dapp state

consts/chains.ts

@@ -21,13 +21,6 @@ export enum LIDO_MULTICHAIN_CHAINS {
  'Mode Chain' = 34443,
 }
 
-// TODO: move to legacy lido-js-sdk package
-export const SDK_LEGACY_SUPPORTED_CHAINS = [
- CHAINS.Mainnet,
- CHAINS.Holesky,
- CHAINS.Sepolia,
-];
-
 // TODO: move to @lidofinance/lido-ethereum-sdk package
 export const isSDKSupportedL2Chain = (chainId?: CHAINS) => {
  return chainId && !!LIDO_L2_CONTRACT_ADDRESSES[chainId];

features/ipfs/security-status-banner/use-version-check.ts

@@ -6,7 +6,7 @@ import buildInfo from 'build-info.json';
 import { config } from 'config';
 import { useUserConfig } from 'config/user-config';
 import { STRATEGY_IMMUTABLE } from 'consts/swr-strategies';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 import { overrideWithQAMockBoolean } from 'utils/qa';
 
 import { isVersionLess } from './utils';
@@ -19,7 +19,7 @@ const URL_CID_REGEX =
  /[/.](?<cid>Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})([./#?]|$)/;
 
 export const useVersionCheck = () => {
- const { isDappActive } = useDappStatus();
+ const { isWalletConnected } = useDappStatus();
  const { setIsWalletConnectionAllowed } = useUserConfig();
  const { forceDisconnect } = useForceDisconnect();
  const [areConditionsAccepted, setConditionsAccepted] = useState(false);
@@ -80,14 +80,17 @@ export const useVersionCheck = () => {
  if (isVersionUnsafe) {
  setIsWalletConnectionAllowed(false);
  }
- if (isVersionUnsafe || (config.ipfsMode && isNotVerifiable)) {
+ if (
+ isVersionUnsafe ||
+ (config.ipfsMode && isNotVerifiable && isWalletConnected)
+ ) {
  forceDisconnect();
  }
  }, [
- isDappActive,
  forceDisconnect,
  isNotVerifiable,
  isVersionUnsafe,
+ isWalletConnected,
  setIsWalletConnectionAllowed,
  ]);
 

features/rewards/components/rewardsListContent/RewardsListContent.tsx

@@ -5,8 +5,7 @@ import { Zero } from '@ethersproject/constants';
 import { useRewardsHistory } from 'features/rewards/hooks';
 import { ErrorBlockNoSteth } from 'features/rewards/components/errorBlocks/ErrorBlockNoSteth';
 import { RewardsTable } from 'features/rewards/components/rewardsTable';
-import { useStethBalance } from 'shared/hooks/use-balance';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useStethBalance, useDappStatus } from 'modules/web3';
 
 import { RewardsListsEmpty } from './RewardsListsEmpty';
 import { RewardsListErrorMessage } from './RewardsListErrorMessage';
@@ -20,8 +19,7 @@ import {
 import type { Address } from 'viem';
 
 export const RewardsListContent: FC = () => {
- const { isWalletConnected, isSupportedChain, isAccountActiveOnL2 } =
- useDappStatus();
+ const { isSupportedChain } = useDappStatus();
  const {
  address,
  error,
@@ -39,8 +37,7 @@ export const RewardsListContent: FC = () => {
  });
  const hasSteth = stethBalance?.gt(Zero);
 
- if ((isWalletConnected && !isSupportedChain) || isAccountActiveOnL2)
- return <RewardsListsUnsupportedChain />;
+ if (!isSupportedChain) return <RewardsListsUnsupportedChain />;
 
  if (!data && !initialLoading && !error) return <RewardsListsEmpty />;
 

features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx

@@ -5,7 +5,7 @@ import { Button, Divider } from '@lidofinance/lido-ui';
 
 import { useUserConfig } from 'config/user-config';
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 import {
  RewardsListEmptyButtonWrapper,
  RewardsListEmptyWrapper,

features/rewards/components/rewardsListHeader/RewardsListHeader.tsx

@@ -1,15 +1,14 @@
 import { FC } from 'react';
 import { useRewardsHistory } from 'features/rewards/hooks';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 
 import { LeftOptions } from './LeftOptions';
 import { RightOptions } from './RightOptions';
 import { RewardsListHeaderStyle } from './styles';
 import { TitleStyle } from './styles';
 
 export const RewardsListHeader: FC = () => {
- const { isWalletConnected, isSupportedChain, isAccountActiveOnL2 } =
- useDappStatus();
+ const { isSupportedChain, isDappActiveOnL2 } = useDappStatus();
  const { error, data } = useRewardsHistory();
 
  return (
@@ -18,9 +17,7 @@ export const RewardsListHeader: FC = () => {
  {!error &&
  data &&
  data?.events.length > 0 &&
- (!isWalletConnected ||
- (isWalletConnected && isSupportedChain) ||
- !isAccountActiveOnL2) && (
+ (isSupportedChain || !isDappActiveOnL2) && (
  <>
  <LeftOptions />
  <RightOptions />

features/rewards/features/top-card/top-card.tsx

@@ -4,16 +4,15 @@ import { CHAINS } from '@lido-sdk/constants';
 import { getConfig } from 'config';
 import { StatsWrapper } from 'features/rewards/components/statsWrapper';
 import { Stats } from 'features/rewards/components/stats';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 import { Fallback } from 'shared/wallet';
 
 import { Wallet } from './wallet';
 
 export const TopCard: FC = () => {
  const { defaultChain } = getConfig();
  const [visible, setVisible] = useState(false);
- const { isWalletConnected, isSupportedChain, isAccountActiveOnL2 } =
- useDappStatus();
+ const { isSupportedChain } = useDappStatus();
 
  // fix flash after reload page
  useEffect(() => {
@@ -24,7 +23,7 @@ export const TopCard: FC = () => {
 
  return (
  <>
- {(isWalletConnected && !isSupportedChain) || isAccountActiveOnL2 ? (
+ {!isSupportedChain ? (
  <Fallback
  error={`Unsupported chain. Please switch to ${CHAINS[defaultChain]} in your wallet.`}
  />

features/rewards/hooks/useGetCurrentAddress.ts

@@ -6,7 +6,7 @@ import { useSDK } from '@lido-sdk/react';
 
 import { resolveEns, isValidEns, isValidAddress } from 'features/rewards/utils';
 import { useCurrentStaticRpcProvider } from 'shared/hooks/use-current-static-rpc-provider';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 
 type UseGetCurrentAddress = () => {
  address: string;

features/settings/settings-form/settings-form.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { useSDK } from '@lido-sdk/react';
 import { Button, ToastSuccess, Block, Input } from '@lidofinance/lido-ui';
 
 import { useUserConfig } from 'config/user-config';
@@ -15,14 +14,15 @@ import {
  DescriptionTitle,
  SettingsFormWrap,
 } from './styles';
+import { useDappStatus } from 'modules/web3';
 
 type FormValues = {
  rpcUrl: string;
 };
 
 export const SettingsForm = () => {
  const { savedUserConfig, setSavedUserConfig } = useUserConfig();
- const { chainId } = useSDK();
+ const { chainId } = useDappStatus();
 
  const formMethods = useForm<FormValues>({
  mode: 'onChange',

features/stake/stake-form/controls/stake-amount-input.tsx

@@ -1,20 +1,18 @@
 import { Eth } from '@lidofinance/lido-ui';
 import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 import { useStakeFormData } from '../stake-form-context';
-import { useStakingLimitWarning } from 'shared/hooks/use-staking-limit-warning';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useStakingLimitWarning, useDappStatus } from 'modules/web3';
 
 export const StakeAmountInput = () => {
- const { isWalletConnected, isDappActive, isAccountActiveOnL2 } =
- useDappStatus();
+ const { isWalletConnected, isDappActive, isDappActiveOnL2 } = useDappStatus();
  const { maxAmount, stakingLimitInfo } = useStakeFormData();
  const { limitWarning, limitError } = useStakingLimitWarning(
  stakingLimitInfo?.stakeLimitLevel,
  );
 
  return (
  <TokenAmountInputHookForm
- disabled={(isWalletConnected && !isDappActive) || isAccountActiveOnL2}
+ disabled={(isWalletConnected && !isDappActive) || isDappActiveOnL2}
  fieldName="amount"
  token={'ETH'}
  data-testid="stakeInput"

features/stake/stake-form/controls/stake-submit-button.tsx

@@ -1,18 +1,18 @@
 import { LIMIT_LEVEL } from 'types';
 import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 
 import { useStakeFormData } from '../stake-form-context';
 
 export const StakeSubmitButton = () => {
- const { isDappActive, isAccountActiveOnL2 } = useDappStatus();
+ const { isDappActive, isDappActiveOnL2 } = useDappStatus();
  const { stakingLimitInfo } = useStakeFormData();
 
  return (
  <SubmitButtonHookForm
  disabled={
  !isDappActive ||
- isAccountActiveOnL2 ||
+ isDappActiveOnL2 ||
  stakingLimitInfo?.stakeLimitLevel === LIMIT_LEVEL.REACHED
  }
  data-testid="stakeSubmitBtn"

features/stake/stake-form/stake-form-context/stake-form-context.tsx

@@ -19,8 +19,7 @@ import {
 } from 'shared/hook-form/form-controller';
 import { useTokenMaxAmount } from 'shared/hooks/use-token-max-amount';
 import { useStakingLimitInfo } from 'shared/hooks/useStakingLimitInfo';
-import { useMaxGasPrice } from 'shared/hooks';
-import { useIsMultisig } from 'shared/hooks/useIsMultisig';
+import { useIsMultisig, useMaxGasPrice } from 'modules/web3';
 import { useFormControllerRetry } from 'shared/hook-form/form-controller/use-form-controller-retry-delegate';
 
 import { config } from 'config';
@@ -37,7 +36,7 @@ import {
 
 import { useStake } from '../use-stake';
 import { useStethSubmitGasLimit } from '../hooks';
-import { useEthereumBalance, useStethBalance } from 'shared/hooks/use-balance';
+import { useEthereumBalance, useStethBalance } from 'modules/web3';
 
 //
 // Data context

features/stake/stake-form/stake-form-context/validation.ts

@@ -3,7 +3,7 @@ import invariant from 'tiny-invariant';
 import { Zero } from '@ethersproject/constants';
 
 import { validateEtherAmount } from 'shared/hook-form/validation/validate-ether-amount';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 import { VALIDATION_CONTEXT_TIMEOUT } from 'features/withdrawals/withdrawals-constants';
 import { handleResolverValidationError } from 'shared/hook-form/validation/validation-error';
 import { awaitWithTimeout } from 'utils/await-with-timeout';

features/stake/stake-form/use-stake.ts

@@ -1,7 +1,6 @@
 import { BigNumber } from 'ethers';
 import { useCallback } from 'react';
 import invariant from 'tiny-invariant';
-import { useAccount } from 'wagmi';
 
 import {
  useSDK,
@@ -17,8 +16,7 @@ import { runWithTransactionLogger } from 'utils';
 import { MockLimitReachedError, getAddress } from './utils';
 import { useTxModalStagesStake } from './hooks/use-tx-modal-stages-stake';
 
-import { sendTx } from 'utils/send-tx';
-import { useTxConfirmation } from 'shared/hooks/use-tx-conformation';
+import { sendTx, useTxConfirmation, useDappStatus } from 'modules/web3';
 
 type StakeArguments = {
  amount: BigNumber | null;
@@ -32,7 +30,7 @@ type StakeOptions = {
 
 export const useStake = ({ onConfirm, onRetry }: StakeOptions) => {
  const stethContractWeb3 = useSTETHContractWeb3();
- const { address } = useAccount();
+ const { address } = useDappStatus();
  const stethContract = useSTETHContractRPC();
  const { staticRpcProvider } = useCurrentStaticRpcProvider();
  const { providerWeb3 } = useSDK();

features/stake/stake-form/wallet/wallet.tsx

@@ -1,6 +1,4 @@
 import { memo } from 'react';
-import { useAccount } from 'wagmi';
-
 import { CHAINS, TOKENS } from '@lido-sdk/constants';
 import { Divider, Question, Tooltip } from '@lidofinance/lido-ui';
 
@@ -10,9 +8,8 @@ import { LIDO_APR_TOOLTIP_TEXT, DATA_UNAVAILABLE } from 'consts/text';
 import { TokenToWallet } from 'shared/components';
 import { FormatToken } from 'shared/formatters';
 import { useLidoApr } from 'shared/hooks';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 import { useTokenAddress } from 'shared/hooks/use-token-address';
-import { useLidoMultichainFallbackCondition } from 'shared/hooks/use-lido-multichain-fallback-condition';
 import {
  CardAccount,
  CardBalance,
@@ -28,7 +25,7 @@ import { LimitMeter } from './limit-meter';
 import { FlexCenter, LidoAprStyled, StyledCard } from './styles';
 
 const WalletComponent: WalletComponentType = (props) => {
- const { address } = useAccount();
+ const { address } = useDappStatus();
  const { stakeableEther, stethBalance, loading } = useStakeFormData();
 
  const stethAddress = useTokenAddress(TOKENS.STETH);
@@ -101,20 +98,13 @@ const WalletComponent: WalletComponentType = (props) => {
 
 export const Wallet: WalletComponentType = memo((props) => {
  const { defaultChain } = getConfig();
- const { isWalletConnected, isDappActive, isAccountActiveOnL2 } =
+ const { isWalletConnected, isDappActive, isLidoMultichainChain } =
  useDappStatus();
- const { showLidoMultichainFallback } = useLidoMultichainFallbackCondition();
 
- if (showLidoMultichainFallback) {
+ if (isLidoMultichainChain) {
  return <LidoMultichainFallback textEnding={'to stake'} {...props} />;
  }
 
- if (isAccountActiveOnL2) {
- return (
- <LidoMultichainFallback chainId={10} textEnding={'to stake'} {...props} />
- );
- }
-
  if (isWalletConnected && !isDappActive) {
  return (
  <Fallback

features/stake/stake.tsx

@@ -1,5 +1,5 @@
 import { FaqPlaceholder } from 'features/ipfs';
-import { useWagmiKey } from 'shared/hooks/use-wagmi-key';
+import { SupportOnlyL1Chains, useWagmiKey } from 'modules/web3';
 import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
 import { OnlyInfraRender } from 'shared/components/only-infra-render';
 
@@ -11,14 +11,14 @@ export const Stake = () => {
  const key = useWagmiKey();
 
  return (
- <>
+ <SupportOnlyL1Chains>
  <NoSSRWrapper>
  <StakeForm key={key} />
  </NoSSRWrapper>
  <LidoStats />
  <OnlyInfraRender renderIPFS={<FaqPlaceholder />}>
  <StakeFaq />
  </OnlyInfraRender>
- </>
+ </SupportOnlyL1Chains>
  );
 };

features/withdrawals/claim/claim-form-context/claim-form-context.tsx

@@ -16,7 +16,7 @@ import {
  FormControllerContext,
  FormControllerContextValueType,
 } from 'shared/hook-form/form-controller';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 
 import { ClaimFormInputType, ClaimFormValidationContext } from './types';
 import { claimFormValidationResolver } from './validation';

features/withdrawals/claim/form/requests-list/request-item.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
 import { useFormState, useWatch } from 'react-hook-form';
-import { useAccount } from 'wagmi';
 
 import {
  Checkbox,
@@ -15,6 +14,7 @@ import { useClaimFormData, ClaimFormInputType } from '../../claim-form-context';
 
 import { getNFTUrl } from 'utils';
 import { RequestStyled, LinkStyled } from './styles';
+import { useSDK } from '@lido-sdk/react';
 
 type RequestItemProps = {
  token_id: string;
@@ -24,7 +24,7 @@ type RequestItemProps = {
 
 export const RequestItem = forwardRef<HTMLInputElement, RequestItemProps>(
  ({ token_id, name, disabled, index, ...props }, ref) => {
- const { chainId } = useAccount();
+ const { chainId } = useSDK();
  const { isSubmitting } = useFormState();
  const { canSelectMore, maxSelectedCountReason } = useClaimFormData();
  const { checked, status } = useWatch<

features/withdrawals/claim/form/requests-list/requests-list.tsx

@@ -1,5 +1,5 @@
 import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
-import { useDappStatus } from 'shared/hooks/use-dapp-status';
+import { useDappStatus } from 'modules/web3';
 
 import { ClaimFormInputType } from '../../claim-form-context';
 import { RequestItem } from './request-item';