Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add vue section #738

Merged
merged 21 commits into from
Aug 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2044a44
Merge pull request #72 from ton-community/main
github-actions[bot] Jul 19, 2024
8d0428f
Merge pull request #76 from ton-community/main
github-actions[bot] Jul 21, 2024
9bfd6a8
Merge pull request #85 from ton-community/main
github-actions[bot] Jul 24, 2024
7f1f89f
Merge pull request #88 from ton-community/main
github-actions[bot] Jul 25, 2024
5b805e0
Merge pull request #90 from ton-community/main
github-actions[bot] Jul 26, 2024
b14ad03
Merge pull request #91 from ton-community/main
github-actions[bot] Jul 27, 2024
94c7e8a
Merge pull request #92 from ton-community/main
github-actions[bot] Jul 28, 2024
f3c570f
Merge pull request #96 from ton-community/main
github-actions[bot] Jul 31, 2024
9efe1de
Merge pull request #97 from ton-community/main
github-actions[bot] Aug 1, 2024
fc17b15
Merge pull request #98 from ton-community/main
github-actions[bot] Aug 2, 2024
287df2e
Merge pull request #99 from ton-community/main
github-actions[bot] Aug 3, 2024
54915d4
Merge pull request #100 from ton-community/main
github-actions[bot] Aug 5, 2024
5fb355a
Merge pull request #101 from ton-community/main
github-actions[bot] Aug 7, 2024
9fe06c9
Merge pull request #102 from ton-community/main
github-actions[bot] Aug 8, 2024
5362dc4
Merge pull request #103 from ton-community/main
github-actions[bot] Aug 9, 2024
c6c3c5b
Merge pull request #104 from ton-community/main
github-actions[bot] Aug 10, 2024
e9877c6
Merge pull request #105 from ton-community/main
github-actions[bot] Aug 13, 2024
a502e12
Merge pull request #107 from ton-community/main
github-actions[bot] Aug 14, 2024
6d93554
Merge pull request #108 from ton-community/main
github-actions[bot] Aug 15, 2024
68604ea
add vue section
sansx Aug 22, 2024
e4fad92
cut numbers from header
sansx Aug 30, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading