chore: Update APR

pancakeswap · Jul 17, 2023 · a259083 · a259083
1 parent 49f5365
commit a259083
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 39 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -51,9 +51,9 @@
     "@pancakeswap/v3-sdk": "workspace:*",
     "@pancakeswap/wagmi": "workspace:*",
     "@reduxjs/toolkit": "^1.9.1",
-    "@tanstack/react-query": "^4.28.0",
     "@sentry/nextjs": "^7.52.1",
     "@snapshot-labs/snapshot.js": "^0.4.40",
+    "@tanstack/react-query": "^4.28.0",
     "@vanilla-extract/next-plugin": "^2.1.1",
     "ajv": "^6.12.3",
     "bignumber.js": "^9.0.0",
@@ -75,10 +75,12 @@
     "local-storage": "^2.0.0",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.7.6",
     "next": "13.4.2",
     "next-axiom": "^0.13.0",
     "next-seo": "^5.15.0",
     "next-themes": "^0.2.0",
+    "polished": "^4.2.2",
     "qs": "^6.0.0",
     "react": "^18.2.0",
     "react-countup": "^6.4.0",
@@ -98,16 +100,17 @@
     "styled-system": "^5.1.5",
     "swiper": "^10.0.3",
     "swr": "^2.1.5",
-    "typescript": "^5.1.3",
-    "wagmi": "^1.3.4",
-    "zod": "^3.21.4",
-    "polished": "^4.2.2",
     "tiny-invariant": "^1.1.0",
+    "typescript": "^5.1.3",
     "uuid": "^8.0.0",
-    "viem": "^1.2.9"
+    "viem": "^1.2.9",
+    "wagmi": "^1.3.4",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "13.4.2",
+    "@pancakeswap/next-config": "workspace:*",
+    "@pancakeswap/tsconfig": "workspace:*",
     "@stylelint/postcss-css-in-js": "^0.37.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^13.3.0",
@@ -147,8 +150,6 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "tilg": "^0.1.1",
-    "@pancakeswap/tsconfig": "workspace:*",
-    "@pancakeswap/next-config": "workspace:*",
     "typechain": "^6.1.0",
     "vite-tsconfig-paths": "^4.0.3",
     "vitest": "^0.30.1"

diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx
@@ -19,7 +19,7 @@ import {
 import { useCallback } from 'react'
 import { useTranslation } from '@pancakeswap/localization'
 import { LightCard } from 'components/Card'
-import { Token } from '@pancakeswap/swap-sdk-core'
+import { CurrencyAmount, Percent, Token } from '@pancakeswap/swap-sdk-core'
 import { useFixedStakingContract } from 'hooks/useContract'
 import useCatchTxError from 'hooks/useCatchTxError'
 import { ToastDescriptionWithTx } from 'components/Toast'
@@ -42,21 +42,26 @@ export function FixedStakingActions({
   unlockTime,
   lockPeriod,
   poolIndex,
+  apr,
+  withdrawalFee,
 }: {
   poolIndex: number
   unlockTime: number
   token: Token
   stakePositionUserInfo: StakePositionUserInfo
   lockPeriod: number
+  apr: Percent
+  withdrawalFee: number
 }) {
   const { t } = useTranslation()
-  const stakeModal = useModalV2()
+  const unstakeModal = useModalV2()
   const { fetchWithCatchTxError, loading: pendingTx } = useCatchTxError()
   const fixedStakingContract = useFixedStakingContract()
   const { callWithGasPrice } = useCallWithGasPrice()
   const { toastSuccess } = useToast()
 
   const totalStakedAmount = getBalanceAmount(stakePositionUserInfo.userDeposit, token.decimals)
+  const interestAmount = getBalanceAmount(stakePositionUserInfo.accrueInterest, token.decimals)
 
   const formattedUsdValueStaked = useStablecoinPriceAmount(token, totalStakedAmount.toNumber())
 
@@ -73,12 +78,27 @@ export function FixedStakingActions({
           {t('Your withdrawn request has been submitted.')}
         </ToastDescriptionWithTx>,
       )
-      stakeModal.onDismiss()
+      unstakeModal.onDismiss()
     }
-  }, [callWithGasPrice, fetchWithCatchTxError, fixedStakingContract, stakeModal, t, toastSuccess])
+  }, [callWithGasPrice, fetchWithCatchTxError, fixedStakingContract, unstakeModal, t, toastSuccess])
 
   const shouldUnlock = differenceInMilliseconds(unlockTime * 1_000, new Date())
 
