Singular Loading State for Shorts (#1454)

jackburrus · web-flow · commit 51cdac4762a8 · 2024-09-05T11:30:25.000-06:00
* open shorts working on multichain

* shorts loading state completed

* Move app config mapping logic into hook

* move open shorts into own variable

* return promise all

* map over chains, not registries
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/hooks/usePublicClients.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/hooks/usePublicClients.ts
@@ -1,3 +1,4 @@
+import { AppConfig } from "@hyperdrive/appconfig";
 import { getPublicClient } from "@wagmi/core";
 import { wagmiConfig } from "src/network/wagmiClient";
 import { PublicClient } from "viem";
@@ -7,14 +8,13 @@ type ClientObject = { [chainId: number]: { publicClient: PublicClient } };
 /**
  * Initializes and returns public clients for specified chain IDs.
  *
- * @param {number[]} chainIds - An array of chain IDs to create public clients for.
- * @returns {ClientObject} An object where keys are chain IDs and values are objects
- *                         containing the corresponding public client.
+ * @param {AppConfig} appConfig
+ * @returns {ClientObject} An object where keys are chain IDs and values are objects containing the corresponding public client.
  */
-export function usePublicClients(chainIds: number[]): ClientObject {
+export function usePublicClients(chains: number[]): ClientObject {
   const clients: ClientObject = {};
 
-  for (const chainId of chainIds) {
+  for (const chainId of chains) {
     const publicClient = getPublicClient(wagmiConfig as any, {
       chainId,
     }) as PublicClient;
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx
@@ -24,20 +24,29 @@ 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 { MaturesOnCellTwo } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell";
-import { useMarketState } from "src/ui/hyperdrive/hooks/useMarketState";
 import { StatusCell } from "src/ui/hyperdrive/longs/OpenLongsTable/StatusCell";
 import { CloseShortModalButton } from "src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton";
 import { CurrentShortsValueCell } from "src/ui/hyperdrive/shorts/OpenShortsTable/CurrentShortsValueCell";
 import { ShortRateAndSizeCell } from "src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell";
 import { TotalOpenShortValue } from "src/ui/hyperdrive/shorts/OpenShortsTable/TotalOpenShortsValue";
-import { useOpenShorts } from "src/ui/hyperdrive/shorts/hooks/useOpenShorts";
 import { usePortfolioShortsData } from "src/ui/portfolio/usePortfolioShortsData";
 import { useAccount } from "wagmi";
 
 export function OpenShortsContainer(): ReactElement {
   const { openShortPositions, openShortPositionsStatus } =
     usePortfolioShortsData();
   const appConfig = useAppConfig();
+
+  if (openShortPositionsStatus === "loading") {
+    return (
+      <div className="mt-10 flex w-[1036px] flex-col gap-10">
+        <LoadingState
+          heading="Loading your Shorts..."
+          text="Searching for Shorts events, calculating current value and PnL..."
+        />
+      </div>
+    );
+  }
   return (
     <div className="mt-10 flex w-[1036px] flex-col gap-10">
       {appConfig.hyperdrives.map((hyperdrive) => {
@@ -51,11 +60,13 @@ export function OpenShortsContainer(): ReactElement {
           tokens: appConfig.tokens,
           tokenAddress: hyperdrive.poolConfig.vaultSharesToken,
         });
+        const openShorts = openShortPositions?.find(
+          (position) =>
+            position.hyperdrive.address === hyperdrive.address &&
+            position.hyperdrive.chainId === hyperdrive.chainId,
+        )?.openShorts;
         // Ensure this hyperdrive pool has open positions before rendering.
-        if (
-          openShortPositionsStatus === "success" &&
-          !openShortPositions?.[hyperdrive.address]?.length
-        ) {
+        if (openShortPositionsStatus === "success" && !openShorts?.length) {
           return null;
         }
         return (
@@ -87,7 +98,7 @@ export function OpenShortsContainer(): ReactElement {
             </div>
             <OpenShortsTableDesktopTwo
               hyperdrive={hyperdrive}
-              openShortPositionsStatus={openShortPositionsStatus}
+              openShorts={openShorts}
             />
           </div>
         );
@@ -98,22 +109,14 @@ export function OpenShortsContainer(): ReactElement {
 
 export function OpenShortsTableDesktopTwo({
   hyperdrive,
-  openShortPositionsStatus,
+  openShorts,
 }: {
   hyperdrive: HyperdriveConfig;
-  openShortPositionsStatus?: "loading" | "success" | "error";
+  openShorts: OpenShort[] | undefined;
 }): ReactElement {
   const { address: account } = useAccount();
   const appConfig = useAppConfig();
-  const { marketState } = useMarketState({
-    hyperdriveAddress: hyperdrive.address,
-    chainId: hyperdrive.chainId,
-  });
-  const { openShorts, openShortsStatus } = useOpenShorts({
-    account,
-    chainId: hyperdrive.chainId,
-    hyperdriveAddress: hyperdrive.address,
-  });
+
   const tableInstance = useReactTable({
     columns: getColumns({ hyperdrive, appConfig }),
     data: openShorts || [],
@@ -141,17 +144,6 @@ export function OpenShortsTableDesktopTwo({
       </div>
     );
   }
-  if (
-    openShortsStatus === "loading" ||
-    openShortPositionsStatus === "loading"
-  ) {
-    return (
-      <LoadingState
-        heading="Loading your Shorts..."
-        text="Searching for Shorts events, calculating current value and PnL..."
-      />
-    );
-  }
 
   return (
     <div className="daisy-card overflow-x-clip rounded-box bg-gray-750 pt-3">
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/usePortfolioLpData.ts b/apps/hyperdrive-trading/src/ui/portfolio/usePortfolioLpData.ts
@@ -1,16 +1,13 @@
+import { HyperdriveConfig } from "@hyperdrive/appconfig";
 import { useQuery } from "@tanstack/react-query";
 import { makeQueryKey } from "src/base/makeQueryKey";
 import { getReadHyperdrive } from "src/hyperdrive/getReadHyperdrive";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
 import { usePublicClients } from "src/ui/hyperdrive/hooks/usePublicClients";
-import { Address } from "viem";
 import { useAccount } from "wagmi";
 
 type LpPosition = {
-  hyperdrive: {
-    address: Address;
-    chainId: number;
-  };
+  hyperdrive: HyperdriveConfig;
   lpShares: bigint;
   withdrawalShares: bigint;
 };
@@ -22,9 +19,7 @@ export function usePortfolioLpData(): {
   const appConfig = useAppConfig();
   const { address: account } = useAccount();
   const queryEnabled = !!account && !!appConfig.hyperdrives.length;
-  const clients = usePublicClients(
-    Object.keys(appConfig.registries).map(Number),
-  );
+  const clients = usePublicClients(Object.keys(appConfig.chains).map(Number));
   const { data, status } = useQuery({
     queryKey: makeQueryKey("portfolioLp", { account }),
     queryFn: queryEnabled
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/usePortfolioShortsData.ts b/apps/hyperdrive-trading/src/ui/portfolio/usePortfolioShortsData.ts
@@ -1,48 +1,61 @@
-import { OpenShort, ReadHyperdrive } from "@delvtech/hyperdrive-viem";
+import { OpenShort } from "@delvtech/hyperdrive-viem";
+import { HyperdriveConfig } from "@hyperdrive/appconfig";
 import { useQuery } from "@tanstack/react-query";
 import { makeQueryKey } from "src/base/makeQueryKey";
-import { sdkCache } from "src/sdk/sdkCache";
+import { getReadHyperdrive } from "src/hyperdrive/getReadHyperdrive";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
-import { Address } from "viem";
-import { useAccount, usePublicClient } from "wagmi";
+import { usePublicClients } from "src/ui/hyperdrive/hooks/usePublicClients";
+import { useAccount } from "wagmi";
 
-type OpenShortPositionsData = Record<Address, OpenShort[]>;
+type OpenShortPositionsData = {
+  hyperdrive: HyperdriveConfig;
+  openShorts: OpenShort[];
+}[];
 
 export function usePortfolioShortsData(): {
   openShortPositions: OpenShortPositionsData | undefined;
   openShortPositionsStatus: "error" | "success" | "loading";
 } {
   const { address: account } = useAccount();
-  // TODO: We should be getting a specific public client for the chain the
-  // hyperdrive is on
-  const publicClient = usePublicClient();
+
   const appConfig = useAppConfig();
-  const queryEnabled = !!account && !!appConfig && !!publicClient;
+  const clients = usePublicClients(Object.keys(appConfig.chains).map(Number));
+  const queryEnabled = !!account && !!appConfig && !!clients;
 
   const { data: openShortPositions, status: openShortPositionsStatus } =
     useQuery({
       queryKey: makeQueryKey("portfolioShorts", { account }),
       enabled: queryEnabled,
       queryFn: queryEnabled
-        ? async () => {
-            const result: OpenShortPositionsData = {};
+        ? async () =>
             await Promise.all(
               appConfig.hyperdrives.map(async (hyperdrive) => {
-                const readHyperdrive = new ReadHyperdrive({
-                  address: hyperdrive.address,
+                const publicClient = clients[hyperdrive.chainId]?.publicClient;
+
+                if (!publicClient) {
+                  console.error(
+                    `No public client found for chainId ${hyperdrive.chainId}`,
+                  );
+                  return {
+                    hyperdrive,
+                    openShorts: [],
+                  };
+                }
+
+                const readHyperdrive = await getReadHyperdrive({
+                  appConfig,
+                  hyperdriveAddress: hyperdrive.address,
                   publicClient,
-                  cache: sdkCache,
                 });
 
-                result[hyperdrive.address] = await readHyperdrive.getOpenShorts(
-                  {
-                    account: account,
-                  },
-                );
+                return {
+                  hyperdrive,
+                  openShorts: await readHyperdrive.getOpenShorts({
+                    account,
+                  }),
+                };
               }),
-            );
-            return result;
-          }
+            )
         : undefined,
     });
   return {
