Set up with React

You are wiring the client in a React tree. Wrap the app once. After that, screens ask the client for a catalog of questions, for one market, for one answer, or for one wallet. Install the SDK, viem, and react first. Reads need a chain id and a public client. Writes need a wallet, or a batched sender if you use account abstraction. Leave addresses unset unless you deployed your own. Then you can list existing questions, or create “Will ETH be above $5,000 at year end?” with Yes and No.

Wrap the app

'use client'

import { VoizProvider } from '@voiz-digital/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}
      // sendCalls={aaSendCalls}
    >
      {children}
    </VoizProvider>
  )
}

If you use account abstraction, prefer sendCalls so seed, swap, and add liquidity can batch into one UserOp. A plain walletClient sends each inner call as its own transaction.

List markets, then ask one for pictures

'use client'

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

export function MarketList() {
  const { client } = useVoiz()

  async function load() {
    const { markets } = await client.listMarkets()
    const metadata = await client.market(markets[0].address).metadata()
    console.log(markets[0].marketName, metadata?.image)
  }

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

That read is the catalog. Names and answers come back; pictures do not. People can trade only after you create and seed, or after you pass the first liquidity in the same create call. useVoiz() throws outside the provider.

List markets — browse the catalog
Create a market — publish a question
How to think about it
VoizProvider and useVoiz

Get started

How it works

Market

User

Outcome

React

Helpers

Wrap the app

List markets, then ask one for pictures

Next

​Wrap the app

​List markets, then ask one for pictures

​Next

Wrap the app

List markets, then ask one for pictures

Next