feat: New syrup pool cards (pancakeswap#874)

* feat(syrup-pool-v2): Update PageHeader and TabButtons

* feat(syrup-pool-v2): Reorg component structure and add new styledCardHeader

* feat(syrup-pool-v2): Yeet some sheet

* feat(syrup-pool-v2): Add finished sash and handle finished state of card header

* feat(syrup-pool-v2): Create APR row comp

* feat(syrup-pool-v2): Tidy up & restyling of footer

* feat(syrup-pool-v2): Finish up various footer comps

* feat(syrup-pool-v2): Upgrade ApyCalculatorModal to handle different earning tokens and links

* feat(syrup-pool-v2): Loading states for footer and APR

* fix(syrup-pool-v2): Fix merge conflicts

* fix(syrup-pool-v2): Fix lint error

* chore(syrup-pool-v2): Break CardActions into its own component and reorg props

* feat(syrup-pool-v2): Create separate Staking / HarvestActions comps

* feat(syrup-pool-v2): Approval and Staking actions

* feat(pool-stake-modal): Basics of stake modal laid out

* feat(syrup-pool-v2): Styling of cards and improvements to error reporting for users

* feat(syrup-pool-v2): Add proper USD calculation

* feat(syrup-pool-v2): Adding unstaking buttons and rough modal operations

* feat(syrup-pool-v2): Refactor footer for performance and add HarvestActions

* feat(syrup-pool-v2): Basic harvest modal and functionality added

* feat(syrup-pool-v2): Styling fixes and pass account down from pool view

* feat(syrup-pool-v2): Styling and tooltip for compounding modal

* feat(syrup-pool-v2): Finish compounding modal

* feat(syrup-pool-v2): Style for promoted pool (& cake) and organising files

* feat(syrup-pool-v2): Massive proptypes tidy up

* chore(syrup-pool-v2): Del unused SVG

* feat(syrup-pool-v2): Add loading states for different card elements

* feat(syrup-pool-v2): Add bunny img

* feat(syrup-pool-v2): Fix high price token showing 0% APR

* chore(syrup-pool-v2): Cleanup white space

* chore(syrup-pool-v2): Re-add usePersistState

* chore(syrup-pool-v2): Add comments to help

* chore(syrup-pool-v2): Remove unused components

* fix(syrup-pool-v2): Fix useToast

* feat(syrup-pool-v2): Move help to pooltabbuttons bar

* feat(syrup-pool-v2): Disabled button when stakeAmount is zero or unset

* fix(pool-cards-v2): Amendments based on Doge's CR comments

* fix(pool-cards-v2): Proper finished handling on staking actions

* fix(pool-cards-v2): Follow up CR comments

* feat(syrup-pool-v2): Add new uikit version

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/config/index.ts

@@ -21,6 +21,7 @@ export const BASE_URL = 'https://pancakeswap.finance'
 export const BASE_EXCHANGE_URL = 'https://exchange.pancakeswap.finance'
 export const BASE_ADD_LIQUIDITY_URL = `${BASE_EXCHANGE_URL}/#/add`
 export const BASE_LIQUIDITY_POOL_URL = `${BASE_EXCHANGE_URL}/#/pool`
+export const BASE_BSC_SCAN_URL = 'https://bscscan.com'
 export const LOTTERY_MAX_NUMBER_OF_TICKETS = 50
 export const LOTTERY_TICKET_PRICE = 1
 export const DEFAULT_TOKEN_DECIMAL = new BigNumber(10).pow(18)

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)
 }