Version 0.2.0

Version 0.2.0

Author: estebanmino

.circleci/config.yml

@@ -141,7 +141,7 @@ jobs:
           destination: builds
       - store_artifacts:
           path: sourcemaps/android
-          destination: sourcemaps
+          destination: sourcemaps-android
       - run:
           name: Announcing pre-release
           command: npm run build:announce
@@ -162,7 +162,7 @@ jobs:
           command: npm run build:ios:pre-release
       - store_artifacts:
           path: sourcemaps/ios
-          destination: sourcemaps
+          destination: sourcemaps-ios
 workflows:
   version: 2
   full_test:

README.md

@@ -1,14 +1,14 @@
 ![MetaMask logo](logo.png?raw=true)
-# MetaMask 
+# MetaMask
 MetaMask is a mobile web browser that provides easy access to websites that use the [Ethereum](https://ethereum.org/) blockchain.
 
 For up to the minute news, follow our [Twitter](https://twitter.com/metamask_io) or [Medium](https://medium.com/metamask) pages.
 
 To learn how to develop MetaMask-compatible applications, visit our [Developer Docs](https://metamask.github.io/metamask-docs/).
 
-## MetaMask Mobile 
+## MetaMask Mobile
 
-### Building locally 
+### Building locally
 The code is built using React-Native and running code locally requires a Mac or Linux OS.
 
 - Install [Node.js](https://nodejs.org) **version 8 (latest stable) and npm@6**
@@ -17,7 +17,7 @@ The code is built using React-Native and running code locally requires a Mac or
         - Install npm@6 using `npm install -g npm@6`
 
 - Before starting, you need to install React Native dependencies:
-    - [MacOs](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-1) 
+    - [MacOs](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-1)
     - [Linux](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-2)
  -  Now clone this repo and then install all our dependencies
 
@@ -26,7 +26,7 @@ cd MetaMask
 npm i
 ```
 
-- Running the app on Android: 
+- Running the app on Android:
 
 ```bash
 npm run start:android
@@ -39,24 +39,29 @@ npm run start:ios
 ```
 
 ### Running tests:
- - Unit test: 
+ - Unit test:
 ```
 npm run test:unit
-``` 
+```
  - E2E Tests (iOS)
 ```
 npm run test:e2e:ios
-``` 
+```
  - E2E Tests (Android)
 ```
 npm run test:e2e:android
-``` 
+```
 
-    
-### Troubleshooting 
+### Troubleshooting
 
 Visit [Troubleshooting for React Native](https://facebook.github.io/react-native/docs/troubleshooting#content)
-    
+
 ## License
 
-To be defined...
+MetaMask Mobile is an exciting development for our team and our ecosystem. We've always been proud to offer the MetaMask browser extension under the MIT open source software license. We are still working through licensing considerations for the mobile application in light of a new delivery medium and our business goals. We are exploring many models, all with a significant open component, but we have not made any final decisions.
+
+The source code for this beta is currently viewable under the below copyright. A license to use the mobile version will be distributed along with the mobile application. We believe it is important for our users to be able inspect and verify our code for trustworthiness, but we also wish to preserve our licensing options until we're certain what is best for MetaMask, our community, and our ecosystem. If you have any questions or comments, we would really appreciate hearing your feedback – you can reach us at [email protected]
+
+© ConsenSys AG, 2016-2019
+
+You are granted a limited non-exclusive license to inspect and study the code in this repository. There is no associated right to reproduction granted under this license except where reproduction is necessary for inspection and study of the code. You may not otherwise reproduce, distribute, modify or create derivative works of the code without our prior consent. All other rights are expressly reserved.

android/app/build.gradle

@@ -174,8 +174,8 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 11
-        versionName "0.1.10"
+        versionCode 13
+        versionName "0.2.0"
         multiDexEnabled true
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy "minReactNative", "minReactNative46"

app/components/Nav/Main/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
 	InteractionManager,
 	ActivityIndicator,
@@ -313,7 +313,7 @@ const MainNavigator = createStackNavigator(
 	}
 );
 
-class Main extends Component {
+class Main extends PureComponent {
 	static router = {
 		...MainNavigator.router
 	};

app/components/UI/AccountApproval/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, View, InteractionManager } from 'react-native';
@@ -150,7 +150,7 @@ const styles = StyleSheet.create({
 /**
  * Account access approval component
  */
-class AccountApproval extends Component {
+class AccountApproval extends PureComponent {
 	static propTypes = {
 		/**
 		 * Object containing current page title, url, and icon href

app/components/UI/AccountInput/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import Identicon from '../Identicon';
 import PropTypes from 'prop-types';
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
  * ComboBox form component allowing address input with auto-completion based on
  * the current keychain's accounts
  */
-class AccountInput extends Component {
+class AccountInput extends PureComponent {
 	static propTypes = {
 		/**
 		 * List of accounts from the PreferencesController
@@ -171,7 +171,7 @@ class AccountInput extends Component {
 		/**
 		 * Map representing the address book
 		 */
-		addressBook: PropTypes.array,
+		addressBook: PropTypes.object,
 		/**
 		 * Callback close all drowpdowns
 		 */
@@ -223,7 +223,7 @@ class AccountInput extends Component {
 		const { address } = this.state;
 		try {
 			const resolvedAddress = await this.ens.lookup(recipient.trim());
-			if (address !== ZERO_ADDRESS && resolvedAddress !== address) {
+			if (address !== ZERO_ADDRESS && isValidAddress(resolvedAddress)) {
 				this.setState({ address: resolvedAddress, ensRecipient: recipient });
 				return true;
 			}
@@ -296,14 +296,7 @@ class AccountInput extends Component {
 
 	getVisibleOptions = value => {
 		const { accounts, addressBook } = this.props;
-		const addressBookItems = {};
-		if (addressBook.length > 0) {
-			addressBook.forEach(contact => {
-				addressBookItems[contact.address] = contact;
-			});
-		}
-
-		const allAddresses = { ...addressBookItems, ...accounts };
+		const allAddresses = { ...addressBook, ...accounts };
 
 		if (typeof value !== 'undefined' && value.toString().length > 0) {
 			// If it's a valid address we don't show any suggestion
@@ -321,7 +314,10 @@ class AccountInput extends Component {
 					filteredAddresses[address] = allAddresses[address];
 				}
 			});
-			return filteredAddresses;
+
+			if (filteredAddresses.length > 0) {
+				return filteredAddresses;
+			}
 		}
 		return allAddresses;
 	};
@@ -373,6 +369,10 @@ class AccountInput extends Component {
 		});
 	};
 
+	closeDropdown = () => {
+		// nice to have
+	};
+
 	render = () => {
 		const { value, ensRecipient, address } = this.state;
 		const { placeholder, isOpen } = this.props;
@@ -398,6 +398,7 @@ class AccountInput extends Component {
 								numberOfLines={1}
 								onBlur={this.onBlur}
 								onFocus={this.onInputFocus}
+								onSubmitEditing={this.onFocus}
 							/>
 							<View style={styles.ensView}>
 								{ensRecipient && <Text style={styles.ensAddress}>{renderShortAddress(address)}</Text>}

app/components/UI/AccountList/AccountElement/index.js

@@ -0,0 +1,130 @@
+import React, { PureComponent } from 'react';
+import Identicon from '../../Identicon';
+import PropTypes from 'prop-types';
+import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
+import { colors, fontStyles } from '../../../../styles/common';
+import { renderFromWei } from '../../../../util/number';
+import { getTicker } from '../../../../util/transactions';
+import { strings } from '../../../../../locales/i18n';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const styles = StyleSheet.create({
+	account: {
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderColor: colors.grey100,
+		flexDirection: 'row',
+		paddingHorizontal: 20,
+		paddingVertical: 20,
+		height: 80
+	},
+	accountInfo: {
+		marginLeft: 15,
+		marginRight: 0,
+		flex: 1,
+		flexDirection: 'row'
+	},
+	accountLabel: {
+		fontSize: 18,
+		color: colors.fontPrimary,
+		...fontStyles.normal
+	},
+	accountBalance: {
+		paddingTop: 5,
+		fontSize: 12,
+		color: colors.fontSecondary,
+		...fontStyles.normal
+	},
+	importedView: {
+		flex: 0.5,
+		alignItems: 'center',
+		marginTop: 2
+	},
+	accountMain: {
+		flex: 1,
+		flexDirection: 'column'
+	},
+	selectedWrapper: {
+		flex: 0.2,
+		alignItems: 'flex-end'
+	},
+	importedText: {
+		color: colors.grey400,
+		fontSize: 10,
+		...fontStyles.bold
+	},
+	importedWrapper: {
+		width: 73,
+		paddingHorizontal: 10,
+		paddingVertical: 3,
+		borderRadius: 10,
+		borderWidth: 1,
+		borderColor: colors.grey400
+	}
+});
+
+/**
+ * View that renders specific account element in AccountList
+ */
+export default class AccountElement extends PureComponent {
+	static propTypes = {
+		/**
+		 * Callback to be called onPress
+		 */
+		onPress: PropTypes.func.isRequired,
+		/**
+		 * Callback to be called onLongPress
+		 */
+		onLongPress: PropTypes.func.isRequired,
+		/**
+		 * Current ticker
+		 */
+		ticker: PropTypes.string,
+		item: PropTypes.object
+	};
+
+	onPress = () => {
+		const { onPress } = this.props;
+		const { index } = this.props.item;
+		onPress && onPress(index);
+	};
+
+	onLongPress = () => {
+		const { onLongPress } = this.props;
+		const { address, isImported, index } = this.props.item;
+		onLongPress && onLongPress(address, isImported, index);
+	};
+
+	render() {
+		const { address, balance, ticker, name, isSelected, isImported } = this.props.item;
+		const selected = isSelected ? <Icon name="check-circle" size={30} color={colors.blue} /> : null;
+		const imported = isImported ? (
+			<View style={styles.importedWrapper}>
+				<Text numberOfLines={1} style={styles.importedText}>
+					{strings('accounts.imported')}
+				</Text>
+			</View>
+		) : null;
+		return (
+			<TouchableOpacity
+				style={styles.account}
+				key={`account-${address}`}
+				onPress={this.onPress}
+				onLongPress={this.onLongPress}
+			>
+				<Identicon address={address} diameter={38} />
+				<View style={styles.accountInfo}>
+					<View style={styles.accountMain}>
+						<Text numberOfLines={1} style={[styles.accountLabel]}>
+							{name}
+						</Text>
+						<Text style={styles.accountBalance}>
+							{renderFromWei(balance)} {getTicker(ticker)}
+						</Text>
+					</View>
+					{imported && <View style={styles.importedView}>{imported}</View>}
+					<View style={styles.selectedWrapper}>{selected}</View>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+}

app/components/UI/AccountList/__snapshots__/index.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accounts should render correctly 1`] = `
-<AccountList
+<Connect(AccountList)
   accounts={
     Object {
       "0xe7E125654064EEa56229f273dA586F10DF96B0a1": Object {