diff --git a/.gitignore b/.gitignore index aae80f5..e266e28 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ package.json package-lock.json node_modules *.output.txt -temp \ No newline at end of file +temp +tsconfig.json diff --git a/01-wallet/index.md b/01-wallet/index.md index 70b0200..6daa1c3 100644 --- a/01-wallet/index.md +++ b/01-wallet/index.md @@ -122,7 +122,13 @@ For a choice of IDE, you will need anything that has decent TypeScript support. Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following: ```console -npm install ts-node +npm install typescript ts-node +``` + +Next, we're going to initialize Typescript project: + +```console +npx tsc --init ``` --- diff --git a/01-wallet/test/npmton/index.sh b/01-wallet/test/npmton/index.sh index 4a66cb7..300dca0 100755 --- a/01-wallet/test/npmton/index.sh +++ b/01-wallet/test/npmton/index.sh @@ -1,6 +1,8 @@ set -ev npm init --yes npm install dotenv +npm install typescript +npx tsc --init npm install ts-node npm install @ton/ton @ton/crypto @ton/core npm install @orbs-network/ton-access @@ -9,4 +11,4 @@ diff step7.output.txt step7.expected.txt npx ts-node step8.ts > step8.output.txt diff step8.output.txt step8.expected.txt npx ts-node step9.ts > step9.output.txt -diff step9.output.txt step9.expected.txt \ No newline at end of file +diff step9.output.txt step9.expected.txt diff --git a/01-wallet/test/tonweb/index.sh b/01-wallet/test/tonweb/index.sh index 854b5c5..a1093fa 100755 --- a/01-wallet/test/tonweb/index.sh +++ b/01-wallet/test/tonweb/index.sh @@ -1,6 +1,8 @@ set -ev npm init --yes npm install dotenv +npm install typescript +npx tsc --init npm install ts-node npm install tonweb tonweb-mnemonic npm install @orbs-network/ton-access @@ -9,4 +11,4 @@ diff step7.output.txt step7.expected.txt npx ts-node step8.ts > step8.output.txt diff step8.output.txt step8.expected.txt npx ts-node step9.ts > step9.output.txt -diff step9.output.txt step9.expected.txt \ No newline at end of file +diff step9.output.txt step9.expected.txt diff --git a/02-contract/index.md b/02-contract/index.md index b3bb389..abc75f6 100644 --- a/02-contract/index.md +++ b/02-contract/index.md @@ -226,7 +226,7 @@ network:testnet ```ts import * as fs from "fs"; import { getHttpEndpoint } from "@orbs-network/ton-access"; -import { mnemonicToWalletKey } from "ton-crypto"; +import { mnemonicToWalletKey } from "@ton/crypto"; import { TonClient, Cell, WalletContractV4 } from "@ton/ton"; import Counter from "../wrappers/Counter"; // this is the interface class from step 7 @@ -286,7 +286,7 @@ network:mainnet ```ts import * as fs from "fs"; import { getHttpEndpoint } from "@orbs-network/ton-access"; -import { mnemonicToWalletKey } from "ton-crypto"; +import { mnemonicToWalletKey } from "@ton/crypto"; import { TonClient, Cell, WalletContractV4 } from "@ton/ton"; import Counter from "../wrappers/Counter"; // this is the interface class from step 7 @@ -501,7 +501,7 @@ network:testnet --- ```ts import { getHttpEndpoint } from "@orbs-network/ton-access"; -import { mnemonicToWalletKey } from "ton-crypto"; +import { mnemonicToWalletKey } from "@ton/crypto"; import { TonClient, WalletContractV4, Address } from "@ton/ton"; import Counter from "../wrappers/Counter"; // this is the interface class we just implemented @@ -553,7 +553,7 @@ network:mainnet --- ```ts import { getHttpEndpoint } from "@orbs-network/ton-access"; -import { mnemonicToWalletKey } from "ton-crypto"; +import { mnemonicToWalletKey } from "@ton/crypto"; import { TonClient, WalletContractV4, Address } from "@ton/ton"; import Counter from "../wrappers/Counter"; // this is the interface class we just implemented diff --git a/02-contract/test/index.sh b/02-contract/test/index.sh index f6ac97f..5b7c029 100755 --- a/02-contract/test/index.sh +++ b/02-contract/test/index.sh @@ -1,6 +1,8 @@ set -ev npm init --yes npm install dotenv +npm install typescript +npx tsc --init npm install ts-node npm install @ton-community/func-js npm install @ton/ton @ton/core @ton/crypto @@ -10,4 +12,4 @@ npx ts-node deploy.step8.ts > deploy.step8.output.txt COUNTER_ADDRESS=`cut -d : -s -f 2 < deploy.step8.output.txt` npx ts-node getCounter.ts > getCounter.output.txt diff getCounter.output.txt getCounter.expected.txt COUNTER_ADDRESS=`cut -d : -s -f 2 < deploy.step8.output.txt` npx ts-node sendIncrement.ts > sendIncrement.output.txt -diff sendIncrement.output.txt sendIncrement.expected.txt \ No newline at end of file +diff sendIncrement.output.txt sendIncrement.expected.txt diff --git a/build.sh b/build.sh index 81133a3..4512259 100755 --- a/build.sh +++ b/build.sh @@ -1,5 +1,7 @@ npm init --yes npm install ts-node +npm install typescript +npx tsc --init --target es2020 npm pkg set scripts.watch="sass -w styles.scss docs/assets/styles.css" npm install ejs @types/ejs npm install sass diff --git a/docs/01-wallet/index.html b/docs/01-wallet/index.html index 06cd4de..97b1240 100644 --- a/docs/01-wallet/index.html +++ b/docs/01-wallet/index.html @@ -25,7 +25,7 @@
- +

