[WIP] Switch chain button

consts/chains.ts

@@ -1,5 +1,15 @@
-export const enum CHAINS {
+export enum CHAINS {
   Mainnet = 1,
   Goerli = 5,
   Holesky = 17000,
 }
+
+export enum L2_CHAINS {
+  zkSync = 324,
+  Optimism = 10,
+  Arbitrum = 42161,
+  Polygon = 137,
+  Base = 8453,
+  Mantle = 5000,
+  Linea = 59144,
+}

features/rewards/components/inputWrapper/InputWrapperStyles.ts

@@ -2,5 +2,6 @@ import styled from 'styled-components';
 import { Block } from '@lidofinance/lido-ui';
 
 export const InputWrapperStyle = styled(Block)`
+  background: transparent;
   padding-bottom: 24px;
 `;

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

@@ -0,0 +1,57 @@
+import { FC, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { useConnect } from 'reef-knot/core-react';
+import { Button } from '@lidofinance/lido-ui';
+import { wrapWithEventTrack } from '@lidofinance/analytics-matomo';
+
+import { useUserConfig } from 'config/user-config';
+import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
+import { WalletCardStyle } from 'shared/wallet/card/styles';
+
+const ConnectWalletStyle = styled(WalletCardStyle)`
+  padding: 27px 27px 47px 27px;
+  text-align: center;
+
+  ${({ theme }) =>
+    theme.name === 'dark'
+      ? css`
+          color: var(--lido-color-text);
+          background: linear-gradient(48.34deg, #46464f -5.55%, #3b3b47 100%);
+        `
+      : css`
+          color: var(--lido-color-secondary);
+          background: linear-gradient(48.34deg, #d2ddff -5.55%, #e6e6e6 100%);
+        `}
+`;
+
+const TextStyle = styled.p`
+  margin-bottom: 12px;
+`;
+
+export const ConnectWallet: FC = () => {
+  const { isWalletConnectionAllowed } = useUserConfig();
+  const { connect } = useConnect();
+
+  const handleClick = wrapWithEventTrack(
+    MATOMO_CLICK_EVENTS.connectWallet,
+    useCallback(() => {
+      if (!isWalletConnectionAllowed) return;
+      void connect();
+    }, [isWalletConnectionAllowed, connect]),
+  );
+
+  return (
+    <ConnectWalletStyle>
+      <TextStyle>Connect your wallet to view staking stats</TextStyle>
+      <Button
+        color={'secondary'}
+        variant={'outlined'}
+        size={'sm'}
+        disabled={!isWalletConnectionAllowed}
+        onClick={handleClick}
+      >
+        Connect wallet
+      </Button>
+    </ConnectWalletStyle>
+  );
+};

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

@@ -1,41 +1,28 @@
 import { FC } from 'react';
-import { Block, ThemeProvider, themeDark } from '@lidofinance/lido-ui';
-import { InputDescription } from 'features/rewards/components/inputDescription';
-import { AddressInput } from 'features/rewards/components/addressInput';
+import { useAccount } from 'wagmi';
+
 import { StatsWrapper } from 'features/rewards/components/statsWrapper';
 import { Stats } from 'features/rewards/components/stats';
-import { InputWrapper } from 'features/rewards/components/inputWrapper';
-import { useRewardsHistory } from 'features/rewards/hooks';
+import { Fallback } from 'shared/wallet';
+import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain';
 
-const INPUT_DESC_TEXT =
-  'Current balance may differ from last balance in the table due to rounding.';
+import { Wallet } from './wallet';
+import { ConnectWallet } from './connect-wallet';
 
 export const TopCard: FC = () => {
-  const {
-    address,
-    addressError,
-    isAddressResolving,
-    inputValue,
-    setInputValue,
-  } = useRewardsHistory();
+  const { isConnected } = useAccount();
+  const isActiveWallet = useIsConnectedWalletAndSupportedChain();
 
   return (
-    <Block color="accent" style={{ padding: 0 }}>
-      <InputWrapper data-testid="inputSection" color="accent">
-        <ThemeProvider theme={themeDark}>
-          <AddressInput
-            address={address}
-            addressError={addressError}
-            inputValue={inputValue}
-            handleInputChange={setInputValue}
-            isAddressResolving={isAddressResolving}
-          />
-          <InputDescription>{INPUT_DESC_TEXT}</InputDescription>
-        </ThemeProvider>
-      </InputWrapper>
+    <>
+      {!isConnected && <ConnectWallet />}
+
+      {isConnected && !isActiveWallet && <Fallback />}
+
+      {isConnected && isActiveWallet && <Wallet />}
       <StatsWrapper>
         <Stats />
       </StatsWrapper>
-    </Block>
+    </>
   );
 };

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

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import styled from 'styled-components';
+import { ThemeProvider, themeDark } from '@lidofinance/lido-ui';
+
+import { InputDescription } from 'features/rewards/components/inputDescription';
+import { AddressInput } from 'features/rewards/components/addressInput';
+import { InputWrapper } from 'features/rewards/components/inputWrapper';
+import { useRewardsHistory } from 'features/rewards/hooks';
+
+import { WalletCardStyle } from 'shared/wallet/card/styles';
+
+const INPUT_DESC_TEXT =
+  'Current balance may differ from last balance in the table due to rounding.';
+
+const WalletStyle = styled(WalletCardStyle)`
+  background: linear-gradient(
+    52.01deg,
+    #37394a 0%,
+    #363749 0.01%,
+    #40504f 100%
+  );
+  padding: 0 0 24px 0;
+`;
+
+export const Wallet: FC = () => {
+  const {
+    address,
+    addressError,
+    isAddressResolving,
+    inputValue,
+    setInputValue,
+  } = useRewardsHistory();
+
+  return (
+    <WalletStyle>
+      <InputWrapper data-testid="inputSection" color="accent">
+        <ThemeProvider theme={themeDark}>
+          <AddressInput
+            address={address}
+            addressError={addressError}
+            inputValue={inputValue}
+            handleInputChange={setInputValue}
+            isAddressResolving={isAddressResolving}
+          />
+          <InputDescription>{INPUT_DESC_TEXT}</InputDescription>
+        </ThemeProvider>
+      </InputWrapper>
+    </WalletStyle>
+  );
+};

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

@@ -2,14 +2,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 { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain';
 
 export const StakeAmountInput = () => {
+  const isActiveWallet = useIsConnectedWalletAndSupportedChain();
   const { maxAmount, stakingLimitInfo } = useStakeFormData();
   const { limitWarning, limitError } = useStakingLimitWarning(
     stakingLimitInfo?.stakeLimitLevel,
   );
+
   return (
     <TokenAmountInputHookForm
+      disabled={!isActiveWallet}
       fieldName="amount"
       token={'ETH'}
       data-testid="stakeInput"

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

@@ -1,12 +1,19 @@
+import { LIMIT_LEVEL } from 'types';
 import { SubmitButtonHookForm } from 'shared/hook-form/controls/submit-button-hook-form';
+import { useIsConnectedWalletAndSupportedChain } from 'shared/hooks/use-is-connected-wallet-and-supported-chain';
+
 import { useStakeFormData } from '../stake-form-context';
-import { LIMIT_LEVEL } from 'types';
 
 export const StakeSubmitButton = () => {
+  const isActiveWallet = useIsConnectedWalletAndSupportedChain();
   const { stakingLimitInfo } = useStakeFormData();
+
   return (
     <SubmitButtonHookForm
-      disabled={stakingLimitInfo?.stakeLimitLevel === LIMIT_LEVEL.REACHED}
+      disabled={
+        !isActiveWallet ||
+        stakingLimitInfo?.stakeLimitLevel === LIMIT_LEVEL.REACHED
+      }
       data-testid="stakeSubmitBtn"
       errorField="amount"
     >