This repository demonstrates how to integrate with the Onit Prediction Market API using the onit-markets
npm package to create and interact with prediction markets. The example includes a complete Next.js application showcasing market creation and betting functionality.
The API allows developers to:
- Create new prediction markets
- Fetch market data and participants
- Place bets on existing markets
- Resolve their markets and distribute winnings to bettors (coming soon)
The package provides a type safe client for interacting with this API.
See the app/client.ts file for how to initialize the client with your API endpoint that should proxy requests to the Onit API (to protect your API key)
/// app/client.ts
import { getClient } from 'onit-markets';
const client = getClient('http://localhost:3001/proxy');
export default client;
See the app/proxy/[...catchall]/route.ts file for how to create a proxy route to proxy requests to the Onit API (to protect your API key)
/// app/proxy/[...catchall]/route.ts
async function proxyRequest(request: NextRequest) {
const headers = {
// ... additional headers here
Authorization: "Bearer " + ONIT_API_KEY,
} as Record<string, string>;
// ...
The application includes two main pages:
-
- Form to create new prediction markets
- Collects market type, details, and metadata
- Submits to Onit API to create the market on-chain
-
- Displays a specific market by its address
- Provides a form for users to place bets
- Connects to user's wallet to execute betting transactions
The application uses custom React hooks to interact with the Onit API:
-
- Creates a new prediction market via the Onit API
-
- Fetches data for a specific market
-
- Places a bet on a market
- Handles transaction submission to the blockchain
-
- Generates calldata needed for betting transactions
- Used internally by useMakeBet
-
- Fetches participants data for a specific market
- An Onit API key
- Node.js 18+ or Bun
- A Web3 wallet (e.g., MetaMask)
-
Clone this repository
-
Copy
.env.example
to.env
and add your Onit API key:ONIT_API_KEY=your_api_key ONIT_API_URL=https://markets.onit-labs.workers.dev/api
-
Install dependencies:
npm install # or bun install
-
Start the development server:
npm run dev # or bun dev
-
Open http://localhost:3000 in your browser