Network

@@ -33,7 +33,7 @@

    - +

  • Testnet

    @@ -44,7 +44,7 @@

    Testnet

    Cons: less reliable, requires special wallets

    • - +

  • Mainnet

    @@ -55,10 +55,10 @@

    Mainnet

    Cons: not free to use (but very cheap)

    • - +
- +

Library

@@ -66,7 +66,7 @@

    - +

  • npm ton (JavaScript)

    @@ -77,7 +77,7 @@

    npm ton (JavaScript)

    Cons: no support for all ton services

    • - +

  • TonWeb (JavaScript)

    @@ -88,10 +88,10 @@

    TonWeb (JavaScript)

    Cons: mediocre TypeScript support

    • - +
- +

Tutorials

@@ -111,7 +111,7 @@

Help

- +

TON Hello World part 1: Step by step guide for working with your first TON wallet

@@ -169,9 +169,12 @@

Step 6: Set up your local machine f

The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
+

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
 

-
Next, we're going to install a JavaScript package named ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

+
Next, we're going to install a JavaScript package named @ton/ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install @ton/ton @ton/crypto @ton/core
 

 
Step 7: Get the wallet address programmatically

@@ -306,7 +309,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

- +

TON Hello World part 1: Step by step guide for working with your first TON wallet

@@ -364,7 +367,10 @@

Step 6: Set up your local machine f

The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
+

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
 

 
Next, we're going to install a JavaScript package named TonWeb that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install tonweb tonweb-mnemonic
@@ -499,7 +505,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

- +

TON Hello World part 1: Step by step guide for working with your first TON wallet

@@ -559,9 +565,12 @@

Step 6: Set up your local machine f

The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
 

-
Next, we're going to install a JavaScript package named ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
+

+
Next, we're going to install a JavaScript package named @ton/ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install @ton/ton @ton/crypto @ton/core
 

 
Step 7: Get the wallet address programmatically

@@ -696,7 +705,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

- +

TON Hello World part 1: Step by step guide for working with your first TON wallet

@@ -756,7 +765,10 @@

Step 6: Set up your local machine f

The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
+

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
 

 
Next, we're going to install a JavaScript package named TonWeb that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install tonweb tonweb-mnemonic
@@ -891,7 +903,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

- +
diff --git a/docs/01-wallet/mainnet-npmton.html b/docs/01-wallet/mainnet-npmton.html index aef6eb8..d4feefa 100644 --- a/docs/01-wallet/mainnet-npmton.html +++ b/docs/01-wallet/mainnet-npmton.html @@ -46,9 +46,12 @@

Step 6: Set up your local machine f

The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
 

-
Next, we're going to install a JavaScript package named ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
+

+
Next, we're going to install a JavaScript package named @ton/ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install @ton/ton @ton/crypto @ton/core
 

 
Step 7: Get the wallet address programmatically

diff --git a/docs/01-wallet/mainnet-npmton.md b/docs/01-wallet/mainnet-npmton.md
index 2c7cb48..7298fb9 100644
--- a/docs/01-wallet/mainnet-npmton.md
+++ b/docs/01-wallet/mainnet-npmton.md
@@ -96,7 +96,13 @@ For a choice of IDE, you will need anything that has decent TypeScript support.
 Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:
 
 ```console
-npm install ts-node
+npm install typescript ts-node
+```
+
+Next, we're going to initialize Typescript project:
+
+```console
+npx tsc --init
 ```
 
 Next, we're going to install a JavaScript package named [@ton/ton](https://www.npmjs.com/package/@ton/ton) that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:
