@hft-labs/react

React hooks for Uniswap V3 liquidity management via HFT-Turbo API.

Installation

npm install @hft-labs/react @tanstack/react-query
# or
pnpm add @hft-labs/react @tanstack/react-query

Quick Start

1. Set up providers

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { HftProvider } from '@hft-labs/react'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HftProvider baseUrl="https://api.your-hft-instance.com">
        <YourApp />
      </HftProvider>
    </QueryClientProvider>
  )
}

2. Fetch pool data

import { usePool } from '@hft-labs/react'

function PoolInfo() {
  const { data: pool, isLoading } = usePool({
    chainId: 'polygon',
    tokenA: '0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619', // WETH
    tokenB: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359', // USDC
    fee: 3000,
  })

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <p>Price: {pool?.token0Price}</p>
      <p>Tick: {pool?.currentTick}</p>
    </div>
  )
}

Hooks Reference

Query Hooks (read-only, no auth required)

| Hook | Description | |------|-------------| | usePool(params) | Pool info, price, tick, suggestions | | usePoolHistory(params) | Historical price data | | usePositions(params) | All positions for an owner | | usePosition(params) | Single position details |

Mutation Hooks (require session key + signer)

| Hook | Description | |------|-------------| | useMint() | Create new position | | useIncreaseLiquidity() | Add to existing position | | useDecreaseLiquidity() | Remove from position | | useCollectFees() | Collect earned fees | | useBurn() | Burn empty position NFT |

Utility Hooks

| Hook | Description | |------|-------------| | useHftClient() | Access underlying HftClient | | useHftConfig() | Access/update configuration |

Cache Invalidation

Query keys are exported for manual cache control:

import { queryKeys } from '@hft-labs/react'
import { useQueryClient } from '@tanstack/react-query'

function RefreshButton() {
  const queryClient = useQueryClient()

  return (
    <button onClick={() => {
      queryClient.invalidateQueries({ queryKey: queryKeys.pools.all })
    }}>
      Refresh Pools
    </button>
  )
}

TypeScript

All types are re-exported from @hft-labs/client:

import type { PoolInfo, MintParams, ChainId } from '@hft-labs/react'

Requirements

• React 18 or 19
• @tanstack/react-query v5

License

MIT