Merge pull request #316 from reveloper/ton-connect-patch

messages_page_updated

docs/develop/dapps/ton-connect/message-builders.mdx

@@ -1,27 +1,64 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Preparing Messages
 
-While using TON Connect you should build Message Body for Payload for various transactions. Here you can find most relatable examples for payload for using it in TON Connect SDKs.
+While using TON Connect, you should construct the Message Body for the Payload used in various transactions. On this page you can find the most relevant examples of payload for use with the TON Connect SDKs.
 
 :::warning
 The page is under development.
 :::
 
+:::info
+It is expected, that you learn basics on the creating TON Connect connection. Learn more with the [integration manual](/develop/dapps/ton-connect/integration).
+:::
+
 
 ## TON Connect JS SDK Examples
 
-### Regular TON Transfer
-TON Connect SDKs include wrappers for sending messages, making it easy to prepare regular transfers of Toncoins between two wallets.
+### Transaction Template
 
-All JS examples created based on connector @tonconnect/sdk:
+No matter what level of the task developer are solving, typically it is necessary to use connector entity from @tonconnect/sdk or @tonconnect/ui.
+Examples created based on @tonconnect/sdk and @tonconnect/ui:
 
-```ts
+<Tabs groupId="TON Connect template">
+<TabItem value="tonconnect-js" label="@tonconnect/sdk">
+
+```js
 import TonConnect from '@tonconnect/sdk';
 const connector = new TonConnect();
+
+await connector.sendTransaction({
+    //transaction body
+})
+
+```
+
+</TabItem>
+
+<TabItem value="tonconnect-ui" label="@tonconnect/ui">
+
+```js
+import TonConnect from '@tonconnect/ui';
+
+
+transaction = {} //definition of the transaction body
+
 ```
 
-A regular TON transfer using the TON Connect JS SDK can be executed as follows:
+</TabItem>
+</Tabs>
+
+### Regular TON Transfer
+
+TON Connect SDKs include wrappers for sending messages, making it easy to prepare regular transfers of Toncoins between two wallets as default transaction without payload.
+
+A regular TON transfer using the TON Connect JS SDKs can be executed as follows:
 
 ```ts
+import TonConnect from '@tonconnect/sdk';
+const connector = new TonConnect();
+
 await connector.sendTransaction({
     messages: [
         {
@@ -30,37 +67,76 @@ await connector.sendTransaction({
         }
     ]
 })
+
 ```
 
 :::tip
 Learn more about [TON Smart Contract Addresses](/learn/overviews/addresses).
 :::
 
-For other custom tasks, a specific payload should be specified.
+For specific custom transaction, a certain payload must be defined.
 
 
 
 
 ### Transfer With Comment
 
+The simplest example is adding a payload with a comment. See more details on [this page](/develop/smart-contracts/guidelines/internal-messages#simple-message-with-comment).
+Before transaction, it is necessary prepare a `body` [cell](/develop/data-formats/cell-boc) via the [@ton/ton](https://github.com/ton-org/ton) JavaScript library.
+
 ```js
+import { beginCell } from '@ton/ton'
+
 const body = beginCell()
   .storeUint(0, 32) // write 32 zero bits to indicate that a text comment will follow
   .storeStringTail("Hello, TON!") // write our text comment
   .endCell();
+```
 
+The transaction body is created by the following:
+
+<Tabs groupId="TON Connect transaction">
+<TabItem value="tonconnect-js" label="@tonconnect/sdk">
+
+
+```js
+import TonConnect from '@tonconnect/sdk';
+const connector = new TonConnect();
 
 await connector.sendTransaction({
   validUntil: Math.floor(Date.now() / 1000) + 360,
   messages: [
     {
-      address: jettonWalletContract,
+      address: destination,
       amount: toNano("0.05"),
       payload: body.toBoc().toString("base64")
     }
   ]
 })
 ```
+</TabItem>
+
+<TabItem value="tonconnect-ui" label="@tonconnect/ui">
+
+```js
+import TonConnectUI from '@tonconnect/ui'
+
+const transaction = {
+    validUntil: Math.floor(Date.now() / 1000) + 360,
+    messages: [
+        {
+            address: jettonWalletContract,
+            amount: toNano("0.05"),
+            payload: body.toBoc().toString("base64")
+        }
+    ]
+}
+
+const result = await tonConnectUI.sendTransaction(transaction)
+```
+</TabItem>
+</Tabs>
+
 
 ### Jetton Transfer
 
@@ -171,6 +247,7 @@ The `body` for Jetton Burn([TEP-74](https://github.com/ton-blockchain/TEPs/blob/
 
 Message places into the following request:
 
+
 ```js
 await connector.sendTransaction({
   validUntil: Math.floor(Date.now() / 1000) + 360,
@@ -231,7 +308,7 @@ import { beginCell, toNano} from '@ton/ton'
 `WALLET_DST` - Address - The address of the initial NFT owner for the receiving excess
 
 
-#### NFT Sale (GetGems)
+### NFT Sale (GetGems)
 
 Here is an example of preparing message and transaction for sale on GetGems marketplace, according to contract [nft-fixprice-sale-v3r2](https://github.com/getgems-io/nft-contracts/blob/main/packages/contracts/sources/nft-fixprice-sale-v3r2.fc).
 
@@ -333,15 +410,15 @@ await connector.sendTransaction({
   validUntil: Math.floor(Date.now() / 1000) + 360,
   messages: [
     {
-      address: nftItemAddress,
-      amount: toNano("1.08"),
+      address: nftItemAddress, //address of NFT Item contract, that should be placed on market
+      amount: toNano("1.08"), // amount that will require on gas fees, excess will be return
       payload: transferNftBody.toBoc().toString("base64")
     }
   ]
 })
 ```
 
-#### NFT Buy (GetGems)
+### NFT Buy (GetGems)
 
 The process of buy NFT for [nft-fixprice-sale-v3r2](https://github.com/getgems-io/nft-contracts/blob/main/packages/contracts/sources/nft-fixprice-sale-v3r2.fc) sale contract could be carry out with regular transfer without payload, only important thing to send correct amount, that calculates as follows:
 `buyAmount = Nftprice TON + 1.0 TON`.
@@ -573,3 +650,12 @@ transaction = {
 ```
 
 
+## Authors
+- JavaScript examples provided by [@aSpite](https://t.me/aspite)
+- Python examples provided by [@yunwine](https://t.me/yungwine)
+
+## See Also
+
+* [TON Connect SDKs](/develop/dapps/ton-connect/developers)
+* [TON Connect - Sending Messages](/develop/dapps/ton-connect/transactions)
+* [Smart Contract Developmet - Sending Messages (Low Level)](/develop/smart-contracts/messages)

docs/develop/dapps/ton-connect/transactions.md

@@ -155,3 +155,7 @@ After confirmation, we may see our transaction complete at [tonscan.org](https:/
 It's pretty easy to handle request rejection, but when you're developing some project it's better to know what would happen in advance.
 
 When a user clicks "Cancel" in the popup in the wallet application, an exception is thrown: `Error: [TON_CONNECT_SDK_ERROR] Wallet declined the request`. This error can be considered final (unlike connection cancellation) - if it has been raised, then the requested transaction will definitely not happen until the next request is sent.
+
+## See Also
+
+* [Preparing Messages](/develop/dapps/ton-connect/message-builders)