Celo offers mobile friendly development environment which includes mainnet and testnet wallet, mobile SDK. In this tutorial we are going to make counter dapp with expo (react native). This dapp will be able to do following things:
- Get account, phone number from mobile wallet
- Create transaction
- Sign transaction
- Yarn Package Manager
- Expo (cli on your computer and expo client in your mobile)
- Celo mobile wallet (Alfajores)
As we are going to work with mobile app you should install expo mobile client and alfajores (celo testnet wallet for mobile devices). Make sure to fund your wallet with faucet.
For setting up our development environment, create a new folder and run following command in that folder:
This will download truffle box created by celo team. You can take a look at it here.
Now, we need to install all the dependencies of our smart contract and mobile app.
Copy the following smart contract code into
HelloWorld.solfile inside of
contractsfolder and then rename the file to
Counter.sol. We will not cover writing smart contracts or the Solidity language in this tutorial. The Solidity documentation is available as a resource to get started.
For deployment, we need to create a migration for the counter smart contract. Inside of the
migrationsfolder go to
2_deploy_contracts.jsand change every
Run following command in terminal:
This will display the account address from which we will deploy the Solidity smart contract.
To be able to afford the deployment costs, it will be necessary to visit the Celo developers faucet and request some tokens.
We need to make one more change in
web3that file to following:
Now, we can run Truffle to deploy the smart contract to Celo.
After the deployment is completed, you will see similar output in the terminal:
There should be two additional files now, inside of the
As we have completed our smart contract part of tutorial, we can move to creating mobile dapp.
Before starting on the UI of our dapp, we will need to change some files.
root.jsand change the
provideto include a valid DataHub API key and RPC endpoint URL. Make sure the URL contains the trailing forward slash after the API key has been inserted
We will go over the React Native portions of the code, but first you need to clear the contents of
App.jsand replace it with the following:
We will go through code method by method.
Here we are using class component of react. These classes have states in which we can store the data.
Appclass we are storing our data.
componentDidMountmethod is creating contract instance so that we can call methods of the smart contract. After creating the smart contract instance we are storing it in state variable
Now, we will be looking at methods given by dapp kit in
loginmethod of our
Here we are setting 3 variables
requestId: used to listen response of our request
dappName: name will show up while getting permission from user
callback: deeplink that will use to redirect user back to dapp
requestAccountAddress, we are passing above 3 parameters.
Now, user will be redirected to celo wallet to get account details which we will use to perform other actions in our dapp.
After getting account details from celo wallet, we will set those in our state variables.
As we are creating counter, we need to get the count.
getCountmethod does that. It calls
getCountmethod of our contract and stores count in state.
Now, we will increment the count with
incrementCountmethod. For this we need to set same three variables
For incrementing count we will create transaction. But first we need to create transaction object
txObjectand then pass that to celo wallet using
requestTxSigmethod takes three parameters:
- kit: contract kit instance
- txParams: parameters required for transaction
- meta: object for dappkit for connecting with celo wallet
This method will create a transaction to increment the value of count. The generated transaction hash will be logged to the console.
After this we are waiting for transaction to complete and then we are updating value of count.
decrementCountmethod is similar to
incrementCountmethod but instead of calling the
incrementCountfunction of smart conttract, we are calling
Remaining method is
renderwhich takes care of UI. Also, we have
styleconstant of end which is used for styling of our component.
Now, only thing remaining do to run our mobile application using expo client on our mobile deice.
This will open browser window like you see here
There you can see QR code at bottom left scan it with QR code scanner from expo client in your mobile device.
It will open up our dapp. It should look like this
Now we can go through process of incrementing the counter. First login by pressing login button. It will give us option to select our wallet of choice
Select Alfajores wallet.
After selecting the wallet, it will redirect us to the actual wallet and ask for permission.
Click on the allow button to give information to our dapp.
Now that we have access, we will be redirected once again to our dapp where the account information will be displayed now in place of the
Not logged intext.
We should now increment the count, which will redirect us to the wallet to sign a transaction.
Click on allow. After reaching our dapp screen we can see the count has increased by 1!
Congratulations for completing this tutorial, Introduction to DappKit! We have now created a functioning mobile dapp on the Celo testnet. This same methodology can be applied to the Celo mainnet as well, to produce functioning distributed applications.
In this tutorial, we have covered some parts of DappKit, how it connects with the Celo mobile wallet, how we can connect our dapp with the mobile wallet and how to do some basic things like getting account addresses, balance of accounts, phone number connected to Celo mobile wallet, and signing transactions.
Thank you for following along with this tutorial, now take this knowledge and build amazing things on Celo!
This tutorial was created by Nikhil Bhintade. Nikhil is a student (BE, Electrical) and crypto enthusiast who's learning all about the world of web3 and want to document what he learned.