Replace portfolio event queries with harcoded positions snapshot (#1852)

* Add positions snapshot

* Replace portfolio event query hooks with snapshot hooks

* Update tables to show current balance

* Update close forms to use current balance

* Remove unnecessary `ReadHyperdrive` instantiation

* Fix close short modal

* nit

* Delete dead code

* Normalize addresses before compare

Author: ryangoree

apps/hyperdrive-trading/src/hyperdrive/positionsSnapshot.ts

@@ -29,7 +29,7 @@ export function StatusCell({
       className={classNames("flex w-28 items-center gap-2 font-inter", {
         "rounded-md border border-accent/20 bg-accent/20 px-[6px] py-[2px] text-accent":
           isTermComplete,
-        [statusCellClassName || "text-neutral-content"]: !isTermComplete,
+        [statusCellClassName || ""]: !isTermComplete,
       })}
     >
       {isTermComplete ? <CheckCircleIcon className="size-4" /> : null}

apps/hyperdrive-trading/src/ui/hyperdrive/longs/StatusCell.tsx renamed to apps/hyperdrive-trading/src/ui/hyperdrive/StatusCell.tsx

@@ -0,0 +1,53 @@
+import { hyperdriveAbi } from "@delvtech/hyperdrive-js";
+import { QueryStatus, useQuery } from "@tanstack/react-query";
+import { makeQueryKey2 } from "src/base/makeQueryKey";
+import { useDrift } from "src/ui/drift/useDrift";
+import { Address } from "viem";
+
+export function useAssetBalance({
+  account,
+  assetId,
+  hyperdriveAddress,
+  chainId,
+}: {
+  account: Address | undefined;
+  assetId: bigint;
+  hyperdriveAddress: Address;
+  chainId: number;
+}): {
+  assetBalance: bigint | undefined;
+  assetBalanceStatus: QueryStatus;
+} {
+  const drift = useDrift({ chainId });
+  const queryEnabled = !!account && !!drift;
+  const { data, status } = useQuery({
+    queryKey: makeQueryKey2({
+      namespace: "hyperdrive",
+      queryId: "assetBalance",
+      params: {
+        account,
+        assetId,
+        chainId,
+        hyperdriveAddress,
+      },
+    }),
+    queryFn: queryEnabled
+      ? async () =>
+          drift.read({
+            address: hyperdriveAddress,
+            abi: hyperdriveAbi,
+            fn: "balanceOf",
+            args: {
+              owner: account,
+              tokenId: assetId,
+            },
+          })
+      : undefined,
+    enabled: queryEnabled,
+  });
+
+  return {
+    assetBalance: data,
+    assetBalanceStatus: status,
+  };
+}

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useAssetBalance.ts

@@ -21,10 +21,11 @@ import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useActiveItem } from "src/ui/base/hooks/useActiveItem";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { useAssetBalance } from "src/ui/hyperdrive/hooks/useAssetBalance";
 import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
 import { useCloseLong } from "src/ui/hyperdrive/longs/hooks/useCloseLong";
 import { usePreviewCloseLong } from "src/ui/hyperdrive/longs/hooks/usePreviewCloseLong";
-import { StatusCell } from "src/ui/hyperdrive/longs/StatusCell";
+import { StatusCell } from "src/ui/hyperdrive/StatusCell";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useCloseLongZap } from "src/ui/hyperdrive/zaps/hooks/useCloseLongZap";
 import { ApproveTokenChoices } from "src/ui/token/ApproveTokenChoices";
@@ -61,6 +62,12 @@ export function CloseLongForm({
     hyperdriveChainId: hyperdrive.chainId,
     appConfig,
   });
+  const { assetBalance = 0n } = useAssetBalance({
+    account,
+    assetId: long.assetId,
+    hyperdriveAddress: hyperdrive.address,
+    chainId: hyperdrive.chainId,
+  });
 
   const { isFlagEnabled: isZapsEnabled } = useFeatureFlag("zaps");
 
@@ -183,7 +190,7 @@ export function CloseLongForm({
   }
   // You can't close an amount that's larger than the position size
   const isAmountLargerThanPositionSize = !!(
-    bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount
+    bondAmountAsBigInt && bondAmountAsBigInt > assetBalance
   );
 
   const { closeLongZap } = useCloseLongZap({
@@ -232,7 +239,7 @@ export function CloseLongForm({
               token={`hy${baseToken.symbol}`}
               value={bondAmount ?? ""}
               maxValue={
-                long ? formatUnits(long.bondAmount, hyperdrive.decimals) : ""
+                long ? formatUnits(assetBalance, hyperdrive.decimals) : ""
               }
               onChange={(newAmount) => {
                 window.plausible("formChange", {
@@ -250,9 +257,9 @@ export function CloseLongForm({
               bottomRightElement={
                 <div className="flex flex-col gap-1 text-xs text-neutral-content">
                   {`Balance: ${formatBalance({
-                    balance: long.bondAmount,
+                    balance: assetBalance,
                     decimals: hyperdrive.decimals,
-                    places: baseToken.places,
+                    places: 4,
                   })}`}
                 </div>
               }

apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx

@@ -1,6 +1,12 @@
 import "src/base/makeQueryKey";
 import { Address } from "viem";
 interface HyperdriveQueryKeys {
+  assetBalance: {
+    account: Address | undefined;
+    assetId: bigint;
+    hyperdriveAddress: Address;
+    chainId: number;
+  };
   unpausedPools: {
     chainId: number;
     filterPoolsWithoutRewards?: boolean;

apps/hyperdrive-trading/src/ui/hyperdrive/queryKeys.ts

@@ -15,10 +15,11 @@ import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useActiveItem } from "src/ui/base/hooks/useActiveItem";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { SwitchNetworksButton } from "src/ui/chains/SwitchChainButton/SwitchChainButton";
+import { useAssetBalance } from "src/ui/hyperdrive/hooks/useAssetBalance";
 import { InvalidTransactionButton } from "src/ui/hyperdrive/InvalidTransactionButton";
-import { StatusCell } from "src/ui/hyperdrive/longs/StatusCell";
 import { useCloseShort } from "src/ui/hyperdrive/shorts/hooks/useCloseShort";
 import { usePreviewCloseShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewCloseShort";
+import { StatusCell } from "src/ui/hyperdrive/StatusCell";
 import { TransactionView } from "src/ui/hyperdrive/TransactionView";
 import { useTokenBalance } from "src/ui/token/hooks/useTokenBalance";
 import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
@@ -60,6 +61,13 @@ export function CloseShortForm({
     defaultItems.push(sharesToken);
   }
 
+  const { assetBalance = 0n } = useAssetBalance({
+    account,
+    assetId: short.assetId,
+    hyperdriveAddress: hyperdrive.address,
+    chainId: hyperdrive.chainId,
+  });
+
   const { balance: baseTokenBalance } = useTokenBalance({
     account,
     tokenAddress: baseToken.address,
@@ -88,7 +96,7 @@ export function CloseShortForm({
 
   // You can't close an amount that's larger than the position size
   const isAmountLargerThanPositionSize = !!(
-    amountAsBigInt && amountAsBigInt > short.bondAmount
+    amountAsBigInt && amountAsBigInt > assetBalance
   );
   const { amountOut, flatPlusCurveFee, previewCloseShortStatus } =
     usePreviewCloseShort({
@@ -158,7 +166,7 @@ export function CloseShortForm({
             token={`hy${baseToken.symbol}`}
             value={amount ?? ""}
             maxValue={
-              short ? formatUnits(short.bondAmount, hyperdrive.decimals) : ""
+              short ? formatUnits(assetBalance, hyperdrive.decimals) : ""
             }
             onChange={(newAmount) => {
               window.plausible("formChange", {
@@ -177,9 +185,9 @@ export function CloseShortForm({
               <div className="flex flex-col text-xs text-neutral-content">
                 {short
                   ? `Balance: ${formatBalance({
-                      balance: short.bondAmount,
+                      balance: assetBalance,
                       decimals: hyperdrive.decimals,
-                      places: baseToken?.places,
+                      places: 4,
                     })}`
                   : undefined}
               </div>

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx

@@ -0,0 +1,55 @@
+import { getBaseToken, HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import {
+  type OpenLongPositionReceived,
+  type OpenShort,
+} from "@delvtech/hyperdrive-js";
+import { ReactElement } from "react";
+import Skeleton from "react-loading-skeleton";
+import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { useAssetBalance } from "src/ui/hyperdrive/hooks/useAssetBalance";
+import type { Address } from "viem";
+
+export function CurrentBalanceCell({
+  row,
+  account,
+  hyperdrive,
+}: {
+  row:
+    | OpenLongPositionReceived
+    | (OpenShort & { hyperdrive: HyperdriveConfig });
+  account: Address;
+  hyperdrive: HyperdriveConfig;
+}): ReactElement {
+  const { assetBalance, assetBalanceStatus } = useAssetBalance({
+    account,
+    assetId: row.assetId,
+    hyperdriveAddress: hyperdrive.address,
+    chainId: hyperdrive.chainId,
+  });
+  const appConfig = useAppConfigForConnectedChain();
+  const baseToken = getBaseToken({
+    hyperdriveChainId: hyperdrive.chainId,
+    hyperdriveAddress: hyperdrive.address,
+    appConfig,
+  });
+
+  if (assetBalanceStatus === "loading") {
+    return (
+      <div className={"flex"}>
+        <Skeleton width={100} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-neutral-content">
+      {formatBalance({
+        balance: assetBalance || 0n,
+        decimals: baseToken.decimals,
+        places: baseToken.places,
+      })}{" "}
+      hy{baseToken.symbol}
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/portfolio/CurrentBalanceCell.tsx

@@ -5,7 +5,7 @@ import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
-import { usePortfolioLongsData } from "src/ui/portfolio/longs/usePortfolioLongsData";
+import { usePortfolioLongsSnapshotData } from "src/ui/portfolio/longs/usePortfolioLongsSnapshotData";
 import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
 import { Address } from "viem";
@@ -17,9 +17,10 @@ export function OpenLongsContainer({
   account: Address | undefined;
 }): ReactElement {
   const appConfig = useAppConfigForConnectedChain();
-  const { openLongPositions, openLongPositionsStatus } = usePortfolioLongsData({
-    account,
-  });
+  const { openLongPositions, openLongPositionsStatus } =
+    usePortfolioLongsSnapshotData({
+      account,
+    });
 
   const hyperdrivesByChainAndYieldSource = groupBy(
     appConfig.hyperdrives,
@@ -75,7 +76,7 @@ export function OpenLongsContainer({
   return (
     <PositionContainer className="mt-10">
       {Object.entries(hyperdrivesByChainAndYieldSource).map(
-        ([key, hyperdrives], i) => (
+        ([, hyperdrives], i) => (
           <OpenLongsTableDesktop
             key={i}
             hyperdrives={hyperdrives}

apps/hyperdrive-trading/src/ui/portfolio/longs/LongsContainer.tsx

@@ -25,12 +25,13 @@ import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { Pagination } from "src/ui/base/components/Pagination";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { CloseLongModalButton } from "src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton";
-import { StatusCell } from "src/ui/hyperdrive/longs/StatusCell";
 import { MaturesOnCell } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell";
+import { StatusCell } from "src/ui/hyperdrive/StatusCell";
+import { CurrentBalanceCell } from "src/ui/portfolio/CurrentBalanceCell";
 import { CurrentValueCell } from "src/ui/portfolio/longs/OpenLongsTable/CurrentValueCell";
 import { ManageLongsButton } from "src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton";
 import { TotalOpenLongsValue } from "src/ui/portfolio/longs/TotalOpenLongsValue/TotalOpenLongsValue";
-import { usePortfolioLongsDataFromHyperdrives } from "src/ui/portfolio/longs/usePortfolioLongsData";
+import { usePortfolioLongsSnapshotDataFromHyperdrives } from "src/ui/portfolio/longs/usePortfolioLongsSnapshotData";
 import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { Address } from "viem";
 
@@ -41,7 +42,7 @@ export function OpenLongsTableDesktop({
   hyperdrives: HyperdriveConfig[];
   account: Address | undefined;
 }): ReactElement | null {
-  const { openLongPositions } = usePortfolioLongsDataFromHyperdrives({
+  const { openLongPositions } = usePortfolioLongsSnapshotDataFromHyperdrives({
     hyperdrives,
     account,
   });
@@ -322,13 +323,20 @@ function getColumns({
     }),
     columnHelper.accessor("maturity", {
       id: "value",
-      header: `Status`,
+      header: "Status / Current Balance",
       cell: ({ row, getValue }) => {
         return (
-          <StatusCell
-            maturity={getValue()}
-            chainId={row.original.hyperdrive.chainId}
-          />
+          <div>
+            <StatusCell
+              maturity={getValue()}
+              chainId={row.original.hyperdrive.chainId}
+            />
+            <CurrentBalanceCell
+              account={account!}
+              hyperdrive={row.original.hyperdrive}
+              row={row.original}
+            />
+          </div>
         );
       },
     }),