diff --git a/docs/developers/built-in-functions.md b/docs/developers/built-in-functions.md index 01a228921..eee4ec036 100644 --- a/docs/developers/built-in-functions.md +++ b/docs/developers/built-in-functions.md @@ -98,7 +98,7 @@ SetUserNameTransaction { Receiver: Value: 0 GasLimit: 1_200_000 - Data: "SetUserName@" + + Data: "SetUserName" + "@" + } ``` diff --git a/docs/developers/tutorials/your-first-dapp.md b/docs/developers/tutorials/your-first-dapp.md index 1e86492e0..4e432fe91 100644 --- a/docs/developers/tutorials/your-first-dapp.md +++ b/docs/developers/tutorials/your-first-dapp.md @@ -8,14 +8,9 @@ title: Build a dApp in 15 minutes Let's build your first decentralized App on the MultiversX Blockchain :::important -Please [create a sample **owner wallet**](/wallet/web-wallet) and have your security phrase on hand (24 words). -We'll work on the Devnet, you should manage your web wallet [here](https://devnet-wallet.multiversx.com). +Also [make sure you have **mxpy installed**](/sdk-and-tools/sdk-py/installing-mxpy), as we will use it to compile, deploy and interact with MultiversX smart contracts. ::: -This guide has been made available in video format as well: - - - [comment]: # (mx-context-auto) ### **dApp Description** @@ -31,8 +26,6 @@ Other rules: - the user can only `ping` **once** before `pong` (so no multiple pings). - only **the set amount** can be `ping`-ed, no more, no less. -Maybe you noticed the default amount for a deposit is **1 xEGLD** and not 1 EGLD which is MultiversX official token, this is because, for testing purposes we use MultiversX Devnet, which is a testing environment identical to the Mainnet, the official MultiversX Blockchain. Here, the currency is **xEGLD**, it's just a test token, it's worth nothing. - [comment]: # (mx-exclude-context) ## **MultiversX dApp architecture** @@ -71,79 +64,27 @@ First let's create a new folder for our project, I'll name it `ping-pong`. ```sh mkdir -p ping-pong/wallet -cd ping-pong/wallet +cd ping-pong ``` -In the end, we'll have three subfolders: wallet, contract and dapp. For convenience, we'll save our owner's wallet keystore in the wallet folder. +In the end, we'll have three subfolders: wallet, contract and dapp. For convenience, we'll save our owner's PEM wallet in the wallet folder. ![img](/developers/tutorial/folder-structure.png) -[comment]: # (mx-context-auto) - -### **Software Prerequisites** - -Software prerequisites - -In our example we'll use [Ubuntu 20.04](https://ubuntu.com/). MacOs works as well (skip to the last paragraph in this section). We'll need to install `python 3.8`, `python-pip` and `libncurses5`. For the frontend application, we'll use an app template based on [React JS](https://reactjs.org/), so we will need `nodejs` and `npm`. - -First we make sure the operating system prerequisites are installed: - -```sh -sudo apt-get update -sudo apt install libncurses5 build-essential python3-pip nodejs npm python3.8-venv -``` - -We'll also need `mxpy`, the MultiversX command line tool, which is helpful for signing transactions, deploying smart contracts, managing wallets, accounts and validators. We'll use it to deploy our smart contract. -mxpy can be installed using the MultiversX [documentation page](/sdk-and-tools/sdk-py/installing-mxpy). - -We'll download the `mxpy` installer and we run it - -```sh -wget -O mxpy-up.py https://raw.githubusercontent.com/multiversx/mx-sdk-py-cli/main/mxpy-up.py -python3 mxpy-up.py -``` - -Restart the user session to activate `mxpy` - -```sh -source ~/.profile -``` - -In order to install `mxpy` on **MacOs**, you need to make sure you have installed `python 3.8` and `pip` on your system. -Then, install the latest `mxpy` version,using `pip`. - -```sh -pip3 install --user --upgrade --no-cache-dir mxpy -``` - -If you encounter any error relating to `pynacl` package, make sure you have `libsodium` installed. - -```sh -brew install libsodium -``` - -[comment]: # (mx-context-auto) - -### **Create an owner wallet** - -We now have all the prerequisites installed, let's create an owner's wallet **PEM file**. +### **Create the owner wallet** -The smart contract can only be deployed on the blockchain by an owner, so we will create an owner wallet [here](https://devnet-wallet.multiversx.com). The owner can also update the contract, later on, if needed. +The smart contract can only be deployed on the blockchain by an owner, so let's create an owner's wallet **PEM file**. The owner can also update the contract, later on, if needed. Keep in mind we only use PEM wallets for testing and playing around with non-production code. For real applications please follow best practices, use secure wallets that can be generated [here](https://wallet.multiversx.com). -Let's head over to the MultiversX wallet, click **"Create new wallet"**, write down the security phrase (24 words) that can help us retrieve the wallet, and the password for the JSON keystore (that we will save in the `~/ping-pong/wallet folder`). We should be able to see our new MultiversX wallet owner address which is, in this case, _erd1......._ - -We can also generate a private key PEM file, like this we won't need to enter our wallet password each time we want to confirm a transaction. +First, make sure you are in the `ping-pong` folder. ```sh -cd ~/ping-pong/wallet -mxpy wallet convert --in-format=raw-mnemonic --out-format=pem --outfile=./wallet-owner.pem +mxpy wallet new --format pem --outfile=./wallet/wallet-owner.pem ``` -We will enter our **24 secret words** when prompted and a new PEM file will be created. This command requires that you enter all 24 words each separated by a space. - In order to initiate transactions on the blockchain, we need some funds, every transaction costs a very small fee, on the blockchain this is called **gas**. -On the devnet wallet we have a **faucet** that allows you to get free test funds for our applications. We can request 10 xEGLD every 24 hours, so let's request 10 xEGLD now. -We now check if the transaction was successful, and yes, we see that we now have 10 xEGLD in our devnet wallet. +On the devnet wallet we have a **faucet** that allows you to get free test funds for our applications. We can request 10 xEGLD every 24 hours, so let's request 10 xEGLD now. You can log in with your PEM using the newly generated PEM file [here](https://devnet-wallet.multiversx.com/unlock/pem). Use the faucet from the menu as you see below and you are all set. + +![img](/developers/tutorial/faucet-screenshot.png) [comment]: # (mx-exclude-context) @@ -159,10 +100,10 @@ Clone the Ping-Pong Sample Smart Contract Let's start with our smart contract. We'll first clone the sample contract repository from here [https://github.com/multiversx/mx-ping-pong-sc](https://github.com/multiversx/mx-ping-pong-sc) +Also make sure you are still in the `ping-pong` folder. + ```sh -cd ~/ping-pong git clone https://github.com/multiversx/mx-ping-pong-sc contract -cd contract/ping-pong ``` [comment]: # (mx-context-auto) @@ -176,6 +117,7 @@ We now have the source code for the smart contract, but we need to compile it in Run the following command in order to build the rust smart contract into a _wasm file_. ```sh +cd contract/ping-pong mxpy contract build ``` @@ -242,6 +184,8 @@ All right, let's move on to the application layer. ### **Clone the Sample App** +First make sure to go back to the root `ping-pong` folder. + We will clone a very simple dApp template that implements the calls to our newly deployed smart contract. ```sh @@ -253,41 +197,35 @@ cd dapp ### **Configure the app** -Customize the Smart Contract Address +Use the preferred editor and customize the Smart Contract Address located in `src/config/config-devnet.tsx` ```sh -nano src/config.tsx +code . ``` -We'll take a look on the first instruction: +Then edit this instruction, and change it to the contract address that was shown after mxpy contract deploy: -```javascript -export const contractAddress = "erd1qqqqqqqqqqqqq..."; -``` +![img](/developers/tutorial/config-screenshot.png) -and we'll change it to our contract address that was shown after mxpy contract deploy: - -```javascript -export const contractAddress = - "erd1qqqqqqqqqqqqqpgq0hmfvuygs34cgqsvg...ffh4y04cysagr6cn"; -``` - -Save and close `config.tsx` and we're ready for the first build. [comment]: # (mx-context-auto) ### **Build the dApp** +:::important +[Please make sure you have **yarn installed**](https://classic.yarnpkg.com/lang/en/docs/install) on your machine. +::: + We'll first install the dependencies: ```sh -npm install +yarn install ``` and then we'll start a development server to test our new dApp ```sh -npm run start +yarn start:devnet ``` **Run it on local machine (or host it on your server)** @@ -329,6 +267,6 @@ The transaction will trigger a success message and the funds will be returned to ## **Where to go next?** The purpose of this guide is to provide a starting point for you to discover the MultiversX technology capabilities and devkit. Keep reading the next docs to dive in deeper. -We welcome your questions and inquiries on Stack Overflow: [https://stackoverflow.com/questions/tagged/elrond](https://stackoverflow.com/questions/tagged/elrond). +We welcome your questions and inquiries on Stack Overflow: [https://stackoverflow.com/questions/tagged/multiversx](https://stackoverflow.com/questions/tagged/multiversx). Break down this guide and learn more about how to extend the smart contract, the wallet and the MultiversX tools. [https://docs.multiversx.com](/) diff --git a/static/developers/tutorial/config-screenshot.png b/static/developers/tutorial/config-screenshot.png new file mode 100644 index 000000000..bf2fe1a11 Binary files /dev/null and b/static/developers/tutorial/config-screenshot.png differ diff --git a/static/developers/tutorial/faucet-screenshot.png b/static/developers/tutorial/faucet-screenshot.png new file mode 100644 index 000000000..00248ac2d Binary files /dev/null and b/static/developers/tutorial/faucet-screenshot.png differ