Skip to content

Commit

Permalink
Wallet UI (#14)
Browse files Browse the repository at this point in the history
* navbar with icons

* fix statusbar color

* decent progress

* clean up

* added gradient bg

* added roboto font

* clean up

* fixed icons and navigation flow

* updated UI. working on both platforms

* fix warning

* added tests

* added assets

* fixed tests

* singleton works

* engine singleton and redux

* fix tests

* clean up eslintigore

* fix eslint ignore

* add shim.js back to .gitignore

* fix AccountOverview

* Accounts => AccountList

* added comments for doc purposes

* more clean up

* more cleaning

* more comments

* let xcode cleanup stuff

* fix tests
  • Loading branch information
Bruno Barbieri committed Aug 8, 2018
1 parent 3f52dcd commit 15aa2f0
Show file tree
Hide file tree
Showing 116 changed files with 3,787 additions and 320 deletions.
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ ios
node_modules
package-lock.json
package.json
app/util/blockies.js
1 change: 1 addition & 0 deletions android/app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Binary file added android/app/src/main/assets/fonts/Metamask.ttf
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
2 changes: 2 additions & 0 deletions android/app/src/main/java/com/metamask/MainApplication.java
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -29,6 +30,7 @@ protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNOSModule(),
new LinearGradientPackage(),
new RandomBytesPackage(),
new RNFSPackage(),
new VectorIconsPackage(),
Expand Down
2 changes: 2 additions & 0 deletions android/settings.gradle
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
154 changes: 154 additions & 0 deletions app/components/AccountList/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
@@ -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>
`;
102 changes: 102 additions & 0 deletions app/components/AccountList/index.js
Original file line number Diff line number Diff line change
@@ -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>
);
}
}
10 changes: 10 additions & 0 deletions app/components/AccountList/index.test.js
Original file line number Diff line number Diff line change
@@ -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();
});
});
92 changes: 92 additions & 0 deletions app/components/AccountOverview/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
@@ -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>
`;
Loading

0 comments on commit 15aa2f0

Please sign in to comment.