Merge pull request #413 from lidofinance/develop

Merge develop to main

consts/chains.ts

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

consts/matomo-click-events.ts

@@ -14,6 +14,7 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   l2LowFeeStake = 'l2LowFeeStake',
   l2LowFeeWrap = 'l2LowFeeWrap',
   l2swap = 'l2swap',
+  lidoOnL2Opportunities = 'lidoOnL2Opportunities',
   vaultsBannerLearnMore = 'vaultsBannerLearnMore',
   vaultsBannerExploreAll = 'vaultsBannerExploreAll',
   // FAQ
@@ -129,6 +130,11 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push «Swap» in Swap ETH to wstETH on L2 banner on staking widget',
     'eth_widget_banner_swap_ETH_on_L2',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.lidoOnL2Opportunities]: [
+    'Ethereum_Staking_Widget',
+    'Push "Lido on L2 opportunities" ',
+    'eth_widget_lido_on_l2_opportunities',
+  ],
   [MATOMO_CLICK_EVENTS_TYPES.vaultsBannerLearnMore]: [
     'Ethereum_Staking_Widget',
     'Click on "Learn more" on Vaults banner',

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/components/rewardsListContent/RewardsListsEmpty.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+
 import { Divider } from '@lidofinance/lido-ui';
 
 import { RewardsListEmptyWrapper } from './RewardsListsEmptyStyles';

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+import { ConnectWalletStyle } from './styles';
+
+export const ConnectWallet: FC = () => {
+  return (
+    <ConnectWalletStyle>
+      <p>Connect your wallet to view staking stats</p>
+    </ConnectWalletStyle>
+  );
+};

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

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+import { WalletCardStyle } from 'shared/wallet/card/styles';
+
+export const WalletStyle = styled(WalletCardStyle)`
+  background: linear-gradient(
+    52.01deg,
+    #37394a 0%,
+    #363749 0.01%,
+    #40504f 100%
+  );
+  padding: 0 0 24px 0;
+`;
+
+export 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%);
+        `}
+`;

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

@@ -1,41 +1,17 @@
 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 { 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';
 
-const INPUT_DESC_TEXT =
-  'Current balance may differ from last balance in the table due to rounding.';
+import { Wallet } from './wallet';
 
 export const TopCard: FC = () => {
-  const {
-    address,
-    addressError,
-    isAddressResolving,
-    inputValue,
-    setInputValue,
-  } = useRewardsHistory();
-
   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>
+    <>
+      <Wallet />
       <StatsWrapper>
         <Stats />
       </StatsWrapper>
-    </Block>
+    </>
   );
 };