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.

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

Demo

Check out demo Here

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

Here is the npm package for reference.

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?

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. We're here to help!