Peter/feat loans q token handle edge cases (#1449)

* chore: update monetary to latest 0.7.3

* feat(loans): handle lend position when qToken is used as vault collateral

* chore: update lib

package.json

@@ -7,7 +7,7 @@
     "@headlessui/react": "^1.1.1",
     "@heroicons/react": "^2.0.18",
     "@interlay/bridge": "^0.3.13",
-    "@interlay/interbtc-api": "2.3.6",
+    "@interlay/interbtc-api": "2.3.7",
     "@interlay/monetary-js": "0.7.3",
     "@polkadot/api": "9.14.2",
     "@polkadot/extension-dapp": "0.44.1",

src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx

@@ -1,4 +1,5 @@
-import { CollateralPosition, LoanAsset } from '@interlay/interbtc-api';
+import { CollateralPosition, CurrencyExt, LoanAsset } from '@interlay/interbtc-api';
+import { MonetaryAmount } from '@interlay/monetary-js';
 import { useEffect, useRef } from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
 
@@ -19,7 +20,7 @@ import { useGetLTV } from '../../hooks/use-get-ltv';
 import { BorrowLimit } from '../BorrowLimit';
 import { StyledDescription } from './CollateralModal.style';
 
-type CollateralModalVariant = 'enable' | 'disable' | 'disable-error';
+type CollateralModalVariant = 'enable' | 'disable' | 'disable-error' | 'disable-vault-collateral';
 
 const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: LoanAsset) =>
   ({
@@ -40,10 +41,21 @@ const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: Loa
       description:
         'This asset is required to support your borrowed assets. Either repay borrowed assets, or supply another asset as collateral.',
       buttonLabel: `Dismiss`
+    },
+    'disable-vault-collateral': {
+      title: 'Already used as vault collateral',
+      description:
+        'This asset is already used as vault collateral and therefore can not be used as collateral for lending.',
+      buttonLabel: `Dismiss`
     }
   }[variant]);
 
-const getModalVariant = (isCollateralActive: boolean, ltvStatus?: Status): CollateralModalVariant => {
+const getModalVariant = (
+  isCollateralActive: boolean,
+  ltvStatus: Status | undefined,
+  vaultCollateralAmount: MonetaryAmount<CurrencyExt>
+): CollateralModalVariant => {
+  if (!vaultCollateralAmount.isZero()) return 'disable-vault-collateral';
   if (!isCollateralActive) return 'enable';
   // User is trying switching off collateral
   if (!ltvStatus || ltvStatus !== 'success') return 'disable-error';
@@ -73,11 +85,11 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate
     onSuccess: refetch
   });
 
-  const { isCollateral: isCollateralActive, amount: lendPositionAmount } = position;
+  const { isCollateral: isCollateralActive, amount: lendPositionAmount, vaultCollateralAmount } = position;
 
   const loanAction = isCollateralActive ? 'withdraw' : 'lend';
   const currentLTV = getLTV({ type: loanAction, amount: lendPositionAmount });
-  const variant = getModalVariant(isCollateralActive, currentLTV?.status);
+  const variant = getModalVariant(isCollateralActive, currentLTV?.status, vaultCollateralAmount);
 
   const handleSubmit = () => {
     if (variant === 'enable') {
@@ -107,7 +119,7 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate
   // Doing this call on mount so that the form becomes dirty
   // TODO: find better approach
   useEffect(() => {
-    if (variant === 'disable-error' || !isOpen) return;
+    if (variant === 'disable-error' || variant === 'disable-vault-collateral' || !isOpen) return;
 
     form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,11 +140,13 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate
       <ModalBody>
         <Flex direction='column' gap='spacing8'>
           <StyledDescription color='tertiary'>{content.description}</StyledDescription>
-          <BorrowLimit loanAction={loanAction} asset={asset} actionAmount={lendPositionAmount} prices={prices} />
+          {variant !== 'disable-vault-collateral' && (
+            <BorrowLimit loanAction={loanAction} asset={asset} actionAmount={lendPositionAmount} prices={prices} />
+          )}
         </Flex>
       </ModalBody>
       <ModalFooter>
-        {variant === 'disable-error' ? (
+        {variant === 'disable-error' || variant === 'disable-vault-collateral' ? (
           <CTA size='large' onPress={onClose}>
             {content.buttonLabel}
           </CTA>

src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx

@@ -8,12 +8,14 @@ const getMaxWithdrawableAmountByBorrowLimit = (
   position: CollateralPosition,
   lendingStats: LendingStats
 ): MonetaryAmount<CurrencyExt> => {
-  const { amount, isCollateral } = position;
+  const { amount, isCollateral, vaultCollateralAmount } = position;
   const { collateralThreshold, exchangeRate, currency } = asset;
   const { borrowLimitBtc } = lendingStats;
 
   if (!isCollateral) {
-    return amount;
+    // MEMO: If the position is not used as loan collateral it can be used
+    // as vault collateral.
+    return amount.sub(vaultCollateralAmount);
   }
 
   const positionAmountBtc = exchangeRate.toBase(amount);

src/test/mocks/@interlay/interbtc-api/parachain/loans.ts

@@ -57,13 +57,15 @@ const DEFAULT_POSITIONS = {
       currency: WRAPPED_TOKEN,
       amount: DEFAULT_IBTC.MONETARY.MEDIUM,
       isCollateral: true,
-      earnedInterest: DEFAULT_IBTC.MONETARY.VERY_SMALL
+      earnedInterest: DEFAULT_IBTC.MONETARY.VERY_SMALL,
+      vaultCollateralAmount: DEFAULT_IBTC.MONETARY.EMPTY
     } as CollateralPosition,
     INTR: {
       currency: GOVERNANCE_TOKEN,
       amount: DEFAULT_INTR.MONETARY.MEDIUM,
       isCollateral: true,
-      earnedInterest: DEFAULT_INTR.MONETARY.SMALL
+      earnedInterest: DEFAULT_INTR.MONETARY.SMALL,
+      vaultCollateralAmount: DEFAULT_INTR.MONETARY.EMPTY
     } as CollateralPosition
   },
   BORROW: {

yarn.lock

@@ -2125,10 +2125,10 @@
   dependencies:
     axios "^0.21.1"
 
-"@interlay/[email protected].6":
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.6.tgz#2db11e94b495139da87d1052cdde39a7a8dd25ab"
-  integrity sha512-bfrDE7QqmG25NLeBpVvZb4tKp1Zr2DqG+lWZnU5L27Z0V/zzPdWDbBcBcG1uKEDy4lkxX8K9jYculy/UA/rW1g==
+"@interlay/[email protected].7":
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.7.tgz#26d4fa574531fe9eea3f0d49364f7476da9713cf"
+  integrity sha512-w9xPaUa3wTTXOb83pHbSqlE3E8V2iA4WE4IlOu23Zqth4hnG0h819WynlfzUsAPGug6RkZkHWIKnu+85V95g5A==
   dependencies:
     "@interlay/esplora-btc-api" "0.4.0"
     "@interlay/interbtc-types" "1.12.0"