hooks: historical state client order & task history hooks

app/assets/page-client.tsx

@@ -2,7 +2,7 @@
 
 import React from "react"
 
-import { TaskType, Token, UpdateType, useTaskHistory } from "@renegade-fi/react"
+import { TaskType, Token, UpdateType } from "@renegade-fi/react"
 import { Info } from "lucide-react"
 import { formatUnits } from "viem/utils"
 
@@ -21,6 +21,7 @@ import { DISPLAY_TOKENS } from "@/lib/token"
 
 import { columns as assetColumns } from "./assets-table/columns"
 import { columns as historyColumns } from "./history-table/columns"
+import { useTaskHistory } from "@/hooks/use-task-history"
 
 export type HistoryData = {
   status: string

app/components/order-toaster.tsx

@@ -6,12 +6,12 @@ import {
   OrderMetadata,
   OrderState,
   Token,
-  useOrderHistory,
   useOrderHistoryWebSocket,
 } from "@renegade-fi/react"
 import { toast } from "sonner"
 
 import { formatNumber } from "@/lib/format"
+import { useOrderHistory } from "@/hooks/use-order-history"
 
 export function OrderToaster() {
   const [incomingOrder, setIncomingOrder] = React.useState<OrderMetadata>()

app/components/task-history-sheet.tsx

@@ -9,7 +9,6 @@ import {
   TaskType,
   Token,
   UpdateType,
-  useTaskHistory,
 } from "@renegade-fi/react"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -23,6 +22,7 @@ import {
 } from "@/components/ui/sheet"
 
 import { formatNumber, formatRelativeTimestamp } from "@/lib/format"
+import { useTaskHistory } from "@/hooks/use-task-history"
 
 export function TaskHistorySheet({ children }: { children: React.ReactNode }) {
   const router = useRouter()

app/components/wallet-sidebar/hooks/use-unviewed-fills.ts

@@ -1,12 +1,13 @@
 import React from "react"
 
-import { OrderMetadata, useOrderHistory } from "@renegade-fi/react"
+import { OrderMetadata } from "@renegade-fi/react"
 
 import {
   generateFillIdentifier,
   useViewedFills,
 } from "@/app/components/wallet-sidebar/hooks/use-viewed-fills"
 
+import { useOrderHistory } from "@/hooks/use-order-history"
 import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export function useRecentUnviewedFills() {

app/environment.d.ts

@@ -13,6 +13,7 @@ declare global {
       NEXT_PUBLIC_PERMIT2_CONTRACT: `0x${string}`
       NEXT_PUBLIC_PRICE_REPORTER_URL: string
       NEXT_PUBLIC_RENEGADE_RELAYER_HOSTNAME: string
+      NEXT_PUBLIC_HISTORICAL_STATE_URL: string
       NEXT_PUBLIC_RPC_URL: string
       NEXT_PUBLIC_TOKEN_MAPPING: string
       NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: string

hooks/use-order-history.ts

@@ -0,0 +1,75 @@
+import { HistoricalStateClient } from "@renegade-fi/internal-sdk"
+import {
+  Config,
+  OrderMetadata,
+  useConfig,
+  UseOrderHistoryParameters,
+  UseOrderHistoryReturnType,
+  useOrderHistoryWebSocket,
+  useStatus,
+  useQuery,
+} from "@renegade-fi/react"
+import {
+  GetOrderHistoryData,
+  GetOrderHistoryQueryKey,
+  getOrderHistoryQueryOptions,
+} from "@renegade-fi/react/query"
+import { useQueryClient } from "@tanstack/react-query"
+
+export function useOrderHistory<selectData = GetOrderHistoryData>(
+  parameters: UseOrderHistoryParameters<selectData> = {},
+): UseOrderHistoryReturnType<selectData> {
+  const { query = {} } = parameters
+
+  const config = useConfig(parameters)
+  const status = useStatus(parameters)
+  const queryClient = useQueryClient()
+
+  const baseOptions = getOrderHistoryQueryOptions(config, {
+    ...parameters,
+  })
+  const options = {
+    ...baseOptions,
+    queryFn: getHistoricalStateOrderHistoryQueryFn(config),
+  }
+
+  const enabled = Boolean(status === "in relayer" && (query.enabled ?? true))
+
+  useOrderHistoryWebSocket({
+    enabled,
+    onUpdate: (incoming: OrderMetadata) => {
+      if (queryClient && options.queryKey) {
+        const existingMap =
+          queryClient.getQueryData<GetOrderHistoryData>(options.queryKey) ||
+          new Map()
+        const existingOrder = existingMap.get(incoming.id)
+
+        if (!existingOrder || incoming.state !== existingOrder.state) {
+          const newMap = new Map(existingMap)
+          newMap.set(incoming.id, incoming)
+          queryClient.setQueryData(options.queryKey, newMap)
+        }
+      }
+    },
+  })
+
+  return useQuery({ ...query, ...options, enabled })
+}
+
+function getHistoricalStateOrderHistoryQueryFn(config: Config) {
+  return async function queryFn({
+    queryKey,
+  }: {
+    queryKey: GetOrderHistoryQueryKey
+  }) {
+    const { scopeKey: _ } = queryKey[1]
+
+    const hseClient = new HistoricalStateClient(
+      process.env.NEXT_PUBLIC_HISTORICAL_STATE_URL,
+      config,
+    )
+    const history = await hseClient.getOrderHistory()
+
+    return history ?? null
+  }
+}

hooks/use-order-table-data.ts

@@ -1,8 +1,10 @@
-import { OrderMetadata, Token, useOrderHistory } from "@renegade-fi/react"
+import { OrderMetadata, Token } from "@renegade-fi/react"
 import { formatUnits } from "viem/utils"
 
 import { getVWAP } from "@/lib/order"
 
+import { useOrderHistory } from "./use-order-history"
+
 export interface ExtendedOrderMetadata extends OrderMetadata {
   usdValue: number
 }

hooks/use-task-history.ts

@@ -0,0 +1,75 @@
+import { HistoricalStateClient } from "@renegade-fi/internal-sdk"
+import {
+  Config,
+  Task,
+  useConfig,
+  useQuery,
+  useStatus,
+  UseTaskHistoryParameters,
+  UseTaskHistoryReturnType,
+  useTaskHistoryWebSocket,
+} from "@renegade-fi/react"
+import {
+  GetTaskHistoryData,
+  GetTaskHistoryQueryKey,
+  getTaskHistoryQueryOptions,
+} from "@renegade-fi/react/query"
+import { useQueryClient } from "@tanstack/react-query"
+
+export function useTaskHistory<selectData = GetTaskHistoryData>(
+  parameters: UseTaskHistoryParameters<selectData> = {},
+): UseTaskHistoryReturnType<selectData> {
+  const { query = {} } = parameters
+
+  const config = useConfig(parameters)
+  const status = useStatus(parameters)
+  const queryClient = useQueryClient()
+
+  const baseOptions = getTaskHistoryQueryOptions(config, {
+    ...parameters,
+  })
+  const options = {
+    ...baseOptions,
+    queryFn: getHistoricalStateTaskHistoryQueryFn(config),
+  }
+
+  const enabled = Boolean(status === "in relayer" && (query.enabled ?? true))
+
+  useTaskHistoryWebSocket({
+    enabled,
+    onUpdate: (incoming: Task) => {
+      if (queryClient && options.queryKey) {
+        const existingMap =
+          queryClient.getQueryData<GetTaskHistoryData>(options.queryKey) ||
+          new Map()
+        const existingTask = existingMap.get(incoming.id)
+
+        if (!existingTask || incoming.state !== existingTask.state) {
+          const newMap = new Map(existingMap)
+          newMap.set(incoming.id, incoming)
+          queryClient.setQueryData(options.queryKey, newMap)
+        }
+      }
+    },
+  })
+
+  return useQuery({ ...query, ...options, enabled })
+}
+
+function getHistoricalStateTaskHistoryQueryFn(config: Config) {
+  return async function queryFn({
+    queryKey,
+  }: {
+    queryKey: GetTaskHistoryQueryKey
+  }) {
+    const { scopeKey: _ } = queryKey[1]
+
+    const hseClient = new HistoricalStateClient(
+      process.env.NEXT_PUBLIC_HISTORICAL_STATE_URL,
+      config,
+    )
+    const history = await hseClient.getTaskHistory()
+
+    return history ?? null
+  }
+}

hooks/use-wait-for-task.ts

@@ -1,6 +1,6 @@
 import React from "react"
 
-import { TaskState, useTaskHistory } from "@renegade-fi/react"
+import { useTaskHistory } from "./use-task-history"
 
 export function useWaitForTask(onConfirm?: () => void) {
   // TODO: Refactor useDeposit to useMutation and declaratively pass taskId from { data }

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbopack -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -40,8 +40,8 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@renegade-fi/internal-sdk": "0.0.0-canary-20240829175257",
-    "@renegade-fi/react": "0.4.12",
+    "@renegade-fi/internal-sdk": "0.0.15",
+    "@renegade-fi/react": "0.0.0-canary-20250104004150",
     "@renegade-fi/tradingview-charts": "0.27.6",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
@@ -104,7 +104,9 @@
     "overrides": {
       "@types/react": "19.0.1",
       "@types/react-dom": "19.0.2",
-      "react-is": "19.0.0"
+      "react-is": "19.0.0",
+      "@renegade-fi/core": "0.0.0-canary-20250104004150",
+      "viem": "$viem"
     }
   }
-}
+}