Skip to content

Commit 2e1e7a2

Browse files
Add vue section (ton-community#738)
* add vue section * cut numbers from header --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent f8fc0b9 commit 2e1e7a2

File tree

4 files changed

+501
-11
lines changed

4 files changed

+501
-11
lines changed

docs/develop/dapps/ton-connect/react.mdx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ Recommended SDK for React Apps is a [UI React SDK](/develop/dapps/ton-connect/de
55

66
## Implementation
77

8-
### 1) Installation
8+
### Installation
99

1010
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:
1111

1212
```bash npm2yarn
1313
npm i @tonconnect/ui-react
1414
```
1515

16-
### 2) TON Connect Initiation
16+
### TON Connect Initiation
1717

1818

1919
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() {
3333

3434
```
3535

36-
### 3) Connect to the Wallet
36+
### Connect to the Wallet
3737

3838
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.
3939

@@ -55,7 +55,7 @@ You can add className and style props to the button as well. Note that you canno
5555

5656
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.
5757

58-
### 4) Redirects
58+
### Redirects
5959

6060
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).
6161

@@ -75,7 +75,7 @@ If you want to redirect user to a [Telegram Mini App](/develop/dapps/telegram-ap
7575

7676
[Open example on GitHub](https://github.com/ton-connect/demo-dapp-with-wallet/blob/master/src/App.tsx)
7777

78-
### 5) UI customization
78+
### UI customization
7979

8080
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.
8181

@@ -330,7 +330,7 @@ await tonConnectUI.disconnect();
330330
## Examples
331331

332332
* Step-by-step [TON Hello World guide](https://ton-community.github.io/tutorials/03-client/) to create a simple DAppwith React UI.
333-
* [Demo dApp](https://github.com/ton-connect/demo-dapp-with-react-ui) - Example of a DAppwith `@tonconnect/ui-react`.
333+
* [Demo dApp](https://github.com/ton-connect/demo-dapp-with-react-ui) - Example of a DApp with `@tonconnect/ui-react`.
334334
* [ton.vote](https://github.com/orbs-network/ton-vote) - Example of React website with TON Connect implementation.
335335

336336

0 commit comments

Comments
 (0)