To get started, it is easiest to just use our Truffle Box template at https://github.com/celo-org/celo-dappkit. This repository includes a "Hello World" example for getting started with DappKit.
Read on for more details about how to set up and configure DappKit.
To create a new expo project, you'll want to use the expo-cli
npm install expo-cli --global// oryarn global add expo-cli​expo init $YOUR_APP_NAME
Read more about general Expo setup at https://expo.io/learn​
We are big fans of Typescript, so if you used the tabs template, you can support typescript by just following these guidelines​
To add DAppKit, run
npm install @celo/dappkit// oryarn add @celo/dappkit
You will need node version 8.13.0
or higher.
DAppKit's dependencies require a bit of adjustment to a vanilla Expo. The first are a lot of the Node.js modules that are expected. You can get those mostly by using the following modules
npm install node-libs-react-native vm-browserify// oryarn add node-libs-react-native vm-browserify
You will need to add the following metro.config.js
to your project root and make sure that the associated npm packages are installed.
const crypto = require.resolve('crypto-browserify')const url = require.resolve('url/')module.exports = {resolver: {extraNodeModules: {crypto,url,fs: require.resolve('expo-file-system'),http: require.resolve('stream-http'),https: require.resolve('https-browserify'),net: require.resolve('react-native-tcp'),os: require.resolve('os-browserify/browser.js'),path: require.resolve('path-browserify'),stream: require.resolve('readable-stream'),vm: require.resolve('vm-browserify')}}}
This should allow you to build the project, however some dependencies might expect certain invariants on the global environment. For that you should create a file global.ts
with the following contents and then add import './global'
at the top of your App.js/tsx
file:
export interface Global {btoa: anyself: anyBuffer: anyprocess: anylocation: any}​declare var global: Globalif (typeof global.self === 'undefined') {global.self = global}if (typeof btoa === 'undefined') {global.btoa = function (str) {return new Buffer(str, 'binary').toString('base64')}}​global.Buffer = require('buffer').Bufferglobal.process = require('process')global.location = {protocol: 'https',}
You may also get two warnings that can be ignored, you can suppress them in the yellow banner with the following in your App.js/tsx
import { YellowBox } from 'react-native'​YellowBox.ignoreWarnings(["Warning: The provided value 'moz","Warning: The provided value 'ms-stream",])