showing source as Compounding of Yield-Bearing Rewards

Badger-Finance · Sep 5, 2022 · 1ffa284 · 1ffa284
1 parent c4d1798
commit 1ffa284
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/public/assets/icons/vault flywheel.svg b/public/assets/icons/vault flywheel.svg
diff --git a/src/components-v2/VaultApyBreakdownItem/index.tsx b/src/components-v2/VaultApyBreakdownItem/index.tsx
@@ -13,6 +13,7 @@ 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: {
@@ -97,11 +98,32 @@ const VaultApyBreakdownItem = ({ vault, source }: Props): JSX.Element => {
                 height="24"
                 token={{ symbol: source.yieldVault ? source.yieldVault.token : source.name }}
               />
-              <Typography component="span">{source.yieldVault ? source.yieldVault.token : source.name}</Typography>
-              {source.yieldVault && (
+              {!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}>
-                    earned as
+                    of
                   </Typography>
                   <img
                     width="12"
@@ -110,7 +132,7 @@ const VaultApyBreakdownItem = ({ vault, source }: Props): JSX.Element => {
                     alt="Yield-Bearing Rewards"
                   />
                   <Typography component="span" color="primary">
-                    {source.yieldVault ? source.yieldVault.vaultName : source.name}
+                    Yield-Bearing Rewards
                   </Typography>
                 </>
               )}

diff --git a/src/components-v2/VaultApyInformation/index.tsx b/src/components-v2/VaultApyInformation/index.tsx
@@ -16,7 +16,7 @@ import { isInfluenceVault } from 'components-v2/InfluenceVault/InfluenceVaultUti
 import { StoreContext } from 'mobx/stores/store-context';
 import { observer } from 'mobx-react-lite';
 import React, { MouseEvent, useContext } from 'react';
-import { isBadgerSource } from 'utils/componentHelpers';
+import { isBadgerSource, isFlywheelSource } from 'utils/componentHelpers';
 
 import routes from '../../config/routes';
 import { numberWithCommas } from '../../mobx/utils/helpers';
@@ -170,8 +170,9 @@ const VaultApyInformation = ({ open, onClose, boost, vault, projectedBoost }: Pr
       }
       return list;
     }, [])
+    .sort((a) => (a.yieldVault ? 1 : -1))
+    .sort((_, b) => (isFlywheelSource(b) ? -1 : 1))
     .sort((_, b) => (isBadgerSource(b) ? -1 : 1))
-    .sort((a, b) => (a.yieldVault ? 1 : isBadgerSource(a) ? 1 : -1));
 
   return (
     <Dialog

diff --git a/src/utils/componentHelpers.ts b/src/utils/componentHelpers.ts
@@ -66,6 +66,10 @@ export function isBadgerSource(source: { name: string }): boolean {
   return source.name === BoostedRewards.Badger || source.name === BoostedRewards.BoostedBadger;
 }
 
+export function isFlywheelSource(source: { name: string }): boolean {
+  return /vault flywheel/i.test(source?.name);
+}
+
 export function getUserVaultBoost(vault: VaultDTO, boost: number, apr = false): number {
   if (vault.state === VaultState.Discontinued || vault.sources.length === 0) {
     return 0;