chore: zero copy changes (#1134)

Author: creed-victor

.changeset/hot-pens-compare.md

@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+SOV-5296: zero copy changes

apps/frontend/src/app/2_molecules/CTA/CTA.tsx

@@ -1,10 +1,13 @@
 import React, { FC } from 'react';
 
+import classNames from 'classnames';
+
 import { Badge, BadgeStyle, Button, ButtonStyle, Paragraph } from '@sovryn/ui';
 
 type CTAProps = {
   index: number;
   backgroundImage: string;
+  imageClass?: string;
   title: string;
   description: string;
   action: string;
@@ -24,6 +27,7 @@ export const CTA: FC<CTAProps> = ({
   badges,
   disableCTA = false,
   href,
+  imageClass,
 }) => (
   <div
     key={index}
@@ -44,10 +48,13 @@ export const CTA: FC<CTAProps> = ({
     <img
       src={backgroundImage}
       alt={title}
-      className="absolute top-0 right-0 md:max-w-none max-w-14"
+      className={classNames(
+        'absolute top-0 right-0 md:max-w-none max-w-14 z-0',
+        imageClass,
+      )}
     />
     <Paragraph
-      className="mb-6 font-medium text-sm xl:max-w-36 xl:pr-0 pr-12"
+      className="mb-6 font-medium text-sm xl:max-w-36 xl:pr-0 pr-12 relative z-2"
       children={title}
     />
     <Paragraph

apps/frontend/src/app/5_pages/LandingPage/components/Banner/Banner.tsx

@@ -3,18 +3,13 @@ import React, { FC } from 'react';
 import { t } from 'i18next';
 import Carousel from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
-import { Button, ButtonSize, ButtonStyle } from '@sovryn/ui';
-
-import { LAUNCHPAD_LINKS } from '../../../../../constants/links';
 import { translations } from '../../../../../locales/i18n';
 import styles from './Banner.module.css';
 import { LandingPromoCard } from './components/LandingPromoCard/LandingPromoCard';
 
 export const Banner: FC = () => {
-  const navigate = useNavigate();
-
   return (
     <div className="w-full relative pb-16">
       <Carousel
@@ -33,44 +28,27 @@ export const Banner: FC = () => {
         swipeable
         className="static"
         renderDotsOutside
-        showDots
+        // showDots
         autoPlay={false} // Needs to be true when we have more than 1 promo
         dotListClass={styles.dot}
         autoPlaySpeed={15000}
-        infinite
+        // infinite
       >
         <LandingPromoCard
-          heading={t(translations.landingPage.promotions.originsLaunch.title)}
-          description={t(
-            translations.landingPage.promotions.originsLaunch.description,
+          heading={t(
+            translations.landingPage.promotions.zeroInterestLoans.title,
           )}
-          actions={
-            <>
-              <Button
-                style={ButtonStyle.secondary}
-                size={ButtonSize.large}
-                text={t(translations.landingPage.promotions.originsLaunch.cta)}
-                href={LAUNCHPAD_LINKS.ORIGINS_CLAIM}
-                hrefExternal
-              />
-            </>
-          }
-          className="border-primary"
-        />
-        <LandingPromoCard
-          heading={t(translations.landingPage.promotions.bosLaunch.title)}
           description={t(
-            translations.landingPage.promotions.bosLaunch.description,
+            translations.landingPage.promotions.zeroInterestLoans.description,
           )}
           actions={
             <>
-              <Button
-                style={ButtonStyle.secondary}
-                size={ButtonSize.large}
-                text={t(translations.landingPage.promotions.bosLaunch.cta)}
-                onClick={() => navigate('/earn/staking')}
-                hrefExternal
-              />
+              <Link
+                to="/borrow/line-of-credit"
+                className="inline-flex box-border items-center justify-center text-center border font-body font-semibold no-underline rounded cursor-pointer px-5 py-2  bg-gray-80 border-gray-50 text-gray-10 text-sm hover:bg-gray-50"
+              >
+                {t(translations.landingPage.promotions.zeroInterestLoans.cta)}
+              </Link>
             </>
           }
           className="border-primary"

apps/frontend/src/app/5_pages/LandingPage/components/QuickLaunch/QuickLaunch.tsx

@@ -11,20 +11,17 @@ import { Chains } from '../../../../../config/chains';
 import { CTA } from '../../../../2_molecules/CTA/CTA';
 import borrowSovryn from '../../../../../assets/images/QuickLaunch/Borrow with Sovryn.svg';
 import comingSoon from '../../../../../assets/images/QuickLaunch/Coming soon.svg';
-import depositAMM from '../../../../../assets/images/QuickLaunch/Deposit in AMM.svg';
 import lendDLLR from '../../../../../assets/images/QuickLaunch/Lend DLLR.svg';
-import originsLaunch from '../../../../../assets/images/QuickLaunch/Origins Launch.svg';
 import passiveYield from '../../../../../assets/images/QuickLaunch/Passive yield.svg';
 import stakeSOV from '../../../../../assets/images/QuickLaunch/Stake SOV.svg';
 import tradeRunes from '../../../../../assets/images/QuickLaunch/Trade Runes.svg';
-import { LAUNCHPAD_LINKS } from '../../../../../constants/links';
+import zero from '../../../../../assets/images/QuickLaunch/Zero.png';
 import { useCurrentChain } from '../../../../../hooks/useChainStore';
 import { translations } from '../../../../../locales/i18n';
 import { COMMON_SYMBOLS } from '../../../../../utils/asset';
 import { isBobChain, isRskChain } from '../../../../../utils/chain';
 import { formatValue } from '../../../../../utils/math';
 import { useGetNextSupplyInterestRate } from '../../../LendPage/hooks/useGetNextSupplyInterestRate';
-import { useGetReturnRates } from '../../../MarketMakingPage/hooks/useGetReturnRates';
 import { useGetStakingStatistics } from '../../../StakePage/components/StakingStatistics/hooks/useGetStakingStatistics';
 import styles from './QuickLaunch.module.css';
 
@@ -35,32 +32,18 @@ export const QuickLaunch: FC = () => {
   const chainId = useCurrentChain();
   const { maxStakingApr } = useGetStakingStatistics();
   const { interestRate } = useGetNextSupplyInterestRate(COMMON_SYMBOLS.DLLR);
-  const { rates } = useGetReturnRates();
-
-  const maxRate = useMemo(() => {
-    let maxRewards = '0';
-    rates.forEach(rate => {
-      if (Number(rate.beforeRewards) > Number(maxRewards)) {
-        maxRewards = rate.beforeRewards;
-      }
-    });
-
-    return maxRewards;
-  }, [rates]);
 
   const options = useMemo(
     () => [
       {
-        title: t(pageTranslations.quickLaunch.originsLaunchpad.title, {
+        title: t(pageTranslations.quickLaunch.zero.title, {
           amount: formatValue(maxStakingApr, 2),
         }),
-        description: t(
-          pageTranslations.quickLaunch.originsLaunchpad.description,
-        ),
-        action: t(pageTranslations.quickLaunch.originsLaunchpad.action),
-        href: LAUNCHPAD_LINKS.ORIGINS_CLAIM,
-        url: noop,
-        backgroundImage: originsLaunch,
+        description: t(pageTranslations.quickLaunch.zero.description),
+        action: t(pageTranslations.quickLaunch.zero.action),
+        url: () => navigate('/borrow/line-of-credit'),
+        backgroundImage: zero,
+        imageClass: 'w-16 top-5 right-5',
         chains: [Chains.RSK],
       },
       {
@@ -73,16 +56,6 @@ export const QuickLaunch: FC = () => {
         backgroundImage: stakeSOV,
         chains: [Chains.RSK],
       },
-      {
-        title: t(pageTranslations.quickLaunch.earn.title, {
-          amount: formatValue(maxRate, 2),
-        }),
-        description: t(pageTranslations.quickLaunch.earn.description),
-        action: t(pageTranslations.quickLaunch.earn.action),
-        url: () => navigate('/earn/market-making'),
-        backgroundImage: depositAMM,
-        chains: [Chains.RSK],
-      },
       {
         title: t(pageTranslations.quickLaunch.lend.title, {
           amount: formatValue(interestRate, 2),
@@ -135,7 +108,7 @@ export const QuickLaunch: FC = () => {
         disable: true,
       },
     ],
-    [interestRate, maxRate, maxStakingApr, navigate],
+    [interestRate, maxStakingApr, navigate],
   );
 
   const filteredOptions = useMemo(() => {
@@ -194,9 +167,10 @@ export const QuickLaunch: FC = () => {
             title={option.title}
             description={option.description}
             action={option.action}
-            href={option.href}
+            // href={option.href}
             navigateTo={option.url}
             disableCTA={option.disable}
+            imageClass={option.imageClass}
           />
         ))}
       </Carousel>

apps/frontend/src/app/5_pages/ZeroPage/ZeroPage.tsx

@@ -185,6 +185,7 @@ const ZeroPage: FC<ZeroPageProps> = ({ deferred: [price] }) => {
           <div className="flex-col-reverse lg:flex-row flex items-stretch md:p-4 md:bg-gray-90 rounded gap-9 md:gap-20">
             <div className="md:min-w-[23rem] min-w-auto">
               <SystemStats />
+              <p>hahaha</p>
             </div>
             <div className="flex-1 flex flex-col">
               <Paragraph
@@ -201,6 +202,16 @@ const ZeroPage: FC<ZeroPageProps> = ({ deferred: [price] }) => {
             </div>
           </div>
 
+          <p className="mt-4 px-2">
+            <a
+              href="https://wiki.sovryn.com/en/sovryn-dapp/subprotocols/zero-zusd"
+              target="_blank"
+              rel="nofollow noreferrer"
+            >
+              Learn More
+            </a>
+          </p>
+
           <Dialog width={DialogSize.md} isOpen={open} disableFocusTrap>
             <DialogHeader
               title={

apps/frontend/src/assets/images/QuickLaunch/Zero.png

@@ -508,6 +508,11 @@
                 "description": "Earn a share of Sovryn’s revenue & vote on key decisions in Bitocracy.",
                 "action": "Stake SOV"
             },
+            "zero": {
+                "title": "0% Interest Loan",
+                "description": "Just a small origination fee and the rest is free forever. BTC collateral.",
+                "action": "Sovryn Zero"
+            },
             "earn": {
                 "title": "Earn up to {{amount}}% APR in AMM",
                 "description": "Deposit in the AMM pools and earn from trades.",
@@ -585,6 +590,11 @@
                 "title": "BOS CLAIMS ARE OPEN",
                 "description": "Claim your BOS tokens on Sovryn Origin - the multichain launchpad!",
                 "cta": "Claim $BOS"
+            },
+            "zeroInterestLoans": {
+                "title": "0% INTEREST LOANS",
+                "description": "Take a loan with Sovryn Zero at 0% interest. ",
+                "cta": "Sovryn Zero"
             }
         },
         "titleSection": {