Our first Web3 React Native App
In the following lines, I will walk you through the steps we, at Pink Room, took to create our first Web3 app using React Native. But before that, let me give some information about why we started to look into Web3 and why we chose React Native.
We started as a group of friends working in a tiny room with pink walls, 5 years ago. Our primary focus since then has been creating mobile apps using mostly the native approach, namely Kotlin and Swift for Android and iOS.
As we always like to be on the edge of technology, we started looking for Web3, specifically the development of decentralized mobile applications (dapps), some time ago. Firstly we studied the native way but quickly understood that the ecosystem is still in a very early stage. After poking around for some more time, we noticed that React Native turns out to be the framework that has more potential to start exploring this new world of Web3 dapps, right now.
Why React Native
As we said earlier, we chose React Native over frameworks like Flutter or Kotlin Multiplatform. But what made us make this choice? One of the main reasons is the enormous developing community around it. It’s one of the most used frameworks for cross-platform development. We also noticed that the most used libraries in Web3 have a package ready to be used in Javascript. That gave us the confidence to go forward with React Native. And this is very important when you choose a technology or framework because it’s essential to know if you will have the tools needed to build what you want or if it’s even possible to create the tools yourself. The last reason, and least important in this case, is some of our members’ familiarity with React Native and React, which eases the transition into the Web3 world.
Web3 Stack Used
As Web3 apps have a different tech stack than the ones we’re most used to, we investigated the state of the art of tools and frameworks available to build Web3 apps on mobile, using React Native, and integrated them into our dapp. For this investigation, we focused on the Ethereum blockchain. We explored a lot of things, but we are going to show the basic flow to connect a dapp to a wallet and interact with smart contracts.
WalletConnect
WalletConnect is an open protocol for connecting dapps to mobile wallets. We use WalletConnect to connect our app to a wallet and to sign and send transactions that change the state of our smart contract and, thereby, the blockchain.
Web3.js
Web3.js is a collection of libraries which allow us to interact with a local or remote Ethereum node using an HTTP or IPC connection. It can retrieve user accounts, send transactions, interact with smart contracts, and more.
Alchemy
Alchemy is an Ethereum blockchain node provider. This means that they run a blockchain node to which we connect our dapp. It serves as the connection point between our dapp and the blockchain.
Alchemy also has other blockchain related APIs, like subscribing to transactions, for debugging transactions or searching transaction history. We are not using this in our app, but it can be very useful in other dapps we build in the future.
App Structure
Using the stack described above, we’ve created a sample dapp to see how this integrates. The app is public and available here.
Before starting to explain the app, just some quick notes. We used a smart contract our team had already developed, available on our Github. This smart contract was built just to use as an example and is not supposed to be a production ready or audited smart contract. This smart contract simulates a peanut butter store, where the user can create their own jar recipe, see the available ingredients to use in the recipes, see the available jars, and buy a jar of an existing recipe. You will see the connection between our dapp and these smart contract methods further down the post.
So, to start, let’s take it by parts:
- Connect to Our Wallet
The first thing to do is connect our app to our wallet. To do this, as said before, we used WalletConnect. The code to do this is pretty straightforward.
2. Create Web3 Client
After connecting to our wallet, we need to create a Web3 client that we can use to interact with the smart contract. This is done simply by creating an instance of Web3.js with the URL of the Alchemy node. If you use another node provider apart from Alchemy, you must put the node’s URL here.
3. Load Contract Info
With our client created, we will use it to load the contract information into our app. This information makes all the methods and variables implemented in the contract available in our code. This is done using the contract ABI, which is a JSON that specifies all the variables and methods existent in the smart contract we’re using, and the contract’s address. This is the blockchain address of the deployed contract. Remember those features we talked about earlier? This is what gives us access to the methods that we will use to implement those features. They will be available in the ourSmartContract object.
4. Read and Write
After all these steps are done, we are ready to interact with the smart contract deployed. There are two ways of interacting with a contract: reading or writing information.
For reading purposes, we can use the Web3 library for accessing the read methods in our smart contract. This is an example:
As we can see, we call the getJars method available in the ourSmartContract object. This method retrieves the available jars that users can buy. We then parse the response so it can be presented in the app.
The writing procedure is the following:
This will open our wallet app so we can sign the transaction there. After the signing, the wallet sends the transaction for us to the blockchain. The data is encoded using the abi of the contract for this specific method.
Pains We Felt
After developing our first Web3 dapp coming from the Web2 world, we felt some pain. First of all, as there is not considerable info around mobile dapps, it wasn’t easy at the beginning to understand what stack we should use and how to integrate all of it. In the end, it turned out quite simple, but we must first understand it to make things simple.
Another pain was configuring the project and adding all the necessary packages to the dapp. As React Native doesn’t copy built-in node packages to the app, we had to make some magic to be able to run the app. To overcome this, we created the metro.config.js file and made some changes to index.js. This configuration problem is a pain many other developers feel in React Native Web3 development and has been a known issue for years. Our solution was not the only method to overcome the problem but was the one that fixed it for us. If you are struggling with the same problem, feel free to fork our Github repo and continue your development.
One last pain during development was figuring out how to properly sign transactions. As we said before, we needed to use a wallet, like Metamask, to sign our transactions as we didn’t have the user’s private key. In the investigation phase we felt a vast lack of information regarding how to integrate with Wallets and sign transactions, especially for beginners in Web3 development.
But the lack of available information wasn’t just on this topic. We also feel that the mobile development community still hasn’t embraced the Web3 world, as there is a general lack of information. This may occur because there aren’t many developers working on mobile dapps. As the number of developers increases, more information will be available, and the learning curve will ease out.
Next Steps
The following steps in our app will be to introduce a more stable way to use Typescript when communicating with the smart contract. While with this sample dapp it’s easy to overcome the lack of Typescript when interacting with the smart contract methods, as the dapp grows, it becomes challenging to maintain insight on all the methods available.
Another step forward can be interacting more with the web3 client and checking all the potential it has. Probably some features associated with the wallet connected to the app.
If you want to expand the app with some features, feel free to fork our dapp or submit some Pull Request to our repo and share any questions that you may have.
