use total shorts value added (#1042)

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useTotalShortsValue.ts

@@ -0,0 +1,73 @@
+import { Short } from "@delvtech/hyperdrive-viem";
+import { HyperdriveConfig } from "@hyperdrive/appconfig";
+import { useQueries } from "@tanstack/react-query";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { parseUnits } from "src/base/parseUnits";
+import { convertSharesToBase } from "src/hyperdrive/convertSharesToBase";
+import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
+import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
+import { Address } from "viem";
+
+export function useTotalShortsValue({
+  hyperdrive,
+  account,
+  openShorts,
+}: {
+  hyperdrive: HyperdriveConfig;
+  account: Address | undefined;
+  openShorts: Short[] | undefined;
+}): { totalShortsValue: bigint | undefined; isLoading: boolean } {
+  const readHyperdrive = useReadHyperdrive(hyperdrive.address);
+  const { poolInfo } = usePoolInfo({ hyperdriveAddress: hyperdrive.address });
+
+  let isLoading = true;
+  const queryEnabled =
+    !!account && !!openShorts && !!readHyperdrive && !!poolInfo;
+  const previewCloseShortQueries = useQueries({
+    queries:
+      openShorts?.map((short) => ({
+        queryKey: makeQueryKey("previewCloseShort", {
+          hyperdriveAddress: hyperdrive.address,
+          maturityTime: short.maturity?.toString(),
+          shortAmountIn: short.bondAmount?.toString(),
+          minAmountOut: parseUnits("0", 18).toString(),
+          destination: account,
+          asBase: false,
+        }),
+        enabled: queryEnabled,
+        queryFn: queryEnabled
+          ? () =>
+              readHyperdrive?.previewCloseShort({
+                maturityTime: short.maturity,
+                shortAmountIn: short.bondAmount,
+                destination: account,
+                asBase: false,
+                minAmountOut: parseUnits("0", 18),
+                options: {
+                  from: account,
+                },
+              })
+          : undefined,
+      })) ?? [],
+  });
+  const allQueriesSucceeded = previewCloseShortQueries.every(
+    (query) => query.status === "success",
+  );
+  let totalShortsValue = 0n;
+  if (allQueriesSucceeded) {
+    previewCloseShortQueries.forEach((query) => {
+      const amountOutInBase = convertSharesToBase({
+        decimals: hyperdrive.decimals,
+        sharesAmount: query.data,
+        vaultSharePrice: poolInfo?.vaultSharePrice,
+      });
+      totalShortsValue += amountOutInBase || 0n;
+    });
+  }
+
+  isLoading = previewCloseShortQueries.some(
+    (query) => query.status === "loading",
+  );
+
+  return { totalShortsValue, isLoading };
+}

apps/hyperdrive-trading/src/ui/markets/LongsTab/LongsTab.tsx

@@ -1,8 +1,8 @@
 import { HyperdriveConfig, findBaseToken } from "@hyperdrive/appconfig";
-import { format as dnFormat } from "dnum";
 import { ReactElement } from "react";
 import Skeleton from "react-loading-skeleton";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
+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";
@@ -45,8 +45,10 @@ export function LongsTab({
                   {openLongs?.length ? (
                     <p className="text-xs text-neutral-content">
                       Total Value:{" "}
-                      {dnFormat([totalLongsValue || 0n, baseToken.decimals], {
-                        digits: 4,
+                      {formatBalance({
+                        balance: totalLongsValue || 0n,
+                        decimals: baseToken.decimals,
+                        places: baseToken.places,
                       })}{" "}
                       {baseToken.symbol}
                     </p>

apps/hyperdrive-trading/src/ui/markets/ShortsTab/ShortsTab.tsx

@@ -1,31 +1,64 @@
-import { HyperdriveConfig } from "@hyperdrive/appconfig";
+import { findBaseToken, HyperdriveConfig } from "@hyperdrive/appconfig";
 import { ReactElement } from "react";
+import Skeleton from "react-loading-skeleton";
+import { useAppConfig } from "src/ui/appconfig/useAppConfig";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { ClosedShortsTable } from "src/ui/hyperdrive/shorts/ClosedShortsTable/ClosedShortsTable";
+import { useOpenShorts } from "src/ui/hyperdrive/shorts/hooks/useOpenShorts";
+import { useTotalShortsValue } from "src/ui/hyperdrive/shorts/hooks/useTotalShortsValue";
 import { OpenShortModalButton } from "src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton";
 import { OpenShortsTable } from "src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTable";
-import { useOpenShorts } from "src/ui/hyperdrive/shorts/hooks/useOpenShorts";
+import { useOpenOrClosedSearchParam } from "src/ui/markets/hooks/useOpenOrClosedSearchParam";
 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 ShortsTab({
   hyperdrive,
 }: {
   hyperdrive: HyperdriveConfig;
 }): ReactElement {
   const activeOpenOrClosedTab = useOpenOrClosedSearchParam();
   const { address: account } = useAccount();
+  const appConfig = useAppConfig();
   const { openShorts } = useOpenShorts({
     account,
     hyperdriveAddress: hyperdrive.address,
   });
+  const { totalShortsValue, isLoading } = useTotalShortsValue({
+    account,
+    hyperdrive,
+    openShorts,
+  });
+
+  const baseToken = findBaseToken({
+    baseTokenAddress: hyperdrive.baseToken,
+    tokens: appConfig.tokens,
+  });
   return (
     <MarketDetailsTab
       positions={
         <div className="flex flex-col">
           <div className="flex flex-wrap items-center justify-between gap-4 p-8">
-            <h5 className="font-medium">Short Positions</h5>
+            <div className="flex flex-col items-start gap-2">
+              <h5 className="font-medium">Short Positions</h5>
+              {!isLoading ? (
+                <>
+                  {openShorts?.length ? (
+                    <p className="text-xs text-neutral-content">
+                      Total Value:{" "}
+                      {formatBalance({
+                        balance: totalShortsValue || 0n,
+                        decimals: baseToken.decimals,
+                        places: baseToken.places,
+                      })}{" "}
+                      {baseToken.symbol}
+                    </p>
+                  ) : undefined}
+                </>
+              ) : (
+                <Skeleton width={100} />
+              )}
+            </div>
             <div className="flex items-center gap-4">
               {account && openShorts?.length ? (
                 <OpenShortModalButton