> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ton.org/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.ton.org/feedback

```json
{
  "path": "/ecosystem/walletkit/web/init",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# How to initialize the TON Connect's WalletKit on the Web platform

export const Aside = ({type = "note", title = "", icon = "", iconType = "regular", children}) => {
  const asideVariants = ["note", "tip", "caution", "danger"];
  const asideComponents = {
    note: {
      outerStyle: "border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10",
      innerStyle: "text-sky-900 dark:text-sky-200",
      calloutType: "note",
      icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-sky-500" aria-label="Note">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path>
        </svg>
    },
    tip: {
      outerStyle: "border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10",
      innerStyle: "text-emerald-900 dark:text-emerald-200",
      calloutType: "tip",
      icon: <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="text-emerald-600 dark:text-emerald-400/80 w-3.5 h-auto" aria-label="Tip">
          <path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path>
        </svg>
    },
    caution: {
      outerStyle: "border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10",
      innerStyle: "text-amber-900 dark:text-amber-200",
      calloutType: "warning",
      icon: <svg className="flex-none w-5 h-5 text-amber-400 dark:text-amber-300/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-label="Warning">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
    },
    danger: {
      outerStyle: "border-red-500/20 bg-red-50/50 dark:border-red-500/30 dark:bg-red-500/10",
      innerStyle: "text-red-900 dark:text-red-200",
      calloutType: "danger",
      icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" className="text-red-600 dark:text-red-400/80 w-4 h-4" aria-label="Danger">
          <path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12l176.6 0c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path>
        </svg>
    }
  };
  let variant = type;
  let gotInvalidVariant = false;
  if (!asideVariants.includes(type)) {
    gotInvalidVariant = true;
    variant = "danger";
  }
  const iconVariants = ["regular", "solid", "light", "thin", "sharp-solid", "duotone", "brands"];
  if (!iconVariants.includes(iconType)) {
    iconType = "regular";
  }
  return <>
      <div className={`callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border ${asideComponents[variant].outerStyle}`} data-callout-type={asideComponents[variant].calloutType}>
        <div className="mt-0.5 w-4" data-component-part="callout-icon">
          {}
          {icon === "" ? asideComponents[variant].icon : <Icon icon={icon} iconType={iconType} size={14} />}
        </div>
        <div className={`text-sm prose min-w-0 w-full ${asideComponents[variant].innerStyle}`} data-component-part="callout-content">
          {gotInvalidVariant ? <p>
              <span className="font-bold">
                Invalid <code>type</code> passed!
              </span>
              <br />
              <span className="font-bold">Received: </span>
              {type}
              <br />
              <span className="font-bold">Expected one of: </span>
              {asideVariants.join(", ")}
            </p> : <>
              {title && <p className="font-bold">{title}</p>}
              {children}
            </>}
        </div>
      </div>
    </>;
};

Before initializing the TON Connect's WalletKit, install it in the web project:

```shell theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
npm i @ton/walletkit
```

Alternatively, explore the complete demo wallet with WalletKit integration:

<Columns cols={2}>
  <Card title="Demo wallet, deployed" icon="link" arrow="true" horizontal="true" href="https://walletkit-demo-wallet.vercel.app" />

  <Card title="Demo wallet, GitHub" icon="github" arrow="true" horizontal="true" href="https://github.com/ton-connect/kit/tree/main/apps/demo-wallet" />
</Columns>

## Initialization

The basic kit initialization consists of creating a corresponding object by passing it a minimal set of necessary arguments: TON networks to operate on.

Yet, it is often useful to configure optional parameters right away — the following example also specifies core wallet information, TON Connect manifest, and bridge settings.

```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
import {
  // Main class
  TonWalletKit,
  // Network object
  Network,
  // Helper functions
  createDeviceInfo,
  createWalletManifest,
} from '@ton/walletkit';

// 0. Create a kit object.
const kit = new TonWalletKit({
  // 1. Configure networks.
  networks: {
    // Production network. All contracts and funds are real.
    [Network.mainnet().chainId]: {
      apiClient: {
        // Most commonly used, official API provider.
        url: 'https://toncenter.com',

        // A key to access higher RPS limits.
        // Get it from https://t.me/toncenter
        key: '<MAINNET_API_KEY>',
      },
    },
    // Testing network. For experiments, beta tests, and feature previews.
    [Network.testnet().chainId]: {
      apiClient: {
        url: 'https://testnet.toncenter.com',
        key: '<TESTNET_API_KEY>',
      },
    },
  },

  // 2. Specify core information and constraints of the given wallet.
  deviceInfo: createDeviceInfo({
    // Version of your wallet
    appVersion: '0.0.1',

    // The rest of the params will have default values set for you,
    // including the features your wallet should support,
    // maximum supported TON Connect protocol version,
    // human-readable name of your wallet,
    // and a current platform ('browser').
  }),

  // 3. Specify the TON Connect's wallet manifest.
  //    The following 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.
  walletManifest: createWalletManifest(),

  // 4. Specify the TON Connect's bridge settings
  bridge: {
    // The main TON Connect bridge for dApp communication.
    // It is capable to withstand significant load.
    //
    // To self-host, see https://github.com/ton-connect/bridge
    bridgeUrl: 'https://connect.ton.org/bridge',
  },
});

