Merge pull request #207 from lidofinance/develop

Merge develop to main
lidofinance · Jan 16, 2024 · 38c225d · 38c225d
2 parents c6b6d7d + 462d905
commit 38c225d
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/assets/icons/l2-wsteth.svg b/assets/icons/l2-wsteth.svg
diff --git 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(() => {
             </InputWrap>
             <SubmitButtonUnwrap />
           </FormController>
-          <L2Wsteth />
+          <L2Wsteth matomoEventLink={MATOMO_CLICK_EVENTS.l2BannerUnwrap} />
           <UnwrapStats />
           <UnwrapFormTxModal />
         </WrapBlock>

diff --git 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(() => {
             </InputGroupHookForm>
             <SubmitButtonWrap />
           </FormControllerWrap>
-          <L2Wsteth />
+          <L2Wsteth matomoEventLink={MATOMO_CLICK_EVENTS.l2BannerWrap} />
           <WrapFormStats />
           <WrapFormTxModal />
         </WrapBlock>

diff --git 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 (
     <Wrapper data-testid={testidWrap}>
       <ThemeProvider theme={themeDark}>
-        <ContentWrap>
-          <TextHeader>{title}</TextHeader>
-          <TextWrap>{text}</TextWrap>
-          <ButtonWrap>
-            <ButtonLinkWrap
-              href={buttonHref}
-              target="_blank"
-              rel="noopener noreferrer"
-              onClick={onClickButton}
-            >
-              <ButtonStyle
-                data-testid={testidButton}
-                size="sm"
-                color="secondary"
-              >
-                {buttonText}
-              </ButtonStyle>
-            </ButtonLinkWrap>
-          </ButtonWrap>
-        </ContentWrap>
-        <L2Icons />
+        <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>
+        </FooterWrap>
       </ThemeProvider>
     </Wrapper>
   );

diff --git 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
@@ -19,8 +19,8 @@ export const L2LowFee: React.FC<L2LowFeeProps> = ({ 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 (
     <L2Banner

diff --git a/shared/banners/l2-wsteth/l2-wsteth.tsx b/shared/banners/l2-wsteth/l2-wsteth.tsx
@@ -1,32 +1,44 @@
+import { useCallback } from 'react';
 import {
   Banner,
   L2Icons,
   LinkButton,
   TextContent,
   OverlayLink,
+  FooterWrapper,
 } 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);
+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 (
     <Banner data-testid="L2wstETHbanner">
-      <L2Icons />
       <TextContent>
         Enjoy <b>lower gas</b> fees and <b>DeFi opportunities</b> using wstETH
-        across Arbitrum, Optimism and Base.
+        across Arbitrum, Optimism, Base and zkSync.
       </TextContent>
-      <OverlayLink
-        href={L2_DISCOVERY_LINK}
-        onClick={linkClickHandler}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <LinkButton>Learn More</LinkButton>
-      </OverlayLink>
+      <FooterWrapper>
+        <L2Icons />
+        <OverlayLink
+          href={L2_DISCOVERY_LINK}
+          onClick={linkClickHandler}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <LinkButton data-testid="l2WSstethlearnMore">Learn More</LinkButton>
+        </OverlayLink>
+      </FooterWrapper>
     </Banner>
   );
 };