diff --git a/docs/01-wallet/mainnet-tonweb.html b/docs/01-wallet/mainnet-tonweb.html
index 744df7b..f826ffa 100644
--- a/docs/01-wallet/mainnet-tonweb.html
+++ b/docs/01-wallet/mainnet-tonweb.html
@@ -46,7 +46,10 @@ 
Step 6: Set up your local machine f
 
The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

 
For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

 
Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
+

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
 

 
Next, we're going to install a JavaScript package named TonWeb that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install tonweb tonweb-mnemonic
diff --git a/docs/01-wallet/mainnet-tonweb.md b/docs/01-wallet/mainnet-tonweb.md
index e9471e4..4b92011 100644
--- a/docs/01-wallet/mainnet-tonweb.md
+++ b/docs/01-wallet/mainnet-tonweb.md
@@ -96,7 +96,13 @@ For a choice of IDE, you will need anything that has decent TypeScript support.
 Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:
 
 ```console
-npm install ts-node
+npm install typescript ts-node
+```
+
+Next, we're going to initialize Typescript project:
+
+```console
+npx tsc --init
 ```
 
 Next, we're going to install a JavaScript package named [TonWeb](https://github.com/toncenter/tonweb) that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:
diff --git a/docs/01-wallet/testnet-npmton.html b/docs/01-wallet/testnet-npmton.html
index a5d6c40..8e764aa 100644
--- a/docs/01-wallet/testnet-npmton.html
+++ b/docs/01-wallet/testnet-npmton.html
@@ -48,9 +48,12 @@ 
Step 6: Set up your local machine f
 
The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

 
For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

 
Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
 

-
Next, we're going to install a JavaScript package named ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
+

+
Next, we're going to install a JavaScript package named @ton/ton that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install @ton/ton @ton/crypto @ton/core
 

 
Step 7: Get the wallet address programmatically

diff --git a/docs/01-wallet/testnet-npmton.md b/docs/01-wallet/testnet-npmton.md
index c147f5f..0fa3b5a 100644
--- a/docs/01-wallet/testnet-npmton.md
+++ b/docs/01-wallet/testnet-npmton.md
@@ -100,7 +100,13 @@ For a choice of IDE, you will need anything that has decent TypeScript support.
 Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:
 
 ```console
-npm install ts-node
+npm install typescript ts-node
+```
+
+Next, we're going to initialize Typescript project:
+
+```console
+npx tsc --init
 ```
 
 Next, we're going to install a JavaScript package named [@ton/ton](https://www.npmjs.com/package/@ton/ton) that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:
diff --git a/docs/01-wallet/testnet-tonweb.html b/docs/01-wallet/testnet-tonweb.html
index 7c5cc6e..51c5f0c 100644
--- a/docs/01-wallet/testnet-tonweb.html
+++ b/docs/01-wallet/testnet-tonweb.html
@@ -48,7 +48,10 @@ 
Step 6: Set up your local machine f
 
The libraries we're going to rely on are implemented in JavaScript. Accordingly, our scripts will be executed by an engine called Nodejs. The installation instructions are here. We will need a fairly recent version of node like v16 or v17. You can verify your nodejs version by running node -v in terminal.

 
For a choice of IDE, you will need anything that has decent TypeScript support. I recommend Visual Studio Code - it's free and open source.

 
Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:

-
npm install ts-node
+
npm install typescript ts-node
+

+
Next, we're going to initialize Typescript project:

+
npx tsc --init
 

 
Next, we're going to install a JavaScript package named TonWeb that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:

 
npm install tonweb tonweb-mnemonic
diff --git a/docs/01-wallet/testnet-tonweb.md b/docs/01-wallet/testnet-tonweb.md
index c433de4..b2a5d2c 100644
--- a/docs/01-wallet/testnet-tonweb.md
+++ b/docs/01-wallet/testnet-tonweb.md
@@ -100,7 +100,13 @@ For a choice of IDE, you will need anything that has decent TypeScript support.
 Let's create a new directory for our project and support TypeScript. Open terminal in the project directory and run the following:
 
 ```console
-npm install ts-node
+npm install typescript ts-node
+```
+
+Next, we're going to initialize Typescript project:
+
+```console
+npx tsc --init
 ```
 
 Next, we're going to install a JavaScript package named [TonWeb](https://github.com/toncenter/tonweb) that will allow us to make TON API calls and manipulate TON objects. Install the package by opening terminal in the project directory and running:
diff --git a/docs/02-contract/index.html b/docs/02-contract/index.html
index 0b355e3..6860fd9 100644
--- a/docs/02-contract/index.html
+++ b/docs/02-contract/index.html
@@ -25,7 +25,7 @@
       

         

           

