💰
Megapot
  • Overview
    • About Megapot
    • How to play
    • How to provide liquidity
    • How to refer users
    • Earn as a liquidity provider
    • About the Team
    • Megapoints
  • Deep dive
    • Components
    • System Diagram
    • Smart Contract
    • Provably Fair
  • Developers
    • Start Here
    • Add jackpot to your site
      • Custom Integration
        • Getting Started
        • Contract Functions
        • Jackpot Page
        • LP Deposit Page
        • History Page
      • React UI Kit
        • MegapotProvider
        • Jackpot
        • useJackpot
    • Offer cost-effective incentives
    • Launch jackpot in your token
    • Developer Reference
      • Testnet & Mainnet
      • Contract Overview & Functions
      • Megapot API
      • Megapot Examples
      • How to Earn Fees
      • Brand Kit
  • Appendix
    • VIP Program
    • FAQ
    • Comparisons to Lotteries
    • About Megapot
  • Terms of Service
  • Privacy Policy
  • Responsible Gaming
Powered by GitBook
On this page
  • Key Features
  • Demo & Examples
  • Our Examples
  • Community Spotlight
  • Prerequisite
  • Example
  • Need help or have feedback?
  1. Developers
  2. Add jackpot to your site

React UI Kit

This comprehensive library lets you integrate Megapot seamlessly into your application in minutes. Easily sell tickets, earn fees, and allow users to add liquidity to your custom jackpot pool.

PreviousHistory PageNextMegapotProvider

Last updated 5 days ago

Key Features

  • 🎰 Jackpot: Users can easily purchase tickets for the jackpot directly within your app. Earn a 10% fee on every ticket sold ().

  • âš¡ Seamless Integration: Designed for smooth integration with your existing app, leveraging React components and hooks.

  • 🎨 Customizable UI: With built-in styling and customization options, you can adapt the look and feel to match your app’s theme.

  • Earn 10% of ticket purchases: Referring a user ticket purchase earns you 10% of each ticket sale

Demo & Examples

Our Examples

  • - Live demo site

  • - Github repo

  • - Reference examples docs

  • - Reference examples repo

: Speed up development with our data APIs.

Community Spotlight

  • - Telegram mini app with embedded Megapot and ticket pooling feature. They incentive signups by giving away Megapot tickets ()!

  • - Farcaster mini app with embedded Megapot.

  • - DeFi super app with embedded Megapot. Plus, instant cashback for users and an auto-subscription feature.

  • - Weekly jackpot in Send.app's native token $SEND.

  • - Beautiful version of Megapot. Also a , see

  • - Pool tickets with other players for better jackpot odds.

Prerequisite

To get started, you’ll need to install the necessary dependencies

Run the following command:

yarn add @coordinationlabs/megapot-ui-kit viem wagmi @tanstack/react-query polish styled-components

Example

After installing the dependencies, follow these steps to configure and set up your application. The example below demonstrates how to:


import {
  Jackpot,
  MainnetJackpotName,
  MegapotProvider,
  JACKPOT,
  TestnetJackpotName,
} from '@coordinationlabs/megapot-ui-kit';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createConfig, http } from '@wagmi/core';
import { base, baseSepolia } from 'viem/chains';
import { WagmiProvider, useConnect } from 'wagmi';

const queryClient = new QueryClient();

const wagmiConfig = createConfig({
  chains: [base, baseSepolia],
  transports: {
    [base.id]: http(),
    [baseSepolia.id]: http(),
  },
});

function MegapotWrapper({ children }) {
  const { connectors } = useConnect();

  // You can use any wallet provider
  return (
    <MegapotProvider
      onConnectWallet={() => {
        connectors[0].connect();
      }}
    >
      {children}
    </MegapotProvider>
  );
}

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={wagmiConfig}>
        <MegapotWrapper>
          {/* Base Mainnet */}
          <Jackpot contract={JACKPOT[base.id]?.[MainnetJackpotName.USDC]} />
          {/* Base Sepolia */}
          <Jackpot
            contract={JACKPOT[baseSepolia.id]?.[TestnetJackpotName.MPUSDC]}
          />
        </MegapotWrapper>
      </WagmiProvider>
    </QueryClientProvider>
  );
};

export default App;

Need help or have feedback?

Here is for reference.

For support with integration issues, or if you want a UI kit in a different framework, contact us via Telegram at . We're here to help!

instructions
Demo App
Demo Repo
Examples Docs
Examples Repo
Developer API
Moai Cash
try it here
Tab
BTB Finance
Sendpot
Bonanza
Farcaster mini app
testimonial
Mega Pool
the npm package
https://t.me/patricklung