Fetch Boosts for given RewardKit configuration
Show properties
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react'; import { RewardKitBoostStatus } from '@boostxyz/reward-kit-react'; function BoostsList() { const { data, isPending } = useRewardKitBoosts({ creatorAddress: "0x123...", claimantAddress: "0x456...", status: RewardKitBoostStatus.ACTIVE }); if (isPending) return <div>Loading boosts...</div>; return ( <div> <h2>Available Boosts</h2> <ul> {data?.boosts.map((boost, index) => ( <li key={index}> {boost.name} - {boost.status} </li> ))} </ul> </div> ); }
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react'; function FilteredBoostsList() { const { data, isPending, error } = useRewardKitBoosts({ // Filter by creator creatorAddress: "0x123...", // Filter by chain chainId: 1, // Filter specific tokens tokens: [ "1:0xabc...def", // ETH token "137:0x789...123" // Polygon token ], // Filter by target contract targetContract: "0xdef...", // Pagination pageSize: 10, page: 1 }); if (error) { return <div>Error loading boosts: {error.message}</div>; } return ( <div className="boosts-container"> {isPending ? ( <div>Loading filtered boosts...</div> ) : ( <div> <h2>Filtered Boosts</h2> {data?.boosts.length === 0 ? ( <p>No boosts found matching filters</p> ) : ( <ul> {data?.boosts.map((boost, index) => ( <li key={index}> <h3>{boost.name}</h3> <p>Chain: {boost.chainId}</p> <p>Status: {boost.status}</p> </li> ))} </ul> )} </div> )} </div> ); }
import { useRewardKitBoosts } from '@boostxyz/reward-kit-react'; import { useState } from 'react'; function PaginatedBoosts() { const [page, setPage] = useState(1); const pageSize = 20; const { data, isPending, refetch } = useRewardKitBoosts({ creatorAddress: "0x123...", pageSize, page }); const handleNextPage = () => { setPage(prev => prev + 1); }; const handlePrevPage = () => { setPage(prev => Math.max(1, prev - 1)); }; return ( <div> <div className="boosts-list"> {isPending ? ( <div>Loading page {page}...</div> ) : ( <> <div className="boosts-grid"> {data?.boosts.map((boost, index) => ( <div key={index} className="boost-card"> <h3>{boost.name}</h3> <div className="boost-details"> <span>Chain: {boost.chainId}</span> <span>Status: {boost.status}</span> </div> </div> ))} </div> <div className="pagination-controls"> <button onClick={handlePrevPage} disabled={page === 1} > Previous </button> <span>Page {page}</span> <button onClick={handleNextPage} disabled={!data?.boosts.length} > Next </button> </div> </> )} </div> <button onClick={() => refetch()} className="refresh-button" > Refresh Boosts </button> </div> ); }