@tonconnect/ui-react v2.0.2
TON Connect UI React
TonConnect UI React is a React UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol in React apps.
If you don't use React for your app, take a look at TonConnect UI.
If you want to use TonConnect on the server side, you should use the TonConnect SDK.
You can find more details and the protocol specification in the docs.
Getting started
Getting started
Installation with npm
npm i @tonconnect/ui-react
Usage
Add TonConnectUIProvider
Add TonConnectUIProvider to the root of the app. You can specify UI options using props. See all available options
All TonConnect UI hooks calls and <TonConnectButton />
component must be placed inside <TonConnectUIProvider>
.
import { TonConnectUIProvider } from '@tonconnect/ui-react';
export function App() {
return (
<TonConnectUIProvider manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json">
{ /* Your app */ }
</TonConnectUIProvider>
);
}
Add TonConnect Button
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.
export const Header = () => {
return (
<header>
<span>My App with React UI</span>
<TonConnectButton />
</header>
);
};
You can add className
and style
props to the button as well. Note that you cannot pass child to the TonConnectButton.
<TonConnectButton className="my-button-class" style={{ float: "right" }}/>
Use TonConnect UI hooks
useTonAddress
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.
import { useTonAddress } from '@tonconnect/ui-react';
export const Address = () => {
const userFriendlyAddress = useTonAddress();
const rawAddress = useTonAddress(false);
return (
address && (
<div>
<span>User-friendly address: {userFriendlyAddress}</span>
<span>Raw address: {rawAddress}</span>
</div>
)
);
};
useTonWallet
Use it to get user's current ton wallet. If wallet is not connected hook will return null.
See all wallet's properties
Wallet interface WalletInfo interface
import { useTonWallet } from '@tonconnect/ui-react';
export const Wallet = () => {
const wallet = useTonWallet();
return (
wallet && (
<div>
<span>Connected wallet: {wallet.name}</span>
<span>Device: {wallet.device.appName}</span>
</div>
)
);
};
useTonConnectUI
Use it to get access to the TonConnectUI
instance and UI options updating function.
See more about TonConnectUI instance methods
See more about setOptions function
import { Locales, useTonConnectUI } from '@tonconnect/ui-react';
export const Settings = () => {
const [tonConnectUI, setOptions] = useTonConnectUI();
const onLanguageChange = (lang: string) => {
setOptions({ language: lang as Locales });
};
const myTransaction = {
validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec
messages: [
{
address: "EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA",
amount: "20000000",
// stateInit: "base64bocblahblahblah==" // just for instance. Replace with your transaction initState or remove
},
{
address: "EQDmnxDMhId6v1Ofg_h5KR5coWlFG6e86Ro3pc7Tq4CA0-Jn",
amount: "60000000",
// payload: "base64bocblahblahblah==" // just for instance. Replace with your transaction payload or remove
}
]
}
return (
<div>
<button onClick={() => tonConnectUI.sendTransaction(myTransaction)}>
Send transaction
</button>
<div>
<label>language</label>
<select onChange={e => onLanguageChange(e.target.value)}>
<option value="en">en</option>
<option value="ru">ru</option>
</select>
</div>
</div>
);
};
useIsConnectionRestored
Indicates current status of the connection restoring process. You can use it to detect when connection restoring process if finished.
import { useIsConnectionRestored } from '@tonconnect/ui-react';
export const EntrypointPage = () => {
const connectionRestored = useIsConnectionRestored();
if (!connectionRestored) {
return <Loader>Please wait...</Loader>;
}
return <MainPage />;
};
Add connect request parameters (ton_proof)
Use tonConnectUI.setConnectRequestParameters
function to pass your connect request parameters.
This function takes one parameter:
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.
const [tonConnectUI] = useTonConnectUI();
tonConnectUI.setConnectRequestParameters({
state: 'loading'
});
or
Set state to 'ready' and define tonProof
value. Passed parameter will be applied to the connect request (QR and universal link).
const [tonConnectUI] = useTonConnectUI();
tonConnectUI.setConnectRequestParameters({
state: 'ready',
value: {
tonProof: '<your-proof-payload>'
}
});
or
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.
const [tonConnectUI] = useTonConnectUI();
tonConnectUI.setConnectRequestParameters(null);
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).
const [tonConnectUI] = useTonConnectUI();
// enable ui loader
tonConnectUI.setConnectRequestParameters({ state: 'loading' });
// fetch you tonProofPayload from the backend
const tonProofPayload: string | null = await fetchTonProofPayloadFromBackend();
if (!tonProofPayload) {
// remove loader, connect request will be without any additional parameters
tonConnectUI.setConnectRequestParameters(null);
} else {
// add tonProof to the connect request
tonConnectUI.setConnectRequestParameters({
state: "ready",
value: { tonProof: tonProofPayload }
});
}
You can find ton_proof
result in the wallet
object when wallet will be connected:
import {useTonConnectUI} from "@tonconnect/ui-react";
const [tonConnectUI] = useTonConnectUI();
useEffect(() =>
tonConnectUI.onStatusChange(wallet => {
if (wallet.connectItems?.tonProof && 'proof' in wallet.connectItems.tonProof) {
checkProofInYourBackend(wallet.connectItems.tonProof.proof, wallet.account);
}
}), []);
12 days ago
28 days ago
29 days ago
28 days ago
29 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
8 months ago
8 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago