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 and validates detailed information about a single RewardKit Boost, including its claims and status for a specific claimant address.

​
params
object
​
Return Value
UseQueryResult<RewardKitBoostResponse>

useRewardKitBoost TSDoc

See in-depth technical documentation

​
Basic Usage

Here’s a simple example of using the hook to display boost information:

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

function BoostDisplay() {
  const { data, isPending, error } = useRewardKitBoost({
    boostId: "1:0x123...789:0",
    claimantAddress: "0xabc...def"
  });

  if (isPending) return <div>Loading boost...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return (
    <div>
      <h2>Boost Status: {data.status}</h2>
      <p>Total Claims: {data.totalClaims}</p>
      {data.txHash && (
        <p>Transaction: {data.txHash}</p>
      )}
    </div>
  );
}

​
Detailed Implementation

Here’s a more comprehensive example showing boost details and claims:

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

function DetailedBoostView() {
  const {
    data: boostData,
    isPending,
    error,
    refetch
  } = useRewardKitBoost({
    boostId: "1:0x123...789:0",
    claimantAddress: "0xabc...def"
  });

  // Status badge component
  const StatusBadge = ({ status }: { status: string }) => (
    <span className={`status-badge ${status}`}>
      {status.toUpperCase()}
    </span>
  );

  if (isPending) {
    return <div>Fetching boost details...</div>;
  }

  if (error) {
    return (
      <div className="error-container">
        <p>Failed to load boost: {error.message}</p>
        <button onClick={() => refetch()}>
          Retry
        </button>
      </div>
    );
  }

  if (!boostData) {
    return <div>No boost data available</div>;
  }

  return (
    <div className="boost-container">
      <div className="boost-header">
        <h2>Boost Details</h2>
        <StatusBadge status={boostData.status} />
      </div>

      <div className="boost-stats">
        <div>
          <h3>Claims</h3>
          <p>{boostData.totalClaims} total claims</p>
        </div>

        {boostData.txHash && (
          <div>
            <h3>Latest Transaction</h3>
            <a
              href={`https://etherscan.io/tx/${boostData.txHash}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              View on Etherscan
            </a>
          </div>
        )}
      </div>

      <div className="claims-list">
        <h3>Recent Claims</h3>
        <ul>
          {boostData.claims.map((claim, index) => (
            <li key={index}>
              <p>Claimer: {claim.address}</p>
              <p>Time: {new Date(claim.timestamp).toLocaleString()}</p>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

​
With Auto-Refresh

Example showing how to implement automatic refresh of boost data:

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

function LiveBoostTracker() {
  const {
    data,
    isPending,
    refetch
  } = useRewardKitBoost({
    boostId: "1:0x123...789:0",
    claimantAddress: "0xabc...def"
  });

  // Refresh data every minute
  useEffect(() => {
    const interval = setInterval(() => {
      refetch();
    }, 60000);

    return () => clearInterval(interval);
  }, [refetch]);

  return (
    <div>
      <div className="status-header">
        <h2>Live Boost Status</h2>
        {isPending && <span>Refreshing...</span>}
      </div>

      {data && (
        <div className="boost-info">
          <div className="status">
            Current Status: {data.status}
          </div>
          <div className="claims">
            Claims: {data.totalClaims}
          </div>
          {data.status === 'claimed' && data.txHash && (
            <div className="transaction">
              Claimed in tx: {data.txHash}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

The hook automatically handles address normalization and validation, and includes built-in caching with a 5-minute stale time. It only fetches data when both a valid boost ID and claimant address are provided.