Vault an item

"use client";
import { useCancelVault, useCanVault, useVault } from "@endstate-sdk/web/react";

// Inside an <EndstateProvider> with a wallet configured.
function VaultPrompt() {
  const { data: eligibility } = useCanVault();
  const { vault, status } = useVault();
  const { cancelVault, status: cancelStatus } = useCancelVault();

  // canVault names the open request after vault(), and after a reload.
  const requestId = eligibility?.requestId;
  if (requestId) {
    return (
      <button
        disabled={cancelStatus === "pending"}
        onClick={() => cancelVault({ requestId })}
      >
        Cancel the vault request
      </button>
    );
  }
  if (!eligibility?.vaultable || !eligibility.vault) return null;
  const { id, name } = eligibility.vault;
  return (
    <button
      disabled={status === "pending"}
      onClick={() => vault({ vaultId: id })}
    >
      Vault this item with {name}?
    </button>
  );
}

// `session` came from a captured, verified tap; `wallet` from createWallet().
const { vaultable, vault, requestId } =
  await session.vaultRequests.eligibility();
if (vaultable && vault) {
  const request = await wallet.vault({ session, vaultId: vault.id });
  request.status; // "pending"

  // Later, until the item is vaulted:
  await wallet.cancelVault(request.id);
} else if (requestId) {
  // An earlier visit opened a request the owner can still cancel.
  await wallet.cancelVault(requestId);
}