Get started with WalletKit on the Web platform

This guide explains how to get started with WalletKit on the Web platform:

Install WalletKit
Initialize it
Configure basic parameters

You can find a full example code in the Example code section.

Alternatively, explore the complete demo wallet with WalletKit integration:

Demo wallet, deployed

Demo wallet, GitHub

Prerequisites

For reading blockchain data, WalletKit uses API providers. If you need to access higher RPS limits, obtain API keys from your preferred provider.

For example, you can use the official provider, TON Center: Get your TON Center API key.

It's recommended to get API keys for both TON networks: mainnet and testnet.

Install WalletKit

Install WalletKit in your web project:

npm i @ton/walletkit

Initialize the kit

To initialize WalletKit with the minimum required setup, take these steps:

Import the main class TonWalletKit and the Network object for the mandatory network configuration:
TypeScript
```
import {
  TonWalletKit,
  Network
} from '@ton/walletkit';
```
Initialize the kit by creating an instance of the TonWalletKit object and passing it the networks parameter: a list of networks to operate on. For each network, specify the preferred API provider and its key obtained in Prerequisites:
TypeScript
```
const kit = new TonWalletKit({
  networks: {
    [Network.mainnet().chainId]: {
      apiClient: {
        url: 'https://toncenter.com',
        key: '<MAINNET_API_KEY>',
      },
    },
    [Network.testnet().chainId]: {
      apiClient: {
        url: 'https://testnet.toncenter.com',
        key: '<TESTNET_API_KEY>',
      },
    },
  },
});
```
API providers allow WalletKit to read blockchain data — for example, to fetch account balances and query jettons and NFTs. API keys allow you to access higher RPS limits.

The mainnet is a production network: contracts and funds are real. Use the testnet for experiments, beta tests, and feature previews
Wait for the initialization to complete:
TypeScript
```
await kit.waitForReady();
```

In the previous step, you initialized WalletKit with the only required parameter: network configuration. There are also optional parameters you can pass on initialization — for a full list, see Configure parameters.

It's useful to add some of the optional settings right away. Add them to the same TonWalletKit call from Step 2:

deviceInfo: Core information and constraints of the wallet. Specify the wallet version:
TypeScript
```
import {
  createDeviceInfo
} from '@ton/walletkit';

const kit = new TonWalletKit({
  // ...other parameters...
  deviceInfo: createDeviceInfo({
    appVersion: '0.0.1',
  }),
});
```
For other settings, WalletKit will use default values. This includes supported wallet features, the maximum supported TON Connect protocol version, the human-readable name of your wallet, and the current platform ('browser').
walletManifest: The TON Connect's wallet manifest. To add it, call createWalletManifest(). This function provides initial defaults, but you may want to specify some custom values, such as the human-readable name of your wallet or its icon image URL. Learn more: Manifest.
TypeScript
```
import {
  createWalletManifest,
} from '@ton/walletkit';

const kit = new TonWalletKit({
  // ...other parameters...
  walletManifest: createWalletManifest(),
});
```
bridge: TON Connect's bridge settings. This is the main bridge for communication with dApps, capable of handling significant load. To self-host, see TON Connect bridge on GitHub.
TypeScript
```
const kit = new TonWalletKit({
  // ...other parameters...
  bridge: {
    bridgeUrl: 'https://connect.ton.org/bridge',
  },
});
```

Example code

Here is the full example code for initializing WalletKit with the minimum functional setup:

TypeScript

import {
  TonWalletKit,
  Network, 
  createDeviceInfo,
  createWalletManifest,
} from '@ton/walletkit';

const kit = new TonWalletKit({
  networks: {
    [Network.mainnet().chainId]: {
      apiClient: {
        url: 'https://toncenter.com',
        key: '<MAINNET_API_KEY>',
      },
    },
    [Network.testnet().chainId]: {
      apiClient: {
        url: 'https://testnet.toncenter.com',
        key: '<TESTNET_API_KEY>',
      },
    },
  },

  deviceInfo: createDeviceInfo({
    appVersion: '0.0.1',
  }),

  walletManifest: createWalletManifest(),

  bridge: {
    bridgeUrl: 'https://connect.ton.org/bridge',
  },
});

await kit.waitForReady();

Web only!

The given example must be invoked in browser environments only. To run it locally with Node.js or other JS runtimes, set storage.allowMemory to true. It enables a built-in storage adapter for non-browser environments that do not have localStorage available.

const kit = new TonWalletKit({
  // ...prior fields...
  storage: { allowMemory: true },
  // ...later fields...
});

Remember to disable this adapter in web environments or provide a dedicated storage adapter wrapper to switch between environments.

Next steps

After initializing WalletKit, you can do the following:

Configure more parameters: This guide covers all available parameters.
Initialize a wallet: This step is required for working with transactions.