useWhiskSwap

import { useWhiskSwap } from "@usewhisk/react";

type UseWhiskSwapResult = {
  state: SwapState;
  estimate: (input: SwapInput) => Promise<void>;
  swap: () => Promise<void>;
  back: () => void;
  reset: () => void;
};

type SwapInput = {
  chain: Chain;
  tokenIn: Token | string; // alias or contract address
  tokenOut: Token | string;
  amountIn: string;
  kitKey: string;
  slippageBps?: number; // optional, falls back to App Kit's default
  stopLimit?: string; // explicit min-out, overrides slippageBps
};

type SwapState =
  | { kind: "idle" }
  | { kind: "estimating" }
  | { kind: "review"; estimate: SwapEstimate }
  | { kind: "swapping"; estimate: SwapEstimate }
  | {
      kind: "succeeded";
      estimate: SwapEstimate;
      txHash?: string;
      explorerUrl?: string;
      amountOut?: string;
    }
  | { kind: "failed"; error: WhiskError };

"use client";
import { useState } from "react";
import { useWhiskSwap } from "@usewhisk/react";

export function MySwap({ kitKey }: { kitKey: string }) {
  const { state, estimate, swap, back, reset } = useWhiskSwap();
  const [amountIn, setAmountIn] = useState("");

  const onGetQuote = () =>
    estimate({
      chain: "Base",
      tokenIn: "USDC",
      tokenOut: "EURC",
      amountIn,
      kitKey,
    });

  if (state.kind === "succeeded") {
    return (
      <div>
        Done. Got {state.amountOut} {state.estimate.tokenOut}.{" "}
        <button onClick={reset}>Swap again</button>
      </div>
    );
  }

  if (state.kind === "failed") {
    return (
      <div>
        Failed: {state.error.message} <button onClick={reset}>Try again</button>
      </div>
    );
  }

  if (state.kind === "review") {
    return (
      <div>
        <p>You'll receive ≈ {state.estimate.amountOut}.</p>
        <button onClick={back}>Back</button>
        <button onClick={swap}>Confirm</button>
      </div>
    );
  }

  return (
    <div>
      <input
        value={amountIn}
        onChange={(e) => setAmountIn(e.target.value)}
        placeholder="0.00"
      />
      <button onClick={onGetQuote} disabled={state.kind !== "idle"}>
        {state.kind === "estimating" ? "Quoting…" : "Get quote"}
      </button>
      {state.kind === "swapping" ? <p>Swapping…</p> : null}
    </div>
  );
}