`createWalletClientUI`

WalletClientUI provides the same set of methods WalletClient: connect to wallets, send transactions, and more. Renders a standard modal window for wallet connection that supports browser-extension wallets along with the native desktop and mobile wallets. Moreover, it renders the blocking screen while the user performs operations in the wallet.

Import

import { createWalletClientUI } from '@fotonjs/core';

Usage

Initialize the UI client on the mainnet (by default) with the link to manifest:

import { createWalletClientUI } from '@fotonjs/core';
 
const walletClient = createWalletClientUI({
  chain: 'mainnet',
  manifestUrl: 'https://example.com/tonconnect-manifest.json',
});

Then you can call the connection modal window

const walletConnection = await walletClient.connect();

Parameters

manifestUrl

Type: string
Required if connection is not provided

The URL of a published manifest file (opens in a new tab). A Manifest is a JSON file with the following fields:

{
    "url": "<app-url>",                        // required
    "name": "<app-name>",                      // required
    "iconUrl": "<app-icon-url>",               // required
    "termsOfUseUrl": "<terms-of-use-url>",     // optional
    "privacyPolicyUrl": "<privacy-policy-url>" // optional
}

const walletClient = createWalletClientUI({
  manifestUrl: 'https://example.com/tonconnect-manifest.json',
});

connection

Type: TonConnectUI
Required if manifestUrl is not provided

An instance of the @tonconnect/ui (opens in a new tab). Needed for integration between Foton and Ton Connect UI.

import { TonConnectUI } from '@tonconnect/ui';
 
const tonConnect = new TonConnectUI({
  manifestUrl: 'https://example.com/tonconnect-manifest.json',
});
 
const walletClient = createWalletClient({
  connection: tonConnect,
});

chain (optional)

Type: 'mainnet' | 'testnet'
Default: 'mainnet'

TON blockchain network to use for sending the transactions.

const walletClient = createWalletClientUI({
  chain: 'mainnet',
  manifestUrl: 'https://example.com/tonconnect-manifest.json',
});

restoreConnection (optional)

Type: boolean
Default: false

If true, the connection will be restored from the browser storage on initial render.

const walletClient = createWalletClientUI({
  manifestUrl: 'https://example.com/tonconnect-manifest.json',
  restoreConnection: true,
});

createWalletClient connect