Group Open LP Positions by Yield Source and Chain Id

apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/useTotalOpenLpPositions.ts

@@ -0,0 +1,84 @@
+import {
+  appConfig,
+  getHyperdriveConfig,
+  HyperdriveConfig,
+} from "@delvtech/hyperdrive-appconfig";
+import { getHyperdrive } from "@delvtech/hyperdrive-js";
+import { useQuery } from "@tanstack/react-query";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { getDrift } from "src/drift/getDrift";
+import { Address } from "viem";
+export function useTotalOpenLpPositions({
+  account,
+  openLpPositions,
+  enabled,
+}: {
+  account: Address | undefined;
+  openLpPositions:
+    | {
+        hyperdrive: HyperdriveConfig;
+        lpShares: bigint;
+        withdrawalShares: bigint;
+      }[]
+    | undefined;
+  enabled: boolean;
+}): {
+  totalOpenLpPositions: bigint | undefined;
+  isLoading: boolean;
+  totalOpenLpPositionsError: Error;
+} {
+  const queryEnabled = !!account && !!openLpPositions && enabled;
+
+  const {
+    data: totalOpenLpPositions,
+    isLoading,
+    error: totalOpenLpPositionsError,
+  } = useQuery({
+    queryKey: makeQueryKey("totalLpPositions", {
+      account,
+      openLpPositions: openLpPositions?.map((p) => ({
+        hyperdrive: p.hyperdrive.address,
+        lpShares: p.lpShares.toString(),
+        withdrawalShares: p.withdrawalShares.toString(),
+      })),
+    }),
+    enabled: queryEnabled,
+    queryFn: queryEnabled
+      ? async () => {
+          const openLpPositionValues = await Promise.all(
+            openLpPositions.map(async (position) => {
+              const readHyperdrive = await getHyperdrive({
+                address: position.hyperdrive.address,
+                drift: getDrift({ chainId: position.hyperdrive.chainId }),
+                earliestBlock: position.hyperdrive.initializationBlock,
+              });
+              const openLpPosition = await readHyperdrive.getOpenLpPosition({
+                account,
+                asBase: getHyperdriveConfig({
+                  hyperdriveChainId: position.hyperdrive.chainId,
+                  hyperdriveAddress: position.hyperdrive.address,
+                  appConfig,
+                }).withdrawOptions.isBaseTokenWithdrawalEnabled,
+              });
+              return {
+                baseValue: openLpPosition.baseValue,
+              };
+            }),
+          );
+
+          let total = 0n;
+          openLpPositionValues.forEach((openLpPositionValue) => {
+            total += openLpPositionValue.baseValue || 0n;
+          });
+
+          return total;
+        }
+      : undefined,
+  });
+
+  return {
+    totalOpenLpPositions,
+    isLoading,
+    totalOpenLpPositionsError: totalOpenLpPositionsError as Error,
+  };
+}

apps/hyperdrive-trading/src/ui/portfolio/lp/LpAndWithdrawalSharesContainer.tsx

@@ -1,20 +1,31 @@
-import { appConfig } from "@delvtech/hyperdrive-appconfig";
+import { appConfig, HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { OpenLpTableDesktop } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable";
-import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue";
 import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData";
 import { NoWalletConnected } from "src/ui/portfolio/NoWalletConnected";
 import { PositionContainer } from "src/ui/portfolio/PositionContainer";
-import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { useAccount } from "wagmi";
 
 export function LpAndWithdrawalSharesContainer(): ReactElement {
   const { openLpPositions, openLpPositionStatus } = usePortfolioLpData();
   const { address: account } = useAccount();
+
+  // Initialize an empty object to group hyperdrives by chainId and yieldSource
+  const hyperdrivesByChainAndYieldSource: Record<string, HyperdriveConfig[]> =
+    {};
+
+  for (const hyperdrive of appConfig.hyperdrives) {
+    const key = `${hyperdrive.chainId}-${hyperdrive.yieldSource}`;
+    if (!hyperdrivesByChainAndYieldSource[key]) {
+      hyperdrivesByChainAndYieldSource[key] = [];
+    }
+    hyperdrivesByChainAndYieldSource[key].push(hyperdrive);
+  }
+
   if (!account) {
     return <NoWalletConnected />;
   }
@@ -73,44 +84,11 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
 
   return (
     <PositionContainer className="mt-10">
-      {appConfig.hyperdrives.map((hyperdrive) => {
-        const openLpPosition = openLpPositions?.find(
-          (position) =>
-            position.hyperdrive.address === hyperdrive.address &&
-            position.hyperdrive.chainId === hyperdrive.chainId,
-        ) ?? {
-          lpShares: 0n,
-          withdrawalShares: 0n,
-        };
-
-        // Check if this hyperdrive pool has open positions before rendering
-        if (
-          openLpPosition.lpShares === 0n &&
-          openLpPosition.withdrawalShares === 0n
-        ) {
-          return null;
-        }
-
-        return (
-          <div className="flex flex-col gap-6" key={hyperdrive.address}>
-            <PositionTableHeading
-              hyperdrive={hyperdrive}
-              rightElement={<TotalLpValue hyperdrive={hyperdrive} />}
-              hyperdriveName={
-                // This regex removes the term (eg: "30d") from the hyperdrive
-                // name since it's already shown in the table.
-                // https://regex101.com/r/f4A3th/1
-                hyperdrive.name.replace(/\d{1,3}d/, "")
-              }
-            />
-            <OpenLpTableDesktop
-              hyperdrive={hyperdrive}
-              openLpPosition={openLpPosition}
-              openLpPositionStatus={openLpPositionStatus}
-            />
-          </div>
-        );
-      })}
+      {Object.entries(hyperdrivesByChainAndYieldSource).map(
+        ([key, hyperdrives]) => (
+          <OpenLpTableDesktop hyperdrives={hyperdrives} key={key} />
+        ),
+      )}
     </PositionContainer>
   );
 }