Getting Started with PredictKit

npm install @predictkit/react @predictkit/sdk wagmi viem

// providers.tsx
import { WagmiProvider, usePublicClient, useWalletClient, useAccount } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { PredictKitProvider } from '@predictkit/react';
import { config } from './wagmi';

// Wrapper to access wagmi hooks
function PredictKitWrapper({ children }) {
  const publicClient = usePublicClient();
  const { data: walletClient } = useWalletClient();
  const { address } = useAccount();

  return (
    <PredictKitProvider
      factoryAddress="0x..."
      publicClient={publicClient}
      walletClient={walletClient}
      userAddress={address}
      rpcUrl="https://bsc-testnet.publicnode.com"
    >
      {children}
    </PredictKitProvider>
  );
}

export function Providers({ children }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <PredictKitWrapper>
          {children}
        </PredictKitWrapper>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { MarketList } from '@predictkit/react';

function MarketsPage() {
  return (
    <MarketList
      filter="active"     // 'all' | 'active' | 'resolved'
      sortBy="tvl"        // 'tvl' | 'recent' | 'ending-soon'
      onMarketClick={(market) => {
        console.log('Market:', market.address);
      }}
    />
  );
}

import { PredictionWidget } from '@predictkit/react';

function MarketDetailPage({ marketAddress }) {
  return (
    <PredictionWidget
      marketAddress={marketAddress}
      onBetPlaced={(txHash) => {
        console.log('Bet placed!', txHash);
      }}
      onError={(error) => {
        console.error('Error:', error);
      }}
    />
  );
}