Reward Kit is still in early alpha, and may contain bugs or unexpected behavior.

The Boost V2 Docs are under active development and will be subject to changes.

A React context provider that manages the global state and configuration for RewardKit components, including theming, modal state, and reward filtering settings.

​
props
object
required

RewardKitProvider TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s how to use the RewardKit context in your application:

import { RewardKitProvider, useRewardKit } from '@boostxyz/reward-kit-react';

// Wrap your app with the provider
function App() {
  return (
    <RewardKitProvider
      // All configuration fields optional, tune your filters according to your application
      config={{
        testnetsEnabled: true,
        creatorAddress: "0x123...",
        boostId: "11155111:0x378632819F39C74c4F56B1429E760739c5fb51b7:33",
        budgetAccount: "0xd8f8d805f85518b2aedfe3148135bb6dce352aaf",
        targetContract: "0xdcffce9d8185706780a46cf04d9c6b86b3451497",
        chainId: 11155111,
        tokens: ["7777777:0x777777722d078c97c6ad07d9f36801e653e356ae", "7777777:0x777777722d078c97c6ad07d9f36801e653e356ae:1"]
      }}
      // All theme configuration optional
      theme={{
        accent: "#9a75ff",
        primary: "#25292e",
        "button-primary": "#25292e",
        "button-secondary": "#f6f7f9",
        "primary-foreground": "#fff",
        secondary: "#989fa9",
        card: "#f6f7f9",
        dialog: "#fff",
        "dialog-border": "#e5e7eb",
        "dialog-overlay": "rgba(0, 0, 0, 0.2)",
        skeleton: "#f7f6f8",
        dim: "#f7f6f8",
        scrollbar: "#989fa9",
      }}
      // Handy for developing locally
      defaultOpen={true}
    >
      <YourComponents />
    </RewardKitProvider>
  );
}

// Use the context in your components
function RewardsButton() {
  const { openModal, configure } = useRewardKit();

  const handleClick = () => {
    configure({ creatorAddress: "0x123..." }); // Update configuration
    openModal(); // Open the modal
  };

  return <button onClick={handleClick}>View Rewards</button>;
}

The RewardKit context system provides:

  • Centralized state management for rewards configuration
  • Theme customization through CSS variables
  • Modal visibility control
  • Auto-updating configuration
  • Integration with React Query and Wagmi
  • Shadow DOM isolation for styles
  • Memory routing for modal navigation