diff --git a/app-sdk/tonconnect/installation.mdx b/app-sdk/tonconnect/installation.mdx new file mode 100644 index 0000000..27daba3 --- /dev/null +++ b/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. + + + +### 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 @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 +``` + + + +## 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 ( +
+

WalletConnect + TON React Example

+ + + +
+ ) +} +``` + +## 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"] } ] },