diff --git a/docs/developers/tutorials/your-first-dapp.md b/docs/developers/tutorials/your-first-dapp.md index 169e1587..62b2f127 100644 --- a/docs/developers/tutorials/your-first-dapp.md +++ b/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,14 +179,14 @@ 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; ``` @@ -194,17 +194,15 @@ let alice_wallet_address = interactor :::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,15 +274,11 @@ 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 @@ -292,7 +286,7 @@ yarn add vite --dev 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 diff --git a/static/developers/tutorial/transaction_details.png b/static/developers/tutorial/transaction_details.png index c9707f62..06c94b36 100644 Binary files a/static/developers/tutorial/transaction_details.png and b/static/developers/tutorial/transaction_details.png differ