Feat: Repay bundle

cypress/e2e/3-stake-governance/stake.cy.ts

@@ -3,10 +3,10 @@ import { skipState } from '../../support/steps/common';
 import { configEnvWithTenderlyMainnetFork } from '../../support/steps/configuration.steps';
 import {
   activateCooldown,
-  stake,
-  reCallCooldown,
   claimReward,
+  reCallCooldown,
   reStake,
+  stake,
 } from '../../support/steps/stake.steps';
 
 const testCases = [
@@ -18,14 +18,14 @@ const testCases = [
     tabValue: 'aave',
     changeApproval: true,
   },
-  {
-    asset: assets.staking.ABPT,
-    amount: 5,
-    checkAmount: '5.00',
-    checkAmountFinal: '10.00',
-    tabValue: 'bpt',
-    changeApproval: false,
-  },
+  // {
+  //   asset: assets.staking.ABPT,
+  //   amount: 5,
+  //   checkAmount: '5.00',
+  //   checkAmountFinal: '10.00',
+  //   tabValue: 'bpt',
+  //   changeApproval: false,
+  // },
 ];
 
 testCases.forEach(

package.json

@@ -32,8 +32,8 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
-    "@aave/contract-helpers": "1.21.0",
-    "@aave/math-utils": "^1.21.0",
+    "@aave/contract-helpers": "1.21.1-0efe71955bfd19d178a3edef77416ca0612598b9.0",
+    "@aave/math-utils": "1.20.1-8d191bf193b4e5f74af4086481eb6f23a17f39e5.0",
     "@bgd-labs/aave-address-book": "^2.7.0",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",

src/components/transactions/Repay/RepayActions.tsx

@@ -1,11 +1,23 @@
-import { InterestRate, ProtocolAction } from '@aave/contract-helpers';
+import { gasLimitRecommendations, InterestRate, ProtocolAction } from '@aave/contract-helpers';
+import { TransactionResponse } from '@ethersproject/providers';
 import { Trans } from '@lingui/macro';
 import { BoxProps } from '@mui/material';
-import { useTransactionHandler } from 'src/helpers/useTransactionHandler';
+import { parseUnits } from 'ethers/lib/utils';
+import { queryClient } from 'pages/_app.page';
+import { useEffect, useState } from 'react';
+import { useBackgroundDataProvider } from 'src/hooks/app-data-provider/BackgroundDataProvider';
 import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
+import { SignedParams, useApprovalTx } from 'src/hooks/useApprovalTx';
+import { usePoolApprovedAmount } from 'src/hooks/useApprovedAmount';
+import { useModalContext } from 'src/hooks/useModal';
+import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 import { useRootStore } from 'src/store/root';
+import { ApprovalMethod } from 'src/store/walletSlice';
+import { getErrorTextFromError, TxAction } from 'src/ui-config/errorMapping';
+import { QueryKeys } from 'src/ui-config/queries';
 
 import { TxActionsWrapper } from '../TxActionsWrapper';
+import { APPROVAL_GAS_LIMIT, checkRequiresApproval } from '../utils';
 
 export interface RepayActionProps extends BoxProps {
   amountToRepay: string;
@@ -17,6 +29,7 @@ export interface RepayActionProps extends BoxProps {
   debtType: InterestRate;
   repayWithATokens: boolean;
   blocked?: boolean;
+  maxApproveNeeded: string;
 }
 
 export const RepayActions = ({
@@ -29,56 +42,194 @@ export const RepayActions = ({
   debtType,
   repayWithATokens,
   blocked,
+  maxApproveNeeded,
   ...props
 }: RepayActionProps) => {
-  const { repay, repayWithPermit, tryPermit } = useRootStore();
+  const [
+    repay,
+    repayWithPermit,
+    encodeRepayParams,
+    encodeRepayWithPermit,
+    tryPermit,
+    walletApprovalMethodPreference,
+    estimateGasLimit,
+    addTransaction,
+    optimizedPath,
+  ] = useRootStore((store) => [
+    store.repay,
+    store.repayWithPermit,
+    store.encodeRepayParams,
+    store.encodeRepayWithPermitParams,
+    store.tryPermit,
+    store.walletApprovalMethodPreference,
+    store.estimateGasLimit,
+    store.addTransaction,
+    store.useOptimizedPath,
+  ]);
+  const { sendTx } = useWeb3Context();
+  const { refetchGhoData, refetchIncentiveData, refetchPoolData } = useBackgroundDataProvider();
+  const [signatureParams, setSignatureParams] = useState<SignedParams | undefined>();
+  const {
+    approvalTxState,
+    mainTxState,
+    loadingTxns,
+    setMainTxState,
+    setTxError,
+    setGasLimit,
+    setLoadingTxns,
+    setApprovalTxState,
+  } = useModalContext();
 
-  const usingPermit = tryPermit({
+  const {
+    data: approvedAmount,
+    refetch: fetchApprovedAmount,
+    isFetching: fetchingApprovedAmount,
+    isFetchedAfterMount,
+  } = usePoolApprovedAmount(poolAddress);
+
+  const permitAvailable = tryPermit({
     reserveAddress: poolAddress,
     isWrappedBaseAsset: poolReserve.isWrappedBaseAsset,
   });
-  const { approval, action, requiresApproval, loadingTxns, approvalTxState, mainTxState } =
-    useTransactionHandler({
-      tryPermit: usingPermit,
-      permitAction: ProtocolAction.repayWithPermit,
-      protocolAction: ProtocolAction.repay,
-      eventTxInfo: {
-        amount: amountToRepay,
-        assetName: poolReserve.name,
-        asset: poolReserve.underlyingAsset,
-      },
-      handleGetTxns: async () => {
-        return repay({
-          amountToRepay,
-          poolAddress,
-          repayWithATokens,
-          debtType,
-          poolReserve,
-          isWrongNetwork,
-          symbol,
+  const usePermit = permitAvailable && walletApprovalMethodPreference === ApprovalMethod.PERMIT;
+
+  setLoadingTxns(fetchingApprovedAmount);
+
+  const requiresApproval =
+    !repayWithATokens &&
+    Number(amountToRepay) !== 0 &&
+    checkRequiresApproval({
+      approvedAmount: approvedAmount?.amount || '0',
+      amount: Number(amountToRepay) === -1 ? maxApproveNeeded : amountToRepay,
+      signedAmount: signatureParams ? signatureParams.amount : '0',
+    });
+
+  if (requiresApproval && approvalTxState?.success) {
+    // There was a successful approval tx, but the approval amount is not enough.
+    // Clear the state to prompt for another approval.
+    setApprovalTxState({});
+  }
+
+  const { approval } = useApprovalTx({
+    usePermit,
+    approvedAmount,
+    requiresApproval,
+    assetAddress: poolAddress,
+    symbol,
+    decimals: poolReserve.decimals,
+    signatureAmount: amountToRepay,
+    onApprovalTxConfirmed: fetchApprovedAmount,
+    onSignTxCompleted: (signedParams) => setSignatureParams(signedParams),
+  });
+
+  useEffect(() => {
+    if (!isFetchedAfterMount && !repayWithATokens) {
+      fetchApprovedAmount();
+    }
+  }, [fetchApprovedAmount, isFetchedAfterMount, repayWithATokens]);
+
+  const action = async () => {
+    try {
+      setMainTxState({ ...mainTxState, loading: true });
+
+      let response: TransactionResponse;
+      let action = ProtocolAction.default;
+
+      if (usePermit && signatureParams) {
+        const repayWithPermitParams = {
+          amount:
+            amountToRepay === '-1'
+              ? amountToRepay
+              : parseUnits(amountToRepay, poolReserve.decimals).toString(),
+          reserve: poolAddress,
+          interestRateMode: debtType,
+          signature: signatureParams.signature,
+          deadline: signatureParams.deadline,
+        };
+
+        let encodedParams: [string, string, string] | undefined;
+        if (optimizedPath()) {
+          encodedParams = await encodeRepayWithPermit(repayWithPermitParams);
+        }
+
+        action = ProtocolAction.repayWithPermit;
+        let signedRepayWithPermitTxData = repayWithPermit({
+          ...repayWithPermitParams,
+          encodedTxData: encodedParams ? encodedParams[0] : undefined,
         });
-      },
-      handleGetPermitTxns: async (signatures, deadline) => {
-        return repayWithPermit({
-          amountToRepay,
-          poolReserve,
-          isWrongNetwork,
+
+        signedRepayWithPermitTxData = await estimateGasLimit(signedRepayWithPermitTxData);
+        response = await sendTx(signedRepayWithPermitTxData);
+        await response.wait(1);
+      } else {
+        const repayParams = {
+          amountToRepay:
+            amountToRepay === '-1'
+              ? amountToRepay
+              : parseUnits(amountToRepay, poolReserve.decimals).toString(),
           poolAddress,
-          symbol,
-          debtType,
           repayWithATokens,
-          signature: signatures[0],
-          deadline,
+          debtType,
+        };
+
+        let encodedParams: string | undefined;
+        if (optimizedPath()) {
+          encodedParams = await encodeRepayParams(repayParams);
+        }
+
+        action = ProtocolAction.repay;
+        let repayTxData = repay({
+          ...repayParams,
+          encodedTxData: encodedParams,
         });
-      },
-      skip: !amountToRepay || parseFloat(amountToRepay) === 0 || blocked,
-      deps: [amountToRepay, poolAddress, repayWithATokens],
-    });
+        repayTxData = await estimateGasLimit(repayTxData);
+        response = await sendTx(repayTxData);
+        await response.wait(1);
+      }
+      setMainTxState({
+        txHash: response.hash,
+        loading: false,
+        success: true,
+      });
+      addTransaction(response.hash, {
+        action,
+        txState: 'success',
+        asset: poolAddress,
+        amount: amountToRepay,
+        assetName: symbol,
+      });
+
+      queryClient.invalidateQueries({ queryKey: [QueryKeys.POOL_TOKENS] });
+      refetchPoolData && refetchPoolData();
+      refetchIncentiveData && refetchIncentiveData();
+      refetchGhoData && refetchGhoData();
+    } catch (error) {
+      const parsedError = getErrorTextFromError(error, TxAction.GAS_ESTIMATION, false);
+      setTxError(parsedError);
+      setMainTxState({
+        txHash: undefined,
+        loading: false,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let supplyGasLimit = 0;
+    if (usePermit) {
+      supplyGasLimit = Number(gasLimitRecommendations[ProtocolAction.supplyWithPermit].recommended);
+    } else {
+      supplyGasLimit = Number(gasLimitRecommendations[ProtocolAction.supply].recommended);
+      if (requiresApproval && !approvalTxState.success) {
+        supplyGasLimit += Number(APPROVAL_GAS_LIMIT);
+      }
+    }
+    setGasLimit(supplyGasLimit.toString());
+  }, [requiresApproval, approvalTxState, usePermit, setGasLimit]);
 
   return (
     <TxActionsWrapper
       blocked={blocked}
-      preparingTransactions={loadingTxns}
+      preparingTransactions={loadingTxns || !approvedAmount}
       symbol={poolReserve.symbol}
       mainTxState={mainTxState}
       approvalTxState={approvalTxState}
@@ -89,10 +240,10 @@ export const RepayActions = ({
       sx={sx}
       {...props}
       handleAction={action}
-      handleApproval={() => approval([{ amount: amountToRepay, underlyingAsset: poolAddress }])}
+      handleApproval={approval}
       actionText={<Trans>Repay {symbol}</Trans>}
       actionInProgressText={<Trans>Repaying {symbol}</Trans>}
-      tryPermit={usingPermit}
+      tryPermit={permitAvailable}
     />
   );
 };

src/components/transactions/Repay/RepayModalContent.tsx

@@ -79,7 +79,9 @@ export const RepayModalContent = ({
     .multipliedBy(marketReferencePriceInUsd)
     .shiftedBy(-USD_DECIMALS);
 
-  const safeAmountToRepayAll = valueToBigNumber(debt).multipliedBy('1.0025');
+  const safeAmountToRepayAll = valueToBigNumber(debt)
+    .multipliedBy('1.0025')
+    .decimalPlaces(poolReserve.decimals, BigNumber.ROUND_UP);
 
   // calculate max amount abailable to repay
   let maxAmountToRepay: BigNumber;
@@ -223,7 +225,7 @@ export const RepayModalContent = ({
       <TxSuccessView
         action={<Trans>repaid</Trans>}
         amount={amountRef.current}
-        symbol={tokenToRepayWith.symbol}
+        symbol={repayWithATokens ? poolReserve.symbol : tokenToRepayWith.symbol}
       />
     );
 
@@ -274,6 +276,7 @@ export const RepayModalContent = ({
       {txError && <GasEstimationError txError={txError} />}
 
       <RepayActions
+        maxApproveNeeded={safeAmountToRepayAll.toString()}
         poolReserve={poolReserve}
         amountToRepay={isMaxSelected ? repayMax : amount}
         poolAddress={