-
+            
             

               
Network

             

@@ -33,7 +33,7 @@ 

               
             

             
    
-
+              
                 
  • 
                 
    
                   
    Testnet
    
@@ -44,7 +44,7 @@ 
    Testnet
    
                   
    Cons: less reliable, requires special wallets
    
                 
    
                 
    • 
-
+              
                 
  • 
                 
    
                   
    Mainnet
    
@@ -55,10 +55,10 @@ 
    Mainnet
    
                   
    Cons: not free to use (but very cheap)
    
                 
    
                 
    • 
-
+              
             

             

-
+          
             

               
Library

             

@@ -66,7 +66,7 @@ 

               
             

             
    
-
+              
                 
  • 
                 
    
                   
    npm ton (JavaScript)
    
@@ -77,10 +77,10 @@ 
    npm ton (JavaScript)
    
                   
    Cons: no support for all ton services
    
                 
    
                 
    • 
-
+              
             

             

-
+          
           

           

             
Tutorials

@@ -100,7 +100,7 @@ 
Help

         

       

       

-
+        
          

             
TON Hello World part 2: Step by step guide for writing your first smart contract

 

@@ -188,7 +188,7 @@ 
Getters

 
We can choose what input arguments the getter takes as input and what output it returns as result. Also notice the function modifier appearing in the declaration - method_id. It is customary to place method_id on all getters.

 
That's it. We completed our 3 sections and the first version of our contract is ready. To get the complete code, simply concat the 3 snippets above and replace the existing code in contracts/counter.fc. This will be the FunC (.fc file extension) source file of our contract. The resulting source file should look like this.

 
Step 6: Build the counter contract

-
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode. 

+
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode.

 
In TON, we don't compile FunC directly to bytecode, but instead go through another programming language called Fift. Just like FunC, Fift is another language that was designed specifically for TON Blockchain. It's a low level language that is very close to TVM opcodes. For us regular mortals, Fift is not very useful, so unless you're planning on some extra advanced things, I believe you can safely ignore it for now.

 
Since we're using func-js for building, it would be a good idea to create a directory where we can store the build result. To do this, open the terminal and run the following command:

 
mkdir build
@@ -222,7 +222,7 @@ 
Interface class

   constructor(readonly address: Address, readonly init?: { code: Cell, data: Cell }) {}
 }
 

-
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

+
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of @ton/ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

 
The actual deployment involves sending the first message that will cause our contract to be deployed. We can piggyback any message that is directed towards our contract. This can even be the increment message with op #1, but we will do something simpler. We will just send some TON coins to our contract (an empty message) and piggyback that. Let's make this part of our interface. Add the function sendDeploy() to wrappers/Counter.ts - this function will send the deployment message:

 
// export default class Counter implements Contract {
 
@@ -247,7 +247,7 @@ 
Step 8: Deploy the contract on-chain

 
Replace the current code in scripts/deployCounter.ts with a script that will use the interface class we have just written:

 
import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -321,7 +321,7 @@ 
Interface class

 
 // }
 

-
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the ton TypeScript library. The resulting source file should look like this.

+
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the @ton/ton TypeScript library. The resulting source file should look like this.

 
Executing the call

 
Calling a getter is free and does not cost gas. The reason is that this call is read-only, so it does not require consensus by the validators and is not stored in a block on-chain for all eternity like transaction are.

 
Let's create a new script called getCounter.ts in the scripts folder and use our shiny interface class to make the call. We're going to emulate a different developer interacting with our contract and since the contract is already deployed, they are likely to access it by address. Be sure to replace my deployed contract address with yours in the code below:

@@ -369,11 +369,11 @@ 
Interface class

 // }
 

 
As you recall, the increment message is an internal message that is encoded by convention with a 32 bit unsigned int in the beginning to describe the op and a 64 bit unsigned int after to describe the query id. The query id is relevant for messages that expect a response message to be sent back (the request and the response share the same query id).

-
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the ton library. The resulting source file should look like this.

+
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the @ton/ton library. The resulting source file should look like this.

 
Executing the send

 
The messages can be sent from any TON wallet, not necessarily the deployer wallet. Create a new script sendIncrement.ts in the scripts folder and use your wallet to fund the send:

 
import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
@@ -437,7 +437,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

          

-
+        
          

             
TON Hello World part 2: Step by step guide for writing your first smart contract

 

@@ -525,7 +525,7 @@ 
Getters

 
We can choose what input arguments the getter takes as input and what output it returns as result. Also notice the function modifier appearing in the declaration - method_id. It is customary to place method_id on all getters.

 
That's it. We completed our 3 sections and the first version of our contract is ready. To get the complete code, simply concat the 3 snippets above and replace the existing code in contracts/counter.fc. This will be the FunC (.fc file extension) source file of our contract. The resulting source file should look like this.

 
Step 6: Build the counter contract

