Commit 3989f419 authored by Marek Kotewicz's avatar Marek Kotewicz Committed by GitHub
Browse files

Merge pull request #42 from paritytech/blockies

Selecting account icon
parents 756e34b6 454bbf2c
......@@ -21,6 +21,7 @@ import { StyleSheet, AppState } from 'react-native'
import { Provider, connect } from 'react-redux'
import { Actions, Router, Scene } from 'react-native-router-flux'
import TabIcon from './TabIcon'
import IconChooser from '../containers/IconChooser'
import QrScanner from '../containers/QrScanner'
import AccountList from '../containers/AccountList'
import AccountNew from '../containers/AccountNew'
......@@ -79,7 +80,7 @@ const scenes = Actions.create(
</Scene>
<Scene key='right' title='Accounts' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
<Scene key='accountList' title='Accounts' component={AccountList}
onRight={() => Actions.accountNew()}
onRight={() => Actions.iconChooser()}
rightTitle='Add'
rightButtonTextStyle={styles.navibarTitle}
/>
......@@ -113,6 +114,11 @@ const scenes = Actions.create(
backButtonTextStyle={styles.navibarTitle}
hideBackImage
/>
<Scene key='iconChooser' title='Choose an Icon' component={IconChooser}
backTitle='Back'
backButtonTextStyle={styles.navibarTitle}
hideBackImage
/>
</Scene>
</Scene>
</Scene>
......
'use strict'
import React, { Component, PropTypes } from 'react'
import { Button, View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native'
import AppStyles from '../styles'
import AccountIcon from './AccountIcon'
import { words } from '../util/random'
import { brainWalletAddress } from '../util/native'
export default class IconChooser extends Component {
static propTypes = {
onSelect: PropTypes.func.isRequired
}
state = {
icons: []
}
componentDidMount () {
this.refreshIcons()
}
refreshIcons = () => {
const icons = Array(6).join(' ').split(' ').map(() => words())
this.setState({ icons })
}
render () {
return (
<ScrollView style={AppStyles.view}>
<View style={styles.iconsContainer}>
{
this.state.icons.map(seed => (
<Icon
key={seed}
seed={seed}
onSelect={this.props.onSelect}
/>
))
}
</View>
<Button
onPress={this.refreshIcons}
color='green'
title='More'
/>
</ScrollView>
)
}
}
class Icon extends Component {
static propTypes = {
seed: PropTypes.string.isRequired,
onSelect: PropTypes.func.isRequired
}
state = {
address: null
}
componentDidMount () {
this.refreshAddress(this.props.seed)
}
componentWillReceiveProps (newProps) {
const { seed } = this.props
if (newProps.seed === seed) {
return
}
this.refreshAddress(seed)
}
async refreshAddress (seed) {
try {
const address = await brainWalletAddress(seed)
if (this.props.seed === seed) {
this.setState({ address })
}
} catch (e) {
console.error(e)
}
}
onSelect = () => {
this.props.onSelect(this.props.seed)
}
render () {
const { seed } = this.props
const { address } = this.state
return (
<View style={styles.icon} key={seed}>
{address ? (
<TouchableOpacity onPress={this.onSelect}>
<AccountIcon style={AppStyles.icon} seed={'0x' + address} />
</TouchableOpacity>
) : null}
</View>
)
}
}
const styles = StyleSheet.create({
iconsContainer: {
justifyContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
marginBottom: 20
},
icon: {
marginLeft: 15,
marginRight: 15,
marginTop: 10,
width: 100,
height: 100
}
})
......@@ -23,7 +23,7 @@ import { selectAccount } from '../actions/accounts'
const mapDispatchToProps = (dispatch, ownProps) => ({
onNewAccount: () => {
Actions.accountNew()
Actions.iconChooser()
},
onAccountSelected: (account) => {
dispatch(selectAccount(account))
......
......@@ -22,7 +22,6 @@ import { connect } from 'react-redux'
import { Actions } from 'react-native-router-flux'
import debounce from 'debounce'
import AccountSeed from '../components/AccountSeed'
import { words } from '../util/random'
import { brainWalletAddress } from '../util/native'
import { selectAccount } from '../actions/accounts'
import AccountIcon from '../components/AccountIcon'
......@@ -45,14 +44,17 @@ export class AccountNew extends Component {
constructor (props) {
super(props)
const seed = words()
this.state = {
seed: seed,
seed: this.props.seed,
address: '',
name: ''
}
this.updateAddress(this, this.props.seed)
}
componentWillReceiveProps (newProps) {
const { seed } = newProps
this.updateAddress(this, seed)
}
......
'use strict'
import { connect } from 'react-redux'
import { Actions } from 'react-native-router-flux'
import IconChooser from '../components/IconChooser'
const IconChooserContainer = connect(
undefined,
(dispatch, ownProps) => ({
onSelect: (seed) => {
Actions.accountNew({ seed })
}
})
)(IconChooser)
export default IconChooserContainer
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