Skip to content

Commit

Permalink
Add vue section (ton-community#738)
Browse files Browse the repository at this point in the history
* add vue section

* cut numbers from header

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
sansx and github-actions[bot] committed Aug 30, 2024
1 parent f8fc0b9 commit 2e1e7a2
Show file tree
Hide file tree
Showing 4 changed files with 501 additions and 11 deletions.
12 changes: 6 additions & 6 deletions docs/develop/dapps/ton-connect/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ Recommended SDK for React Apps is a [UI React SDK](/develop/dapps/ton-connect/de

## Implementation

### 1) Installation
### Installation

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:

```bash npm2yarn
npm i @tonconnect/ui-react
```

### 2) TON Connect Initiation
### TON Connect Initiation


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).
Expand All @@ -33,7 +33,7 @@ export function App() {

```

### 3) Connect to the Wallet
### Connect to the Wallet

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.

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

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.

### 4) Redirects
### Redirects

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

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

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

### 5) UI customization
### UI customization

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.

Expand Down Expand Up @@ -330,7 +330,7 @@ await tonConnectUI.disconnect();
## Examples

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


Loading

0 comments on commit 2e1e7a2

Please sign in to comment.