-
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode. 

+
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode.

 
In TON, we don't compile FunC directly to bytecode, but instead go through another programming language called Fift. Just like FunC, Fift is another language that was designed specifically for TON Blockchain. It's a low level language that is very close to TVM opcodes. For us regular mortals, Fift is not very useful, so unless you're planning on some extra advanced things, I believe you can safely ignore it for now.

 
Since we're using func-js for building, it would be a good idea to create a directory where we can store the build result. To do this, open the terminal and run the following command:

 
mkdir build
@@ -559,7 +559,7 @@ 
Interface class

   constructor(readonly address: Address, readonly init?: { code: Cell, data: Cell }) {}
 }
 

-
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

+
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of @ton/ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

 
The actual deployment involves sending the first message that will cause our contract to be deployed. We can piggyback any message that is directed towards our contract. This can even be the increment message with op #1, but we will do something simpler. We will just send some TON coins to our contract (an empty message) and piggyback that. Let's make this part of our interface. Add the function sendDeploy() to wrappers/Counter.ts - this function will send the deployment message:

 
// export default class Counter implements Contract {
 
@@ -584,7 +584,7 @@ 
Step 8: Deploy the contract on-chain

 
Replace the current code in scripts/deployCounter.ts with a script that will use the interface class we have just written:

 
import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -658,7 +658,7 @@ 
Interface class

 
 // }
 

-
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the ton TypeScript library. The resulting source file should look like this.

+
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the @ton/ton TypeScript library. The resulting source file should look like this.

 
Executing the call

 
Calling a getter is free and does not cost gas. The reason is that this call is read-only, so it does not require consensus by the validators and is not stored in a block on-chain for all eternity like transaction are.

 
Let's create a new script called getCounter.ts in the scripts folder and use our shiny interface class to make the call. We're going to emulate a different developer interacting with our contract and since the contract is already deployed, they are likely to access it by address. Be sure to replace my deployed contract address with yours in the code below:

@@ -706,11 +706,11 @@ 
Interface class

 // }
 

 
As you recall, the increment message is an internal message that is encoded by convention with a 32 bit unsigned int in the beginning to describe the op and a 64 bit unsigned int after to describe the query id. The query id is relevant for messages that expect a response message to be sent back (the request and the response share the same query id).

-
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the ton library. The resulting source file should look like this.

+
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the @ton/ton library. The resulting source file should look like this.

 
Executing the send

 
The messages can be sent from any TON wallet, not necessarily the deployer wallet. Create a new script sendIncrement.ts in the scripts folder and use your wallet to fund the send:

 
import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
@@ -774,7 +774,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

          

-
+        
       

     

   
diff --git a/docs/02-contract/mainnet-npmton.html b/docs/02-contract/mainnet-npmton.html
index 3d629a5..7f29be7 100644
--- a/docs/02-contract/mainnet-npmton.html
+++ b/docs/02-contract/mainnet-npmton.html
@@ -76,7 +76,7 @@ 
Getters

 
We can choose what input arguments the getter takes as input and what output it returns as result. Also notice the function modifier appearing in the declaration - method_id. It is customary to place method_id on all getters.

 
That's it. We completed our 3 sections and the first version of our contract is ready. To get the complete code, simply concat the 3 snippets above and replace the existing code in contracts/counter.fc. This will be the FunC (.fc file extension) source file of our contract. The resulting source file should look like this.

 
Step 6: Build the counter contract

-
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode. 

+
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode.

 
In TON, we don't compile FunC directly to bytecode, but instead go through another programming language called Fift. Just like FunC, Fift is another language that was designed specifically for TON Blockchain. It's a low level language that is very close to TVM opcodes. For us regular mortals, Fift is not very useful, so unless you're planning on some extra advanced things, I believe you can safely ignore it for now.

 
Since we're using func-js for building, it would be a good idea to create a directory where we can store the build result. To do this, open the terminal and run the following command:

 
mkdir build
@@ -110,7 +110,7 @@ 
Interface class

   constructor(readonly address: Address, readonly init?: { code: Cell, data: Cell }) {}
 }
 

-
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

+
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of @ton/ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

 
The actual deployment involves sending the first message that will cause our contract to be deployed. We can piggyback any message that is directed towards our contract. This can even be the increment message with op #1, but we will do something simpler. We will just send some TON coins to our contract (an empty message) and piggyback that. Let's make this part of our interface. Add the function sendDeploy() to wrappers/Counter.ts - this function will send the deployment message:

 
// export default class Counter implements Contract {
 
