From 4e1210ca9ae1cb5539751946d220425f25b3ee5b Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 9 Dec 2025 09:04:08 +0000 Subject: [PATCH 1/2] docs: add TON Connect integration guide for apps Co-Authored-By: ignacio.rivera@reown.com --- app-sdk/tonconnect/installation.mdx | 115 ++++++++++++++++++++++++++++ docs.json | 2 +- 2 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 app-sdk/tonconnect/installation.mdx diff --git a/app-sdk/tonconnect/installation.mdx b/app-sdk/tonconnect/installation.mdx new file mode 100644 index 0000000..55f5813 --- /dev/null +++ b/app-sdk/tonconnect/installation.mdx @@ -0,0 +1,115 @@ +--- +title: TON Connect Integration +sidebarTitle: TON Connect +description: "Learn how to integrate WalletConnect into your TON Connect application." +--- + +import CloudBanner from "/snippets/cloud-banner.mdx"; + +This guide explains how to enable WalletConnect support in your TON Connect application, allowing users to connect with WalletConnect-compatible wallets. + +## Prerequisites + +Before integrating WalletConnect into your TON Connect application, ensure you have the following: + +### 1. WalletConnect Project ID + +Create a new project on the WalletConnect Dashboard at https://dashboard.reown.com and obtain a new project ID. You will need this project ID to initialize WalletConnect in your application. + + + +### 2. TON Connect Project + +You should have an existing TON Connect project initialized. If you haven't set up TON Connect yet, please refer to the [TON Connect documentation](https://docs.ton.org/develop/dapps/ton-connect/overview) to get started. + +## Installation + +Install the required packages using your preferred package manager: + + + +```bash npm +npm install @tonconnect/sdk @reown/appkit-universal-connector +``` + +```bash Yarn +yarn add @tonconnect/sdk @reown/appkit-universal-connector +``` + +```bash pnpm +pnpm add @tonconnect/sdk @reown/appkit-universal-connector +``` + +```bash Bun +bun add @tonconnect/sdk @reown/appkit-universal-connector +``` + + + +## Usage + +To enable WalletConnect in your TON Connect application, use the `initializeWalletConnect()` function from the `@tonconnect/sdk` package along with the `UniversalConnector` from `@reown/appkit-universal-connector`. + +```typescript +import { initializeWalletConnect } from '@tonconnect/sdk'; +import { UniversalConnector } from '@reown/appkit-universal-connector'; + +initializeWalletConnect(UniversalConnector, { + projectId: 'YOUR_PROJECT_ID', + metadata: { + name: 'My DApp', + description: 'My awesome DApp', + url: 'https://mydapp.com', + icons: ['https://mydapp.com/icon.png'] + } +}); +``` + +### Configuration Options + +The `initializeWalletConnect` function accepts the following configuration options: + +| Option | Type | Required | Description | +|--------|------|----------|-------------| +| `projectId` | `string` | Yes | Your WalletConnect project ID from the [Dashboard](https://dashboard.reown.com) | +| `metadata.name` | `string` | Yes | The name of your application | +| `metadata.description` | `string` | Yes | A brief description of your application | +| `metadata.url` | `string` | Yes | The URL of your application | +| `metadata.icons` | `string[]` | Yes | An array of icon URLs for your application | + +### Example Implementation + +Here's a complete example of integrating WalletConnect into a TON Connect application: + +```typescript +import { TonConnect } from '@tonconnect/sdk'; +import { initializeWalletConnect } from '@tonconnect/sdk'; +import { UniversalConnector } from '@reown/appkit-universal-connector'; + +// Initialize WalletConnect support +initializeWalletConnect(UniversalConnector, { + projectId: 'YOUR_PROJECT_ID', + metadata: { + name: 'My TON DApp', + description: 'A decentralized application on TON', + url: 'https://mytonapp.com', + icons: ['https://mytonapp.com/icon.png'] + } +}); + +// Create TON Connect instance +const tonConnect = new TonConnect({ + manifestUrl: 'https://mytonapp.com/tonconnect-manifest.json' +}); + +// Connect to a wallet +async function connectWallet() { + const wallets = await tonConnect.getWallets(); + // WalletConnect-compatible wallets will now be available in the list + console.log('Available wallets:', wallets); +} +``` + +## Next Steps + +After integrating WalletConnect into your TON Connect application, users will be able to connect using any WalletConnect-compatible wallet. For more information about TON-specific RPC methods supported by WalletConnect, see the [TON Chain Support](/wallet-sdk/chain-support/ton) documentation. diff --git a/docs.json b/docs.json index e1b8608..3e8537f 100644 --- a/docs.json +++ b/docs.json @@ -246,7 +246,7 @@ }, { "group": "Guides", - "pages": ["guides/app-extended-sessions"] + "pages": ["app-sdk/tonconnect/installation", "guides/app-extended-sessions"] } ] }, From b38b8b6e06451319850628bf649a4000144ec1e8 Mon Sep 17 00:00:00 2001 From: TomTom Date: Wed, 10 Dec 2025 15:37:28 -0300 Subject: [PATCH 2/2] add the correct code and libraries in order to work --- app-sdk/tonconnect/installation.mdx | 35 ++++++++++++++++++----------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/app-sdk/tonconnect/installation.mdx b/app-sdk/tonconnect/installation.mdx index 55f5813..27daba3 100644 --- a/app-sdk/tonconnect/installation.mdx +++ b/app-sdk/tonconnect/installation.mdx @@ -29,19 +29,19 @@ Install the required packages using your preferred package manager: ```bash npm -npm install @tonconnect/sdk @reown/appkit-universal-connector +npm install @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react ``` ```bash Yarn -yarn add @tonconnect/sdk @reown/appkit-universal-connector +yarn add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react ``` ```bash pnpm -pnpm add @tonconnect/sdk @reown/appkit-universal-connector +pnpm add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react ``` ```bash Bun -bun add @tonconnect/sdk @reown/appkit-universal-connector +bun add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react ``` @@ -85,6 +85,10 @@ Here's a complete example of integrating WalletConnect into a TON Connect applic import { TonConnect } from '@tonconnect/sdk'; import { initializeWalletConnect } from '@tonconnect/sdk'; import { UniversalConnector } from '@reown/appkit-universal-connector'; +import { + TonConnectUIProvider, + TonConnectButton, +} from '@tonconnect/ui-react'; // Initialize WalletConnect support initializeWalletConnect(UniversalConnector, { @@ -97,16 +101,21 @@ initializeWalletConnect(UniversalConnector, { } }); -// Create TON Connect instance -const tonConnect = new TonConnect({ - manifestUrl: 'https://mytonapp.com/tonconnect-manifest.json' -}); -// Connect to a wallet -async function connectWallet() { - const wallets = await tonConnect.getWallets(); - // WalletConnect-compatible wallets will now be available in the list - console.log('Available wallets:', wallets); +export function App() { + // Create TON Connect instance + const tonConnect = new TonConnect({// Create TON Connect instance + manifestUrl: 'https://mytonapp.com/tonconnect-manifest.json' + }); + + return ( +
+

WalletConnect + TON React Example

+ + + +
+ ) } ```