Providers

The Block Lotto SDK offers a set of providers to wrap your application (or parts of it) with the necessary context for interacting with the block lotto lottery. Each provider exposes specific functionality tailored to different parts of the app experience.

BlockLottoProvider

This is the root provider that initializes the SDK and makes core features like transaction handling, user state, and notifications available throughout your app.

Props:

• Loading – (optional) React component to display during loading states.
• Notification – (optional) React component for displaying SDK notifications.

import React from "react";
import { createRoot } from "react-dom/client";
import { HashRouter as Router } from "react-router-dom";
import { ThemeProvider } from "styled-components";

// core functions
import { BlockLottoProvider } from "blocklotto-sdk";

// styles
import { theme, GlobalStyles } from "./styles";

// react components
import App from "./app";
import Loading from "./components/Loading";
import Notification from "./components/Notification";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <ThemeProvider theme={theme}>
    <GlobalStyles />
    <Router>
      <BlockLottoProvider Loading={Loading} Notification={Notification}>
        <App />
      </BlockLottoProvider>
    </Router>
  </ThemeProvider>
);

CheckoutProvider

This provider wraps any part of your app that needs to interact with the lottery ticket purchase flow. It supplies hooks and context to initiate and manage checkout operations.

• Checkout Flow
• useCheckout

<CheckoutProvider>
    <Checkout />
</CheckoutProvider>

CashoutProvider

This provider wraps parts of your app that handle claiming or cashing out winnings. It exposes methods and context for initiating cashouts and tracking their status.

• Cashout Flow
• useCashout

<CashoutProvider>
    <Cashout />
</CashoutProvider>