// 5. Finally, wait for the initialization to complete
await kit.waitForReady();
```

See also: [TON Connect's wallet manifest](/ecosystem/ton-connect/manifest#wallet-manifest).

<Aside type="caution" title="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.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  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](#param-storage) wrapper to switch between environments.
</Aside>

## Configuration parameters

### Required

<ParamField path="networks" type="Record<CHAIN, NetworkConfig>" required>
  For one or more TON networks, configure their respective API or RPC providers to interact with.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import { Network } from '@ton/walletkit';

  new TonWalletKit({
    networks: {
      // Production network. All contracts and funds are real.
      [Network.mainnet().chainId]: { // "-239"
        apiClient: {
          // Most commonly used, official API provider.
          //
          // To self-host, see:
          // * Real-time API: https://github.com/toncenter/ton-http-api-cpp
          // * Indexer: https://github.com/toncenter/ton-indexer
          // It is important to put real-time API under `/api/v2` route and indexer API under `/api/v3` route.
          url: 'https://toncenter.com',

          // Optional key to access higher RPS limits.
          key: '<MAINNET_API_KEY>',
        },
      },
      // Testing network. For experiments, beta tests, and feature previews.
      [Network.testnet().chainId]: { // "-3"
        apiClient: {
          url: 'https://testnet.toncenter.com',
          key: '<TESTNET_API_KEY>',
        },
      },
    },
    // ...later fields...
  });
  ```

  It is also possible to provide an entirely custom provider with its own `ApiClient` interface implementation.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import { Network } from '@ton/walletkit';

  new TonWalletKit({
    networks: {
      [Network.testnet().chainId]: { // "-3"
        apiClient: /*  A complete ApiClient interface implementation */,
      },
    },
    // ...later fields...
  });
  ```
</ParamField>

### Optional

<ParamField path="deviceInfo" type="DeviceInfo">
  Core information and constraints of the given wallet. If not provided, defaults will be used.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface DeviceInfo {
    // Name of the wallet.
    appName: string;

    // The platform it works on. Select 'browser' for the web wallets.
    platform: 'iphone' | 'ipad' | 'android' | 'windows' | 'mac' | 'linux' | 'browser';

    // The current wallet version.
    appVersion: string;

    // Latest protocol version to use.
    maxProtocolVersion: number;

    // Which features are supported in the wallet.
    features: Feature[];
  }
  ```

  There, `Feature` type is defined as:

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  type Feature =
    | {
        // Wallet can send transactions.
        name: "SendTransaction";

        // Max number of messages that can be sent in a single transaction.
        // Depends on the TON wallet used, because different kinds can handle
        // different number of messages. For example,
        // - ledger wallet would only handle 1 message per transaction
        // - wallet v4r2 handles up to 4 messages
        // - wallet v5r1 handles up to 255 messages
        maxMessages: number;

        // Are messages sending extra-currencies supported?
        extraCurrencySupported?: boolean;
      }
    | {
        // Wallet can sign data.
        name: "SignData";

        // A type of data to sign.
        // Either of: "text", "binary", "cell".
        types: SignDataType[];
      }
  ```

  The `maxMessages` number depends on the TON wallet used, because every wallet has its own limit on the volume of messages.

  For example,

  * Ledger wallet would only handle 1 message per transaction
  * Wallet `v4r2` handles up to 4 messages
  * Wallet `v5r1` handles up to 255 messages
</ParamField>

<ParamField path="walletManifest" type="WalletInfo">
  How your wallet interacts with the TON Connect. If not provided, defaults will be used. This field is closely related to the [corresponding JSON manifest file](/ecosystem/ton-connect/manifest#wallet-manifest).

  ```ts expandable theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface WalletInfo {
    /**
     * Human-readable name of the wallet.
     */
    name: string;

    /**
     * ID of the wallet, equals to the `appName` property of the `deviceInfo`.
     */
    appName: string;

    /**
     * Url to the icon of the wallet. Resolution 288×288px. On a non-transparent background, without rounded corners. PNG format.
     */
    imageUrl: string;

    /**
     * Will be used in the protocol later.
     */
    tondns?: string;

    /**
     * Info or landing page of your wallet. It may be useful for TON newcomers.
     */
    aboutUrl: string;

    /**
     * List of features supported by the wallet.
     */
    features?: Feature[];

    /**
     * OS and browsers where the wallet could be installed
     */
    platforms: ('ios' | 'android' | 'macos' | 'windows' | 'linux' | 'chrome' | 'firefox' | 'safari')[];

    /**
     * Base part of the wallet universal url. The link should support TON Connect parameters: https://github.com/ton-connect/docs/blob/main/bridge.md#universal-link.
     */
    universalLink: string;

    /**
     * Native wallet app deep link. The link should support TON Connect parameters: https://github.com/ton-connect/docs/blob/main/bridge.md#universal-link.
     */
    deepLink?: string;

    /**
     * Url of the wallet's implementation of the HTTP bridge: https://github.com/ton-connect/docs/blob/main/bridge.md#http-bridge.
     */
    bridgeUrl: string;

    // JS-injectable wallet information

    /**
     * If the wallet handles JS Bridge connection, specifies the binding for the bridge object accessible through window. Example: the key "tonkeeper" means the bridge can be accessed as window.tonkeeper.
     */
    jsBridgeKey: string;

    /**
     * Indicates if the wallet currently is injected to the webpage.
     */
    injected: boolean;

    /**
     * Indicates if the dapp is opened inside this wallet's browser.
     */
    embedded: boolean;
  }
  ```
</ParamField>

<ParamField path="bridge" type="BridgeConfig">
  Connectivity options: either an HTTP or JavaScript bridge setup. The former's `bridgeUrl` points to the publicly exposed bridge URL, while the latter's `jsBridgeKey` points to the property name within the `window` object on the same web page.

  Bridges are used for dApp communication — if the dApp exists in the same web environment as the wallet, then the JavaScript bridge is enough. Otherwise, use an HTTP bridge setup.

  <Aside>
    For HTTP bridge setups, use a publicly available and production-ready bridge deployed at `https://connect.ton.org/bridge`.
  </Aside>

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface BridgeConfig {
    // Defaults to `walletInfo`'s `bridgeUrl`, if it exists
    bridgeUrl?: string;

    // Defaults to true if `walletInfo`'s `jsBridgeKey` exists
    enableJsBridge?: boolean;

    // Defaults to `walletInfo`'s `jsBridgeKey`, if it exists
    jsBridgeKey?: string;

    // Defaults to false
    disableHttpConnection?: boolean;

    // Settings for bridge-sdk
    heartbeatInterval?: number;
    reconnectInterval?: number;
    maxReconnectAttempts?: number;
  }
  ```
</ParamField>

<ParamField path="storage" type="StorageConfig | StorageAdapter">
  How to store intermediate events.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // Either a small object:
  interface StorageConfig {
    prefix?: string;
    maxRetries?: number;
    retryDelay?: number;
    allowMemory?: boolean;
  }

  // Or a complete StorageAdapter interface implementation:
  interface StorageAdapter {
    get(key: string): Promise<string | null>;
    set(key: string, value: string): Promise<void>;
    remove(key: string): Promise<void>;
    clear(): Promise<void>;
  }
  ```
