Transfer ownership

"use client";
import {
  EndstateProvider,
  useSession,
  useTransfer,
} from "@endstate-sdk/web/react";

// Mount the provider once, above the tree. With autoVerify on (the default) the
// landing tap is captured and verified on mount, so useSession() already holds
// the item being moved.
function App() {
  return (
    <EndstateProvider publishableKey="end_pk_...">
      <TransferPanel />
    </EndstateProvider>
  );
}

function TransferPanel() {
  const { item } = useSession();
  const { transfer, status, data, error } = useTransfer();

  async function onTransfer() {
    const address = "0x..."; // where the item is going
    // unit_id comes from the session scope, so you pass only the recipient.
    // wait defaults false: Endstate prepares and authorizes the transaction and
    // hands it back - it never submits a transfer for you.
    const prepared = await transfer({ to: address });
    prepared.status; // "prepared"

    // The current owner broadcasts prepared.transaction with their own signer.
  }

  return (
    <div>
      <button onClick={onTransfer} disabled={status === "preparing"}>
        Transfer {item?.name ?? "item"}
      </button>
      {data && <p>Transfer {data.status}</p>}
      {error && <p role="alert">{error.message}</p>}
    </div>
  );
}

// `session` came from a captured, verified tap of the item being moved.
// `recipientAddress` is where the item is going.
const transfer = await session.transfers.create({ to: recipientAddress });
transfer.status; // "prepared"

// Endstate authorized the move but never submits a transfer for you. The
// current owner broadcasts transfer.transaction with their own signer.