feat: wip

Author: therealemjy

apps/evm/src/components/SelectTokenTextField/TokenList/index.tsx

@@ -5,9 +5,10 @@ import { type InputHTMLAttributes, useMemo, useState } from 'react';
 import { TokenIconWithSymbol } from 'components/TokenIconWithSymbol';
 import { useTranslation } from 'libs/translations';
 import type { Token, TokenBalance } from 'types';
-import { convertMantissaToTokens } from 'utilities';
+import { areTokensEqual, convertMantissaToTokens } from 'utilities';
 
 import { SenaryButton } from '@venusprotocol/ui';
+import { Icon } from 'components';
 import { TextField } from '../../TextField';
 import { useStyles as useParentStyles } from '../styles';
 import { getTokenListItemTestId } from '../testIdGetters';
@@ -18,6 +19,7 @@ export interface TokenListProps {
   tokenBalances: OptionalTokenBalance[];
   onTokenClick: (token: Token) => void;
   displayCommonTokenButtons: boolean;
+  selectedToken: Token;
   'data-testid'?: string;
 }
 
@@ -27,6 +29,7 @@ export const TokenList: React.FC<TokenListProps> = ({
   tokenBalances,
   onTokenClick,
   displayCommonTokenButtons,
+  selectedToken,
   'data-testid': testId,
 }) => {
   const { t } = useTranslation();
@@ -137,6 +140,10 @@ export const TokenList: React.FC<TokenListProps> = ({
                 })}
               </Typography>
             )}
+
+            {!tokenBalance.balanceMantissa && areTokensEqual(tokenBalance.token, selectedToken) && (
+              <Icon name="mark" className="text-green size-5" />
+            )}
           </div>
         ))}
       </div>

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import type { Token } from 'types';
 
-import { TertiaryButton, cn } from '@venusprotocol/ui';
+import { TertiaryButton } from '@venusprotocol/ui';
 import { Icon } from '../Icon';
 import { TokenIcon } from '../TokenIcon';
 import { TokenTextField, type TokenTextFieldProps } from '../TokenTextField';
@@ -17,12 +17,13 @@ import {
 } from './testIdGetters';
 import type { OptionalTokenBalance } from './types';
 
+export * from './types';
+
 export interface SelectTokenTextFieldProps extends Omit<TokenTextFieldProps, 'max' | 'token'> {
   tokenBalances: OptionalTokenBalance[];
   selectedToken: Token;
   onChangeSelectedToken: (token: Token) => void;
   token?: Token;
-  selectedTokenLabel?: string;
   displayCommonTokenButtons?: boolean;
   'data-testid'?: string;
 }
