From aea8aa2cd59cf9ad1914a5e6c1678b37cf962935 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 4 Mar 2024 16:15:34 +0400 Subject: [PATCH 1/5] feat: l2 banners updated --- assets/icons/l2-swap.svg | 2 +- features/stake/stake-form/stake-form.tsx | 9 ++--- features/stake/stake-form/styles.tsx | 10 ++++-- .../wsteth/unwrap/unwrap-form/unwrap-form.tsx | 2 +- features/wsteth/wrap/wrap-form/wrap-form.tsx | 2 +- shared/banners/l2-banner/l2-banner.tsx | 36 ++++++++++++------- shared/banners/l2-banner/styles.ts | 33 ++++++++++------- shared/banners/l2-banners/l2-after-stake.tsx | 24 +++++++++++++ shared/banners/l2-banners/l2-after-wrap.tsx | 26 ++++++++++++++ .../l2-banners/l2-from-stake-to-wrap.tsx | 19 ++++++++++ .../{l2-wsteth => l2-banners}/l2-wsteth.tsx | 2 +- shared/banners/l2-low-fee/index.ts | 1 - shared/banners/l2-low-fee/l2-low-fee.tsx | 36 ------------------- shared/banners/l2-wsteth/index.ts | 1 - .../tx-stage-modal/tx-stage-modal.tsx | 5 +-- 15 files changed, 134 insertions(+), 74 deletions(-) create mode 100644 shared/banners/l2-banners/l2-after-stake.tsx create mode 100644 shared/banners/l2-banners/l2-after-wrap.tsx create mode 100644 shared/banners/l2-banners/l2-from-stake-to-wrap.tsx rename shared/banners/{l2-wsteth => l2-banners}/l2-wsteth.tsx (92%) delete mode 100644 shared/banners/l2-low-fee/index.ts delete mode 100644 shared/banners/l2-low-fee/l2-low-fee.tsx delete mode 100644 shared/banners/l2-wsteth/index.ts 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' ? : } /> ); } From 0ed33868c0614bcfb0c5cdf2fa10d3ced752d07e Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Wed, 6 Mar 2024 14:41:48 +0400 Subject: [PATCH 2/5] feat: l2 banner dark theme support --- shared/banners/l2-banner/l2-banner.tsx | 16 +++++-------- shared/banners/l2-banner/styles.ts | 31 ++++++++++++++++++-------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/shared/banners/l2-banner/l2-banner.tsx b/shared/banners/l2-banner/l2-banner.tsx index ca5ede40d..fed8a4352 100644 --- a/shared/banners/l2-banner/l2-banner.tsx +++ b/shared/banners/l2-banner/l2-banner.tsx @@ -1,5 +1,3 @@ -import { ThemeProvider, themeDark } from '@lidofinance/lido-ui'; - import { Wrapper, L2Icons, @@ -54,14 +52,12 @@ export const L2Banner = ({ return ( - - {title && {title}} - {text} - - - {linkEl} - - + {title && {title}} + {text} + + + {linkEl} + ); }; diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts index 8abd1931d..853198690 100644 --- a/shared/banners/l2-banner/styles.ts +++ b/shared/banners/l2-banner/styles.ts @@ -12,15 +12,28 @@ export const Wrapper = styled.div` border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; gap: 10px; overflow: hidden; - background: radial-gradient( - 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.name === 'dark' + ? css` + background: linear-gradient( + 275.17deg, + #0a5dff 8.63%, + #4d5dff 46.27%, + #905cff 81.73% + ); + ` + : css` + background: radial-gradient( + 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%); + `} + ${({ theme }) => theme.mediaQueries.md} { gap: 6px; padding: ${({ theme }) => theme.spaceMap.md}px; @@ -52,12 +65,12 @@ export const TextHeader = styled.div` font-size: 14px; line-height: 16px; font-weight: 700; - color: var(--lido-color-textDark); + color: var(--lido-color-text); `; export const TextWrap = styled.div` flex: 1 1 auto; - color: var(--lido-color-textDark); + color: var(--lido-color-text); line-height: 20px; font-size: 12px; font-weight: 400; From 2f7186b4b43e4dfe8ff284a77c679def3571f0c8 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Wed, 6 Mar 2024 14:42:20 +0400 Subject: [PATCH 3/5] feat: l2 banner on stake page after swap discount banner --- features/stake/stake-form/stake-form.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/features/stake/stake-form/stake-form.tsx b/features/stake/stake-form/stake-form.tsx index e8f708d83..32b38c2c7 100644 --- a/features/stake/stake-form/stake-form.tsx +++ b/features/stake/stake-form/stake-form.tsx @@ -21,9 +21,10 @@ export const StakeForm: FC = memo(() => { - + + + - From 10c2c7fd2eb86c77ece715aa55e3314f636e6a1e Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 11 Mar 2024 16:01:20 +0400 Subject: [PATCH 4/5] fix: l2 banner visuals --- assets/icons/l2-swap-dark.svg | 1 + assets/icons/{l2-swap.svg => l2-swap-light.svg} | 0 shared/banners/l2-banner/styles.ts | 10 +++++----- shared/banners/l2-banners/l2-after-stake.tsx | 2 +- shared/banners/l2-banners/l2-after-wrap.tsx | 2 +- shared/banners/l2-banners/l2-wsteth.tsx | 2 +- 6 files changed, 9 insertions(+), 8 deletions(-) create mode 100644 assets/icons/l2-swap-dark.svg rename assets/icons/{l2-swap.svg => l2-swap-light.svg} (100%) diff --git a/assets/icons/l2-swap-dark.svg b/assets/icons/l2-swap-dark.svg new file mode 100644 index 000000000..cc2d48f44 --- /dev/null +++ b/assets/icons/l2-swap-dark.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap-light.svg similarity index 100% rename from assets/icons/l2-swap.svg rename to assets/icons/l2-swap-light.svg diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts index 853198690..05d995396 100644 --- a/shared/banners/l2-banner/styles.ts +++ b/shared/banners/l2-banner/styles.ts @@ -1,6 +1,7 @@ import styled, { css } from 'styled-components'; import { Button, Link } from '@lidofinance/lido-ui'; -import Icons from 'assets/icons/l2-swap.svg'; +import IconsLight from 'assets/icons/l2-swap-light.svg'; +import IconsDark from 'assets/icons/l2-swap-dark.svg'; import { LocalLink } from 'shared/components/local-link'; export const Wrapper = styled.div` @@ -45,13 +46,12 @@ export const Wrapper = styled.div` } `; -export const L2Icons = styled.img.attrs({ - src: Icons, - alt: '', -})` +export const L2Icons = styled.div` display: block; width: 188px; height: 32px; + background-image: url(${({ theme }) => + theme.name === 'dark' ? IconsDark : IconsLight}); `; export const FooterWrap = styled.div` diff --git a/shared/banners/l2-banners/l2-after-stake.tsx b/shared/banners/l2-banners/l2-after-stake.tsx index 1ac1265d4..40e207669 100644 --- a/shared/banners/l2-banners/l2-after-stake.tsx +++ b/shared/banners/l2-banners/l2-after-stake.tsx @@ -11,7 +11,7 @@ export const L2AfterStake: React.FC = () => { text={ <> Learn about Lido on L2 opportunities and enjoy various - opportunities in DeFi. + opportunities in DeFi } buttonText="Learn more" diff --git a/shared/banners/l2-banners/l2-after-wrap.tsx b/shared/banners/l2-banners/l2-after-wrap.tsx index 6738f36fc..03049e73b 100644 --- a/shared/banners/l2-banners/l2-after-wrap.tsx +++ b/shared/banners/l2-banners/l2-after-wrap.tsx @@ -13,7 +13,7 @@ export const L2AfterWrap = () => { text={ <> Learn about DeFi opportunities using wstETH across multiple L2 - networks. + networks } buttonText="Learn more" diff --git a/shared/banners/l2-banners/l2-wsteth.tsx b/shared/banners/l2-banners/l2-wsteth.tsx index 0787c3f51..ab10c393c 100644 --- a/shared/banners/l2-banners/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 multiple L2 networks. + across multiple L2 networks } /> From 07e4493053fca16800be8bc40d3c0d8e8b410383 Mon Sep 17 00:00:00 2001 From: Dmitrii Podlesnyi Date: Mon, 11 Mar 2024 17:35:23 +0400 Subject: [PATCH 5/5] fix: l2 banner text updated --- shared/banners/l2-banners/l2-after-stake.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/shared/banners/l2-banners/l2-after-stake.tsx b/shared/banners/l2-banners/l2-after-stake.tsx index 40e207669..9e8923f9c 100644 --- a/shared/banners/l2-banners/l2-after-stake.tsx +++ b/shared/banners/l2-banners/l2-after-stake.tsx @@ -10,8 +10,7 @@ export const L2AfterStake: React.FC = () => { title="Unlock Low-Fee transactions on L2" text={ <> - Learn about Lido on L2 opportunities and enjoy various - opportunities in DeFi + Learn about Lido on L2 and enjoy various opportunities in DeFi } buttonText="Learn more"