Deposit Button

"use client";

import type { Campaign } from "@boostxyz/tbi-sdk";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { parseUnits } from "viem";
import { useAccount, usePublicClient, useSwitchChain, useWalletClient } from "wagmi";
import { tbi } from "@/lib/tbi";

/** Is this campaign's target registered with the Forwarder? */
export function useForwarderTarget(campaign: Campaign) {
  return useQuery({
    queryKey: ["tbi", "forwarder", "targets"],
    queryFn: () => tbi.forwarder.targets(),
    staleTime: Infinity,
    select: (targets) =>
      targets.find(
        (t) =>
          t.chainId === campaign.target.chainId &&
          t.targetAddress === campaign.target.address,
      ) ?? null,
  });
}

export function DepositButton({ campaign }: { campaign: Campaign }) {
  // Deposits happen on the EVENT chain, where the position lives.
  const eventChainId = campaign.target.chainId;
  const { address, chainId: walletChainId } = useAccount();
  const { data: walletClient } = useWalletClient({ chainId: eventChainId });
  const publicClient = usePublicClient({ chainId: eventChainId });
  const { switchChain, isPending: switching } = useSwitchChain();
  const { data: target, isPending: loadingTarget } = useForwarderTarget(campaign);
  const [amount, setAmount] = useState("");

  const deposit = useMutation({
    mutationFn: async () => {
      if (!walletClient || !publicClient || !address || !target) {
        throw new Error("Wallet not ready");
      }
      const built = await tbi.forwarder.buildDeposit({
        target: campaign.target,
        amount: parseUnits(amount, target.acceptedToken.decimals),
        sender: address,
      });

      // One or two transactions: an approval only if the allowance is short,
      // then the deposit. Each must confirm before the next is sent.
      let hash: `0x${string}` | undefined;
      for (const tx of built.transactions) {
        hash = await walletClient.sendTransaction({
          account: address,
          chain: walletClient.chain,
          to: tx.to,
          data: tx.data,
          value: tx.value,
        });
        await publicClient.waitForTransactionReceipt({ hash });
      }
      return hash;
    },
  });

  if (!campaign.requiresForwarderDeposit) return null;
  if (loadingTarget) return <p>Checking deposit route…</p>;
  if (!target) return <p>Direct deposits are not available for this vault.</p>;
  if (!address) return <p>Connect a wallet to deposit.</p>;

  if (walletChainId !== eventChainId) {
    return (
      <button disabled={switching} onClick={() => switchChain({ chainId: eventChainId })}>
        Switch network to deposit
      </button>
    );
  }

  if (deposit.isSuccess) {
    return <p>Deposited. This position now counts toward the campaign.</p>;
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        deposit.mutate();
      }}
    >
      <input
        inputMode="decimal"
        placeholder={`Amount in ${target.acceptedToken.symbol}`}
        value={amount}
        onChange={(event) => setAmount(event.target.value)}
      />
      <button type="submit" disabled={deposit.isPending || amount === "" || !walletClient}>
        {deposit.isPending ? "Depositing…" : `Deposit ${target.acceptedToken.symbol}`}
      </button>
      {deposit.error ? <p role="alert">{deposit.error.message}</p> : null}
    </form>
  );
}