chore: Move APY calculator to /components (pancakeswap#875)

* chore(apr-calculator): Move out of views/farm and rename variables/functions

* test(apr-calculator): Update tests to use new values

src/__tests__/utils/compoundApyHelpers.test.ts

@@ -1,14 +1,14 @@
-import { calculateCakeEarnedPerThousandDollars, apyModalRoi } from 'utils/compoundApyHelpers'
+import { cakeEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
 
 it.each([
-  [{ numberOfDays: 1, farmApy: 365, cakePrice: 1 }, 10],
-  [{ numberOfDays: 7, farmApy: 20, cakePrice: 0.8 }, 4.8],
-  [{ numberOfDays: 40, farmApy: 212.21, cakePrice: 1.2 }, 217.48],
-  [{ numberOfDays: 330, farmApy: 45.12, cakePrice: 5 }, 100.67],
-  [{ numberOfDays: 365, farmApy: 100, cakePrice: 0.2 }, 8572.84],
-  [{ numberOfDays: 365, farmApy: 20, cakePrice: 1 }, 221.34],
-])('calculate cake earned with values %o', ({ numberOfDays, farmApy, cakePrice }, expected) => {
-  expect(calculateCakeEarnedPerThousandDollars({ numberOfDays, farmApy, cakePrice })).toEqual(expected)
+  [{ numberOfDays: 1, farmApr: 365, cakePrice: 1 }, 10],
+  [{ numberOfDays: 7, farmApr: 20, cakePrice: 0.8 }, 4.8],
+  [{ numberOfDays: 40, farmApr: 212.21, cakePrice: 1.2 }, 217.48],
+  [{ numberOfDays: 330, farmApr: 45.12, cakePrice: 5 }, 100.67],
+  [{ numberOfDays: 365, farmApr: 100, cakePrice: 0.2 }, 8572.84],
+  [{ numberOfDays: 365, farmApr: 20, cakePrice: 1 }, 221.34],
+])('calculate cake earned with values %o', ({ numberOfDays, farmApr, cakePrice }, expected) => {
+  expect(cakeEarnedPerThousandDollarsCompounding({ numberOfDays, farmApr, cakePrice })).toEqual(expected)
 })
 
 it.each([
@@ -18,5 +18,5 @@ it.each([
   [{ amountEarned: 100.67, amountInvested: 100 }, '100.67'],
   [{ amountEarned: 8572.84, amountInvested: 20000 }, '42.86'],
 ])('calculate roi % with values %o', ({ amountEarned, amountInvested }, expected) => {
-  expect(apyModalRoi({ amountEarned, amountInvested })).toEqual(expected)
+  expect(getRoi({ amountEarned, amountInvested })).toEqual(expected)
 })

src/views/Farms/components/FarmCard/ApyCalculatorModal.tsx → src/components/ApyCalculatorModal/index.tsx

@@ -3,13 +3,13 @@ import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { Modal, Text, LinkExternal, Flex } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
-import { calculateCakeEarnedPerThousandDollars, apyModalRoi } from 'utils/compoundApyHelpers'
+import { cakeEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
 
 interface ApyCalculatorModalProps {
   onDismiss?: () => void
   lpLabel?: string
   cakePrice?: BigNumber
-  apy?: number
+  apr?: number
   addLiquidityUrl?: string
 }
 
@@ -33,18 +33,22 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
   onDismiss,
   lpLabel,
   cakePrice,
-  apy,
+  apr,
   addLiquidityUrl,
 }) => {
   const TranslateString = useI18n()
   const oneThousandDollarsWorthOfCake = 1000 / cakePrice.toNumber()
 
-  const cakeEarnedPerThousand1D = calculateCakeEarnedPerThousandDollars({ numberOfDays: 1, farmApy: apy, cakePrice })
-  const cakeEarnedPerThousand7D = calculateCakeEarnedPerThousandDollars({ numberOfDays: 7, farmApy: apy, cakePrice })
-  const cakeEarnedPerThousand30D = calculateCakeEarnedPerThousandDollars({ numberOfDays: 30, farmApy: apy, cakePrice })
-  const cakeEarnedPerThousand365D = calculateCakeEarnedPerThousandDollars({
+  const cakeEarnedPerThousand1D = cakeEarnedPerThousandDollarsCompounding({ numberOfDays: 1, farmApr: apr, cakePrice })
+  const cakeEarnedPerThousand7D = cakeEarnedPerThousandDollarsCompounding({ numberOfDays: 7, farmApr: apr, cakePrice })
+  const cakeEarnedPerThousand30D = cakeEarnedPerThousandDollarsCompounding({
+    numberOfDays: 30,
+    farmApr: apr,
+    cakePrice,
+  })
+  const cakeEarnedPerThousand365D = cakeEarnedPerThousandDollarsCompounding({
     numberOfDays: 365,
-    farmApy: apy,
+    farmApr: apr,
     cakePrice,
   })
 
@@ -72,7 +76,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {apyModalRoi({ amountEarned: cakeEarnedPerThousand1D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: cakeEarnedPerThousand1D, amountInvested: oneThousandDollarsWorthOfCake })}%
           </Text>
         </GridItem>
         <GridItem>
@@ -84,7 +88,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {apyModalRoi({ amountEarned: cakeEarnedPerThousand7D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: cakeEarnedPerThousand7D, amountInvested: oneThousandDollarsWorthOfCake })}%
           </Text>
         </GridItem>
         <GridItem>
@@ -96,7 +100,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {apyModalRoi({ amountEarned: cakeEarnedPerThousand30D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: cakeEarnedPerThousand30D, amountInvested: oneThousandDollarsWorthOfCake })}%
           </Text>
         </GridItem>
         <GridItem>
@@ -108,7 +112,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {apyModalRoi({ amountEarned: cakeEarnedPerThousand365D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: cakeEarnedPerThousand365D, amountInvested: oneThousandDollarsWorthOfCake })}%
           </Text>
         </GridItem>
         <GridItem>

src/utils/compoundApyHelpers.ts

@@ -1,23 +1,23 @@
 const roundToTwoDp = (number) => Math.round(number * 100) / 100
 
-export const calculateCakeEarnedPerThousandDollars = ({ numberOfDays, farmApy, cakePrice }) => {
+export const cakeEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr, cakePrice }) => {
   // Everything here is worked out relative to a year, with the asset compounding daily
   const timesCompounded = 365
   //   We use decimal values rather than % in the math for both APY and the number of days being calculates as a proportion of the year
-  const apyAsDecimal = farmApy / 100
+  const aprAsDecimal = farmApr / 100
   const daysAsDecimalOfYear = numberOfDays / timesCompounded
   //   Calculate the starting CAKE balance with a dollar balance of $1000.
   const principal = 1000 / cakePrice
 
   // This is a translation of the typical mathematical compounding APY formula. Details here: https://www.calculatorsoup.com/calculators/financial/compound-interest-calculator.php
-  const finalAmount = principal * (1 + apyAsDecimal / timesCompounded) ** (timesCompounded * daysAsDecimalOfYear)
+  const finalAmount = principal * (1 + aprAsDecimal / timesCompounded) ** (timesCompounded * daysAsDecimalOfYear)
 
   // To get the cake earned, deduct the amount after compounding (finalAmount) from the starting CAKE balance (principal)
   const interestEarned = finalAmount - principal
   return roundToTwoDp(interestEarned)
 }
 
-export const apyModalRoi = ({ amountEarned, amountInvested }) => {
+export const getRoi = ({ amountEarned, amountInvested }) => {
   const percentage = (amountEarned / amountInvested) * 100
   return percentage.toFixed(2)
 }

src/views/Farms/components/FarmCard/ApyButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
 import { IconButton, useModal, CalculateIcon } from '@pancakeswap-libs/uikit'
-import ApyCalculatorModal from './ApyCalculatorModal'
+import ApyCalculatorModal from 'components/ApyCalculatorModal'
 
 export interface ApyButtonProps {
   lpLabel?: string
@@ -12,7 +12,7 @@ export interface ApyButtonProps {
 
 const ApyButton: React.FC<ApyButtonProps> = ({ lpLabel, cakePrice, apy, addLiquidityUrl }) => {
   const [onPresentApyModal] = useModal(
-    <ApyCalculatorModal lpLabel={lpLabel} cakePrice={cakePrice} apy={apy} addLiquidityUrl={addLiquidityUrl} />,
+    <ApyCalculatorModal lpLabel={lpLabel} cakePrice={cakePrice} apr={apy} addLiquidityUrl={addLiquidityUrl} />,
   )
 
   const handleClickButton = (event): void => {