feat: update liq price logic

burrowHQ · Jan 23, 2025 · 701b6ee · 701b6ee
1 parent f8acf23
commit 701b6ee
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 50 deletions.
diff --git a/hooks/useLiqPrice.ts b/hooks/useLiqPrice.ts
@@ -45,36 +45,58 @@ export function useLiqPrice({
   const token_c_price = token_c_asset?.price?.usd || 0;
   const token_p_price = token_p_asset?.price?.usd || 0;
   const token_d_price = token_d_asset?.price?.usd || 0;
-  const hp_fee_decimals = get_hp_fee({
+  const hp_fee_amount = get_hp_fee({
     debt_cap,
     uahpi: token_d_asset.uahpi,
     uahpi_at_open,
   });
   const hp_fee = new Decimal(token_d_price).mul(
     shrinkToken(
-      hp_fee_decimals,
+      hp_fee_amount,
       token_d_asset.metadata.decimals + token_d_asset.config.extra_decimals,
     ),
   );
+  // (token_c_value + token_p_value) * percent > total_debt + total_hp_fee
   if (position_type == "Long") {
-    const p_liq_price = new Decimal(token_d_amount || 0)
-      .mul(token_d_price)
+    // c and d are the same token
+    // const left = new Decimal(token_c_amount || 0)
+    //   .mul(token_c_price)
+    //   .plus(new Decimal(token_p_amount || 0).mul(token_p_price))
+    //   .mul(safety_buffer);
+    // const right = new Decimal(token_d_amount || 0).plus(hp_fee_amount || 0).mul(token_c_price);
+    const liq_price = new Decimal(token_d_amount || 0)
       .plus(hp_fee)
-      .div(safety_buffer)
-      .minus(new Decimal(token_c_amount || 0).mul(token_c_price))
-      .div(token_p_amount)
+      .minus(new Decimal(token_c_amount || 0).mul(safety_buffer))
+      .div(new Decimal(token_p_amount || 0).mul(safety_buffer))
       .toFixed();
-    return p_liq_price;
+    // const p_liq_price = new Decimal(token_d_amount || 0)
+    //   .mul(token_d_price)
+    //   .plus(hp_fee)
+    //   .div(safety_buffer)
+    //   .minus(new Decimal(token_c_amount || 0).mul(token_c_price))
+    //   .div(token_p_amount)
+    //   .toFixed();
+    return liq_price;
   } else {
-    // Short
-    const d_liq_price = new Decimal(token_c_amount)
-      .mul(token_c_price)
-      .plus(new Decimal(token_p_amount).mul(token_p_price))
+    // Short c and p are the same token
+    // const left = new Decimal(token_c_amount || 0)
+    //   .mul(token_c_price)
+    //   .plus(new Decimal(token_p_amount || 0).mul(token_c_price))
+    //   .mul(safety_buffer);
+    // const right = new Decimal(token_d_amount || 0).plus(hp_fee_amount || 0).mul(token_d_price);
+    const liq_price = new Decimal(token_c_amount || 0)
+      .plus(token_p_amount || 0)
       .mul(safety_buffer)
-      .minus(hp_fee)
-      .div(token_d_amount)
+      .div(new Decimal(token_d_amount || 0).plus(hp_fee))
       .toFixed();
-    return d_liq_price;
+    // const d_liq_price = new Decimal(token_c_amount)
+    //   .mul(token_c_price)
+    //   .plus(new Decimal(token_p_amount).mul(token_p_price))
+    //   .mul(safety_buffer)
+    //   .minus(hp_fee)
+    //   .div(token_d_amount)
+    //   .toFixed();
+    return liq_price;
   }
 }
 

diff --git a/screens/Trading/components/ChangeCollateralMobile.tsx b/screens/Trading/components/ChangeCollateralMobile.tsx
@@ -591,13 +591,13 @@ const ChangeCollateralMobile: FC<ChangeCollateralMobileProps> = ({ open, onClose
                       {+(inputValue || 0) > 0 ? (
                         <>
                           <span className="text-gray-300 mr-2 line-through">
-                            ${beautifyPrice(LiqPrice)}
+                            {beautifyPrice(LiqPrice)}
                           </span>
                           <RightArrow />
-                          <p className="ml-2">${beautifyPrice(LiqPriceNew)}</p>
+                          <p className="ml-2">{beautifyPrice(LiqPriceNew)}</p>
                         </>
                       ) : (
-                        <p>${beautifyPrice(LiqPrice)}</p>
+                        <p>{beautifyPrice(LiqPrice)}</p>
                       )}
                     </div>
                   </div>
@@ -732,13 +732,13 @@ const ChangeCollateralMobile: FC<ChangeCollateralMobileProps> = ({ open, onClose
                       {+(inputValue || 0) > 0 ? (
                         <>
                           <span className="text-gray-300 mr-2 line-through">
-                            ${beautifyPrice(LiqPrice)}
+                            {beautifyPrice(LiqPrice)}
                           </span>
                           <RightArrow />
-                          <p className="ml-2">${beautifyPrice(LiqPriceNew)}</p>
+                          <p className="ml-2">{beautifyPrice(LiqPriceNew)}</p>
                         </>
                       ) : (
-                        <p>${beautifyPrice(LiqPrice)}</p>
+                        <p>{beautifyPrice(LiqPrice)}</p>
                       )}
                     </div>
                   </div>

diff --git a/screens/Trading/components/ConfirmMobile.tsx b/screens/Trading/components/ConfirmMobile.tsx
@@ -287,7 +287,7 @@ const ConfirmMobile: React.FC<IConfirmMobileProps | any> = ({
             </div>
             <div className="flex items-center justify-between text-sm mb-4">
               <div className="text-gray-300">Liq. Price</div>
-              <div>${beautifyPrice(confirmInfo.LiqPrice)}</div>
+              <div>{beautifyPrice(confirmInfo.LiqPrice)}</div>
             </div>
 
             {isMinTokenPAmount && (

diff --git a/screens/Trading/components/Table/PositionRow.tsx b/screens/Trading/components/Table/PositionRow.tsx
@@ -182,7 +182,7 @@ const PositionRow = ({
       <td>
         <div className="flex items-start flex-col">{beautifyPrice(indexPrice)}</div>
       </td>
-      <td>${beautifyPrice(LiqPrice)}</td>
+      <td>{beautifyPrice(LiqPrice)}</td>
       <td>
         <p className={`${pnl > 0 ? "text-green-150" : pnl < 0 ? "text-red-150" : "text-gray-400"}`}>
           {pnl === 0 ? "" : `${pnl > 0 ? `+$` : `-$`}`}
@@ -305,7 +305,7 @@ const PositionRow = ({
         </div>
         <div className="flex items-center justify-between text-sm mb-[18px]">
           <p className="text-gray-300">Liq. Price</p>
-          <p>${beautifyPrice(LiqPrice)}</p>
+          <p>{beautifyPrice(LiqPrice)}</p>
         </div>
         <div className="flex items-center justify-between text-sm mb-[18px]">
           <p className="text-gray-300">Opening time</p>

diff --git a/screens/Trading/components/TradingOperate.tsx b/screens/Trading/components/TradingOperate.tsx
@@ -156,15 +156,22 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ onMobileClose, id }) =>
       if (ReduxcategoryAssets2 && ReduxcategoryAssets1 && estimateData) {
         if (activeTab == "long" && +(longInput || 0) > 0 && (longOutput || 0) > 0) {
           const safetyBufferFactor = 1 - min_safety_buffer / 10000;
-          const assetPrice = getAssetPrice(ReduxcategoryAssets2) as any;
-          const token_c_value = new Decimal(longInput).mul(assetPrice || 0);
-          const token_d_value = token_c_value.mul(rangeMount || 0);
-          const liqPriceX = token_d_value
-            .div(safetyBufferFactor)
-            .minus(token_c_value)
-            .div(longOutput)
+          // const assetPrice = getAssetPrice(ReduxcategoryAssets2) as any;
+          // const token_c_value = new Decimal(longInput).mul(assetPrice || 0);
+          // const token_d_value = token_c_value.mul(rangeMount || 0);
+          const token_c_amount = longInput;
+          const token_d_amount = new Decimal(token_c_amount || 0).mul(rangeMount || 0);
+          const token_p_amount = longOutput;
+          const liq_price = new Decimal(token_d_amount || 0)
+            .minus(new Decimal(token_c_amount || 0).mul(safetyBufferFactor))
+            .div(new Decimal(token_p_amount || 0).mul(safetyBufferFactor))
             .toFixed();
-          setLiqPrice(liqPriceX || "0");
+          // const liqPriceX = token_d_value
+          //   .div(safetyBufferFactor)
+          //   .minus(token_c_value)
+          //   .div(longOutput)
+          //   .toFixed();
+          setLiqPrice(liq_price || "0");
         }
       }
     },
@@ -182,20 +189,34 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ onMobileClose, id }) =>
           +(shortOutput || 0) > 0
         ) {
           const safetyBufferFactor = 1 - min_safety_buffer / 10000;
-          const assetPrice = getAssetPrice(ReduxcategoryAssets2) as any;
-          const token_c_value = new Decimal(shortInput).mul(assetPrice || 0);
-          const token_p_value = new Decimal(estimateData.amount_out).mul(assetPrice || 0);
-          const liqPriceX = new Decimal(token_c_value)
-            .plus(token_p_value)
+          // const assetPrice = getAssetPrice(ReduxcategoryAssets2) as any;
+          // const token_c_value = new Decimal(shortInput).mul(assetPrice || 0);
+          // const token_p_value = new Decimal(estimateData.amount_out).mul(assetPrice || 0);
+          const token_c_amount = shortInput;
+          const token_p_amount = estimateData.amount_out;
+          const token_d_amount = shortOutput;
+
+          // const liq_price = new Decimal(token_c_amount || 0)
+          // .plus(token_p_amount || 0)
+          // .mul(safety_buffer)
+          // .div(new Decimal(token_d_amount || 0).plus(hp_fee))
+          // .toFixed();
+          const liq_price = new Decimal(token_c_amount || 0)
+            .plus(token_p_amount || 0)
             .mul(safetyBufferFactor)
-            .div(shortOutput);
-          setLiqPrice(liqPriceX.toFixed());
+            .div(token_d_amount)
+            .toFixed();
+          // const liqPriceX = new Decimal(token_c_value)
+          //   .plus(token_p_value)
+          //   .mul(safetyBufferFactor)
+          //   .div(shortOutput);
+          setLiqPrice(liq_price || "0");
         }
       }
       setForceUpdateLoading(!estimateData?.loadingComplete);
     },
     200,
-    [estimateData, activeTab, shortOutput, shortInput],
+    [estimateData, activeTab],
   );
   // update price and make refresh icon spin
   useEffect(() => {
@@ -696,7 +717,7 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ onMobileClose, id }) =>
             </div>
             <div className="flex items-center justify-between text-sm mb-4">
               <div className="text-gray-300">Liq. Price</div>
-              <span>${beautifyPrice(LiqPrice)}</span>
+              <span>{beautifyPrice(LiqPrice)}</span>
             </div>
             <div className="flex items-center justify-between text-sm mb-4">
               <div className="text-gray-300">Fee</div>
@@ -833,7 +854,7 @@ const TradingOperate: React.FC<TradingOperateProps> = ({ onMobileClose, id }) =>
             </div>
             <div className="flex items-center justify-between text-sm mb-4">
               <div className="text-gray-300">Liq. Price</div>
-              <span>${beautifyPrice(LiqPrice)}</span>
+              <span>{beautifyPrice(LiqPrice)}</span>
             </div>
             <div className="flex items-center justify-between text-sm mb-4">
               <div className="text-gray-300">Fee</div>

diff --git a/screens/Trading/index.tsx b/screens/Trading/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
+import Decimal from "decimal.js";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { LayoutBox } from "../../components/LayoutContainer/LayoutContainer";
 import { ComeBackIcon, MemeTagIcon, TokenArrow } from "./components/TradingIcon";
@@ -29,6 +30,7 @@ import { getSymbolById } from "../../transformers/nearSymbolTrans";
 import { useRegisterTokenType } from "../../hooks/useRegisterTokenType";
 
 const Trading = () => {
+  const [open, setOpen] = useState(false);
   const isMobile = isMobileDevice();
   const { query } = useRouterQuery();
   const accountId = useAccountId();
@@ -176,9 +178,15 @@ const Trading = () => {
 
     return () => clearInterval(intervalId); // Cleanup on unmount
   }, [id]);
-
-  const [open, setOpen] = useState(false);
-  //
+  const indexPrice = useMemo(() => {
+    if (currentTokenCate1?.token_id && currentTokenCate2?.token_id) {
+      const currentTokenCate1Price = currentTokenCate1?.price?.usd || 0;
+      const currentTokenCate2Price = currentTokenCate2?.price?.usd || 0;
+      if (new Decimal(currentTokenCate2Price).gt(0)) {
+        return new Decimal(currentTokenCate1Price).div(currentTokenCate2Price).toFixed();
+      }
+    }
+  }, [currentTokenCate1, currentTokenCate2]);
   return (
     <LayoutBox>
       {isLoading ? (
@@ -265,7 +273,7 @@ const Trading = () => {
                       )}
                     </div>
                   </div>
-                  <span>${beautifyPrice(combinedAssetsData[id]?.price?.usd || 0)}</span>
+                  <span>{beautifyPrice(indexPrice)}</span>
                 </div>
                 {/* total v */}
                 <div className="text-sm">
@@ -307,9 +315,7 @@ const Trading = () => {
                           currentTokenCate1?.metadata?.symbol,
                         )}
                       </p>
-                      <p className="text-[#C0C4E9] text-xs">
-                        ${beautifyPrice(combinedAssetsData[id]?.price?.usd || 0)}
-                      </p>
+                      <p className="text-[#C0C4E9] text-xs">{beautifyPrice(indexPrice)}</p>
                     </div>
 
                     {/* cate2 */}

diff --git a/utils/beautyNumber.tsx b/utils/beautyNumber.tsx
@@ -1,7 +1,7 @@
 import { twMerge } from "tailwind-merge";
 
 export const beautifyPrice = (
-  num: string | number,
+  num: string | number | undefined,
   isDollar: boolean = false,
   decimalPlaces: number = 5,
   digitsPlaces: number = 4,