@hyperix/hooks 0.1.20 → 0.1.22

package/README.md

@@ -6,6 +6,40 @@ React hooks for the local workspace.
 
 This package is intended for source-first usage inside the monorepo. Consumers should reference it with `"workspace:*"` and let the app bundler resolve the TypeScript source.
 
+## Demo
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { usePortfolio } from "@hyperix/hooks";
+
+const queryClient = new QueryClient();
+
+function PortfolioDemo() {
+  const { data, isPending, error } = usePortfolio("0x1234567890abcdef1234567890abcdef12345678");
+
+  if (isPending) {
+    return <div>Loading portfolio...</div>;
+  }
+
+  if (error) {
+    return <div>Failed to load portfolio: {error.message}</div>;
+  }
+
+  const perpDay = data?.find(([period]) => period === "perpDay")?.[1];
+  const latestPnl = Number(perpDay?.pnlHistory.at(-1)?.[1] ?? 0);
+
+  return <pre>{JSON.stringify({ latestPnl, periods: data?.map(([period]) => period) }, null, 2)}</pre>;
+}
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PortfolioDemo />
+    </QueryClientProvider>
+  );
+}
+```
+
 ## Tests
 
 ```bash

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./use-all-perp-metas.js";
 export * from "./use-active-asset-data.js";
 export * from "./use-all-dexs-asset-ctxs.js";
 export * from "./use-l2-book.js";
+export * from "./use-max-builder-fee.js";
 export * from "./use-mid.js";
 export * from "./use-all-dexs-clearing-house-state.js";
 export * from "./use-historical-orders.js";
@@ -13,10 +14,15 @@ export * from "./use-order-history.js";
 export * from "./use-perp-market.js";
 export * from "./use-perp-markets.js";
 export * from "./use-perp-meta.js";
+export * from "./use-portfolio.js";
 export * from "./use-positions.js";
+export * from "./use-spot-asset-ctxs.js";
 export * from "./use-spot-meta.js";
 export * from "./use-symbol-converter.js";
+export * from "./use-twap-states.js";
 export * from "./use-user-fundings.js";
 export * from "./use-user-fills.js";
 export * from "./use-user-non-funding-ledger-updates.js";
 export * from "./use-user-account-activity.js";
+export * from "./use-user-twap-history.js";
+export * from "./use-user-twap-slice-fills.js";

package/dist/index.js

@@ -3,6 +3,7 @@ export * from "./use-all-perp-metas.js";
 export * from "./use-active-asset-data.js";
 export * from "./use-all-dexs-asset-ctxs.js";
 export * from "./use-l2-book.js";
+export * from "./use-max-builder-fee.js";
 export * from "./use-mid.js";
 export * from "./use-all-dexs-clearing-house-state.js";
 export * from "./use-historical-orders.js";
@@ -13,10 +14,15 @@ export * from "./use-order-history.js";
 export * from "./use-perp-market.js";
 export * from "./use-perp-markets.js";
 export * from "./use-perp-meta.js";
+export * from "./use-portfolio.js";
 export * from "./use-positions.js";
+export * from "./use-spot-asset-ctxs.js";
 export * from "./use-spot-meta.js";
 export * from "./use-symbol-converter.js";
+export * from "./use-twap-states.js";
 export * from "./use-user-fundings.js";
 export * from "./use-user-fills.js";
 export * from "./use-user-non-funding-ledger-updates.js";
 export * from "./use-user-account-activity.js";
+export * from "./use-user-twap-history.js";
+export * from "./use-user-twap-slice-fills.js";

package/dist/use-max-builder-fee.d.ts

@@ -0,0 +1,9 @@
+import { type UseQueryOptions, type UseQueryResult } from "@tanstack/react-query";
+import type { MaxBuilderFeeResponse } from "@nktkas/hyperliquid/api/info";
+export type MaxBuilderFeeData = MaxBuilderFeeResponse;
+export type UseMaxBuilderFeeOptions = Omit<UseQueryOptions<MaxBuilderFeeData, Error, MaxBuilderFeeData, [
+    "max-builder-fee",
+    `0x${string}`,
+    `0x${string}`
+]>, "queryKey" | "queryFn">;
+export declare function useMaxBuilderFee(user: `0x${string}`, builder: `0x${string}`, options?: UseMaxBuilderFeeOptions): UseQueryResult<MaxBuilderFeeData, Error>;

package/dist/use-max-builder-fee.js

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { infoClient } from "./config/hl.js";
+export function useMaxBuilderFee(user, builder, options = {}) {
+    const enabled = options.enabled ?? Boolean(user && builder);
+    return useQuery({
+        queryKey: ["max-builder-fee", user, builder],
+        queryFn: () => infoClient.maxBuilderFee({ user, builder }),
+        ...options,
+        enabled,
+    });
+}

