Merge pull request #909 from spectrum-finance/dev-1389-special-reward…

…s-support Special rewards support
spectrum-finance · Sep 22, 2023 · 4e21767 · 4e21767
2 parents ed75278 + fcc629f
commit 4e21767
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 65 deletions.
diff --git a/src/applicationConfig.ts b/src/applicationConfig.ts
@@ -59,6 +59,7 @@ interface ApplicationConfig {
   readonly cardanoAmmSwapsOpenTime: DateTime;
   readonly lbspLiquidityPools: string[];
   readonly lbspBoostedLiquidityPools: string[];
+  readonly specialRewards: string[];
   readonly deprecatedPools: string[];
 }
 
@@ -255,6 +256,9 @@ export const applicationConfig: ApplicationConfig = {
     'dd061b480daddd9a833d2477c791356be4e134a433e19df7eb18be1054554e415f4144415f4e4654',
   ],
   lbspBoostedLiquidityPools: [],
+  specialRewards: [
+    '54ffabdd4c6cb983ea1d0c8c5296aa9d8d5dfaafbf0ff33efc45669b4d41595a5f4144415f4e4654',
+  ],
   deprecatedPools: [
     'c2ea7b366349afda7bab0fbdb712d1e6cec1c91c1cfda21a43998e38436f726e75636f706961735f4144415f4e4654',
     'd8beceb1ac736c92df8e1210fb39803508533ae9573cffeb2b24a839696274635f4144415f4e4654',

diff --git a/src/components/BoostedPoolTag/BoostedPoolTag.tsx b/src/components/BoostedPoolTag/BoostedPoolTag.tsx
@@ -0,0 +1,23 @@
+import { Flex, Tag } from '@ergolabs/ui-kit';
+import { Trans } from '@lingui/macro';
+import { FC } from 'react';
+
+import { AssetInfo } from '../../common/models/AssetInfo.ts';
+import { AssetIcon } from '../AssetIcon/AssetIcon.tsx';
+
+interface BoostedPoolTagProps {
+  asset: AssetInfo;
+}
+
+export const BoostedPoolTag: FC<BoostedPoolTagProps> = ({ asset }) => {
+  return (
+    <Tag color="geekblue">
+      <Flex align="center">
+        <Flex.Item marginRight={1}>
+          <AssetIcon asset={asset} size="extraSmall" />
+        </Flex.Item>
+        <Trans>Boosted</Trans>
+      </Flex>
+    </Tag>
+  );
+};
diff --git a/...sOrPositionsColumns/columns/AprColumn/CardanoAprColumnContent/CardanoAprColumnContent.tsx b/...sOrPositionsColumns/columns/AprColumn/CardanoAprColumnContent/CardanoAprColumnContent.tsx
@@ -1,25 +1,28 @@
-import { Divider, Flex, Modal, Typography } from '@ergolabs/ui-kit';
-import { Trans } from '@lingui/macro';
-import { FC } from 'react';
+import { Divider, Flex, Typography } from '@ergolabs/ui-kit';
+import { t, Trans } from '@lingui/macro';
+import sum from 'lodash/sum';
+import { FC, ReactNode } from 'react';
 
 import { useObservable } from '../../../../../../../../common/hooks/useObservable';
 import { AmmPool } from '../../../../../../../../common/models/AmmPool';
+import { AssetIcon } from '../../../../../../../../components/AssetIcon/AssetIcon.tsx';
 import { InfoTooltip } from '../../../../../../../../components/InfoTooltip/InfoTooltip';
-import { LbspFaqModal } from '../../../../../../../../components/LbspFaqModal/LbspFaqModal.tsx';
 import { SpfLogo } from '../../../../../../../../components/SpfLogo/SpfLogo.tsx';
+import { isSpecialBoostedPool } from '../../../../../../../../utils/specialPools.ts';
 import { calculateLbspApr } from './calculateLbspApr';
 
+type AprElement = {
+  name: string;
+  val: number;
+  logo?: ReactNode;
+  linkElem?: ReactNode;
+};
 interface LbspTooltipContentProps {
-  readonly swapApr: number;
-  readonly lbspApr: number;
+  readonly aprs: Array<AprElement>;
   readonly totalApr: number;
 }
 
-const LbspTooltipContent: FC<LbspTooltipContentProps> = ({
-  lbspApr,
-  totalApr,
-  swapApr,
-}) => {
+const AprTooltipContent: FC<LbspTooltipContentProps> = ({ aprs, totalApr }) => {
   return (
     <Flex col width={200}>
       <Typography.Body tooltip>
@@ -31,57 +34,43 @@ const LbspTooltipContent: FC<LbspTooltipContentProps> = ({
       <Flex.Item marginTop={1} marginBottom={1}>
         <Divider />
       </Flex.Item>
-      <Flex.Item display="flex" marginBottom={1}>
-        <Flex.Item width={65} marginRight={1}>
-          <Typography.Body tooltip size="small">
-            <Trans>Swap Fees:</Trans>
-          </Typography.Body>
-        </Flex.Item>
-        <Flex.Item flex={1}>
-          <Typography.Body tooltip strong>
-            {swapApr ? `${swapApr.toFixed(2)}%` : '—'}
-          </Typography.Body>
-        </Flex.Item>
-      </Flex.Item>
-      <Flex.Item display="flex">
-        <Flex.Item width={65}>
-          <Typography.Body tooltip size="small">
-            <Trans>LBSP APR:</Trans>
-          </Typography.Body>
-        </Flex.Item>
-        <Flex.Item display="flex" align="center" flex={1}>
-          <Flex.Item marginRight={1}>
-            <SpfLogo w={16} h={16} block />
+      {aprs.map((apr, index) => {
+        return (
+          <Flex.Item key={`${index}-apr-row`} display="flex" marginBottom={1}>
+            <Flex.Item marginRight={1} justify="space-between">
+              <Typography.Body tooltip size="small">
+                {apr.name}
+              </Typography.Body>
+            </Flex.Item>
+            {apr.logo ? (
+              <Flex.Item display="flex" align="center" flex={1}>
+                <Flex.Item marginRight={1}>{apr.logo}</Flex.Item>
+                <Flex.Item marginRight={1}>
+                  <Typography.Body tooltip strong>
+                    {apr.val ? apr.val.toFixed(2) : '--'}%
+                  </Typography.Body>
+                </Flex.Item>
+              </Flex.Item>
+            ) : (
+              <Flex.Item flex={1}>
+                <Typography.Body tooltip strong>
+                  {apr.val ? apr.val.toFixed(2) : '--'}%
+                </Typography.Body>
+              </Flex.Item>
+            )}
           </Flex.Item>
+        );
+      })}
 
-          <Flex.Item marginRight={1}>
-            <Typography.Body tooltip strong>
-              {lbspApr ? `${lbspApr.toFixed(2)}%` : '—'}
-            </Typography.Body>
-          </Flex.Item>
-
-          <Typography.Link
-            style={{
-              color: 'var(--spectrum-hint-text)',
-              textDecoration: 'underline',
-              fontSize: '10px',
-            }}
-            onClick={(event) => {
-              event.stopPropagation();
-              Modal.open(() => <LbspFaqModal />);
-            }}
-          >
-            Read more
-          </Typography.Link>
-        </Flex.Item>
-      </Flex.Item>
       <Flex.Item>
         <Typography.Body
           size="small"
           style={{ color: 'var(--spectrum-hint-text)' }}
         >
-          LBSP APR is calculated according to the current SPF price on the Ergo
-          market
+          <Trans>
+            SPF APR is calculated according to the current price on the Ergo
+            market
+          </Trans>
         </Typography.Body>
       </Flex.Item>
     </Flex>
@@ -93,13 +82,34 @@ export interface CardanoAprColumnContent {
   readonly isAllContentTrigger?: boolean;
 }
 
-const CardanoLbspAmmPoolArColumnContent: FC<CardanoAprColumnContent> = ({
+const CardanoLbspAmmPoolAprColumnContent: FC<CardanoAprColumnContent> = ({
   ammPool,
   isAllContentTrigger,
 }) => {
   const [lbspApr] = useObservable(calculateLbspApr(ammPool), [], 0);
   const swapApr = ammPool.yearlyFeesPercent || 0;
-  const totalApr = swapApr + lbspApr;
+
+  const aprs: Array<AprElement> = [
+    {
+      name: t`Trading Fees:`,
+      val: swapApr,
+    },
+    {
+      name: t`LBSP APR:`,
+      val: lbspApr,
+      logo: <SpfLogo w={16} h={16} block />,
+    },
+  ];
+
+  if (isSpecialBoostedPool(ammPool.id)) {
+    aprs.push({
+      name: t`Boosted APR:`,
+      val: 75,
+      logo: <AssetIcon asset={ammPool.y.asset} size="extraSmall" />,
+    });
+  }
+
+  const totalApr = sum(aprs.map((v) => v.val));
 
   return (
     <>
@@ -108,17 +118,16 @@ const CardanoLbspAmmPoolArColumnContent: FC<CardanoAprColumnContent> = ({
           <Flex.Item marginRight={1}>
             <SpfLogo w={16} h={16} block />
           </Flex.Item>
+          {isSpecialBoostedPool(ammPool.id) && (
+            <Flex.Item marginLeft={-2}>
+              <AssetIcon asset={ammPool.y.asset} size="extraSmall" />
+            </Flex.Item>
+          )}
           <InfoTooltip
             width={200}
             placement="top"
             isAllContentTrigger={isAllContentTrigger}
-            content={
-              <LbspTooltipContent
-                totalApr={totalApr}
-                lbspApr={lbspApr}
-                swapApr={swapApr}
-              />
-            }
+            content={<AprTooltipContent aprs={aprs} totalApr={totalApr} />}
           >
             {totalApr.toFixed(2)}%
           </InfoTooltip>
@@ -140,7 +149,7 @@ export const CardanoAprColumnContent: FC<CardanoAprColumnContent> = ({
   isAllContentTrigger,
 }) => {
   return (
-    <CardanoLbspAmmPoolArColumnContent
+    <CardanoLbspAmmPoolAprColumnContent
       isAllContentTrigger={isAllContentTrigger}
       ammPool={ammPool}
     />

diff --git a/src/pages/Liquidity/common/columns/PoolsOrPositionsColumns/columns/PairColumn/PairColumn.tsx b/src/pages/Liquidity/common/columns/PoolsOrPositionsColumns/columns/PairColumn/PairColumn.tsx
@@ -6,13 +6,15 @@ import { useObservable } from '../../../../../../../common/hooks/useObservable';
 import { AmmPool } from '../../../../../../../common/models/AmmPool';
 import { isDeprecatedPool } from '../../../../../../../common/utils/isDeprecatedPool';
 import { AssetPairTitle } from '../../../../../../../components/AssetPairTitle/AssetPairTitle';
+import { BoostedPoolTag } from '../../../../../../../components/BoostedPoolTag/BoostedPoolTag.tsx';
 import { DataTag } from '../../../../../../../components/common/DataTag/DataTag';
 import { DeprecatedPoolTag } from '../../../../../../../components/DeprecatedPoolTag/DeprecatedPoolTag';
 import { FarmsButton } from '../../../../../../../components/FarmsButton/FarmsButton';
 import { IsCardano } from '../../../../../../../components/IsCardano/IsCardano.tsx';
 import { IsErgo } from '../../../../../../../components/IsErgo/IsErgo';
 import { LbspPoolTag } from '../../../../../../../components/LbspPoolTag/LbspPoolTag.tsx';
 import { hasFarmsForPool } from '../../../../../../../network/ergo/lm/api/farms/farms';
+import { isSpecialBoostedPool } from '../../../../../../../utils/specialPools.ts';
 
 export interface PairColumnProps {
   readonly ammPool: AmmPool;
@@ -52,6 +54,12 @@ export const PairColumn: FC<PairColumnProps> = ({ ammPool }) => {
           </Flex.Item>
         </IsCardano>
       )}
+      {isSpecialBoostedPool(ammPool.id) && !s && (
+        <IsCardano>
+          <BoostedPoolTag asset={ammPool.y.asset} />
+        </IsCardano>
+      )}
+
       <IsCardano>
         {isDeprecatedPool(ammPool.id) && <DeprecatedPoolTag />}
       </IsCardano>

diff --git a/src/utils/specialPools.ts b/src/utils/specialPools.ts
@@ -0,0 +1,5 @@
+import { applicationConfig } from '../applicationConfig.ts';
+
+export const isSpecialBoostedPool = (poolId: string) => {
+  return applicationConfig.specialRewards.some((id) => id === poolId);
+};