Reward Badge

"use client";

import type { Campaign } from "@boostxyz/tbi-sdk";
import { useQuery } from "@tanstack/react-query";
import { useAccount } from "wagmi";
import { endsIn, formatBps, formatToken } from "@/lib/format";
import { tbi } from "@/lib/tbi";

type Vault = { chainId: number; address: `0x${string}` };

/** The live campaign on this vault, with the wallet's position when connected. */
export function useVaultCampaign(vault: Vault, userAddress?: `0x${string}`) {
  return useQuery({
    queryKey: ["tbi", "vault-campaign", vault.chainId, vault.address, userAddress],
    queryFn: () => tbi.campaigns.active({ target: vault, userAddress }),
    refetchInterval: 60_000,
    // Several campaigns can reward one vault. Show the one paying the most.
    select: ({ data }) =>
      [...data]
        .filter((c) => c.boostApyBps !== null && c.budgetExhausted !== true)
        .sort((a, b) => Number(b.boostApyBps! - a.boostApyBps!))[0] ?? null,
  });
}

export function RewardBadge({ vault }: { vault: Vault }) {
  const { address } = useAccount();
  const { data: campaign } = useVaultCampaign(vault, address);

  // No live campaign, or nothing worth showing: render nothing at all.
  if (!campaign) return null;

  return (
    <aside aria-label="Campaign rewards">
      <p>
        <strong>+{formatBps(campaign.boostApyBps)}</strong> reward APR, paid in{" "}
        {campaign.rewardToken.symbol}
      </p>
      {campaign.protocolApyBps !== null ? (
        <p>Vault APR {formatBps(campaign.protocolApyBps)}</p>
      ) : null}
      <p>{endsIn(campaign)}</p>
      <YourEarnings campaign={campaign} />
    </aside>
  );
}

function YourEarnings({ campaign }: { campaign: Campaign }) {
  const position = campaign.userPosition;
  if (!position || position.accumulatedRewards === 0n) return null;

  const { decimals, symbol } = campaign.rewardToken;
  return (
    <p>
      You've earned {formatToken(position.accumulatedRewards, decimals, symbol)}
      {position.claimable > 0n
        ? ` · ${formatToken(position.claimable, decimals, symbol)} ready to claim`
        : null}
    </p>
  );
}