feat: New syrup pool cards

src/components/ApyCalculatorModal/index.tsx

@@ -11,6 +11,7 @@ interface ApyCalculatorModalProps {
   linkLabel: string
   linkHref: string
   earningTokenSymbol?: string
+  roundingDecimals?: number
 }
 
 const Grid = styled.div`
@@ -36,6 +37,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
   linkLabel,
   linkHref,
   earningTokenSymbol = 'CAKE',
+  roundingDecimals = 2,
 }) => {
   const TranslateString = useI18n()
   const oneThousandDollarsWorthOfToken = 1000 / tokenPrice
@@ -44,21 +46,25 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
     numberOfDays: 1,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand7D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 7,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand30D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 30,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand365D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 365,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
 
   return (

src/components/Balance.tsx

@@ -6,6 +6,7 @@ interface TextProps {
   isDisabled?: boolean
   fontSize?: string
   color?: string
+  bold?: boolean
 }
 
 interface BalanceProps extends TextProps {
@@ -14,15 +15,15 @@ interface BalanceProps extends TextProps {
   unit?: string
 }
 
-const Balance: React.FC<BalanceProps> = ({ value, fontSize, color, decimals, isDisabled, unit }) => {
+const Balance: React.FC<BalanceProps> = ({ value, fontSize, color, decimals, isDisabled, unit, bold }) => {
   const previousValue = useRef(0)
 
   useEffect(() => {
     previousValue.current = value
   }, [value])
 
   return (
-    <Text bold color={isDisabled ? 'textDisabled' : color} fontSize={fontSize}>
+    <Text bold={bold} color={isDisabled ? 'textDisabled' : color} fontSize={fontSize}>
       <CountUp start={previousValue.current} end={value} decimals={decimals} duration={1} separator="," />
       {value && unit && <span>{unit}</span>}
     </Text>

src/utils/compoundApyHelpers.ts

@@ -1,6 +1,9 @@
-const roundToTwoDp = (number) => Math.round(number * 100) / 100
-
-export const tokenEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr, tokenPrice }) => {
+export const tokenEarnedPerThousandDollarsCompounding = ({
+  numberOfDays,
+  farmApr,
+  tokenPrice,
+  roundingDecimals = 2,
+}) => {
   // 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
@@ -12,10 +15,10 @@ export const tokenEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr
   const finalAmount = principal * (1 + aprAsDecimal / timesCompounded) ** (timesCompounded * daysAsDecimalOfYear)
   // To get the TOKEN amount earned, deduct the amount after compounding (finalAmount) from the starting TOKEN balance (principal)
   const interestEarned = finalAmount - principal
-  return roundToTwoDp(interestEarned)
+  return parseFloat(interestEarned.toFixed(roundingDecimals))
 }
 
-export const getRoi = ({ amountEarned, amountInvested }) => {
+export const getRoi = ({ amountEarned, amountInvested, roundingDecimals = 2 }) => {
   const percentage = (amountEarned / amountInvested) * 100
-  return percentage.toFixed(2)
+  return percentage.toFixed(roundingDecimals)
 }