diff --git a/.github/workflows/ci-ipfs-test-production.yml b/.github/workflows/ci-ipfs-test-production.yml index a49604ffb..bac8159ff 100644 --- a/.github/workflows/ci-ipfs-test-production.yml +++ b/.github/workflows/ci-ipfs-test-production.yml @@ -53,5 +53,10 @@ jobs: ipfs_folder: ${{ needs.prepare-for-ipfs.outputs.ipfs_folder }} current_branch: ${{ github.ref_name }} IS_CREATE_RELEASE: false + FILEBASE_BUCKET_NAME: ${{ vars.FILEBASE_BUCKET_NAME }} secrets: W3S_TOKEN: ${{ secrets.W3S_TOKEN }} + W3S_PROOF: ${{ secrets.W3S_PROOF }} + GW3_TOKEN: ${{ secrets.GW3_TOKEN }} + GW3_ACCESS_KEY: ${{ secrets.GW3_ACCESS_KEY }} + FILEBASE_TOKEN: ${{ secrets.FILEBASE_TOKEN }} diff --git a/.github/workflows/ci-ipfs-testnet.yml b/.github/workflows/ci-ipfs-testnet.yml index b083cc1ce..1b8fb2743 100644 --- a/.github/workflows/ci-ipfs-testnet.yml +++ b/.github/workflows/ci-ipfs-testnet.yml @@ -55,6 +55,10 @@ jobs: ipfs_folder: ${{ needs.prepare-for-ipfs.outputs.ipfs_folder }} current_branch: ${{ github.ref_name }} IS_CREATE_RELEASE: false + FILEBASE_BUCKET_NAME: ${{ vars.FILEBASE_BUCKET_NAME }} secrets: W3S_TOKEN: ${{ secrets.W3S_TOKEN }} - GW3_TOKEN: '' + W3S_PROOF: ${{ secrets.W3S_PROOF }} + GW3_TOKEN: ${{ secrets.GW3_TOKEN }} + GW3_ACCESS_KEY: ${{ secrets.GW3_ACCESS_KEY }} + FILEBASE_TOKEN: ${{ secrets.FILEBASE_TOKEN }} diff --git a/.github/workflows/ci-ipfs.yml b/.github/workflows/ci-ipfs.yml index e7b44db41..038b53db3 100644 --- a/.github/workflows/ci-ipfs.yml +++ b/.github/workflows/ci-ipfs.yml @@ -70,5 +70,10 @@ jobs: current_branch: ${{ github.ref_name }} IS_CREATE_RELEASE: ${{ needs.prepare-for-ipfs.outputs.is_create_release == 'true' }} tag: ${{ needs.prepare-for-ipfs.outputs.tag }} + FILEBASE_BUCKET_NAME: ${{ vars.FILEBASE_BUCKET_NAME }} secrets: W3S_TOKEN: ${{ secrets.W3S_TOKEN }} + W3S_PROOF: ${{ secrets.W3S_PROOF }} + GW3_TOKEN: ${{ secrets.GW3_TOKEN }} + GW3_ACCESS_KEY: ${{ secrets.GW3_ACCESS_KEY }} + FILEBASE_TOKEN: ${{ secrets.FILEBASE_TOKEN }} diff --git a/assets/icons/l2-swap.svg b/assets/icons/l2-swap.svg index 940075be8..356cad7b4 100644 --- a/assets/icons/l2-swap.svg +++ b/assets/icons/l2-swap.svg @@ -1 +1 @@ - + diff --git a/assets/icons/l2-wsteth.svg b/assets/icons/l2-wsteth.svg deleted file mode 100644 index b5f117dea..000000000 --- a/assets/icons/l2-wsteth.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx index 8370375c8..16d8c6137 100644 --- a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx +++ b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx @@ -10,6 +10,7 @@ import { UnwrapFormProvider } from '../unwrap-form-context'; import { FormController } from 'shared/hook-form/form-controller/form-controller'; import { TokenAmountInputUnwrap } from '../unwrap-form-controls/amount-input-unwrap'; import { SubmitButtonUnwrap } from '../unwrap-form-controls/submit-button-unwrap'; +import { MATOMO_CLICK_EVENTS } from 'config'; export const UnwrapForm: FC = memo(() => { return ( @@ -22,7 +23,7 @@ export const UnwrapForm: FC = memo(() => { - + diff --git a/features/wsteth/wrap/wrap-form/wrap-form.tsx b/features/wsteth/wrap/wrap-form/wrap-form.tsx index 2376174ac..c37634888 100644 --- a/features/wsteth/wrap/wrap-form/wrap-form.tsx +++ b/features/wsteth/wrap/wrap-form/wrap-form.tsx @@ -12,6 +12,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 { MATOMO_CLICK_EVENTS } from 'config'; export const WrapForm: React.FC = memo(() => { return ( @@ -25,7 +26,7 @@ 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 df9479b66..ecc82ab91 100644 --- a/shared/banners/l2-banner/l2-banner.tsx +++ b/shared/banners/l2-banner/l2-banner.tsx @@ -4,11 +4,10 @@ import { Wrapper, L2Icons, TextWrap, - ButtonWrap, ButtonLinkWrap, ButtonStyle, - ContentWrap, TextHeader, + FooterWrap, } from './styles'; type L2BannerProps = { @@ -35,27 +34,21 @@ export const L2Banner = ({ return ( - - {title} - {text} - - - - {buttonText} - - - - - + {title} + {text} + + + + + {buttonText} + + + ); diff --git a/shared/banners/l2-banner/styles.ts b/shared/banners/l2-banner/styles.ts index 6f50639d4..b75261609 100644 --- a/shared/banners/l2-banner/styles.ts +++ b/shared/banners/l2-banner/styles.ts @@ -5,14 +5,19 @@ import Icons from 'assets/icons/l2-swap.svg'; export const Wrapper = styled.div` position: relative; display: flex; + flex-direction: column; text-align: left; - align-items: center; padding: ${({ theme }) => theme.spaceMap.lg}px; border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - gap: 20px; + gap: 10px; overflow: hidden; background-color: #07080c; - background: radial-gradient(120% 180% at 100% 100%, #62c4fb 0%, #112dbf 100%); + 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} { @@ -30,22 +35,21 @@ export const L2Icons = styled.img.attrs({ src: Icons, alt: '', })` - position: relative; display: block; - width: 44px; - height: 120px; + width: 110px; + height: 32px; `; -export const ContentWrap = styled.div` - width: 100%; - height: 100%; - box-sizing: border-box; +export const FooterWrap = styled.div` + display: flex; + align-items: center; + justify-content: space-between; `; export const TextHeader = styled.div` margin-bottom: 4px; font-size: 14px; - line-height: 24px; + line-height: 16px; font-weight: 700; color: #fff; `; @@ -59,11 +63,6 @@ export const TextWrap = styled.div` position: relative; `; -export const ButtonWrap = styled.div` - display: flex; - margin-top: 12px; -`; - export const ButtonLinkWrap = styled.a` display: block; @@ -77,12 +76,11 @@ export const ButtonLinkWrap = styled.a` `; export const ButtonStyle = styled(Button)` - background-color: #fff; padding: 7px 16px; font-size: 12px; line-height: 20px; - @media (max-width: 396px) { + ${({ theme }) => theme.mediaQueries.sm} { display: none; } `; diff --git a/shared/banners/l2-low-fee/l2-low-fee.tsx b/shared/banners/l2-low-fee/l2-low-fee.tsx index f46f188cc..a875bf680 100644 --- a/shared/banners/l2-low-fee/l2-low-fee.tsx +++ b/shared/banners/l2-low-fee/l2-low-fee.tsx @@ -19,8 +19,8 @@ export const L2LowFee: React.FC = ({ token }) => { }, [isStETH]); const text = isStETH - ? 'Learn about Lido on L2 opportunities on Arbitrum, Optimism, and Base to enjoy reduced gas fees in DeFi' - : 'Bridge wstETH to Arbitrum, Optimism and Base to enjoy low gas fees and enhanced opportunities in DeFi'; + ? 'Learn about Lido on L2 opportunities on Arbitrum, Optimism, Base and zkSync to enjoy reduced gas fees in DeFi' + : 'Bridge wstETH to Arbitrum, Optimism, Base and zkSync to enjoy low gas fees and enhanced opportunities in DeFi'; return ( trackEvent(...MATOMO_CLICK_EVENTS.l2BannerWrap); +type L2WstethProps = { + matomoEventLink: + | typeof MATOMO_CLICK_EVENTS.l2BannerWrap + | typeof MATOMO_CLICK_EVENTS.l2BannerUnwrap; +}; -export const L2Wsteth = () => { +export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => { + const linkClickHandler = useCallback( + () => trackEvent(...matomoEventLink), + [matomoEventLink], + ); return ( - Enjoy lower gas fees and DeFi opportunities using wstETH - across Arbitrum, Optimism and Base. + across Arbitrum, Optimism, Base and zkSync. - - Learn More - + + + + Learn More + + ); }; diff --git a/shared/banners/l2-wsteth/styles.ts b/shared/banners/l2-wsteth/styles.ts index 185341a5d..b4555c8bf 100644 --- a/shared/banners/l2-wsteth/styles.ts +++ b/shared/banners/l2-wsteth/styles.ts @@ -1,16 +1,16 @@ import styled from 'styled-components'; import { Button } from '@lidofinance/lido-ui'; -import Icons from 'assets/icons/l2-wsteth.svg'; +import Icons from 'assets/icons/l2-swap.svg'; export const Banner = styled.div` - height: 112px; position: relative; display: flex; + flex-direction: column; text-align: left; align-items: center; padding: ${({ theme }) => theme.spaceMap.lg}px; border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px; - gap: 20px; + gap: 10px; overflow: hidden; background-color: #07080c; background: radial-gradient( @@ -30,10 +30,9 @@ export const L2Icons = styled.img.attrs({ src: Icons, alt: '', })` - position: relative; display: block; - width: 28px; - height: 72px; + width: 110px; + height: 32px; `; export const LinkButton = styled(Button)` @@ -61,3 +60,10 @@ export const OverlayLink = styled.a` export const TextContent = styled.p` color: var(--lido-color-primaryContrast); `; + +export const FooterWrapper = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +`;