Apy modal

src/components-v2/InfluenceVault/InfluenceVaultApyBreakdown.tsx

@@ -0,0 +1,105 @@
+import { VaultDTO } from '@badger-dao/sdk';
+import { Grid, Link, makeStyles, Typography } from '@material-ui/core';
+import { MAX_BOOST_RANK } from 'config/system/boost-ranks';
+import { StoreContext } from 'mobx/stores/store-context';
+import { observer } from 'mobx-react-lite';
+import { useContext } from 'react';
+import { calculateUserBoost } from 'utils/boost-ranks';
+import { BoostedRewards } from 'utils/enums/boosted-rewards.enum';
+
+import routes from '../../config/routes';
+import { useVaultInformation } from '../../hooks/useVaultInformation';
+import { numberWithCommas } from '../../mobx/utils/helpers';
+import { YieldValueSource } from 'components-v2/VaultApyInformation';
+
+const useStyles = makeStyles({
+  apyBreakdownIcon: {
+    marginRight: 8,
+  },
+  myBoost: {
+    marginTop: 9,
+  },
+  calculatorLink: {
+    marginLeft: 8,
+  },
+  link: {
+    cursor: 'pointer',
+  }
+});
+
+interface Props {
+  vault: VaultDTO;
+  source: YieldValueSource;
+}
+
+const InfluenceVaultApyBreakdown = ({ vault, source }: Props): JSX.Element => {
+  const classes = useStyles();
+  const { user, router } = useContext(StoreContext);
+  const { boostContribution } = useVaultInformation(vault);
+
+  // this is only possible because we're currently distributing BADGER. If in the future we distribute other tokens,
+  // this will need to be updated to reflect that.
+  const isBoostBreakdown = source.name === BoostedRewards.BoostedBadger;
+  const maxBoost = calculateUserBoost(MAX_BOOST_RANK.stakeRatioBoundary);
+  const userBoost = user.accountDetails?.boost ?? 1;
+  const sourceApr = source.boostable
+    ? source.minApr + (source.maxApr - source.minApr) * (userBoost / maxBoost)
+    : source.apr;
+
+  const handleGoToCalculator = async () => {
+    await router.goTo(routes.boostOptimizer);
+  };
+
+  if (isBoostBreakdown && vault.boost.enabled) {
+    return (
+      <Grid item container direction="column">
+        <Grid item container justifyContent="space-between">
+          <Grid item>
+            <Typography variant="body2" display="inline" color="textSecondary">
+              {`🚀 Boosted BADGER Rewards (max: ${numberWithCommas(source.maxApr.toFixed(2))}%)`}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="body2" display="inline" color="textSecondary">
+              {`${numberWithCommas(sourceApr.toFixed(2))}%`}
+            </Typography>
+          </Grid>
+        </Grid>
+        {!!userBoost && !!boostContribution && (
+          <Grid item container>
+            <img
+              className={classes.apyBreakdownIcon}
+              src="/assets/icons/apy-breakdown-icon.svg"
+              alt="apy breakdown icon"
+            />
+            <Typography variant="body2" display="inline" color="textSecondary">
+              {`My Boost: ${userBoost}x`}
+            </Typography>
+            <Link color="primary" onClick={handleGoToCalculator} className={classes.link}>
+              <Typography variant="body2" display="inline" color="inherit" className={classes.calculatorLink}>
+                Go To Boost
+              </Typography>
+            </Link>
+          </Grid>
+        )}
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid item container justifyContent="space-between">
+      <Grid item>
+        <Typography variant="body2" display="inline" color="textSecondary">
+          {source.name}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Typography variant="body2" display="inline" color="textSecondary">
+          {`${numberWithCommas(sourceApr.toFixed(2))}%`}
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default observer(InfluenceVaultApyBreakdown);

src/components-v2/InfluenceVault/InfluenceVaultPerfomanceTab.tsx

@@ -12,9 +12,9 @@ import { numberWithCommas } from '../../mobx/utils/helpers';
 import ChartContent from '../vault-detail/charts/ChartContent';
 import SpecItem from '../vault-detail/specs/SpecItem';
 import { StyledHelpIcon } from '../vault-detail/styled';
-import VaultApyBreakdownItem from '../VaultApyBreakdownItem';
 import InfluenceVaultChart from './InfluenceVaultChart';
 import InfluenceVaultListModal from './InfluenceVaultListModal';
+import InfluenceVaultApyBreakdown from './InfluenceVaultApyBreakdown';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -100,7 +100,7 @@ const InfluenceVaultPerfomanceTab = ({ vault, config }: Props): JSX.Element => {
             <Divider className={classes.divider} />
             {sortedSources.map((source) => (
               <React.Fragment key={source.name}>
-                <VaultApyBreakdownItem vault={vault} source={source} />
+                <InfluenceVaultApyBreakdown vault={vault} source={source} />
                 <Divider className={classes.divider} />
               </React.Fragment>
             ))}

src/components-v2/TokenLogo/TokenLogo.tsx

@@ -4,7 +4,9 @@ import React, { SyntheticEvent } from 'react';
 import { getTokenIconPath } from '../../utils/componentHelpers';
 
 interface Props extends React.HTMLAttributes<HTMLImageElement> {
-  token: Token;
+  token: Token | { symbol: string };
+  width?: string;
+  height?: string;
 }
 
 const TokenLogo = ({ token, ...imageProps }: Props): JSX.Element => {

src/components-v2/VaultApyBreakdownItem/index.tsx

@@ -1,5 +1,5 @@
 import { ValueSource, VaultDTO } from '@badger-dao/sdk';
-import { Grid, Link, makeStyles, Typography } from '@material-ui/core';
+import { Box, Grid, Link, makeStyles, Typography } from '@material-ui/core';
 import { MAX_BOOST_RANK } from 'config/system/boost-ranks';
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
@@ -10,6 +10,10 @@ import { BoostedRewards } from 'utils/enums/boosted-rewards.enum';
 import routes from '../../config/routes';
 import { useVaultInformation } from '../../hooks/useVaultInformation';
 import { numberWithCommas } from '../../mobx/utils/helpers';
+import { FLAGS } from 'config/environment';
+import { YieldValueSource } from 'components-v2/VaultApyInformation';
+import TokenLogo from 'components-v2/TokenLogo';
+import { isFlywheelSource } from 'utils/componentHelpers';
 
 const useStyles = makeStyles({
   apyBreakdownIcon: {
@@ -24,11 +28,21 @@ const useStyles = makeStyles({
   link: {
     cursor: 'pointer',
   },
+  totalVaultRewardsRow: {
+    padding: 10,
+    '& .MuiBox-root > *': {
+      marginRight: 5,
+    },
+    '& .MuiBox-root > img': {
+      marginRight: 10,
+    },
+  },
+  earnedAs: { color: 'rgba(255,255,255,0.6)' },
 });
 
 interface Props {
   vault: VaultDTO;
-  source: ValueSource;
+  source: YieldValueSource;
 }
 
 const VaultApyBreakdownItem = ({ vault, source }: Props): JSX.Element => {
@@ -49,6 +63,89 @@ const VaultApyBreakdownItem = ({ vault, source }: Props): JSX.Element => {
     await router.goTo(routes.boostOptimizer);
   };
 
+  if (FLAGS.APY_EVOLUTION) {
+    if (isBoostBreakdown && vault.boost.enabled) {
+      return (
+        <>
+          <Grid container className={classes.totalVaultRewardsRow}>
+            <Grid item xs={9}>
+              <Box display="flex" alignItems="center">
+                <TokenLogo
+                  width="24"
+                  height="24"
+                  token={{ symbol: source.yieldVault ? source.yieldVault.token : source.name }}
+                />
+                <Typography component="span">{`🚀 Boosted BADGER Rewards (max: ${numberWithCommas(
+                  source.maxApr.toFixed(2),
+                )}%)`}</Typography>
+              </Box>
+            </Grid>
+            <Grid item xs={3}>
+              <Typography align="right">{`${numberWithCommas(sourceApr.toFixed(2))}%`}</Typography>
+            </Grid>
+          </Grid>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <Grid container className={classes.totalVaultRewardsRow}>
+          <Grid item xs={9}>
+            <Box display="flex" alignItems="center">
+              <TokenLogo
+                width="24"
+                height="24"
+                token={{ symbol: source.yieldVault ? source.yieldVault.token : source.name }}
+              />
+              {!isFlywheelSource(source) ? (
+                <>
+                  <Typography component="span">{source.yieldVault ? source.yieldVault.token : source.name}</Typography>
+                  {source.yieldVault && (
+                    <>
+                      <Typography component="span" className={classes.earnedAs}>
+                        earned as
+                      </Typography>
+                      <img
+                        width="12"
+                        height="16"
+                        src="/assets/icons/yield-bearing-rewards.svg"
+                        alt="Yield-Bearing Rewards"
+                      />
+                      <Typography component="span" color="primary">
+                        {source.yieldVault ? source.yieldVault.vaultName : source.name}
+                      </Typography>
+                    </>
+                  )}
+                </>
+              ) : (
+                //  showing source `Vault Flywheel` as Compounding of Yield-Bearing Rewards
+                <>
+                  <Typography component="span">Compounding</Typography>
+                  <Typography component="span" className={classes.earnedAs}>
+                    of
+                  </Typography>
+                  <img
+                    width="12"
+                    height="16"
+                    src="/assets/icons/yield-bearing-rewards.svg"
+                    alt="Yield-Bearing Rewards"
+                  />
+                  <Typography component="span" color="primary">
+                    Yield-Bearing Rewards
+                  </Typography>
+                </>
+              )}
+            </Box>
+          </Grid>
+          <Grid item xs={3}>
+            <Typography align="right">{numberWithCommas(source.apr.toFixed(2))}%</Typography>
+          </Grid>
+        </Grid>
+      </>
+    );
+  }
+
   if (isBoostBreakdown && vault.boost.enabled) {
     return (
       <Grid item container direction="column">