+  const projectedReturnAmount = CurrencyAmount.fromRawAmount(token, stakePositionUserInfo.userDeposit.toString())
+    ?.multiply(lockPeriod)
+    ?.multiply(apr.multiply(lockPeriod).divide(365))
+
+  const feePercent = new Percent(withdrawalFee, 10000)
+
+  const amountDeposit = CurrencyAmount.fromRawAmount(token, stakePositionUserInfo.userDeposit.toString())
+  const accrueInterest = CurrencyAmount.fromRawAmount(token, stakePositionUserInfo.accrueInterest.toString())
+
+  const withdrawFee = amountDeposit.multiply(feePercent).add(accrueInterest)
+
+  const totalGetAmount = shouldUnlock
+    ? amountDeposit.add(accrueInterest)
+    : amountDeposit.add(accrueInterest).subtract(withdrawFee)
+
   return (
     <>
       <BalanceWithActions
@@ -89,11 +109,11 @@ export function FixedStakingActions({
         earnings={totalStakedAmount}
         actions={
           <Flex>
-            <IconButton variant="secondary" onClick={() => stakeModal.setIsOpen(true)} mr="6px">
+            <IconButton variant="secondary" onClick={() => unstakeModal.setIsOpen(true)} mr="6px">
               <MinusIcon color="primary" width="24px" />
             </IconButton>
 
-            <FixedStakingModal lockPeriod={lockPeriod} poolIndex={poolIndex} stakingToken={token}>
+            <FixedStakingModal apr={apr} lockPeriod={lockPeriod} poolIndex={poolIndex} stakingToken={token}>
               {(openModal) => (
                 <IconButton variant="secondary" onClick={openModal}>
                   <AddIcon color="primary" width="24px" height="24px" />
@@ -103,7 +123,7 @@ export function FixedStakingActions({
           </Flex>
         }
       />
-      <ModalV2 {...stakeModal} closeOnOverlayClick>
+      <ModalV2 {...unstakeModal} closeOnOverlayClick>
         <Modal
           title={
             <Flex>
@@ -168,7 +188,7 @@ export function FixedStakingActions({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 APR
               </Text>
-              <Text bold>0%</Text>
+              <Text bold>{apr.toSignificant(2)}%</Text>
             </Flex>
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
@@ -180,29 +200,39 @@ export function FixedStakingActions({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 Projected Return
               </Text>
-              <Text bold>0 {token.symbol}</Text>
+              <Text bold>
+                {projectedReturnAmount?.toSignificant(2) ?? 0} {token.symbol}
+              </Text>
             </Flex>
           </LightCard>
           <PreTitle fontSize="12px" color="textSubtle">
             {t('Withdrawal Details')}
           </PreTitle>
           <LightCard mb="16px">
-            <Message variant="warning" mb="16px">
-              <MessageText maxWidth="200px">
-                {t('No rewards are credited for early withdrawal, and commission is required')}
-              </MessageText>
-            </Message>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                Withdrawal Commission
-              </Text>
-              <Text bold>0 {token.symbol}</Text>
-            </Flex>
+            {shouldUnlock ? null : (
+              <Message variant="warning" mb="16px">
+                <MessageText maxWidth="200px">
+                  {t('No rewards are credited for early withdrawal, and commission is required')}
+                </MessageText>
+              </Message>
+            )}
+            {shouldUnlock ? null : (
+              <Flex alignItems="center" justifyContent="space-between">
+                <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
+                  Withdrawal Fee
+                </Text>
+                <Text bold>
+                  {withdrawFee.toSignificant(2)} {token.symbol}
+                </Text>
+              </Flex>
+            )}
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 You Will Get
               </Text>
-              <Text bold>0 {token.symbol}</Text>
+              <Text bold>
+                {totalGetAmount.toSignificant(2)} {token.symbol}
+              </Text>
             </Flex>
           </LightCard>
           <Button

diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx
@@ -10,6 +10,7 @@ import { HarvestFixedStaking } from './HarvestFixedStaking'
 import { FixedStakingModal } from './FixedStakingModal'
 import { InlineText } from './InlineText'
 import { FixedStakingPool, StakedPosition } from '../type'
+import { useFixedStakeAPR } from '../hooks/useFixedStakeAPR'
 
 export function FixedStakingCard({
   pool,
@@ -21,6 +22,7 @@ export function FixedStakingCard({
   const { t } = useTranslation()
 
   const stakePosition = stakedPositions.find((position) => position.pool.token.address === pool.token.address)
+  const { boostAPR, lockAPR } = useFixedStakeAPR(pool)
 
   return (
     <StyledCard>
@@ -52,6 +54,7 @@ export function FixedStakingCard({
                 </InlineText>
               </Box>
               <HarvestFixedStaking
+                apr={boostAPR.greaterThan(0) ? boostAPR : lockAPR}
                 lockPeriod={pool.lockPeriod}
                 unlockTime={stakePosition.timestampEndLockPeriod}
                 stakePositionUserInfo={stakePosition.userInfo}
@@ -71,15 +74,22 @@ export function FixedStakingCard({
                 </InlineText>
               </Box>
               <FixedStakingActions
+                apr={boostAPR.greaterThan(0) ? boostAPR : lockAPR}
                 poolIndex={pool.poolIndex}
                 lockPeriod={pool.lockPeriod}
                 unlockTime={stakePosition.timestampEndLockPeriod}
                 stakePositionUserInfo={stakePosition.userInfo}
                 token={pool.token}
+                withdrawalFee={pool.withdrawalFee}
               />
             </>
           ) : (
-            <FixedStakingModal lockPeriod={pool.lockPeriod} poolIndex={pool.poolIndex} stakingToken={pool.token}>
+            <FixedStakingModal
+              apr={boostAPR.greaterThan(0) ? boostAPR : lockAPR}
+              lockPeriod={pool.lockPeriod}
+              poolIndex={pool.poolIndex}
+              stakingToken={pool.token}
+            >
               {(openModal) => <Button onClick={openModal}>{t('Stake')}</Button>}
             </FixedStakingModal>
           )}

diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx
@@ -4,9 +4,11 @@ import { useTranslation } from '@pancakeswap/localization'
 import { useStablecoinPriceAmount } from 'hooks/useBUSDPrice'
 import { getBalanceAmount } from '@pancakeswap/utils/formatBalance'
 import { ReactNode } from 'react'
+import toNumber from 'lodash/toNumber'
 
 import { LockedFixedTag } from './LockedFixedTag'
 import { FixedStakingPool } from '../type'
+import { useFixedStakeAPR } from '../hooks/useFixedStakeAPR'
 
 function OverviewDataRow({ title, detail }) {
   return (
@@ -24,12 +26,17 @@ export function FixedStakingCardBody({ children, pool }: { pool: FixedStakingPoo
   const totalStakedAmount = getBalanceAmount(pool.totalDeposited, pool.token.decimals)
 
   const formattedUsdValueStaked = useStablecoinPriceAmount(pool.token, totalStakedAmount.toNumber())
+  const { boostAPR, lockAPR } = useFixedStakeAPR(pool)
 
   return (
     <>
       <OverviewDataRow
         title={t('APR:')}
-        detail={<Balance fontSize={['14px', '14px', '16px']} value={0} decimals={2} unit="%" fontWeight={[600, 400]} />}
+        detail={
+          <Text>
+            {lockAPR.toSignificant(2)}% ~ {boostAPR.toSignificant(2)}%
+          </Text>
+        }
       />
 
       <OverviewDataRow title={t('Lock Periods:')} detail={<LockedFixedTag>{pool.lockPeriod}D</LockedFixedTag>} />

diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx
@@ -26,7 +26,7 @@ import useCatchTxError from 'hooks/useCatchTxError'
 import { useCallWithGasPrice } from 'hooks/useCallWithGasPrice'
 import { ToastDescriptionWithTx } from 'components/Toast'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
-import { CurrencyAmount, Token } from '@pancakeswap/sdk'
+import { CurrencyAmount, Percent, Token } from '@pancakeswap/sdk'
 import { useStablecoinPriceAmount } from 'hooks/useBUSDPrice'
 import toNumber from 'lodash/toNumber'
 import { CurrencyLogo } from 'components/Logo'
@@ -39,10 +39,12 @@ export function FixedStakingModal({
   poolIndex,
   lockPeriod,
   children,
+  apr,
 }: {
   stakingToken: Token
   poolIndex: number
   lockPeriod: number
+  apr: Percent
   children: (openModal: () => void) => ReactNode
 }) {
   const { account } = useAccountActiveChain()
@@ -65,6 +67,10 @@ export function FixedStakingModal({
     ? CurrencyAmount.fromRawAmount(stakingToken, rawAmount.toString())
     : undefined
 
+  const projectedReturnAmount = stakeCurrencyAmount
+    ?.multiply(lockPeriod)
+    ?.multiply(apr.multiply(lockPeriod).divide(365))
+
   const [approval, approveCallback] = useApproveCallback(stakeCurrencyAmount, fixedStakingContract?.address)
 
   const handleSubmission = useCallback(async () => {
@@ -189,7 +195,7 @@ export function FixedStakingModal({
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   {t('APR')}
                 </Text>
-                <Text bold>0%</Text>
+                <Text bold>{apr?.toSignificant(2)}%</Text>
               </Flex>
               <Flex alignItems="center" justifyContent="space-between">
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
@@ -201,7 +207,9 @@ export function FixedStakingModal({
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   Projected Return
                 </Text>
-                <Text bold>0 {stakingToken.symbol}</Text>
+                <Text bold>
+                  {projectedReturnAmount?.toSignificant(2) ?? 0} {stakingToken.symbol}
+                </Text>
               </Flex>
             </LightGreyCard>
           </Box>