diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap.svg
index 4fc016967..9b9d6780b 100644
--- a/assets/icons/l2-swap.svg
+++ b/assets/icons/l2-swap.svg
@@ -1 +1 @@
-
+
diff --git a/features/stake/stake-form/stake-form.tsx b/features/stake/stake-form/stake-form.tsx
index bc7cd92c3..e8f708d83 100644
--- a/features/stake/stake-form/stake-form.tsx
+++ b/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 (
-
+
+
-
+
);
diff --git a/features/stake/stake-form/styles.tsx b/features/stake/stake-form/styles.tsx
index 70c834fd5..e313bcd8e 100644
--- a/features/stake/stake-form/styles.tsx
+++ b/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;
`;
diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
index 16d8c6137..95a1b4017 100644
--- a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
+++ b/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';
diff --git a/features/wsteth/wrap/wrap-form/wrap-form.tsx b/features/wsteth/wrap/wrap-form/wrap-form.tsx
index c37634888..b7b289a62 100644
--- a/features/wsteth/wrap/wrap-form/wrap-form.tsx
+++ b/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(() => {
diff --git a/shared/banners/l2-banner/l2-banner.tsx b/shared/banners/l2-banner/l2-banner.tsx
index e736562e0..ca5ede40d 100644
--- a/shared/banners/l2-banner/l2-banner.tsx
+++ b/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,10 +29,29 @@ export const L2Banner = ({
text,
buttonText,
buttonHref = L2_DISCOVERY_LINK,
+ isLocalLink,
testidWrap,
testidButton,
onClickButton,
}: L2BannerProps) => {
+ const buttonEl = (
+
+ {buttonText}
+
+ );
+
+ const linkProps = {
+ href: buttonHref,
+ onClick: onClickButton,
+ children: buttonEl,
+ };
+
+ const linkEl = isLocalLink ? (
+
+ ) : (
+
+ );
+
return (
@@ -38,16 +59,7 @@ export const L2Banner = ({
{text}
-
-
- {buttonText}
-
-
+ {linkEl}
diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts
index a98d470c8..8abd1931d 100644
--- a/shared/banners/l2-banner/styles.ts
+++ b/shared/banners/l2-banner/styles.ts
@@ -1,6 +1,7 @@
-import styled from 'styled-components';
-import { Button } from '@lidofinance/lido-ui';
+import styled, { css } from 'styled-components';
+import { Button, Link } from '@lidofinance/lido-ui';
import Icons from 'assets/icons/l2-swap.svg';
+import { LocalLink } from 'shared/components/local-link';
export const Wrapper = styled.div`
position: relative;
@@ -11,13 +12,13 @@ export const Wrapper = styled.div`
border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
gap: 10px;
overflow: hidden;
- background-color: #07080c;
background: radial-gradient(
- 93.45% 103.1% at 6.55% 17.29%,
- #3c64b6 0%,
- #2e1d7b 55.75%,
- #142698 100%
- );
+ 100% 1200% at 120% 110%,
+ rgba(255, 255, 255, 0.95) 2%,
+ rgba(219, 255, 255, 0.95) 35%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ linear-gradient(130deg, #a6a5ff 7%, rgba(181, 180, 255, 0) 55%);
box-sizing: border-box;
${({ theme }) => theme.mediaQueries.md} {
@@ -36,7 +37,7 @@ export const L2Icons = styled.img.attrs({
alt: '',
})`
display: block;
- width: 162px;
+ width: 188px;
height: 32px;
`;
@@ -51,19 +52,19 @@ export const TextHeader = styled.div`
font-size: 14px;
line-height: 16px;
font-weight: 700;
- color: #fff;
+ color: var(--lido-color-textDark);
`;
export const TextWrap = styled.div`
flex: 1 1 auto;
- color: #fff;
+ color: var(--lido-color-textDark);
line-height: 20px;
font-size: 12px;
font-weight: 400;
position: relative;
`;
-export const ButtonLinkWrap = styled.a`
+const buttonLinkWrapCss = css`
display: block;
${({ theme }) => theme.mediaQueries.md} {
@@ -75,6 +76,14 @@ export const ButtonLinkWrap = styled.a`
}
`;
+export const ButtonLinkWrap = styled(Link)`
+ ${buttonLinkWrapCss};
+`;
+
+export const ButtonLinkWrapLocal = styled(LocalLink)`
+ ${buttonLinkWrapCss};
+`;
+
export const ButtonStyle = styled(Button)`
padding: 7px 16px;
font-size: 12px;
diff --git a/shared/banners/l2-banners/l2-after-stake.tsx b/shared/banners/l2-banners/l2-after-stake.tsx
new file mode 100644
index 000000000..1ac1265d4
--- /dev/null
+++ b/shared/banners/l2-banners/l2-after-stake.tsx
@@ -0,0 +1,24 @@
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'config';
+import { L2Banner, L2_DISCOVERY_LINK } from '../l2-banner';
+
+const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2LowFeeStake);
+
+export const L2AfterStake: React.FC = () => {
+ return (
+
+ Learn about Lido on L2 opportunities and enjoy various
+ opportunities in DeFi.
+
+ }
+ buttonText="Learn more"
+ buttonHref={L2_DISCOVERY_LINK}
+ testidWrap="l2LowFeeBanner"
+ testidButton="l2LowFee"
+ onClickButton={linkClickHandler}
+ />
+ );
+};
diff --git a/shared/banners/l2-banners/l2-after-wrap.tsx b/shared/banners/l2-banners/l2-after-wrap.tsx
new file mode 100644
index 000000000..6738f36fc
--- /dev/null
+++ b/shared/banners/l2-banners/l2-after-wrap.tsx
@@ -0,0 +1,26 @@
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import { MATOMO_CLICK_EVENTS } from 'config';
+import { L2Banner } from '../l2-banner';
+
+const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2LowFeeWrap);
+
+const L2_LEARN_MORE_AFTER_WRAP_LINK =
+ 'https://lido.fi/lido-ecosystem?networks=arbitrum%2Coptimism%2Cbase%2Czksync+era%2Cmantle%2Clinea%2Cpolygon&criteria=or&tokens=wsteth';
+
+export const L2AfterWrap = () => {
+ return (
+
+ Learn about DeFi opportunities using wstETH across multiple L2
+ networks.
+
+ }
+ buttonText="Learn more"
+ buttonHref={L2_LEARN_MORE_AFTER_WRAP_LINK}
+ testidWrap="l2LowFeeBanner"
+ testidButton="l2LowFee"
+ onClickButton={linkClickHandler}
+ />
+ );
+};
diff --git a/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx b/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx
new file mode 100644
index 000000000..ede33f089
--- /dev/null
+++ b/shared/banners/l2-banners/l2-from-stake-to-wrap.tsx
@@ -0,0 +1,19 @@
+import { L2Banner } from '../l2-banner';
+import { MATOMO_CLICK_EVENTS } from 'config';
+import { trackEvent } from '@lidofinance/analytics-matomo';
+import * as URLS from 'config/urls';
+
+const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2BannerStake);
+
+export const L2FromStakeToWrap = () => {
+ return (
+
+ );
+};
diff --git a/shared/banners/l2-wsteth/l2-wsteth.tsx b/shared/banners/l2-banners/l2-wsteth.tsx
similarity index 92%
rename from shared/banners/l2-wsteth/l2-wsteth.tsx
rename to shared/banners/l2-banners/l2-wsteth.tsx
index d5ce1b19c..0787c3f51 100644
--- a/shared/banners/l2-wsteth/l2-wsteth.tsx
+++ b/shared/banners/l2-banners/l2-wsteth.tsx
@@ -23,7 +23,7 @@ export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => {
text={
<>
Enjoy lower gas fees and DeFi opportunities using wstETH
- across Arbitrum, Optimism, Base, zkSync, Mantle and Linea.
+ across multiple L2 networks.
}
/>
diff --git a/shared/banners/l2-low-fee/index.ts b/shared/banners/l2-low-fee/index.ts
deleted file mode 100644
index 0964a76e5..000000000
--- a/shared/banners/l2-low-fee/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './l2-low-fee';
diff --git a/shared/banners/l2-low-fee/l2-low-fee.tsx b/shared/banners/l2-low-fee/l2-low-fee.tsx
deleted file mode 100644
index 88df2d7d6..000000000
--- a/shared/banners/l2-low-fee/l2-low-fee.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-import { trackEvent } from '@lidofinance/analytics-matomo';
-import { MATOMO_CLICK_EVENTS } from 'config';
-
-import { L2Banner, L2_DISCOVERY_LINK } from '../l2-banner';
-
-type L2LowFeeProps = {
- token: 'stETH' | 'wstETH';
-};
-
-export const L2LowFee: React.FC = ({ token }) => {
- 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, Base, zkSync, Mantle and Linea to enjoy reduced gas fees in DeFi'
- : 'Bridge wstETH to Arbitrum, Optimism, Base, zkSync, Mantle and Linea to enjoy low gas fees and enhanced opportunities in DeFi';
-
- return (
-
- );
-};
diff --git a/shared/banners/l2-wsteth/index.ts b/shared/banners/l2-wsteth/index.ts
deleted file mode 100644
index d3a4f4916..000000000
--- a/shared/banners/l2-wsteth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { L2Wsteth } from './l2-wsteth';
diff --git a/shared/components/tx-stage-modal/tx-stage-modal.tsx b/shared/components/tx-stage-modal/tx-stage-modal.tsx
index 0c8e1a945..48f3f5c5d 100644
--- a/shared/components/tx-stage-modal/tx-stage-modal.tsx
+++ b/shared/components/tx-stage-modal/tx-stage-modal.tsx
@@ -3,7 +3,8 @@ import { useConnectorInfo } from 'reef-knot/web3-react';
import { use1inchDeepLinkProps } from 'features/stake/hooks';
import { TxLinkEtherscan } from 'shared/components/tx-link-etherscan';
-import { L2LowFee } from 'shared/banners/l2-low-fee';
+import { L2AfterStake } from 'shared/banners/l2-banners/l2-after-stake';
+import { L2AfterWrap } from 'shared/banners/l2-banners/l2-after-wrap';
import { TxStageModalShape } from './tx-stage-modal-shape';
import { ErrorMessage, formatBalance } from 'utils';
import { ModalProps } from '@lidofinance/lido-ui';
@@ -204,7 +205,7 @@ export const TxStageModal = memo((props: TxStageModalProps) => {
}
description={successText}
- footer={}
+ footer={balanceToken === 'stETH' ? : }
/>
);
}