How to setup the Celo Wallet locally, complete basic wallet functions, and troubleshoot common issues.
To do this, follow the setup instructions.
(Optional) Gradle improvement
This makes Gradle faster:
export GRADLE_OPTS='-Dorg.gradle.daemon=true -Dorg.gradle.parallel=true -Dorg.gradle.jvmargs="-Xmx4096m -XX:+HeapDumpOnOutOfMemoryError"'
If you haven't already, run
yarnfrom the monorepo root to install dependencies.
Attach your device or start an emulated one.
You can verify if your device is properly connecting to ADB with
adb devices. More information about running the app on Android devices can be found on the React Native docs.
Compile the project and start the bundler with
yarn run dev
This will build the app in a device (physical or emulated) and open a terminal with a js server.
Note: We've seen some issues running the metro bundler from iTerm
In order to debug, you should run:
yarn run dev:show-menu
A menu will pop-up in the app and you should hit
Start Remote JS Debugging. This will open a new tab in your browser with React Native logger in the console. In order to get a full picture, the console's filter should be set to
You will probably want to open the dev menu again and enable
Live Reloading and
Hot Reloading to make development faster.
(Optional) React Native debugger app
The React Native debugger app bundles together the Redux and Chrome dev tools nicely.
Start the emulator and load up the app. Then run the following to start react devtools.
yarn run react-devtools
It should automatically connect to the running app, and includes a profiler (second tab). Start recorder with the profiler, using the app, and the stop recording. The flame graph provides a view of each component and sub-component. The width is proportional to how long it took to load. If it is grey, it was not re-rendered at that 'commit' or DOM change. Details on the react native profiler are here. The biggest thing to look for are large number of renders when no state has changed. Reducing renders can be done via pure components in react or overloading the should component update method example here.
Connecting to networks
By default, we have the
alfajores network set up. If you have other testnets that you want to use with the app, you can download the contract artifacts as per instructions in the protocol package. Once you have done that, you can run
yarn run update-contracts --testnets=my_testnet,my_other_testnet
--testnets should be a comma-separated list of testnets whose artifacts you have under
update-contracts will copy them to the mobile app for use. Avoid unnecessary check-ins of contract artifacts.
We use Jest snapshot testing to assert that no intentional changes to the component tree have been made without explicit developer intention. See an example at
src/components/CodeRow.test.tsx. If your snapshot is expected to deviate, you can update the snapshot with the
--updateSnapshot flag when running the test.
Shallow rendering testing
We use Enzyme as an additional testing tool. It allows for shallow rendering, which reduces running time and the amount of stubbing you have to do by only rendering the immediate children (and not the grandchildren etc.) Further, you can interact with the rendered tree to assert proper reactions to user interaction and input. See an example at
src/components/CodeRow.test.tsx or read more about the docs.
We use Detox for E2E testing. In order to run the tests locally, you must have the proper emulator set up. Emulator installation instructions can be found here. Please make sure to set up the emulator you would like to run the tests with is set up properly with the name
123456 as the pin code in the emulator, since the e2e tests rely on that.
Next, the VM snapshot settings should be modified:
- Close all apps and lock the emulator (go to lock screen).
- Power off the emulator
- Power it back on and go to emulator settings (... button) -> Snapshots -> Settings
- Set Auto-Save to No
- Make sure to have watchman installed:
brew install watchman
- It's a known detox issue that test will fail if a emulator is renamed.
- Make sure the emulator is not running before runing the tests.
For information on how to run and extend the e2e tests, refer to the e2e readme.
Generating GraphQL Types
We're using GraphQL Code Generator to properly type GraphQL queries. If you make a change to a query, run
yarn run gen-types to update the typings in the
Celo Wallet API Keys
Running The Celo App Without API Keys
The mobile app can run without putting the Firebase keys in place by changing the env variable
FIREBASE_ENABLED to false in the mobile package.
For Testnet configuration, an env variable called
MNEMONIC should be set with a seed to generate validators private keys. Remember to make this seed long enough to be secured (20 words or more).
Please keep your keys secret- avoid committing them to github and/or publishing keys for your infrastructure in any way.