@@ -135,7 +135,7 @@ 
Step 8: Deploy the contract on-chain

 
Replace the current code in scripts/deployCounter.ts with a script that will use the interface class we have just written:

 
import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -209,7 +209,7 @@ 
Interface class

 
 // }
 

-
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the ton TypeScript library. The resulting source file should look like this.

+
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the @ton/ton TypeScript library. The resulting source file should look like this.

 
Executing the call

 
Calling a getter is free and does not cost gas. The reason is that this call is read-only, so it does not require consensus by the validators and is not stored in a block on-chain for all eternity like transaction are.

 
Let's create a new script called getCounter.ts in the scripts folder and use our shiny interface class to make the call. We're going to emulate a different developer interacting with our contract and since the contract is already deployed, they are likely to access it by address. Be sure to replace my deployed contract address with yours in the code below:

@@ -257,11 +257,11 @@ 
Interface class

 // }
 

 
As you recall, the increment message is an internal message that is encoded by convention with a 32 bit unsigned int in the beginning to describe the op and a 64 bit unsigned int after to describe the query id. The query id is relevant for messages that expect a response message to be sent back (the request and the response share the same query id).

-
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the ton library. The resulting source file should look like this.

+
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the @ton/ton library. The resulting source file should look like this.

 
Executing the send

 
The messages can be sent from any TON wallet, not necessarily the deployer wallet. Create a new script sendIncrement.ts in the scripts folder and use your wallet to fund the send:

 
import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
diff --git a/docs/02-contract/mainnet-npmton.md b/docs/02-contract/mainnet-npmton.md
index 0586d6f..5094a84 100644
--- a/docs/02-contract/mainnet-npmton.md
+++ b/docs/02-contract/mainnet-npmton.md
@@ -223,7 +223,7 @@ Replace the current code in `scripts/deployCounter.ts` with a script that will u
 ```ts
 import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -388,7 +388,7 @@ The messages can be sent from any TON wallet, not necessarily the deployer walle
 
 ```ts
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
diff --git a/docs/02-contract/testnet-npmton.html b/docs/02-contract/testnet-npmton.html
index 0b7582d..dfbae29 100644
--- a/docs/02-contract/testnet-npmton.html
+++ b/docs/02-contract/testnet-npmton.html
@@ -76,7 +76,7 @@ 
Getters

 
We can choose what input arguments the getter takes as input and what output it returns as result. Also notice the function modifier appearing in the declaration - method_id. It is customary to place method_id on all getters.

 
That's it. We completed our 3 sections and the first version of our contract is ready. To get the complete code, simply concat the 3 snippets above and replace the existing code in contracts/counter.fc. This will be the FunC (.fc file extension) source file of our contract. The resulting source file should look like this.

 
Step 6: Build the counter contract

-
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode. 

+
Right now, the contract is just FunC source code. To get it to run on-chain, we need to convert it to TVM bytecode.

 
In TON, we don't compile FunC directly to bytecode, but instead go through another programming language called Fift. Just like FunC, Fift is another language that was designed specifically for TON Blockchain. It's a low level language that is very close to TVM opcodes. For us regular mortals, Fift is not very useful, so unless you're planning on some extra advanced things, I believe you can safely ignore it for now.

 
Since we're using func-js for building, it would be a good idea to create a directory where we can store the build result. To do this, open the terminal and run the following command:

 
mkdir build
@@ -110,7 +110,7 @@ 
Interface class

   constructor(readonly address: Address, readonly init?: { code: Cell, data: Cell }) {}
 }
 

-
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

+
Notice a few interesting things about this TypeScript code. First, it depends on the package @ton/core instead of @ton/ton, which contains a small subset of base types and is therefore slower to change - an important feature when building a stable interface for our contract. Second, the code that creates the data cell mimics the FunC API and is almost identical to our save_data() FunC function. Third, we can see the derivation of the contract address from the code cell and data cell using the function contractAddress.

 
The actual deployment involves sending the first message that will cause our contract to be deployed. We can piggyback any message that is directed towards our contract. This can even be the increment message with op #1, but we will do something simpler. We will just send some TON coins to our contract (an empty message) and piggyback that. Let's make this part of our interface. Add the function sendDeploy() to wrappers/Counter.ts - this function will send the deployment message:

 
// export default class Counter implements Contract {
 
@@ -135,7 +135,7 @@ 
Step 8: Deploy the contract on-chain

 
Replace the current code in scripts/deployCounter.ts with a script that will use the interface class we have just written:

 
import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -209,7 +209,7 @@ 
Interface class

 
 // }
 

