# Getting Started Source: https://docs.tonhub.com/docs/apps Step by step configure the Tonhub extension and links for your application ## Overview In this section, you will learn how to connect your application with Tonhub. It will allow configuring your application for convenience to authorize and make transactions in TON. ## What is TON? You can learn basic concepts about TON blockchain [here](https://www.tonspace.co/). ## Step-by-step guide 1. Create a [Remote connector](/docs/tonhub-remote-connector). 2. Create a [session](/docs/tonhub-remote-connector#starting-a-new-session) via a connector. 3. Get an installation link for your application from the Tonhub [Link Generator](https://tonwhales.com/tools/link) or Sandbox [Link Generator](https://sandbox.tonwhales.com/tools/link). 4. Create a [Local connector](/docs/tonhub-local-connector) for processing users' actions when running as an extension. 5. Add the necessary [meta tags](/docs/meta-tags) in your application's head section. 6. Use a session for request [transactions](/docs/tonhub-remote-connector#requesting-transaction) or [signatures](/docs/tonhub-remote-connector#requesting-signature). ## Capabilities Example Extension For a quick inspection try * [Tonhub Capabilities Example](https://tonhub.com/app/te6cckEBAgEAMAABAUABAFRodHRwczovL2FwcHMudG9uaHViLmNvbS9hcHBzL2V4YW1wbGVzL2Z1bGySeowu) for [Tonhub](/docs/beta-apps) * [Sandbox Capabilities Example](https://test.tonhub.com/app/te6cckEBAwEASgACAcgCAQAeU2FuZGJveCBFeGFtcGxlAGRodHRwczovL2FwcHMtc2FuZGJveC52ZXJjZWwuYXBwL2FwcHMvZXhhbXBsZXMvZnVsbLitW14) for [Sandbox](/docs/beta-apps). # Beta Apps Source: https://docs.tonhub.com/docs/beta-apps Tonhub publishes public beta apps before releasing them to everyone: * [Tonhub iOS Beta](https://testflight.apple.com/join/UiiRg76m) * [Tonhub Android Beta](https://play.google.com/apps/testing/com.tonhub.wallet) * [Sandbox iOS Beta](https://testflight.apple.com/join/wLSfTsyD) * [Sandbox Android Beta](https://play.google.com/apps/testing/com.tonhub.wallet.testnet) # First steps with Connector Source: https://docs.tonhub.com/docs/connect Connecting to Tonhub wallet from your dApp or bot To connect your app to Tonhub and Sandbox wallets you need to use `ton-x` library. At this time library supports only Tonhub wallets, but in future it would be expanded to more wallets. ## Installing library `yarn add ton-x` ### Library requires Buffer polyfill To install polyfill, install `buffer` package and import it before importing `ton-x`. ## Creating a connector There are two ways to connect to a Tonhub: * [Remote Connector](/docs/tonhub-remote-connector) , similar to [Wallet Connect](http://walletconnect.com) * [Local Connector](/docs/tonhub-local-connector) is used when your app is running as an extension. Or you could use **react-ton-x** wrapper for both [**Read here**](/docs/react-ton-x) *** What’s Next Now you can request your first transaction! # Design guidelines Source: https://docs.tonhub.com/docs/design-guidelines # Tonhub Developers Source: https://docs.tonhub.com/docs/getting-started Building apps for TON network and Tonhub Wallet Welcome to Tonhub Developers! Learn how to connect your apps to Tonhub wallets, information about building smart contracts, and access Testnet Developer Wallet at [Sandbox Wallet](https://test.tonhub.com). # 📱Tonhub wallet [Tonhub](/docs/overview-wallet) is one of the easiest and most secure crypto wallet in the TON blockchain. Buy, store and exchange crypto value. Use all up-to-date features of the [TON](https://ton.org/) Blockchain. # 🔗Tonhub Connect [Connect](/docs/connect) is a service to securely connect applications and the user's wallet. # 👾Tonhub Extensions [Extensions](/docs/overview) is a feature of Tonhub that allows your app to get into users' wallet main screen, get more traffic, and easy use integrations. # ⎋ Tonhub Links [Links](/docs/overview-1) describes deep links supported by Tonhub. Adding these links to your app is the simplest way to integrate them. # 🪙 Jetton Launcher [Jetton Launcher](/docs/jetton-launcher) is a tool for fast launching Token as a TON [Jettons](https://github.com/ton-blockchain/TIPs/issues/74). # 🏝Sandbox Network [Sandbox network](/docs/sandbox) is a testnet that just works and allows you to get as many test coins as possible. # 👨‍💻 Github You can find our open-source libraries on [Github](https://github.com/tonwhales). Tonhub is also an open-source project placed [here](https://github.com/tonwhales/wallet). # Jetton launcher Source: https://docs.tonhub.com/docs/jetton-launcher Launch your own token with a flexible tool # Overview [Jetton launcher](https://tonwhales.com/tokens/launcher) is a tool for fast launching your own tokens as TON jettons. With this tool, any member of Whales Club can launch their own token in a few clicks. [Jettons ](https://github.com/ton-blockchain/TIPs/issues/74)are official digital assets built on the TON blockchain. There are many projects in the blockchain ecosystem that use custom tokens, and now development teams have to spend time and resources to launch their own coins, so Jetton launcher will definitely accelerate the development of cryptocurrency projects. The number of scenarios for using your own crypto coin is endless, from playing Monopoly with friends to creating an employee stock options program for your team and implementing tokens in business applications, like a loyalty program for a restaurant or an in-game currency in the play2earn project. Jetton launcher is developed and supported by Ton Whales team, so the tokens you create instantly will appear in Tonhub and other popular TON wallets. ### Jetton launcher access conditions Please note that this tool is available for [Whales Club](https://tonwhales.com/club) members only. To join the club, one must have one of the 10,000 NFT whales that are mined from time to time on the Ton Whales website. ### Sandbox test environment If you want to test this feature, you can use our [Sandbox](/docs/sandbox) network with Sandbox [Jetton Launcher](https://tonsandbox.com/tokens/launcher) or [Extension Jetton Launcher](https://test.tonhub.com/app/te6cckEBAwEATwACAcgCAQAyW1NhbmRib3hdIEpldHRvbiBsYXVuY2hlcgBaaHR0cHM6Ly9zYW5kYm94LnRvbndoYWxlcy5jb20vdG9rZW5zL2xhdW5jaGVyHgTr_Q). # Getting started Creating your own coin will take only a couple of minutes and will no longer require any developer involvement. 1. Fill the form Open Jetton Launcher via extensions or Tonhales site and fill the form for your token. here you can preview how will look result and tune all Jetton properties available according to Jetton standard. 2. Deploy your jetton. Click Create button. Then, confirm the transaction request from TonHub. Wait a few seconds, while deployment is finished. 3. Ready for use. Your token right after deploying will be available for use with all wallets which support Jettons TON standard. For example, in Tonhub it will appear in the Accounts section. # Meta tags Source: https://docs.tonhub.com/docs/meta-tags Add the necessary meta tags into your app's head section ## Add the necessary meta tags into your app's head section Configure your Tonhub extension's appearance using well-known tags: * Title * Description * Theme color * Logo * Icon ``` Tonhub ``` See [Metadata headers](/docs/metadata-headers) section for more details. ## Generate a URL link to your app as a Tonhub extension You can create links to your app as a Tonhub extension with [Tonhub Link Generator](/docs/tonhub-link-generator). In addition, you can validate your metadata headers with this tool as it allows you to preview extensions: * Title * Description * Theme Color * Logo * Icon image * Blurhash (Image, which is generated from icon image. Blurhash is shown before Image has loaded) # Metadata headers Source: https://docs.tonhub.com/docs/metadata-headers Configure how your app is shown in the Tonhub Tonhub App appearance can be configured using well-known tags. Configurable properties are: title, description, image and theme color. Also, you can provide default extension to install after successful on-site login. ### Metadata is cached FOREVER Always invalidate cache using instructions below after updating your application. ## App Title Title is shown everywhere (instead of page's current title). The list of attributes for title by priority (from high to low): ```bash bash theme={null} TonWhales ``` ## Logo ```bash bash theme={null} ...and then tries to extract image from favicon ``` ## Theme color Specifies theme color of the application. Used for customizing backsheet, etc. ```bash bash theme={null} ``` ## Description Description is not used now, but reserved for further functionality. ```bash bash theme={null} ``` ## Extension To setup default extension for your app, you need to provide **ton-x-extension** with the extension config in the content. To generate extension config, look at [Tonhub Link Generator](/docs/tonhub-link-generator) ```bash bash theme={null} ``` ## Custom tags Also, there are special tags which can be used for overriding metadata especially for Tonhub: ```bash bash theme={null} ``` ## Caching Metadata is cached FOREVER for url, stripping query params. For example: [https://tonwhales.com/club?test](https://tonwhales.com/club?test) == [https://tonwhales.com/club](https://tonwhales.com/club) [https://tonwhales.com/](https://tonwhales.com/) != [https://tonwhales.com/club](https://tonwhales.com/club) ## Resetting metadata To reset metadata for your service, request metadata with refetch=1 parameter: ```bash bash theme={null} curl -X GET https://connect.tonhubapi.com/apps/metadata\?url\=https://tonwhales.com\&refetch\=1 ``` # What is Tonhub Extension Source: https://docs.tonhub.com/docs/overview ## Tonhub extension ***Tonhub extension*** is a feature that allows you to use the entire TON ecosystem directly from the Tonhub app. Installed via link or QR, the extension will instantly appear on the home page of your Tonhub app and clicking it will automatically logging in you into the 3rd party app via the Tonhub wallet address. Using extensions is absolutely safe, they simplify authorization and access to third-party projects, but external applications do not get access to your funds, and each transaction, as usual, will require additional confirmation inside the wallet. ## Installation flow 1. Scan the extension's QR code or clicks on the link from the app. 2. Approve extension installation in Tonhub. 3. Follow the steps of signing agreements, donations, and so on if it is necessary. 4. Use your app from Tonhub's extensions list. ## Use cases The installed application's extension will be available on Tonhub app's main screen at any time. Developers of external TON app definite what extension can do in the end, but basically, you will meet the following: * Sign and revoke media files such as text, pictures, e.t.c. * Usage for custom transactions. * Browser of information related to your wallet about the linked app from the Tonhub. * Usage extension as a secure tool for subscriptions and agreements for 3d party apps. ## Implement your product into Tonhub as an Extension If you are a developer or founder of another TON app and want to use Tonhub Extension for your product, learn how to do it from [Getting started](/docs/apps) article. # Overview Source: https://docs.tonhub.com/docs/overview-1 ### The article is in progress and may contain inaccuracies. [Transfer link](/docs/transfer-link) - link for transfering TONs using Tonhub. [Extension Link](/docs/tonhub-link-generator) - links for [Tonhub Extensions](/docs/overview) # Overview Source: https://docs.tonhub.com/docs/overview-wallet What is Tonhub? ### What is Tonhub? [Tonhub](https://tonhub.com/) is one of the most easiest and secure crypto wallet in the TON blockchain. Every day our team does its best to maintain a balance between reliability and convenience. ### What is TON? [TON ](https://ton.org/)is a fully decentralized layer-1 blockchain designed by Telegram and developed by open-source community of experienced developers. TON developers community consisting of some of the best programmers in the world and Telegram blockchain contest winners. The crypto of the future must contain high speed, low fees and complete decentralization. TON combines all of these benefits, and Tonhub makes them easy to use. ### What features does Tonhub implement in the TON blockchain? Ton Whales team supports all up-to-date TON Blockchain features, such as: * 3d side services authorization * Staking * Jettons * DNS ### Using What you can do via Tonhub? * Manage your cryptocurrency \ Store, transfer, and do payments with our wallet. * Use to connect to TON services \ Use the wallet for quick login and purchase at services that support Tonhub connect. * Connect your business. \ If you are a developer or founder of a web3 service for the TON network, you can easily set up your service for fast and secure authorization and payments via Tonhub. ### Secure What does secure mean? * Advanced security and user privacy. \ Respecting your privacy is a core value in everything we developed. * You own all the data. \ Tonhub is a non-custodial wallet. Securely save your Seed Phrase and your funds will always be safe. * TON Foundation standards \ Our wallet runs on an official Smart Contract developed by the Telegram's team and finalized by Ton Foundation. * Trust through transparency \ Our core wallet technology is, and will always be, open-source [here](https://github.com/tonwhales/wallet). * Biometric authentication \ Easy and secure access to your wallet with a PIN or biometric login * Spam filter \ Flexible tool for filtering transactions you see in the transactions. # Using with React Source: https://docs.tonhub.com/docs/react-ton-x Use react webhook to automatically push data react-ton-x is a React library for building applications connected with Tonhub. * Wrap root component with the provider. * Store connection state. * Use **useTonhubConnect** hook without thinking about managing the connection state. # react-ton-x Installation [npm version](https://badge.fury.io/js/react-ton-x) ``` 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](/docs/tonhub-local-connector) section for more details. * The remote connector is used for creating a session from your application or site. See the [Remote Connector](/docs/tonhub-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** ```bash bash theme={null} import { RemoteConnectPersistance, TonhubConnectProvider } from 'react-ton-x'; const App = () => { // use any persistent state you want for the remote connector const [connectionState, setConnectionState] = useLocalStorage('connection', { type: 'initing' }); return ( {/* here goes your applicaton */} ) } ``` When use hook in any child component: ```bash bash theme={null} import { useTonhubConnect } from 'react-ton-x'; const Page = () => { const connect = useTonhubConnect(); if (connect.state.type === 'initing') { return Waiting for session; } if (connect.state.type === 'pending') { return Authorize; } return ( <> Network: {config.network} Address: {config.address.toFriendly()} ) } ``` # Sandbox Testnet Source: https://docs.tonhub.com/docs/sandbox Get your Testnet Sandbox app ## Wallet Apps In order to connect to Sandbox Network you need to use our dedicated apps: * [Sandbox for iOS](https://apps.apple.com/app/ton-development-wallet/id1607857373) * [Sandbox for Android](https://play.google.com/store/apps/details?id=com.tonhub.wallet.testnet) ## Test Faucet Testnet has a faucet as a [bot in Telegram](https://t.me/testgiver_ton_bot). Bot allows you to request 2 TON once per hour. To get test coins using the bot, enter the /start command and then the address of your Sandbox wallet. ## Network Connection Parameters * TonWhales explorer: [https://sandbox.tonwhales.com](https://sandbox.tonwhales.com) * Classic API: [https://sandbox.tonhubapi.com](https://sandbox.tonhubapi.com) * HTTP v4 API: [https://sandbox-v4.tonhubapi.com](https://sandbox-v4.tonhubapi.com) # Staking Pool beginners FAQ Source: https://docs.tonhub.com/docs/staking-pool-faq A frequently asked question about Ton Whales Staking Pool ## FAQ list 1. [How to calculate final profitability from one Staking Cycle?](/docs/staking-pool-faq#1-how-to-calculate-final-profitability-from-one-staking-cycle) 2. [How much time does the full Staking Cycle last?](/docs/staking-pool-faq#2-how-much-time-does-the-full-staking-cycle-last) 3. [When will Staking Cycle for my Staking Pool finish?](/docs/staking-pool-faq#3-when-will-the-staking-cycle-for-my-staking-pool-finish) 4. [Why does the Total Profitability value change all the time?](/docs/staking-pool-faq#4-why-does-the-total-profitability-value-change-all-the-time) 5. [How to Deposit my funds in the Ton Whales Staking Pool?](/docs/staking-pool-faq#5-how-to-deposit-my-funds-in-the-ton-whales-staking-pool) 6. [I've sent the "Deposit" transaction into the Staking Pool, but my funds came back to me. Why?](/docs/staking-pool-faq#6-ive-sent-the-deposit-transaction-into-the-staking-pool-but-my-funds-came-back-to-me-why) 7. [I've successfully sent the funds and received the transaction with the comment about the successful acceptance in the staking. How can I see my staked coins in staking?](/docs/staking-pool-faq#7-ive-successfully-sent-the-funds-and-received-the-transaction-with-the-comment-about-the-successful-acceptance-in-the-staking-how-can-i-see-my-staked-coins-in-staking) 8. [I've successfully sent the funds to the Staking Pool, but after the end of the Staking Cycle, my funds remained in the "Pending" status. Why is this "Pending" displayed?](/docs/staking-pool-faq#8-ive-successfully-sent-the-funds-to-the--staking-pool-but-after-the-end-of-the-staking-cycle-my-funds-remained-in-the-pending-status-why-is-this-pending-displayed) 9. [How to withdraw my funds from the Ton Whales Staking Pool?](/docs/staking-pool-faq#9--how-to-withdraw-my-funds-from-the-ton-whales-staking-pool) 10. [I've successfully requested a withdrawal from the Stake. How long do I have to wait to receive my funds in my wallet?](/docs/staking-pool-faq#10-ive-successfully-requested-a-withdrawal-from-the-stake-how-long-do-i-have-to-wait-to-receive-my-funds-in-my-wallet) 11. [I want to withdraw from staking but the error "There are not enough funds..." appear in Tonhub. I have staked more than 0.4 TON in your Staking Pools. Why do I see this error when I try to withdraw my funds?](/docs/staking-pool-faq#11-i-want-to-withdraw-from-staking-but-the-error-there-are-not-enough-funds-appear-in-tonhub-why-do-i-see-this-error-when-im-trying-to-withdraw-my-funds) 12. [I want to withdraw from staking but the error "There are not enough funds..." appear in Tonhub. Why do I see this error when I'm trying to withdraw my funds?](/docs/staking-pool-faq#12--why-do-i-have-to-send-a-withdrawal-transaction-twice-to-withdraw-funds) *** *** ### 1. How to calculate final profitability from one Staking Cycle? In order to calculate the profits from the Staking Pool, use the following formula: **(Your amount in Staking Pool)\* (The Total profitability of your Staking Pool) \* 0.00004109 = The total amount you get per Staking Cycle** For example, if you put 1000 TON into a staking pool with 6.5% total profitability, then your profit for one cycle will be: **1000\*6.5\*0.00004109 ≈ 0.267 TON** Total profitability for Staking Pools displays [here](https://tonwhales.com/staking). *** ### 2. How much time does the full Staking Cycle last? One full Staking Cycle lasts 36 hours. ### 3. When will the Staking Cycle for my Staking Pool finish? a. Check this information with Tonhub wallet in the Staking section: 1 - Choose Staking from the main screen \ 2 - Choose your Staking Pool \ 3 - Check the time left until the *Next Cycle* b. Check the amount of time the current Staking Cycle will last with [Ton Whales](https://tonwhales.com/staking/pool/EQCkR1cGmnsE45N4K0otPl5EnxnRakmGqeJUNua5fkWhales) site for your Staking Pool. Ton Whales site - Time left until the *Next Cycle* *** ### 4. Why does the Total Profitability value change all the time? The reward per Staking Cycle depends on: * Value of funds currently placed in Staking Pool. For more value of funds in Staking, it will be a lesser reward per TON. * Quantity of transaction in TON blockchain. For more transactions to be processed, there will be more rewards. As these values change all the time, Total Profitability changes too. *** ### 5. How to Deposit my funds in the Ton Whales Staking Pool? a. The most convenient way to do it with your [Tonhub](https://tonhub.com/download) Wallet: 1 - Choose Staking from the main screen. \ 2 - Choose the Staking Pool you need. \ 3 - Tap the "Top up" button. \ 4 - Input the amount you want to deposit from your Wallet. 5 - Confirm the transaction. \ 6 - See your Pending Deposit \ 7 - At the next Staking Cycle your funds will appear Staking balance. b. YouTube quick guides for [Tonhub ](https://www.youtube.com/watch?v=c4LTPZ_8Am0)and [Tonkeeper](https://www.youtube.com/watch?v=rNKnYk9TSNg). c. Follow [Ton Whales](https://tonwhales.com/staking) site guide for Staking Pool: 1 - Choose Staking Pool you want use \ 2 - Follow Deposit guide ### Make sure you left 0.4 TON on the wallet, you will need it to make the withdrawal. *** ### 6. I've sent the "Deposit" transaction into the Staking Pool, but my funds came back to me. Why? * The minimum amount for the "Deposit" request is 50 TON. * Make sure you text the comment for the transaction matches exactly **Deposit** . *** ### 7. I've successfully sent the funds and received the transaction with the comment about the successful acceptance in the staking. How can I see my staked coins in staking? a. You can check with [Tonhub](https://tonhub.com/download) (supported versions from iOS 1.19.5, Android 1.19.2): 1 - Choose Staking from the main screen. \ 2 - Choose the Staking Pool you need. \ 3 - Your funds are in Pending Deposit if the next Staking Cycle had not begun. \ 4 - With the next Staking Cycle your funds will shift to Stake and display on the Staking balance. b. You can check Staking Pool Stats with [Ton Whales](https://tonwhales.com/staking) site: 1 - Enter your wallet address and click "Next". \ 2 - Choose the Staking Pool you need. \ 3 - See your Staking Pool history. *** ### 8. I've successfully sent the funds to the Staking Pool, but after the end of the Staking Cycle, my funds remained in the "Pending" status. Why is this "Pending" displayed? * You've sent your funds to the Team Whales Pool, it's available only for our employees or top fifteen NFT holders. If you want to join the Whales Corp check [here](https://whalescorp.notion.site/TonWhales-job-offers-35dd96342bd64c9f96a4da85477638f7). * If you've sent your funds to the Whales Club Pool, you should have at least one [TON Whales NFT](https://getgems.io/collection/EQDvRFMYLdxmvY3Tk-cfWMLqDnXF_EclO2Fp4wwj33WhlNFT) in your TON wallet. If you bought NFT and placed it on sale to a Marketplace like getgems.io, your wallet has no NFT. *** ### 9. How to withdraw my funds from the Ton Whales Staking Pool? For withdrawal of your funds, you should send a request "Withdraw" from your Wallet. a. With a Tonhub it's more convenient to withdraw in a few steps: 1 - Choose Staking from the main screen. \ 2 - Choose your Staking Pool. 3 - Click Unstake. 4 - Enter the amount you want to Unstake and tap Continue. \ 5 - Confirm the transaction. b. With help of a guide on [Ton Whales](https://tonwhales.com/) site. c. Check the YouTube video guide for requesting "Withdraw" [Tonhub ](https://www.youtube.com/watch?v=ish1P7dPmgY\&ab_channel=TONWhales)or [Tonkeeper](https://www.youtube.com/watch?v=-0lixsZk8Ow\&ab_channel=TONWhales). *** ### 10. I've successfully requested a withdrawal from the Stake. How long do I have to wait to receive my funds in my wallet? If the Staking Cycle is over, you will get your funds immediately after you have sent the "Withdraw" request again. If the Staking Cycle is still in process, wait until the Staking Cycle is over (0-36 hours) and send the transaction request again. After that, the funds will be instantly credited to your wallet. You can check readiness for Withdraw with: a. [Tonhub](https://tonhub.com/download) in your Staking Pool details b. On the [Ton Whales](https://tonwhales.com/staking/top/EQCkR1cGmnsE45N4K0otPl5EnxnRakmGqeJUNua5fkWhales) site you can see your funds ready for transfer on your wallet in the “'Withdraw” column. *** ### 11. I want to withdraw from staking but the error "There are not enough funds..." appear in Tonhub. Why do I see this error when I'm trying to withdraw my funds? Make sure you have left 0.4 TON in the **wallet balance**, not on the Staking balance. You will need 0.4TON to make the withdrawal. *** ### 12. Why do I have to send a withdrawal transaction twice to withdraw funds? This is a feature of the smart contract. The first transaction will prepare your funds for withdrawal, and the second will send them to your wallet. # Extension Link Generator Source: https://docs.tonhub.com/docs/tonhub-link-generator You can use [Link Generator](https://tonwhales.com/tools/link) to create links to your app as a Tonhub Extension. Also, for test ussies with Sandbox, you can use [Sanbox Link Generator](https://sandbox.tonwhales.com/tools/link). # Local Connector Source: https://docs.tonhub.com/docs/tonhub-local-connector Connect to Tonhub when your app is running as extension `TonhubLocalConnector` allows you to connect get information about a wallet and request transactions and signatures when running as an extension. ## Check if app is running as extension Before trying to work with a wallet it is useful to check if web app is running as extension. ```bash bash theme={null} let isExtension: boolean = TonhubLocalConnector.isAvailable(); ``` ## Create connector After you checked that `connector` is available it is possible to create one: ```bash bash theme={null} let connector = new TonhubLocalConnector('sandbox'); // change to 'mainnet' for mainnet ``` ## Get Wallet and App Information `connector` has `config` field with useful fields about the current environment and wallet. ```bash bash theme={null} let config: { version: number; network: 'sandbox' | 'mainnet'; address: string; publicKey: string; walletConfig: string; walletType: string; signature: string; time: number; subkey: { domain: string; publicKey: string; time: number; signature: string; }; } = connector.config; ``` ## Verify wallet on backend You can check signed wallet config on backend using `TonhubLocalConnector.verifyWalletConfig`. `config` is cryptographically signed and you can safely use it as authentication proof without the need to sign something. ```bash bash theme={null} // NOTE: Not every field from config present here, you can safely ignore the rest of a config for validation purposes. config: { address: string; walletConfig: string; walletType: string; time: number; signature: string; subkey: { domain: string; publicKey: string; time: number; signature: string; }; } = connector.config; const valid = TonhubLocalConnector.verifyWalletConfig(config); ``` ## Requesting a transaction To request a transaction you can call `requestTransaction`: ```bash bash theme={null} const request: TonhubLocalTransactionRequest = { to: 'EQCkR1cGmnsE45N4K0otPl5EnxnRakmGqeJUNua5fkWhales', // Destination value: '10000000000', // Amount in nano-tons stateInit: '....', // Optional serialized to base64 string state_init cell text: 'Hello world', // Optional comment. If no payload specified - sends actual content, if payload is provided this text is used as UI-only hint payload: '....' // Optional serialized to base64 string payload cell }; const response: TonhubLocalTransactionResponse = await connector.requestTransaction(request); if (response.type === 'rejected') { // Handle rejection } else if (response.type === 'success') { // Handle successful transaction const externalMessage = response.response; // Signed body of external message that was sent to the network } else { throw new Error('Impossible'); } ``` ## Requesting a signature ```bash bash theme={null} const payloadToSign = Buffer.concat([Buffer.from([0, 0, 0, 0]), Buffer.from('Some random string')]); const payload = beginCell() .storeBuffer(payloadToSign) .endCell() .toBoc({idx:false}) .toString('base64'); const text = 'Please, sign our terms or service and privacy policy'; // Request body const request: TonhubLocalSignRequest = { text: 'Hello world', // Text to sign, presented to the user. payload: payload // Optional serialized to base64 string payload cell }; const response: TonhubLocalSignResponse = await connector.requestSign(request); if (response.type === 'rejected') { // Handle rejection } else if (response.type === 'success') { // Handle successful transaction const signature = response.signature; // You can check signature on the backend with TonhubConnector.verifySignatureResponse let correctSignature = TonhubConnector.verifySignatureResponse({ signature: signature, config: walletConfig }); } else { throw new Error('Impossible'); } ``` # Remote Connector Source: https://docs.tonhub.com/docs/tonhub-remote-connector Connecting to Tonhub wallet from your dApp or bot `TonhubConnector` allows you to connect to a wallet app from a web browser, bot or backend. ## Creating a connector Before connecting to an app you need to create a connector: ```bash bash theme={null} import { TonhubConnector} from "ton-x"; const connector = new TonhubConnector({network: "mainnet"}); //Set network "sandbox" for testnet ``` ## Starting a new session Before requesting a connection to a wallet you need to create **session** and persist it's data somewhere in your app. ### You can generate session anywhere It could be web app, bot, console app. ton-x doesn't depend on specific environment. ### Do not forget to persist session At this step you need to persist and reuse this session values even in the case of app restart until session was revoked (see later) ```bash bash theme={null} let session: TonhubCreatedSession = await connector.createNewSession({ name: 'Your app name', url: 'Your app url' }); // Session ID, Seed and Auth Link const sessionId = session.id; const sessionSeed = session.seed; const sessionLink = session.link; ``` ## Present a session link to the user After session was created and persisted you can present user a link to connect to your app. On desktop you need to show a **QR Code** and on mobile you need to show it as a normal **link** that user will need to press. ### Do not try to navigate your user automatically This is almost never works on mobile ## Await session confirmation After presenting a link the user you can await session confirmation or rejection. ### Revoked session couldn't be restarted If user rejected connection or backend revoked a token you can't use it again and have to create a new one. ```bash bash theme={null} const session: TonhubSessionAwaited = await connector.awaitSessionReady(sessionId, 5 * 60 * 1000); // 5 min timeout if (session.state === 'revoked' || session.state === 'expired') { // Handle revoked or expired session } else if (session.state === 'ready') { // Handle session const walletConfig: TonhubWalletConfig = session.walletConfig; // You need to persist this values to work with this connection: // * sessionId // * sessionSeed // * walletConfig // You can check signed wallet config on backend using TonhubConnector.verifyWalletConfig. // walletConfig is cryptographically signed for specific session and other parameters // you can safely use it as authentication proof without the need to sign something. const correctConfig: boolean = TonhubConnector.verifyWalletConfig(sessionId, walletConfig); // ... } else { throw new Error('Impossible'); } ``` ## Requesting Transaction To request a transaction you can call `requestTransaction` in connector after successful session. ```bash bash theme={null} // Request body const request: TonhubTransactionRequest = { seed: sessionSeed, // Session Seed appPublicKey: walletConfig.appPublicKey, // Wallet's app public key to: 'EQCkR1cGmnsE45N4K0otPl5EnxnRakmGqeJUNua5fkWhales', // Destination value: '10000000000', // Amount in nano-tons timeout: 5 * 60 * 1000, // 5 minut timeout stateInit: '....', // Optional serialized to base64 string state_init cell text: 'Hello world', // Optional comment. If no payload specified - sends actual content, if payload is provided this text is used as UI-only hint payload: '....' // Optional serialized to base64 string payload cell }; const response: TonhubTransactionResponse = await connector.requestTransaction(request); if (response.type === 'rejected') { // Handle rejection } else if (response.type === 'expired') { // Handle expiration } else if (response.type === 'invalid_session') { // Handle expired or invalid session } else if (response.type === 'success') { // Handle successful transaction const externalMessage = response.response; // Signed body of external message that was sent to the network } else { throw new Error('Impossible'); } ``` ## Requesting Signature To request a transaction you can call `requestTransaction` in connector after successful session. ```bash bash theme={null} const payloadToSign = Buffer.concat([Buffer.from([0, 0, 0, 0]), Buffer.from('Some random string')]); const payload = beginCell() .storeBuffer(payloadToSign) .endCell() .toBoc({idx:false}) .toString('base64'); const text = 'Please, sign our terms or service and privacy policy'; // Request body const request: TonhubSignRequest = { seed: sessionSeed, // Session Seed appPublicKey: walletConfig.appPublicKey, // Wallet's app public key timeout: 5 * 60 * 1000, // 5 minut timeout text: 'Hello world', // Text to sign, presented to the user. payload: payload // Optional serialized to base64 string payload cell }; const response: TonhubSignResponse = await connector.requestSign(request); if (response.type === 'rejected') { // Handle rejection } else if (response.type === 'expired') { // Handle expiration } else if (response.type === 'invalid_session') { // Handle expired or invalid session } else if (response.type === 'success') { // Handle successful transaction const signature = response.signature; // You can check signature on the backend with TonhubConnector.verifySignatureResponse let correctSignature = TonhubConnector.verifySignatureResponse({ signature: signature, config: walletConfig }); } else { throw new Error('Impossible'); } ``` ## Check session state If you need to check from time to time that your session is a valid you can call `getSessionState` method. While it is possible to track session state we are **NOT recommending** to do so since you can always re-authenticate user if transaction or signature request requested and session became expired. ```bash bash theme={null} const session: TonhubSessionState = await connector.getSessionState(sessionId); ``` # Transfer link Source: https://docs.tonhub.com/docs/transfer-link Transfer link allows to create and send TON transactions from Tonhub with an HTTP request. This page describes how transfer links are structured. As always, you can use the Sandbox environment for testing and development. To create link for [sandbox](/docs/sandbox), use *[https://test.tonhub.com/](https://test.tonhub.com/)* (ton-test://transfer) endpoint instead of *[https://tonhub.com/](https://tonhub.com/)* (ton://transfer) The link follows this format ```bash bash theme={null} https://tonhub.com/transfer/{ADDRESS}?amount=5000000000 ``` Query parameters you can specify: | Parameter | Req | Description | | --------- | -------- | ----------------------------------------------------------------------------------------- | | amount | Required | The amount of the transaction in nano TONs/Jettons | | text | Optional | Comment on the transaction, if the bin is specified, it is the purpose of the transaction | | bin | Optional | Binary payload of the transaction, serialized as base64 BOC | | init | Optional | State init, serialized as base64 BOC | | jetton | Optional | Jettons Master address for jetton transfers | ## Examples ### Send TON to address This link is used for sending 0.5 TON to kQDvRFMYLdxmvY3Tk-cfWMLqDnXF\_EclO2Fp4wwj33WhlGrZ ```bash bash theme={null} https://test.tonhub.com/transfer/kQDvRFMYLdxmvY3Tk-cfWMLqDnXF_EclO2Fp4wwj33WhlGrZ?amount=500000000 ``` ### Send TON to address with the comment This link is used for Deposit in Ton Whales Staking Pools. You can see how it was used [here](https://tonsandbox.com/staking/pool/kQBs7t3uDYae2Ap4686Bl4zGaPKvpbauBnZO_WSop1whaLEs), in *Deposit via Tonhub* button. ```bash bash theme={null} https://tonsandbox.com/staking/pool/kQBs7t3uDYae2Ap4686Bl4zGaPKvpbauBnZO_WSop1whaLEs ``` [https://test.tonhub.com/transfer/EQBs7t3uDYae2Ap4686Bl4zGaPKvpbauBnZO\_WSop1whaAqm?text=Deposit](https://test.tonhub.com/transfer/EQBs7t3uDYae2Ap4686Bl4zGaPKvpbauBnZO_WSop1whaAqm?text=Deposit) ### Deploying contract This link is used for deploying the contract (*init*) and contains the first message (*bin*). Also, there is a *text*, so the purpose of the transaction is "Deploy contract" ```bash bash theme={null} https://tonhub.com/transfer/${address}?text=Deploy%20contract&amount=500000000&init=${stateInit}&bin=${payload} ``` ### Jetton transfers This link is used for sending Jettons via link. Note that you will loose *init* & *bin* params when you add *jetton* ```bash bash theme={null} https://tonhub.com/transfer/{address}?text=Test%20transfer&amount=5000000000&jetton=EQCcLAW537KnRg_aSPrnQJoyYjOZkzqYp6FVmRUvN1crSazV ```