Sign up + LockScreen (#28)

* ready to create accounts * account generation working * added login screen * avoid setstate when unmounted * clean up * more clean up * account list using real addresses * account list using real addresses * clean up * update tests * clean up * fix android builds * android and ios are working * android view looking good * UI refactor * code review stuff * update * more code review stuff
MetaMask · Aug 9, 2018 · b08e380 · b08e380
1 parent 15aa2f0
commit b08e380
Show file tree

Hide file tree

Showing 49 changed files with 1,030 additions and 429 deletions.
diff --git a/.gitignore b/.gitignore
@@ -52,4 +52,3 @@ coverage
 /android/app/src/main/assets/InpageBridge.js
 /android/app/src/main/assets/InpageBridgeWeb3.js
 /app/core/InpageBridgeWeb3.js
-/shim.js
diff --git a/.prettierignore b/.prettierignore
@@ -1,8 +1,6 @@
 /android/app/src/main/assets/InpageBridge.js
 /android/app/src/main/assets/InpageBridgeWeb3.js
 /app/core/InpageBridgeWeb3.js
-/shim.js
-/shim.js
 __snapshots__
 android
 coverage

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -103,6 +103,7 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        multiDexEnabled true
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
@@ -137,6 +138,9 @@ android {
 }
 
 dependencies {
+	compile 'com.android.support:multidex:1.0.1'
+    compile project(':react-native-aes-crypto')
+    compile project(':react-native-keychain')
     compile project(':react-native-os')
     compile project(':react-native-linear-gradient')
     compile project(':react-native-randombytes')

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -1,9 +1,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.metamask">
+    package="com.metamask"
+	xmlns:tools="http://schemas.android.com/tools"
+>
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
+	<uses-sdk tools:overrideLibrary="com.tectiv3.aes" />
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

diff --git a/android/app/src/main/java/com/metamask/MainApplication.java b/android/app/src/main/java/com/metamask/MainApplication.java
@@ -3,6 +3,8 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.tectiv3.aes.RCTAesPackage;
+import com.oblador.keychain.KeychainPackage;
 import com.peel.react.rnos.RNOSModule;
 import com.BV.LinearGradient.LinearGradientPackage;
 import com.bitgo.randombytes.RandomBytesPackage;
@@ -17,7 +19,10 @@
 import java.util.Arrays;
 import java.util.List;
 
-public class MainApplication extends Application implements ReactApplication {
+import android.support.multidex.MultiDexApplication;
+
+
+public class MainApplication extends MultiDexApplication implements ReactApplication {
 
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
     @Override
@@ -29,6 +34,8 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new RCTAesPackage(),
+            new KeychainPackage(),
             new RNOSModule(),
             new LinearGradientPackage(),
             new RandomBytesPackage(),

diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,4 +1,8 @@
 rootProject.name = 'MetaMask'
+include ':react-native-aes-crypto'
+project(':react-native-aes-crypto').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-aes-crypto/android')
+include ':react-native-keychain'
+project(':react-native-keychain').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keychain/android')
 include ':react-native-os'
 project(':react-native-os').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-os/android')
 include ':react-native-linear-gradient'

diff --git a/app/components/AccountList/__snapshots__/index.test.js.snap b/app/components/AccountList/__snapshots__/index.test.js.snap
@@ -1,154 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accounts should render correctly 1`] = `
-<SafeAreaView
-  style={
+<Connect(AccountList)
+  accounts={
     Object {
-      "backgroundColor": "#f1f2f6",
-      "flex": 1,
+      "0xe7E125654064EEa56229f273dA586F10DF96B0a1": Object {
+        "address": "0xe7E125654064EEa56229f273dA586F10DF96B0a1",
+        "balance": 0,
+        "name": "account 1",
+      },
     }
   }
->
-  <Component
-    style={
-      Object {
-        "color": "#333333",
-        "fontFamily": "Roboto",
-        "fontSize": 25,
-        "fontWeight": "500",
-        "marginHorizontal": 20,
-        "marginVertical": 30,
-      }
-    }
-  >
-    My Accounts
-  </Component>
-  <Component>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      key="account-0xe7E125654064EEa56229f273dA586F10DF96B0a1"
-      onPress={[Function]}
-      style={
-        Object {
-          "flexDirection": "row",
-          "marginBottom": 20,
-          "marginLeft": 20,
-        }
-      }
-    >
-      <Component
-        style={
-          Object {
-            "marginRight": 15,
-            "width": 30,
-          }
-        }
-      >
-        <Icon
-          allowFontScaling={false}
-          color="#007aff"
-          name="check"
-          size={30}
-        />
-      </Component>
-      <IdenticonComponent
-        address="0xe7E125654064EEa56229f273dA586F10DF96B0a1"
-        diameter={38}
-      />
-      <Component
-        style={
-          Object {
-            "marginLeft": 15,
-          }
-        }
-      >
-        <Component
-          style={
-            Object {
-              "color": "#333333",
-              "fontFamily": "Roboto",
-              "fontSize": 18,
-              "fontWeight": "400",
-            }
-          }
-        >
-          Account 1
-        </Component>
-        <Component
-          style={
-            Object {
-              "color": "#999999",
-              "fontFamily": "Roboto",
-              "fontSize": 12,
-              "fontWeight": "400",
-              "paddingTop": 5,
-            }
-          }
-        >
-          0.017700
-           ETH
-        </Component>
-      </Component>
-    </TouchableOpacity>
-    <TouchableOpacity
-      activeOpacity={0.2}
-      key="account-0xf4F6A83117a9D0a9cA3b9684DEDaBc69d56721D8"
-      onPress={[Function]}
-      style={
-        Object {
-          "flexDirection": "row",
-          "marginBottom": 20,
-          "marginLeft": 20,
-        }
-      }
-    >
-      <Component
-        style={
-          Object {
-            "marginRight": 15,
-            "width": 30,
-          }
-        }
-      />
-      <IdenticonComponent
-        address="0xf4F6A83117a9D0a9cA3b9684DEDaBc69d56721D8"
-        diameter={38}
-      />
-      <Component
-        style={
-          Object {
-            "marginLeft": 15,
-          }
-        }
-      >
-        <Component
-          style={
-            Object {
-              "color": "#333333",
-              "fontFamily": "Roboto",
-              "fontSize": 18,
-              "fontWeight": "400",
-            }
-          }
-        >
-          Account 2
-        </Component>
-        <Component
-          style={
-            Object {
-              "color": "#999999",
-              "fontFamily": "Roboto",
-              "fontSize": 12,
-              "fontWeight": "400",
-              "paddingTop": 5,
-            }
-          }
-        >
-          0.4
-           ETH
-        </Component>
-      </Component>
-    </TouchableOpacity>
-  </Component>
-</SafeAreaView>
+  selectedAddress="0xe7E125654064EEa56229f273dA586F10DF96B0a1"
+/>
 `;
diff --git a/app/components/AccountList/index.js b/app/components/AccountList/index.js
@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
 import { TouchableOpacity, StyleSheet, Text, View, SafeAreaView } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import { colors, fontStyles } from '../../styles/common';
 import Identicon from '../Identicon';
+import Button from '../Button';
+import Engine from '../../core/Engine';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -16,6 +20,9 @@ const styles = StyleSheet.create({
 		color: colors.fontPrimary,
 		...fontStyles.bold
 	},
+	accountsWrapper: {
+		flex: 1
+	},
 	account: {
 		flexDirection: 'row',
 		marginLeft: 20,
@@ -38,52 +45,76 @@ const styles = StyleSheet.create({
 	selected: {
 		width: 30,
 		marginRight: 15
+	},
+	footer: {
+		height: 80,
+		justifyContent: 'flex-end',
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	icon: {
+		height: 50,
+		width: 10,
+		backgroundColor: colors.concrete
 	}
 });
 
 /**
- * View contains the list of all the available accounts
+ * View that contains the list of all the available accounts
  */
+class AccountList extends Component {
+	static propTypes = {
+		/**
+		 * An object containing each identity in the format addres => account
+		 */
+		accounts: PropTypes.object
+	};
 
-export default class AccountList extends Component {
 	state = {
 		selectedAccountIndex: 0
 	};
 
-	onAccountPress = newIndex => {
-		this.setState({ selectedAccountIndex: newIndex });
+	onAccountChange = async newIndex => {
+		const previousIndex = this.state.selectedAccountIndex;
+		try {
+			this.setState({ selectedAccountIndex: newIndex });
+			await Engine.api.preferences.update({ selectedAddress: Object.keys(this.props.accounts)[newIndex] });
+		} catch (e) {
+			// Restore to the previous index in case anything goes wrong
+			this.setState({ selectedAccountIndex: previousIndex });
+			console.error('error while trying change the selected account', e); // eslint-disable-line
+		}
 	};
 
-	renderAccounts() {
-		const accounts = [
-			{
-				label: 'Account 1',
-				address: '0xe7E125654064EEa56229f273dA586F10DF96B0a1',
-				balance: '0.017700'
-			},
-			{
-				label: 'Account 2',
-				address: '0xf4F6A83117a9D0a9cA3b9684DEDaBc69d56721D8',
-				balance: '0.4'
-			}
-		];
+	addAccount = async () => {
+		try {
+			await Engine.api.keyring.addNewAccount();
+			this.setState({ selectedAccountIndex: Object.keys(this.props.accounts).length - 1 });
+		} catch (e) {
+			// Restore to the previous index in case anything goes wrong
+			console.error('error while trying to add a new account', e); // eslint-disable-line
+		}
+	};
+
+	openAccountSettings = () => false;
 
-		return accounts.map((account, i) => {
+	renderAccounts() {
+		const { accounts } = this.props;
+		return Object.keys(accounts).map((key, i) => {
+			const { name, address, balance = 0 } = accounts[key];
 			const selected =
 				this.state.selectedAccountIndex === i ? <Icon name="check" size={30} color={colors.primary} /> : null;
 
-			const { address, label, balance } = account;
-
 			return (
 				<TouchableOpacity
 					style={styles.account}
 					key={`account-${address}`}
-					onPress={() => this.onAccountPress(i)} // eslint-disable-line
+					onPress={() => this.onAccountChange(i)} // eslint-disable-line
 				>
 					<View style={styles.selected}>{selected}</View>
 					<Identicon address={address} diameter={38} />
 					<View style={styles.accountInfo}>
-						<Text style={styles.accountLabel}>{label}</Text>
+						<Text style={styles.accountLabel}>{name}</Text>
 						<Text style={styles.accountBalance}>{balance} ETH</Text>
 					</View>
 				</TouchableOpacity>
@@ -96,7 +127,18 @@ export default class AccountList extends Component {
 			<SafeAreaView style={styles.wrapper}>
 				<Text style={styles.title}>My Accounts</Text>
 				<View style={styles.accountsWrapper}>{this.renderAccounts()}</View>
+				<View style={styles.footer}>
+					<Button style={[styles.icon, styles.left]} onPress={this.addAccount}>
+						<Icon name="plus" size={30} color={colors.fontSecondary} />
+					</Button>
+					<Button style={[styles.icon, styles.right]} onPress={this.openAccountSettings}>
+						<Icon name="cog" size={30} color={colors.fontSecondary} />
+					</Button>
+				</View>
 			</SafeAreaView>
 		);
 	}
 }
+
+const mapStateToProps = state => ({ accounts: state.backgroundState.preferences.identities });
+export default connect(mapStateToProps)(AccountList);