Skip to content

Commit da2fba1

Browse files
mlikhtarmlikhtar
committed
improve react doc
1 parent 7625a8b commit da2fba1

File tree

1 file changed

+143
-135
lines changed

1 file changed

+143
-135
lines changed

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

Lines changed: 143 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ Add the `TonConnectButton`. The TonConnect Button is a universal UI component fo
3939

4040
```tsx
4141
export const Header = () => {
42-
return (
43-
<header>
44-
<span>My App with React UI</span>
45-
<TonConnectButton />
46-
</header>
47-
);
42+
return (
43+
<header>
44+
<span>My App with React UI</span>
45+
<TonConnectButton />
46+
</header>
47+
);
4848
};
4949
```
5050

@@ -53,7 +53,29 @@ You can add className and style props to the button as well. Note that you canno
5353
<TonConnectButton className="my-button-class" style={{ float: "right" }}/>
5454
```
5555

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.
56+
Moreover, you always can initiate the connection manually, using `useTonConnectUI` hook and `openModal` method (❗ Note that `connectWallet` method is deprecated ❗).
57+
58+
```tsx
59+
export const Header = () => {
60+
const [tonConnectUI, setOptions] = useTonConnectUI();
61+
return (
62+
<header>
63+
<span>My App with React UI</span>
64+
<button onClick={() => tonConnectUI.openModal()}>
65+
Connect Wallet
66+
</button>
67+
</header>
68+
);
69+
};
70+
```
71+
72+
You can connect to a specific wallet using the `openSingleWalletModal` method:
73+
74+
```tsx
75+
<button onClick={() => tonConnectUI.openSingleWalletModal('tonwallet)}>
76+
Connect Wallet
77+
</button>
78+
```
5779
5880
### 4) Redirects
5981
@@ -85,50 +107,53 @@ If you want to use some low-level TON Connect UI SDK features in your React app,
85107
86108
### useTonAddress
87109
88-
Use it to get user's current ton wallet address. Pass boolean parameter isUserFriendly to choose format of the address. If wallet is not connected hook will return empty string.
110+
Use it to get user's current ton wallet address. Pass the boolean parameter `isUserFriendly` (default is `true`) to choose the format of the address. If the wallet is not connected, the hook will return an empty string.
89111
90112
```tsx
91113
import { useTonAddress } from '@tonconnect/ui-react';
92114

93115
export const Address = () => {
94-
const userFriendlyAddress = useTonAddress();
95-
const rawAddress = useTonAddress(false);
96-
97-
return (
98-
userFriendlyAddress && (
99-
<div>
100-
<span>User-friendly address: {userFriendlyAddress}</span>
101-
<span>Raw address: {rawAddress}</span>
102-
</div>
103-
)
104-
);
116+
const userFriendlyAddress = useTonAddress();
117+
const rawAddress = useTonAddress(false);
118+
119+
return (
120+
userFriendlyAddress && (
121+
<div>
122+
<span>User-friendly address: {userFriendlyAddress}</span>
123+
<span>Raw address: {rawAddress}</span>
124+
</div>
125+
)
126+
);
105127
};
106128
```
107129
108130
### useTonWallet
109131
110132
Use it to get user's current ton wallet. If wallet is not connected hook will return null.
111133
112-
See all wallet's properties
134+
See all wallet's properties:
113135
114136
[Wallet interface](https://ton-connect.github.io/sdk/interfaces/_tonconnect_sdk.Wallet.html)
137+
115138
[WalletInfo interface](https://ton-connect.github.io/sdk/types/_tonconnect_sdk.WalletInfo.html)
116139
117140
```tsx
118141
import { useTonWallet } from '@tonconnect/ui-react';
119142

120143
export const Wallet = () => {
121-
const wallet = useTonWallet();
122-
123-
return (
124-
wallet && (
125-
<div>
126-
<span>Connected wallet: {wallet.name}</span>
127-
<span>Device: {wallet.device.appName}</span>
128-
</div>
129-
)
130-
);
144+
const wallet = useTonWallet();
145+
146+
return (
147+
wallet && (
148+
<div>
149+
<span>Connected wallet address: {wallet.account.address}</span>
150+
<span>Device: {wallet.device.appName}</span>
151+
<span>Connected via: {wallet.provider}</span>
152+
</div>
153+
)
154+
);
131155
};
156+
132157
```
133158
134159
### useTonConnectUI
@@ -144,27 +169,21 @@ Use it to get access to the `TonConnectUI` instance and UI options updating func
144169
import { Locales, useTonConnectUI } from '@tonconnect/ui-react';
145170

146171
export const Settings = () => {
147-
const [tonConnectUI, setOptions] = useTonConnectUI();
148-
149-
const onLanguageChange = (lang: string) => {
150-
setOptions({ language: lang as Locales });
151-
};
152-
153-
return (
154-
<div>
155-
<button onClick={() => tonConnectUI.sendTransaction(myTransaction)}>
156-
Send transaction
157-
</button>
158-
159-
<div>
160-
<label>language</label>
161-
<select onChange={e => onLanguageChange(e.target.value)}>
162-
<option value="en">en</option>
163-
<option value="ru">ru</option>
164-
</select>
165-
</div>
166-
</div>
167-
);
172+
const [tonConnectUI, setOptions] = useTonConnectUI();
173+
174+
const onLanguageChange = (language: Locales) => {
175+
setOptions({ language });
176+
};
177+
178+
return (
179+
<div>
180+
<label>language</label>
181+
<select onChange={(e) => onLanguageChange(e.target.value as Locales)}>
182+
<option value="en">en</option>
183+
<option value="ru">ru</option>
184+
</select>
185+
</div>
186+
);
168187
};
169188
```
170189
@@ -176,13 +195,13 @@ You can use it to detect when connection restoring process if finished.
176195
import { useIsConnectionRestored } from '@tonconnect/ui-react';
177196

178197
export const EntrypointPage = () => {
179-
const connectionRestored = useIsConnectionRestored();
198+
const connectionRestored = useIsConnectionRestored();
180199

181-
if (!connectionRestored) {
182-
return <Loader>Please wait...</Loader>;
183-
}
200+
if (!connectionRestored) {
201+
return <Loader>Please wait...</Loader>;
202+
}
184203

185-
return <MainPage />;
204+
return <MainPage />;
186205
};
187206
```
188207
@@ -197,27 +216,29 @@ Send TON coins (in nanotons) to a specific address:
197216
```js
198217
import { useTonConnectUI } from '@tonconnect/ui-react';
199218

200-
const transaction = {
201-
messages: [
202-
{
203-
address: "0:412410771DA82CBA306A55FA9E0D43C9D245E38133CB58F1457DFB8D5CD8892F", // destination address
204-
amount: "20000000" //Toncoin in nanotons
205-
}
206-
]
207-
208-
}
219+
const transaction: SendTransactionRequest = {
220+
validUntil: Date.now() + 5 * 60 * 1000, // 5 minutes
221+
messages: [
222+
{
223+
address:
224+
"0:412410771DA82CBA306A55FA9E0D43C9D245E38133CB58F1457DFB8D5CD8892F", // destination address
225+
amount: "20000000", // Toncoin in nanotons
226+
},
227+
],
228+
};
209229

210230
export const Settings = () => {
211-
const [tonConnectUI, setOptions] = useTonConnectUI();
212-
213-
return (
214-
<div>
215-
<button onClick={() => tonConnectUI.sendTransaction(transaction)}>
216-
Send transaction
217-
</button>
218-
</div>
219-
);
231+
const [tonConnectUI, setOptions] = useTonConnectUI();
232+
233+
return (
234+
<div>
235+
<button onClick={() => tonConnectUI.sendTransaction(transaction)}>
236+
Send transaction
237+
</button>
238+
</div>
239+
);
220240
};
241+
221242
```
222243
223244
- Get more examples here: [Preparing Messages](/develop/dapps/ton-connect/message-builders)
@@ -232,91 +253,78 @@ The principle located in Payment Processing (using tonweb). [See more](/develop/
232253
Understand how to sign and verify messages: [Signing and Verification](/develop/dapps/ton-connect/sign)
233254
:::
234255
235-
Use `tonConnectUI.setConnectRequestParameters` function to pass your connect request parameters.
236-
237-
This function takes one parameter:
238-
239-
Set state to 'loading' while you are waiting for the response from your backend. If user opens connect wallet modal at this moment, he will see a loader.
240-
```ts
241-
const [tonConnectUI] = useTonConnectUI();
242-
243-
tonConnectUI.setConnectRequestParameters({
244-
state: 'loading'
245-
});
246-
```
256+
To ensure that the user truly owns the declared address, you can use `ton_proof`.
247257
248-
or
258+
Use the `tonConnectUI.setConnectRequestParameters` function to set up your connection request parameters. You can use it for:
259+
- Loading State: Show a loading state while waiting for a response from your backend.
260+
- Ready State with tonProof: Set the state to 'ready' and include the tonProof value.
261+
- If an error occurs, remove the loader and create the connect request without additional parameters.
249262
250-
Set state to 'ready' and define `tonProof` value. Passed parameter will be applied to the connect request (QR and universal link).
251263
```ts
252264
const [tonConnectUI] = useTonConnectUI();
253265

254-
tonConnectUI.setConnectRequestParameters({
255-
state: 'ready',
256-
value: {
257-
tonProof: '<your-proof-payload>'
258-
}
259-
});
260-
```
266+
// Set loading state
267+
tonConnectUI.setConnectRequestParameters({ state: "loading" });
261268

262-
or
269+
// Fetch tonProofPayload from backend
270+
const tonProofPayload: string | null =
271+
await fetchTonProofPayloadFromBackend();
263272

264-
Remove loader if it was enabled via `state: 'loading'` (e.g. you received an error instead of a response from your backend). Connect request will be created without any additional parameters.
265-
```ts
266-
const [tonConnectUI] = useTonConnectUI();
267-
268-
tonConnectUI.setConnectRequestParameters(null);
273+
if (tonProofPayload) {
274+
// Set ready state with tonProof
275+
tonConnectUI.setConnectRequestParameters({
276+
state: "ready",
277+
value: { tonProof: tonProofPayload },
278+
});
279+
} else {
280+
// Remove loader
281+
tonConnectUI.setConnectRequestParameters(null);
282+
}
269283
```
270284
285+
#### Handling ton_proof Result
271286
272-
You can call `tonConnectUI.setConnectRequestParameters` multiple times if your tonProof payload has bounded lifetime (e.g. you can refresh connect request parameters every 10 minutes).
273-
287+
You can find `ton_proof` result in the `wallet` object when the wallet is connected:
274288
275289
```ts
276-
const [tonConnectUI] = useTonConnectUI();
277-
278-
// enable ui loader
279-
tonConnectUI.setConnectRequestParameters({ state: 'loading' });
280-
281-
// fetch you tonProofPayload from the backend
282-
const tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();
283-
284-
if (!tonProofPayload) {
285-
// remove loader, connect request will be without any additional parameters
286-
tonConnectUI.setConnectRequestParameters(null);
287-
} else {
288-
// add tonProof to the connect request
289-
tonConnectUI.setConnectRequestParameters({
290-
state: "ready",
291-
value: { tonProof: tonProofPayload }
290+
useEffect(() => {
291+
tonConnectUI.onStatusChange((wallet) => {
292+
if (
293+
wallet.connectItems?.tonProof &&
294+
"proof" in wallet.connectItems.tonProof
295+
) {
296+
checkProofInYourBackend(
297+
wallet.connectItems.tonProof.proof,
298+
wallet.account.address
299+
);
300+
}
292301
});
293-
}
294-
302+
}, []);
295303
```
296304
297-
298-
You can find `ton_proof` result in the `wallet` object when wallet will be connected:
305+
#### Structure of ton_proof
299306
300307
```ts
301-
import {useTonConnectUI} from "@tonconnect/ui-react";
302-
303-
const [tonConnectUI] = useTonConnectUI();
304-
305-
useEffect(() =>
306-
tonConnectUI.onStatusChange(wallet => {
307-
if (wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
308-
checkProofInYourBackend(wallet.connectItems.tonProof.proof, wallet.account);
309-
}
310-
}), []);
308+
type TonProofItemReplySuccess = {
309+
name: "ton_proof";
310+
proof: {
311+
timestamp: string; // Unix epoch time (seconds)
312+
domain: {
313+
lengthBytes: number; // Domain length
314+
value: string; // Domain name
315+
};
316+
signature: string; // Base64-encoded signature
317+
payload: string; // Payload from the request
318+
}
319+
}
311320
```
312321
322+
You can find an example of authentication on this [page](/develop/dapps/ton-connect/sign#react-example)
313323
314324
### Wallet Disconnection
315325
316326
Call to disconnect the wallet:
317327
```js
318-
import { useTonConnectUI } from '@tonconnect/ui-react';
319-
320328
const [tonConnectUI] = useTonConnectUI();
321329

322330
await tonConnectUI.disconnect();

0 commit comments

Comments
 (0)