feat: update SwapDetails component UI

Author: therealemjy

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

@@ -1,7 +1,6 @@
 import { TertiaryButton, cn } from '@venusprotocol/ui';
 
 import { Icon, LabeledInlineContent, Modal, TextField, type TextFieldProps } from 'components';
-import PLACEHOLDER_KEY from 'constants/placeholderKey';
 import {
   DEFAULT_SLIPPAGE_TOLERANCE_PERCENTAGE,
   HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE,
@@ -10,26 +9,20 @@ import { useUserChainSettings } from 'hooks/useUserChainSettings';
 import { useTranslation } from 'libs/translations';
 import { useState } from 'react';
 import type { Token } from 'types';
-import {
-  formatPercentageToReadableValue,
-  formatTokensToReadableValue,
-  getDecimals,
-} from 'utilities';
+import { formatPercentageToReadableValue, getDecimals } from 'utilities';
 
 export const slippageToleranceOptions = ['0.1', String(DEFAULT_SLIPPAGE_TOLERANCE_PERCENTAGE), '1'];
 const MAX_SLIPPAGE_TOLERANCE_DECIMALS = 2;
 
 export interface SwapDetailsProps extends React.HTMLAttributes<HTMLDivElement> {
   fromToken: Token;
   toToken: Token;
-  exchangeRate?: BigNumber;
   priceImpactPercentage?: number;
 }
 
 export const SwapDetails: React.FC<SwapDetailsProps> = ({
   fromToken,
   toToken,
-  exchangeRate,
   priceImpactPercentage,
   ...otherProps
 }) => {
@@ -38,12 +31,6 @@ export const SwapDetails: React.FC<SwapDetailsProps> = ({
   const [userChainSettings, setUserChainSettings] = useUserChainSettings();
   const [isSlippageToleranceModalOpen, setIsSlippageToleranceModalOpen] = useState(false);
 
-  const readableExchangeRate = formatTokensToReadableValue({
-    value: exchangeRate,
-    token: toToken,
-    addSymbol: false,
-  });
-
   const readablePriceImpact = formatPercentageToReadableValue(priceImpactPercentage);
 
   const userSlippageTolerancePercentage = userChainSettings.slippageTolerancePercentage
@@ -80,18 +67,11 @@ export const SwapDetails: React.FC<SwapDetailsProps> = ({
 
   return (
     <>
-      <div className="space-y-2" {...otherProps}>
-        <LabeledInlineContent label={t('swapDetails.exchangeRate.label')}>
-          {exchangeRate !== undefined
-            ? t('swapDetails.exchangeRate.value', {
-                fromTokenSymbol: fromToken.symbol,
-                toTokenSymbol: toToken.symbol,
-                rate: readableExchangeRate,
-              })
-            : PLACEHOLDER_KEY}
-        </LabeledInlineContent>
-
-        <LabeledInlineContent label={t('swapDetails.slippageTolerance.label')}>
+      <div className="flex items-center justify-between gap-x-2" {...otherProps}>
+        <LabeledInlineContent
+          label={t('swapDetails.slippageTolerance.label')}
+          className="justify-start space-x-1 w-auto text-sm"
+        >
           <div className="flex items-center justify-center gap-x-1">
             {readableUserSlippageTolerance}
 
@@ -105,7 +85,7 @@ export const SwapDetails: React.FC<SwapDetailsProps> = ({
 
         <LabeledInlineContent
           label={t('swapDetails.priceImpact.label')}
-          tooltip={t('swapDetails.priceImpact.tooltip')}
+          className="justify-start space-x-1 w-auto text-sm"
         >
           <span
             className={cn(

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

@@ -989,13 +989,8 @@
     }
   },
   "swapDetails": {
-    "exchangeRate": {
-      "label": "Exchange rate",
-      "value": "1 {{fromTokenSymbol}} ≈ {{rate}} {{toTokenSymbol}}"
-    },
     "priceImpact": {
-      "label": "Price impact",
-      "tooltip": "Difference between the market price and estimated price due to trade size."
+      "label": "Price impact"
     },
     "slippageTolerance": {
       "label": "Slippage tolerance"
@@ -1538,4 +1533,4 @@
     },
     "withdrawTabTitle": "Withdraw"
   }
-}
+}

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

@@ -7,10 +7,11 @@ import {
   LabeledInlineContent,
   type OptionalTokenBalance,
   RiskAcknowledgementToggle,
-  SelectTokenTextField,
+  TokenTextField,
 } from 'components';
 import { HEALTH_FACTOR_MODERATE_THRESHOLD } from 'constants/healthFactor';
 import { ConnectWallet } from 'containers/ConnectWallet';
+import { SwapDetails } from 'containers/SwapDetails';
 import useDebounceValue from 'hooks/useDebounceValue';
 import { useSimulateBalanceMutations } from 'hooks/useSimulateBalanceMutations';
 import { useAnalytics } from 'libs/analytics';
@@ -192,11 +193,10 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
   });
 
   // Convert input amount to percentage of limit
-  const riskSliderValue = new BigNumber(formValues.amountTokens || 0)
-    .multipliedBy(100)
-    .div(limitTokens)
-    .dp(1)
-    .toNumber();
+  const riskSliderValue =
+    limitTokens.isGreaterThan(0) && Number(formValues.amountTokens) > 0
+      ? new BigNumber(formValues.amountTokens).multipliedBy(100).div(limitTokens).dp(1).toNumber()
+      : 0;
 
   const handleRiskSliderChange = (riskLevelPercentage: number) => {
     const amountTokens = limitTokens
@@ -269,20 +269,11 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
             suppliedTokenSymbol={suppliedAsset.vToken.underlyingToken.symbol}
           />
 
-          <SelectTokenTextField
-            data-testid={TEST_IDS.selectTokenTextField}
+          <TokenTextField
             name="amountTokens"
             displayTokenIcon
             token={borrowedAsset.vToken.underlyingToken}
-            selectedToken={suppliedAsset.vToken.underlyingToken}
-            tokenBalances={tokenBalances}
             value={formValues.amountTokens}
-            onChangeSelectedToken={suppliedToken =>
-              setFormValues(currentFormValues => ({
-                ...currentFormValues,
-                suppliedToken,
-              }))
-            }
             onChange={amountTokens => {
               captureAmountSetAnalyticEvent({
                 amountTokens,
@@ -314,7 +305,7 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
       </div>
 
       <ConnectWallet
-        className={cn('space-y-6', accountAddress ? 'mt-4' : 'mt-6')}
+        className={cn('space-y-6', accountAddress ? 'mt-2' : 'mt-6')}
         // TODO: add analytic variant
       >
         <div className="space-y-4">
@@ -331,8 +322,6 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
             </button>
           </LabeledInlineContent>
 
-          {/* TODO: add spending limit */}
-
           <RiskSlider
             disabled={isDisabled}
             value={riskSliderValue}
@@ -341,6 +330,8 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
 
           <Delimiter />
 
+          {/* TODO: add step to allow Comptroller contract as delegate */}
+
           <OperationDetails
             action="borrow"
             pool={pool}
@@ -356,13 +347,19 @@ const BoostForm: React.FC<BoostFormProps> = ({ asset: borrowedAsset, pool, onSub
           )}
         </div>
 
-        <SubmitSection
-          isFormSubmitting={isSubmitting}
-          isFormValid={isFormValid}
-          formErrorCode={formError?.code}
-        />
+        <div className="space-y-3">
+          <SubmitSection
+            isFormSubmitting={isSubmitting}
+            isFormValid={isFormValid}
+            formErrorCode={formError?.code}
+          />
 
-        {/* TODO: add swap details */}
+          <SwapDetails
+            fromToken={borrowedAsset.vToken.underlyingToken}
+            toToken={suppliedAsset.vToken.underlyingToken}
+            priceImpactPercentage={swap?.priceImpactPercentage}
+          />
+        </div>
       </ConnectWallet>
     </form>
   );

apps/evm/src/pages/Market/OperationForm/RepayForm/__tests__/__snapshots__/indexIntegratedSwap.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RepayForm - Feature flag enabled: integratedSwap > displays correct swap details 1`] = `"You will repay≈ 999.999999 XVSExchange rate1 BUSD ≈ 0.003333 XVSSlippage tolerance0.5%Price impact< 0.01%"`;
+exports[`RepayForm - Feature flag enabled: integratedSwap > displays correct swap details 1`] = `"You will repay≈ 999.999999 XVSSlippage tolerance0.5%Price impact< 0.01%"`;
 
 exports[`RepayForm - Feature flag enabled: integratedSwap > displays correct swap details 2`] = `"You will repay 999.999999 XVS using 299.99K BUSD"`;
 

apps/evm/src/pages/Market/OperationForm/SupplyForm/__tests__/__snapshots__/indexIntegratedSwap.spec.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`SupplyForm - Feature flag enabled: integratedSwap > displays correct swap details 1`] = `"You will supply≈ 8.9K XVSExchange rate1 BUSD ≈ 0.029666 XVSSlippage tolerance0.5%Price impact< 0.01%"`;
+exports[`SupplyForm - Feature flag enabled: integratedSwap > displays correct swap details 1`] = `"You will supply≈ 8.9K XVSSlippage tolerance0.5%Price impact< 0.01%"`;
 
 exports[`SupplyForm - Feature flag enabled: integratedSwap > displays correct swap details 2`] = `"You will supply 8.9K XVS using 299.99K BUSD"`;