react-ton-x Installation

yarn add react-ton-x

Usage of Local and Remote connectors

The local connector is used for creating a session from the Tonhub. See the Local Connector section for more details.
The remote connector is used for creating a session from your application or site. See the Remote Connector

Provider Properties

Prop	Type	Default	Description
network	String		Switch your provider between "mainnet" and "sandbox".
url	String		URL of your application
name	String		Name of your application
connectionState	Object		State of connection. Can be persisted.
setConnectionState	Function		Connection state setter.
debug	Boolean	false	Debug mode flag, mark true for switch on debug mode.

Example

Wrap your root component with TonhubConnectProvider

import { RemoteConnectPersistance, TonhubConnectProvider } from 'react-ton-x';const App = () => {
    // use any persistent state you want for the remote connector
    const [connectionState, setConnectionState] = useLocalStorage<RemoteConnectPersistance>('connection', { type: 'initing' });
    return (
        <TonhubConnectProvider
            network="mainnet"
            url="YOUR APP URL"
            name="YOUR APP NAME"
            debug={false}
            connectionState={connectionState}
            setConnectionState={setConnectionState}
        >
            {/* here goes your applicaton */}
        </TonhubConnectProvider>
    )
}

When use hook in any child component:

import { useTonhubConnect } from 'react-ton-x';const Page = () => {
    const connect = useTonhubConnect();
    if (connect.state.type === 'initing') {
        return <span>Waiting for session</span>;
    }
    if (connect.state.type === 'pending') {
        return <a href={connect.state.link}>Authorize</a>;
    }
    return (
        <>
            <span>Network: {config.network}</span>
            <span>Address: {config.address.toFriendly()}</span>
        </>
    )
}