Feat/move boosts

panda.config.ts

@@ -71,10 +71,10 @@ const config = buildConfig(
     // Browserslist for lightningcss
     browserslist: isProduction
       ? [
-          '>0.1% and fully supports es6-module and fully supports es6-module-dynamic-import',
-          'not dead',
-          'not op_mini all',
-        ]
+        '>0.1% and fully supports es6-module and fully supports es6-module-dynamic-import',
+        'not dead',
+        'not op_mini all',
+      ]
       : ['last 1 chrome version', 'last 1 firefox version', 'last 1 safari version'],
     // Where css variables are defined
     cssVarRoot: ':root',
@@ -247,6 +247,8 @@ const config = buildConfig(
             light: { value: '#f5f5f5' },
             middle: { value: '#d0d0da' },
             dark: { value: '#999cb3' },
+            black: { value: '#111321' },
+            notification: { value: "#F8DFA9" }
           },
           modal: { backdrop: { value: '#ffffff33' } },
           alertBaseBackground: { value: '#f5f5ff14' },
@@ -263,6 +265,7 @@ const config = buildConfig(
           changeNegative: { value: '#e84525' },
           changePositive: { value: '#509658' },
           contentBackgroundLight: { value: '#2d3153', description: 'contentLight' },
+          contentBackgroundLightNotification: { value: '#B17F4966', description: 'Notification bg' },
           cornflower: { value: '#5c70d6', description: 'tag.points + indicators.info' },
           dashboardSummaryIconBackground: {
             value: '#232644',
@@ -339,6 +342,7 @@ const config = buildConfig(
           vaultTagDividerBackground: { value: '#D9D9D949' },
           white: { value: '#ffffff' },
           zapDiscountedFeesBackground: { value: '#59a662' },
+          newBoostBackground: { value: '#F1D48C' },
         },
         sizes: {
           defaultAssetsImageSize: { value: '48px' },
@@ -384,6 +388,9 @@ const config = buildConfig(
               DEFAULT: { value: '{colors.blackMarket}' },
               dark: { value: '{colors.eclipseElixir}' },
               light: { value: '{colors.contentBackgroundLight}' },
+              gray: { value: '{colors.text.dark}' },
+              notification: { value: '{colors.contentBackgroundLightNotification}' },
+              boost: { value: '{colors.newBoostBackground}' },
             },
             vaults: {
               standard: { value: '{colors.blackMarket}' },

src/components/NetworkStatus/NetworkStatus.tsx

@@ -30,6 +30,7 @@ import { styled } from '@repo/styles/jsx';
 import { DropdownTrigger } from '../Dropdown/DropdownTrigger.tsx';
 import { DropdownProvider } from '../Dropdown/DropdownProvider.tsx';
 import { DropdownContent } from '../Dropdown/DropdownContent.tsx';
+import { PulseHighlight } from '../../features/vault/components/PulseHighlight/PulseHighlight.tsx';
 
 const useStyles = legacyMakeStyles(styles);
 
@@ -103,7 +104,6 @@ export const NetworkStatus = memo(function NetworkStatus({
     hasAnyLoading && 'loading',
     !hasAnyLoading && 'notLoading'
   );
-  const pulseClassName = cx(classes.pulseCircle, colorClasses);
 
   return (
     <DropdownProvider
@@ -114,14 +114,7 @@ export const NetworkStatus = memo(function NetworkStatus({
       reference={anchorEl}
     >
       <DropdownButton onClick={handleToggle}>
-        <div className={classes.circleOuter}>
-          <div className={cx(classes.circle, colorClasses)}>
-            <div className={pulseClassName} />
-            <div className={pulseClassName} />
-            <div className={pulseClassName} />
-            <div className={pulseClassName} />
-          </div>
-        </div>
+        <PulseHighlight colorClassName={colorClasses} size={12} />
         {isWalletConnected && <ActiveChain chainId={currentChainId} />}
       </DropdownButton>
       <DropdownContent css={styles.dropdown} gap="none">

src/components/NetworkStatus/styles.ts

@@ -13,12 +13,7 @@ export const styles = {
     backgroundColor: 'transparent',
     padding: '0px 16px 0px 0px',
   }),
-  circleOuter: css.raw({
-    width: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }),
+
   circle: css.raw({
     width: '12px',
     height: '12px',
@@ -34,39 +29,6 @@ export const styles = {
     },
     position: 'relative',
   }),
-  pulseCircle: css.raw({
-    borderRadius: '50%',
-    // w/h same as circle
-    width: '12px',
-    height: '12px',
-    position: 'absolute',
-    opacity: '0',
-    animation: 'loadingPulse 4s infinite cubic-bezier(.36, .11, .89, .32)',
-    '&.loading': {
-      backgroundColor: 'indicators.loading',
-    },
-    '&.success': {
-      backgroundColor: 'indicators.success',
-    },
-    '&.warning': {
-      backgroundColor: 'indicators.warning',
-    },
-    '&.notLoading': {
-      display: 'none',
-    },
-    '&:nth-child(1)': {
-      animationDelay: '0s',
-    },
-    '&:nth-child(2)': {
-      animationDelay: '1s',
-    },
-    '&:nth-child(3)': {
-      animationDelay: '2s',
-    },
-    '&:nth-child(4)': {
-      animationDelay: '3s',
-    },
-  }),
   dropdown: css.raw({
     display: 'flex',
     flexDirection: 'column',

src/components/VaultIdentity/components/VaultIcon/VaultIcon.tsx

@@ -8,12 +8,18 @@ import { selectVaultTokenSymbols } from '../../../../features/data/selectors/tok
 
 export type VaultIconProps = {
   vaultId: VaultEntity['id'];
+  size?: number;
 };
-export const VaultIcon = memo(function VaultIcon({ vaultId }: VaultIconProps) {
+export const VaultIcon = memo(function VaultIcon({ vaultId, size = 48 }: VaultIconProps) {
   const vault = useAppSelector(state => selectVaultById(state, vaultId));
   const vaultTokenSymbols = useAppSelector(state => selectVaultTokenSymbols(state, vault.id));
 
   return (
-    <AssetsImage css={styles.vaultIcon} assetSymbols={vaultTokenSymbols} chainId={vault.chainId} />
+    <AssetsImage
+      size={size}
+      css={styles.vaultIcon}
+      assetSymbols={vaultTokenSymbols}
+      chainId={vault.chainId}
+    />
   );
 });

src/features/data/actions/transact.ts

@@ -84,8 +84,8 @@ export const transactFetchOptions = createAsyncThunk<
 >(
   'transact/fetchOptions',
   async ({ vaultId, mode }, { getState, dispatch }) => {
-    if (mode === TransactMode.Claim) {
-      throw new Error(`Claim mode not supported.`);
+    if (mode === TransactMode.Claim || mode === TransactMode.Boost) {
+      throw new Error(`Claim or Boost mode not supported.`);
     }
 
     const api = await getTransactApi();

src/features/data/reducers/wallet/transact-types.ts

@@ -20,6 +20,7 @@ export enum TransactMode {
   Deposit,
   Withdraw,
   Claim,
+  Boost,
 }
 
 export enum TransactStatus {

src/features/data/selectors/apy.ts

@@ -284,3 +284,7 @@ export function selectApyVaultUIData(
     boosted: 'boostedTotalDaily' in values ? 'active' : undefined,
   };
 }
+
+export const selectBoostApr = (state: BeefyState, boostId: string): number => {
+  return state.biz.apy.rawApy.byBoostId[boostId]?.apr || 0;
+};

src/features/data/selectors/boosts.ts

@@ -1,7 +1,11 @@
 import type { BeefyState } from '../../../redux-types.ts';
 import type { ChainEntity } from '../entities/chain.ts';
 import type { VaultEntity } from '../entities/vault.ts';
-import { selectBoostUserBalanceInToken, selectBoostUserRewardsInToken } from './balance.ts';
+import {
+  selectBoostUserBalanceInToken,
+  selectBoostUserRewardsInToken,
+  selectUserVaultBalanceInShareTokenInCurrentBoost,
+} from './balance.ts';
 import { createCachedSelector } from 're-reselect';
 import { BIG_ZERO } from '../../../helpers/big-number.ts';
 import type { BeefyOffChainRewardsCampaignType } from '../apis/beefy/beefy-api-types.ts';
@@ -78,6 +82,15 @@ export const selectVaultCurrentBoostIdWithStatus = createCachedSelector(
   }
 )((_state: BeefyState, vaultId: VaultEntity['id']) => vaultId);
 
+export const selectUserHasPastBoostAndActiveBoost = createCachedSelector(
+  (state: BeefyState, vaultId: VaultEntity['id']) =>
+    selectPastBoostIdsWithUserBalance(state, vaultId),
+  (state: BeefyState, vaultId: VaultEntity['id']) => selectActiveVaultBoostIds(state, vaultId),
+  (state: BeefyState, vaultId: VaultEntity['id']) => selectPreStakeVaultBoostIds(state, vaultId),
+  (pastBoostIds, activeBoostIds, prestakeBoostIds) =>
+    pastBoostIds.length > 0 && (activeBoostIds.length > 0 || prestakeBoostIds.length > 0)
+)((_state: BeefyState, vaultId: VaultEntity['id']) => vaultId);
+
 export const selectIsVaultPrestakedBoost = createCachedSelector(
   (state: BeefyState, vaultId: VaultEntity['id']) => selectPreStakeVaultBoostIds(state, vaultId),
   prestakeBoostIds => prestakeBoostIds.length > 0
@@ -141,16 +154,6 @@ export const selectPastBoostIdsWithUserBalance = (
   return boostIds;
 };
 
-export const selectShouldDisplayVaultBoost = (state: BeefyState, vaultId: VaultEntity['id']) => {
-  const activeOrPrestakeIds = selectPreStakeOrActiveBoostIds(state, vaultId);
-  if (activeOrPrestakeIds.length > 0) {
-    return true;
-  }
-
-  // OR, there is an expired boost which the user is still staked in
-  return selectPastBoostIdsWithUserBalance(state, vaultId).length > 0;
-};
-
 export const selectVaultsActiveBoostPeriodFinish = (
   state: BeefyState,
   vaultId: BoostPromoEntity['id']
@@ -227,3 +230,16 @@ export const selectBoostActiveRewardTokens = createCachedSelector(
       )
     )
 )((_state: BeefyState, boostId: BoostPromoEntity['id']) => boostId);
+
+export const selectUserHasDepositedInActiveBoost = createCachedSelector(
+  (state: BeefyState, vaultId: VaultEntity['id'], _maybeWalletAddress?: string) =>
+    selectActiveVaultBoostIds(state, vaultId),
+  (state: BeefyState, vaultId: VaultEntity['id'], maybeWalletAddress?: string) =>
+    selectUserVaultBalanceInShareTokenInCurrentBoost(state, vaultId, maybeWalletAddress),
+  (activeBoostIds, balanceInCurrentBoost) => {
+    if (activeBoostIds.length === 0) {
+      return false;
+    }
+    return balanceInCurrentBoost.gt(BIG_ZERO);
+  }
+)((_state: BeefyState, vaultId: VaultEntity['id'], _maybeWalletAddress?: string) => vaultId);

src/features/data/selectors/transact.ts

@@ -27,6 +27,10 @@ import {
 import { selectVaultById } from './vaults.ts';
 import { isSingleGovVault, type VaultEntity } from '../entities/vault.ts';
 import { extractTagFromLpSymbol } from '../../../helpers/tokens.ts';
+import { selectAllVaultBoostIds, selectPastBoostIdsWithUserBalance } from './boosts.ts';
+import { selectPreStakeOrActiveBoostIds } from './boosts.ts';
+import { selectBoostUserRewardsInToken } from './balance.ts';
+import type { BoostReward } from '../apis/balance/balance-types.ts';
 
 export const selectTransactStep = (state: BeefyState) => state.ui.transact.step;
 export const selectTransactVaultId = (state: BeefyState) =>
@@ -350,3 +354,37 @@ export const selectTransactShouldShowClaimsNotification = createSelector(
     );
   }
 );
+
+export const selectTransactShouldShowBoost = (state: BeefyState, vaultId: VaultEntity['id']) => {
+  const activeOrPrestakeIds = selectPreStakeOrActiveBoostIds(state, vaultId);
+  if (activeOrPrestakeIds.length > 0) {
+    return true;
+  }
+
+  // OR, there is an expired boost which the user is still staked in
+  return selectPastBoostIdsWithUserBalance(state, vaultId).length > 0;
+};
+
+export const selectTransactShouldShowBoostNotification = (
+  state: BeefyState,
+  vaultId: VaultEntity['id'],
+  walletAddress?: string
+): boolean => {
+  //check if active boost
+  const activeOrPrestakeIds = selectPreStakeOrActiveBoostIds(state, vaultId);
+  if (activeOrPrestakeIds.length > 0) {
+    return true;
+  }
+
+  const boostIds = selectAllVaultBoostIds(state, vaultId);
+
+  // Check each boost for claimable rewards
+  for (const boostId of boostIds) {
+    const userRewards = selectBoostUserRewardsInToken(state, boostId, walletAddress);
+    if (userRewards.some((reward: BoostReward) => reward.amount.gt(BIG_ZERO))) {
+      return true;
+    }
+  }
+
+  return false;
+};

src/features/vault/components/Actions/Actions.tsx

@@ -1,7 +1,6 @@
 import { lazy, memo } from 'react';
 import type { VaultEntity } from '../../../data/entities/vault.ts';
 import { Transact } from './Transact/Transact.tsx';
-import { Boosts } from './Boosts/Boosts.tsx';
 import { Minters } from './Minter/Minters.tsx';
 import { Migration } from '../Migation/Migration.tsx';
 import { DisplacedBalances } from '../DisplacedBalances/DisplacedBalances.tsx';
@@ -22,7 +21,6 @@ export const Actions = memo(function Actions({ vaultId }: ActionsProps) {
       <DisplacedBalances vaultId={vaultId} />
       <NoSafuRisks vaultId={vaultId} isTitle={true} />
       <Transact vaultId={vaultId} />
-      <Boosts vaultId={vaultId} />
       <Minters vaultId={vaultId} />
     </>
   );

src/features/vault/components/Actions/Boosts/ActionInputButton/ActionInputButton.tsx

@@ -90,7 +90,12 @@ export const ActionInputButton = memo(function ActionInputButton({
         </button>
         <div className={classes.text}>{title}</div>
         <div className={classes.balance}>
-          {balanceLabel} <TokenAmount amount={balance} decimals={mooToken.decimals} />
+          {balanceLabel}{' '}
+          <TokenAmount
+            amount={balance}
+            decimals={mooToken.decimals}
+            css={{ color: 'text.light' }}
+          />
         </div>
       </div>
       <Collapse in={open}>

src/features/vault/components/Actions/Boosts/ActionInputButton/UnstakeInput.tsx

@@ -33,7 +33,7 @@ export const UnstakeInput = memo(function UnstakeInput({
       onSubmit={handleUnstake}
       balance={balance}
       title={t('Boost-Button-Unstake')}
-      balanceLabel={t('Staked')}
+      balanceLabel={t('Available')}
       buttonLabel={t('Boost-Button-Unstake')}
     />
   );