-
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the ton TypeScript library. The resulting source file should look like this.

+
Notice that methods in the interface class that call getters must start with the word get. This prefix is a requirement of the @ton/ton TypeScript library. The resulting source file should look like this.

 
Executing the call

 
Calling a getter is free and does not cost gas. The reason is that this call is read-only, so it does not require consensus by the validators and is not stored in a block on-chain for all eternity like transaction are.

 
Let's create a new script called getCounter.ts in the scripts folder and use our shiny interface class to make the call. We're going to emulate a different developer interacting with our contract and since the contract is already deployed, they are likely to access it by address. Be sure to replace my deployed contract address with yours in the code below:

@@ -257,11 +257,11 @@ 
Interface class

 // }
 

 
As you recall, the increment message is an internal message that is encoded by convention with a 32 bit unsigned int in the beginning to describe the op and a 64 bit unsigned int after to describe the query id. The query id is relevant for messages that expect a response message to be sent back (the request and the response share the same query id).

-
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the ton library. The resulting source file should look like this.

+
Notice that methods in the interface class that send messages must start with the word send, another prefix requirement of the @ton/ton library. The resulting source file should look like this.

 
Executing the send

 
The messages can be sent from any TON wallet, not necessarily the deployer wallet. Create a new script sendIncrement.ts in the scripts folder and use your wallet to fund the send:

 
import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
diff --git a/docs/02-contract/testnet-npmton.md b/docs/02-contract/testnet-npmton.md
index 3ced54b..c012fca 100644
--- a/docs/02-contract/testnet-npmton.md
+++ b/docs/02-contract/testnet-npmton.md
@@ -223,7 +223,7 @@ Replace the current code in `scripts/deployCounter.ts` with a script that will u
 ```ts
 import * as fs from "fs";
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, Cell, WalletContractV4 } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class from step 7
 
@@ -388,7 +388,7 @@ The messages can be sent from any TON wallet, not necessarily the deployer walle
 
 ```ts
 import { getHttpEndpoint } from "@orbs-network/ton-access";
-import { mnemonicToWalletKey } from "ton-crypto";
+import { mnemonicToWalletKey } from "@ton/crypto";
 import { TonClient, WalletContractV4, Address } from "@ton/ton";
 import Counter from "../wrappers/Counter"; // this is the interface class we just implemented
 
diff --git a/docs/03-client/index.html b/docs/03-client/index.html
index 05cadb2..7cb08ef 100644
--- a/docs/03-client/index.html
+++ b/docs/03-client/index.html
@@ -25,7 +25,7 @@
       

         

           

-
+            
             

               
Network

             

@@ -33,7 +33,7 @@ 

               
             

             
    
-
+              
                 
  • 
                 
    
                   
    Testnet
    
@@ -44,7 +44,7 @@ 
    Testnet
    
                   
    Cons: less reliable, requires special wallets
    
                 
    
                 
    • 
-
+              
                 
  • 
                 
    
                   
    Mainnet
    
@@ -55,10 +55,10 @@ 
    Mainnet
    
                   
    Cons: not free to use (but very cheap)
    
                 
    
                 
    • 
-
+              
             

             

-
+          
             

               
Library

             

@@ -66,7 +66,7 @@ 

               
             

             
    
-
+              
                 
  • 
                 
    
                   
    npm ton (JavaScript)
    
@@ -77,10 +77,10 @@ 
    npm ton (JavaScript)
    
                   
    Cons: no support for all ton services
    
                 
    
                 
    • 
-
+              
             

             

-
+          
           

           

             
Tutorials

@@ -100,7 +100,7 @@ 
Help

         

       

       

-
+        
          

             
TON Hello World part 3: Step by step guide for building your first web client

 

@@ -134,7 +134,7 @@ 
Step 3: Set up the project

 
npm install @ton/ton @ton/core @ton/crypto
 npm install @orbs-network/ton-access
 

-
Last but not least, we will need to overcome ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

+
Last but not least, we will need to overcome @ton/ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

 
npm install vite-plugin-node-polyfills
 

 
Now modify the file vite.config.ts so it looks like this:

@@ -414,7 +414,7 @@ 
Step 7: Increment the counter on-chain<
 
Time to rebuild the web app, run in terminal:

 
npm run dev
 

-
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link. 

+
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link.

 
Since your mobile Tonkeeper wallet is connected, this action should reach the Tonkeeper mobile app and cause it to display a confirmation dialog. Notice that this dialog shows the gas cost of the transaction. Approve the transaction on the mobile app. Since the app and wallet are connected, your approval should reach the app and cause it to display an indication that the transaction was sent. As you recall, new transactions must wait until they're included in a block, so this should take 5-10 seconds.

 
If everything is working, the counter value on screen should refresh automatically and you should see a value that is higher by one.

 
Step 8: Style the app

