Megapot UI Kit

The Megapot UI Kit is a comprehensive library designed to integrate seamlessly into your application. It provides essential components and utilities to manage jackpot sales, as well as add and edit liquidity within the Megapot pool.

📚 View Documentation

Key Features

• 🎰 Jackpot Management: Easily create and manage jackpot sales within your app.
• 💰 Liquidity Pool Management: Add and edit liquidity in the Megapot pool to ensure smooth operations.
• ⚡ 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.

Check out Demo

Getting Started

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:

• Initialize React Query for data management.
• Set up Wagmi for Ethereum blockchain interactions.
• Integrate the Megapot UI Kit for your frontend components.

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;