feat: update borrow limit to protect

Author: cuzz-venus

apps/evm/src/components/AccountHealthBar/index.tsx

@@ -49,6 +49,14 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
         })
       : undefined;
 
+  const protectedBorrowLimitUsedPercentage =
+    typeof borrowBalanceProtectedCents === 'number' && typeof borrowLimitProtectedCents === 'number'
+      ? calculatePercentage({
+          numerator: borrowBalanceProtectedCents,
+          denominator: borrowLimitProtectedCents,
+        })
+      : undefined;
+
   const fillPercentage =
     typeof borrowBalanceCents === 'number' && typeof liquidationThresholdCents === 'number'
       ? calculatePercentage({
@@ -69,14 +77,6 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
     formatPercentageToReadableValue(borrowLimitUsedPercentage);
   const sanitizedFillPercentage = fillPercentage || 0;
 
-  const readableBorrowLimit = formatCentsToReadableValue({
-    value: borrowLimitCents,
-  });
-
-  const readableLiquidationThreshold = formatCentsToReadableValue({
-    value: liquidationThresholdCents,
-  });
-
   const readableBorrowBalance = formatCentsToReadableValue({
     value: borrowBalanceCents,
   });
@@ -85,13 +85,17 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
     value: borrowBalanceProtectedCents,
   });
 
-  const protectedBorrowLimitUsedPercentage =
-    typeof borrowBalanceProtectedCents === 'number' && typeof borrowLimitProtectedCents === 'number'
-      ? calculatePercentage({
-          numerator: borrowBalanceProtectedCents,
-          denominator: borrowLimitProtectedCents,
-        })
-      : undefined;
+  const readableBorrowLimit = formatCentsToReadableValue({
+    value: borrowLimitCents,
+  });
+
+  const readableBorrowLimitProtected = formatCentsToReadableValue({
+    value: borrowLimitProtectedCents,
+  });
+
+  const readableLiquidationThreshold = formatCentsToReadableValue({
+    value: liquidationThresholdCents,
+  });
 
   const isProtectionModeEnabled =
     borrowLimitUsedPercentage !== undefined &&
@@ -123,6 +127,7 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
               hideUserBalances ??
               formatPercentageToReadableValue(protectedBorrowLimitUsedPercentage),
             borrowLimit: hideUserBalances ?? readableBorrowLimit,
+            borrowLimitProtected: hideUserBalances ?? readableBorrowLimitProtected,
           }}
         />
       ) : undefined,
@@ -133,6 +138,7 @@ export const AccountHealthBar: React.FC<AccountHealthBarProps> = ({
       readableBorrowLimitUsedPercentage,
       protectedBorrowLimitUsedPercentage,
       readableBorrowLimit,
+      readableBorrowLimitProtected,
       hideUserBalances,
       isProtectionModeEnabled,
       Trans,

apps/evm/src/libs/translations/translations/en.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = Liquidation Threshold<LineBreak/>When your borrow balance reaches this value, your position becomes eligible for liquidation.<LineBreak/><LineBreak/>Learn more about the <Link>calculation.</Link>",
     "tooltip": "Borrow balance:<LineBreak/>{{borrowBalance}} ({{borrowLimitUsedPercentage}} of your borrow limit)<LineBreak/><LineBreak/>Borrow limit:<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "Borrow balance (protected):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} of your borrow limit)<LineBreak/><LineBreak/>Borrow balance (spot): {{borrowBalance}}<LineBreak/>Borrow limit: {{borrowLimit}}"
+    "tooltipProtection": "Borrow balance (protected):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} of your borrow limit)<LineBreak/><LineBreak/>Borrow balance (spot): {{borrowBalance}}<LineBreak/>Borrow limit: {{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "Start now"

apps/evm/src/libs/translations/translations/ja.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = 清算閾値<LineBreak/>借入残高がこの値に達すると、ポジションが清算対象になります。<LineBreak/><LineBreak/><Link>計算方法</Link>の詳細はこちら。",
     "tooltip": "借入残高:<LineBreak/>{{borrowBalance}} (借入限度額の{{borrowLimitUsedPercentage}})<LineBreak/><LineBreak/>借入限度額:<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "借入残高（保護）:<LineBreak/>{{borrowBalanceProtected}} (借入限度額の{{protectedBorrowLimitUsedPercentage}})<LineBreak/><LineBreak/>借入残高（スポット）: {{borrowBalance}}<LineBreak/>借入限度額: {{borrowLimit}}"
+    "tooltipProtection": "借入残高（保護）:<LineBreak/>{{borrowBalanceProtected}} (借入限度額の{{protectedBorrowLimitUsedPercentage}})<LineBreak/><LineBreak/>借入残高（スポット）: {{borrowBalance}}<LineBreak/>借入限度額: {{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "今すぐ始める"

apps/evm/src/libs/translations/translations/th.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = เกณฑ์การชำระบัญชี<LineBreak/>เมื่อยอดยืมของคุณถึงค่านี้ ตำแหน่งของคุณจะมีสิทธิ์ถูกชำระบัญชี<LineBreak/><LineBreak/>เรียนรู้เพิ่มเติมเกี่ยวกับ<Link>การคำนวณ</Link>",
     "tooltip": "ยอดกู้ยืม:<LineBreak/>{{borrowBalance}} ({{borrowLimitUsedPercentage}} ของวงเงินกู้ยืม)<LineBreak/><LineBreak/>วงเงินกู้ยืม:<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "ยอดกู้ยืม (ป้องกัน):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} ของวงเงินกู้ยืม)<LineBreak/><LineBreak/>ยอดกู้ยืม (สปอต): {{borrowBalance}}<LineBreak/>วงเงินกู้ยืม: {{borrowLimit}}"
