Use max from commitment and not balance

teller-protocol · Oct 30, 2024 · 3be2188 · 3be2188
1 parent 2609ad1
commit 3be2188
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 20 deletions.
diff --git a/src/hooks/useGetCommitmentMax.ts b/src/hooks/useGetCommitmentMax.ts
@@ -38,7 +38,7 @@ interface Args {
   loanAmount?: bigint;
 }
 
-export const useCommitmentMax = ({
+export const useGetCommitmentMax = ({
   commitment,
   requestedCollateral,
   collateralTokenDecimals,
@@ -165,7 +165,7 @@ export const useCommitmentMax = ({
       return BigInt(0);
     const calculatedAmount =
       (collateralAmount * parseBigInt(maxPrincipalPerCollateral ?? 0)) /
-      parseBigInt(
+      BigInt(
         Math.pow(
           10,
           isCommitmentFromLCFAlpha
@@ -181,7 +181,7 @@ export const useCommitmentMax = ({
         ? maxPrincipal
         : calculatedAmount;
 
-    return (loanAmount * BigInt(9_990)) / BigInt(10_000);
+    return parseBigInt((loanAmount * BigInt(9_990)) / BigInt(10_000));
   }, [
     collateralAmount,
     collateralTokenDecimals,

diff --git a/src/pages/BorrowSection/OpportunitiesList/OpportunitiesList.tsx b/src/pages/BorrowSection/OpportunitiesList/OpportunitiesList.tsx
@@ -16,7 +16,7 @@ import caret from "../../../assets/right-caret.svg";
 import DataPill from "../../../components/DataPill";
 import { SUPPORTED_TOKEN_LOGOS } from "../../../constants/tokens";
 import { numberWithCommasAndDecimals } from "../../../helpers/numberUtils";
-import { useCommitmentMax } from "../../../hooks/useGetCommitmentMax";
+import { useGetCommitmentMax } from "../../../hooks/useGetCommitmentMax";
 import { useGetGlobalPropsContext } from "../../../contexts/GlobalPropsContext";
 
 interface OpportunityListItemProps {
@@ -55,12 +55,13 @@ const OpportunityListItem: React.FC<OpportunityListItemProps> = ({
       : BigInt(0)
   );
 
-  const commitmentMax = useCommitmentMax({
+  const commitmentMax = useGetCommitmentMax({
     commitment: opportunity,
     requestedCollateral: collateralAmount,
     collateralTokenDecimals: opportunity.collateralToken?.decimals,
   });
 
+  // TODO: ADD SOCIAL FI CONDITIONAL
   useEffect(() => {
     commitmentMax.maxCollateral > 0 &&
       setCollateralAmount(commitmentMax.maxCollateral);
@@ -119,7 +120,7 @@ const OpportunityListItem: React.FC<OpportunityListItemProps> = ({
           label={displayCollateralAmountData.formattedAmount}
           logo={displayCollateralAmountData.token}
         />{" "}
-        to borow{" "}
+        to borrow{" "}
         <DataPill
           label={displayLoanAmountData.formattedAmount}
           logo={displayLoanAmountData.token}

diff --git a/src/pages/BorrowSection/OpportunityDetails/OpportunityDetails.tsx b/src/pages/BorrowSection/OpportunityDetails/OpportunityDetails.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import separatorWithCaret from "../../../assets/separator_with_caret.svg";
 import BackButton from "../../../components/BackButton";
@@ -14,7 +14,7 @@ import {
   useGetBorrowSectionContext,
 } from "../../BorrowSection/BorrowSectionContext";
 
-import { useCommitmentMax } from "../../../hooks/useGetCommitmentMax";
+import { useGetCommitmentMax } from "../../../hooks/useGetCommitmentMax";
 import "./opportunityDetails.scss";
 
 import { formatUnits, parseUnits } from "viem";
@@ -30,24 +30,21 @@ const OpportunityDetails = () => {
   const { isWhitelistedToken } = useGetGlobalPropsContext();
   const whitelistedToken = isWhitelistedToken(selectedCollateralToken?.address);
 
-  const [collateralTokenValue, setCollataralTokenValue] =
+  const isWhitelistedTokenAndUserHasNoBalance =
+    whitelistedToken && Number(selectedCollateralToken?.balance) === 0;
+
+  const [collateralTokenValue, setCollateralTokenValue] =
     useState<TokenInputType>({
       token: selectedOpportunity.collateralToken,
       value: Number(
         Number(selectedCollateralToken?.balance) > 0
           ? selectedCollateralToken?.balance
-          : whitelistedToken
-          ? 1
-          : 0
+          : 1
       ),
       valueBI:
         selectedCollateralToken?.balanceBigInt ?? 0n > BigInt(0)
           ? selectedCollateralToken?.balanceBigInt
-          : BigInt(
-              whitelistedToken
-                ? parseUnits("1", selectedCollateralToken?.decimals ?? 0)
-                : 0
-            ),
+          : BigInt(parseUnits("1", selectedCollateralToken?.decimals ?? 0)),
     });
 
   const {
@@ -56,13 +53,37 @@ const OpportunityDetails = () => {
     maxCollateral,
     maxLoanAmount,
     maxLoanAmountNumber,
-  } = useCommitmentMax({
+  } = useGetCommitmentMax({
     collateralTokenDecimals: selectedCollateralToken?.decimals,
     commitment: selectedOpportunity,
     requestedCollateral: collateralTokenValue.valueBI,
     returnCalculatedLoanAmount: true,
   });
 
+  useEffect(() => {
+    if (isWhitelistedTokenAndUserHasNoBalance) {
+      return;
+    }
+
+    setCollateralTokenValue((prev) => {
+      if (prev.valueBI === maxCollateral) {
+        return prev;
+      }
+      return {
+        ...prev,
+        valueBI: maxCollateral,
+        value: Number(
+          formatUnits(maxCollateral, selectedCollateralToken?.decimals ?? 0)
+        ),
+      };
+    });
+  }, [
+    collateralTokenValue,
+    isWhitelistedTokenAndUserHasNoBalance,
+    maxCollateral,
+    selectedCollateralToken?.decimals,
+  ]);
+
   const { isNewBorrower } = useIsNewBorrower();
 
   let extensionCount = 0;
@@ -112,9 +133,12 @@ const OpportunityDetails = () => {
         maxAmount={Number(selectedCollateralToken?.balance ?? 0)}
         imageUrl={selectedCollateralToken?.logo || ""}
         sublabel={`Max collateral: ${numberWithCommasAndDecimals(
-          selectedCollateralToken?.balance
+          formatUnits(
+            maxCollateral ?? 0n,
+            selectedCollateralToken?.decimals ?? 0
+          )
         )} ${selectedCollateralToken?.symbol}`}
-        onChange={setCollataralTokenValue}
+        onChange={setCollateralTokenValue}
       />
       <div className="duration-info">
         <DataField label="Duration">