Merge pull request #94 from lidofinance/develop

Develop to main

.github/workflows/ci-dev-goerli.yml

@@ -0,0 +1,39 @@
+name: CI Dev Goerli
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - goerli
+    paths-ignore:
+      - '.github/**'
+      - 'test/**'
+
+permissions:
+  contents: read
+
+jobs:
+  # test:
+  #   ...
+
+  deploy:
+    runs-on: ubuntu-latest
+    # needs: test
+    name: Build and deploy
+    steps:
+      - name: Testnet deploy
+        uses: lidofinance/dispatch-workflow@v1
+        env:
+          APP_ID: ${{ secrets.APP_ID }}
+          APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
+          TARGET_REPO: 'lidofinance/infra-mainnet'
+          TARGET_WORKFLOW: 'deploy_testnet_ethereum_staking_widget.yaml'
+          TARGET: 'goerli'
+
+  tests:
+    needs: deploy
+    if: ${{ github.event.pull_request.draft == false }}
+    uses: ./.github/workflows/tests.yml
+    secrets: inherit
+    with:
+      stand_url: https://stake.testnet.fi

.github/workflows/ci-dev.yml

@@ -1,4 +1,4 @@
-name: CI Dev
+name: CI Dev Holesky
 
 on:
   workflow_dispatch:
@@ -27,7 +27,7 @@ jobs:
           APP_ID: ${{ secrets.APP_ID }}
           APP_PRIVATE_KEY: ${{ secrets.APP_PRIVATE_KEY }}
           TARGET_REPO: 'lidofinance/infra-mainnet'
-          TARGET_WORKFLOW: 'deploy_testnet_ethereum_staking_widget.yaml'
+          TARGET_WORKFLOW: 'deploy_holesky_testnet_ethereum_staking_widget.yaml'
           TARGET: 'develop'
 
   tests:
@@ -36,4 +36,4 @@ jobs:
     uses: ./.github/workflows/tests.yml
     secrets: inherit
     with:
-      stand_url: https://stake.testnet.fi
+      stand_url: https://stake-holesky.testnet.fi

config/matomoClickEvents.ts

@@ -10,6 +10,9 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   oneInchDiscount = 'oneInchDiscount',
   viewEtherscanOnStakePage = 'viewEtherscanOnStakePage',
   l2BannerStake = 'l2BannerStake',
+  l2LowFeeStake = 'l2LowFeeStake',
+  l2LowFeeWrap = 'l2LowFeeWrap',
+  l2swap = 'l2swap',
   // FAQ
   faqSafeWorkWithLidoAudits = 'faqSafeWorkWithLidoAudits',
   faqLidoEthAprEthLandingPage = 'faqLidoEthAprEthLandingPage',
@@ -37,8 +40,6 @@ export const enum MATOMO_CLICK_EVENTS_TYPES {
   wrapTokenSelectETH = 'wrapTokenSelectEth',
   // Unwrap tab
   l2BannerUnwrap = 'l2BannerUnwrap',
-  // /rewards page
-  calculateRewards = 'calculateRewards',
 
   // /withdrawal page
   withdrawalUseLido = 'withdrawalUseLido',
@@ -101,6 +102,21 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push "Learn more" at the L2 banner on "Stake" tab',
     'eth_widget_banner_l2_stake',
   ],
+  [MATOMO_CLICK_EVENTS_TYPES.l2LowFeeStake]: [
+    'Ethereum_Staking_Widget',
+    'Push «Learn more» in Unlock Low-Fee transactions on L2 on Transaction success banner on "Stake" tab',
+    'eth_widget_banner_learn_more_L2_stake',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.l2LowFeeWrap]: [
+    'Ethereum_Staking_Widget',
+    'Push «Learn more» in Unlock Low-Fee transactions on L2 on Transaction success banner on "Wrap" tab',
+    'eth_widget_banner_learn_more_L2_wrap',
+  ],
+  [MATOMO_CLICK_EVENTS_TYPES.l2swap]: [
+    'Ethereum_Staking_Widget',
+    'Push «Swap» in Swap ETH to wstETH on L2 banner on staking widget',
+    'eth_widget_banner_swap_ETH_on_L2',
+  ],
   // FAQ
   [MATOMO_CLICK_EVENTS_TYPES.faqSafeWorkWithLidoAudits]: [
     'Ethereum_Staking_Widget',
@@ -224,12 +240,6 @@ export const MATOMO_CLICK_EVENTS: Record<
     'Push "Learn more" at the L2 banner on "Unwrap" tab',
     'eth_widget_banner_l2_unwrap',
   ],