package/dist/use-portfolio.d.ts

@@ -0,0 +1,5 @@
+import { type UseQueryOptions, type UseQueryResult } from "@tanstack/react-query";
+import type { PortfolioResponse } from "@nktkas/hyperliquid/api/info";
+export type PortfolioData = PortfolioResponse;
+export type UsePortfolioOptions = Omit<UseQueryOptions<PortfolioData, Error, PortfolioData, ["portfolio", `0x${string}`]>, "queryKey" | "queryFn">;
+export declare function usePortfolio(user: `0x${string}`, options?: UsePortfolioOptions): UseQueryResult<PortfolioData, Error>;

package/dist/use-portfolio.js

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { infoClient } from "./config/hl.js";
+export function usePortfolio(user, options = {}) {
+    const enabled = options.enabled ?? Boolean(user);
+    return useQuery({
+        queryKey: ["portfolio", user],
+        queryFn: () => infoClient.portfolio({ user }),
+        ...options,
+        enabled,
+    });
+}

package/dist/use-spot-asset-ctxs.d.ts

@@ -0,0 +1,8 @@
+import { type UseSubscribeState } from "@outofgas/react-stream";
+import type { SpotAssetCtxsEvent } from "@nktkas/hyperliquid/api/subscription";
+export type SpotAssetCtxsData = SpotAssetCtxsEvent;
+export type UseSpotAssetCtxsOptions = {
+    enabled?: boolean;
+    onUpdate?: (event: SpotAssetCtxsEvent) => void;
+};
+export declare function useSpotAssetCtxs(options?: UseSpotAssetCtxsOptions): UseSubscribeState<SpotAssetCtxsData>;

package/dist/use-spot-asset-ctxs.js

@@ -0,0 +1,25 @@
+import { useSubscribe } from "@outofgas/react-stream";
+import { wsClient } from "./config/hl.js";
+export function useSpotAssetCtxs(options = {}) {
+    const { enabled = true, onUpdate } = options;
+    return useSubscribe({
+        key: ["spot-asset-ctxs"],
+        enabled,
+        subscribe: async ({ onData, onError }) => {
+            const subscription = await wsClient.spotAssetCtxs((event) => {
+                try {
+                    onUpdate?.(event);
+                    onData(event);
+                }
+                catch (error) {
+                    onError(error instanceof Error
+                        ? error
+                        : new Error("Failed to process spot asset ctxs event"));
+                }
+            });
+            return {
+                unsubscribe: () => subscription.unsubscribe(),
+            };
+        },
+    });
+}

package/dist/use-twap-states.d.ts

@@ -0,0 +1,9 @@
+import { type UseSubscribeState } from "@outofgas/react-stream";
+import type { TwapStatesEvent } from "@nktkas/hyperliquid/api/subscription";
+export type TwapStatesData = TwapStatesEvent;
+export type UseTwapStatesOptions = {
+    dex?: string;
+    enabled?: boolean;
+    onUpdate?: (event: TwapStatesEvent) => void;
+};
+export declare function useTwapStates(user: `0x${string}`, options?: UseTwapStatesOptions): UseSubscribeState<TwapStatesData>;

package/dist/use-twap-states.js

@@ -0,0 +1,25 @@
+import { useSubscribe } from "@outofgas/react-stream";
+import { wsClient } from "./config/hl.js";
+const DEFAULT_DEX = "";
+export function useTwapStates(user, options = {}) {
+    const { dex = DEFAULT_DEX, enabled: enabledOverride, onUpdate } = options;
+    const enabled = enabledOverride ?? Boolean(user);
+    return useSubscribe({
+        key: ["twap-states", user, dex],
+        enabled,
+        subscribe: async ({ onData, onError }) => {
+            const subscription = await wsClient.twapStates({ user, dex }, (event) => {
+                try {
+                    onUpdate?.(event);
+                    onData(event);
+                }
+                catch (error) {
+                    onError(error instanceof Error ? error : new Error("Failed to process twap states event"));
+                }
+            });
+            return {
+                unsubscribe: () => subscription.unsubscribe(),
+            };
+        },
+    });
+}

package/dist/use-user-twap-history.d.ts

