Onboarding guide: user flow new (#1147)

* order

* func-tolk flow

* tact flow

* navigation

* minor

* minor

* minor

* test

* test

* getting started

* read-write-to-the-network-sections

* buttons

* minor

* minor

* check

* check

Author: aigerimu

docs/v3/guidelines/quick-start/blockchain-interaction/reading-from-network.mdx

@@ -1,11 +1,11 @@
 import Feedback from "@site/src/components/Feedback";
 import ThemedImage from "@theme/ThemedImage";
+import Button from '@site/src/components/button'
 
 # Reading from network
 
 ## Introduction
 
-
 This guide will walk you through reading data from TON Blockchain. You'll learn how to:
 - Fetch account information
 - Call `get methods`
@@ -26,22 +26,22 @@ Versions of `node` and `npm` should be at least `v20` and `v10` correspondingly.
 
 ## Project setup
 
-Let's set up our project structure:
-
-1. Create a new directory for your project  
-2. Initialize a Node.js project  
-3. Install the required dependencies
+Let’s set up your project structure:
+1. Create a new directory for your project and navigate into it.
+2. Initialize a Node.js project.
+3. Install the required dependencies.
+4. Initialize TypeScript configuration.
 
 Run these commands in your terminal:
 
 ```bash
-mkdir reading-from-ton && cd reading-from-ton # create new directory and cd to it
-npm init -y # initialize Node.js project
-npm install typescript ts-node @ton/ton @ton/core @ton/crypto #install required dependecies
-npx tsc --init # initialize typesctipt
+mkdir reading-from-ton && cd reading-from-ton
+npm init -y
+npm install typescript ts-node @ton/ton @ton/core @ton/crypto
+npx tsc --init
 ```
 
-To run scripts, use the following command:
+To run a TypeScript script saved as `script.ts` in your current directory, run:
 
 ```bash
 npx ts-node script.ts
@@ -327,4 +327,19 @@ Sender: EQBui16XCF61MSWauIDpVFbKAOJmjLHRxXvXeqiN9dYaIgjq
 A more complex example of traversing transactions graph may be found [here](https://docs.ton.org/v3/guidelines/dapps/asset-processing/payments-processing/#retrieve-incomingoutgoing-transactions).
 :::
 
+## Next step
+
+Now that you’ve learned how to read data from TON Blockchain, it’s time to explore how to **write data to the network**.
+
+Click the button below to continue:
+
+<Button href="/v3/guidelines/quick-start/blockchain-interaction/writing-to-network" colorType={'primary'} sizeType={'sm'}>
+
+  Writing to the network
+
+</Button>
+
+
 <Feedback />
+
+

docs/v3/guidelines/quick-start/blockchain-interaction/writing-to-network.mdx

@@ -1,5 +1,6 @@
 import Feedback from "@site/src/components/Feedback";
 import ThemedImage from "@theme/ThemedImage";
+import Button from '@site/src/components/button'
 
 # Writing to the network
 
@@ -209,4 +210,16 @@ npx ts-node 2-send-nft.ts
 
 Navigate to [Tonviewer](https://testnet.tonviewer.com/) and paste your address into the search bar. You should see an NFT transfer with the *'Hello from NFT!'* comment.
 
+## Next step
+
+Now that you’ve learned how to write data to TON Blockchain, it’s time to move on to the next stage—**developing your smart contracts**. You’ll first need to **set up your development environment** with the necessary tools and libraries to do that.
+
+Click the button below to get started:
+
+<Button href="/v3/guidelines/quick-start/developing-smart-contracts/setup-environment" colorType={'primary'} sizeType={'sm'}>
+
+  Setup development environment
+
+</Button>
+
 <Feedback />

docs/v3/guidelines/quick-start/developing-smart-contracts/blueprint-sdk-overview.mdx renamed to docs/v3/guidelines/quick-start/developing-smart-contracts/func-tolk-folder/blueprint-sdk-overview.mdx

@@ -1,6 +1,7 @@
 import Feedback from "@site/src/components/Feedback";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Button from '@site/src/components/button'
 
 # Blueprint SDK overview
 
@@ -53,17 +54,18 @@ Example/
 
 This folder contains your smart contract source code written in one of the available programming languages used for TON Blockchain smart contract development.
 
-### `/wrappers`
+### `/scripts`
 
-To interact with your smart contract off-chain, you need to serialize and deserialize messages sent to it. `Wrapper` classes are developed to mirror your smart contract implementation, making its functionality simple to use.
+The `scripts` directory contains `TypeScript` files that help you deploy and interact with your smart contracts on-chain using previously implemented wrappers.
 
 ### `/tests`
 
 This directory contains test files for your smart contracts. Testing contracts directly on the TON network is not the best option because deployment requires some amount of time and may lead to losing funds. This testing playground allows you to execute multiple smart contracts and even send messages between them in your **"local network"**. Tests are crucial for ensuring your smart contracts behave as expected before deployment to the network.
 
-### `/scripts`
+### `/wrappers`
+
+To interact with your smart contract off-chain, you need to serialize and deserialize messages sent to it. `Wrapper` classes are developed to mirror your smart contract implementation, making its functionality simple to use.
 
-The `scripts` directory contains `TypeScript` files that help you deploy and interact with your smart contracts on-chain using previously implemented wrappers.
 
 ## Development flow
 
@@ -101,4 +103,14 @@ Also, you can always generate the same structure for another smart contract if,
 npx blueprint create PascalCase # Don't forget to name the contract in PascalCase
 ```
 
+## Next step
+
+Now you’re all set — it's time to start writing smart contracts. We’ll begin with the basics: **storage** and **get methods**.
+
+<Button href="/v3/guidelines/quick-start/developing-smart-contracts/func-tolk-folder/storage-and-get-methods" colorType={'primary'} sizeType={'sm'}>
+
+  Storage & get methods
+
+</Button>
+
 <Feedback />

docs/v3/guidelines/quick-start/developing-smart-contracts/deploying-to-network.mdx renamed to docs/v3/guidelines/quick-start/developing-smart-contracts/func-tolk-folder/deploying-to-network.mdx

@@ -26,11 +26,11 @@ This makes it possible to calculate the future wallet smart contract address.
 
 ### Magic storage member
 
-In previous steps, we deliberately didn't explain the purpose of `ctxID` and `ID` stored in our smart contract's state and why they remained untouched in all the smart contract functionality. Now, their purpose should start to become clearer.
+In previous steps, we deliberately didn't explain the purpose of `ctx_id` and `ID` stored in our smart contract's state and why they remained untouched in all the smart contract functionality. Now, their purpose should start to become clearer.
 
 Since we can't deploy a smart contract with the same `state_init`, the only way to provide the same initial code and **"same"** initial data is to create a separate field in it, ensuring additional uniqueness. This, in the case of a wallet, gives you the opportunity to have the same key pair for several wallet smart contracts.
 
-### One to rule them all
+{/*### One to rule them all
 
 If you've already considered that the `ID` field is a must-have for any smart contract, there is another opportunity that could change your mind. Let's examine the previously developed `CounterInternal` smart contract's init section:
 
@@ -47,19 +47,19 @@ If we remove the `id` field from its initial storage, we can ensure that **only
 :::info Tokens
 This mechanism plays a crucial role in [Jetton Processing](/v3/guidelines/dapps/asset-processing/jettons/). Each non-native (jetton) token requires its own `Jetton Wallet` for a particular owner and, therefore, provides a calculable address for it, creating a **star scheme** with the basic wallet in the center.
 :::
-
+*/}
 ## Implementation
 
-Now that our smart contracts are fully tested, we are ready to deploy them to TON. In `Blueprint SDK`, this process is the same for both `Mainnet` and `Testnet` and for any of the presented languages in the guide: `FunC`, `Tact`, or `Tolk`.
+Now that our smart contracts are fully tested, we are ready to deploy them to TON. In `Blueprint SDK`, this process is the same for both `Mainnet` and `Testnet` and for any of the presented languages in the guide: `FunC` or `Tolk`.
 
 ### Step 1: update the deployment script
 
 Deployment scripts rely on the same wrappers that you have used in testing scripts. We will use one common script to deploy both of the previously deployed smart contracts. Update `deployHelloWorld.ts` with this code:
 
 ```typescript title="/scripts/deployHelloWorld.ts"
+// @version TypeScript 5.8.3
 import { toNano } from '@ton/core';
 import { HelloWorld } from '../wrappers/HelloWorld';
-import { CounterInternal } from '../wrappers/CounterInternal';
 import { compile, NetworkProvider } from '@ton/blueprint';
 
 export async function run(provider: NetworkProvider) {
@@ -78,23 +78,7 @@ export async function run(provider: NetworkProvider) {
 
     await provider.waitForDeploy(helloWorld.address);
 
-    const counterInternal = provider.open(
-        await CounterInternal.fromInit(
-            BigInt(Math.floor(Math.random() * 10000)),
-            helloWorld.address
-        )
-    );
-
-    await counterInternal.send(
-        provider.sender(),
-        { value: toNano('0.05') }, 
-        null
-    );
-
-    await provider.waitForDeploy(counterInternal.address);
-
     console.log('ID', await helloWorld.getID());
-    console.log('ID', (await counterInternal.getId()).toString());
 }
 ```
 
@@ -103,7 +87,7 @@ export async function run(provider: NetworkProvider) {
 You can run the script by entering the following command:
 
 ```bash
-npx blueprint run # deployHelloWorld # optionally directly pass script
+npx blueprint run deployHelloWorld
 ```
 
 ### Step 3: choose network

docs/v3/guidelines/quick-start/developing-smart-contracts/processing-messages.mdx renamed to docs/v3/guidelines/quick-start/developing-smart-contracts/func-tolk-folder/processing-messages.mdx

@@ -1,6 +1,7 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Feedback from "@site/src/components/Feedback";
+import Button from '@site/src/components/button'
 
 # Processing messages
 
@@ -182,7 +183,7 @@ By combining both of these patterns, you can achieve a comprehensive description
 
 `External messages` are your only way of toggling smart contract logic from outside the blockchain. Usually, there is no need for implementation of them in smart contracts because, in most cases, you don't want external entry points to be accessible to anyone except you. If this is all the functionality that you want from the external section, the standard way is to delegate this responsibility to a separate actor - [wallet](v3/documentation/smart-contracts/contracts-specs/wallet-contracts#basic-wallets/), which is practically the main reason they were designed for.
 
-Developing external endpoints includes several standard [approaches](/v3/documentation/smart-contracts/message-management/external-messages/) and [security measures](/v3/guidelines/smart-contracts/security/overview/) that might be overwhelming at this point. Therefore, in this guide, we will implement incrementing the previously added `ctxCounterExt` number and add a send message to our `Tact` contract.
+Developing external endpoints includes several standard [approaches](/v3/documentation/smart-contracts/message-management/external-messages/) and [security measures](/v3/guidelines/smart-contracts/security/overview/) that might be overwhelming at this point. Therefore, in this guide, we will implement incrementing the previously added `ctx_counter_ext` number.
 
 :::danger
 This implementation is **unsafe** and may lead to losing your contract funds. Don't deploy it to `Mainnet`, especially with a high smart contract balance.
@@ -259,7 +260,7 @@ fun onExternalMessage(inMsg: slice) {
 </TabItem>
 </Tabs>
 
-This function, upon receiving an external message, will increment our `ctxCounterExt` and also send an internal message to the specified address with the `increase` operation, which we will use to increment the counter on our `CounterInternal` smart contract.
+This function, upon receiving an external message, will increment our `ctx_counter_ext` and also send an internal message to the specified address with the `increase` operation.
 
 Verify that the smart contract code is correct by running:
 
@@ -308,13 +309,13 @@ async sendExternalIncrease(
 
 ### Step 3: update test
 
-Update the test to ensure that the `HelloWorld` contract received the external message, sent an internal message to the `CounterInternal` contract, and both updated their counters:
+Update the test to ensure that the `HelloWorld` contract received the external message, and updated its counters:
 
 ```typescript title="/tests/HelloWorld.spec.ts"
+//@version TypeScript 5.8.3
 import { Blockchain, SandboxContract, TreasuryContract } from '@ton/sandbox';
 import { Cell, toNano} from '@ton/core';
 import { HelloWorld } from '../wrappers/HelloWorld';
-import { CounterInternal } from '../wrappers/CounterInternal';
 import '@ton/test-utils';
 import { compile } from '@ton/blueprint';
 
@@ -328,7 +329,6 @@ describe('HelloWorld', () => {
     let blockchain: Blockchain;
     let deployer: SandboxContract<TreasuryContract>;
     let helloWorld: SandboxContract<HelloWorld>;
-    let counterInternal: SandboxContract<CounterInternal>;
 
     beforeEach(async () => {
         blockchain = await Blockchain.create();
@@ -354,34 +354,16 @@ describe('HelloWorld', () => {
             deploy: true,
             success: true,
         });
-
-        counterInternal = blockchain.openContract(
-            await CounterInternal.fromInit(0n, helloWorld.address)
-        );
-
-        const deployResultCounter = await counterInternal.send(
-            deployer.getSender(), 
-            { value: toNano('1.00') }, 
-            null
-        );
-
-        expect(deployResultCounter.transactions).toHaveTransaction({
-            from: deployer.address,
-            to: counterInternal.address,
-            deploy: true,
-            success: true
-        });
     });
 
-    it('should send an external message and update counter', async () => {
-        const counterInternalValueBefore = await counterInternal.getCounter();
+    it('should receive external message and update counter', async () => {
         const [__, counterExtBefore] = await helloWorld.getCounters()
         const increase = 5;
 
         const result = await helloWorld.sendExternalIncrease({
             increaseBy: increase,
             value: toNano(0.05),
-            addr: counterInternal.address,
+            addr: deployer.address, // Using deployer address
             queryID: 0
         });
 
@@ -391,33 +373,22 @@ describe('HelloWorld', () => {
             success: true,
         });
 
-        expect(result.transactions).toHaveTransaction({
-            from: helloWorld.address,
-            to: counterInternal.address,
-            success: true,
-        });
-
-        const counterInternalValueAfter = await counterInternal.getCounter();
-
-        expect(counterInternalValueAfter).toBeGreaterThan(counterInternalValueBefore);
         const [_, counterExt] = await helloWorld.getCounters()
         expect(counterExtBefore + BigInt(increase)).toBe(counterExt);
     });
-
-    // ... previous tests
 });
 ```
 
-This test describes the common transaction flow of any `multi-contract` system:  
-1. Send an external message to toggle the smart contract logic from outside the blockchain.  
+{/*This test describes the common transaction flow of any `multi-contract` system:
+1. Send an external message to toggle the smart contract logic outside the blockchain.
 2. Trigger one or more internal messages to be sent to other contracts.  
 3. Upon receiving an internal message, change the contract state and repeat **step 2** if required.
 
 Since the resulting sequence of transactions might be overwhelming for understanding, it's a good practice to create a `sequence diagram` describing your system. Here is an example of our case:
 
 <div style={{marginBottom: '30px'}} align="center">
   <img src="/img/tutorials/quick-start/multi-contract.png" alt="Multi-contract scheme"/>
-</div>
+</div> */}
 
 Verify that all examples are correct by running the test script:
 
@@ -430,15 +401,24 @@ Expected output should look like this:
 ```bash
  PASS  tests/HelloWorld.spec.ts
   HelloWorld
-    ✓ should correctly initialize and return the initial data (446 ms)
-    ✓ should send an external message and update counter (209 ms)
-    ✓ should increase counter (298 ms)
+    ✓ should receive external message and update counter (251 ms)
 
 Test Suites: 1 passed, 1 total
-Tests:       3 passed, 3 total
+Tests:       1 passed, 1 total
 Snapshots:   0 total
-Time:        3.663 s, estimated 4 s
-Ran all test suites matching /HelloWorld/i.
+Time:        1.841 s, estimated 2 s
+Ran all test suites.
+
 ```
 
+## Next step
+
+Now that you understand how smart contracts send and receive messages, you can **deploy your contract** to TON Blockchain.
+
+<Button href="/v3/guidelines/quick-start/developing-smart-contracts/func-tolk-folder/deploying-to-network" colorType={'primary'} sizeType={'sm'}>
+
+  Deploying to network
+
+</Button>
+
 <Feedback />