-  // /rewards page
-  [MATOMO_CLICK_EVENTS_TYPES.calculateRewards]: [
-    'Ethereum_Staking_Widget',
-    'Push calculate reward button" ',
-    'eth_widget_calculate_reward',
-  ],
 
   // /withdrawal page
   [MATOMO_CLICK_EVENTS_TYPES.withdrawalUseLido]: [

config/matomoWalletsEvents.ts

@@ -308,7 +308,7 @@ export const walletsMetrics: WalletsMetrics = {
         onClickTrust: () => {
           trackEvent(...MATOMO_WALLETS_EVENTS.onClickTrust);
         },
-        onClickWC: () => {
+        onClickWalletconnect: () => {
           trackEvent(...MATOMO_WALLETS_EVENTS.onClickWC);
         },
         onClickXdefi: () => {
@@ -375,7 +375,7 @@ export const walletsMetrics: WalletsMetrics = {
         onConnectTrust: () => {
           trackEvent(...MATOMO_WALLETS_EVENTS.onConnectTrust);
         },
-        onConnectWC: () => {
+        onConnectWalletconnect: () => {
           trackEvent(...MATOMO_WALLETS_EVENTS.onConnectWC);
         },
         onConnectXdefi: () => {

features/home/stake-form/stake-form.tsx

@@ -25,7 +25,7 @@ import {
   DataTableRow,
   Eth,
 } from '@lidofinance/lido-ui';
-import { OneinchInfo } from 'features/home/oneinch-info/oneinch-info';
+import { L2Swap } from 'shared/banners';
 import { DATA_UNAVAILABLE } from 'config';
 import { Connect } from 'shared/wallet';
 import { TxStageModal, TX_OPERATION, TX_STAGE } from 'shared/components';
@@ -214,7 +214,7 @@ export const StakeForm: FC = memo(() => {
         ) : (
           <Connect fullwidth />
         )}
-        <OneinchInfo />
+        <L2Swap />
       </FormStyled>
 
       <DataTable>

features/withdrawals/request/form/controls/token-amount-input-request.tsx

@@ -1,12 +1,16 @@
-import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake';
 import { useController, useWatch } from 'react-hook-form';
 
+import {
+  MATOMO_CLICK_EVENTS_TYPES,
+  trackMatomoEvent,
+} from 'config/trackMatomoEvent';
+import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
+import { InputDecoratorTvlStake } from 'features/withdrawals/shared/input-decorator-tvl-stake';
 import {
   RequestFormInputType,
   useRequestFormData,
 } from 'features/withdrawals/request/request-form-context';
 import { useTvlMessage } from 'features/withdrawals/hooks/useTvlMessage';
-import { TokenAmountInputHookForm } from 'shared/hook-form/controls/token-amount-input-hook-form';
 
 export const TokenAmountInputRequest = () => {
   const token = useWatch<RequestFormInputType, 'token'>({ name: 'token' });
@@ -26,6 +30,9 @@ export const TokenAmountInputRequest = () => {
       token={token}
       isLocked={isTokenLocked}
       maxValue={maxAmount}
+      onMaxClick={() => {
+        trackMatomoEvent(MATOMO_CLICK_EVENTS_TYPES.withdrawalMaxInput);
+      }}
       rightDecorator={
         balanceDiff && <InputDecoratorTvlStake tvlDiff={balanceDiff} />
       }

shared/banners/index.ts

@@ -1,2 +1,4 @@
 export * from './curve';
 export * from './modal-pool-banners';
+export * from './l2-low-fee';
+export * from './l2-swap';

shared/banners/l2-low-fee/index.ts

@@ -0,0 +1 @@
+export * from './l2-low-fee';

shared/banners/l2-low-fee/l2-low-fee.tsx

@@ -0,0 +1,61 @@
+import { FC, useCallback } from 'react';
+import { ThemeProvider, themeDark } from '@lidofinance/lido-ui';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'config';
+
+import {
+  Wrapper,
+  L2Icons,
+  TextWrap,
+  ButtonWrap,
+  ButtonLinkWrap,
+  ButtonStyle,
+  ContentWrap,
+  TextHeader,
+} from './styles';
+
+const LINK = 'https://lido.fi/lido-on-l2';
+
+type L2LowFeeProps = {
+  token: 'stETH' | 'wstETH';
+};
+
+export const L2LowFee: FC<L2LowFeeProps> = ({ token }) => {
+  const linkProps = {
+    href: LINK,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  };
+  const isStETH = token === 'stETH';
+  const linkClickHandler = useCallback(() => {
+    const event = isStETH
+      ? MATOMO_CLICK_EVENTS.l2LowFeeStake
+      : MATOMO_CLICK_EVENTS.l2LowFeeWrap;
+    trackEvent(...event);
+  }, [isStETH]);
+
+  const text = isStETH
+    ? 'Learn about Lido on L2 opportunities on Arbitrum, Optimism, and Polygon PoS to enjoy reduced gas fees in DeFi'
+    : 'Bridge wstETH to Arbitrum, Optimism and Polygon PoS to enjoy low gas fees and enhanced opportunities in DeFi';
+
+  return (
+    <Wrapper data-testid="l2LowFeeBanner">
+      <ThemeProvider theme={themeDark}>
+        <ContentWrap>
+          <TextWrap>
+            <TextHeader>Unlock Low-Fee transactions on L2</TextHeader>
+            {text}
+          </TextWrap>
+          <ButtonWrap>
+            <ButtonLinkWrap {...linkProps} onClick={linkClickHandler}>
+              <ButtonStyle data-testid="l2LowFee" size="sm" color="secondary">
+                Learn more
+              </ButtonStyle>
+            </ButtonLinkWrap>
+          </ButtonWrap>
+        </ContentWrap>
+        <L2Icons />
+      </ThemeProvider>
+    </Wrapper>
+  );
+};

shared/banners/l2-low-fee/styles.ts

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import { Button } from '@lidofinance/lido-ui';
+import Icons from 'assets/icons/l2-swap.svg';
+
+export const Wrapper = styled.div`
+  text-align: left;
+  margin-top: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: ${({ theme }) => theme.spaceMap.lg}px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
+  height: 174px;
+  gap: 20px;
+  overflow: hidden;
+  background-color: #07080c;
+  background: linear-gradient(90deg, #3487e5 0%, #006ae3 46.27%);
+  box-sizing: border-box;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    gap: 2px;
+    padding: ${({ theme }) => theme.spaceMap.md}px;
+  }
+
+  @media (max-width: 396px) {
+    cursor: pointer;
+    padding: ${({ theme }) => theme.spaceMap.sm}px;
+  }
+`;
+
+export const L2Icons = styled.img.attrs({
+  src: Icons,
+  alt: '',
+})`
+  position: relative;
+  display: block;
+  width: 44px;
+  height: 120px;
+`;
+
+export const ContentWrap = styled.div`
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+`;
+
+export const TextHeader = styled.div`
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 4px;
+`;
+
+export const TextWrap = styled.div`
+  flex: 1 1 auto;
+  color: #fff;
+  line-height: 20px;
+  font-size: 12px;
+  font-weight: 400;
+  position: relative;
+`;
+
+export const ButtonWrap = styled.div`
+  display: flex;
+  margin-top: 12px;
+`;
+
+export const ButtonLinkWrap = styled.a`
+  display: block;
+
+  @media (max-width: 396px) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+
+export const ButtonStyle = styled(Button)`
+  @media (max-width: 396px) {
+    display: none;
+  }
+  padding: 7px 16px;
+  font-size: 12px;
+  line-height: 20px;
+`;

shared/banners/l2-swap/index.ts

@@ -0,0 +1 @@
+export * from './l2-swap';