AccountDetails and account name

src/actions/accounts.js

-import { ADD_ACCOUNT } from '../constants/AccountActions'
+import { ADD_ACCOUNT, SELECT_ACCOUNT } from '../constants/AccountActions'
 
 export function addAccount(account) {
   return {
     type: ADD_ACCOUNT,
-    address: account.address,
+    account,
+  }
+}
+
+export function selectAccount(account) {
+  return {
+    type: SELECT_ACCOUNT,
+    account,
   }
 }

src/components/AccountDetails.js

+'use strict'
+
+import React, { Component, PropTypes } from 'react'
+import { StyleSheet, View, Text, Button } from 'react-native'
+
+export default class AccountDetails extends Component {
+  static propTypes = {
+    account: PropTypes.shape({
+      address: PropTypes.string.isRequired,
+    }).isRequired
+  }
+
+  render() {
+    return (
+      <View style={styles.view}>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginTop: 60,
+    marginBottom: 50,
+    padding: 20,
+  }
+})

src/components/AccountsList.js

 import React, { Component, PropTypes } from 'react'
-import { Text, StyleSheet, ListView } from 'react-native'
+import { Text, StyleSheet, ListView, RecyclerViewBackedScrollView } from 'react-native'
 import AccountsListRow from './AccountsListRow'
 
 export default class AccountsList extends Component {
   static propTypes = {
-    accounts: PropTypes.arrayOf(PropTypes.string).isRequired,
+    accounts: PropTypes.arrayOf(PropTypes.shape({
+      address: PropTypes.string.isRequired,
+    })).isRequired,
+    onAccountSelected: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -26,8 +29,16 @@ export default class AccountsList extends Component {
       <ListView
         style={styles.view}
         dataSource={this.state.dataSource}
-        renderRow={(rowData) => <AccountsListRow text={rowData}/>}
+        renderRow={(rowData, sectionID: number, rowID: number, highlightRow) => {
+          return (
+            <AccountsListRow text={rowData.name ? rowData.name : '0x' + rowData.address} onPress={() => {
+              highlightRow(sectionID, rowID)
+              this.props.onAccountSelected(this.props.accounts[rowID])
+            }}/>
+          )
+        }}
         enableEmptySections={true}
+        renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
       />
     )
   }

src/components/AccountsListRow.js

@@ -3,15 +3,16 @@ import { TouchableHighlight, StyleSheet, View, Text } from 'react-native'
 
 export default class AccountsListRow extends Component {
   static propTypes = {
-    text: PropTypes.string.isRequired
+    text: PropTypes.string.isRequired,
+    onPress: PropTypes.func.isRequired,
   }
 
   render() {
     return (
-      <TouchableHighlight style={styles.row}>
+      <TouchableHighlight style={styles.row} onPress={this.props.onPress} underlayColor='#0004'>
         <View style={{flexDirection: 'row'}}>
           <View style={styles.square}/>
-          <Text style={styles.text} fontSize={16} ellipsizeMode="middle" numberOfLines={1}>0x{this.props.text}</Text>
+          <Text style={styles.text} fontSize={16} ellipsizeMode="middle" numberOfLines={1}>{this.props.text}</Text>
         </View>
       </TouchableHighlight>
     )

src/components/App.js

@@ -10,6 +10,7 @@ import Signer from '../containers/Signer'
 import Accounts from '../containers/Accounts'
 import NewAccount from '../containers/NewAccount'
 import Send from '../components/Send'
+import Account from '../containers/Account'
 
 const ConnectedRouter = connect()(Router)
 const store = createStore(reducers)
@@ -38,6 +39,7 @@ const scenes = Actions.create(
         <Scene key='accountsList' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}
           rightButtonTextStyle={styles.navibarTitle}/>
         <Scene key='add' component={NewAccount} title='Add Account'/>
+        <Scene key='details' component={Account} title='Account Details'/>
       </Scene>
     </Scene>
   </Scene>

src/components/NewAccountInput.js

@@ -21,7 +21,6 @@ export default class NewAccountInput extends Component {
         placeholder='the brain wallet seed'
         editable={true}
         multiline={true}
-        autoFocus={true}
         returnKeyType='default'
         numberOfLines={6}
         fontSize={16}

src/constants/AccountActions.js

 export const ADD_ACCOUNT = 'ACCOUNT_ACTION_ADD_ACCOUNT'
+export const SELECT_ACCOUNT = 'ACCOUNT_ACTION_SELECT_ACCOUNT'

src/containers/Account.js

+import React from 'react'
+import { connect } from 'react-redux'
+import AccountDetails from '../components/AccountDetails'
+
+const Account = connect(state => ({
+  account: state.accounts.selected.address,
+}))(AccountDetails)
+
+export default Account

src/containers/Accounts.js

 import React from 'react'
 import { connect } from 'react-redux'
+import { Actions } from 'react-native-router-flux'
 import AccountsList from '../components/AccountsList'
+import { selectAccount } from '../actions/accounts'
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onAccountSelected: (address) => {
+    dispatch(selectAccount({address}))
+    Actions.details()
+  }
+})
 
 const Accounts = connect(state => ({
-  accounts: state.accounts.map(account => account.address)
-}))(AccountsList)
+  accounts: state.accounts.all
+}), mapDispatchToProps)(AccountsList)
 
 export default Accounts

