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 headless compound component system for displaying reward-related information including amounts, USD values, and token images. The system uses a context-based approach to share reward data between components.

​
Reward.Root

The container component that provides reward data context to child components.

​
props
object

​
Reward.Amount

Component that displays the reward amount with optional formatting.

​
props
object

​
Reward.USD

Component that displays the USD value of rewards.

​
props
object

​
Reward.Image

Component that displays the reward token’s image.

​
props
object

​
Basic Usage

Here’s a simple example showing all components together:

import { Reward } from '@boostxyz/reward-kit-react';

function RewardDisplay() {
  return (
    <Reward.Root id="1:0x123...789:0" address="0xabc...def">
      <div className="reward-container">
        <Reward.Image
          className="token-icon"
          alt="Token"
        />
        <Reward.Amount abbreviated withSymbol />
        <Reward.USD withSymbol />
      </div>
    </Reward.Root>
  );
}

​
With Custom Rendering

Example using render props for custom displays:

import { Reward } from '@boostxyz/reward-kit-react';

function CustomRewardDisplay() {
  return (
    <Reward.Root id="1:0x123...789:0">
      {(reward) => (
        <div className="custom-reward">
          {reward.isPending ? (
            <LoadingSpinner />
          ) : (
            <>
              <Reward.Amount>
                {(incentive) => (
                  <div className="amount-display">
                    <h3>Available Reward</h3>
                    <p>{incentive.rewardAmount} {incentive.tokenSymbol}</p>
                  </div>
                )}
              </Reward.Amount>

              <Reward.USD>
                {(usdValue) => (
                  <div className="usd-value">
                    Current Value: ${usdValue.toFixed(2)}
                  </div>
                )}
              </Reward.USD>
            </>
          )}
        </div>
      )}
    </Reward.Root>
  );
}

​
With Fallback Content

Example showing fallback handling:

import { Reward } from '@boostxyz/reward-kit-react';

function RewardWithFallbacks() {
  return (
    <Reward.Root id="1:0x123...789:0">
      <div className="reward-info">
        <Reward.Image
          fallback={<DefaultTokenIcon />}
          className="token-image"
        />

        <Reward.Amount
          abbreviated
          withSymbol
          fallback="Reward amount unavailable"
        />

        <Reward.USD
          abbreviated
          withSymbol
          fallback="USD value pending"
        />
      </div>
    </Reward.Root>
  );
}

​
Type Definitions

​
RewardContextValue
UseQueryResult<RewardKitBoostResponse>

The full query result containing boost data and status

The Reward components use React Context internally to share data and must be used within a Reward.Root component. The system automatically handles loading states, error cases, and data formatting.

Each component can be used independently or together, allowing for flexible layouts and custom rendering through render props.

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 headless compound component system for displaying reward-related information including amounts, USD values, and token images. The system uses a context-based approach to share reward data between components.

​
Reward.Root

The container component that provides reward data context to child components.

​
props
object

​
Reward.Amount

Component that displays the reward amount with optional formatting.

​
props
object

​
Reward.USD

Component that displays the USD value of rewards.

​
props
object

​
Reward.Image

Component that displays the reward token’s image.

​
props
object

​
Basic Usage

Here’s a simple example showing all components together:

import { Reward } from '@boostxyz/reward-kit-react';

function RewardDisplay() {
  return (
    <Reward.Root id="1:0x123...789:0" address="0xabc...def">
      <div className="reward-container">
        <Reward.Image
          className="token-icon"
          alt="Token"
        />
        <Reward.Amount abbreviated withSymbol />
        <Reward.USD withSymbol />
      </div>
    </Reward.Root>
  );
}

​
With Custom Rendering

Example using render props for custom displays:

import { Reward } from '@boostxyz/reward-kit-react';

function CustomRewardDisplay() {
  return (
    <Reward.Root id="1:0x123...789:0">
      {(reward) => (
        <div className="custom-reward">
          {reward.isPending ? (
            <LoadingSpinner />
          ) : (
            <>
              <Reward.Amount>
                {(incentive) => (
                  <div className="amount-display">
                    <h3>Available Reward</h3>
                    <p>{incentive.rewardAmount} {incentive.tokenSymbol}</p>
                  </div>
                )}
              </Reward.Amount>

              <Reward.USD>
                {(usdValue) => (
                  <div className="usd-value">
                    Current Value: ${usdValue.toFixed(2)}
                  </div>
                )}
              </Reward.USD>
            </>
          )}
        </div>
      )}
    </Reward.Root>
  );
}

​
With Fallback Content

Example showing fallback handling:

import { Reward } from '@boostxyz/reward-kit-react';

function RewardWithFallbacks() {
  return (
    <Reward.Root id="1:0x123...789:0">
      <div className="reward-info">
        <Reward.Image
          fallback={<DefaultTokenIcon />}
          className="token-image"
        />

        <Reward.Amount
          abbreviated
          withSymbol
          fallback="Reward amount unavailable"
        />

        <Reward.USD
          abbreviated
          withSymbol
          fallback="USD value pending"
        />
      </div>
    </Reward.Root>
  );
}

​
Type Definitions

​
RewardContextValue
UseQueryResult<RewardKitBoostResponse>

The full query result containing boost data and status

The Reward components use React Context internally to share data and must be used within a Reward.Root component. The system automatically handles loading states, error cases, and data formatting.

Each component can be used independently or together, allowing for flexible layouts and custom rendering through render props.