</ParamField>

<ParamField path="eventProcessor" type="EventProcessorConfig">
  How TON Connect events are processed. This is useful for background scripts in browser extensions that process incoming events and log them, but do so outside a queue.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface EventProcessorConfig {
    disableEvents?: boolean;

    // If true, transaction events will not be emulated,
    // and their `preview` field will be undefined.
    disableTransactionEmulation?: boolean;
  }
  ```
</ParamField>

<ParamField path="analytics" type="AnalyticsConfig">
  Collect and gather analytical data.

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface AnalyticsConfig {
    enabled?: boolean;

    // A web URL to send analytics data to.
    endpoint?: string;
  }
  ```
</ParamField>

<ParamField path="dev" type="object">
  Extra configuration used when developing WalletKit itself. Irrelevant in other cases.
</ParamField>

## Next steps

<Columns cols={2}>
  <Card title="Manage TON wallets" icon="wallet" horizontal="true" href="/ecosystem/walletkit/web/wallets" />

  <Card title="Handle connections" icon="plug" horizontal="true" href="/ecosystem/walletkit/web/connections" />
</Columns>

## See also

* [WalletKit overview](/ecosystem/walletkit/overview)
* [TON Connect's wallet manifest](/ecosystem/ton-connect/manifest#wallet-manifest)
* [TON Connect overview](/ecosystem/ton-connect/overview)