Get Going

This walkthrough covers how to detect the UKey Wallet TON Connect Provider, establish a session, read the connection results and monitor the wallet status.

ℹ️

UKey Wallet implements the TON Connect 2.0 protocol and can access DApps and SDKs that support TON Connect.

---

Find Provider

// Detect the UKey Wallet TON provider
const provider = window.$ukey?.tonconnect;

if (!provider) {
  throw new Error("UKey Wallet TON provider not detected");
}

// Inspect device and wallet details
console.log("Detected device:", provider.deviceInfo);
console.log("Detected wallet:", provider.walletInfo);
console.log("Protocol revision:", provider.protocolVersion); // Reference value: 2

---

Link Wallet

// Basic connection flow
const connectEvent = await provider.connect();

if (connectEvent.event === "connect") {
  const addressItem = connectEvent.payload.items.find(
    (item) => item.name === "ton_addr",
  );
  console.log("Connection established:", addressItem.address);
} else {
  console.error("Unable to connect:", connectEvent.payload.message);
}

---

Connect using Manifest

The production environment should provide a manifest URL that allows the wallet to display the trusted application name, icon, and privacy link:

const connectRequest = {
  manifestUrl: "https://sampleapp.example/tonconnect-manifest.json",
  items: [
    { name: "ton_addr" },
    { name: "ton_proof", payload: "demo-proof-check" },
  ],
};

const connectEvent = await provider.connect(2, connectRequest);

if (connectEvent.event === "connect") {
  const addressItem = connectEvent.payload.items.find(
    (i) => i.name === "ton_addr",
  );
  const proofItem = connectEvent.payload.items.find(
    (i) => i.name === "ton_proof",
  );

  console.log("Resolved address:", addressItem.address);
  console.log("Returned proof:", proofItem?.proof);
}

---

Manifest format

Create tonconnect-manifest.json in the application root directory:

{
  "url": "https://sampleapp.example",
  "name": "Your App Name",
  "iconUrl": "https://sampleapp.example/icon.png",
  "termsOfUseUrl": "https://sampleapp.example/terms",
  "privacyPolicyUrl": "https://sampleapp.example/privacy"
}

---

resume session

After refreshing the page, you can try to restore the previous session:

const connectEvent = await provider.restoreConnection();

if (connectEvent.event === "connect") {
  console.log("Previous session restored");
}

---

Unlink

await provider.disconnect();

---

Event Flow

provider.listen((event) => {
  console.log("Wallet callback event:", event);
});

// Or use a dedicated event listener
provider.on("accountChanged", (address) => {
  if (address) {
    console.log("Active account changed:", address);
  } else {
    console.log("Connection closed");
  }
});

provider.on("disconnect", () => {
  console.log("Wallet session disconnected");
});

---

Using TON Connect SDK

React projects can use the TON Connect SDK. UKey Wallet will appear as a compatible wallet in the connection process:

npm install @tonconnect/ui-react

import { TonConnectUIProvider, TonConnectButton } from "@tonconnect/ui-react";

function TonConnectShell() {
  return (
    <TonConnectUIProvider manifestUrl="https://sampleapp.example/tonconnect-manifest.json">
      <TonConnectButton />
      <YourApp />
    </TonConnectUIProvider>
  );
}

UKey Wallet will be automatically detected by TON Connect SDK.