@@ -38,7 +39,6 @@ export const SelectTokenTextField: React.FC<SelectTokenTextFieldProps> = ({
   rightMaxButton,
   'data-testid': testId,
   description,
-  selectedTokenLabel,
   displayCommonTokenButtons = false,
   ...otherTokenTextFieldProps
 }) => {
@@ -72,15 +72,7 @@ export const SelectTokenTextField: React.FC<SelectTokenTextFieldProps> = ({
               <div className="flex items-center gap-x-2">
                 <TokenIcon token={selectedToken} className="h-5 w-5" />
 
-                <div className="text-left">
-                  <div className={cn(!!selectedTokenLabel && 'leading-3')}>
-                    {selectedToken.symbol}
-                  </div>
-
-                  {!!selectedTokenLabel && (
-                    <p className="text-xs text-grey leading-3 font-normal">{selectedTokenLabel}</p>
-                  )}
-                </div>
+                <div className="text-left">{selectedToken.symbol}</div>
               </div>
 
               <Icon
@@ -112,6 +104,7 @@ export const SelectTokenTextField: React.FC<SelectTokenTextFieldProps> = ({
             tokenBalances={tokenBalances}
             data-testid={testId}
             onTokenClick={handleChangeSelectedToken}
+            selectedToken={selectedToken}
             displayCommonTokenButtons={displayCommonTokenButtons}
           />
         )}

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

@@ -225,14 +225,15 @@
     }
   },
   "apyBreakdown": {
-    "borrowApy": "Borrow APY",
+    "borrowApy": "Borrow APY (-)",
     "distributionApy": "Distribution APY",
     "distributionTooltip": "Distribution rewards are initiated and implemented by the decentralized Venus community. The Venus protocol does not guarantee them and accepts no liability.",
     "externalDistributionApy": "{{description}} APY",
     "intrinsicApy": "Intrinsic APY",
     "intrinsicApyTooltip": "APY earned directly from the asset itself (e.g. staking or external rewards), separate from Venus lending yield. The Venus protocol does not guarantee them and accepts no liability.",
     "netApy": {
-      "label": "Net APY"
+      "label": "Net APY",
+      "tooltip": "Sum of the APYs of all the markets involved"
     },
     "offChainApy": "Off-chain APY",
     "offChainApyTooltip": "Additional yield from off-chain activities, such as airdrop or promotional campaigns, managed by third parties. The Venus protocol does not guarantee them and accepts no liability.",
@@ -663,12 +664,10 @@
         "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.",
@@ -716,7 +715,6 @@
     "supply": {
       "collateral": "Collateral"
     },
-    "supplyBalance": "Supply balance ({{ tokenSymbol }})",
     "supplyTabTitle": "Supply",
     "swapDetails": {
       "label": {

apps/evm/src/pages/Market/OperationForm/ApyBreakdown/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ApyBreakdown > renders correct values: 'borrow' 1`] = `"Borrow APY-4.97%Distribution APY0.52%Total APY6.50%"`;
+exports[`ApyBreakdown > renders correct values: 'borrow' 1`] = `"Borrow APY (-)-4.97%Distribution APY0.52%Total APY6.50%"`;
 
-exports[`ApyBreakdown > renders correct values: 'multiple mutations' 1`] = `"Supply APY0.05%Distribution APY0.12%Borrow APY-4.97%Distribution APY0.52%Net APY7.67%"`;
+exports[`ApyBreakdown > renders correct values: 'multiple mutations' 1`] = `"Supply APY0.05%Distribution APY0.12%Borrow APY (-)-4.97%Distribution APY0.52%Net APY7.67%"`;
 
 exports[`ApyBreakdown > renders correct values: 'no mutations' 1`] = `"Total APY0%"`;
 
-exports[`ApyBreakdown > renders correct values: 'repay' 1`] = `"Borrow APY-4.97%Distribution APY0.52%Total APY6.50%"`;
+exports[`ApyBreakdown > renders correct values: 'repay' 1`] = `"Borrow APY (-)-4.97%Distribution APY0.52%Total APY6.50%"`;
 
 exports[`ApyBreakdown > renders correct values: 'supply' 1`] = `"Supply APY0.05%Distribution APY0.12%Total APY1.17%"`;
 

apps/evm/src/pages/Market/OperationForm/ApyBreakdown/index.tsx

@@ -84,16 +84,17 @@ export const ApyBreakdown: React.FC<ApyBreakdownProps> = ({
 
   if (balanceMutations.length > 1) {
     label = t('apyBreakdown.netApy.label');
+    tooltip = t('apyBreakdown.netApy.tooltip');
   } else {
     const balanceMutationAction = balanceMutations[0]?.action;
 
     tooltip =
-      balanceMutationAction === 'borrow' || balanceMutationAction === 'repay'
-        ? t('apyBreakdown.totalApy.borrowApyTooltip')
-        : t('apyBreakdown.totalApy.supplyApyTooltip');
+      balanceMutationAction === 'supply' || balanceMutationAction === 'withdraw'
+        ? t('apyBreakdown.totalApy.supplyApyTooltip')
+        : t('apyBreakdown.totalApy.borrowApyTooltip');
   }
 
-  const rowsDom = rows.map(row => <LabeledInlineContent {...row} key={row.label} />);
+  const rowsDom = rows.map((row, i) => <LabeledInlineContent {...row} key={`${row.label}-${i}`} />);
 
   if (renderType === 'block') {
     return (

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

@@ -2,18 +2,20 @@ import { Icon } from 'components';
 import { useTranslation } from 'libs/translations';
 
 export interface FlowProps {
-  fromTokenSymbol: string;
-  toTokenSymbol: string;
+  borrowedTokenSymbol: string;
+  suppliedTokenSymbol: string;
 }
 
-export const Flow: React.FC<FlowProps> = ({ fromTokenSymbol, toTokenSymbol }) => {
+// 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: fromTokenSymbol,
+          tokenSymbol: borrowedTokenSymbol,
         })}
       </p>
 
@@ -25,7 +27,7 @@ export const Flow: React.FC<FlowProps> = ({ fromTokenSymbol, toTokenSymbol }) =>
 
       <p>
         {t('operationForm.boost.flows.supply', {
-          tokenSymbol: toTokenSymbol,
+          tokenSymbol: suppliedTokenSymbol,
         })}
       </p>
     </div>

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

@@ -1,21 +1,14 @@
 import BigNumber from 'bignumber.js';
 import { useState } from 'react';
 
-import {
-  LabeledInlineContent,
-  Slider,
-  TextField,
-  type TextFieldProps,
-  ValueUpdate,
-} from 'components';
+import { LabeledInlineContent, Slider, TextField, type TextFieldProps } from 'components';
 import { useTranslation } from 'libs/translations';
 import type { Asset } from 'types';
-import { formatTokensToReadableValue, getDecimals } from 'utilities';
+import { getDecimals } from 'utilities';
 
 const MAX_LEVERAGE_FACTOR_DECIMALS = 1;
 
 export interface LeverageSliderProps {
-  fromAsset: Asset;
   toAsset: Asset;
   value: string;
   onChange: (newValue: string) => void;
@@ -24,7 +17,6 @@ export interface LeverageSliderProps {
 
 export const LeverageSlider: React.FC<LeverageSliderProps> = ({
   value,
-  fromAsset,
   toAsset,
   onChange,
   disabled = false,
@@ -66,8 +58,6 @@ export const LeverageSlider: React.FC<LeverageSliderProps> = ({
           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}
@@ -90,40 +80,6 @@ export const LeverageSlider: React.FC<LeverageSliderProps> = ({
           ))}
         </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/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),
+  });
+};