You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/develop/dapps/ton-connect/react.mdx
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -5,15 +5,15 @@ Recommended SDK for React Apps is a [UI React SDK](/develop/dapps/ton-connect/de
5
5
6
6
## Implementation
7
7
8
-
### 1) Installation
8
+
### Installation
9
9
10
10
To start integrating TON Connect into your DApp, you need to install the `@tonconnect/ui-react` package. You can use npm or yarn for this purpose:
11
11
12
12
```bash npm2yarn
13
13
npm i @tonconnect/ui-react
14
14
```
15
15
16
-
### 2) TON Connect Initiation
16
+
### TON Connect Initiation
17
17
18
18
19
19
After installing the package, you should create a `manifest.json` file for your application. More information on how to create a manifest.json file can be found [here](/develop/dapps/ton-connect/manifest).
@@ -33,7 +33,7 @@ export function App() {
33
33
34
34
```
35
35
36
-
### 3) Connect to the Wallet
36
+
### Connect to the Wallet
37
37
38
38
Add the `TonConnectButton`. The TonConnect Button is a universal UI component for initializing a connection. After the wallet is connected, it transforms into a wallet menu. It is recommended to place it in the top right corner of your app.
39
39
@@ -55,7 +55,7 @@ You can add className and style props to the button as well. Note that you canno
55
55
56
56
Moreover, you always can initiate the connection manually, using `useTonConnectUI` hook and [connectWallet](https://github.com/ton-connect/sdk/tree/main/packages/ui#call-connect) method.
57
57
58
-
### 4) Redirects
58
+
### Redirects
59
59
60
60
If you want to redirect user to a specific page after wallet connection, you can use `useTonConnectUI` hook and [customize your return strategy](https://github.com/ton-connect/sdk/tree/main/packages/ui#add-the-return-strategy).
61
61
@@ -75,7 +75,7 @@ If you want to redirect user to a [Telegram Mini App](/develop/dapps/telegram-ap
75
75
76
76
[Open example on GitHub](https://github.com/ton-connect/demo-dapp-with-wallet/blob/master/src/App.tsx)
77
77
78
-
### 5) UI customization
78
+
### UI customization
79
79
80
80
To [customize UI](https://github.com/ton-connect/sdk/tree/main/packages/ui#ui-customisation) of the modal you can use `useTonConnectUI` hook and `setOptions` function. See more about useTonConnectUI hook in [Hooks](#hooks) section.
0 commit comments