feat: add base Boost tab

Author: therealemjy

apps/evm/src/components/Slider/index.tsx

@@ -9,6 +9,7 @@ export interface SliderProps {
   min?: number;
   disabled?: boolean;
   className?: string;
+  rangeClassName?: string;
 }
 
 export const Slider: React.FC<SliderProps> = ({
@@ -19,6 +20,7 @@ export const Slider: React.FC<SliderProps> = ({
   step,
   disabled = false,
   className,
+  rangeClassName,
 }) => (
   <SliderPrimitive.Root
     data-slot="slider"
@@ -35,7 +37,10 @@ export const Slider: React.FC<SliderProps> = ({
       data-slot="slider-track"
       className="bg-lightGrey relative grow overflow-hidden rounded-full h-2 w-full"
     >
-      <SliderPrimitive.Range data-slot="slider-range" className="bg-blue absolute h-full" />
+      <SliderPrimitive.Range
+        data-slot="slider-range"
+        className={cn('bg-blue absolute h-full', rangeClassName)}
+      />
     </SliderPrimitive.Track>
 
     <SliderPrimitive.Thumb

apps/evm/src/containers/AssetAccessor/DisabledActionNotice/index.tsx

@@ -26,6 +26,10 @@ const DisabledActionNotice: React.FC<DisabledActionNoticeProps> = ({ token, acti
       return t('assetAccessor.disabledActionNotice.borrow');
     }
 
+    if (action === 'boost') {
+      return t('assetAccessor.disabledActionNotice.boost');
+    }
+
     if (action === 'repay') {
       return t('assetAccessor.disabledActionNotice.repay');
     }

apps/evm/src/containers/AssetAccessor/index.tsx

@@ -36,11 +36,14 @@ const AssetAccessor: React.FC<AssetAccessorProps> = ({
     return <Spinner />;
   }
 
-  if (asset.disabledTokenActions.includes(action) || (action === 'borrow' && !asset.isBorrowable)) {
+  if (
+    asset.disabledTokenActions.includes(action) ||
+    ((action === 'borrow' || action === 'boost') && !asset.isBorrowable)
+  ) {
     return <DisabledActionNotice token={vToken.underlyingToken} action={action} />;
   }
 
-  if (action === 'borrow' && !asset.isBorrowableByUser) {
+  if ((action === 'borrow' || action === 'boost') && !asset.isBorrowableByUser) {
     return (
       <NoticeWarning
         description={

apps/evm/src/hooks/useIsFeatureEnabled/index.tsx

@@ -142,6 +142,9 @@ export const featureFlags = {
   ],
   transactionHistory: [ChainId.BSC_MAINNET, ChainId.ETHEREUM, ChainId.UNICHAIN_MAINNET],
   leveragedPositions: [
+    // DEV ONLY
+    ChainId.BSC_MAINNET,
+    // END DEV ONLY
     ChainId.BSC_TESTNET,
     ChainId.OPBNB_TESTNET,
     ChainId.SEPOLIA,

apps/evm/src/libs/tokens/infos/disabledTokenActions/bscMainnet.ts

@@ -5,7 +5,7 @@ export const disabledTokenActions: DisabledTokenAction[] = [
   // BNB
   {
     address: NATIVE_TOKEN_ADDRESS,
-    disabledActions: ['swapAndSupply'],
+    disabledActions: ['swapAndSupply', 'boost'],
   },
   // vAAVE - Core pool
   {

apps/evm/src/pages/Market/OperationForm/BoostForm/Flow/index.tsx

@@ -0,0 +1,35 @@
+import { Icon } from 'components';
+import { useTranslation } from 'libs/translations';
+
+export interface FlowProps {
+  borrowedTokenSymbol: string;
+  suppliedTokenSymbol: string;
+}
+
+// TODO: add tests
+
+export const Flow: React.FC<FlowProps> = ({ borrowedTokenSymbol, suppliedTokenSymbol }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center gap-x-[2px] text-grey text-sm">
+      <p>
+        {t('operationForm.boost.flows.borrow', {
+          tokenSymbol: borrowedTokenSymbol,
+        })}
+      </p>
+
+      <Icon className="w-5 h-5" name="chevronRight" />
+
+      <p>{t('operationForm.boost.flows.swap')}</p>
+
+      <Icon className="w-5 h-5" name="chevronRight" />
+
+      <p>
+        {t('operationForm.boost.flows.supply', {
+          tokenSymbol: suppliedTokenSymbol,
+        })}
+      </p>
+    </div>
+  );
+};

apps/evm/src/pages/Market/OperationForm/BoostForm/RiskSlider/index.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@venusprotocol/ui';
+
+import { Slider } from 'components';
+import { useTranslation } from 'libs/translations';
+
+export interface RiskSliderProps {
+  value: number;
+  onChange: (newValue: number) => void;
+  disabled?: boolean;
+}
+
+export const RiskSlider: React.FC<RiskSliderProps> = ({ value, onChange, disabled = false }) => {
+  const { t } = useTranslation();
+
+  let rangeClassName = 'bg-green';
+
+  if (value > 75) {
+    rangeClassName = 'bg-red';
+  } else if (value >= 50) {
+    rangeClassName = 'bg-orange';
+  } else if (value >= 25) {
+    rangeClassName = 'bg-yellow';
+  }
+
+  return (
+    <div className="space-y-2">
+      <Slider
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        max={100}
+        step={1}
+        rangeClassName={cn('transition-colors', rangeClassName)}
+      />
+
+      <div className="flex justify-between text-grey text-xs">
+        <p>{t('operationForm.riskSlider.lowRisk')}</p>
+
+        <p>{t('operationForm.riskSlider.highRisk')}</p>
+      </div>
+    </div>
+  );
+};

apps/evm/src/pages/Market/OperationForm/BoostForm/SubmitSection/index.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+import { PrimaryButton } from 'components';
+import { SwitchChain } from 'containers/SwitchChain';
+import { useTranslation } from 'libs/translations';
+import type { FormErrorCode } from '../useForm';
+
+export interface SubmitSectionProps {
+  isFormValid: boolean;
+  isFormSubmitting: boolean;
+  formErrorCode?: FormErrorCode;
+}
+
+export const SubmitSection: React.FC<SubmitSectionProps> = ({
+  isFormValid,
+  isFormSubmitting,
+  formErrorCode,
+}) => {
+  const { t } = useTranslation();
+
+  const submitButtonLabel = useMemo(() => {
+    if (!isFormValid && formErrorCode !== 'REQUIRES_RISK_ACKNOWLEDGEMENT') {
+      return t('operationForm.submitButtonLabel.enterValidAmount');
+    }
+
+    return t('operationForm.submitButtonLabel.boost');
+  }, [isFormValid, t, formErrorCode]);
+
+  let dom = (
+    <PrimaryButton
+      type="submit"
+      loading={isFormSubmitting}
+      disabled={!isFormValid || isFormSubmitting}
+      className="w-full"
+    >
+      {submitButtonLabel}
+    </PrimaryButton>
+  );
+
+  if (isFormValid) {
+    dom = <SwitchChain>{dom}</SwitchChain>;
+  }
+
+  return dom;
+};
+
+export default SubmitSection;

apps/evm/src/pages/Market/OperationForm/BoostForm/calculateUserMaxBorrowTokens/index.tsx

@@ -0,0 +1,27 @@
+import BigNumber from 'bignumber.js';
+
+import type { Asset } from 'types';
+import { clampToZero } from 'utilities';
+
+export const calculateUserMaxBorrowTokens = ({
+  borrowedAsset,
+  suppliedAsset,
+  userBorrowingPowerCents,
+}: { borrowedAsset: Asset; suppliedAsset: Asset; userBorrowingPowerCents: BigNumber }) => {
+  const userMaxBorrowCents = userBorrowingPowerCents.div(
+    new BigNumber(1).minus(suppliedAsset.userCollateralFactor),
+  );
+
+  const userMaxBorrowTokens = userMaxBorrowCents
+    .div(borrowedAsset.tokenPriceCents)
+    .dp(borrowedAsset.vToken.underlyingToken.decimals);
+
+  const marginWithBorrowCapTokens = borrowedAsset.borrowCapTokens.minus(
+    borrowedAsset.borrowBalanceTokens,
+  );
+
+  // Take borrow cap in consideration
+  return clampToZero({
+    value: BigNumber.min(userMaxBorrowTokens, marginWithBorrowCapTokens, borrowedAsset.cashTokens),
+  });
+};