Skip to content

Commit

Permalink
cut numbers from header
Browse files Browse the repository at this point in the history
  • Loading branch information
sansx committed Aug 30, 2024
1 parent 68604ea commit e4fad92
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 15 deletions.
10 changes: 5 additions & 5 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
10 changes: 5 additions & 5 deletions docs/develop/dapps/ton-connect/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ Recommended SDK for Vue Apps is a [UI Vue SDK](/develop/dapps/ton-connect/develo

## Implementation

### 1) Installation
### Installation

To start integrating TON Connect into your DApp, you need to install the `@townsquarelabs/ui-vue` package. You can use npm or yarn for this purpose:

```bash npm2yarn
npm i @townsquarelabs/ui-vue
```

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

Add TonConnectUIProvider to the root of the app. You can specify UI options using props.
<!-- [See all available options](https://github.com/TownSquareXYZ/tonconnect-ui-vue/blob/aa7439073dae5f7ccda3ab10291fc4658f5d3588/src/utils/UIProvider.ts#L11) -->
Expand Down Expand Up @@ -45,7 +45,7 @@ export default {
</script>
```

### 3) Connect to the Wallet
### Connect to the Wallet
TonConnect Button is universal UI component for initializing connection. After wallet is connected it transforms to a wallet menu.
It is recommended to place it in the top right corner of your app.

Expand All @@ -71,7 +71,7 @@ export default {
You can add `class` and `:style` props to the button as well. Note that you cannot pass child to the TonConnectButton.
`<TonConnectButton class="my-button-class" :style="{ float: 'right' }"/>`

### 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 Down Expand Up @@ -107,7 +107,7 @@ export default {

[Read more in SDK documentation](https://github.com/ton-connect/sdk/tree/main/packages/ui#use-inside-twa-telegram-web-app)

### 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](#usetonconnectui) section.

Expand Down
10 changes: 5 additions & 5 deletions docs/develop/dapps/ton-connect/web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ And if you use Vue for your DApp, take a look at [TON Connect UI Vue SDK](/devel

## Implementation

### 1) Installation
### Installation

<Tabs groupId="Installation">
<TabItem value="CDN" label="CDN">
Expand All @@ -34,7 +34,7 @@ npm i @tonconnect/ui
</TabItem>
</Tabs>

### 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 @@ -55,7 +55,7 @@ Add a button with `ton-connect` id to connect to the wallet:
</script>
```

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

"Connect" button (which is added at `buttonRootId`) automatically handles clicks.

Expand All @@ -76,7 +76,7 @@ But you can open "connect modal" programmatically, e.g. after click on custom bu
</script>
```

### 4) Redirects
### Redirects

#### Customizing return strategy

Expand All @@ -94,7 +94,7 @@ tonConnectUI.uiOptions = {

[Read more in SDK documentation](https://github.com/ton-connect/sdk/tree/main/packages/ui#use-inside-twa-telegram-web-app)

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

TonConnect UI provides an interface that should be familiar and recognizable to the user when using various apps. However, the app developer can make changes to this interface to keep it consistent with the app interface.

Expand Down

0 comments on commit e4fad92

Please sign in to comment.