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.
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
This is an incomplete list of developers building on the Megapot protocol.
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 - 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
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!
Last updated