# TON (The Open Network)

## What is TON?

[**The Open Network**](https://docs.ton.org/learn/introduction) **(TON)** is a decentralized and open internet platform made up of several components. These include: TON Blockchain, TON DNS, TON Storage, and TON Sites. TON Blockchain is the core protocol that connects TON’s underlying infrastructure together to form the greater TON Ecosystem.

## Directual TON plugin

Directual TON plugin allows you to create Web-apps, Telegram Mini Apps easily and securely using no-code approach.

{% embed url="<https://youtu.be/ITFuJdNdUkI>" %}

### Step 1. Install free TON plugin from the Marketplace in your Directual app

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FCwCU4EFRhAXHWi3gtomp%2Fplugin.webp?alt=media&#x26;token=c2ca24db-6722-41ba-aec3-64b264666b48" alt=""><figcaption></figcaption></figure>

### Step 2. Add a webhook for notifications

Go to API → [Webhooks](https://readme.directual.com/api-integrations/webhooks) and add a new one. Turn on CORS for it!

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2Fnb8LXfBCBJtKbNqoyeMn%2Fwh.webp?alt=media&#x26;token=9cdebf1c-6731-4ff7-be1d-8238042bfb82" alt=""><figcaption></figcaption></figure>

### Step 3. Exploring the scenario plugin

First — you have **Get transactions** step in your scenario. It calls `/v2/blockchain/accounts/{account_id}/transactions` method of [TON API](https://docs.tonconsole.com/tonapi/api-v2).

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FqCmfAGf96MQImNPkHpHR%2Fscen1.webp?alt=media&#x26;token=d5fc808c-bb78-4ddf-8321-57607c7a1f34" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Usually, such scenarios run on a scheduler manner (hourly, for example), the data structure (let's name it `trigger`) contains a **single object**.
{% endhint %}

Specify the wallet address to get the transactions and the field where to save the API response:

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FgCYvYMsyVD1sPF82S7Yi%2Fscen2.webp?alt=media&#x26;token=2957df18-e929-4e62-9a31-aa6546b6eaa0" alt=""><figcaption></figcaption></figure>

The response looks like:

```json
{
    "transactions": [
        {
            "hash": "8c0276b72beecc5d7eba39d693fb9f8b266258caef1200f7970006b2f79d7c06",
            "lt": 46659096000001,
            "account": {
                "address": "0:84a12aee228a602c8e37a84c7e62d7846c26d6",
                "is_scam": false,
                "is_wallet": true
            },
            "success": true,
            "in_msg": {
                "msg_type": "int_msg",
                "value": 20000000,
                "fwd_fee": 266669,
                "destination": {
                    "address": "0:84a12aee228aa63a84c7e62d7846c26d6",
                    "is_scam": false,
                    "is_wallet": true
                },
                "source": {
                    "address": "0:18857605abfbbc6f1bfbb4f668bf3680",
                    "is_scam": false,
                    "is_wallet": true
                },
                "decoded_body": {
                    "text": "Order #123"
                }
            }
        }
    ]
}
```

Key things here are:&#x20;

* `transactions.in_msg.value`
* `transactions.in_msg.decoded_body.text`

Let's use [JSON-step](https://readme.directual.com/scenarios/editing-scenarios/action-steps/json-step) for parsing the response! For that we need:

1. Create a new data structure `ton transactions` with needed fields;
2. Add a field type of `arrayLink` to transactions data structure to the structure `trigger`
3. Configure JSON-step: add the json-scheme (copy it above) and set up matching

<div><figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F6sa29JuozmDJsgWE2XVy%2Fjson1.webp?alt=media&#x26;token=4518f33e-a6c9-4171-81a0-1fcfc933f6b1" alt=""><figcaption></figcaption></figure> <figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2Fqk1B8NJhtG1WMNeqcpHm%2Fjson2.webp?alt=media&#x26;token=8b83cac9-c784-4e2a-8c2a-764af069aef0" alt=""><figcaption></figcaption></figure> <figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FCZzRG4LroovIlPVOtZ9N%2Fjson3.webp?alt=media&#x26;token=57c8446d-d379-4eb4-8247-8982aa966f72" alt=""><figcaption></figcaption></figure></div>

All right, we get all the transactions. Then we can identify them using comments/values, etc.

{% hint style="warning" %}
Hint: if you want to extract oder number from text like `Your order is #12345`, use the following expression (turn on JS-evaluation):&#x20;

```
"{{text}}".match(/#(.+)/) ? "{{text}}".match(/#(.+)/)[1] : ""
```

{% endhint %}

### Step 4. Exploring web-plugin

Add a **Pay in TONs** component to your web-page

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FvDdUm9B68oLzpJnKtuXO%2Fweb1.webp?alt=media&#x26;token=5700936e-393b-4321-8332-a4857fce02a6" alt=""><figcaption></figcaption></figure>

Configure the plugin (paste to the `webhook` URL of the [webhook we'e created](#step-2.-add-a-webhook-for-notifications)).

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F0EwLzQ8KXCji1yyQwVqg%2Fweb2.webp?alt=media&#x26;token=83deaf0b-462c-40a5-a38f-6d61d8aab9da" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Pay attention that `amount` is in nanoTons. 1 000 000 000 nanoTONs = 1 TON
{% endhint %}

The user will see the two-component:

1. First step – connecting wallet (Telegram wallet, MyTonWallet, Tonkeeper, etc.)
2. Second step – confirming transaction

<div><figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FQZbUPNzf17EAorJsp0ta%2Fwall1.webp?alt=media&#x26;token=ae30a220-230b-49ee-9a83-bac9ceffe907" alt=""><figcaption></figcaption></figure> <figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2Fb70A6CBD9FDLb8vkvIrK%2Fwall2.webp?alt=media&#x26;token=f81e270e-78a7-4617-a19f-3599caf0dbf2" alt=""><figcaption></figcaption></figure></div>

### Step 5. Processing transactions

When the user confirms the transaction, you'll get a notification via webhook (don't forget to turn on CORS for it!)

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FKkbBDU034qew6JNj3IHY%2Fwh_result.webp?alt=media&#x26;token=086744e4-57ae-457e-ae90-573901239fa6" alt=""><figcaption></figcaption></figure>

Notification body:

```json
{
   "user": "36142243",
   "addressFrom": "0:18857605abf7216fa98ae1bbc6f1bfbb4f668bf3680",
   "addressTo": "UQCEoSruIoqmNBdQrEzTd6hMfmLXhGwm1hF4",
   "orderNumber": "123",
   "status": "success",
   "amountTons": "0.02",
   "amountNanoTons": 20000000
}
```

`user` will be `null` if your user is not authorised.

{% hint style="warning" %}
Don't use that notification for confirming your orders! Because one can send a fake request to your webhook. Use that notification as a trigger for checking the blockchain!
{% endhint %}

Bear in mind that there may be a certain lag between notification and transaction completing (usually 1-3 minutes). Thus, use [Delay step](https://readme.directual.com/scenarios/editing-scenarios/system-steps/delay-step) in the scenario, that is triggered by the webhook.

<figure><img src="https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FJrlkmsumOmZ0PUaJJ32d%2Ffinal.webp?alt=media&#x26;token=c2789e1f-18f8-4a9f-a90f-573ccd941dff" alt=""><figcaption></figcaption></figure>