Setup truffle suite with drizzle on the front end

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   parser: 'babel-eslint',
   env: {
     es6: true,
+    node: true,
     browser: true,
     jest: true
   },
@@ -16,5 +17,8 @@ module.exports = {
       pragma: 'React',
       version: '16.5.0'
     }
+  },
+  rules: {
+    'react/display-name': 'off'
   }
 };

.gitignore

@@ -36,6 +36,10 @@ node_modules/
 npm-debug.log
 yarn-error.log
 
+# Testing
+#
+coverage/
+
 # BUCK
 buck-out/
 \.buckd/

__mocks__/web3-providers-http.js

@@ -0,0 +1 @@
+module.exports = require('web3-fake-provider');

__mocks__/web3-providers-ws.js

@@ -0,0 +1 @@
+module.exports = require('web3-fake-provider');

babel.config.js

@@ -0,0 +1,16 @@
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    presets: [
+      'module:metro-react-native-babel-preset',
+      'module:react-native-dotenv',
+      'react-native-uport-connect/babel-preset.js'
+    ],
+    plugins: [
+      '@babel/plugin-transform-flow-strip-types',
+      '@babel/plugin-transform-runtime',
+      '@babel/plugin-proposal-class-properties'
+    ].map(require.resolve)
+  };
+};

contracts/StringStore.sol

@@ -0,0 +1,9 @@
+pragma solidity ^0.4.24;
+
+contract StringStore {
+  string public myString = "Hello World";
+
+  function set(string x) public {
+    myString = x;
+  }
+}

index.js

@@ -1,5 +1,5 @@
 /** @format */
-
+import './polyfill';
 import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'react-native',
+  transform: {
+    '^.+\\.js$': 'babel-jest'
+  },
+  globals: {
+    window: true
+  },
+  transformIgnorePatterns: ['node_modules/(?!react-|drizzle).+\\.js$'],
+  setupFiles: ['./test/setup.js']
+};

package.json

@@ -3,45 +3,58 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "react-native start",
+    "start": "concurrently -n w: npm:start:*",
+    "start:react-native": "react-native start",
+    "start:ganache": "truffle compile && ganache-cli",
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "jest": "jest",
     "test": "npm run lint && npm run jest",
-    "prettier": "prettier \"**/*.{js,json,css,md}\" --write"
+    "prettier": "prettier \"**/*.{js,json,css,md}\" --write",
+    "postinstall": "node ./scripts/post-install.js"
   },
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "Base64": "^1.0.1",
+    "drizzle": "git+https://github.com/trufflesuite/drizzle.git#1.2.3",
+    "drizzle-react": "^1.2.0",
+    "eth-block-tracker": "^4.0.3",
+    "node-libs-react-native": "^1.0.3",
     "react": "16.5.0",
     "react-native": "0.57.2",
     "react-native-dotenv": "^0.2.0",
-    "react-native-uport-connect": "git+https://github.com/barlock/react-native-uport-connect.git#support-babel-7"
+    "react-native-uport-connect": "^0.1.3",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.1",
+    "whatwg-url": "^7.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
     "@babel/runtime": "^7.1.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
+    "concurrently": "^4.0.1",
     "eslint": "^5.6.1",
     "eslint-config-prettier": "^3.1.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-native": "^3.3.0",
+    "fs-extra": "^7.0.0",
+    "ganache-cli": "^6.1.8",
     "husky": "^1.1.1",
     "jest": "^23.6.0",
     "metro-react-native-babel-preset": "^0.48.0",
     "prettier": "^1.14.3",
     "pretty-quick": "^1.7.0",
-    "react-test-renderer": "16.5.0"
+    "prop-types": "^15.6.2",
+    "react-test-renderer": "16.5.0",
+    "truffle": "^5.0.0-next.12",
+    "web3-fake-provider": "^0.1.0"
   },
   "resolutions": {
     "babel-core": "7.0.0-bridge.0"
   },
-  "jest": {
-    "preset": "react-native",
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-    }
-  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"

polyfill.js

@@ -0,0 +1,9 @@
+// https://github.com/trufflesuite/drizzle/issues/130
+
+import 'node-libs-react-native/globals';
+import { URL, URLSearchParams } from 'whatwg-url';
+import { btoa } from 'Base64';
+
+global.URL = URL;
+global.URLSearchParams = URLSearchParams;
+global.btoa = btoa;

rn-cli.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  resolver: {
+    extraNodeModules: require('node-libs-react-native')
+  }
+};

scripts/post-install.js

@@ -0,0 +1,13 @@
+const fs = require('fs-extra');
+const drizzlePackage = require('../node_modules/drizzle/package.json');
+
+(async () => {
+  // https://github.com/trufflesuite/drizzle/issues/130
+  drizzlePackage['main'] = './src/index.js';
+
+  await fs.writeFile(
+    './node_modules/drizzle/package.json',
+    JSON.stringify(drizzlePackage, null, 2)
+  );
+  // eslint-disable-next-line no-console
+})().catch(console.log);

src/App.js

@@ -1,61 +1,13 @@
 import React, { Component } from 'react';
-import { Platform, StyleSheet, Text, View, Button } from 'react-native';
-import configureUportConnect from 'react-native-uport-connect';
-import {
-  UPORT_APP_NAME,
-  UPORT_APP_ADDRESS,
-  UPORT_PRIVATE_KEY
-} from 'react-native-dotenv';
-
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu'
-});
+import DrizzleProvider from './components/DrizzleProvider';
+import Home from './screens/Home';
 
 export default class App extends Component {
-  uPortLogin = async () => {
-    const { uport } = configureUportConnect({
-      appName: UPORT_APP_NAME,
-      appAddress: UPORT_APP_ADDRESS,
-      privateKey: UPORT_PRIVATE_KEY
-    });
-
-    const result = await uport.requestCredentials({
-      requested: ['name', 'avatar']
-    });
-
-    alert(JSON.stringify(result));
-  };
-
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-        <Button title={'Log in with uPort'} onPress={this.uPortLogin} />
-      </View>
+      <DrizzleProvider>
+        <Home />
+      </DrizzleProvider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF'
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5
-  }
-});

src/components/DrizzleProvider.js

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { DrizzleContext } from 'drizzle-react';
+import { connect } from 'react-redux';
+import { Drizzle, generateStore } from 'drizzle';
+
+const drizzleOptions = {
+  contracts: []
+};
+
+const drizzleStore = generateStore(drizzleOptions);
+const drizzle = new Drizzle(drizzleOptions, drizzleStore);
+
+// Drizzle init shim
+// https://github.com/trufflesuite/drizzle/pull/100
+drizzleStore.dispatch({
+  type: 'DRIZZLE_INITIALIZING',
+  drizzle: drizzle,
+  options: drizzleOptions
+});
+
+export default class DrizzleProvider extends PureComponent {
+  static propTypes = {
+    children: PropTypes.element.isRequired
+  };
+
+  render() {
+    return (
+      <DrizzleContext.Provider drizzle={drizzle} options={drizzleOptions}>
+        {this.props.children}
+      </DrizzleContext.Provider>
+    );
+  }
+}
+
+export const connectDrizzleState = (...connectArgs) => Component => props => {
+  const ConnectedComponent = connect(...connectArgs)(Component);
+
+  return (
+    <DrizzleContext.Consumer>
+      {drizzleContext => (
+        <ConnectedComponent
+          drizzleInitialized={drizzleContext.initialized}
+          {...drizzleContext}
+          {...props}
+          store={drizzleContext.drizzle.store}
+        />
+      )}
+    </DrizzleContext.Consumer>
+  );
+};