useTapIntents

function useTapIntents(): {
  tapIntents: readonly OpenTapIntent[];
  status: "idle" | "loading" | "ready" | "error";
  error: Error | null;
  refresh: () => Promise<readonly OpenTapIntent[]>;
  approve: (
    tapIntentId: string,
    args?: { tapCode?: string },
  ) => Promise<TapIntentOutcome>;
  cancel: (tapIntentId: string) => Promise<TapIntentOutcome>;
};

"use client";
import { useState } from "react";
import { isEndstateApiError } from "@endstate-sdk/core/errors";
import { useTapIntents } from "@endstate-sdk/web/react";

function TapIntents() {
  const { tapIntents, approve, cancel } = useTapIntents();
  const [tapCode, setTapCode] = useState("");
  const [message, setMessage] = useState<string | null>(null);

  async function onApprove(id: string) {
    try {
      const { redirectUrl } = await approve(id, { tapCode });
      if (redirectUrl) window.location.assign(redirectUrl);
    } catch (error) {
      if (!isEndstateApiError(error)) throw error;
      setMessage(
        error.code === "tap_intent.code_incorrect"
          ? "Wrong code."
          : error.code === "tap_intent.tap_not_matched"
            ? "Tap the item again."
            : "This can no longer be confirmed.",
      );
    }
  }

  return (
    <ul>
      {tapIntents.map((tapIntent) => (
        <li key={tapIntent.id}>
          {tapIntent.title}
          {tapIntent.codeRequired && (
            <input
              inputMode="numeric"
              value={tapCode}
              onChange={(event) => setTapCode(event.target.value)}
            />
          )}
          <button onClick={() => onApprove(tapIntent.id)}>Confirm</button>
          <button onClick={() => cancel(tapIntent.id)}>Cancel</button>
        </li>
      ))}
      {message && <p>{message}</p>}
    </ul>
  );
}