Skip to main content

​
Install Ton wallet package

To get started, install the latest version of Ton package. 
yarn add @layerswap/wallet-ton

​
Basic example

The example below shows how to preconfigure a basic wallet management with native widget package. 
import { LayerswapProvider, Swap } from "@layerswap/widget";
import { TonProvider } from "@layerswap/wallet-ton"

export const WidgetPage = () => {

  const tonConfigs = {
    tonApiKey: {YOUR_TON_API_KEY},
    manifestUrl: {YOUR_TON_MANIFEST_URL},
  }

  return (
    <LayerswapProvider 
      config={{
        ...config,
        tonConfigs
      }}
      walletProviders={[TonProvider]}
    >
      <Swap/>
    </LayerswapProvider>
  );
};

​
Ton configs

tonConfigs:  {
  tonApiKey: string,
  manifestUrl: string,
}

​
TON API Key

The tonApiKey is required to interact with the TON blockchain network. It’s used for:
  • Fetching wallet balances
  • Initiating transactions
  • Accessing TON Center’s HTTP API

​
Getting Your API Key

To obtain a TON API key:
  1. Open Telegram and navigate to the @tonapibot bot
  2. Follow the bot’s instructions to register and generate your API key
  3. Copy the API key provided by the bot
Without an API key, usage is limited to 1 request per second. Registering for an API key provides access to higher rate limits necessary for production applications. Visit TON Center for more information.

​
Using the API Key

Once you have your API key, add it to your TON configs: 
const tonConfigs = {
  tonApiKey: "your-ton-api-key-here",
  manifestUrl: "https://your-app-domain.com/tonconnect-manifest.json",
}

​
Manifest URL Configuration

The manifestUrl is required by TON Connect and points to a tonconnect-manifest.json file that contains essential metadata about your application.

​
Creating the Manifest File

Create a tonconnect-manifest.json file in your project’s public directory with the following structure: 
{
  "url": "https://your-app-domain.com",
  "name": "Your App Name",
  "iconUrl": "https://your-app-domain.com/icon.png",
  "termsOfUseUrl": "https://your-app-domain.com/terms",
  "privacyPolicyUrl": "https://your-app-domain.com/privacy"
}
​
url
string
required
Your application’s URL. This should match the domain where your app is hosted.
​
name
string
required
The name of your application as it will appear to users in TON wallets.
​
iconUrl
string
required
URL to your application’s icon/logo. Should be a publicly accessible image file.
​
termsOfUseUrl
string
Optional URL to your terms of use page.
​
privacyPolicyUrl
string
Optional URL to your privacy policy page.

​
Setting the Manifest URL

Once you’ve created and deployed your manifest file, provide its URL in the TON configs: 
const tonConfigs = {
  tonApiKey: "YOUR_TON_API_KEY",
  manifestUrl: "https://your-app-domain.com/tonconnect-manifest.json",
}
The manifest file must be publicly accessible. For local development, you may need to host it on a development server or use a public URL. Learn more in the TON Connect documentation.