feat: add high price impact acknowledgement to Boost form

.changeset/kind-areas-rescue.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+improve high price impact handling + display USD values of balance updates

apps/evm/package.json

@@ -155,15 +155,7 @@
     "whatwg-fetch": "^3.6.18"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   }
 }

apps/evm/src/clients/api/queries/getSwapQuote/useGetSwapQuote.ts

@@ -45,6 +45,7 @@ export const useGetSwapQuote = (input: TrimmedGetSwapQuoteInput, options?: Parti
           recipientAddress: params.leverageManagerContractAddress,
         }),
       ),
+    retry: false,
     refetchInterval,
     ...options,
   });

apps/evm/src/components/RiskAcknowledgementToggle/index.stories.tsx → apps/evm/src/components/AcknowledgementToggle/index.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta } from '@storybook/react';
 import { State } from 'react-powerplug';
 
-import { RiskAcknowledgementToggle } from '.';
+import { AcknowledgementToggle } from '.';
 
 export default {
-  title: 'Components/RiskAcknowledgementToggle',
-  component: RiskAcknowledgementToggle,
-} as Meta<typeof RiskAcknowledgementToggle>;
+  title: 'Components/AcknowledgementToggle',
+  component: AcknowledgementToggle,
+} as Meta<typeof AcknowledgementToggle>;
 
 const initialState: { value: boolean } = {
   value: false,
@@ -15,7 +15,9 @@ const initialState: { value: boolean } = {
 export const Default = () => (
   <State initial={initialState}>
     {({ state, setState }) => (
-      <RiskAcknowledgementToggle
+      <AcknowledgementToggle
+        tooltip="Fake tooltip"
+        label="Fake label"
         value={state.value}
         onChange={(_event, value) => setState({ value })}
       />

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

@@ -0,0 +1,24 @@
+import { cn } from '@venusprotocol/ui';
+import { NoticeError, Toggle, type ToggleProps } from 'components';
+
+export type AcknowledgementToggleProps = Omit<ToggleProps, 'label' | 'tooltip'> & {
+  label: string;
+  tooltip: string;
+};
+
+export const AcknowledgementToggle: React.FC<AcknowledgementToggleProps> = ({
+  className,
+  label,
+  tooltip,
+  ...toggleProps
+}) => (
+  <div className={cn('space-y-3', className)}>
+    <NoticeError description={tooltip} size="sm" />
+
+    <div className="flex gap-x-3">
+      <Toggle {...toggleProps} />
+
+      <p className="text-sm">{label}</p>
+    </div>
+  </div>
+);

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

@@ -1,7 +1,17 @@
+import type BigNumber from 'bignumber.js';
 import { LabeledInlineContent, type LabeledInlineContentProps, ValueUpdate } from 'components';
 import { useTranslation } from 'libs/translations';
 import type { BalanceMutation, Pool } from 'types';
-import { areAddressesEqual, formatTokensToReadableValue } from 'utilities';
+import {
+  areAddressesEqual,
+  formatCentsToReadableValue,
+  formatTokensToReadableValue,
+} from 'utilities';
+
+interface Row {
+  labeledInlineContentProps: LabeledInlineContentProps;
+  readableAmountDollars?: string;
+}
 
 export interface BalanceUpdatesProps {
   pool: Pool;
@@ -16,9 +26,7 @@ export const BalanceUpdates: React.FC<BalanceUpdatesProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const balanceUpdateRows: LabeledInlineContentProps[] = balanceMutations.reduce<
-    LabeledInlineContentProps[]
-  >((acc, balanceMutation) => {
+  const balanceUpdateRows: Row[] = balanceMutations.reduce<Row[]>((acc, balanceMutation) => {
     // Skip VAI updates
     if (balanceMutation.type === 'vai') {
       return acc;
@@ -53,35 +61,58 @@ export const BalanceUpdates: React.FC<BalanceUpdatesProps> = ({
       simulatedBalanceTokens = simulatedAsset?.userSupplyBalanceTokens;
     }
 
-    const row: LabeledInlineContentProps = {
-      iconSrc: asset.vToken.underlyingToken,
-      label,
-      children: (
-        <ValueUpdate
-          original={formatTokensToReadableValue({
-            token: asset.vToken.underlyingToken,
-            value: balanceTokens,
-            addSymbol: false,
-          })}
-          update={
-            simulatedBalanceTokens &&
-            formatTokensToReadableValue({
-              token: asset.vToken.underlyingToken,
-              value: simulatedBalanceTokens,
-              addSymbol: false,
-            })
-          }
-        />
-      ),
+    const original = formatTokensToReadableValue({
+      token: asset.vToken.underlyingToken,
+      value: balanceTokens,
+      addSymbol: false,
+    });
+
+    const update =
+      simulatedBalanceTokens &&
+      formatTokensToReadableValue({
+        token: asset.vToken.underlyingToken,
+        value: simulatedBalanceTokens,
+        addSymbol: false,
+      });
+
+    const updateAmountTokens = simulatedBalanceTokens
+      ? simulatedBalanceTokens.minus(balanceTokens)
+      : undefined;
+
+    let readableAmountDollars = updateAmountTokens
+      ? formatCentsToReadableValue({
+          value: asset.tokenPriceCents.times(updateAmountTokens).absoluteValue(),
+        })
+      : undefined;
+
+    if (readableAmountDollars && updateAmountTokens) {
+      const sign = updateAmountTokens.isLessThan(0) ? '-' : '+';
+      readableAmountDollars = `${sign} ${readableAmountDollars}`;
+    }
+
+    const row: Row = {
+      readableAmountDollars,
+      labeledInlineContentProps: {
+        iconSrc: asset.vToken.underlyingToken,
+        label,
+        children: <ValueUpdate original={original} update={update} />,
+      },
     };
 
     return [...acc, row];
   }, []);
 
   return (
     <div className="space-y-2">
-      {balanceUpdateRows.map(row => (
-        <LabeledInlineContent {...row} key={row.label} />
+      {balanceUpdateRows.map(({ labeledInlineContentProps, readableAmountDollars }) => (
+        <div className="flex flex-col items-end">
+          <LabeledInlineContent
+            {...labeledInlineContentProps}
+            key={labeledInlineContentProps.label}
+          />
+
+          {readableAmountDollars && <p className="text-grey text-sm">{readableAmountDollars}</p>}
+        </div>
       ))}
     </div>
   );

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

@@ -12,7 +12,7 @@ export const ValueUpdate: React.FC<ValueUpdateProps> = ({ className, original, u
 
     {update && (
       <>
-        <Icon name="arrowShaft" className={cn('w-4 h-4 text-offWhite')} />
+        <Icon name="arrowShaft" className="w-4 h-4 text-offWhite" />
 
         {update}
       </>

apps/evm/src/components/index.ts

@@ -50,7 +50,7 @@ export * from './Apy';
 export * from './Page';
 export * from './Carousel';
 export * from './HealthFactorPill';
-export * from './RiskAcknowledgementToggle';
+export * from './AcknowledgementToggle';
 export * from './AccountHealthBar';
 export * from './AreaChart';
 export * from './ChartTooltipContent';

apps/evm/src/constants/swap.ts

@@ -1,4 +1,4 @@
 export const DEFAULT_SLIPPAGE_TOLERANCE_PERCENTAGE = 0.5;
-export const HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE = 5;
+export const HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE = 3;
 export const MAXIMUM_PRICE_IMPACT_THRESHOLD_PERCENTAGE = 10;
 export const HIGH_SLIPPAGE_PERCENTAGE = 5;

apps/evm/src/containers/MarketTable/__tests__/__snapshots__/index.eMode.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MarketTable - Feature flag enabled: E-mode > renders correctly when user does not have any E-mode group enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.17%-6.48%100 XVS$127.86USDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.17%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable - Feature flag enabled: E-mode > renders correctly when user does not have any E-mode group enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.16%-6.48%100 XVS$127.86USDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.16%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;
 
-exports[`MarketTable - Feature flag enabled: E-mode > renders correctly when user has an E-mode group enabled 1`] = `"Paused assetsMy assets onlyE-mode assets onlyAssetAPY APY CollateralWalletXVS0.17%-6.48%100 XVS$127.86USDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.17%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable - Feature flag enabled: E-mode > renders correctly when user has an E-mode group enabled 1`] = `"Paused assetsMy assets onlyE-mode assets onlyAssetAPY APY CollateralWalletXVS0.16%-6.48%100 XVS$127.86USDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.16%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;
 
-exports[`MarketTable - Feature flag enabled: E-mode > shows E-mode assets only if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyE-mode assets onlyAssetAPY APY CollateralWalletXVS0.17%-6.48%100 XVS$127.86USDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.17%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable - Feature flag enabled: E-mode > shows E-mode assets only if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyE-mode assets onlyAssetAPY APY CollateralWalletXVS0.16%-6.48%100 XVS$127.86USDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.16%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;

apps/evm/src/containers/MarketTable/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MarketTable > filters by search input 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletBUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVBUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable > filters by search input 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletBUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVBUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;
 
-exports[`MarketTable > renders with pool data 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.17%-6.48%100 XVS$127.86USDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.17%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable > renders with pool data 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.16%-6.48%100 XVS$127.86USDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.16%APY -6.48%CollateralWallet100 XVS$127.86USDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;
 
-exports[`MarketTable > shows paused assets if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.17%-6.48%100 XVS$127.86USDC5.99%-7.94%-9.18%0 USDC$0USDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.17%APY -6.48%CollateralWallet100 XVS$127.86USDCAPY 5.99%APY -7.94%-9.18%CollateralWallet0 USDC$0USDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable > shows paused assets if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletXVS0.16%-6.48%100 XVS$127.86USDC5.99%-7.94%-9.17%0 USDC$0USDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVXVSAPY 0.16%APY -6.48%CollateralWallet100 XVS$127.86USDCAPY 5.99%APY -7.94%-9.17%CollateralWallet0 USDC$0USDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;
 
-exports[`MarketTable > shows user assets only if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletUSDT4.02%5.77%-5.50%-6.51%900 USDT$900BUSD3.56%5.32%-5.82%110 BUSD$110Sort bySupply APY / LTVUSDTAPY 4.02%5.77%APY -5.50%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.32%APY -5.82%CollateralWallet110 BUSD$110"`;
+exports[`MarketTable > shows user assets only if controls are enabled and corresponding toggle is enabled 1`] = `"Paused assetsMy assets onlyAssetAPY APY CollateralWalletUSDT4.01%5.76%-5.49%-6.51%900 USDT$900BUSD3.56%5.31%-5.81%110 BUSD$110Sort bySupply APY / LTVUSDTAPY 4.01%5.76%APY -5.49%-6.51%CollateralWallet900 USDT$900BUSDAPY 3.56%5.31%APY -5.81%CollateralWallet110 BUSD$110"`;

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

@@ -726,6 +726,7 @@
     },
     "repayTab": {
       "collateralTabTitle": "Collateral",
+      "noCollateralWarning": "You do not have any collateral to repay with.",
       "title": "Repay",
       "walletBalanceTabTitle": "Wallet"
     },
@@ -734,10 +735,6 @@
       "highRisk": "High risk",
       "lowRisk": "Low risk"
     },
-    "riskyOperation": {
-      "toggleLabel": "I acknowledge the risks involved",
-      "warning": "Your health factor will be low after this transaction, increasing the risk of liquidation"
-    },
     "safeMaxButtonLabel": "SAFE MAX",
     "submitButtonLabel": {
       "boost": "Boost",
@@ -767,6 +764,16 @@
     "warning": {
       "swappingWithHighPriceImpactWarning": "The price impact of this transaction is high, which might indicate an unfavorable swap. Make sure the exchange rate and the amount of tokens exchanged meet your expectations."
     },
+    "acknowledgements": {
+      "highPriceImpact": {
+        "label": "I acknowledge the high price impact",
+        "tooltip": "This transaction is expected to have a price impact of over {{priceImpactPercentage}}%"
+      },
+      "riskyOperation": {
+        "label": "I acknowledge the risks involved",
+        "tooltip": "Your health factor will be low after this transaction, increasing the risk of liquidation"
+      }
+    },
     "withdrawTabTitle": "Withdraw"
   },
   "pagination": {

apps/evm/src/pages/Account/Pools/Positions/__tests__/__snapshots__/index.eMode.spec.tsx.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Positions - Feature flag enabled: E-mode > displays E-mode banner correctly when user has enabled an E-mode group 1`] = `"VenusHealth factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDT4.02%5.77%100 USDT$100USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDTAPY 4.02%5.77%Balance100 USDT$100CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedE-mode: StablecoinsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsE-mode: StablecoinsSuppliedBorrowedE-mode: StablecoinsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDT4.02%5.77%100 USDT$100USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDTAPY 4.02%5.77%Balance100 USDT$100CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;
+exports[`Positions - Feature flag enabled: E-mode > displays E-mode banner correctly when user has enabled an E-mode group 1`] = `"VenusHealth factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0.02%Daily earnings$1Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.16%90 XVS$115.08USDT4.01%5.76%100 USDT$100USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.16%Balance90 XVS$115.08CollateralUSDTAPY 4.01%5.76%Balance100 USDT$100CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedE-mode: StablecoinsAssetAPY Balancesorted descending% of limitBUSD-5.81%50 BUSD$500%USDT-5.49%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.81%Balance50 BUSD$50% of limit0%USDTAPY -5.49%-6.51%Balance40 USDT$40% of limit0%AssetsE-mode: StablecoinsSuppliedBorrowedE-mode: StablecoinsAssetAPY Balancesorted descendingCollateralXVS0.16%90 XVS$115.08USDT4.01%5.76%100 USDT$100USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.16%Balance90 XVS$115.08CollateralUSDTAPY 4.01%5.76%Balance100 USDT$100CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;