> ## Documentation Index
> Fetch the complete documentation index at: https://v1.docs.megapot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React UI Kit (Beta)

> 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.

## Key Features

* **🎰 Jackpot**: Users can easily purchase tickets for the jackpot directly within your app. Earn a 10% fee on every ticket sold ([instructions](https://github.com/coordinationlabs/megapot-ui-kit-demo?tab=readme-ov-file#how-to-earn-10-of-each-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

* [Demo App](https://megapot-ui-kit.vercel.app/) - Live demo site
* [Demo Repo](https://github.com/coordinationlabs/megapot-ui-kit-demo) - Github repo
* [Examples Docs](https://v1.docs.megapot.io/developers/megapot-examples.md) - Reference examples docs
* [Examples Repo](https://github.com/coordinationlabs/megapot-examples/) - Reference examples repo

> [!NOTE]
>
> [Developer API](https://v1.docs.megapot.io/developers/megapot-api.md): Speed up development with our data APIs.

### Community Spotlight

This is an incomplete list of developers building on the Megapot protocol.

* [Eggs.fun](https://farcaster.xyz/eggsdotfun) - Farcaster/Base mini app (100k+ users) that incentivizes paid transactions with Megapot tickets
* [Moai Cash](https://moai.cash/) - Telegram mini app with embedded Megapot and ticket pooling feature. They incentive signups by giving away Megapot tickets ([try it here](https://t.me/moaicash_bot/join_megapot))!
* [Tab](https://farcaster.xyz/usetab) - Farcaster/Base mini app with embedded Megapot.
* [BTB Finance](https://btb.finance/contracts/megapot) - DeFi super app with embedded Megapot. Plus, instant cashback for users and an auto-subscription feature.
* [Colony](https://x.com/colonyfun) - World mini app (20k+ users) that incentivizes paid transactions with Megapot tickets
* [Stocks Trader](https://x.com/stacknapp) - World mini app (25k+ users) that incentivizes paid transactions with Megapot tickets
* [Scoreline](https://x.com/Scorelinefun) - Farcaster/Base and World mini app (10k+ users) that incentivizes paid transactions with Megapot tickets
* [Sendpot](https://send.app/sendpot) - Weekly jackpot in Send.app's native token $SEND (past mcap of $1.9M).
* \[$jackpot](https://x.com/jackpot_onbase) - Token (past mcap of $1.4M) that auto-buys Megapot tickets with trading fees
* [Pot Raiders](https://www.basedbits.fun/raid) - NFT collection (minted out in 1h) that auto-buys Megapot tickets with a portion of their treasury

## Prerequisite

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

Run the following command:

```bash theme={null}
yarn add @coordinationlabs/megapot-ui-kit viem wagmi @tanstack/react-query polish styled-components
```

Here is [the npm package](https://www.npmjs.com/package/@coordinationlabs/megapot-ui-kit) for reference.

## Example

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

```tsx theme={null}

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?

For support with integration issues, or if you want a UI kit in a different framework, contact us via Telegram at [https://t.me/patricklung](https://t.me/patricklung). We're here to help!


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.