Quickstart: React / Next.js

npm install @voiz/markets-sdk viem react

'use client'

import { VoizProvider } from '@voiz/markets-sdk/react'
import { createPublicClient, http } from 'viem'
import { baseSepolia } from 'viem/chains'

const publicClient = createPublicClient({
  chain: baseSepolia,
  transport: http(),
})

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <VoizProvider
      chainId={baseSepolia.id}
      publicClient={publicClient}
      // walletClient={walletClient}   // EOA / injected wallet
      // sendCalls={aaSendCalls}       // Privy / AA batch (preferred for product UIs)
    >
      {children}
    </VoizProvider>
  )
}

'use client'

import { useVoiz } from '@voiz/markets-sdk/react'

export function MarketList() {
  const { client, chainId, addresses } = useVoiz()

  async function load() {
    const { markets, source, usedFallback } = await client.listMarkets()
    // markets: MarketSummary[] — use for list and detail UI
    console.log(chainId, addresses.collateral, source, usedFallback, markets.length)
  }

  return <button onClick={load}>Load markets</button>
}

'use client'

import { useVoiz } from '@voiz/markets-sdk/react'
import type { Address } from 'viem'

export function BuyButton({
  outcomeToken,
  user,
  amountIn,
}: {
  outcomeToken: Address
  user: Address
  amountIn: bigint
}) {
  const { client } = useVoiz()

  async function onBuy() {
    const pool = client.pool(outcomeToken)
    const quote = await pool.quoteTrade({ side: 'buy', amountIn })

    if (!quote.withinRange) {
      // Cap was applied — use quote.amountIn / quote.maxAmountIn in the UI
      console.warn(quote.message ?? 'Size exceeds in-range liquidity')
    }

    const minAmountOut = (quote.amountOut * 99n) / 100n // example 1% slip
    await pool.swap({
      side: 'buy',
      amountIn: quote.amountIn,
      minAmountOut,
      user,
    })
  }

  return <button onClick={onBuy}>Buy</button>
}