Setup

Quick Start
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.
Configuration
Read on for more details about how to set up and configure DappKit.
Installation
To create a new expo project, you'll want to use the expo-cli
npm install expo-cli --global
// or
yarn global add expo-cli
​
expo init $YOUR_APP_NAME
Read more about general Expo setup at https://expo.io/learn​
Typescript Support
We are big fans of Typescript, so if you used the tabs template, you can support typescript by just following these guidelines​
Setup
To add DAppKit, run
npm install @celo/dappkit
// or
yarn 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
// or
yarn 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: any
  self: any
  Buffer: any
  process: any
  location: any
}
​
declare var global: Global
if (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').Buffer
global.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",
])
Developer Guide - Previous
DAppKit
Usage
Last updated 1 week ago