From 7f49616aa7aee188689a76cdace0fc2a1cc70b87 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@dydx.exchange>
Date: Thu, 26 Sep 2024 16:01:03 -0400
Subject: [PATCH] fix chart and bump version

---
 package.json                                  | 2 +-
 pnpm-lock.yaml                                | 8 ++++----
 src/components/visx/TimeSeriesChart.tsx       | 4 +++-
 src/hooks/vaultsHooks.ts                      | 2 +-
 src/pages/vaults/VaultDepositWithdrawForm.tsx | 1 -
 src/pages/vaults/VaultPnlChart.tsx            | 7 ++++---
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5440b38d7..45815a1ef 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
-    "@dydxprotocol/v4-abacus": "1.11.24",
+    "@dydxprotocol/v4-abacus": "1.12.2",
     "@dydxprotocol/v4-client-js": "1.6.1",
     "@dydxprotocol/v4-localization": "^1.1.203",
     "@dydxprotocol/v4-proto": "^6.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d70d1e101..db19dece4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ dependencies:
     specifier: ^5.23.3
     version: 5.23.3
   '@dydxprotocol/v4-abacus':
-    specifier: 1.11.24
-    version: 1.11.24
+    specifier: 1.12.2
+    version: 1.12.2
   '@dydxprotocol/v4-client-js':
     specifier: 1.6.1
     version: 1.6.1
@@ -3025,8 +3025,8 @@ packages:
       '@datadog/browser-core': 5.23.3
     dev: false
 
-  /@dydxprotocol/v4-abacus@1.11.24:
-    resolution: {integrity: sha512-LHzcZgIxgAC8Zqkdl70FObPnIAGlp9i8SZLiYI6GoQDby4uM4LSNxM8S1OWAwLPSLiWdXrQNAaaMQ/5ygnJP7A==}
+  /@dydxprotocol/v4-abacus@1.12.2:
+    resolution: {integrity: sha512-zhMLP53Nfzfh7Doet9+SMI1RlF41jmFmeHlFc3RvgKgSsIBsRs7PA1dmcGVKaWqKvSsEivA5zWPcO/ZfRd18gw==}
     dependencies:
       '@js-joda/core': 3.2.0
       format-util: 1.0.5
diff --git a/src/components/visx/TimeSeriesChart.tsx b/src/components/visx/TimeSeriesChart.tsx
index ab18e94ad..65e8f4237 100644
--- a/src/components/visx/TimeSeriesChart.tsx
+++ b/src/components/visx/TimeSeriesChart.tsx
@@ -155,7 +155,9 @@ export const TimeSeriesChart = <Datum extends {}>({
   const [zoomDomain, setZoomDomain] = useState<number | undefined>(
     defaultZoomDomain
       ? getClampedZoomDomain(defaultZoomDomain)
-      : xAccessor(latestDatum) - xAccessor(earliestDatum)
+      : latestDatum != null && earliestDatum != null
+        ? xAccessor(latestDatum) - xAccessor(earliestDatum)
+        : minZoomDomain
   );
 
   const [zoomDomainAnimateTo, setZoomDomainAnimateTo] = useState<number | undefined>();
diff --git a/src/hooks/vaultsHooks.ts b/src/hooks/vaultsHooks.ts
index fecc56dba..67a5c5737 100644
--- a/src/hooks/vaultsHooks.ts
+++ b/src/hooks/vaultsHooks.ts
@@ -74,7 +74,7 @@ export const useLoadedVaultDetails = () => {
 
 export const useVaultPnlHistory = () => {
   const details = useLoadedVaultDetails();
-  return useMemo(() => details.data?.history?.toArray(), [details.data?.history]);
+  return useMemo(() => details.data?.history?.toArray().reverse(), [details.data?.history]);
 };
 
 const MAX_UPDATE_SPEED_MS = timeUnits.minute;
diff --git a/src/pages/vaults/VaultDepositWithdrawForm.tsx b/src/pages/vaults/VaultDepositWithdrawForm.tsx
index cf838618b..c46b7a233 100644
--- a/src/pages/vaults/VaultDepositWithdrawForm.tsx
+++ b/src/pages/vaults/VaultDepositWithdrawForm.tsx
@@ -203,7 +203,6 @@ export const VaultDepositWithdrawForm = ({
       setAmountState('');
       dispatch(setVaultFormConfirmationStep(false));
 
-      // TODO tell abacus and respond
       onSuccess?.();
     } catch (e) {
       // eslint-disable-next-line no-console
diff --git a/src/pages/vaults/VaultPnlChart.tsx b/src/pages/vaults/VaultPnlChart.tsx
index 5d7f144d8..3c89cb8dd 100644
--- a/src/pages/vaults/VaultPnlChart.tsx
+++ b/src/pages/vaults/VaultPnlChart.tsx
@@ -58,9 +58,9 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => {
   );
 
   const timeUnitsToRender = useMemo(() => {
-    const dataRange =
-      data.length > 1 ? (data[data.length - 1].date ?? 0) - (data[0].date ?? 0) : 7 * timeUnits.day;
-    return TIME_RANGES.filter((t) => t.time <= dataRange + timeUnits.day * 3).map((t) => ({
+    const dataRange = data.length > 1 ? (data[data.length - 1].date ?? 0) - (data[0].date ?? 0) : 0;
+    const validRanges = TIME_RANGES.filter((t) => t.time <= dataRange + timeUnits.day * 3);
+    return validRanges.map((t) => ({
       value: t.value,
       label: `${t.labelNumDays}${stringGetter({ key: STRING_KEYS.DAYS_ABBREVIATED })}`,
     }));
@@ -166,6 +166,7 @@ export const VaultPnlChart = ({ className }: VaultPnlChartProps) => {
     selectedTimeRange != null
       ? TIME_RANGES.find((t) => t.value === selectedTimeRange)?.time
       : undefined;
+
   return (
     <div className={className}>
       <div tw="row justify-between pl-1 pr-1">