Add wallet connectors

Wire up a connector so AppKit can talk to a wallet. A connector is the transport that carries requests to the wallet and responses back — it does not sign, and is not itself a wallet. Signing always happens inside the user’s wallet application. AppKit cares about the connector’s id, type, metadata, and the methods it exposes (connectWallet, disconnectWallet, getConnectedWallets, destroy). The protocol underneath is hidden.

Before you begin

Install AppKit first. See Prepare your project.

Create the AppKit instance

The AppKit constructor takes a connectors array of connector factories such as createTonConnectConnector. A single AppKit instance can hold more than one connector, and the user picks at connect time. The example below registers a single TON Connect connector — enough to start wiring up the connect button.

// appkit.ts
import { AppKit, createTonConnectConnector } from '@ton/appkit';

export const appKit = new AppKit({
  connectors: [
    createTonConnectConnector({
      tonConnectOptions: {
        manifestUrl: 'https://example.com/tonconnect-manifest.json',
      },
    }),
  ],
});

Render a connect button

Drop <TonConnectButton /> somewhere in the tree to open the wallet picker. The button assumes the React providers are already mounted — see Installation → Wrap the application.

For most apps, this drop-in component is the right starting point. <TonConnectButton /> from @ton/appkit-react owns the connect modal, the session lifecycle (open, restore on reload, expire), and the connected-address display. When the UI needs a tailored wallet list, use useConnectors and useConnect directly. That pattern is documented in Connect to a wallet.

import { TonConnectButton } from '@ton/appkit-react';

export function Header() {
  return <TonConnectButton />;
}

Tips

Do not assume every connector supports every flow. Check capability before sending a request and treat user rejection as a normal outcome on every action. Connector errors and chain errors are different failure classes and need different recovery paths.

What to do next

• Continue to Add networks to configure mainnet alongside testnet and pick an API client.
• For the custom-selector pattern, vanilla JS connect, and error handling, see Connect to a wallet.