Merge pull request #1170 from multiversx/dapp-tutorial

update dapp tutorial

Author: BiancaIalangi

docs/developers/tutorials/your-first-dapp.md

@@ -5,7 +5,7 @@ title: Build a dApp in 15 minutes
 
 [comment]: # (mx-abstract)
 
-Let's build your first decentralized application(dApp) on the MultiversX Blockchain!
+Let's build your first decentralized application (dApp) on the MultiversX Blockchain!
 
 ## Prerequisites
 
@@ -15,7 +15,7 @@ Before starting this tutorial, make sure you have the following:
 - `stable` Rust version `≥ 1.85.0` (install via [rustup](/docs/developers/toolchain-setup.md#installing-rust-and-sc-meta))
 - `multiversx-sc-meta` (cargo install [multiversx-sc-meta](/docs/developers/meta/sc-meta-cli.md))
 - `Node.js` with version `≥ 20`(guide [here](https://nodejs.org/en/download/package-manager))
-- `yarn` ([npm install --global yarn](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable) )
+- `pnpm` ([npm install --global pnpm](https://pnpm.io/installation) )
 
 :::
 
@@ -34,13 +34,13 @@ The **Ping-Pong app** is a very simple decentralized application that allows use
 
 Endpoints available:
 
-- `ping`: sending funds to the contract.
+- `ping`: sending funds to the contract;
 - `pong`: claiming the same amount back.
 
 Rules:
 
-- Each user can only `ping` once before they `pong`.
-- The `ping` amount must be exactly the specified value—no more, no less.
+- Each user can only `ping` once before they `pong`;
+- The `ping` amount must be exactly the specified value - no more, no less;
 - `pong` becomes available only after a set waiting period following a `ping`.
 
 [comment]: # (mx-exclude-context)
@@ -55,7 +55,7 @@ Rules:
 
 For the web application, we will have two pages:
 
-- **Sign in** - The page where you can authenticate using the **xPortal app**, **Ledger**, **DeFi Wallet**, **xAlias**, **Web Wallet**, **Passkey Proxy** or with **Metamask proxy**;
+- **Sign in** - The page where you can authenticate using the **xPortal App**, **Ledger**, **DeFi Wallet**, **xAlias**, **Web Wallet**, **Passkey Proxy** or **Metamask Proxy**;
 - **Dashboard** - Here, you can either `ping` or `pong`. If you have already deposited, you will see a countdown timer until the time interval resets.
 
 [comment]: # (mx-context-auto)
@@ -73,14 +73,14 @@ The contract also includes several views, storage mappers and one event:
 - `getPongEnableTimestamp`: **view** that provides the timestamp when `pong` will be available for a given address;
 - `getTimeToPong`: **view** that shows the remaining time until `pong` is enabled for a specific address;
 - `getAcceptedPaymentToken`: **storage mapper** that saves the token type allowed for deposits;
-- `getPingAmount`: **storage mapper** that records recording the total amount of tokens deposited;
-- `getDurationTimestamp`: **storage mapper** that saves the lock duration (in seconds) before `pong` can be called after a `ping`;
+- `getPingAmount`: **storage mapper** that records the total amount of tokens deposited;
+- `getDurationTimestamp`: **storage mapper** that saves the lock duration (in milliseconds) before `pong` can be called after a `ping`;
 - `getUserPingTimestamp`: **storage mapper** that saves the timestamp of the block where the user `ping`-ed;
 - `pongEvent`: **event** that signals a successful `pong` by the user with amount.
 
 Think of this smart contract as the API for our dApp, handling all the core business logic.
 
-To test it out, we will use [MultiversX Blockchain Devnet Explorer](https://devnet-explorer.multiversx.com/)—a public test network maintained by our community.
+To test it out, we will use [MultiversX Blockchain Devnet Explorer](https://devnet-explorer.multiversx.com/) - a public test network maintained by our community.
 
 [comment]: # (mx-context-auto)
 
@@ -107,7 +107,7 @@ By the time we are done, our project will have three subfolders: wallet, contrac
 
 ### Create wallet
 
-To deploy a smart contract to the blockchain, you will need a wallet-a PEM file is recommended for simplicity and ease of testing.
+To deploy a smart contract to the blockchain, you will need a wallet: a **PEM file** is recommended for simplicity and ease of testing.
 
 :::important
 Make sure you are in the `ping-pong/` folder before continuing.
@@ -124,7 +124,7 @@ PEM wallets are recommended only for testing and experimenting with non-producti
 
 To initiate transactions on the blockchain, your wallet needs funds to cover transaction fees, commonly referred to as **gas**.
 
-The [MultiversX Devnet](https://devnet-wallet.multiversx.com/dashboard) offers a **faucet** where you can claim **5 EGLD every 24 hours**. Here’s how to fund your wallet:
+The [MultiversX Devnet](https://devnet-wallet.multiversx.com/dashboard) offers a **faucet** where you can claim **5 EGLD**. You can recall the faucet every **24 hours** if your balance is **lower than 1 EGLD**. Here’s how to fund your wallet:
 
 1. Go to [Devnet Wallet MultiversX](https://devnet-wallet.multiversx.com/unlock/pem) and log in using your newly generated **PEM** file;
 2. Once logged in, open the **Faucet** from the **Tools**;
@@ -136,9 +136,9 @@ The [MultiversX Devnet](https://devnet-wallet.multiversx.com/dashboard) offers a
 
 ## The Blockchain Layer
 
-With the wallet setup complete, let's move on to the backend—the blockchain layer.
+With the wallet setup complete, let's move on to the backend - the blockchain layer.
 
-Let's start with the smart contract. You will first clone the Ping-Pong sample contract repository from [here](https://github.com/multiversx/mx-ping-pong-sc).
+Let's start with the smart contract. You will first clone the Ping-Pong sample contract [repository](https://github.com/multiversx/mx-ping-pong-sc).
 
 :::important
 Make sure you are still in the `ping-pong/` folder.
@@ -154,7 +154,7 @@ This will create a **contract** folder within ping-pong, containing all the nece
 
 ### Build the Smart Contract
 
-Now that you have the source code for the smart contract, you need to compile it into a **binary** that the **MultiversX Virtual Machine** can execute. Since the VM runs Web Assembly (WASM) code, you need to compile our Rust source code into a WASM file.
+Now that you have the source code for the smart contract, you need to compile it into a **binary** that the **MultiversX Virtual Machine** (VM) can execute. Since the VM runs Web Assembly (WASM) code, you need to compile our Rust source code into a WASM file.
 
 At path `ping-pong/`, run the following command to build the smart contract into a WASM file.
 
@@ -179,32 +179,30 @@ Ensure that `wallet_owner.pem` is in the `wallet/` folder and that the smart con
 
 Before deploying, you will need to modify the wallet from which transactions are made. Currently, they are made from a test wallet. To use the wallet you created [earlier](./your-first-dapp.md#create-wallet), you will need to make the following changes:
 
-In the file `interact.rs` located at the path `ping-pong/contract/ping-pong/interactor/src`, the variable `alice_wallet_address` from  `new` function will be modified.
+In the file [`interact.rs`](https://github.com/multiversx/mx-ping-pong-sc/blob/e1b3e0e9657e83ad11cc0069c0fc7183f91a2fe1/ping-pong/interactor/src/interact.rs#L84) located at the path `ping-pong/contract/ping-pong/interactor/src`, the variable `wallet_address_1` from  `new` function will be modified.
 
 ```rust title="Before"
-let alice_wallet_address = interactor.register_wallet(test_wallets::alice()).await;
+let wallet_address_1 = interactor.register_wallet(test_wallets::alice()).await;
 ```
 
 ```rust title="After"
-let alice_wallet_address = interactor
+let wallet_address_1 = interactor
     .register_wallet(Wallet::from_pem_file("../../../wallet/wallet-owner.pem").unwrap())
     .await;
 ```
 
 :::note
 You need to replace with the relative path from the **interactor crate** to the **created wallet**.
 
-The interactor crate is located at `ping-pong/contract/ping-pong/interactor` and the wallet is in a higher-level directory: `ping-pong/wallet`.
+The interactor crate is located at `ping-pong/contract/ping-pong/interactor`, and the wallet is in a higher-level directory: `ping-pong/wallet`.
 
-To access `wallet-owner.pem` you must navigate up three folders: `../../../`, then into the **wallet** directory.
+Alternatively, you can add the absolute path of `wallet-owner.pem`.
 :::
 
-Make sure to add the absolute path at `Wallet::from_pem_file("/ping-pong/wallet/wallet-owner.pem")`, completing the missing directories above "ping-pong".
-
 This next command deploys the Ping-Pong contract with the following settings:
 
 - Ping Amount: **1 EGLD**.
-- Lock Duration: **180 seconds** (3 minutes).
+- Lock Duration: **180000 milliseconds** (3 minutes).
 
 :::important
 Ensure that you run the next command inside the **interactor** crate, located at:
@@ -213,23 +211,23 @@ Ensure that you run the next command inside the **interactor** crate, located at
 :::
 
 ```bash
-cargo run deploy --ping-amount 1000000000000000000 --duration-in-seconds 180
+cargo run deploy --amount 1000000000000000000 --duration 180000
 ```
 
 ```sh title=output
     Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.48s
-     Running `/ping-pong/contract/target/debug/ping-pong-interact deploy --ping-amount 1000000000000000000 --duration-in-seconds 180`
-sender's recalled nonce: 12422
--- tx nonce: 12422
-sc deploy tx hash: b6ca6c8e6ac54ed168bcd6929e762610e2360674f562115107cf3702b8a22467
-deploy address: erd1qqqqqqqqqqqqqpgqymj43x6anzr38jfz7kw3td2ew33v9jtrd8sse5zzk6
-new address: erd1qqqqqqqqqqqqqpgqymj43x6anzr38jfz7kw3td2ew33v9jtrd8sse5zzk6
+     Running `/ping-pong/contract/target/debug/ping-pong-interact deploy --amount 1000000000000000000 --duration 180000`
+sender's recalled nonce: 0
+-- tx nonce: 0
+sc deploy tx hash: 93ff495b02eb84f0f427f4f02e2c0ce10e667a3511807db8781e1eaed47f9d16
+deploy address: erd1qqqqqqqqqqqqqpgq0dw0cfqeknm43sxzzeg5h5j3ewwu8gyd0vdqq4jutd
+new address: erd1qqqqqqqqqqqqqpgq0dw0cfqeknm43sxzzeg5h5j3ewwu8gyd0vdqq4jutd
 ```
 
 Once the command runs, review the log output carefully. Two key details to note:
 
-- Contract Address: in the example presented below is erd1qqqqqqqqqqqqqpgqymj43x6anzr38jfz7kw3td2ew33v9jtrd8sse5zzk6
-- Transaction Hash: in the example presented below is b6ca6c8e6ac54ed168bcd6929e762610e2360674f562115107cf3702b8a22467
+- **Contract Address**: in the example presented below, it is erd1qqqqqqqqqqqqqpgq0dw0cfqeknm43sxzzeg5h5j3ewwu8gyd0vdqq4jutd
+- **Transaction Hash**: in the example presented below, it is 93ff495b02eb84f0f427f4f02e2c0ce10e667a3511807db8781e1eaed47f9d16
 
 We will take a look at the transaction details. Let's check them in the [Devnet Explorer](https://devnet-explorer.multiversx.com).
 
@@ -276,23 +274,19 @@ Then edit this instruction and change it to the contract address that you create
 
 ![img](/developers/tutorial/config-screenshot.png)
 
-:::important
-Make sure you have [**yarn installed**](https://classic.yarnpkg.com/lang/en/docs/install) on your machine.
-:::
-
 Navigate to the `ping-pong/dapp` folder and install the required dependencies:
 
 ```sh
-npm install --global yarn
-yarn add vite --dev
+npm install --global pnpm
+pnpm install
 ```
 
 ### Start the Development Server
 
 To test your dApp locally, start a development server with the following command:
 
 ```sh
-yarn start:devnet
+pnpm start-devnet
 ```
 
 ### Running and Accessing the dApp