Setup
How to configure and install DAppKit to begin building on Celo.
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"),
},
},
};
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",
]);