src/containers/NewAccount.js

 import React, { Component } from 'react'
-import { View, Text, Button, StyleSheet } from 'react-native'
+import { View, Text, TextInput, Button, StyleSheet } from 'react-native'
 import { connect } from 'react-redux'
 import { Actions } from 'react-native-router-flux'
 import debounce from 'debounce'
@@ -10,10 +10,11 @@ import { addAccount } from '../actions/accounts'
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    addAccount: (keypair) => {
-      const address = toAddress(keypair)
+    addAccount: (account) => {
+      const address = toAddress(account.keypair)
       dispatch(addAccount({
-        address: address
+        address: address,
+        name: account.name,
       }))
       Actions.pop()
     }
@@ -29,6 +30,7 @@ export class NewAccount extends Component {
     this.state = {
       seed: seed,
       keypair: keypairFromPhrase(seed),
+      name: '',
     }
   }
 
@@ -36,13 +38,29 @@ export class NewAccount extends Component {
     var self = this;
     return (
       <View style={styles.view}>
+        <Text style={styles.hint}>name</Text>
+        <TextInput
+          placeholder='My Account'
+          value={this.state.name}
+          style={styles.input}
+          editable={true}
+          multiline={false}
+          returnKeyType='next'
+          numberOfLines={1}
+          fontSize={16}
+          autoFocus={true}
+          onChangeText={(text) => {this.setState({name: text})}}
+        />
         <Text style={styles.hint}>brain wallet seed</Text>
         <NewAccountInput seed={this.state.seed} onChangeText={
           debounce((text) => self.setState({keypair: keypairFromPhrase(text)}), 100)
         }/>
         <Text style={styles.hint} adjustsFontSizeToFit={true}>0x{toAddress(this.state.keypair)}</Text>
         <Button
-          onPress={() => this.props.addAccount(this.state.keypair)}
+          onPress={() => this.props.addAccount({
+            keypair: this.state.keypair,
+            name: this.state.name
+          })}
           title="Add Account"
           color="green"
           accessibilityLabel="Press to add new account"
@@ -61,6 +79,10 @@ const styles = StyleSheet.create({
   },
   hint: {
     marginBottom: 20,
+  },
+  input: {
+    height: 20,
+    marginBottom: 20,
   }
 })
 

src/reducers/accounts.js

-import { ADD_ACCOUNT } from '../constants/AccountActions'
+import { ADD_ACCOUNT, SELECT_ACCOUNT } from '../constants/AccountActions'
 
-const initialAccounts = [{address: 'dupa'}, {address: 'dupa2'}]
+const initialAccounts = {
+  all: [{
+    address: 'mock',
+    name: 'dupa',
+  }, {
+    address: 'mock',
+    name: 'Katar',
+  }],
+  selected: {},
+}
 
 export default function accounts(state = initialAccounts, action) {
   switch (action.type) {
       case ADD_ACCOUNT:
-        return [
-          ...state,
-          {
-            address: action.address
-          }
-        ]
+        return Object.assign({}, state, {
+          all: [
+            ...state.all,
+            action.account,
+          ]
+        })
+
+    case SELECT_ACCOUNT:
+      return Object.assign({}, state, {
+        selected: action.account,
+      })
 
       default:
         return state