'use client'
import { RewardKitProvider, RewardKitButton, RewardKitConfig, useRewardKit } from "@boostxyz/reward-kit-react";
// Optional configuration used for filtering shown Boosts at an appplication-wide level
const config: RewardKitConfig = {
// Enable testnets / staging API
testnetsEnabled?: boolean,
// The preconfigured creator address, if any, to filter displayed rewards
creatorAddress?: Address,
// The preconfigured Boost ID, if any
boostId?: string,
// Only show offers from Boosts funded by this budget account
budgetAccount?: Address,
// Only show offers with actions that target a contract on this chain ID. You must specify this if also specifying `targetContract`
chainId?: number,
// Only show offers with actions that target this contract address. If specifying, you must also specify chainId
targetContract?: Address,
// Only show offers with actions targeting tokens, in the format `chainId:address`, or `chainId:address:tokenId`
tokens?: (`${number}:${Address}` | `${number}:${Address}:${number}`)[]
}
function App() {
return (
<RewardKitProvider
// All configuration fields optional, tune your filters according to your application
config={{
testnetsEnabled: true,
creatorAddress: "0xdeadbeef...",
boostId: "11155111:0x378632819F39C74c4F56B1429E760739c5fb51b7:33",
budgetAccount: "0xdeadbeef",
targetContract: "0xdeadbeef",
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}
>
<MyApplication />
</RewardKitProvider>
);
}
// The rest of your application logic
function MyApplication() {
// Access the current RewardKit context
const rewardKit = useRewardKit()
// reads currently applied colors scheme
rewardKit.theme
// Is the modal currently open.
rewardKit.isModalOpen
// See RewardKitConfig interface, contains several optional parameters supplied to the API when requesting Boosts to display
rewardKit.config
// Call this to update RewardKit theme variables
rewardKit.changeTheme({ primary: '#fff', ...})
// Open the modal with the current theme and configuration
rewardKit.openModal()
// Close the modal
rewardKit.closeModal()
// Toggle the modal's visibility
rewardKit.toggleModal()
// Reconfigure RewardKit to update what Boosts show in the modal
rewardKit.configure({ boostId: '', deployerAddress: '0x', ... })
return (
<>
// Basic usage, will render a button that, when clicked,
// opens the modal as configured on the provider
<RewardKitButton />
// With configuration, will call rewardKit.configure before opening the modal
<RewardKitButton
config={{
creatorAddress: "0x123...",
tokens: ["1:0xabc..."]
}}
className="custom-button"
>
<>Custom Text</>
</RewardKitButton>
// If using shadcn buttons, the RewardKitButton here inherits all of the classes automatically
<Button variant="secondary" size="sm" asChild>
<RewardKitButton />
</Button>
</>
)
}