@@ -0,0 +1,11 @@
+import { type UseSubscribeState } from "@outofgas/react-stream";
+import type { UserTwapHistoryEvent } from "@nktkas/hyperliquid/api/subscription";
+export type UserTwapHistoryData = {
+    user: `0x${string}`;
+    history: UserTwapHistoryEvent["history"];
+};
+export type UseUserTwapHistoryOptions = {
+    enabled?: boolean;
+    onUpdate?: (event: UserTwapHistoryEvent) => void;
+};
+export declare function useUserTwapHistory(user: `0x${string}`, options?: UseUserTwapHistoryOptions): UseSubscribeState<UserTwapHistoryData>;

package/dist/use-user-twap-history.js

@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSubscribe } from "@outofgas/react-stream";
+import { wsClient } from "./config/hl.js";
+export function useUserTwapHistory(user, options = {}) {
+    const { enabled: enabledOverride, onUpdate } = options;
+    const enabled = enabledOverride ?? Boolean(user);
+    const rawState = useSubscribe({
+        key: ["user-twap-history", user],
+        enabled,
+        subscribe: async ({ onData, onError }) => {
+            const subscription = await wsClient.userTwapHistory({ user }, (event) => {
+                try {
+                    onUpdate?.(event);
+                    onData(event);
+                }
+                catch (error) {
+                    onError(error instanceof Error
+                        ? error
+                        : new Error("Failed to process user twap history event"));
+                }
+            });
+            return {
+                unsubscribe: () => subscription.unsubscribe(),
+            };
+        },
+    });
+    const [data, setData] = useState(undefined);
+    useEffect(() => {
+        if (!enabled) {
+            setData(undefined);
+            return;
+        }
+        const nextEvent = rawState.data;
+        if (!nextEvent) {
+            return;
+        }
+        setData((previous) => {
+            if (nextEvent.isSnapshot ||
+                !previous ||
+                previous.user !== nextEvent.user) {
+                return {
+                    user: nextEvent.user,
+                    history: nextEvent.history,
+                };
+            }
+            return {
+                user: nextEvent.user,
+                history: [...previous.history, ...nextEvent.history],
+            };
+        });
+    }, [enabled, rawState.data]);
+    return useMemo(() => ({
+        ...rawState,
+        data,
+    }), [data, rawState]);
+}

package/dist/use-user-twap-slice-fills.d.ts

@@ -0,0 +1,11 @@
+import { type UseSubscribeState } from "@outofgas/react-stream";
+import type { UserTwapSliceFillsEvent } from "@nktkas/hyperliquid/api/subscription";
+export type UserTwapSliceFillsData = {
+    user: `0x${string}`;
+    twapSliceFills: UserTwapSliceFillsEvent["twapSliceFills"];
+};
+export type UseUserTwapSliceFillsOptions = {
+    enabled?: boolean;
+    onUpdate?: (event: UserTwapSliceFillsEvent) => void;
+};
+export declare function useUserTwapSliceFills(user: `0x${string}`, options?: UseUserTwapSliceFillsOptions): UseSubscribeState<UserTwapSliceFillsData>;

package/dist/use-user-twap-slice-fills.js

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSubscribe } from "@outofgas/react-stream";
+import { wsClient } from "./config/hl.js";
+export function useUserTwapSliceFills(user, options = {}) {
+    const { enabled: enabledOverride, onUpdate } = options;
+    const enabled = enabledOverride ?? Boolean(user);
+    const rawState = useSubscribe({
+        key: ["user-twap-slice-fills", user],
+        enabled,
+        subscribe: async ({ onData, onError }) => {
+            const subscription = await wsClient.userTwapSliceFills({ user }, (event) => {
+                try {
+                    onUpdate?.(event);
+                    onData(event);
+                }
+                catch (error) {
+                    onError(error instanceof Error
+                        ? error
+                        : new Error("Failed to process user twap slice fills event"));
+                }
+            });
+            return {
+                unsubscribe: () => subscription.unsubscribe(),
+            };
+        },
+    });
+    const [data, setData] = useState(undefined);
+    useEffect(() => {
+        if (!enabled) {
+            setData(undefined);
+            return;
+        }
+        const nextEvent = rawState.data;
+        if (!nextEvent) {
+            return;
+        }
+        setData((previous) => {
+            if (nextEvent.isSnapshot ||
+                !previous ||
+                previous.user !== nextEvent.user) {
+                return {
+                    user: nextEvent.user,
+                    twapSliceFills: nextEvent.twapSliceFills,
+                };
+            }
+            return {
+                user: nextEvent.user,
+                twapSliceFills: [
+                    ...previous.twapSliceFills,
+                    ...nextEvent.twapSliceFills,
+                ],
+            };
+        });
+    }, [enabled, rawState.data]);
+    return useMemo(() => ({
+        ...rawState,
+        data,
+    }), [data, rawState]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperix/hooks",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",