Let’s embark on a quick journey to build a simple decentralized app (dApp) on the MultiversX Blockchain. In this mission, you’ll create a Ping-Pong app where users can send tokens to a contract (ping) and claim them back after a specific lock period (pong). Ready? Let's do this in warp speed!

Step 1: Assemble Your Toolkit

• mxpy: This will help you create wallets and deploy your smart contract. Follow this guide to install it.
• Rust: Needed for building the smart contract. Install it along with sc-meta here.

Mission Brief: Ping-Pong dApp

In our dApp:

• Ping: Users deposit tokens (1 xEGLD) into the contract.
• Pong: Users retrieve tokens after a set lock period (10 minutes).
• Rules: Only one active ping per user at a time, and each deposit is fixed at 1 xEGLD.

Step 2: Set Up the dApp Structure

Let’s organize our files. Run these commands to create the basic structure:

mkdir -p ping-pong/wallet cd ping-pong

In this structure:

• wallet/: Stores your wallet PEM file.
• contract/: Holds the smart contract code.
• dapp/: Contains the web application.

Step 3: Create Your Owner Wallet

Run the command below to generate a wallet that will control the contract. Save the wallet’s PEM file in the wallet/ folder:

mxpy wallet new --format pem --outfile=./wallet/wallet-owner.pem

Don’t forget to fund this wallet with xEGLD from the Devnet faucet to cover transaction costs.

Step 4: The Brain – Smart Contract (Blockchain Layer)

Time to get our smart contract! Clone a template from GitHub and build it:

git clone <https://github.com/multiversx/mx-ping-pong-sc> contract

cd contract/ping-pong

sc-meta all build

This will produce a Web Assembly (WASM) binary (ping-pong.wasm) in the output/ directory.

This creates a Web Assembly (WASM) binary in output/ping-pong.wasm.

Step 5: Deploy the Smart Contract

Now we’re ready to launch this contract to the MultiversX Devnet. Replace 1000000000000000000 with 1 xEGLD and 600 with the lock period in seconds (600 = 10 minutes).

mxpy --verbose contract deploy \\

 --bytecode output/ping-pong.wasm \\

 --pem ../../wallet/wallet-owner.pem \\

 --recall-nonce \\

 --gas-limit 60000000 \\

 --arguments 1000000000000000000 600 \\

 --chain D \\

 --proxy <https://devnet-api.multiversx.com> \\

 --outfile deploy-devnet.interaction.json \\

 --send

Check the logs for the Contract Address and Transaction Hash. Use the MultiversX Devnet Explorer to confirm it’s deployed!

Step 6: Frontend Magic (Application Layer)

Let’s add some visual sizzle to your dApp! Clone the dApp template from GitHub:

git clone <https://github.com/multiversx/mx-template-dapp> dapp

cd dapp

Update Configuration

Open src/config/config-devnet.tsx and add your Contract Address to enable interaction with the smart contract.

Build and Launch the dApp

Make sure you have yarn installed, then run:

yarn install 

yarn start:devnet

Your dApp should now be live on http://localhost:3000! Head over, sign in, and check out the Ping and Pong features!

Testing Your dApp

Ping: After signing in, click Ping to deposit tokens. Confirm the transaction to send 1 xEGLD.

Pong: Once the lock period is over, click Pong to reclaim the tokens back to your wallet.

Next Steps on the MultiversX Journey

You’ve just launched your first MultiversX dApp! There’s a universe to explore—extend the contract, improve the wallet experience, and dive deeper with MultiversX Documentation. You can also find more tips and ask questions on Stack Overflow.

Reference: https://docs.multiversx.com/developers/tutorials/your-first-dapp