SOV-2021: update Promo cards display (#2516)

* feat: update Promo cards on D1 Yield Farm * fix: update promotion card * chore: add getAmmHistory utility function * chore: remove outdated localistions --------- Co-authored-by: soulBit <[email protected]>
DistributedCollective · Apr 5, 2023 · 1f85dbe · 1f85dbe
1 parent 0c4c993
commit 1f85dbe
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 73 deletions.
diff --git a/src/app/components/Promotions/components/PromotionCard/index.module.scss b/src/app/components/Promotions/components/PromotionCard/index.module.scss
@@ -11,7 +11,7 @@
 }
 
 .cardTextTitle {
-  @apply tw-text-3xl tw-tracking-normal tw-font-semibold;
+  @apply tw-text-2xl tw-tracking-normal tw-font-semibold;
 
   line-height: 1.875rem;
 }

diff --git a/src/app/components/Promotions/components/PromotionCard/index.tsx b/src/app/components/Promotions/components/PromotionCard/index.tsx
@@ -1,5 +1,5 @@
 import { SpotPairType } from 'app/pages/SpotTradingPage/types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { Asset } from 'types';
@@ -15,6 +15,7 @@ import { translations } from 'locales/i18n';
 import { AssetsDictionary } from 'utils/dictionaries/assets-dictionary';
 import arrowForward from 'assets/images/arrow_forward.svg';
 import styles from './index.module.scss';
