MetaMask Controller

.prettierignore

@@ -1,7 +1,10 @@
 __snapshots__
 android
 coverage
+app/core
 ios
 node_modules
 package-lock.json
 package.json
+shim.js
+index.js

android/app/build.gradle

@@ -137,6 +137,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-randombytes')
     compile project(':react-native-fs')
     compile project(':react-native-vector-icons')
     compile fileTree(dir: "libs", include: ["*.jar"])

android/app/src/main/java/com/metamask/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.bitgo.randombytes.RandomBytesPackage;
 import com.rnfs.RNFSPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactNativeHost;
@@ -25,6 +26,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RandomBytesPackage(),
             new RNFSPackage(),
             new VectorIconsPackage()
       );

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'MetaMask'
+include ':react-native-randombytes'
+project(':react-native-randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/android')
 include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
 include ':react-native-vector-icons'

app/components/App/index.js

@@ -1,11 +1,15 @@
 import { createBottomTabNavigator } from 'react-navigation';
 import BrowserScreen from '../BrowserScreen';
+import WalletScreen from '../WalletScreen';
 
 /**
  * Root application component responsible for configuring the tab navigator
  */
 export default createBottomTabNavigator({
 	Home: {
 		screen: BrowserScreen
+	},
+	Wallet: {
+		screen: WalletScreen
 	}
 });

app/components/Wallet/index.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { StyleSheet, View, Text, ActivityIndicator } from 'react-native';
+import initBackground from '../../core/scripts/background-react-native';
+import { colors } from '../../styles/common';
+
+const styles = StyleSheet.create({
+	wrapper: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		backgroundColor: colors.slate
+	}
+});
+
+export default class Wallet extends Component {
+	state = {
+		rate: null
+	};
+
+	async componentDidMount() {
+		this.controller = await initBackground();
+		this.init();
+	}
+
+	init() {
+		// Example of how to interact with the MM controller
+		const API = this.controller.getApi();
+		API.setCurrentCurrency('usd', (error, rate) => {
+			this.setState({ rate: rate.conversionRate });
+		});
+	}
+
+	renderRate() {
+		if (this.state.rate) {
+			return <Text>ETH RATE: ${this.state.rate}</Text>;
+		}
+		return <ActivityIndicator size="small" />;
+	}
+
+	render() {
+		return <View style={styles.wrapper}>{this.renderRate()}</View>;
+	}
+}

app/components/Wallet/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Wallet from './';
+
+describe('Wallet', () => {
+	it('should render correctly', () => {
+		const wrapper = shallow(<Wallet />);
+		expect(wrapper).toMatchSnapshot();
+	});
+});

app/components/WalletScreen/index.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import Wallet from '../Wallet';
+import Screen from '../Screen';
+
+/**
+ * Main view component for the wallet screen
+ */
+export default class WalletScreen extends Component {
+	render() {
+		return (
+			<Screen>
+				<Wallet />
+			</Screen>
+		);
+	}
+}

app/components/WalletScreen/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import WalletScreen from './';
+
+describe('WalletScreen', () => {
+	it('should render correctly', () => {
+		const wrapper = shallow(<WalletScreen />);
+		expect(wrapper).toMatchSnapshot();
+	});
+});