Develop to main

features/home/oneinch-info/oneinch-info.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Button } from '@lidofinance/lido-ui';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import { useLidoSWR } from 'shared/hooks';
-import { L2Banner } from 'shared/l2-banner';
+import { L2OneInch } from 'shared/banners/l2-oneinch';
 import { MATOMO_CLICK_EVENTS } from 'config';
 
 import {
@@ -30,7 +30,7 @@ export const OneinchInfo: FC = () => {
   if (initialLoading) return null;
 
   if (!rate || rate < ONE_INCH_RATE_LIMIT)
-    return <L2Banner matomoEvent={MATOMO_CLICK_EVENTS.l2BannerStake} />;
+    return <L2OneInch matomoEvent={MATOMO_CLICK_EVENTS.l2BannerStake} />;
 
   const linkClickHandler = () =>
     trackEvent(...MATOMO_CLICK_EVENTS.oneInchDiscount);

features/wsteth/shared/styles.tsx

@@ -1,10 +1,12 @@
 import styled from 'styled-components';
-import { DataTable } from '@lidofinance/lido-ui';
-
-export const StatsDataTable = styled(DataTable)`
-  margin-top: ${({ theme }) => theme.spaceMap.xl}px;
-`;
+import { Block } from '@lidofinance/lido-ui';
 
 export const InputWrap = styled.div`
   margin-bottom: ${({ theme }) => theme.spaceMap.md}px;
 `;
+
+export const WrapBlock = styled(Block)`
+  gap: ${({ theme }) => theme.spaceMap.md}px;
+  display: flex;
+  flex-direction: column;
+`;

features/wsteth/unwrap/unwrap-form/unwrap-form.tsx

@@ -1,31 +1,31 @@
 import { memo, FC } from 'react';
-import { Block } from '@lidofinance/lido-ui';
-import { L2Banner } from 'shared/l2-banner';
-import { MATOMO_CLICK_EVENTS } from 'config';
+
+import { L2Wsteth } from 'shared/banners/l2-wsteth';
+import { FormController } from 'features/wsteth/shared/form-controller/form-controller';
+import { InputWrap, WrapBlock } from 'features/wsteth/shared/styles';
+
 import { UnwrapStats } from './unwrap-stats';
 import { UnwrapFormTxModal } from './unwrap-form-tx-modal';
 import { TransactionModalProvider } from 'shared/transaction-modal';
 import { UnwrapFormProvider } from '../unwrap-form-context';
-import { FormController } from 'features/wsteth/shared/form-controller/form-controller';
 import { TokenAmountInputUnwrap } from '../unwrap-form-controls/amount-input-unwrap';
 import { SubmitButtonUnwrap } from '../unwrap-form-controls/submit-button-unwrap';
-import { InputWrap } from 'features/wsteth/shared/styles';
 
 export const UnwrapForm: FC = memo(() => {
   return (
     <TransactionModalProvider>
       <UnwrapFormProvider>
-        <Block>
+        <WrapBlock>
           <FormController>
             <InputWrap>
               <TokenAmountInputUnwrap />
             </InputWrap>
             <SubmitButtonUnwrap />
-            <L2Banner matomoEvent={MATOMO_CLICK_EVENTS.l2BannerUnwrap} />
           </FormController>
+          <L2Wsteth />
           <UnwrapStats />
           <UnwrapFormTxModal />
-        </Block>
+        </WrapBlock>
       </UnwrapFormProvider>
     </TransactionModalProvider>
   );

features/wsteth/unwrap/unwrap-form/unwrap-stats.tsx

@@ -2,8 +2,7 @@ import { useTxCostInUsd } from 'shared/hooks';
 import { useUnwrapGasLimit } from '../hooks/use-unwrap-gas-limit';
 import { useUnwrapFormData } from '../unwrap-form-context';
 
-import { DataTableRow } from '@lidofinance/lido-ui';
-import { StatsDataTable } from 'features/wsteth/shared/styles';
+import { DataTableRow, DataTable } from '@lidofinance/lido-ui';
 import { FormatToken } from 'shared/formatters/format-token';
 import { DataTableRowStethByWsteth } from 'shared/components/data-table-row-steth-by-wsteth';
 
@@ -13,7 +12,7 @@ export const UnwrapStats = () => {
   const { willReceiveStETH } = useUnwrapFormData();
 
   return (
-    <StatsDataTable>
+    <DataTable>
       <DataTableRow
         title="Max gas fee"
         data-testid="maxGasFee"
@@ -29,6 +28,6 @@ export const UnwrapStats = () => {
           symbol="stETH"
         />
       </DataTableRow>
-    </StatsDataTable>
+    </DataTable>
   );
 };

features/wsteth/wrap/wrap-form/wrap-form.tsx

@@ -1,35 +1,34 @@
 import { memo } from 'react';
 
-import { Block } from '@lidofinance/lido-ui';
-import { L2Banner } from 'shared/l2-banner';
 import { WrapFormStats } from './wrap-stats';
+import { WrapBlock } from '../../shared/styles';
 import { WrapFormTxModal } from './wrap-form-tx-modal';
 import { WrapFormProvider } from '../wrap-form-context/wrap-form-context';
-import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context';
 import { FormControllerWrap } from '../wrap-form-controls/form-controller-wrap';
 import { TokenSelectWrap } from '../wrap-form-controls/token-select-wrap';
 import { TokenAmountInputWrap } from '../wrap-form-controls/token-amount-input-wrap';
 import { SubmitButtonWrap } from '../wrap-form-controls/submit-button-wrap';
-import { InputGroupHookForm } from 'shared/hook-form/controls/input-group-hook-form';
 
-import { MATOMO_CLICK_EVENTS } from 'config';
+import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context';
+import { InputGroupHookForm } from 'shared/hook-form/controls/input-group-hook-form';
+import { L2Wsteth } from 'shared/banners/l2-wsteth';
 
 export const WrapForm: React.FC = memo(() => {
   return (
     <TransactionModalProvider>
       <WrapFormProvider>
-        <Block>
+        <WrapBlock>
           <FormControllerWrap>
             <InputGroupHookForm errorField="amount">
               <TokenSelectWrap />
               <TokenAmountInputWrap />
             </InputGroupHookForm>
             <SubmitButtonWrap />
-            <L2Banner matomoEvent={MATOMO_CLICK_EVENTS.l2BannerWrap} />
           </FormControllerWrap>
+          <L2Wsteth />
           <WrapFormStats />
           <WrapFormTxModal />
-        </Block>
+        </WrapBlock>
       </WrapFormProvider>
     </TransactionModalProvider>
   );

features/wsteth/wrap/wrap-form/wrap-stats.tsx

@@ -1,16 +1,15 @@
 import { useMemo } from 'react';
 import { parseEther } from '@ethersproject/units';
-
+import { DataTable, DataTableRow } from '@lidofinance/lido-ui';
 import { useFormContext } from 'react-hook-form';
-import { useTxCostInUsd, useWstethBySteth } from 'shared/hooks';
-import { useApproveGasLimit } from '../hooks/use-approve-gas-limit';
-import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
 
-import { DataTableRow } from '@lidofinance/lido-ui';
-import { StatsDataTable } from 'features/wsteth/shared/styles';
+import { useTxCostInUsd, useWstethBySteth } from 'shared/hooks';
 import { FormatToken } from 'shared/formatters';
 import { TOKENS_TO_WRAP } from 'features/wsteth/shared/types';
 
+import { useApproveGasLimit } from '../hooks/use-approve-gas-limit';
+import { useWrapFormData, WrapFormInputType } from '../wrap-form-context';
+
 export const WrapFormStats = () => {
   const { allowance, wrapGasLimit, willReceiveWsteth, isApprovalLoading } =
     useWrapFormData();
@@ -28,7 +27,7 @@ export const WrapFormStats = () => {
   const wrapTxCostInUsd = useTxCostInUsd(wrapGasLimit && Number(wrapGasLimit));
 
   return (
-    <StatsDataTable>
+    <DataTable>
       <DataTableRow
         title="Max unlock fee"
         data-testid="maxUnlockFee"
@@ -65,6 +64,6 @@ export const WrapFormStats = () => {
           symbol="wstETH"
         />
       </DataTableRow>
-    </StatsDataTable>
+    </DataTable>
   );
 };

shared/banners/l2-banner/l2-banner.tsx

@@ -21,6 +21,8 @@ type L2BannerProps = {
   onClickButton?: () => void;
 };
 
+export const L2_DISCOVERY_LINK = 'https://lido.fi/lido-on-l2';
+
 export const L2Banner = ({
   title,
   text,

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

@@ -2,9 +2,7 @@ import { useCallback } from 'react';
 import { trackEvent } from '@lidofinance/analytics-matomo';
 import { MATOMO_CLICK_EVENTS } from 'config';
 
-import { L2Banner } from '../l2-banner';
-
-const LINK = 'https://lido.fi/lido-on-l2';
+import { L2Banner, L2_DISCOVERY_LINK } from '../l2-banner';
 
 type L2LowFeeProps = {
   token: 'stETH' | 'wstETH';
@@ -29,7 +27,7 @@ export const L2LowFee: React.FC<L2LowFeeProps> = ({ token }) => {
       title="Unlock Low-Fee transactions on L2"
       text={text}
       buttonText="Learn more"
-      buttonHref={LINK}
+      buttonHref={L2_DISCOVERY_LINK}
       testidWrap="l2LowFeeBanner"
       testidButton="l2LowFee"
       onClickButton={linkClickHandler}

shared/banners/l2-oneinch/index.ts

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

shared/l2-banner/l2-banner.tsx → shared/banners/l2-oneinch/l2-oneinch.tsx

@@ -17,7 +17,7 @@ type L2BannerProps = {
   matomoEvent: MatomoEventType;
 };
 
-export const L2Banner: FC<L2BannerProps> = ({ matomoEvent }) => {
+export const L2OneInch: FC<L2BannerProps> = ({ matomoEvent }) => {
   const linkProps = {
     href: L2_LINK,
     target: '_blank',

shared/banners/l2-wsteth/index.ts

@@ -0,0 +1 @@
+export { L2Wsteth } from './l2-wsteth';

shared/banners/l2-wsteth/l2-wsteth.tsx

@@ -0,0 +1,32 @@
+import {
+  Banner,
+  L2Icons,
+  LinkButton,
+  TextContent,
+  OverlayLink,
+} from './styles';
+import { L2_DISCOVERY_LINK } from '../l2-banner';
+import { MATOMO_CLICK_EVENTS } from 'config';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+
+const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2BannerWrap);
+
+export const L2Wsteth = () => {
+  return (
+    <Banner>
+      <L2Icons />
+      <TextContent>
+        Enjoy <b>lower gas</b> fees and <b>DeFi opportunities</b> using wstETH
+        across Arbitrum, Optimism and Base.
+      </TextContent>
+      <OverlayLink
+        href={L2_DISCOVERY_LINK}
+        onClick={linkClickHandler}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <LinkButton>Learn More</LinkButton>
+      </OverlayLink>
+    </Banner>
+  );
+};

shared/banners/l2-wsteth/styles.ts

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+import { Button } from '@lidofinance/lido-ui';
+import Icons from 'assets/icons/l2-wsteth.svg';
+
+export const Banner = styled.div`
+  height: 112px;
+  position: relative;
+  display: flex;
+  text-align: left;
+  align-items: center;
+  padding: ${({ theme }) => theme.spaceMap.lg}px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
+  gap: 20px;
+  overflow: hidden;
+  background-color: #07080c;
+  background: radial-gradient(
+    93.45% 103.1% at 6.55% 17.29%,
+    #3c64b6 0%,
+    #2e1d7b 55.75%,
+    #142698 100%
+  );
+  box-sizing: border-box;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    cursor: pointer;
+  }
+`;
+
+export const L2Icons = styled.img.attrs({
+  src: Icons,
+  alt: '',
+})`
+  position: relative;
+  display: block;
+  width: 28px;
+  height: 72px;
+`;
+
+export const LinkButton = styled(Button)`
+  padding: 7px 16px;
+  font-size: 12px;
+  line-height: 20px;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    display: none;
+  }
+`;
+
+export const OverlayLink = styled.a`
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+
+export const TextContent = styled.p`
+  color: var(--lido-color-primaryContrast);
+`;