Getting Started

We build with Next.js using Privy for authentication and Wagmi/Viem for blockchain interactions. Our examples are built for easy use within a React project.

This guide won't cover how to build a Next.js project, but there are many guides online to help you get started.

You should have a working wallet connect button. To reduce the size of this guide we will not cover how to add a wallet connect button to your project, or how to process historical events. This guide will focus on getting liquidity into your project and how to let users purchase tickets and claim winnings. You can look at our demo below for a reference implementation that has these features.

Megapot Demo

All of these examples are built from the Megapot demo app. Feel free to fork the repo and use it as a starting point for your own project. Or just for a reference implementation.

Developer API: Speed up development with our data APIs.

Examples

Once you have the basic setup outlined below, dive into our examples from the menu on the left.

Jackpot Page

  • Purchase Tickets Form

  • Current Jackpot Amount

  • Time Remaining (Countdown)

  • Claim Winnings

    • Claim Button

    • Claimable Amount

  • Last Jackpot Results

Liquidity Page

  • Deposit Liquidity Form

    • Liquidity Amount

    • Risk Percentage

    • Deposit/Approve Button

  • Liquidity Deposited

  • Adjust Risk Form

  • Withdraw Button

History Page

  • User Ticket Purchases

General Setup

We will use a pretty standard setup for our examples. Feel free to adapt them in your own project.

Constants

Constants to be used throughout the project.

Providers / Wagmi

These providers will allow you to connect wallets and sign transactions. This section is important for the wallet connection to work.

Layout

This is the layout for the pages. It is used to provide the global context for the project pages.

Viem Client

We will use a Viem client to interact and read from the contract.

Contract ABI

We will use the contract ABI to interact with the contract.

Last updated