docs: add TON Connect integration guide for apps

app-sdk/tonconnect/installation.mdx

@@ -0,0 +1,124 @@
+---
+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.
+
+<CloudBanner />
+
+### 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:
+
+<CodeGroup>
+
+```bash npm
+npm install @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react
+```
+
+```bash Yarn
+yarn add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react
+```
+
+```bash pnpm
+pnpm add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react
+```
+
+```bash Bun
+bun add @tonconnect/sdk @reown/appkit-universal-connector @tonconnect/ui-react  
+```
+
+</CodeGroup>
+
+## 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';
+import {
+  TonConnectUIProvider,
+  TonConnectButton,
+} from '@tonconnect/ui-react';
+
+// 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']
+  }
+});
+
+
+export function App() {
+  // Create TON Connect instance
+  const tonConnect = new TonConnect({// Create TON Connect instance
+      manifestUrl: 'https://mytonapp.com/tonconnect-manifest.json'
+    });
+
+  return (
+    <div className={"pages"}>
+      <h1>WalletConnect + TON React Example</h1>
+      <TonConnectUIProvider connector={tonConnect}>
+        <TonConnectButton />
+      </TonConnectUIProvider>
+    </div>
+  )
+}
+```
+
+## 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.

docs.json

@@ -246,7 +246,7 @@
           },
           {
             "group": "Guides",
-            "pages": ["guides/app-extended-sessions"]
+            "pages": ["app-sdk/tonconnect/installation", "guides/app-extended-sessions"]
           }
         ]
       },