Configure, style, and manipulate the RewardKit UI
Show properties
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>; }
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> ); }
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> ); }
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> ); }