Merge pull request #510 from lidofinance/feature/si-1641-refactoring-…

…single-source-of-truth-for-chainid-and-rpc Refactoring single source of truth for dapp state
lidofinance · Nov 4, 2024 · 41cb95d · 41cb95d
2 parents 98c31bd + c1b358e
commit 41cb95d
Show file tree

Hide file tree

Showing 134 changed files with 1,421 additions and 1,866 deletions.
diff --git a/consts/chains.ts b/consts/chains.ts
@@ -22,13 +22,6 @@ export enum LIDO_MULTICHAIN_CHAINS {
   'Zircuit Chain' = 48900,
 }
 
-// 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];

diff --git a/features/ipfs/security-status-banner/security-status-banner.tsx b/features/ipfs/security-status-banner/security-status-banner.tsx
@@ -11,7 +11,7 @@ import {
   WarningBlock,
   WarningTitle,
 } from './styles';
-import { useVersionCheck } from './use-version-check';
+import { useVersionStatus } from './use-version-status';
 
 const LIDO_TWITTER_LINK = 'https://twitter.com/LidoFinance';
 
@@ -100,7 +100,7 @@ export const SecurityStatusBanner = () => {
     isVersionUnsafe,
     isNotVerifiable,
     data,
-  } = useVersionCheck();
+  } = useVersionStatus();
 
   const { content, canClose, showTwitterLink } = warningContent({
     isUpdateAvailable,

diff --git a/...curity-status-banner/use-version-check.ts → ...urity-status-banner/use-version-status.ts b/...curity-status-banner/use-version-check.ts → ...urity-status-banner/use-version-status.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';
@@ -18,8 +18,8 @@ export const NO_SAFE_VERSION = 'NONE_AVAILABLE';
 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();
+export const useVersionStatus = () => {
+  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,
   ]);
 

diff --git a/features/rewards/components/rewardsListContent/RewardsListContent.tsx b/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 />;
 

diff --git a/features/rewards/components/rewardsListContent/RewardsListsEmpty.tsx b/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,

diff --git a/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx b/features/rewards/components/rewardsListContent/RewardsListsUnsupportedChain.tsx
@@ -1,22 +1,20 @@
 import { FC } from 'react';
 import { Divider } from '@lidofinance/lido-ui';
 
-import { useConfig } from 'config';
-import { CHAINS } from 'consts/chains';
 import { RewardsListEmptyWrapper } from './RewardsListsEmptyStyles';
+import { useDappStatus } from 'modules/web3';
+import { joinWithOr } from 'utils/join-with-or';
 
 export const RewardsListsUnsupportedChain: FC = () => {
-  const {
-    config: { defaultChain },
-  } = useConfig();
+  const { supportedChainLabels } = useDappStatus();
 
   return (
     <>
       <Divider indents="lg" />
       <RewardsListEmptyWrapper>
         <p>
-          Please switch to {CHAINS[defaultChain]} in your wallet to see the
-          stats.
+          Please switch to {joinWithOr(supportedChainLabels)} in your wallet to
+          see the stats.
         </p>
       </RewardsListEmptyWrapper>
     </>

diff --git a/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx b/features/rewards/components/rewardsListHeader/RewardsListHeader.tsx
@@ -1,31 +1,25 @@
 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 } = useDappStatus();
   const { error, data } = useRewardsHistory();
 
   return (
     <RewardsListHeaderStyle data-testid="rewardsHeader">
       <TitleStyle>Reward history</TitleStyle>
-      {!error &&
-        data &&
-        data?.events.length > 0 &&
-        (!isWalletConnected ||
-          (isWalletConnected && isSupportedChain) ||
-          !isAccountActiveOnL2) && (
-          <>
-            <LeftOptions />
-            <RightOptions />
-          </>
-        )}
+      {!error && data && data?.events.length > 0 && isSupportedChain && (
+        <>
+          <LeftOptions />
+          <RightOptions />
+        </>
+      )}
     </RewardsListHeaderStyle>
   );
 };
diff --git a/features/rewards/features/top-card/top-card.tsx b/features/rewards/features/top-card/top-card.tsx
@@ -1,33 +1,27 @@
 import { FC, useEffect, useState } from 'react';
-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 { Fallback } from 'shared/wallet';
 
 import { Wallet } from './wallet';
+import { useDappStatus } from 'modules/web3';
 
 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(() => {
     setVisible(true);
   }, []);
 
   if (!visible) return null;
 
+  // We allow unconnected wallet and don't show multichain for rewards
   return (
     <>
-      {(isWalletConnected && !isSupportedChain) || isAccountActiveOnL2 ? (
-        <Fallback
-          error={`Unsupported chain. Please switch to ${CHAINS[defaultChain]} in your wallet.`}
-        />
+      {!isSupportedChain ? (
+        <Fallback showMultichainBanner={false} />
       ) : (
         <Wallet />
       )}

diff --git a/features/rewards/hooks/useGetCurrentAddress.ts b/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;

diff --git a/features/settings/settings-form/settings-form.tsx b/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',

diff --git a/features/stake/stake-form/controls/stake-amount-input.tsx b/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 } = useDappStatus();
   const { maxAmount, stakingLimitInfo } = useStakeFormData();
   const { limitWarning, limitError } = useStakingLimitWarning(
     stakingLimitInfo?.stakeLimitLevel,
   );
 
   return (
     <TokenAmountInputHookForm
-      disabled={(isWalletConnected && !isDappActive) || isAccountActiveOnL2}
+      disabled={isWalletConnected && !isDappActive}
       fieldName="amount"
       token={'ETH'}
       data-testid="stakeInput"

diff --git a/features/stake/stake-form/controls/stake-submit-button.tsx b/features/stake/stake-form/controls/stake-submit-button.tsx
@@ -1,18 +1,17 @@
 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 } = useDappStatus();
   const { stakingLimitInfo } = useStakeFormData();
 
   return (
     <SubmitButtonHookForm
       disabled={
         !isDappActive ||
-        isAccountActiveOnL2 ||
         stakingLimitInfo?.stakeLimitLevel === LIMIT_LEVEL.REACHED
       }
       data-testid="stakeSubmitBtn"

diff --git a/features/stake/stake-form/stake-form-context/stake-form-context.tsx b/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

diff --git a/features/stake/stake-form/stake-form-context/validation.ts b/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';

diff --git a/features/stake/stake-form/use-stake.ts b/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();