Mandatory: Make sure that you have the Yarn package manager and Truffle installed, then $ truffle unbox critesjosh/celo-dappkit in your new project directory. Also, be sure to use Node.js version 10.x.
Use this Truffle Box to get started building a mobile dapp using Celo and React Native in Javascript. We will build a simple React Native application that we can use to read and update a contract on the Alfajores test network.
Once you download the box, run $ yarn to install the necessary smart contract development dependencies. Navigate to the client directory and run $ yarn again to install the client application dependencies.
This Truffle box uses React Native and Expo for developing a mobile first Celo blockchain experience. You will also need Expo installed globally on your machine. Install it with:
$ npm install expo-cli --global
You can get started quickly without installing anything on your computer by opening this project on Gitpod. When you open the project you will have to wait several minutes for the packages to install. This is just for demonstration purposes--development on Gitpod is too slow to be practical. You will need the Expo app installed on your mobile device (iOS or Android). You will also need the Celo Wallet on your mobile device to sign transactions. The app may automatically connect to a HelloWorld contract that has already been deployed to the testnet, or you may have to deploy your own (details below).
The project comes with a Hello World example contract in the root contracts directory. The box is also configured to deploy Solidity smart contracts to the Alfajores test network, but you will need test network funds to pay for the deployment costs.
Run
$ npm run account
to create a new account for development. The new account address will be printed in the console. This script will generate a private key for you and store it in /.secret. If you need to print the account info again, run $ npm run account again, it will not create a new account, it will read the saved private key and print the corresponding account address.
Truffle will read this private key for contract deployments.
Copy your account address and paste it in to the Alfajores faucet to fund your account.
You can migrate the HelloWorld.sol contract to the alfajores test network with
$ truffle migrate --network alfajoresTo run a local development Celo blockchain, use the Celo fork of ganache-cli. You can find the package details and install instructions here.
You should deploy the HelloWorld.sol contract to work through the exercise. You can deploy it using the remote node specified in truffle-config.js. You may get an error about connecting to a running RPC client. If you run into the error, trying running truffle migrate --network alfajores again. A successful deployment should print something like the following:
Joshs-MacBook-Pro-2:untitled folder joshcrites$ truffle migrate --network alfajores
Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.
Starting migrations...
======================
> Network name: 'alfajores'
> Network id: 44786
> Block gas limit: 0x1312d00
1_initial_migration.js
======================
Deploying 'Migrations'
----------------------
> transaction hash: 0x8a7d5f323ef9e356407566ded4d191e3b68b0ba579c5a7b920e5dea3936bb101
> Blocks: 0 Seconds: 4
> contract address: 0x6363f95B5dDe5bbb1A73dbdc752036e105769207
> block number: 587188
> block timestamp: 1583779418
> account: 0x0ac6eDb733EAB57f8fa6c0F8678de0b9ef950bc6
> balance: 4.98552399999999992
> gas used: 188419
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00376838 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00376838 ETH
2_deploy_contracts.js
=====================
Deploying 'HelloWorld'
----------------------
> transaction hash: 0xb48d8f2da01f49b6ebe3dd2391b289c735afd2ec1b57902a5bd3958c4b5773b3
> Blocks: 1 Seconds: 4
> contract address: 0xD9BBC1c3C76bd285C33de5Df4b987369EC66DC56
> block number: 587190
> block timestamp: 1583779428
> account: 0x0ac6eDb733EAB57f8fa6c0F8678de0b9ef950bc6
> balance: 4.979126059999999888
> gas used: 277896
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00555792 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00555792 ETH
Summary
=======
> Total deployments: 2
> Final cost: 0.0093263 ETH
Since we are developing this on the public Alfajores test network, we can view all the accounts, contracts and transactions on the public block explorer.
You can look up the contract deployment transaction on the Alfajores block explorer via the transaction hash, https://alfajores-blockscout.celo-testnet.org/tx/0xb48d8f2da01f49b6ebe3dd2391b289c735afd2ec1b57902a5bd3958c4b5773b3 in this case.
Truffle will save the deployment information to the Truffle artifact located at client/contracts/HelloWorld.json. You will use this deployment information to connect your React Native application to the correct contract.
Keep in mind that you will need a version of the Celo Wallet installed on the mobile device with which you are developing the application. The Celo Wallet is the private key management software used to sign transactions for the user.
You can build a the latest version of the Celo Wallet and find instructions on running a development build here. Once you have a device with the Celo wallet installed, you can start working on your application.
For the purposes of introduction, we have added some code to you get you started located in App.js in the client directory.
In this project, the React Native application lives in the client directory. cd into the client directory and run $ yarn to install the dependencies.
Expo is a tool that makes developing React Native applications much easier. We will be using Expo for easy setup.
Install it with:
$ npm install expo-cli --global
You can start the application with
$ expo start
You can use your physical mobile device or an emulator to develop apps with Expo. If you want to use your physical device, you will have to install the Expo app on your device.
Make sure the Celo Wallet app is open on your device when you are using your dapp. Your dapp will be requesting information from the Celo Wallet.
You can find more information about running and Android emulator here.
You should now have the necessary skills to get started with developing mobile applications on Celo.
This is not a comprehensive tutorial for Celo's features and capabilities.
Please see our documentation for more info and feel free to connect with us on Discord if you need any help!