+import { AmmHistory } from 'app/pages/LiquidityMining/components/MiningPool/types';
 
 interface IPromotionCardProps {
   appSection: AppSection;
@@ -32,6 +33,8 @@ interface IPromotionCardProps {
   linkSpotTradingPairType?: SpotPairType;
   className?: string;
   imageClassName?: string;
+  ammData: AmmHistory;
+  poolTokenA: string;
 }
 
 export const PromotionCard: React.FC<IPromotionCardProps> = ({
@@ -50,11 +53,21 @@ export const PromotionCard: React.FC<IPromotionCardProps> = ({
   linkSpotTradingPairType,
   className,
   imageClassName,
+  ammData,
+  poolTokenA,
 }) => {
   const { t } = useTranslation();
   const sectionTitle = getSectionTitle(appSection);
   const linkPathname = getLinkPathname(appSection);
 
+  const apy = useMemo(() => {
+    if (!poolTokenA || !ammData) {
+      return '';
+    }
+    return ammData?.data[poolTokenA][ammData?.data[poolTokenA].length - 1]
+      .APY_pc;
+  }, [ammData, poolTokenA]);
+
   return (
     <div className={classNames(styles.cardItem, className)}>
       <Link
@@ -101,7 +114,9 @@ export const PromotionCard: React.FC<IPromotionCardProps> = ({
               </div>
             </div>
             <div className="tw-relative">
-              <div className={styles.sectionTitle}>{sectionTitle}</div>
+              <div className={styles.sectionTitle}>
+                {apy ? t(translations.promotions.apy, { apy }) : sectionTitle}
+              </div>
 
               <div className="tw-max-w-56">
                 <div className={styles.cardTextTitle}>{title}</div>

diff --git a/src/app/components/Promotions/components/PromotionCard/utils.tsx b/src/app/components/Promotions/components/PromotionCard/utils.tsx
@@ -13,6 +13,9 @@ import imgTurquoiseBg from 'assets/images/promoCards/Turquoise.svg';
 import { AppSection, PromotionColor } from './types';
 import { Trans } from 'react-i18next';
 import { translations } from 'locales/i18n';
+import { LiquidityPoolDictionary } from 'utils/dictionaries/liquidity-pool-dictionary';
+import { Asset } from 'types';
+import { AmmHistory } from 'app/pages/LiquidityMining/components/MiningPool/types';
 
 export const getSectionTitle = (section: AppSection): JSX.Element => {
   switch (section) {
@@ -101,3 +104,11 @@ export const getLinkPathname = (section: AppSection): string => {
       return 'swap';
   }
 };
+
+export const getAmmHistory = (
+  ammData: any,
+  asset1: Asset,
+  asset2: Asset,
+): AmmHistory =>
+  ammData &&
+  ammData[LiquidityPoolDictionary.get(asset1, asset2).converter.toLowerCase()];
diff --git a/src/app/components/Promotions/index.tsx b/src/app/components/Promotions/index.tsx
@@ -8,7 +8,13 @@ import { useTranslation } from 'react-i18next';
 import { translations } from 'locales/i18n';
 import { LiquidityPoolDictionary } from 'utils/dictionaries/liquidity-pool-dictionary';
 import styles from './index.module.scss';
-import { learnMoreYieldFarming } from 'utils/classifiers';
+import {
+  ammServiceUrl,
+  currentChainId,
+  learnMoreYieldFarming,
+} from 'utils/classifiers';
+import { useFetch } from 'app/hooks/useFetch';
+import { getAmmHistory } from './components/PromotionCard/utils';
 
 type PromotionsProps = {
   className?: string;
@@ -21,6 +27,7 @@ export const Promotions: React.FC<PromotionsProps> = ({
   cardClassName,
   cardImageClassName,
 }) => {
+  const { value: ammData } = useFetch(`${ammServiceUrl[currentChainId]}/amm`);
   const { t } = useTranslation();
 
   return (
@@ -49,6 +56,10 @@ export const Promotions: React.FC<PromotionsProps> = ({
             linkDataActionId={`landing-promo-learnmore-${Asset.DLLR}`}
             className={cardClassName}
             imageClassName={cardImageClassName}
+            ammData={getAmmHistory(ammData, Asset.DLLR, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.DLLR, Asset.RBTC).poolTokenA
+            }
           />
           <PromotionCard
             appSection={AppSection.YieldFarm}
@@ -63,6 +74,10 @@ export const Promotions: React.FC<PromotionsProps> = ({
             linkDataActionId={`landing-promo-learnmore-${Asset.SOV}`}
             className={cardClassName}
             imageClassName={cardImageClassName}
+            ammData={getAmmHistory(ammData, Asset.SOV, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.SOV, Asset.RBTC).poolTokenA
+            }
           />
           <PromotionCard
             appSection={AppSection.YieldFarm}
@@ -77,6 +92,10 @@ export const Promotions: React.FC<PromotionsProps> = ({
             linkDataActionId={`landing-promo-learnmore-${Asset.XUSD}`}
             className={cardClassName}
             imageClassName={cardImageClassName}
+            ammData={getAmmHistory(ammData, Asset.XUSD, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.XUSD, Asset.RBTC).poolTokenA
+            }
           />
         </PromotionsCarousel>
       </div>

diff --git a/src/app/pages/LiquidityMining/index.tsx b/src/app/pages/LiquidityMining/index.tsx
@@ -28,6 +28,7 @@ import {
 } from '../../components/Promotions/components/PromotionCard/types';
 import { PromotionCard } from 'app/components/Promotions/components/PromotionCard';
 import { PromotionsCarousel } from 'app/components/Promotions/components/PromotionsCarousel';
+import { getAmmHistory } from 'app/components/Promotions/components/PromotionCard/utils';
 
 const pools = LiquidityPoolDictionary.list();
 
@@ -98,6 +99,10 @@ export function LiquidityMining() {
             linkAsset={LiquidityPoolDictionary.get(Asset.DLLR, Asset.RBTC)?.key}
             linkDataActionId={`yieldfarm-promo-learnmore-${Asset.DLLR}`}
             imageClassName="tw-transform tw-scale-85"
+            ammData={getAmmHistory(ammData, Asset.DLLR, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.DLLR, Asset.RBTC).poolTokenA
+            }
           />
           <PromotionCard
             appSection={AppSection.YieldFarm}
@@ -113,6 +118,10 @@ export function LiquidityMining() {
             linkAsset={LiquidityPoolDictionary.get(Asset.SOV, Asset.RBTC)?.key}
             linkDataActionId={`yieldfarm-promo-learnmore-${Asset.SOV}`}
             imageClassName="tw-transform tw-scale-85"
+            ammData={getAmmHistory(ammData, Asset.SOV, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.SOV, Asset.RBTC).poolTokenA
+            }
           />
           <PromotionCard
             appSection={AppSection.YieldFarm}
@@ -128,6 +137,10 @@ export function LiquidityMining() {
             linkAsset={LiquidityPoolDictionary.get(Asset.XUSD, Asset.RBTC)?.key}
             linkDataActionId={`yieldfarm-promo-learnmore-${Asset.XUSD}`}
             imageClassName="tw-transform tw-scale-85"
+            ammData={getAmmHistory(ammData, Asset.XUSD, Asset.RBTC)}
+            poolTokenA={
+              LiquidityPoolDictionary.get(Asset.XUSD, Asset.RBTC).poolTokenA
+            }
           />
           {/* <PromotionCard
             appSection={AppSection.YieldFarm}

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -2710,35 +2710,36 @@
   },
   "promotions": {
     "card1": {
-      "title": "5K SOV rewards",
+      "title": "5K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide a 1:1 ratio of MYNT and RBTC to the MYNT/BTC AMM liquidity pool and instantly start accruing your share of 5,000 SOV rewards."
     },
     "card2": {
-      "title": "2.5K SOV rewards",
+      "title": "2.5K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide any amount of XUSD to the XUSD lending pool and instantly start accruing your share of 2,500 SOV rewards."
     },
     "card3": {
-      "title": "15K SOV rewards",
+      "title": "15K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide a 1:1 ratio of XUSD and RBTC to the XUSD/RBTC AMM liquidity pool and instantly start accruing your share of 15,000 SOV rewards."
     },
     "card4": {
-      "title": "15K SOV rewards",
+      "title": "15K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide a 1:1 ratio of SOV and RBTC to the SOV/RBTC AMM liquidity pool and instantly start accruing your share of 15,000 SOV rewards."
     },
     "card5": {
-      "title": "5K SOV rewards",
+      "title": "5K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide a 1:1 ratio of ETH and RBTC to the ETH/RBTC AMM liquidity pool and instantly start accruing your share of 5,000 SOV rewards."
     },
     "card6": {
-      "title": "30K SOV rewards",
+      "title": "30K SOV weekly rewards",
       "duration": "Ongoing weekly rewards",
       "text": "Provide a 1:1 ratio of DLLR and RBTC to the DLLR/RBTC AMM liquidity pool and instantly start accruing your share of 30,000 SOV rewards."
-    }
+    },
+    "apy": "{{apy}}% current APY"
   },
   "liquidityMining": {
     "deposit": "Deposit",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -673,17 +673,7 @@
       }
     },
     "promotions": {
-      "title": "Promociones en SOV",
-      "p1": {
-        "title": "Ganga de 50k SOV a Repartir en Abril en Pro del Tanque BTC/USDT",
-        "text": "Conviértete en un reputado y reverenciado Proveedor de Liquidez de Sovryn al aportar tus criptos al tanque. Entre más tiempo dejes allí tu aporte mayores serán tus ganancias en SOV.",
-        "cta": "Sovryn se vuelve agrrrrrrrr"
-      },
-      "p2": {
-        "title": "Ganga de 75k SOV a Repartir en Abril en Pro del Tanque BTC/SOV",
-        "text": "El tanque de liquidez SOV/BTC ya está abierto al público, dándote la oportunidad de tomar parte en nuestra más grande distribución de liquidez hasta la fecha.",
-        "cta": "He aquí cómo puedes participar"
-      }
+      "title": "Promociones en SOV"
     },
     "features": {
       "title": "Características del protocolo de Sovryn",

diff --git a/src/locales/fr/translation.json b/src/locales/fr/translation.json
@@ -129,16 +129,6 @@
       "title": "Le trading SOV est maintenant en ligne!"
     },
     "promotions": {
-      "p1": {
-        "cta": "Sovryn va brrrrrrrrrrrrrrr",
-        "text": "Devenez un fournisseur de liquidités Sovryn vénéré et respecté en ajoutant votre crypto à la piscine. Plus vous gardez les fonds dans le pool, plus vous gagnerez de SOV.",
-        "title": "Avril 50k SOV BTC / USDT Pool Loot Drop"
-      },
-      "p2": {
-        "cta": "Voici comment vous entrez",
-        "text": "Le pool de liquidité SOV / BTC est ouvert, vous donnant la chance de participer à notre plus grand concours de liquidité à ce jour.",
-        "title": "Avril 75k SOV BTC / SOV Pool Loot Drop"
-      },
       "title": "Promotions SOV"
     },
     "slippageDialog": {

diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json
@@ -459,26 +459,7 @@
       "lastPrice": "Último preço:"
     },
     "promotions": {
-      "p3": {
-        "cta": "Ganhe agora",
-        "title": "Distribuição de 30K SOVs no pool SOV/RBTC!",
-        "text": "Forneça liquidez no pool SOV/RBTC. Novas promoções semanais serão anunciadas em breve."
-      },
-      "p4": {
-        "cta": "Ganhe agora",
-        "title": "Distribuição de 35K SOVs no pool ETHs/RBTC",
-        "text": "Na primeira semana, $1.2 milhões de SOVs serão distribuídos para os fornecedores de liquidez do AMM. Esta super promoção irá durar 7 dias. Algumas análises indicam que os primeiros participantes terão um retorno 3000%!! O maior rendimento de ETH existente hoje. Haverá novos bônus para as próximas semanas, que serão revisadas e anunciadas no final de cada semana."
-      },
-      "title": "Promoções SOV",
-      "p1": {
-        "title": "Mês de Abril - Distribuição de 50k SOVs no pool BTC/USDT",
-        "text": "Disponibilize a sua cripto no pool de liquidez da Sovryn. Quanto mais tempo deixar os fundos no pool, mais SOVs ganhará.",
-        "cta": "Sovryn go brrrrrrrrrrrrrrr"
-      },
-      "p2": {
-        "title": "Mês de Abril - Distribuição de 75k SOVs no pool BTC/SOV",
-        "cta": "Veja como participar"
-      }
+      "title": "Promoções SOV"
     },
     "features": {
       "marginTrading": {

diff --git a/src/locales/pt_br/translation.json b/src/locales/pt_br/translation.json
@@ -1806,27 +1806,7 @@
       }
     },
     "promotions": {
-      "title": "Promoções SOV",
-      "p1": {
-        "title": "Mês de Abril - Distribuição de 50k SOVs no pool BTC/USDT",
-        "text": "Disponibilize sua cripto no pool de liquidez da Sovryn. Quanto mais tempo você deixar os fundos no pool, mais SOVs você ganhará.",
-        "cta": "Sovryn go brrrrrrrrrrrrrrr"
-      },
-      "p2": {
-        "title": "Mês de Abril - Distribuição de 75k SOVs no pool BTC/SOV",
-        "text": "O pool de liquidez SOV/BTC está aberto, é a sua chance de participar da nossa maior distribuição de SOVs já realizada até o momento..",
-        "cta": "Veja como participar"
-      },
-      "p3": {
-        "title": "Distribuição de 30K SOVs no pool SOV/RBTC!",
-        "text": "Forneça liquidez no pool SOV/RBTC. Novas promoções semanais serão anunciadas em breve.",
-        "cta": "Ganhe agora"
-      },
-      "p4": {
-        "title": "Distribuição de 35K SOVs no pool ETHs/RBTC",
-        "text": "Na primeira semana, $1.2 milhões de SOVs serão distribuídos para os fornecedores de liquidez do AMM. Esta super promoção irá durar 7 dias. Algumas análises indicam que os primeiros participantes terão um retorno 3000%!! O maior rendimento de ETH existente hoje. Haverá novos bônus para as próximas semanas, que serão revisadas e anunciadas no final de cada semana.",
-        "cta": "Ganhe agora"
-      }
+      "title": "Promoções SOV"
     },
     "features": {
       "title": "Como você pode usar a Sovryn",