feat(evm): update swap and repay

Author: david-sun-venus

apps/evm/src/clients/api/mutations/useSwapTokensAndRepay/index.ts

@@ -84,7 +84,7 @@ type SwapAndRepay = AnalyticEvent & {
   toTokenAmountTokens: number;
   priceImpactPercentage: number;
   slippageTolerancePercentage: number;
-  exchangeRate: number;
+  exchangeRate?: number;
   repaidFullLoan: boolean;
 };
 

apps/evm/src/libs/analytics/useAnalytics/types.ts

@@ -5,10 +5,9 @@ import { cn } from '@venusprotocol/ui';
 import { ApproveTokenSteps, type ApproveTokenStepsProps, PrimaryButton } from 'components';
 import { HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE } from 'constants/swap';
 import { useTranslation } from 'libs/translations';
-import type { Swap, Token } from 'types';
+import type { SwapQuote, Token } from 'types';
 
 import { SwitchChain } from 'containers/SwitchChain';
-import SwapSummary from '../../../SwapSummary';
 
 export interface SubmitSectionProps {
   isFormValid: boolean;
@@ -20,7 +19,7 @@ export interface SubmitSectionProps {
   isApproveFromTokenLoading: ApproveTokenStepsProps['isApproveTokenLoading'];
   isFromTokenWalletSpendingLimitLoading: ApproveTokenStepsProps['isWalletSpendingLimitLoading'];
   isRevokeFromTokenWalletSpendingLimitLoading: boolean;
-  swap?: Swap;
+  swapQuote?: SwapQuote;
 }
 
 export const SubmitSection: React.FC<SubmitSectionProps> = ({
@@ -32,16 +31,16 @@ export const SubmitSection: React.FC<SubmitSectionProps> = ({
   isApproveFromTokenLoading,
   isFromTokenWalletSpendingLimitLoading,
   isRevokeFromTokenWalletSpendingLimitLoading,
-  swap,
+  swapQuote,
   isSwapLoading,
 }) => {
   const { t } = useTranslation();
 
   const isSwappingWithHighPriceImpact = useMemo(
     () =>
-      !!swap?.priceImpactPercentage &&
-      swap?.priceImpactPercentage >= HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE,
-    [swap?.priceImpactPercentage],
+      !!swapQuote?.priceImpactPercentage &&
+      swapQuote?.priceImpactPercentage >= HIGH_PRICE_IMPACT_THRESHOLD_PERCENTAGE,
+    [swapQuote?.priceImpactPercentage],
   );
 
   const submitButtonLabel = useMemo(() => {
@@ -69,10 +68,6 @@ export const SubmitSection: React.FC<SubmitSectionProps> = ({
       >
         {submitButtonLabel}
       </PrimaryButton>
-
-      {isFormValid && !isSwapLoading && !isFromTokenWalletSpendingLimitLoading && (
-        <SwapSummary swap={swap} type="repay" />
-      )}
     </>
   );
 

apps/evm/src/pages/Market/OperationForm/Repay/RepayWithWalletBalanceForm/SubmitSection/index.tsx

@@ -2,7 +2,7 @@ import BigNumber from 'bignumber.js';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { cn } from '@venusprotocol/ui';
-import { useRepay, useSwapTokensAndRepay } from 'clients/api';
+import { useGetSwapQuote, useRepay, useSwapTokensAndRepay } from 'clients/api';
 import {
   Delimiter,
   LabeledInlineContent,
@@ -12,14 +12,13 @@ import {
   TokenTextField,
 } from 'components';
 import useFormatTokensToReadableValue from 'hooks/useFormatTokensToReadableValue';
-import useGetSwapInfo from 'hooks/useGetSwapInfo';
 import useGetSwapTokenUserBalances from 'hooks/useGetSwapTokenUserBalances';
 import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import useTokenApproval from 'hooks/useTokenApproval';
 import { VError } from 'libs/errors';
 import { useTranslation } from 'libs/translations';
 import { useAccountAddress } from 'libs/wallet';
-import type { Asset, BalanceMutation, Pool, Swap, SwapError, TokenBalance } from 'types';
+import type { Asset, BalanceMutation, Pool, SwapQuote, TokenBalance } from 'types';
 import {
   areTokensEqual,
   convertMantissaToTokens,
@@ -29,9 +28,11 @@ import {
   getUniqueTokenBalances,
 } from 'utilities';
 
+import { NULL_ADDRESS } from 'constants/address';
 import { ConnectWallet } from 'containers/ConnectWallet';
 import useDebounceValue from 'hooks/useDebounceValue';
 import { useGetContractAddress } from 'hooks/useGetContractAddress';
+import { useGetUserSlippageTolerance } from 'hooks/useGetUserSlippageTolerance';
 import { useSimulateBalanceMutations } from 'hooks/useSimulateBalanceMutations';
 import { useAnalytics } from 'libs/analytics';
 import { ApyBreakdown } from '../../ApyBreakdown';
@@ -71,8 +72,8 @@ export interface RepayWithWalletBalanceFormUiProps
   isRevokeFromTokenWalletSpendingLimitLoading: boolean;
   onSubmitSuccess?: () => void;
   fromTokenWalletSpendingLimitTokens?: BigNumber;
-  swap?: Swap;
-  swapError?: SwapError;
+  swapQuote?: SwapQuote;
+  swapQuoteErrorCode?: string;
 }
 
 export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUiProps> = ({
@@ -98,8 +99,8 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
   fromTokenWalletSpendingLimitTokens,
   revokeFromTokenWalletSpendingLimit,
   isRevokeFromTokenWalletSpendingLimitLoading,
-  swap,
-  swapError,
+  swapQuote,
+  swapQuoteErrorCode,
 }) => {
   const { t } = useTranslation();
   const { captureAnalyticEvent } = useAnalytics();
@@ -111,7 +112,7 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
 
   const fromTokenUserWalletBalanceTokens = useMemo(() => {
     // Get wallet balance from the list of fetched token balances if integrated
-    // swap feature is enabled and the selected token is different from the
+    // swapQuote feature is enabled and the selected token is different from the
     // asset object
     if (isUsingSwap || isWrappingNativeToken) {
       const tokenBalance = tokenBalances.find(item =>
@@ -140,7 +141,7 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
   const debouncedFormAmountTokens = useDebounceValue(formValues.amountTokens);
 
   let toTokenAmountTokens = isUsingSwap
-    ? getSwapToTokenAmountReceivedTokens(swap)
+    ? getSwapToTokenAmountReceivedTokens(swapQuote)
     : debouncedFormAmountTokens;
   toTokenAmountTokens = new BigNumber(toTokenAmountTokens || 0);
 
@@ -167,8 +168,8 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
     fromTokenUserBorrowBalanceTokens: asset.userBorrowBalanceTokens,
     fromTokenWalletSpendingLimitTokens,
     isUsingSwap,
-    swap,
-    swapError,
+    swapQuote,
+    swapQuoteErrorCode,
     onSubmitSuccess,
     onSubmit,
     formValues,
@@ -192,7 +193,7 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
       fromTokenUserWalletBalanceTokens || 0,
     );
 
-    // If using swap, set input amount to wallet balance
+    // If using swapQuote, set input amount to wallet balance
     if (isUsingSwap) {
       amountTokens = new BigNumber(fromTokenUserWalletBalanceTokens || 0);
     }
@@ -241,7 +242,7 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
     };
 
     const canRepayFullLoan =
-      // If user is using swap, we don't know if they can repay the full loan after conversion
+      // If user is using swapQuote, we don't know if they can repay the full loan after conversion
       !isUsingSwap &&
       limitTokens.isGreaterThan(0) &&
       limitTokens.isGreaterThanOrEqualTo(asset.userBorrowBalanceTokens);
@@ -394,7 +395,7 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
             isFormValid={isFormValid}
             isSubmitting={isSubmitting}
             isRepayingFullLoan={isRepayingFullLoan}
-            priceImpactPercentage={swap?.priceImpactPercentage}
+            priceImpactPercentage={swapQuote?.priceImpactPercentage}
           />
 
           <div className="space-y-2">
@@ -420,14 +421,14 @@ export const RepayWithWalletBalanceFormUi: React.FC<RepayWithWalletBalanceFormUi
             simulatedPool={simulatedPool}
             balanceMutations={balanceMutations}
             isUsingSwap={isUsingSwap}
-            swap={swap}
+            swap={swapQuote}
           />
         </div>
 
         <SubmitSection
           isFormSubmitting={isSubmitting}
           isFormValid={isFormValid}
-          swap={swap}
+          swapQuote={swapQuote}
           isSwapLoading={isSwapLoading}
           fromToken={formValues.fromToken}
           approveFromToken={approveFromToken}
@@ -502,8 +503,7 @@ const RepayWithWalletBalanceForm: React.FC<RepayWithWalletBalanceFormProps> = ({
   }, [accountAddress, initialFormValues]);
 
   const { address: swapRouterContractAddress } = useGetContractAddress({
-    name: 'SwapRouter',
-    poolComptrollerContractAddress: pool.comptrollerAddress,
+    name: 'SwapRouterV2',
   });
 
   // a user is trying to wrap the chain's native token if
@@ -592,7 +592,7 @@ const RepayWithWalletBalanceForm: React.FC<RepayWithWalletBalanceFormProps> = ({
   });
 
   const onSubmit: RepayWithWalletBalanceFormUiProps['onSubmit'] = useCallback(
-    async ({ fromToken, fromTokenAmountTokens, swap, fixedRepayPercentage }) => {
+    async ({ fromToken, fromTokenAmountTokens, swapQuote, fixedRepayPercentage }) => {
       const repayFullLoan = fixedRepayPercentage === 100;
       const amountMantissa = convertTokensToMantissa({
         value: new BigNumber(fromTokenAmountTokens.trim()),
@@ -611,18 +611,18 @@ const RepayWithWalletBalanceForm: React.FC<RepayWithWalletBalanceFormProps> = ({
         });
       }
 
-      // Throw an error if we're meant to execute a swap but no swap was
+      // Throw an error if we're meant to execute a swapQuote but no swapQuote was
       // passed through props. This should never happen since the form is
-      // disabled while swap infos are being fetched, but we add this logic
+      // disabled while swapQuote infos are being fetched, but we add this logic
       // as a safeguard
-      if (!swap) {
+      if (!swapQuote) {
         throw new VError({ type: 'unexpected', code: 'somethingWentWrong' });
       }
 
-      // Handle swap and repay flow
+      // Handle swapQuote and repay flow
       return onSwapAndRepay({
         repayFullLoan,
-        swap,
+        swapQuote,
         poolName: pool.name,
         poolComptrollerContractAddress: pool.comptrollerAddress,
         vToken: asset.vToken,
@@ -639,24 +639,35 @@ const RepayWithWalletBalanceForm: React.FC<RepayWithWalletBalanceFormProps> = ({
     ],
   );
 
-  const swapDirection = formValues.fixedRepayPercentage ? 'exactAmountOut' : 'exactAmountIn';
+  const { address: swapRouterV2ContractAddress } = useGetContractAddress({
+    name: 'SwapRouterV2',
+  });
 
   const debouncedFormAmountTokens = useDebounceValue(formValues.amountTokens);
+  const fromTokenAmountTokens = new BigNumber(debouncedFormAmountTokens || 0);
 
-  const swapInfo = useGetSwapInfo({
-    fromToken: formValues.fromToken || asset.vToken.underlyingToken,
-    fromTokenAmountTokens:
-      swapDirection === 'exactAmountIn' ? debouncedFormAmountTokens : undefined,
-    toToken: asset.vToken.underlyingToken,
-    toTokenAmountTokens: formValues.fixedRepayPercentage
-      ? calculatePercentageOfUserBorrowBalance({
-          token: asset.vToken.underlyingToken,
-          userBorrowBalanceTokens: asset.userBorrowBalanceTokens,
-          percentage: formValues.fixedRepayPercentage,
-        })
-      : undefined,
-    direction: swapDirection,
-  });
+  const { userSlippageTolerancePercentage } = useGetUserSlippageTolerance();
+
+  const {
+    data: swapQuoteData,
+    error: swapQuoteError,
+    isLoading: swapQuoteLoading,
+  } = useGetSwapQuote(
+    {
+      fromToken: formValues.fromToken,
+      fromTokenAmountTokens,
+      toToken: asset.vToken.underlyingToken,
+      direction: 'exact-in',
+      recipientAddress: swapRouterV2ContractAddress || NULL_ADDRESS,
+      slippagePercentage: userSlippageTolerancePercentage,
+    },
+    {
+      enabled:
+        isUsingSwap && !!swapRouterV2ContractAddress && fromTokenAmountTokens.isGreaterThan(0),
+    },
+  );
+
+  const swapQuote = swapQuoteData?.swapQuote;
 
   return (
     <RepayWithWalletBalanceFormUi
@@ -674,9 +685,9 @@ const RepayWithWalletBalanceForm: React.FC<RepayWithWalletBalanceFormProps> = ({
       integratedSwapTokenBalances={integratedSwapTokenBalancesData}
       onSubmit={onSubmit}
       isSubmitting={isSubmitting}
-      swap={swapInfo.swap}
-      swapError={swapInfo.error}
-      isSwapLoading={swapInfo.isLoading}
+      swapQuote={swapQuote}
+      swapQuoteErrorCode={swapQuoteError?.code}
+      isSwapLoading={swapQuoteLoading}
       isFromTokenApproved={isFromTokenApproved}
       approveFromToken={approveFromToken}
       isApproveFromTokenLoading={isApproveFromTokenLoading}

apps/evm/src/pages/Market/OperationForm/Repay/RepayWithWalletBalanceForm/index.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 
 import useIsMounted from 'hooks/useIsMounted';
 import { handleError, isUserRejectedTxError } from 'libs/errors';
-import type { Asset, Swap, SwapError, Token, VToken } from 'types';
+import type { Asset, SwapQuote, Token, VToken } from 'types';
 import { convertMantissaToTokens } from 'utilities';
 
 import { useAnalytics } from 'libs/analytics';
@@ -23,7 +23,7 @@ export interface UseFormInput {
     toVToken: VToken;
     fromToken: Token;
     fromTokenAmountTokens: string;
-    swap?: Swap;
+    swapQuote?: SwapQuote;
     fixedRepayPercentage?: number;
   }) => Promise<unknown>;
   formValues: FormValues;
@@ -34,8 +34,8 @@ export interface UseFormInput {
   fromTokenWalletSpendingLimitTokens?: BigNumber;
   isFromTokenApproved?: boolean;
   isUsingSwap: boolean;
-  swap?: Swap;
-  swapError?: SwapError;
+  swapQuote?: SwapQuote;
+  swapQuoteErrorCode?: string;
 }
 
 interface UseFormOutput {
@@ -53,8 +53,8 @@ const useForm = ({
   fromTokenWalletSpendingLimitTokens,
   isFromTokenApproved,
   onSubmitSuccess,
-  swap,
-  swapError,
+  swapQuote,
+  swapQuoteErrorCode,
   formValues,
   setFormValues,
   onSubmit,
@@ -64,8 +64,8 @@ const useForm = ({
 
   const { isFormValid, formError } = useFormValidation({
     formValues,
-    swap,
-    swapError,
+    swapQuote,
+    swapQuoteErrorCode,
     isFromTokenApproved,
     isUsingSwap,
     fromTokenUserWalletBalanceTokens,
@@ -100,7 +100,7 @@ const useForm = ({
         fromTokenAmountTokens: formValues.amountTokens,
         fromToken: formValues.fromToken,
         fixedRepayPercentage: formValues.fixedRepayPercentage,
-        swap,
+        swapQuote,
       });
 
       captureAnalyticEvent('repay_signed', analyticData);
@@ -148,26 +148,26 @@ const useForm = ({
   ]);
 
   useEffect(() => {
-    // Fixed percentage using the swap
-    const isSwapping = !!swap;
+    // Fixed percentage using the swapQuote
+    const isSwapping = !!swapQuote;
 
     if (
       isMounted() &&
       formValues.fixedRepayPercentage &&
       isSwapping &&
-      swap.direction === 'exactAmountOut'
+      swapQuote.direction === 'exact-out'
     ) {
       const expectedFromTokenAmountSoldTokens = convertMantissaToTokens({
-        value: swap.expectedFromTokenAmountSoldMantissa,
-        token: swap.fromToken,
+        value: swapQuote.expectedFromTokenAmountSoldMantissa,
+        token: swapQuote.fromToken,
       }).toFixed();
 
       setFormValues(currentFormValues => ({
         ...currentFormValues,
         amountTokens: expectedFromTokenAmountSoldTokens,
       }));
     }
-  }, [formValues.fixedRepayPercentage, swap, setFormValues, isMounted]);
+  }, [formValues.fixedRepayPercentage, swapQuote, setFormValues, isMounted]);
 
   return {
     handleSubmit,