First connection

import {
  prepareRelaySession,
  type GlyphPreparedRelaySession,
} from "@glyph-oss/connect";

let preparedRelay: GlyphPreparedRelaySession | null = null;
let preparation: Promise<void> | null = null;

function prepareForConnection() {
  if (preparation) return preparation;

  showStatus("Preparing connection…");
  preparation = prepareRelaySession()
    .then((session) => {
      preparedRelay = session;
      showStatus("Ready");
    })
    .catch(() => {
      showStatus("Connection setup is not ready yet. Try again.");
    })
    .finally(() => {
      preparation = null;
    });

  return preparation;
}

// Run on page load, or from pointer/focus/touch intent handlers.
void prepareForConnection();

import { k12, verify } from "@qubic.org/crypto";
import {
  GLYPH_MAINNET,
  createConnectRequest,
  createEnvelope,
  launchGlyphRequest,
  subscribeViaRelayV2,
} from "@glyph-oss/connect";

const APP_ORIGIN = "https://app.example.org";

export async function onConnectClick() {
  if (!preparedRelay) {
    showStatus("Preparing connection…");
    void prepareForConnection();
    return;
  }

  const relay = preparedRelay;
  preparedRelay = null; // use a prepared session once

  const request = createConnectRequest({
    type: "connect",
    dapp: { name: "Example app", origin: APP_ORIGIN },
    permissions: ["transfer", "sign_message"],
  });
  const envelope = createEnvelope(request, {
    callback: relay.callbackUrl,
    network: GLYPH_MAINNET, // explicit { id: "qubic:mainnet" }
  });

  const resultPromise = subscribeViaRelayV2(request, relay, {
    verification: {
      requireSigned: true,
      expectedRequestHash: envelope.request_hash,
      expectedNetwork: envelope.network,
      expectedDappOrigin: request.dapp.origin,
      expectedExp: request.exp ?? null,
      expectedCallbackUrl: relay.callbackUrl,
      verifySignature({ algorithm, payload, signature, publicKey }) {
        if (algorithm !== "qubic-schnorrq-sha256") return false;
        return verify(k12(payload, 32), signature, publicKey);
      },
    },
    onStatus(status) {
      if (status.state === "awaiting_approval") {
        showStatus("Continue in Glyph Wallet");
      }
    },
  });

  // Keep this call in the direct user-activation path.
  launchGlyphRequest(envelope);

  try {
    const result = await resultPromise;
    showResult(result);
  } catch {
    showStatus("The connection did not complete. Try again.");
    void prepareForConnection();
  }
}