Skip to content

Frontend dApp Guide

This guide builds a minimal browser application with Vite and kondor-js. The complete project is intentionally small enough to run locally or inspect in StackBlitz.

Install and run

npm install
npm start

The page can load without Kondor. Wallet operations require the extension in the same browser context and explicit user approval.

Wallet page initialization

export function initializeWalletPage(browser = globalThis) {
  const available = isKondorAvailable(browser);
  const status = browser.document.querySelector("#status");
  status.textContent = available
    ? "Kondor detected. Connect when ready."
    : "Kondor is not available in this browser.";
  return available;
}

View complete file · Run example

The unavailable state is part of the application, not an unhandled error.

Application controller

export function createApp(elements, client = new KondorClient()) {
  async function connect() {
    elements.status.textContent = "Waiting for Kondor approval…";
    const { account, chainId } = await client.connect();
    elements.account.textContent = account;
    elements.network.textContent = chainId;
    elements.status.textContent = "Connected";
  }

  async function sign() {
    elements.status.textContent = "Review the message in Kondor…";
    const { signature } = await client.signMessage(elements.message.value);
    elements.signature.textContent = String(signature);
    elements.status.textContent = "Message signed";
  }

  elements.connect.addEventListener("click", () =>
    connect().catch((error) => {
      elements.status.textContent = error.message;
    })
  );
  elements.sign.addEventListener("click", () =>
    sign().catch((error) => {
      elements.status.textContent = error.message;
    })
  );
  return { connect, sign };
}

View complete file · Run example

Connect and sign are bound to buttons so the approval requests follow user gestures. Rejections are displayed in the status element.

Vite configuration

export default defineConfig({
  server: {
    host: "0.0.0.0",
    port: 5173,
  },
  preview: {
    host: "0.0.0.0",
    port: 4173,
  },
});

View complete file · Run example

Vite provides the local development server and production build without the obsolete Webpack polyfill configuration used by earlier versions of this page.

Verify the project

npm test
npm run build

The tests mock the wallet boundary; they do not trigger an extension prompt. Manual testing should cover unavailable wallet, rejected approval, account changes, network changes, and a successful local message signature.