Developing dApps on MultiversX with React

‍

‍If you've ever been curious about developing dApps and felt a bit lost in the technical sea, you're in the right place. Today, we're diving into the world of dApps on MultiversX using React. We'll guide you through the process step-by-step. So, grab your favorite beverage and let's get started!

If you want the code and the full technical article, please check out my Medium post in the comments.

‍

Why MultiversX?

‍• It is the first truly sharded blockchain, capable of processing up to 100,000 TPS.

• It ensures your dApps are robust against attacks.

• It offers a suite of SDKs, APIs, and tools that make the development process easy.

‍

‍The more scalable and secure a blockchain is, the better the user experience for all.

‍

Setting Up Your EnvironmentFirst things first, let's set up your environment. The easiest way to get started is by using the MultiversX dApp template. This template provides a pre-configured environment so you can jump straight into building your application without the usual setup headaches.1. Head over to the MultiversX GitHub page and clone the dApp template repository.2. Install Dependencies: Run 'npm install' to install all necessary packages.3. Start DevelopingIntegrating a wallet with your dApp is crucial. MultiversX supports various wallet providers like xPortalApp, Defi Extension, Web Wallet, Ledger, and xAlias.

‍

Soon, MetaMask  will join the party too.

‍Reading Data About Your Wallet

‍Once you're logged in, the @multiversx/sdk-dapp library populates a Redux store with data about your wallet. You can inspect this data under Inspect -> Application -> Local storage.

There are two ways to read the current user state: 1. hooks (for use inside components and reacting to changes)

2. simple functions (for reading data outside React components or inside handlers).

‍

‍Smart Contract Interactions

‍Interacting with MultiversX smart contracts involves understanding their inputs and outputs as defined by their ABI. The ABI, usually in JSON format, details the functions (endpoints) of the contract, including their names, inputs, outputs, and mutability (whether the function can modify the contract state or not).

‍Querying the Smart Contract

‍To query a smart contract, you'll use the ABI to craft the query. Here’s an example of a function from a Lottery contract.

‍Sending Transactions

‍To change the state of a smart contract, we call mutable functions by sending transactions. Consider the buy_ticket function, which takes the lottery name as input and is payable in tokens.

‍Monitoring the Transaction Status

‍You can monitor transaction statuses using hooks like useGetActiveTransactionsStatus or by targeting specific transactions with useTrackTransactionStatus.

‍

As you build your dApp, you’ll find that the platform’s infrastructure is designed to support innovation at every turn. Whether you’re integrating advanced wallet functionalities or experimenting with smart contract capabilities, MultiversX provides a solid foundation.Imagine having the flexibility to create complex, dApps that can handle thousands of transactions per second seamlessly. That's the power of Adaptive State Sharding.But it's not just about the technical prowess; it's about the community and the resources available to you. Engaging with this community can provide invaluable insights, collaborative opportunities, and support as you navigate the challenges of dApp development.

‍

So, as you start on your project, remember that you're building more than just an app; you're shaping the future of blockchain.

‍

Remember, the only limit is your imagination!

‍