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

# Jackpot

> The Jackpot component is a React component designed to facilitate the purchase of tickets for a jackpot.

### Usage

```tsx theme={null}
import {
  Jackpot,
  JACKPOT,
  MainnetJackpotName,
} from "@coordinationlabs/megapot-ui-kit";

<Jackpot
  contract={JACKPOT[chainId][MainnetJackpotName.USDC]}
/>

```

### Props

<table><thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Required</th><th>Default</th></tr></thead><tbody><tr><td>contract</td><td>[#jackpotinfo](#jackpotinfo)</td><td>Contract information including address and chain details</td><td>✅</td><td /></tr><tr><td>onBuyTicketSuccess</td><td><pre>``(hash: `0x${string}`, ticketAmount: number) => void
``</pre></td><td>Callback function when ticket purchase succeeds</td><td>❌</td><td /></tr><tr><td>onTicketChangeAmount</td><td><pre>`(ticketAmount: number) => void
`</pre></td><td>Callback function when ticket amount changes</td><td>❌</td><td /></tr><tr><td>onBuyTicketError</td><td><pre>`(error: Error) => void
`</pre></td><td>Callback function when ticket purchase fails</td><td>❌</td><td /></tr><tr><td>referrerAddress</td><td>Address</td><td>The address of the referrer. This address will get 5% of each ticket price</td><td>❌</td><td /></tr><tr><td>recipientAddress</td><td>Address</td><td>This address will receive the ticket instead of the sender \****Only ETH contract support this***</td><td>❌</td><td /></tr><tr><td>blocked</td><td>[#blockeddata](#blockeddata)</td><td>You can disable Jackpot functionalities</td><td>❌</td><td /></tr><tr><td>isStablecoinPool</td><td>boolean</td><td>If you set this to false, UI will show base token amount and dollar for ticket price</td><td>❌</td><td /></tr><tr><td>isOfficialPool</td><td>boolean</td><td>If you set this to false, Information about megapoint will be hide from the UI</td><td>❌</td><td /></tr><tr><td>showSuccessDialog</td><td>boolean</td><td>If you set this to false, success dialog won't show after ticket purchase succeeds</td><td>❌</td><td /></tr><tr><td>detailContainer</td><td>ReactNode</td><td>This will be render below ticket price. You can use this prop to add more detail to the widget</td><td>❌</td><td /></tr><tr><td>tokenPrice</td><td>number</td><td>Optional override for token price</td><td>❌</td><td /></tr></tbody></table>

### Official Jackpot

You can easily integrate these official pools using our pre-configured JACKPOT constant:

```typescript theme={null}
import { JACKPOT, MainnetJackpotName, SupportedChainId, TestnetJackpotName } from '@coordinationlabs/megapot-ui-kit';

// Example: Using the official Base USDC pool
const usdcPool = JACKPOT[SupportedChainId.BASE][MainnetJackpotName.USDC];

// Example: Using the official Base Sepolia MPUSDC pool
const usdcPool = JACKPOT[SupportedChainId.BASE][TestnetJackpotName.MPUSDC];

// Example: Using the official BLAST pool
const blastPool = JACKPOT[SupportedChainId.BLAST][MainnetJackpotName.BLAST];
```

### Type

#### JackpotInfo

<table><thead><tr><th>Property</th><th>Type</th><th>Description</th><th>Required</th></tr></thead><tbody><tr><td>address</td><td>Address</td><td>Smart contract address of the jackpot</td><td>✅</td></tr><tr><td>abi</td><td>Abi</td><td>Contract ABI for interaction</td><td>✅</td></tr><tr><td>chainId</td><td>number</td><td>Blockchain network ID</td><td>✅</td></tr><tr><td>name</td><td>string</td><td>Display name of the jackpot</td><td>✅</td></tr><tr><td>tokenAddress</td><td>Address</td><td>Address of the token used</td><td>✅</td></tr><tr><td>tokenImage</td><td>string</td><td>URL/path to token logo</td><td>✅</td></tr><tr><td>pointPerTicket</td><td>number</td><td>Points awarded per ticket</td><td>❌</td></tr></tbody></table>

#### BlockedData

| Property | Type | Required | Description |
| - | - | - | - |
| blocked | boolean | Yes | When set to true, disables action button |
| blockTitle | string | No | Custom button text to display to users when purchases are blocked |
| blockMessage | string | No | show detail blocked message to users |


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