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.
Configuration interface for RewardKit, controlling reward display filters and display settings
Enable testnet networks and staging API access
The creator address to filter displayed rewards by
The Boost ID to feature, in format “chainId:address:id”
Only show offers with actions that target this contract address. If specifying, you must also specify chainId
Only show offers with actions that target a contract on this chain ID. You must specify this if also specifying targetContract
tokens
Array<(`${chainId}:${Address}` | `${chainId}:${Address}:${tokenId}`)>
Only show offers with actions targeting tokens, in the format chainId:address, or chainId:address:tokenId
Filter to only show offers funded by this budget account.
An object containing configurable styles to apply to the RewardKit UI. Color values may be in either hex or rgb format.
Primary color for headers and icons
Primary color for call-to-actions, like button backgrounds
Secondary color for interactive elements, like button backgrounds
The foreground color for primary call to action elements, like primary button text
Foreground color for copy on neutral backgrounds
Background color for raised container elements
Background color intended to be behind interactive elements
Border color around main dialog
Color of shadow over page, behind main dialog
Color used for skeleton loaders
Muted color used to accent non-CTA elements
The Ethereum address of the connected wallet attempting to claim
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
