feat: Gross apy warning

src/components-v2/InfluenceVault/InfluenceVaultSpecs.tsx

@@ -38,6 +38,11 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(0.15),
     fontSize: '1.25rem',
   },
+  specName: {
+    fontSize: 12,
+    marginTop: 4,
+    lineHeight: '1.66',
+  },
 }));
 
 const InfluenceVaultSpecs = ({ vault, config }: Props): JSX.Element => {
@@ -88,6 +93,9 @@ const InfluenceVaultSpecs = ({ vault, config }: Props): JSX.Element => {
             <StyledDivider />
             <Grid container direction="column">
               <InfluenceVaultFees vault={vault} feeConfig={config.feeConfig} />
+              <Typography className={classes.specName} color="textSecondary">
+                Fees are not included in APY estimates
+              </Typography>
             </Grid>
           </Grid>
         </Grid>

src/components-v2/VaultApyInformation/index.tsx

@@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({
     padding: '0px 36px 27px 36px',
   },
   button: {
-    marginTop: 34,
+    marginTop: 17,
   },
   historicAPY: {
     paddingBottom: 10,
@@ -105,6 +105,10 @@ const useStyles = makeStyles((theme) => ({
       flexWrap: 'wrap',
     },
   },
+  feeDisclaimer: {
+    fontSize: 12,
+    color: 'rgba(255,255,255,0.6)',
+  },
 }));
 
 interface Props {
@@ -169,6 +173,7 @@ const VaultApyInformation = ({ open, onClose, boost, vault, projectedBoost }: Pr
     event.stopPropagation();
     onClose();
   };
+
   const useHistoricAPY = projectedBoost === null || isInfluenceVault(vault.address);
   const vaultApySources = useHistoricAPY ? sources.map(yieldToValueSource) : totalCurrentSources;
   const yieldBearingRewardsList = vaultApySources.reduce((list: YieldBearingVaultSource[], source) => {
@@ -388,7 +393,11 @@ const VaultApyInformation = ({ open, onClose, boost, vault, projectedBoost }: Pr
               ))}
             </Box>
           )}
-
+          <Grid item className={classes.button}>
+            <Typography component="span" className={classes.feeDisclaimer}>
+              Fees are not included in APY estimates. See the vault details page for fee information.
+            </Typography>
+          </Grid>
           <Grid item className={classes.button}>
             <Button color="primary" variant="contained" fullWidth onClick={handleGoToVault}>
               GO TO VAULT

src/components-v2/common/VaultFees.tsx

@@ -41,32 +41,40 @@ function getVaultStrategyFee(vault: VaultDTOV3, fee: StrategyFee): number {
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   vault: VaultDTOV3;
   onHelpClick?: () => void;
+  includeDisclaimer: boolean;
 }
 
-export const VaultFees = observer(({ vault, onHelpClick, ...rootProps }: Props): JSX.Element | null => {
-  const classes = useStyles();
+export const VaultFees = observer(
+  ({ vault, onHelpClick, includeDisclaimer, ...rootProps }: Props): JSX.Element | null => {
+    const classes = useStyles();
 
-  let totalFees = 0;
-  for (const fee of Object.values(StrategyFee)) {
-    const feesAmount = getVaultStrategyFee(vault, fee);
-    if (feesAmount && feesAmount > 0) {
-      totalFees++;
+    let totalFees = 0;
+    for (const fee of Object.values(StrategyFee)) {
+      const feesAmount = getVaultStrategyFee(vault, fee);
+      if (feesAmount && feesAmount > 0) {
+        totalFees++;
+      }
+    }
+
+    if (totalFees === 0) {
+      return (
+        <div {...rootProps}>
+          <Typography className={classes.specName} color="textSecondary" display="inline">
+            There are no fees for this vault
+          </Typography>
+        </div>
+      );
     }
-  }
 
-  if (totalFees === 0) {
     return (
       <div {...rootProps}>
-        <Typography className={classes.specName} color="textSecondary" display="inline">
-          There are no fees for this vault
-        </Typography>
+        <StrategyFees vault={vault} onHelpClick={onHelpClick} />
+        {includeDisclaimer && (
+          <Typography className={classes.specName} color="textSecondary">
+            Fees are not included in APY estimates
+          </Typography>
+        )}
       </div>
     );
-  }
-
-  return (
-    <div {...rootProps}>
-      <StrategyFees vault={vault} onHelpClick={onHelpClick} />
-    </div>
-  );
-});
+  },
+);

src/components-v2/common/dialogs/VaultDeposit.tsx

@@ -303,7 +303,12 @@ export const VaultDeposit = observer(({ open = false, vault, depositAdvisory, on
         {isInfluence && influenceVaultConfig !== undefined ? (
           <InfluenceVaultFees vault={vault} className={classes.fees} feeConfig={influenceVaultConfig.feeConfig} />
         ) : (
-          <VaultFees vault={vault} className={classes.fees} onHelpClick={() => setShowFees(true)} />
+          <VaultFees
+            vault={vault}
+            className={classes.fees}
+            onHelpClick={() => setShowFees(true)}
+            includeDisclaimer={false}
+          />
         )}
         <Grid container className={classes.totalAmountContainer}>
           <Grid item xs={6}>

src/components-v2/vault-detail/specs/Fees.tsx

@@ -25,7 +25,7 @@ export const Fees = ({ vault }: Props): JSX.Element => {
           }
         />
       </Dialog>
-      <VaultFees vault={vault} onHelpClick={toggleDialog} />
+      <VaultFees vault={vault} onHelpClick={toggleDialog} includeDisclaimer={true} />
     </>
   );
 };