1  import { InterestRate } from '@aave/contract-helpers';
 2  import { Trans } from '@lingui/macro';
 3  import React, { useState } from 'react';
 4  import { UserAuthenticated } from 'src/components/UserAuthenticated';
 5  import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 6  import { ModalContextType, ModalType, useModalContext } from 'src/hooks/useModal';
 7  import { useRootStore } from 'src/store/root';
 8  import { isFeatureEnabled } from 'src/utils/marketsAndNetworksConfig';
 9  
10  import { BasicModal } from '../../primitives/BasicModal';
11  import { ModalWrapper } from '../FlowCommons/ModalWrapper';
12  import { CollateralRepayModalContent } from './CollateralRepayModalContent';
13  import { RepayModalContent } from './RepayModalContent';
14  import { RepayType, RepayTypeSelector } from './RepayTypeSelector';
15  
16  export const RepayModal = () => {
17    const { type, close, args, mainTxState } = useModalContext() as ModalContextType<{
18      underlyingAsset: string;
19      currentRateMode: InterestRate;
20      isFrozen: boolean;
21    }>;
22    const { userReserves } = useAppDataContext();
23    const currentMarketData = useRootStore((store) => store.currentMarketData);
24    const [repayType, setRepayType] = useState(RepayType.BALANCE);
25  
26    // repay with collateral is only possible:
27    // 1. on chains with paraswap deployed
28    // 2. when you have a different supplied(not necessarily collateral) asset then the one your debt is in
29    // For repaying your debt with the same assets aToken you can use repayWithAToken on aave protocol v3
30    const collateralRepayPossible =
31      isFeatureEnabled.collateralRepay(currentMarketData) &&
32      userReserves.some(
33        (userReserve) =>
34          userReserve.scaledATokenBalance !== '0' &&
35          userReserve.underlyingAsset !== args.underlyingAsset
36      );
37  
38    const handleClose = () => {
39      setRepayType(RepayType.BALANCE);
40      close();
41    };
42  
43    return (
44      <BasicModal open={type === ModalType.Repay} setOpen={handleClose}>
45        <ModalWrapper title={<Trans>Repay</Trans>} underlyingAsset={args.underlyingAsset}>
46          {(params) => {
47            return (
48              <UserAuthenticated>
49                {(user) => (
50                  <>
51                    {collateralRepayPossible && !mainTxState.txHash && (
52                      <RepayTypeSelector repayType={repayType} setRepayType={setRepayType} />
53                    )}
54                    {repayType === RepayType.BALANCE && <RepayModalContent {...params} user={user} />}
55                    {repayType === RepayType.COLLATERAL && (
56                      <CollateralRepayModalContent
57                        {...params}
58                        debtType={args.currentRateMode}
59                        user={user}
60                      />
61                    )}
62                  </>
63                )}
64              </UserAuthenticated>
65            );
66          }}
67        </ModalWrapper>
68      </BasicModal>
69    );
70  };