Unverified Commit 47b038a6 authored by Thibaut Sardan's avatar Thibaut Sardan Committed by GitHub
Browse files

Tbaut icon rotation (#296)

* fix(): revamp icon selection

* fix(): introduce short addresses

* fix(): load 4 with refresh

* fix(): nits

* fix(): comments

* fix(): white space
parent 1d442543
Pipeline #45351 failed with stage
in 14 seconds
......@@ -16,7 +16,6 @@
// @flow
import PropTypes from 'prop-types';
import React from 'react';
import {
FlatList,
......@@ -25,19 +24,14 @@ import {
TouchableOpacity,
View
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AccountIcon from './AccountIcon';
import Address from './Address'
import colors from '../colors';
import { brainWalletAddress, words } from '../util/native';
import AccountIcon from './AccountIcon';
export default class AccountIconChooser extends React.PureComponent<{
value: string,
onChange: () => any
}> {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func
};
export default class AccountIconChooser extends React.PureComponent {
constructor(props) {
super(props);
......@@ -45,13 +39,13 @@ export default class AccountIconChooser extends React.PureComponent<{
}
componentDidMount() {
this.refreshIcons();
this.refreshAccount();
}
refreshIcons = async () => {
refreshAccount = async () => {
try {
const icons = await Promise.all(
Array(10)
Array(4)
.join(' ')
.split(' ')
.map(async () => {
......@@ -66,93 +60,116 @@ export default class AccountIconChooser extends React.PureComponent<{
})
);
this.setState({
icons
});
this.setState({ icons });
} catch (e) {
console.error(e);
}
};
}
renderAddress = () => {
const {value} = this.props;
if (value) {
return (
<Address
address={value}
style = {styles.addressText}
/>
);
} else {
return <Text>Select an icon.</Text>
}
}
renderIcon = ({ item, index }) => {
const { value, onSelect } = this.props;
const { address, bip39, seed } = item;
const iSelected = address.toLowerCase() === value.toLowerCase();
const style = [styles.icon];
const isSelected = address.toLowerCase() === value.toLowerCase();
return (
<TouchableOpacity
key={index}
style={[styles.iconBorder, iSelected ? styles.selected : {}]}
onPress={() =>
onSelect({
address,
bip39,
seed
})
}
>
<AccountIcon style={style} seed={'0x' + address} />
</TouchableOpacity>
<TouchableOpacity
key={index}
style={[styles.iconBorder, isSelected ? styles.selected : {}]}
onPress={() => onSelect({ address, bip39, seed })}
>
<AccountIcon
style={styles.icon}
seed={'0x' + address}
/>
</TouchableOpacity>
);
}
onRefresh = () => {
const { onSelect } = this.props;
this.refreshAccount();
onSelect({ address: '', bip39: false, seed: ''});
}
render() {
const { value } = this.props;
const { icons } = this.state;
return (
<View style={styles.body}>
<FlatList
data={icons}
extraData={value}
horizontal
keyExtractor={item => item.address}
renderItem={this.renderIcon}
style={styles.icons}
/>
<Text
numberOfLines={1}
adjustsFontSizeToFit
minimumFontScale={0.01}
style={styles.addressText}
>
{value ? `0x${value}` : `Select an identicon`}
</Text>
</View>
<View style={styles.firstRow}>
<FlatList
data={icons}
extraData={value}
horizontal
keyExtractor={item => item.address}
renderItem={this.renderIcon}
style={styles.icons}
/>
<TouchableOpacity
onPress={this.onRefresh}
>
<Icon
name={'refresh'}
size={35}
style={styles.refreshIcon}
/>
</TouchableOpacity>
</View>
{this.renderAddress()}
</View>
);
}
}
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: colors.card_bg,
display: 'flex',
flexDirection:'column',
marginBottom: 20,
padding: 20,
backgroundColor: colors.card_bg
},
icons: {
backgroundColor: colors.card_bg
},
icon: {
width: 50,
height: 50,
margin: 6,
padding: 5
firstRow: {
flex: 1,
display: 'flex',
flexDirection:'row',
alignItems: 'center',
marginBottom: 10
},
iconBorder: {
borderWidth: 6,
borderWidth: 6,
borderColor: colors.card_bg
},
selected: {
borderColor: colors.bg
icon: {
width: 50,
backgroundColor: colors.card_bg,
height: 50,
padding: 5,
},
addressText: {
fontFamily: 'Roboto',
paddingTop: 20,
paddingLeft: 6
},
refreshIcon :{
color: colors.bg,
fontWeight: '700',
fontSize: 14
},
selected: {
borderColor: colors.bg,
}
});
// Copyright 2015-2019 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
// @flow
import React from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
import colors from '../colors';
export default function Address (props) {
const {address, short = false ,style = {}} = props;
let result = address;
if (short) {
result = `${address.slice(0, 6)}${address.slice(-6)}`;
}
return (
<Text numberOfLines={1} style={[style, styles.secondaryText]}>
0x{result}
</Text>
);
}
const styles = StyleSheet.create({
secondaryText: {
fontFamily: 'Roboto',
color: colors.bg_text_sec,
fontWeight: '500',
fontSize: 12
}
});
\ No newline at end of file
......@@ -59,18 +59,16 @@ class AccountNewView extends React.Component {
<Background />
<View style={styles.top}>
<Text style={styles.titleTop}>CREATE ACCOUNT</Text>
<Text style={styles.title}>CHOOSE NETWORK</Text>
<NetworkButton network={network} />
<Text style={[styles.title, { marginTop: 20 }]}>
CHOOSE AN IDENTICON
</Text>
<Text style={styles.title}>NETWORK</Text>
<NetworkButton network={network}/>
<Text style={styles.title}>ICON & ADDRESS</Text>
<AccountIconChooser
value={selected && selected.seed && selected.address}
onSelect={({ address, bip39, seed }) => {
accounts.updateNew({ address, seed, validBip39Seed: bip39 });
}}
/>
<Text style={styles.title}>ACCOUNT NAME</Text>
<Text style={styles.title}>NAME</Text>
<TextInput
onChangeText={name => accounts.updateNew({ name })}
value={selected && selected.name}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment