@liq/react

React hooks, mutations, and state management for the Liq perpetuals trading frontend.

Overview

@liq/react wraps @liq/api-client and @liq/onchain in React Query queries, wagmi/viem mutations, and Zustand stores. It provides LiqProvider as the root context component, a set of data-fetching hooks for markets, positions, orders, and margin, and mutation hooks for order submission, cancellation, deposits, and gateway authentication. All async transaction flows are tracked via useTransactionStore.

Key Exports

Provider

• LiqProvider — root provider (wraps React Query + gateway client context)
• useLiqClient() — access the configured LiqClient instance
• useLiqOnchain() — access the configured LiqOnchain instance

Query hooks (TanStack Query)

| Hook | Description | | -------------------------------------- | ------------------------------------------ | | useMarketsQuery() | Fetch all markets | | usePositionsQuery() | Fetch open positions for current account | | useOpenOrdersQuery() | Fetch open orders for current account | | useAvailableMarginQuery() | Fetch available margin for current account | | useAccountQuery() / useAccountId() | Fetch / read SNX account ID | | liqQueryKeys | Cache key factory for all queries |

Mutation hooks

| Hook | Description | | ---------------------------- | ----------------------------------------------- | | useSubmitOrderMutation() | Sign + submit order to order-gateway | | useCancelOrderMutation() | Cancel an open order | | useDepositMutation() | USDC → sUSDC → collateral deposit (onchain) | | useCreateAccountMutation() | Create SNX account NFT (onchain) | | useGatewayAuthMutation() | SIWE authentication → JWT | | useTransactionMutation() | Generic onchain tx wrapper with status tracking |

SSE / realtime

• useSseOrderUpdates(orderId, callback) — subscribe to live order status updates

Utilities

• useWallet() — active wallet address + chain ID
• useNetworkId() — current network ID
• useDebounce(value, delay) — debounce hook

Stores (Zustand)

• useGatewayStore / selectIsAuthenticated / GatewayStoreState — JWT + auth state
• useTransactionStore / TransactionStatus / TransactionState / TransactionType — onchain tx lifecycle

Install

pnpm add @liq/react

Peer Dependencies

• react ^18 or ^19
• viem ^2
• wagmi ^2

Build

moon run liq-react:build    # tsup → dist/