+    "tooltipProtection": "ยอดกู้ยืม (ป้องกัน):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} ของวงเงินกู้ยืม)<LineBreak/><LineBreak/>ยอดกู้ยืม (สปอต): {{borrowBalance}}<LineBreak/>วงเงินกู้ยืม: {{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "เริ่มตอนนี้"

apps/evm/src/libs/translations/translations/tr.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = Tasfiye Eşiği<LineBreak/>Borç bakiyeniz bu değere ulaştığında, pozisyonunuz tasfiye edilmeye uygun hale gelir.<LineBreak/><LineBreak/><Link>Hesaplama</Link> hakkında daha fazla bilgi edinin.",
     "tooltip": "Borç bakiyesi:<LineBreak/>{{borrowBalance}} (borç limitinizin {{borrowLimitUsedPercentage}})<LineBreak/><LineBreak/>Borç limiti:<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "Borç bakiyesi (Koruma):<LineBreak/>{{borrowBalanceProtected}} (borç limitinizin {{protectedBorrowLimitUsedPercentage}})<LineBreak/><LineBreak/>Borç bakiyesi (spot): {{borrowBalance}}<LineBreak/>Borç limiti: {{borrowLimit}}"
+    "tooltipProtection": "Borç bakiyesi (Koruma):<LineBreak/>{{borrowBalanceProtected}} (borç limitinizin {{protectedBorrowLimitUsedPercentage}})<LineBreak/><LineBreak/>Borç bakiyesi (spot): {{borrowBalance}}<LineBreak/>Borç limiti: {{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "Şimdi başla"

apps/evm/src/libs/translations/translations/vi.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = Ngưỡng thanh lý<LineBreak/>Khi số dư vay của bạn đạt đến giá trị này, vị thế của bạn sẽ đủ điều kiện bị thanh lý.<LineBreak/><LineBreak/>Tìm hiểu thêm về <Link>cách tính.</Link>",
     "tooltip": "Số dư vay:<LineBreak/>{{borrowBalance}} ({{borrowLimitUsedPercentage}} hạn mức vay)<LineBreak/><LineBreak/>Hạn mức vay:<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "Số dư vay (Bảo vệ):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} hạn mức vay)<LineBreak/><LineBreak/>Số dư vay (spot): {{borrowBalance}}<LineBreak/>Hạn mức vay: {{borrowLimit}}"
+    "tooltipProtection": "Số dư vay (Bảo vệ):<LineBreak/>{{borrowBalanceProtected}} ({{protectedBorrowLimitUsedPercentage}} hạn mức vay)<LineBreak/><LineBreak/>Số dư vay (spot): {{borrowBalance}}<LineBreak/>Hạn mức vay: {{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "Bắt đầu ngay"

apps/evm/src/libs/translations/translations/zh-Hans.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = 清算阈值<LineBreak/>当您的借款余额达到此值时，您的仓位将有资格被清算。<LineBreak/><LineBreak/>了解更多关于<Link>计算方式。</Link>",
     "tooltip": "借款余额：<LineBreak/>{{borrowBalance}}（借款限额的{{borrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款限额：<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "借款余额（保护）：<LineBreak/>{{borrowBalanceProtected}}（借款限额的{{protectedBorrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款余额（现货）：{{borrowBalance}}<LineBreak/>借款限额：{{borrowLimit}}"
+    "tooltipProtection": "借款余额（保护）：<LineBreak/>{{borrowBalanceProtected}}（借款限额的{{protectedBorrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款余额（现货）：{{borrowBalance}}<LineBreak/>借款限额：{{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "立即开始"

apps/evm/src/libs/translations/translations/zh-Hant.json

@@ -142,7 +142,7 @@
     "liquidationThresholdShort": "LT:",
     "liquidationThresholdTooltip": "LT = 清算閾值<LineBreak/>當您的借款餘額達到此值時，您的倉位將有資格被清算。<LineBreak/><LineBreak/>了解更多關於<Link>計算方式。</Link>",
     "tooltip": "借款餘額：<LineBreak/>{{borrowBalance}}（借款限額的{{borrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款限額：<LineBreak/>{{borrowLimit}}",
-    "tooltipProtection": "借款餘額（保護）：<LineBreak/>{{borrowBalanceProtected}}（借款限額的{{protectedBorrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款餘額（現貨）：{{borrowBalance}}<LineBreak/>借款限額：{{borrowLimit}}"
+    "tooltipProtection": "借款餘額（保護）：<LineBreak/>{{borrowBalanceProtected}}（借款限額的{{protectedBorrowLimitUsedPercentage}}）<LineBreak/><LineBreak/>借款餘額（現貨）：{{borrowBalance}}<LineBreak/>借款限額：{{borrowLimitProtected}}"
   },
   "adBanner": {
     "startNow": "立即開始"