Combine button + slip drawer

import {useEffect, useState} from "react";
import {useAccount} from "wagmi";
import {parseUsdc, formatUsdc, type PickLeg, type QuoteResponse} from "@parlays-live/taker";
import {
  useTakerClient,
  useSubmitParlay,
  type useParlaySlip,
  type ParlayEvent,
} from "@parlays-live/taker/react";

type Slip = ReturnType<typeof useParlaySlip>;

type Props = {
  open: boolean;
  onClose: () => void;
  slip: Slip;
  /// Host-supplied labels, e.g. from loadCards() info map:
  /// (marketId, outcome) => "France champion: YES"
  labelFor: (marketId: number, outcome: number) => string;
  /// Optional analytics tap; see the Analytics guide.
  onEvent?: (e: ParlayEvent) => void;
};

export function ParlayDrawer({open, onClose, slip, labelFor, onEvent}: Props) {
  const client = useTakerClient();
  const {address} = useAccount();
  const {submit, status, error, result, reset} = useSubmitParlay({onEvent});

  // stake as a string for the input; parsed to raw 6dp bigint for everything else
  const [stakeInput, setStakeInput] = useState("25");
  let stake = 0n;
  try {
    stake = stakeInput ? parseUsdc(stakeInput) : 0n;
  } catch {
    stake = 0n;
  }

  // debounced preview quote
  const [preview, setPreview] = useState<QuoteResponse | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const legsKey = slip.legs.map((l) => `${l.marketId}:${l.outcome}`).join(",");
  useEffect(() => {
    setPreview(null);
    setPreviewError(null);
    if (!address || slip.legs.length === 0 || stake <= 0n) return;
    const legs: PickLeg[] = slip.legs;
    const t = setTimeout(() => {
      client
        .quote(legs, stake, address)
        .then(setPreview)
        .catch((e: unknown) => setPreviewError(e instanceof Error ? e.message : "quote failed"));
    }, 400);
    return () => clearTimeout(t);
  }, [client, address, legsKey, stake.toString()]);

  const oddsX = preview ? (Number(preview.quote.combinedOddsBps) / 10000).toFixed(2) : null;
  const corr = preview?.correlation;
  const reduction = corr ? BigInt(corr.reductionBps) : 0n;
  const busy = status !== "idle" && status !== "done" && status !== "error";

  const statusLabel: Record<typeof status, string> = {
    idle: `Place parlay`,
    approving: "Approving USDC...",
    quoting: "Locking odds...",
    signing: "Sign in wallet...",
    submitting: "Submitting...",
    done: "Parlay placed",
    error: "Try again",
  };

  return (
    <aside className="parlay-drawer" data-open={open} aria-label="Parlay slip">
      <header className="drawer-head">
        <h2>Parlay slip ({slip.count})</h2>
        <button onClick={onClose} aria-label="Close">x</button>
      </header>

      {/* legs */}
      <ul className="slip-legs">
        {slip.legs.map((leg) => (
          <li key={leg.marketId} className="slip-leg">
            <span>{labelFor(leg.marketId, leg.outcome)}</span>
            <button onClick={() => slip.remove(leg.marketId)} aria-label="Remove leg">
              remove
            </button>
          </li>
        ))}
        {slip.count === 0 && <li className="slip-empty">Tap outcomes to add legs</li>}
      </ul>

      {/* stake */}
      <label className="slip-stake">
        Stake (USDC)
        <input
          inputMode="decimal"
          value={stakeInput}
          onChange={(e) => setStakeInput(e.target.value)}
          disabled={busy}
        />
      </label>

      {/* payout preview */}
      {preview && (
        <div className="slip-summary">
          <div>
            <span>Combined odds</span>
            <strong>{oddsX}x</strong>
          </div>
          <div>
            <span>Payout if all hit</span>
            <strong>${formatUsdc(BigInt(preview.quote.payout))}</strong>
          </div>
          {corr && reduction > 0n && (
            <div className="slip-corr">
              <span>Correlation adjustment</span>
              <strong>-{(Number(corr.reductionBps) / 10000).toFixed(2)}x</strong>
            </div>
          )}
        </div>
      )}
      {previewError && <p className="slip-error">{previewError}</p>}

      {/* submit */}
      <button
        className="slip-submit"
        disabled={!address || slip.count < 1 || stake <= 0n || busy || !!previewError}
        onClick={() => {
          if (status === "done" || status === "error") reset();
          submit(slip.legs, stake).then(() => slip.clear()).catch(() => undefined);
        }}
      >
        {statusLabel[status]}
      </button>

      {status === "done" && result && (
        <p className="slip-done">Parlay #{result.parlayId} is live. Tx: {result.txHash}</p>
      )}
      {status === "error" && error && <p className="slip-error">{error}</p>}
    </aside>
  );
}