Fix total values to include closed (#1175)

jackburrus · web-flow · commit d805c1989f61 · 2024-06-12T13:29:56.000-06:00
* check if closed longs

* fix total values for closed

* remove console log

* remove typecasting

* move total variable

* split into two hooks

* moved is loading

* adds enabled param
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useTotalClosedLongsValue.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useTotalClosedLongsValue.ts
@@ -0,0 +1,45 @@
+import { ClosedLong } from "@delvtech/hyperdrive-viem";
+import { HyperdriveConfig } from "@hyperdrive/appconfig";
+import { useQuery } from "@tanstack/react-query";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
+import { useOpenOrClosedSearchParam } from "src/ui/markets/hooks/useOpenOrClosedSearchParam";
+import { Address } from "viem";
+
+export function useTotalClosedLongsValue({
+  hyperdrive,
+  account,
+  closedLongs,
+  enabled,
+}: {
+  hyperdrive: HyperdriveConfig;
+  account: Address | undefined;
+  closedLongs: ClosedLong[] | undefined;
+  enabled: boolean;
+}): { totalClosedLongsValue: bigint | undefined; isLoading: boolean } {
+  const readHyperdrive = useReadHyperdrive(hyperdrive.address);
+  const activeOpenOrClosedTab = useOpenOrClosedSearchParam();
+
+  const queryEnabled =
+    !!account && !!closedLongs && !!readHyperdrive && enabled;
+
+  const { data: totalClosedLongsValue, isLoading } = useQuery({
+    queryKey: makeQueryKey("totalClosedLongsValue", {
+      hyperdriveAddress: hyperdrive.address,
+      account,
+      activeOpenOrClosedTab,
+    }),
+    enabled: queryEnabled,
+    queryFn: queryEnabled
+      ? async () => {
+          let totalClosedLongsValue = 0n;
+          closedLongs.forEach((long) => {
+            totalClosedLongsValue += long.baseAmount;
+          });
+          return totalClosedLongsValue;
+        }
+      : undefined,
+  });
+
+  return { totalClosedLongsValue, isLoading };
+}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useTotalOpenLongsValue.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useTotalOpenLongsValue.ts
@@ -5,32 +5,38 @@ import { makeQueryKey } from "src/base/makeQueryKey";
 import { convertSharesToBase } from "src/hyperdrive/convertSharesToBase";
 import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
+import { useOpenOrClosedSearchParam } from "src/ui/markets/hooks/useOpenOrClosedSearchParam";
 import { Address } from "viem";
 
-export function useTotalLongsValue({
+export function useTotalOpenLongsValue({
   hyperdrive,
   account,
-  openLongs,
+  longs,
+  enabled,
 }: {
   hyperdrive: HyperdriveConfig;
   account: Address | undefined;
-  openLongs: Long[] | undefined;
-}): { totalLongsValue: bigint | undefined; isLoading: boolean } {
+  longs: Long[] | undefined;
+  enabled: boolean;
+}): { totalOpenLongsValue: bigint | undefined; isLoading: boolean } {
   const readHyperdrive = useReadHyperdrive(hyperdrive.address);
   const { poolInfo } = usePoolInfo({ hyperdriveAddress: hyperdrive.address });
-
+  const activeOpenOrClosedTab = useOpenOrClosedSearchParam();
   const queryEnabled =
-    !!account && !!openLongs && !!readHyperdrive && !!poolInfo;
+    !!account && !!longs && !!readHyperdrive && !!poolInfo && enabled;
 
-  const { data: totalLongsValue, isLoading } = useQuery({
+  const { data: totalOpenLongsValue, isLoading } = useQuery({
     queryKey: makeQueryKey("totalLongsValue", {
       hyperdriveAddress: hyperdrive.address,
       account,
+      activeOpenOrClosedTab,
     }),
     enabled: queryEnabled,
     queryFn: queryEnabled
       ? async () => {
-          const promises = openLongs.map((long) =>
+          let totalOpenLongsValue = 0n;
+
+          const promises = longs.map((long) =>
             readHyperdrive.previewCloseLong({
               maturityTime: long.maturity,
               bondAmountIn: long.bondAmount,
@@ -40,20 +46,19 @@ export function useTotalLongsValue({
 
           const results = await Promise.all(promises);
 
-          let totalLongsValue = 0n;
           results.forEach((result) => {
             const amountOutInBase = convertSharesToBase({
               decimals: hyperdrive.decimals,
               sharesAmount: result.amountOut,
               vaultSharePrice: poolInfo?.vaultSharePrice,
             });
-            totalLongsValue += amountOutInBase || 0n;
+            totalOpenLongsValue += amountOutInBase || 0n;
           });
 
-          return totalLongsValue;
+          return totalOpenLongsValue;
         }
       : undefined,
   });
 
-  return { totalLongsValue, isLoading };
+  return { totalOpenLongsValue, isLoading };
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useTotalClosedShortsValue.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useTotalClosedShortsValue.ts
@@ -0,0 +1,45 @@
+import { ClosedShort } from "@delvtech/hyperdrive-viem";
+import { HyperdriveConfig } from "@hyperdrive/appconfig";
+import { useQuery } from "@tanstack/react-query";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
+import { useOpenOrClosedSearchParam } from "src/ui/markets/hooks/useOpenOrClosedSearchParam";
+import { Address } from "viem";
+
+export function useTotalClosedShortsValue({
+  hyperdrive,
+  account,
+  closedShorts,
+  enabled,
+}: {
+  hyperdrive: HyperdriveConfig;
+  account: Address | undefined;
+  closedShorts: ClosedShort[] | undefined;
+  enabled: boolean;
+}): { totalClosedShortsValue: bigint | undefined; isLoading: boolean } {
+  const readHyperdrive = useReadHyperdrive(hyperdrive.address);
+  const activeOpenOrClosedTab = useOpenOrClosedSearchParam();
+
+  const queryEnabled =
+    !!account && !!closedShorts && !!readHyperdrive && enabled;
+
+  const { data: totalClosedShortsValue, isLoading } = useQuery({
+    queryKey: makeQueryKey("totalClosedShortsValue", {
+      hyperdriveAddress: hyperdrive.address,
+      account,
+      activeOpenOrClosedTab,
+    }),
+    enabled: queryEnabled,
+    queryFn: queryEnabled
+      ? async () => {
+          let totalClosedShortsValue = 0n;
+          closedShorts.forEach((short) => {
+            totalClosedShortsValue += short.baseAmountReceived;
+          });
+          return totalClosedShortsValue;
+        }
+      : undefined,
+  });
+
+  return { totalClosedShortsValue, isLoading };
+}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useTotalOpenShortsValue.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useTotalOpenShortsValue.ts
@@ -7,30 +7,34 @@ import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { Address } from "viem";
 
-export function useTotalShortsValue({
+export function useTotalOpenShortsValue({
   hyperdrive,
   account,
-  openShorts,
+  shorts,
+  enabled,
 }: {
   hyperdrive: HyperdriveConfig;
   account: Address | undefined;
-  openShorts: Short[] | undefined;
-}): { totalShortsValue: bigint | undefined; isLoading: boolean } {
+  shorts: Short[] | undefined;
+  enabled: boolean;
+}): { totalOpenShortsValue: bigint | undefined; isLoading: boolean } {
   const readHyperdrive = useReadHyperdrive(hyperdrive.address);
   const { poolInfo } = usePoolInfo({ hyperdriveAddress: hyperdrive.address });
 
   const queryEnabled =
-    !!account && !!openShorts && !!readHyperdrive && !!poolInfo;
+    !!account && !!shorts && !!readHyperdrive && !!poolInfo && enabled;
 
-  const { data: totalShortsValue, isLoading } = useQuery({
-    queryKey: makeQueryKey("totalShortsValue", {
+  const { data: totalOpenShortsValue, isLoading } = useQuery({
+    queryKey: makeQueryKey("totalOpenShortsValue", {
       hyperdriveAddress: hyperdrive.address,
       account,
     }),
     enabled: queryEnabled,
     queryFn: queryEnabled
       ? async () => {
-          const promises = openShorts.map((short) =>
+          let totalOpenShortsValue = 0n;
+
+          const promises = shorts.map((short) =>
             readHyperdrive.previewCloseShort({
               maturityTime: short.maturity,
               shortAmountIn: short.bondAmount,
@@ -40,20 +44,19 @@ export function useTotalShortsValue({
 
           const results = await Promise.all(promises);
 
-          let totalShortsValue = 0n;
           results.forEach((result) => {
             const amountOutInBase = convertSharesToBase({
               decimals: hyperdrive.decimals,
               sharesAmount: result.amountOut,
               vaultSharePrice: poolInfo?.vaultSharePrice,
             });
-            totalShortsValue += amountOutInBase || 0n;
+            totalOpenShortsValue += amountOutInBase || 0n;
           });
 
-          return totalShortsValue;
+          return totalOpenShortsValue;
         }
       : undefined,
   });
 
-  return { totalShortsValue, isLoading };
+  return { totalOpenShortsValue, isLoading };
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/LongsTab/LongsTab.tsx b/apps/hyperdrive-trading/src/ui/markets/LongsTab/LongsTab.tsx
@@ -6,12 +6,15 @@ import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { ClosedLongsTable } from "src/ui/hyperdrive/longs/ClosedLongsTable/ClosedLongsTable";
 import { OpenLongModalButton } from "src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton";
 import { OpenLongsTable } from "src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTable";
+import { useClosedLongs } from "src/ui/hyperdrive/longs/hooks/useClosedLongs";
 import { useOpenLongs } from "src/ui/hyperdrive/longs/hooks/useOpenLongs";
-import { useTotalLongsValue } from "src/ui/hyperdrive/longs/hooks/useTotalLongsValue";
+import { useTotalClosedLongsValue } from "src/ui/hyperdrive/longs/hooks/useTotalClosedLongsValue";
+import { useTotalOpenLongsValue } from "src/ui/hyperdrive/longs/hooks/useTotalOpenLongsValue";
 import { MarketDetailsTab } from "src/ui/markets/MarketDetailsTab/MarketDetailsTab";
 import { OpenClosedFilter } from "src/ui/markets/OpenClosedFilter/OpenClosedFilter";
 import { useOpenOrClosedSearchParam } from "src/ui/markets/hooks/useOpenOrClosedSearchParam";
 import { useAccount } from "wagmi";
+
 export function LongsTab({
   hyperdrive,
 }: {
@@ -24,36 +27,54 @@ export function LongsTab({
     account,
     hyperdriveAddress: hyperdrive.address,
   });
-  const { totalLongsValue, isLoading } = useTotalLongsValue({
-    hyperdrive,
+  const { closedLongs } = useClosedLongs({
     account,
-    openLongs,
+    hyperdriveAddress: hyperdrive.address,
   });
+  const { totalOpenLongsValue, isLoading: isTotalOpenValueLoading } =
+    useTotalOpenLongsValue({
+      hyperdrive,
+      account,
+      longs: openLongs,
+      enabled: activeOpenOrClosedTab === "Open",
+    });
+  const { totalClosedLongsValue, isLoading: isTotalClosedLongsValueLoading } =
+    useTotalClosedLongsValue({
+      hyperdrive,
+      account,
+      closedLongs,
+      enabled: activeOpenOrClosedTab === "Closed",
+    });
   const baseToken = findBaseToken({
     baseTokenAddress: hyperdrive.baseToken,
     tokens: appConfig.tokens,
   });
+
+  const totalValue =
+    activeOpenOrClosedTab === "Open"
+      ? totalOpenLongsValue
+      : totalClosedLongsValue;
+  const longs = activeOpenOrClosedTab === "Open" ? openLongs : closedLongs;
+
   return (
     <MarketDetailsTab
       positions={
         <div className="flex flex-col">
           <div className="flex flex-wrap items-center justify-between gap-4 p-8">
             <div className="flex flex-col items-start gap-2">
               <h5 className="font-medium">Long Positions</h5>
-              {!isLoading ? (
-                <>
-                  {openLongs?.length ? (
-                    <p className="text-sm text-neutral-content">
-                      Total Value:{" "}
-                      {formatBalance({
-                        balance: totalLongsValue || 0n,
-                        decimals: baseToken.decimals,
-                        places: baseToken.places,
-                      })}{" "}
-                      {baseToken.symbol}
-                    </p>
-                  ) : undefined}
-                </>
+              {!isTotalOpenValueLoading || !isTotalClosedLongsValueLoading ? (
+                longs?.length ? (
+                  <p className="text-sm text-neutral-content">
+                    Total Value:{" "}
+                    {formatBalance({
+                      balance: totalValue || 0n,
+                      decimals: baseToken.decimals,
+                      places: baseToken.places,
+                    })}{" "}
+                    {baseToken.symbol}
+                  </p>
+                ) : undefined
               ) : (
                 <Skeleton width={100} />
               )}
diff --git a/apps/hyperdrive-trading/src/ui/markets/ShortsTab/ShortsTab.tsx b/apps/hyperdrive-trading/src/ui/markets/ShortsTab/ShortsTab.tsx
