React UI Kit (Beta)

​

Key Features

• 🎰 Jackpot: Users can easily purchase tickets for the jackpot directly within your app. Earn a 10% fee on every ticket sold (instructions).
• ⚡ 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 - Live demo site
• Demo Repo - Github repo
• Examples Docs - Reference examples docs
• Examples Repo - Reference examples repo

​

Community Spotlight

• Eggs.fun - Farcaster/Base mini app (100k+ users) that incentivizes paid transactions with Megapot tickets
• Moai Cash - Telegram mini app with embedded Megapot and ticket pooling feature. They incentive signups by giving away Megapot tickets (try it here)!
• Tab - Farcaster/Base mini app with embedded Megapot.
• BTB Finance - DeFi super app with embedded Megapot. Plus, instant cashback for users and an auto-subscription feature.
• Colony - World mini app (20k+ users) that incentivizes paid transactions with Megapot tickets
• Stocks Trader - World mini app (25k+ users) that incentivizes paid transactions with Megapot tickets
• Scoreline - Farcaster/Base and World mini app (10k+ users) that incentivizes paid transactions with Megapot tickets
• 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 - NFT collection (minted out in 1h) that auto-buys Megapot tickets with a portion of their treasury

​

Prerequisite

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

​

Example

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?