/ src / components / transactions / Repay / CollateralRepayActions.tsx
CollateralRepayActions.tsx
  1  import {
  2    API_ETH_MOCK_ADDRESS,
  3    gasLimitRecommendations,
  4    InterestRate,
  5    ProtocolAction,
  6  } from '@aave/contract-helpers';
  7  import { SignatureLike } from '@ethersproject/bytes';
  8  import { Trans } from '@lingui/macro';
  9  import { BoxProps } from '@mui/material';
 10  import { useParaSwapTransactionHandler } from 'src/helpers/useParaSwapTransactionHandler';
 11  import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
 12  import { calculateSignedAmount, SwapTransactionParams } from 'src/hooks/paraswap/common';
 13  import { useRootStore } from 'src/store/root';
 14  import { useShallow } from 'zustand/shallow';
 15  
 16  import { TxActionsWrapper } from '../TxActionsWrapper';
 17  
 18  interface CollateralRepayBaseProps extends BoxProps {
 19    rateMode: InterestRate;
 20    repayAmount: string;
 21    repayWithAmount: string;
 22    fromAssetData: ComputedReserveData;
 23    poolReserve: ComputedReserveData;
 24    isWrongNetwork: boolean;
 25    customGasPrice?: string;
 26    symbol: string;
 27    repayAllDebt: boolean;
 28    useFlashLoan: boolean;
 29    blocked: boolean;
 30    loading?: boolean;
 31    signature?: SignatureLike;
 32    signedAmount?: string;
 33    deadline?: string;
 34  }
 35  
 36  // Used in poolSlice
 37  export interface CollateralRepayActionProps extends CollateralRepayBaseProps {
 38    augustus: string;
 39    swapCallData: string;
 40  }
 41  
 42  export const CollateralRepayActions = ({
 43    repayAmount,
 44    poolReserve,
 45    fromAssetData,
 46    isWrongNetwork,
 47    sx,
 48    symbol,
 49    rateMode,
 50    repayAllDebt,
 51    useFlashLoan,
 52    blocked,
 53    loading,
 54    repayWithAmount,
 55    buildTxFn,
 56    ...props
 57  }: CollateralRepayBaseProps & { buildTxFn: () => Promise<SwapTransactionParams> }) => {
 58    const [paraswapRepayWithCollateral, currentMarketData] = useRootStore(
 59      useShallow((state) => [state.paraswapRepayWithCollateral, state.currentMarketData])
 60    );
 61  
 62    const { approval, action, loadingTxns, approvalTxState, mainTxState, requiresApproval } =
 63      useParaSwapTransactionHandler({
 64        protocolAction: ProtocolAction.repayCollateral,
 65        handleGetTxns: async (signature, deadline) => {
 66          const route = await buildTxFn();
 67          return paraswapRepayWithCollateral({
 68            repayAllDebt,
 69            repayAmount,
 70            rateMode,
 71            repayWithAmount,
 72            fromAssetData,
 73            poolReserve,
 74            isWrongNetwork,
 75            symbol,
 76            useFlashLoan,
 77            blocked,
 78            swapCallData: route.swapCallData,
 79            augustus: route.augustus,
 80            signature,
 81            deadline,
 82            signedAmount: calculateSignedAmount(repayWithAmount, fromAssetData.decimals),
 83          });
 84        },
 85        handleGetApprovalTxns: async () => {
 86          return paraswapRepayWithCollateral({
 87            repayAllDebt,
 88            repayAmount,
 89            rateMode,
 90            repayWithAmount,
 91            fromAssetData,
 92            poolReserve,
 93            isWrongNetwork,
 94            symbol,
 95            useFlashLoan: false,
 96            blocked,
 97            swapCallData: '0x',
 98            augustus: API_ETH_MOCK_ADDRESS,
 99          });
100        },
101        gasLimitRecommendation: gasLimitRecommendations[ProtocolAction.repayCollateral].limit,
102        skip: loading || !repayAmount || parseFloat(repayAmount) === 0 || blocked,
103        spender: currentMarketData.addresses.REPAY_WITH_COLLATERAL_ADAPTER ?? '',
104        deps: [fromAssetData.symbol, repayWithAmount],
105      });
106  
107    return (
108      <TxActionsWrapper
109        preparingTransactions={loadingTxns}
110        mainTxState={mainTxState}
111        approvalTxState={approvalTxState}
112        requiresAmount
113        amount={repayAmount}
114        requiresApproval={requiresApproval}
115        isWrongNetwork={isWrongNetwork}
116        blocked={blocked}
117        sx={sx}
118        {...props}
119        handleAction={action}
120        handleApproval={() =>
121          approval({
122            amount: calculateSignedAmount(repayWithAmount, fromAssetData.decimals),
123            underlyingAsset: fromAssetData.aTokenAddress,
124          })
125        }
126        actionText={<Trans>Repay {symbol}</Trans>}
127        actionInProgressText={<Trans>Repaying {symbol}</Trans>}
128        fetchingData={loading}
129        errorParams={{
130          loading: false,
131          disabled: blocked,
132          content: <Trans>Repay {symbol}</Trans>,
133          handleClick: action,
134        }}
135        tryPermit
136      />
137    );
138  };