feat: add base Boost tab

Author: therealemjy

apps/evm/src/libs/translations/translations/en.json

@@ -658,8 +658,17 @@
   },
   "operationForm": {
     "availableAmount": "Available",
+    "boost": {
+      "flows": {
+        "borrow": "Borrow {{ tokenSymbol }}",
+        "supply": "Supply {{ tokenSymbol }}",
+        "swap": "Swap"
+      },
+      "supply": "Supply"
+    },
     "boostTabAltText": "Rocket icon",
     "boostTabTitle": "Boost",
+    "borrowBalance": "Borrow balance ({{ tokenSymbol }})",
     "borrowTabTitle": "Borrow",
     "error": {
       "borrowCapReached": "The borrow cap of {{assetBorrowCap}} has been reached for this pool. You can not borrow from this market anymore until loans are repaid or its borrow cap is increased.",
@@ -677,6 +686,10 @@
       "unwrappingUnsupported": "Unwrapping unsupported",
       "wrappingUnsupported": "Wrapping unsupported"
     },
+    "leverage": {
+      "label": "Leverage",
+      "tooltip": "TRANSLATION NEEDED"
+    },
     "receiveNativeToken": {
       "label": "Receive {{tokenSymbol}}",
       "tooltip": "Unwrap borrowed {{wrappedNativeTokenSymbol}} to {{nativeTokenSymbol}}"
@@ -693,6 +706,7 @@
     },
     "safeMaxButtonLabel": "SAFE MAX",
     "submitButtonLabel": {
+      "boost": "Boost",
       "borrow": "Borrow",
       "enterValidAmount": "Enter valid amount",
       "repay": "Repay",
@@ -702,6 +716,7 @@
     "supply": {
       "collateral": "Collateral"
     },
+    "supplyBalance": "Supply balance ({{ tokenSymbol }})",
     "supplyTabTitle": "Supply",
     "swapDetails": {
       "label": {
@@ -1523,4 +1538,4 @@
     },
     "withdrawTabTitle": "Withdraw"
   }
-}
+}

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

@@ -0,0 +1,33 @@
+import { Icon } from 'components';
+import { useTranslation } from 'libs/translations';
+
+export interface FlowProps {
+  fromTokenSymbol: string;
+  toTokenSymbol: string;
+}
+
+export const Flow: React.FC<FlowProps> = ({ fromTokenSymbol, toTokenSymbol }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex items-center gap-x-[2px] text-grey text-sm">
+      <p>
+        {t('operationForm.boost.flows.borrow', {
+          tokenSymbol: fromTokenSymbol,
+        })}
+      </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: toTokenSymbol,
+        })}
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,129 @@
+import BigNumber from 'bignumber.js';
+import { useState } from 'react';
+
+import {
+  LabeledInlineContent,
+  Slider,
+  TextField,
+  type TextFieldProps,
+  ValueUpdate,
+} from 'components';
+import { useTranslation } from 'libs/translations';
+import type { Asset } from 'types';
+import { formatTokensToReadableValue, getDecimals } from 'utilities';
+
+const MAX_LEVERAGE_FACTOR_DECIMALS = 1;
+
+export interface LeverageSliderProps {
+  fromAsset: Asset;
+  toAsset: Asset;
+  value: string;
+  onChange: (newValue: string) => void;
+  disabled?: boolean;
+}
+
+export const LeverageSlider: React.FC<LeverageSliderProps> = ({
+  value,
+  fromAsset,
+  toAsset,
+  onChange,
+  disabled = false,
+}) => {
+  const { t } = useTranslation();
+  const [isLeverageFactorInputFocused, setIsLeverageFactorInputFocused] = useState(false);
+
+  const maxLeverageFactor = Number(
+    new BigNumber(1 / (1 - toAsset.userCollateralFactor)).toFixed(1, BigNumber.ROUND_DOWN),
+  );
+
+  const step = maxLeverageFactor / 5;
+  const steps = [];
+
+  for (let v = 0; v < maxLeverageFactor + 0.0001; v += step) {
+    steps.push(Number(v.toFixed(1)));
+  }
+
+  steps[steps.length - 1] = maxLeverageFactor;
+
+  const handleChange: TextFieldProps['onChange'] = ({ currentTarget: { value } }) => {
+    const valueDecimals = getDecimals({ value });
+
+    if (valueDecimals <= MAX_LEVERAGE_FACTOR_DECIMALS) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <LabeledInlineContent
+        label={t('operationForm.leverage.label')}
+        tooltip={t('operationForm.leverage.tooltip')}
+      >
+        <TextField
+          disabled={disabled}
+          onChange={handleChange}
+          onFocus={() => setIsLeverageFactorInputFocused(true)}
+          onBlur={() => setIsLeverageFactorInputFocused(false)}
+          value={isLeverageFactorInputFocused ? value : `${value || 0}x`}
+          step={0.1}
+          variant="tertiary"
+          size="xxs"
+          className="w-[54px]"
+          type={isLeverageFactorInputFocused ? 'number' : 'string'}
+          min={0}
+          max={maxLeverageFactor}
+        />
+      </LabeledInlineContent>
+
+      <div className="space-y-2">
+        <Slider
+          disabled={disabled}
+          value={Number(value)}
+          onChange={value => onChange(String(value))}
+          max={maxLeverageFactor}
+          step={0.1}
+        />
+
+        <div className="flex justify-between">
+          {steps.map(step => (
+            <p className="text-grey text-xs">{step}x</p>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <LabeledInlineContent
+          label={t('operationForm.supplyBalance', {
+            tokenSymbol: toAsset.vToken.underlyingToken.symbol,
+          })}
+          iconSrc={toAsset.vToken.underlyingToken}
+        >
+          <ValueUpdate
+            original={formatTokensToReadableValue({
+              value: toAsset.userSupplyBalanceTokens,
+              token: toAsset.vToken.underlyingToken,
+              addSymbol: false,
+            })}
+            // TODO: add hypothetical supply balance
+          />
+        </LabeledInlineContent>
+
+        <LabeledInlineContent
+          label={t('operationForm.borrowBalance', {
+            tokenSymbol: fromAsset.vToken.underlyingToken.symbol,
+          })}
+          iconSrc={fromAsset.vToken.underlyingToken}
+        >
+          <ValueUpdate
+            original={formatTokensToReadableValue({
+              value: fromAsset.userBorrowBalanceTokens,
+              token: fromAsset.vToken.underlyingToken,
+              addSymbol: false,
+            })}
+            // TODO: add hypothetical borrow balance
+          />
+        </LabeledInlineContent>
+      </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;