Unvault an item

"use client";
import { EndstateWalletError } from "@endstate-sdk/web";
import { useCancelUnvault, useRequestUnvault } from "@endstate-sdk/web/react";
import { useState } from "react";

// Inside an <EndstateProvider> with a wallet configured.
// requestId is the id vault() returned, kept by your server.
// requested is whether the owner already asked: your server records it when
// requestUnvault resolves and clears it when cancelUnvault resolves.
function UnvaultPrompt({
  requestId,
  requested,
}: {
  requestId: string;
  requested: boolean;
}) {
  const request = useRequestUnvault();
  const cancel = useCancelUnvault();
  // Starts on the cancel when the owner already asked, such as after a reload.
  const [asked, setAsked] = useState(requested);

  // Each hook's error shows a refusal, so the clicks drop the rejection.
  const ask = () =>
    request.requestUnvault({ requestId }).then(
      () => setAsked(true),
      () => {},
    );
  // Once the cancel lands, offer the unvault again.
  const keep = () =>
    cancel.cancelUnvault({ requestId }).then(
      () => setAsked(false),
      () => {},
    );

  if (!asked) {
    return (
      <>
        <button disabled={request.status === "pending"} onClick={ask}>
          Send this item back to me
        </button>
        {request.error && <p role="alert">{request.error.message}</p>}
      </>
    );
  }
  return (
    <>
      <button disabled={cancel.status === "pending"} onClick={keep}>
        Keep this item in the vault
      </button>
      {cancel.error && <p role="alert">{whyNotCancelled(cancel.error)}</p>}
    </>
  );
}

function whyNotCancelled(error: Error): string {
  if (
    !(error instanceof EndstateWalletError) ||
    error.code !== "submission.not_executable"
  ) {
    return error.message;
  }
  const cancellableAt = error.details?.cancellable_at;
  if (typeof cancellableAt === "string") {
    const opens = new Date(cancellableAt).toLocaleDateString();
    return `Your item is ready to ship. You can cancel from ${opens} if it has not shipped by then.`;
  }
  return "This cannot be cancelled right now. If you only just asked for the item, try again in a moment.";
}

// `wallet` came from createWallet(); `requestId` from your server.
await wallet.requestUnvault(requestId);

// Later, while the unvault waits:
await wallet.cancelUnvault(requestId);