UBNet wallet connector

API version: 6.4.1 · SDK version: 6.5.3 · Docs version: 6.5.3

UBNet wallet connector 2.7.6 supports two browser integration modes from the same versioned module:

• <ubnet-wallet-connect> provides UBNet's ready-made button and Shadow DOM wallet picker.
• createWalletConnector() is the headless API for ENS/static templates and third-party interfaces. It creates no modal when a discovered wallet ID is passed to connect().

Plain JavaScript headless integration

<button id="connect" type="button">Connect wallet</button>
<button id="disconnect" type="button" hidden>Disconnect</button>
<select id="wallets" aria-label="Wallet"></select>
<p id="status"></p>

<script type="module">
  import { createWalletConnector } from "./wallet/v1/ubnet-wallet-2.7.6.js";

  const wallet = createWalletConnector({
    // Add projectId: "YOUR_REOWN_PROJECT_ID" to enable WalletConnect.
    appName: "My ENS site",
    appUrl: location.origin,
  });
  const connectButton = document.querySelector("#connect");
  const disconnectButton = document.querySelector("#disconnect");
  const walletSelect = document.querySelector("#wallets");
  let session = null;

  wallet.subscribe((snapshot) => {
    document.querySelector("#status").textContent = snapshot.error || snapshot.state;
    connectButton.disabled = snapshot.connecting;
    connectButton.hidden = Boolean(snapshot.session);
    disconnectButton.hidden = !snapshot.session;
  });

  await wallet.ready(); // also attempts persisted-session reconnection
  const choices = await wallet.discoverWallets();
  walletSelect.replaceChildren(...choices.map((choice) => new Option(choice.name, choice.id)));

  connectButton.addEventListener("click", async () => {
    // Keeping connect() in this click handler preserves the wallet's required user gesture.
    session = await wallet.connect(walletSelect.value);
    console.log(session.address, session.chainId, session.walletId);
    console.log(session.connectorId, session.connectorName);
    const signature = await session.signer.signMessage("Sign in to my ENS site");
    console.log(signature);
  });
  disconnectButton.addEventListener("click", async () => {
    await wallet.disconnect();
    session = null;
  });
</script>

Call connect() from the user's click or tap after they choose a wallet. Calling connect() without an ID opens UBNet's built-in picker.

Public API

ready() initializes EIP-6963 discovery and attempts automatic reconnection. discoverWallets() returns serializable descriptors with id, connectorId, name, type, rdns, icon, installed, and walletConnect. Pass descriptor id to connect(id) for a UI-free connection. reconnect() explicitly retries a persisted session, and disconnect() clears the active connection.

getSnapshot() and subscribe(listener) expose current state. Each snapshot includes state (initializing, disconnected, connecting, connected, or error), ready, connecting, modalOpen, wallets, session, and error. Discovery changes and account changes both notify subscribers.

The connected session exposes address, chainId, stable walletId, library connectorId, connectorName, an EIP-1193 provider, and a normalized signer with getAddress() and signMessage().

The factory is a page singleton, so configure it once before using the web component or requesting it elsewhere.