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.
The unique identifier of the reward boost in format “chainId:contractAddress:boostId”
Ethereum address of the reward claimant
children
ReactNode | ((queryResult: UseQueryResult) => React.React.Node)
Reward.Amount
Component that displays the reward amount with optional formatting.
Whether to show abbreviated numbers (e.g., 2.7M vs 2700000)
Whether to show the token symbol (e.g., 2.7M ETH)
Content to show when reward data is unavailable
children
ReactNode | ((value: RewardKitIncentive) => React.ReactNode)
Optional render function for custom display, given the underlying reward data from the Boost
Reward.USD
Component that displays the USD value of rewards.
Whether to round to 2 decimal places, for example, either 2.00 or 2.00002
Whether to show the USD symbol ($)
Content to show when USD value is unavailable
children
((value: number) => React.React.Node)
Optional render function receiving the raw USD value
Reward.Image
Component that displays the reward token’s image.
Content to show when image is unavailable
Any valid HTML img element attributes
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
Whether the query is loading
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.