Merge pull request #887 from spectrum-finance/fix/improve-lbsp-apr

fix: improved LBSP APR View
spectrum-finance · Aug 7, 2023 · 18ce27d · 18ce27d
2 parents 71162bd + aaaeb9b
commit 18ce27d
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 38 deletions.
diff --git a/public/spectrum-finance-token-logo.svg b/public/spectrum-finance-token-logo.svg
diff --git a/src/components/LbspFaqModal/LbspFaqModal.tsx b/src/components/LbspFaqModal/LbspFaqModal.tsx
@@ -38,16 +38,24 @@ export const LbspFaqModal = () => {
   const questions = useMemo(
     () => [
       {
-        question: t`What is Liquidity Bootstrapping Stake Pool?`,
+        question: t`What is Liquidity Bootstrapping Stake Pool (LBSP)?`,
         content: t`The Liquidity Bootstrapping Stake Pool (LBSP) is an incentive program for liquidity providers, rewarding them with SPF utility tokens in exchange for providing liquidity.`,
       },
+      {
+        question: t`What is the reward for participation?`,
+        content: t`The reward for participation is SPF utility token. The LBSP program is the largest SPF token distribution event.`,
+      },
+      {
+        question: t`What’s the utility of the SPF token?`,
+        content: t`SPF is a cross-chain token whose main utility is to secure Spectrum Network PoS consensus. Spectrum Network is a trustless cross-chain messaging protocol that is currently in an active development stage. However, while Spectrum Network is under development, users can pay execution fees using the SPF on Layer 1 AMM protocols by Spectrum Finance.`,
+      },
       {
         question: t`How do I participate in the LBSP program?`,
         content: t`To participate in the program you need to provide liquidity to any LBSP-labeled liquidity pool using this interface.`,
       },
       {
-        question: t`How does the LBSP program work technically?`,
-        content: t`Cardano PoS blockchain makes it possible to delegate and stake ADA not only using a wallet but also from a smart contract. All Spectrum Finance Pool smart contracts that represent liquidity pools in the system delegate ADA to Liquidity Bootstrapping Stake Pools. These stake pools generate blocks and ADA rewards for the project’s treasury and for ADA/SPF liquidity pool. In exchange, liquidity providers are rewarded with SPF utility tokens.`,
+        question: t`Why do I participate in the LBSP program?`,
+        content: t`The LBSP program is the most important step in SPF token distribution which opens the opportunity for the community to obtain a large portion of the supply. In the future, the only way to get the token will be staking on the PoS consensus of the Spectrum Network cross-chain messaging protocol.`,
       },
       {
         question: t`How does the reward mechanism work for the LBSP program?`,
@@ -131,34 +139,8 @@ export const LbspFaqModal = () => {
         ),
       },
       {
-        question: t`Can I participate by only delegating ADA to ISPO without liquidity provision?`,
-        content: (
-          <>
-            <Trans>
-              Yes, it is possible, but the reward per epoch will be lower than
-              for liquidity provision. The rewarding formula for standard ISPO
-              is delegated_ada * 0.006 per epoch. Find the
-            </Trans>{' '}
-            <Typography.Link
-              href="https://cardanoscan.io/pool/27eba5dbeb2b52f5613aa452cf54cab7f9894538d6efb7d271ccc36f"
-              target="_blank"
-            >
-              <Trans>SPF0</Trans>
-            </Typography.Link>{' '}
-            <Trans>
-              stake pool in any wallet app and delegate your ADA there to get
-              rewarded.
-            </Trans>
-          </>
-        ),
-      },
-      {
-        question: t`What’s the utility of the SPF token?`,
-        content: t`SPF is a cross-chain token whose main utility is to secure Spectrum Network PoS consensus. Spectrum Network is a trustless cross-chain messaging protocol that is currently in an active development stage. However, while Spectrum Network is under development, users can pay execution fees using the SPF on Layer 1 AMM protocols by Spectrum Finance.`,
-      },
-      {
-        question: t`Why do I participate in the LBSP program?`,
-        content: t`The LBSP program is the most important step in SPF token distribution which opens the opportunity for the community to obtain a large portion of the supply. In the future, the only way to get the token will be staking on the PoS consensus of the Spectrum Network cross-chain messaging protocol.`,
+        question: t`How does the LBSP program work technically?`,
+        content: t`Cardano PoS blockchain makes it possible to delegate and stake ADA not only using a wallet but also from a smart contract. All Spectrum Finance Pool smart contracts that represent liquidity pools in the system delegate ADA to Liquidity Bootstrapping Stake Pools. These stake pools generate blocks and ADA rewards for the project’s treasury and for ADA/SPF liquidity pool. In exchange, liquidity providers are rewarded with SPF utility tokens.`,
       },
     ],
     [],

diff --git a/src/components/SpfLogo/SpfLogo.tsx b/src/components/SpfLogo/SpfLogo.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+interface SpfLogoProps {
+  w?: number;
+  h?: number;
+}
+
+export const SpfLogo: FC<SpfLogoProps> = ({ w = 24, h = 24 }) => {
+  return (
+    <img
+      style={{ display: 'block' }}
+      src="/spectrum-finance-token-logo.svg"
+      alt="SPF Logo"
+      width={w}
+      height={h}
+    />
+  );
+};
diff --git a/...sOrPositionsColumns/columns/AprColumn/CardanoAprColumnContent/CardanoAprColumnContent.tsx b/...sOrPositionsColumns/columns/AprColumn/CardanoAprColumnContent/CardanoAprColumnContent.tsx
@@ -1,10 +1,12 @@
-import { Divider, Flex, Typography } from '@ergolabs/ui-kit';
+import { Divider, Flex, Modal, Typography } from '@ergolabs/ui-kit';
 import { Trans } from '@lingui/macro';
 import { FC } from 'react';
 
 import { useObservable } from '../../../../../../../../common/hooks/useObservable';
 import { AmmPool } from '../../../../../../../../common/models/AmmPool';
 import { InfoTooltip } from '../../../../../../../../components/InfoTooltip/InfoTooltip';
+import { LbspFaqModal } from '../../../../../../../../components/LbspFaqModal/LbspFaqModal.tsx';
+import { SpfLogo } from '../../../../../../../../components/SpfLogo/SpfLogo.tsx';
 import { isLbspAmmPool } from '../../../../../../../../utils/lbsp.ts';
 import { calculateLbspApr } from './calculateLbspApr';
 
@@ -20,7 +22,7 @@ const LbspTooltipContent: FC<LbspTooltipContentProps> = ({
   swapApr,
 }) => {
   return (
-    <Flex col width={184}>
+    <Flex col width={200}>
       <Typography.Body tooltip>
         <Trans>Total APR</Trans>
       </Typography.Body>
@@ -43,15 +45,35 @@ const LbspTooltipContent: FC<LbspTooltipContentProps> = ({
         </Flex.Item>
       </Flex.Item>
       <Flex.Item display="flex">
-        <Flex.Item width={65} marginRight={1}>
+        <Flex.Item width={65}>
           <Typography.Body tooltip size="small">
             <Trans>LBSP APR:</Trans>
           </Typography.Body>
         </Flex.Item>
-        <Flex.Item flex={1}>
-          <Typography.Body tooltip strong>
-            {lbspApr ? `${lbspApr.toFixed(2)}%` : '—'}
-          </Typography.Body>
+        <Flex.Item display="flex" align="center" flex={1}>
+          <Flex.Item marginRight={1}>
+            <SpfLogo w={16} h={16} />
+          </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>