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 hook that provides access to RewardKit’s context values and methods.

​
Return Value
RewardKitContextValue

useRewardKit TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s how to use the hook in your application:

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

// Wrap your app with the provider
function App() {
  return (
    <RewardKitProvider
      theme={{ primary: "#4F46E5" }}
      config={{
        testnetsEnabled: true,
        creatorAddress: "0x123..."
      }}
    >
      <YourComponents />
    </RewardKitProvider>
  );
}

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

  const handleClick = () => {
    configure({ chainId: 1 }); // Update configuration
    openModal(); // Open the modal
  };

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

​
Theme Customization

Example showing theme customization:

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

function ThemedRewards() {
  const customTheme = {
    primary: "#4F46E5",
    card: "#FFFFFF",
    accent: "#1F2937",
    secondary: "#E5E7EB"
  };

  return (
    <RewardKitProvider theme={customTheme}>
      <ThemeController />
    </RewardKitProvider>
  );
}

function ThemeController() {
  const { changeTheme } = useRewardKit();

  const toggleDarkMode = () => {
    changeTheme({
      card: "#1F2937",
      accent: "#FFFFFF",
      primary: "#374151"
    });
  };

  return (
    <button onClick={toggleDarkMode}>
      Switch to Dark Mode
    </button>
  );
}

​
Configuration Management

Example demonstrating dynamic configuration:

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

function ConfigurableRewards() {
  const initialConfig = {
    testnetsEnabled: process.env.NODE_ENV === 'development',
    creatorAddress: "0x123..."
  };

  return (
    <RewardKitProvider config={initialConfig}>
      <RewardsFilter />
    </RewardKitProvider>
  );
}

function RewardsFilter() {
  const { configure, openModal } = useRewardKit();

  const filterByChain = (chainId: number) => {
    configure({
      chainId,
      targetContract: "0x456..."
    });
    openModal();
  };

  return (
    <div>
      <button onClick={() => filterByChain(1)}>
        Ethereum Rewards
      </button>
      <button onClick={() => filterByChain(137)}>
        Polygon Rewards
      </button>
    </div>
  );
}

Example showing modal state control:

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

function ModalController() {
  const {
    isModalOpen,
    openModal,
    closeModal,
    toggleModal
  } = useRewardKit();

  return (
    <div>
      <button onClick={openModal}>
        Open Rewards
      </button>

      <button onClick={toggleModal}>
        {isModalOpen ? 'Close' : 'Open'} Rewards
      </button>

      {isModalOpen && (
        <button onClick={closeModal}>
          Close Modal
        </button>
      )}

      <div>Modal is {isModalOpen ? 'open' : 'closed'}</div>
    </div>
  );
}