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.

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.