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 Query hook that fetches a user’s complete RewardKit profile, including their active, claimed, and claimable boosts, along with total USD values.

​
params
object
​
Return Value
UseQueryResult<RewardKitProfileResponse>

useRewardKitProfile TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s a simple example of fetching and displaying a user’s profile:

import { useRewardKitProfile } from '@boostxyz/reward-kit-react';

function UserProfile() {
  const { data, isPending } = useRewardKitProfile({
    claimantAddress: "0x123...",
    creatorAddress: "0x456..."
  });

  if (isPending) return <div>Loading profile...</div>;

  return (
    <div>
      <h2>Your Rewards</h2>
      <div className="stats">
        <p>Claimable: ${data?.totalClaimableAmountUsd}</p>
        <p>Claimed: ${data?.totalClaimedAmountUsd}</p>
      </div>
      <div className="boosts">
        <p>Active Boosts: {data?.activeBoosts.length}</p>
        <p>Available to Claim: {data?.claimableBoosts.length}</p>
      </div>
    </div>
  );
}

​
With Filtering

Example showing how to use multiple filters:

import { useRewardKitProfile } from '@boostxyz/reward-kit-react';

function FilteredProfile() {
  const {
    data,
    isPending,
    error
  } = useRewardKitProfile({
    claimantAddress: "0x123...",
    chainId: 1, // Ethereum mainnet
    tokens: [
      "1:0xabc...def", // Specific token
      "1:0xghi...jkl:1" // Specific NFT
    ],
    targetContract: "0x789..."
  });

  if (error) {
    return <div>Error loading profile: {error.message}</div>;
  }

  return (
    <div className="profile-container">
      {isPending ? (
        <div>Loading filtered profile...</div>
      ) : (
        <>
          <div className="amounts">
            <h3>Total Values</h3>
            <p>Available: ${data?.totalClaimableAmountUsd}</p>
            <p>Claimed: ${data?.totalClaimedAmountUsd}</p>
          </div>

          <div className="boosts-lists">
            <div>
              <h3>Claimable Boosts</h3>
              <ul>
                {data?.claimableBoosts.map((boost, index) => (
                  <li key={index}>
                    {boost.name} - ${boost.amountUsd}
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h3>Active Boosts</h3>
              <ul>
                {data?.activeBoosts.map((boost, index) => (
                  <li key={index}>
                    {boost.name} - Expires: {boost.expirationDate}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

​
With Auto-Refresh

Example implementing real-time profile updates:

import { useRewardKitProfile } from '@boostxyz/reward-kit-react';
import { useState, useEffect } from 'react';

function LiveProfile() {
  const [lastUpdate, setLastUpdate] = useState(new Date());

  const {
    data,
    isPending,
    refetch
  } = useRewardKitProfile({
    claimantAddress: "0x123..."
  });

  // Hook automatically refreshes every 30 seconds
  useEffect(() => {
    if (!isPending) {
      setLastUpdate(new Date());
    }
  }, [data, isPending]);

  return (
    <div className="live-profile">
      <div className="header">
        <h2>Live Rewards Status</h2>
        <small>Last updated: {lastUpdate.toLocaleTimeString()}</small>
        <button onClick={() => refetch()}>
          Refresh Now
        </button>
      </div>

      {isPending ? (
        <div>Updating profile...</div>
      ) : (
        <div className="profile-data">
          <div className="totals">
            <h3>Total Available</h3>
            <p className="amount">
              ${data?.totalClaimableAmountUsd.toFixed(2)}
            </p>
          </div>

          <div className="boost-counts">
            <div>
              Active: {data?.activeBoosts.length}
            </div>
            <div>
              Claimable: {data?.claimableBoosts.length}
            </div>
            <div>
              Claimed: {data?.claimedBoosts.length}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

The hook features:

  • Automatic address normalization and validation
  • Infinite stale time with 30-second refresh interval
  • Comprehensive filtering options
  • USD value aggregation
  • Type-safe response validation using Valibot
  • Integration with RewardKit’s API URL configuration

It’s designed to be the primary data source for displaying a user’s complete RewardKit profile and reward status.