npm install @contextwtf/react @contextwtf/sdk @tanstack/react-query wagmi viem

import { ContextProvider } from '@contextwtf/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'

const queryClient = new QueryClient()

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ContextProvider apiKey="your-api-key">
          <YourApp />
        </ContextProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

import { useMarkets, useQuotes } from '@contextwtf/react'

function MarketList() {
  const { data: markets, isLoading } = useMarkets({ status: 'active' })

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

  return (
    <ul>
      {markets?.data.map(market => (
        <li key={market.id}>{market.question}</li>
      ))}
    </ul>
  )
}

import { contextKeys } from '@contextwtf/react'
import { useQueryClient } from '@tanstack/react-query'

const queryClient = useQueryClient()

// Invalidate all market data
queryClient.invalidateQueries({ queryKey: contextKeys.markets.all })

// Invalidate a specific market
queryClient.invalidateQueries({ queryKey: contextKeys.markets.detail(marketId) })