@@ -568,7 +568,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

          

-
+        
          

             
TON Hello World part 3: Step by step guide for building your first web client

 

@@ -602,7 +602,7 @@ 
Step 3: Set up the project

 
npm install @ton/ton @ton/core @ton/crypto
 npm install @orbs-network/ton-access
 

-
Last but not least, we will need to overcome ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

+
Last but not least, we will need to overcome @ton/ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

 
npm install vite-plugin-node-polyfills
 

 
Now modify the file vite.config.ts so it looks like this:

@@ -882,7 +882,7 @@ 
Step 7: Increment the counter on-chain<
 
Time to rebuild the web app, run in terminal:

 
npm run dev
 

-
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link. 

+
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link.

 
Since your mobile Tonkeeper wallet is connected, this action should reach the Tonkeeper mobile app and cause it to display a confirmation dialog. Notice that this dialog shows the gas cost of the transaction. Approve the transaction on the mobile app. Since the app and wallet are connected, your approval should reach the app and cause it to display an indication that the transaction was sent. As you recall, new transactions must wait until they're included in a block, so this should take 5-10 seconds.

 
If everything is working, the counter value on screen should refresh automatically and you should see a value that is higher by one.

 
Step 8: Style the app

@@ -1036,7 +1036,7 @@ 
Conclusion

 
If you found a mistake in this tutorial, please submit a PR and help us fix it. This tutorial platform is fully open source and available on https://github.com/ton-community/tutorials.

 
Happy coding!

          

-
+        
       

     

   
diff --git a/docs/03-client/mainnet-npmton.html b/docs/03-client/mainnet-npmton.html
index 4fa6fe9..70f53e2 100644
--- a/docs/03-client/mainnet-npmton.html
+++ b/docs/03-client/mainnet-npmton.html
@@ -22,7 +22,7 @@ 
Step 3: Set up the project

 
npm install @ton/ton @ton/core @ton/crypto
 npm install @orbs-network/ton-access
 

-
Last but not least, we will need to overcome ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

+
Last but not least, we will need to overcome @ton/ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

 
npm install vite-plugin-node-polyfills
 

 
Now modify the file vite.config.ts so it looks like this:

@@ -302,7 +302,7 @@ 
Step 7: Increment the counter on-chain<
 
Time to rebuild the web app, run in terminal:

 
npm run dev
 

-
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link. 

+
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link.

 
Since your mobile Tonkeeper wallet is connected, this action should reach the Tonkeeper mobile app and cause it to display a confirmation dialog. Notice that this dialog shows the gas cost of the transaction. Approve the transaction on the mobile app. Since the app and wallet are connected, your approval should reach the app and cause it to display an indication that the transaction was sent. As you recall, new transactions must wait until they're included in a block, so this should take 5-10 seconds.

 
If everything is working, the counter value on screen should refresh automatically and you should see a value that is higher by one.

 
Step 8: Style the app

diff --git a/docs/03-client/testnet-npmton.html b/docs/03-client/testnet-npmton.html
index 5707c6f..7219077 100644
--- a/docs/03-client/testnet-npmton.html
+++ b/docs/03-client/testnet-npmton.html
@@ -22,7 +22,7 @@ 
Step 3: Set up the project

 
npm install @ton/ton @ton/core @ton/crypto
 npm install @orbs-network/ton-access
 

-
Last but not least, we will need to overcome ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

+
Last but not least, we will need to overcome @ton/ton library's reliance on Nodejs Buffer that isn't available in the browser. We can do that by installing a polyfill. Run the following in terminal:

 
npm install vite-plugin-node-polyfills
 

 
Now modify the file vite.config.ts so it looks like this:

@@ -302,7 +302,7 @@ 
Step 7: Increment the counter on-chain<
 
Time to rebuild the web app, run in terminal:

 
npm run dev
 

-
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link. 

+
Then refresh the web browser viewing the URL shown on-screen. You should see a new "Increment" link on the bottom of the screen. I'm assuming that you're still on desktop, make a note of the counter value and click the link.

 
Since your mobile Tonkeeper wallet is connected, this action should reach the Tonkeeper mobile app and cause it to display a confirmation dialog. Notice that this dialog shows the gas cost of the transaction. Approve the transaction on the mobile app. Since the app and wallet are connected, your approval should reach the app and cause it to display an indication that the transaction was sent. As you recall, new transactions must wait until they're included in a block, so this should take 5-10 seconds.

 
If everything is working, the counter value on screen should refresh automatically and you should see a value that is higher by one.

 
Step 8: Style the app