From 4e4ad6f676bec64fcef9c5aa53dc8875211976ba Mon Sep 17 00:00:00 2001
From: 0xshiba1 <158560741+0xshiba1@users.noreply.github.com>
Date: Fri, 19 Jul 2024 23:43:01 +0800
Subject: [PATCH] apr fixes

---
 .../actions-modal/HistoricalAprLineChart.tsx  | 44 +++++++++++++------
 frontend/src/lib/events.ts                    |  3 +-
 frontend/src/lib/format.ts                    |  4 +-
 frontend/src/lib/liquidityMining.ts           | 12 ++++-
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/dashboard/actions-modal/HistoricalAprLineChart.tsx b/frontend/src/components/dashboard/actions-modal/HistoricalAprLineChart.tsx
index 3691b22a..31916d3b 100644
--- a/frontend/src/components/dashboard/actions-modal/HistoricalAprLineChart.tsx
+++ b/frontend/src/components/dashboard/actions-modal/HistoricalAprLineChart.tsx
@@ -74,10 +74,7 @@ function TooltipContent({ side, fields, d, viewBox, x }: TooltipContentProps) {
 
   const aprPercent = new BigNumber(d[interestField] as number);
   const totalAprPercent = rewardFields.reduce(
-    (acc, field) =>
-      acc.plus(
-        new BigNumber(d[field] as number).times(side === Side.DEPOSIT ? 1 : -1),
-      ),
+    (acc, field) => acc.plus(new BigNumber(d[field] as number)),
     new BigNumber(aprPercent),
   );
 
@@ -110,11 +107,7 @@ function TooltipContent({ side, fields, d, viewBox, x }: TooltipContentProps) {
               value={
                 <span style={{ color }}>
                   {formatPercent(
-                    !coinType
-                      ? aprPercent
-                      : new BigNumber(d[field] as number).times(
-                          side === Side.DEPOSIT ? 1 : -1,
-                        ),
+                    !coinType ? aprPercent : new BigNumber(d[field] as number),
                     { useAccountingSign: true },
                   )}
                 </span>
@@ -180,12 +173,37 @@ function Chart({ side, data }: ChartProps) {
   const minX = Math.min(...data.map((d) => d.timestampS));
   const maxX = Math.max(...data.map((d) => d.timestampS));
 
-  const minY = 0;
-  const maxY = Math.max(
+  let minY = Math.min(
+    0,
+    ...data.map(
+      (d) =>
+        d[
+          side === Side.DEPOSIT
+            ? "depositInterestAprPercent"
+            : "borrowInterestAprPercent"
+        ] ?? 0,
+    ),
+    ...data.map((d) =>
+      fields.reduce((acc: number, field) => acc + (d[field] ?? 0), 0),
+    ),
+  );
+  if (minY < 0) minY -= 1;
+
+  let maxY = Math.max(
+    0,
+    ...data.map(
+      (d) =>
+        d[
+          side === Side.DEPOSIT
+            ? "depositInterestAprPercent"
+            : "borrowInterestAprPercent"
+        ] ?? 0,
+    ),
     ...data.map((d) =>
       fields.reduce((acc: number, field) => acc + (d[field] ?? 0), 0),
     ),
   );
+  if (maxY > 0) maxY += 1;
 
   // Ticks
   const ticksX = data
@@ -200,7 +218,7 @@ function Chart({ side, data }: ChartProps) {
       return d.timestampS + new Date().getTimezoneOffset() * 60;
     });
   const ticksY = Array.from({ length: 4 }).map(
-    (_, index, array) => Math.ceil(maxY / (array.length - 1)) * index,
+    (_, index, array) => minY + ((maxY - minY) / (array.length - 1)) * index,
   );
 
   const tickFormatterX = (timestampS: number) => {
@@ -208,7 +226,7 @@ function Chart({ side, data }: ChartProps) {
     return format(new Date(timestampS * 1000), "MM/dd");
   };
   const tickFormatterY = (value: number) =>
-    formatPercent(new BigNumber(value), { dp: 0 });
+    formatPercent(new BigNumber(value), { dp: 1 });
 
   // Domain
   const domainX = [minX, maxX];
diff --git a/frontend/src/lib/events.ts b/frontend/src/lib/events.ts
index b4b2710b..635c4803 100644
--- a/frontend/src/lib/events.ts
+++ b/frontend/src/lib/events.ts
@@ -200,7 +200,8 @@ export const calculateRewardAprPercent = (
               ? event.depositedAmountUsd
               : event.borrowedAmountUsd,
           )
-          .times(100),
+          .times(100)
+          .times(side === Side.DEPOSIT ? 1 : -1),
       ),
     new BigNumber(0),
   );
diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
index 61744087..53ba26f8 100644
--- a/frontend/src/lib/format.ts
+++ b/frontend/src/lib/format.ts
@@ -165,11 +165,11 @@ export const formatPercent = (
     style: "percent",
     minimumFractionDigits: dp,
     maximumFractionDigits: dp,
-  }).format(value.abs().div(100).toNumber());
+  }).format(+value.div(100));
 
   return !useAccountingSign || value.gte(0)
     ? formattedValue
-    : `(${formattedValue})`;
+    : `(${formattedValue[0] === "-" ? formattedValue.slice(1) : formattedValue})`;
 };
 
 export const formatDuration = (seconds: BigNumber) => {
diff --git a/frontend/src/lib/liquidityMining.ts b/frontend/src/lib/liquidityMining.ts
index e726db16..7d4a608a 100644
--- a/frontend/src/lib/liquidityMining.ts
+++ b/frontend/src/lib/liquidityMining.ts
@@ -81,7 +81,11 @@ export function formatRewards(
               poolReward.endTimeMs - poolReward.startTimeMs,
             ),
           )
-          .div(reserve.depositedAmountUsd)
+          .div(
+            side === Side.DEPOSIT
+              ? reserve.depositedAmountUsd
+              : reserve.borrowedAmountUsd,
+          )
           .times(100)
       : undefined;
     const perDay = rewardReserve
@@ -93,7 +97,11 @@ export function formatRewards(
             ),
           )
           .div(365)
-          .div(reserve.depositedAmount);
+          .div(
+            side === Side.DEPOSIT
+              ? reserve.depositedAmount
+              : reserve.borrowedAmount,
+          );
 
     return {
       stats: {