Wallet UI

.prettierignore

@@ -10,3 +10,4 @@ ios
 node_modules
 package-lock.json
 package.json
+app/util/blockies.js

android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 
 dependencies {
     compile project(':react-native-os')
+    compile project(':react-native-linear-gradient')
     compile project(':react-native-randombytes')
     compile project(':react-native-fs')
     compile project(':react-native-vector-icons')

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

@@ -4,6 +4,7 @@
 
 import com.facebook.react.ReactApplication;
 import com.peel.react.rnos.RNOSModule;
+import com.BV.LinearGradient.LinearGradientPackage;
 import com.bitgo.randombytes.RandomBytesPackage;
 import com.metamask.CustomWebview.CustomWebviewPackage;
 import com.rnfs.RNFSPackage;
@@ -29,6 +30,7 @@ protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
             new RNOSModule(),
+            new LinearGradientPackage(),
             new RandomBytesPackage(),
             new RNFSPackage(),
             new VectorIconsPackage(),

android/settings.gradle

@@ -1,6 +1,8 @@
 rootProject.name = 'MetaMask'
 include ':react-native-os'
 project(':react-native-os').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-os/android')
+include ':react-native-linear-gradient'
+project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
 include ':react-native-randombytes'
 project(':react-native-randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/android')
 include ':react-native-fs'

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

@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accounts should render correctly 1`] = `
+<SafeAreaView
+  style={
+    Object {
+      "backgroundColor": "#f1f2f6",
+      "flex": 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>
+`;

app/components/AccountList/index.js

@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import { TouchableOpacity, StyleSheet, Text, View, SafeAreaView } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors, fontStyles } from '../../styles/common';
+import Identicon from '../Identicon';
+
+const styles = StyleSheet.create({
+	wrapper: {
+		backgroundColor: colors.concrete,
+		flex: 1
+	},
+	title: {
+		fontSize: 25,
+		marginVertical: 30,
+		marginHorizontal: 20,
+		color: colors.fontPrimary,
+		...fontStyles.bold
+	},
+	account: {
+		flexDirection: 'row',
+		marginLeft: 20,
+		marginBottom: 20
+	},
+	accountInfo: {
+		marginLeft: 15
+	},
+	accountLabel: {
+		fontSize: 18,
+		color: colors.fontPrimary,
+		...fontStyles.normal
+	},
+	accountBalance: {
+		paddingTop: 5,
+		fontSize: 12,
+		color: colors.fontSecondary,
+		...fontStyles.normal
+	},
+	selected: {
+		width: 30,
+		marginRight: 15
+	}
+});
+
+/**
+ * View contains the list of all the available accounts
+ */
+
+export default class AccountList extends Component {
+	state = {
+		selectedAccountIndex: 0
+	};
+
+	onAccountPress = newIndex => {
+		this.setState({ selectedAccountIndex: newIndex });
+	};
+
+	renderAccounts() {
+		const accounts = [
+			{
+				label: 'Account 1',
+				address: '0xe7E125654064EEa56229f273dA586F10DF96B0a1',
+				balance: '0.017700'
+			},
+			{
+				label: 'Account 2',
+				address: '0xf4F6A83117a9D0a9cA3b9684DEDaBc69d56721D8',
+				balance: '0.4'
+			}
+		];
+
+		return accounts.map((account, i) => {
+			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
+				>
+					<View style={styles.selected}>{selected}</View>
+					<Identicon address={address} diameter={38} />
+					<View style={styles.accountInfo}>
+						<Text style={styles.accountLabel}>{label}</Text>
+						<Text style={styles.accountBalance}>{balance} ETH</Text>
+					</View>
+				</TouchableOpacity>
+			);
+		});
+	}
+
+	render() {
+		return (
+			<SafeAreaView style={styles.wrapper}>
+				<Text style={styles.title}>My Accounts</Text>
+				<View style={styles.accountsWrapper}>{this.renderAccounts()}</View>
+			</SafeAreaView>
+		);
+	}
+}

app/components/AccountList/index.test.js

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

app/components/AccountOverview/__snapshots__/index.test.js.snap

@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountOverview should render correctly 1`] = `
+<Component
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "height": 130,
+      "paddingBottom": 0,
+      "paddingHorizontal": 20,
+      "paddingTop": 20,
+    }
+  }
+>
+  <Component
+    style={
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+      }
+    }
+  >
+    <Component
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Component
+        style={
+          Object {
+            "fontFamily": "Roboto",
+            "fontSize": 20,
+            "fontWeight": "400",
+            "paddingTop": 7,
+          }
+        }
+      >
+        Account 1
+      </Component>
+      <Component
+        style={
+          Object {
+            "color": "#333333",
+            "flex": 1,
+            "fontFamily": "Roboto",
+            "fontSize": 43,
+            "fontWeight": "400",
+            "lineHeight": 43,
+            "paddingTop": 15,
+          }
+        }
+      >
+        $
+        1604.2
+      </Component>
+    </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "flex": 1,
+          "paddingTop": 5,
+        }
+      }
+    >
+      <QRCode
+        bgColor="#333333"
+        fgColor="#FFFFFF"
+        onLoad={[Function]}
+        onLoadEnd={[Function]}
+        size={60}
+        value="0xe7E125654064EEa56229f273dA586F10DF96B0a1"
+      />
+      <Component
+        style={
+          Object {
+            "flex": 1,
+            "fontFamily": "Roboto",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "marginTop": 10,
+          }
+        }
+      >
+        0xe7...B0a1
+      </Component>
+    </Component>
+  </Component>
+</Component>
+`;