Rewards Panel

"use client";

import type { CampaignId, UserCampaignReward } from "@boostxyz/tbi-sdk";
import { useQuery } from "@tanstack/react-query";
import { useAccount } from "wagmi";
import { campaignKey, campaignLabel, formatToken } from "@/lib/format";
import { tbi } from "@/lib/tbi";
import { ClaimButton } from "./claim-button";

export function useUserRewards(address?: `0x${string}`) {
  return useQuery({
    queryKey: ["tbi", "rewards", address],
    queryFn: () =>
      tbi.rewards.forUser(address!, { status: ["active", "ended", "finalized"] }),
    enabled: !!address,
    refetchInterval: 60_000,
  });
}

/** Campaign metadata never changes, so cache it for the session. */
function useCampaign(id: CampaignId) {
  return useQuery({
    queryKey: ["tbi", "campaign", campaignKey(id)],
    queryFn: () => tbi.campaigns.get(id),
    staleTime: Infinity,
  });
}

export function RewardsPanel() {
  const { address } = useAccount();
  const { data, isPending, error } = useUserRewards(address);

  if (!address) return <p>Connect a wallet to see your rewards.</p>;
  if (isPending) return <p>Loading rewards…</p>;
  if (error) return <p>Could not load rewards.</p>;
  if (data.data.length === 0) {
    return <p>No rewards yet. Deposit into a live campaign to start earning.</p>;
  }

  return (
    <table>
      <thead>
        <tr>
          <th>Campaign</th>
          <th>Earned</th>
          <th>Claimable</th>
          <th />
        </tr>
      </thead>
      <tbody>
        {data.data.map((reward) => (
          <RewardRow key={campaignKey(reward.id)} reward={reward} />
        ))}
      </tbody>
    </table>
  );
}

function RewardRow({ reward }: { reward: UserCampaignReward }) {
  const { data: campaign } = useCampaign(reward.id);
  const { decimals, symbol } = reward.rewardToken;

  return (
    <tr>
      <td>{campaign ? campaignLabel(campaign) : campaignKey(reward.id)}</td>
      <td>{formatToken(reward.accumulatedRewards, decimals, symbol)}</td>
      <td>
        {reward.claimable > 0n
          ? formatToken(reward.claimable, decimals, symbol)
          : "Accruing"}
      </td>
      <td>
        <ClaimButton id={reward.id} />
      </td>
    </tr>
  );
}