feat: l2 banners updated

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

@@ -1,5 +1,4 @@
 import { FC, memo } from 'react';
-import { Block } from '@lidofinance/lido-ui';
 
 import { StakeFormProvider } from './stake-form-context';
 import { TransactionModalProvider } from 'shared/transaction-modal';
@@ -10,22 +9,24 @@ import { StakeSubmitButton } from './controls/stake-submit-button';
 import { StakeFormInfo } from './stake-form-info';
 import { StakeFormModal } from './stake-form-modal';
 import { SwapDiscountBanner } from '../swap-discount-banner';
-import { FormControllerStyled } from './styles';
+import { StakeBlock, FormControllerStyled } from './styles';
+import { L2FromStakeToWrap } from 'shared/banners/l2-banners/l2-from-stake-to-wrap';
 
 export const StakeForm: FC = memo(() => {
   return (
     <TransactionModalProvider>
       <StakeFormProvider>
         <Wallet />
-        <Block data-testid="stakeForm">
+        <StakeBlock data-testid="stakeForm">
           <FormControllerStyled>
             <StakeAmountInput />
             <StakeSubmitButton />
             <SwapDiscountBanner />
           </FormControllerStyled>
+          <L2FromStakeToWrap />
           <StakeFormInfo />
           <StakeFormModal />
-        </Block>
+        </StakeBlock>
       </StakeFormProvider>
     </TransactionModalProvider>
   );

features/stake/stake-form/styles.tsx

@@ -1,9 +1,15 @@
-import { FormController } from 'shared/hook-form/form-controller';
 import styled from 'styled-components';
+import { Block } from '@lidofinance/lido-ui';
+import { FormController } from 'shared/hook-form/form-controller';
+
+export const StakeBlock = styled(Block)`
+  display: flex;
+  gap: ${({ theme }) => theme.spaceMap.md}px;
+  flex-direction: column;
+`;
 
 export const FormControllerStyled = styled(FormController)`
   display: flex;
   flex-direction: column;
   row-gap: ${({ theme }) => theme.spaceMap.md}px;
-  margin-bottom: 24px;
 `;

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

@@ -1,6 +1,6 @@
 import { memo, FC } from 'react';
 
-import { L2Wsteth } from 'shared/banners/l2-wsteth';
+import { L2Wsteth } from 'shared/banners/l2-banners/l2-wsteth';
 import { InputWrap, WrapBlock } from 'features/wsteth/shared/styles';
 
 import { UnwrapStats } from './unwrap-stats';

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

@@ -11,7 +11,7 @@ import { SubmitButtonWrap } from '../wrap-form-controls/submit-button-wrap';
 
 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';
+import { L2Wsteth } from 'shared/banners/l2-banners/l2-wsteth';
 import { MATOMO_CLICK_EVENTS } from 'config';
 
 export const WrapForm: React.FC = memo(() => {

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

@@ -5,6 +5,7 @@ import {
   L2Icons,
   TextWrap,
   ButtonLinkWrap,
+  ButtonLinkWrapLocal,
   ButtonStyle,
   TextHeader,
   FooterWrap,
@@ -15,8 +16,9 @@ type L2BannerProps = {
   text: React.ReactNode;
   buttonText: React.ReactNode;
   buttonHref?: string;
-  testidWrap: string;
-  testidButton: string;
+  isLocalLink?: boolean;
+  testidWrap?: string;
+  testidButton?: string;
   onClickButton?: () => void;
 };
 
@@ -27,27 +29,37 @@ export const L2Banner = ({
   text,
   buttonText,
   buttonHref = L2_DISCOVERY_LINK,
+  isLocalLink,
   testidWrap,
   testidButton,
   onClickButton,
 }: L2BannerProps) => {
+  const buttonEl = (
+    <ButtonStyle data-testid={testidButton} size="sm" color="primary">
+      {buttonText}
+    </ButtonStyle>
+  );
+
+  const linkProps = {
+    href: buttonHref,
+    onClick: onClickButton,
+    children: buttonEl,
+  };
+
+  const linkEl = isLocalLink ? (
+    <ButtonLinkWrapLocal {...linkProps} />
+  ) : (
+    <ButtonLinkWrap {...linkProps} />
+  );
+
   return (
     <Wrapper data-testid={testidWrap}>
       <ThemeProvider theme={themeDark}>
         {title && <TextHeader>{title}</TextHeader>}
         <TextWrap>{text}</TextWrap>
         <FooterWrap>
           <L2Icons />
-          <ButtonLinkWrap
-            href={buttonHref}
-            target="_blank"
-            rel="noopener noreferrer"
-            onClick={onClickButton}
-          >
-            <ButtonStyle data-testid={testidButton} size="sm" color="primary">
-              {buttonText}
-            </ButtonStyle>
-          </ButtonLinkWrap>
+          {linkEl}
         </FooterWrap>
       </ThemeProvider>
     </Wrapper>