Borrow limit for modal box

components/Modal/CollateralTypeSelector.tsx

@@ -153,14 +153,20 @@ export function CollateralTypeSelectorRepay({
           <span>Borrowed amount</span>
         </div>
         {[DEFAULT_POSITION, ...Object.keys(LPAssetMap)].map((position) => {
+          const borrowedAmount = repayPositions[position] || 0;
+          const disabled = +borrowedAmount <= 0;
           return (
             <div
               key={position}
               onClick={() => {
-                setSelectedCollateralType(position);
-                setShow(false);
+                if (!disabled) {
+                  setSelectedCollateralType(position);
+                  setShow(false);
+                }
               }}
-              className="flex items-center justify-between text-sm text-white h-[46px] hover:bg-gray-950 px-3.5 cursor-pointer"
+              className={`flex items-center justify-between text-sm text-white h-[46px] hover:bg-gray-950 px-3.5 ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer"
+              }`}
             >
               <div className="flex items-center">
                 <span className="mr-1.5">{getName(position)}</span>

components/Modal/index.tsx

@@ -34,7 +34,7 @@ import {
 import Controls from "./Controls";
 import Action from "./Action";
 import { fetchAssets, fetchRefPrices } from "../../redux/assetsSlice";
-import { useDegenMode } from "../../hooks/hooks";
+import { useDegenMode, usePortfolioAssets } from "../../hooks/hooks";
 import {
   CollateralTypeSelectorBorrow,
   CollateralTypeSelectorRepay,
@@ -49,11 +49,12 @@ const Modal = () => {
   const dispatch = useAppDispatch();
   const { isRepayFromDeposits } = useDegenMode();
   const theme = useTheme();
+  const portfolioAssets = usePortfolioAssets();
   const [selectedCollateralType, setSelectedCollateralType] = useState(DEFAULT_POSITION);
 
   const { action = "Deposit", tokenId, position } = asset;
 
-  const healthFactor = useAppSelector(
+  const { healthFactor, maxBorrowValue: adjustedMaxBorrowValue } = useAppSelector(
     action === "Withdraw"
       ? recomputeHealthFactorWithdraw(tokenId, +amount)
       : action === "Adjust"
@@ -66,17 +67,18 @@ const Modal = () => {
       ? recomputeHealthFactorRepay(tokenId, +amount, selectedCollateralType)
       : recomputeHealthFactor(tokenId, +amount, selectedCollateralType),
   );
-  const healthFactor_repay_lp = useAppSelector(
-    action === "Repay" && isRepayFromDeposits && selectedCollateralType !== DEFAULT_POSITION
-      ? recomputeHealthFactorRepayFromDepositsLp(tokenId, +amount, selectedCollateralType)
-      : () => {
-          return 0;
-        },
-  );
+  const { healthFactor: healthFactor_repay_lp, maxBorrowValue: adjustedMaxBorrowValue_repay_lp } =
+    useAppSelector(
+      action === "Repay" && isRepayFromDeposits && selectedCollateralType !== DEFAULT_POSITION
+        ? recomputeHealthFactorRepayFromDepositsLp(tokenId, +amount, selectedCollateralType)
+        : () => {
+            return { healthFactor: 0, maxBorrowValue: 0 };
+          },
+    );
   const maxBorrowAmountPositions = useAppSelector(getBorrowMaxAmount(tokenId));
   const maxWithdrawAmount = useAppSelector(getWithdrawMaxAmount(tokenId));
   const repayPositions = useAppSelector(getRepayPositions(tokenId));
-  const { maxBorrowAmount } = maxBorrowAmountPositions[selectedCollateralType];
+  const { maxBorrowAmount, maxBorrowValue } = maxBorrowAmountPositions[selectedCollateralType];
   const repayAmount = repayPositions[selectedCollateralType];
   const {
     symbol,
@@ -116,6 +118,12 @@ const Modal = () => {
       value$: new Decimal(price * +amount).toFixed(),
     });
   }
+  const repay_to_lp =
+    action === "Repay" && isRepayFromDeposits && selectedCollateralType !== DEFAULT_POSITION;
+  const not_borrow_from_regular =
+    action === "Repay" &&
+    isRepayFromDeposits &&
+    !((portfolioAssets[1] || []) as any[]).find((a) => a.tokenId === tokenId);
   return (
     <MUIModal open={isOpen} onClose={handleClose}>
       <Wrapper
@@ -158,13 +166,13 @@ const Modal = () => {
               available$={available$}
             />
             <div className="flex flex-col gap-4 mt-6">
-              <HealthFactor value={healthFactor} />
-              {action === "Repay" &&
-              isRepayFromDeposits &&
-              selectedCollateralType !== DEFAULT_POSITION ? (
-                <HealthFactor value={healthFactor_repay_lp} title="LP token Health Factor" />
-              ) : null}
-
+              {repay_to_lp ? <HealthFactor value={healthFactor_repay_lp} /> : null}
+              {not_borrow_from_regular ? null : (
+                <HealthFactor
+                  value={healthFactor}
+                  title={`${repay_to_lp ? "Health Factor(Single)" : ""}`}
+                />
+              )}
               <Rates rates={rates} />
               {!canUseAsCollateral ? (
                 <CollateralTip />
@@ -175,7 +183,10 @@ const Modal = () => {
                   tokenId={asset.tokenId}
                 />
               )}
-              {/* <BorrowLimit from={maxBorrowValue} to="50" /> */}
+              <BorrowLimit
+                from={maxBorrowValue}
+                to={repay_to_lp ? adjustedMaxBorrowValue_repay_lp : adjustedMaxBorrowValue}
+              />
             </div>
             <Alerts data={alerts} />
             <Action

redux/selectors/getBorrowMaxAmount.ts

@@ -18,20 +18,19 @@ export const computeBorrowMaxAmount = (tokenId: string, assets: Assets, account,
     .map((position: string) => {
       const adjustedCollateralSum = getAdjustedSum("collateral", portfolio, assets, position);
       const adjustedBorrowedSum = getAdjustedSum("borrowed", portfolio, assets, position);
-      const volatiliyRatio = asset.config.volatility_ratio || 0;
+      // const volatiliyRatio = asset.config.volatility_ratio || 0;
       const price = asset.price?.usd || Infinity;
-      const maxBorrowPricedTemp = adjustedCollateralSum
+      const maxBorrowPriced = adjustedCollateralSum
         .sub(adjustedBorrowedSum)
-        .mul(volatiliyRatio)
-        .div(MAX_RATIO)
+        // .mul(volatiliyRatio)
+        // .div(MAX_RATIO)
         .mul(95)
         .div(100);
-      const maxBorrowAmountTemp = maxBorrowPricedTemp.div(price);
+      const maxBorrowAmountTemp = maxBorrowPriced.div(price);
       const maxBorrowAmount = Decimal.min(
         Math.max(0, maxBorrowAmountTemp.toNumber()),
         uiAsset.availableLiquidity || 0,
       );
-      const maxBorrowPriced = maxBorrowAmountTemp.mul(price);
       return {
         [position]: {
           maxBorrowAmount: Math.max(maxBorrowAmount.toNumber(), 0),

redux/selectors/getPortfolioAssets.ts

@@ -50,7 +50,7 @@ export const getPortfolioAssets = createSelector(
   (state: RootState) => state.assets,
   (state: RootState) => state.account,
   (app, assets, account) => {
-    if (!hasAssets(assets)) return [[], [], 0, 0];
+    if (!hasAssets(assets)) return [[], [], 0, 0, {}, []];
     const brrrTokenId = app.config.booster_token_id;
     const lpPositions = omit(account.portfolio.positions, DEFAULT_POSITION);
     let portfolioLpAssets = {};
@@ -196,7 +196,7 @@ export const getPortfolioAssets = createSelector(
       return { ...acc, [shadow_id]: b };
     }, {});
 
-    const borrowedAll = borrowed;
+    const borrowedAll = Array.from(borrowed);
     Object.entries(borrowed_LP).forEach(([positionId, value]: [string, any]) => {
       borrowedAll.push(...value);
     });

redux/selectors/recomputeHealthFactor.ts

@@ -13,8 +13,8 @@ export const recomputeHealthFactor = (tokenId: string, amount: number, position:
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
-      if (!account.portfolio || !tokenId) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
+      if (!account.portfolio || !tokenId) return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config } = asset;
       // if (!Object.keys(account.portfolio.borrowed).length && amount === 0) return -1;
@@ -67,8 +67,9 @@ export const recomputeHealthFactor = (tokenId: string, amount: number, position:
       );
       const adjustedBorrowedSum = getAdjustedSum("borrowed", portfolio, assets.data, position);
 
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorAdjust.ts

@@ -13,8 +13,8 @@ export const recomputeHealthFactorAdjust = (tokenId: string, amount: number) =>
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
-      if (!account.portfolio || !tokenId) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
+      if (!account.portfolio || !tokenId) return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config, isLpToken } = asset;
       const position = isLpToken ? tokenId : DEFAULT_POSITION;
@@ -69,8 +69,9 @@ export const recomputeHealthFactorAdjust = (tokenId: string, amount: number) =>
         position,
       );
 
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorRepay.ts

@@ -12,13 +12,13 @@ export const recomputeHealthFactorRepay = (tokenId: string, amount: number, posi
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
       if (
         !account.portfolio ||
         !tokenId ||
         !account.portfolio.positions[position]?.borrowed?.[tokenId]
       )
-        return 0;
+        return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config } = asset;
       const decimals = metadata.decimals + config.extra_decimals;
@@ -46,8 +46,9 @@ export const recomputeHealthFactorRepay = (tokenId: string, amount: number, posi
         assets.data,
         position,
       );
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorRepayFromDeposits.ts

@@ -14,13 +14,13 @@ export const recomputeHealthFactorRepayFromDeposits = (tokenId: string, amount:
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
       if (
         !account.portfolio ||
         !tokenId ||
         !account.portfolio.positions[DEFAULT_POSITION]?.borrowed?.[tokenId]
       )
-        return 0;
+        return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config } = asset;
       const decimals = metadata.decimals + config.extra_decimals;
@@ -74,7 +74,9 @@ export const recomputeHealthFactorRepayFromDeposits = (tokenId: string, amount:
         assets.data,
         DEFAULT_POSITION,
       );
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorRepayFromDepositsLp.ts

@@ -17,13 +17,13 @@ export const recomputeHealthFactorRepayFromDepositsLp = (
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
       if (
         !account.portfolio ||
         !tokenId ||
         !account.portfolio.positions[position]?.borrowed?.[tokenId]
       )
-        return 0;
+        return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config } = asset;
       const decimals = metadata.decimals + config.extra_decimals;
@@ -50,7 +50,9 @@ export const recomputeHealthFactorRepayFromDepositsLp = (
         assets.data,
         position,
       );
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorSupply.ts

@@ -14,8 +14,8 @@ export const recomputeHealthFactorSupply = (tokenId: string, amount: number) =>
     (state: RootState) => state.account,
     (state: RootState) => state.app,
     (assets, account, app) => {
-      if (!hasAssets(assets)) return 0;
-      if (!account.portfolio || !tokenId) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
+      if (!account.portfolio || !tokenId) return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config, isLpToken } = asset;
       const position = isLpToken ? tokenId : DEFAULT_POSITION;
@@ -69,8 +69,9 @@ export const recomputeHealthFactorSupply = (tokenId: string, amount: number) =>
         position,
       );
 
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );

redux/selectors/recomputeHealthFactorWithdraw.ts

@@ -14,8 +14,8 @@ export const recomputeHealthFactorWithdraw = (tokenId: string, amount: number) =
     (state: RootState) => state.assets,
     (state: RootState) => state.account,
     (assets, account) => {
-      if (!hasAssets(assets)) return 0;
-      if (!account.portfolio || !tokenId) return 0;
+      if (!hasAssets(assets)) return { healthFactor: 0, maxBorrowValue: 0 };
+      if (!account.portfolio || !tokenId) return { healthFactor: 0, maxBorrowValue: 0 };
       const asset = assets.data[tokenId];
       const { metadata, config, isLpToken } = asset;
       const position = isLpToken ? tokenId : DEFAULT_POSITION;
@@ -81,9 +81,9 @@ export const recomputeHealthFactorWithdraw = (tokenId: string, amount: number) =
         assets.data,
         position,
       );
-
-      const healthFactor = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
-
-      return healthFactor < MAX_RATIO ? healthFactor : MAX_RATIO;
+      const maxBorrowValue = adjustedCollateralSum.sub(adjustedBorrowedSum).mul(95).div(100);
+      const healthFactorTemp = adjustedCollateralSum.div(adjustedBorrowedSum).mul(100).toNumber();
+      const healthFactor = healthFactorTemp < MAX_RATIO ? healthFactorTemp : MAX_RATIO;
+      return { healthFactor, maxBorrowValue };
     },
   );