Merge d40e636 into 66bd4e1

package.json

@@ -145,6 +145,7 @@
     "uniqid": "^4.1.1",
     "uport-connect": "^0.6.0",
     "web3": "^0.20.1",
+    "web3-eth-accounts": "^1.0.0-beta.34",
     "web3-provider-engine": "^14.0.3",
     "webstomp-client": "^1.2.0"
   },

packages/login-ui/components/AccountSelector/AccountSelector.js

@@ -3,86 +3,109 @@
  * Licensed under the AGPL Version 3 license.
  */
 
-import networkService from '@chronobank/login/network/NetworkService'
-import { addError } from '@chronobank/login/redux/network/actions'
-import { CircularProgress, MenuItem, SelectField } from 'material-ui'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import { MuiThemeProvider } from 'material-ui'
 import { connect } from 'react-redux'
-import { Translate } from 'react-redux-i18n'
-import styles from '../../components/stylesLoginPage'
+import React, { PureComponent } from 'react'
+import { Link } from 'react-router'
+import { UserRow, Button } from 'components'
+import { navigateToSelectImportMethod, onWalletSelect } from '@chronobank/login/redux/network/actions'
+import {
+  WalletEntryModel,
+} from 'models/persistAccount'
+
+import arrow from 'assets/img/icons/prev-white.svg'
 import './AccountSelector.scss'
-import { Button } from '../../settings'
 
-const mapStateToProps = (state) => ({
-  accounts: state.get('network').accounts,
-  selectedAccount: state.get('network').selectedAccount,
-  isLoading: state.get('network').isLoading,
-})
+function mapDispatchToProps (dispatch) {
+  return {
+    navigateToSelectImportMethod: () => dispatch(navigateToSelectImportMethod()),
+    onWalletSelect: (wallet) => dispatch(onWalletSelect(wallet)),
+  }
+}
 
-const mapDispatchToProps = (dispatch) => ({
-  loadAccounts: () => networkService.loadAccounts(),
-  selectAccount: (value) => networkService.selectAccount(value),
-  addError: (error) => dispatch(addError(error)),
-})
+function mapStateToProps (state) {
+  return {
+    walletsList: state.get('persistAccount').walletsList.map(
+      (wallet) => new WalletEntryModel({...wallet})
+    ),
+  }
+}
 
 @connect(mapStateToProps, mapDispatchToProps)
-class AccountSelector extends PureComponent {
+export default class SelectWalletPage extends PureComponent {
   static propTypes = {
-    onSelectAccount: PropTypes.func,
-    loadAccounts: PropTypes.func,
-    selectAccount: PropTypes.func,
-    addError: PropTypes.func,
-    accounts: PropTypes.array,
-    selectedAccount: PropTypes.string,
-    isLoading: PropTypes.bool,
+    onWalletSelect: PropTypes.func,
+    walletsList: PropTypes.arrayOf(
+      PropTypes.instanceOf(WalletEntryModel)
+    ),
+    navigateToSelectImportMethod: PropTypes.func,
   }
 
-  componentWillMount () {
-    this.props.loadAccounts().then(() => {
-    }).catch((e) => {
-      this.props.selectAccount(null)
-      this.props.addError(e.message)
-    })
+  static defaultProps = {
+    onWalletSelect: () => {},
+    walletsList: [],
   }
 
-  handleSelect = () => {
-    this.props.onSelectAccount(this.props.selectedAccount)
-  }
+  renderWalletsList (){
+    const { onWalletSelect, walletsList } = this.props
+
+    if (!walletsList || !walletsList.length){
+      return (
+        <div styleName='empty-list'>
+          Sorry, there are no accounts to display
+        </div>
+      )
+    }
 
-  handleChange = (event, index, value) => {
-    this.props.selectAccount(value)
+    return (
+      <div styleName='wallets-list'>
+        {
+          walletsList ? walletsList.map((w, i) => (
+            <UserRow
+              key={i}
+              title={w.name}
+              actionIcon={arrow}
+              reverseIcon={true}
+              onClick={() => onWalletSelect(w)}
+            />
+          )) : null
+        }
+      </div>
+    )
   }
 
   render () {
-    const { accounts, selectedAccount, isLoading } = this.props
     return (
-      <div>
-        <SelectField
-          floatingLabelText={<Translate value='AccountSelector.address' />}
-          value={selectedAccount}
-          onChange={this.handleChange}
-          fullWidth
-          {...styles.selectField}
-        >
-          {accounts && accounts.map((a) => <MenuItem key={a} value={a} primaryText={a} />)}
-        </SelectField>
-        <div styleName='actions'>
-          <div styleName='action'>
-            <Button
-              label={isLoading ? <CircularProgress
-                style={{ verticalAlign: 'middle', marginTop: -2 }}
-                size={24}
-                thickness={1.5}
-              /> : <Translate value='AccountSelector.selectAddress' />}
-              onClick={this.handleSelect}
-              disabled={!selectedAccount || isLoading}
-            />
+      <MuiThemeProvider>
+        <div styleName='wrapper'>
+
+          <div styleName='page-title'>My Accounts</div>
+
+          <div styleName='description'>
+            Browse account stored on your device.
+            <br />
+            If you have created an account before you may use Add an Existing Account option below.
           </div>
+
+          <div styleName='content'>
+            { this.renderWalletsList() }
+
+            <div styleName='actions'>
+              <Button
+                styleName='button'
+                buttonType='login'
+                onClick={this.props.navigateToSelectImportMethod}
+              >
+                Add an existing account
+              </Button>
+              or <br />
+              <Link to='/login/create-account' href styleName='link'>Create New Account</Link>
+            </div>
+          </div>
+
         </div>
-      </div>
+      </MuiThemeProvider>
     )
   }
 }
-
-export default AccountSelector

packages/login-ui/components/AccountSelector/AccountSelector.scss

@@ -6,11 +6,88 @@
 @import "~styles/partials/variables";
 @import "~styles/partials/mixins";
 
+.wrapper {
+  margin:0 auto;
+
+  @include xs-only {
+    padding: 0 20px;
+  }
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 380px;
+}
+
+.page-title {
+  color: $color-white;
+  font-weight: 700;
+  font-size: 30px;
+  line-height: 42px;
+  margin-bottom: 40px;
+  text-align: center;
+}
+
+.wallets-list {
+  border-top: 1px solid $color-purpule;
+  margin-bottom: 45px;
+  color: #fff;
+}
+
+.empty-list {
+  border-top: 1px solid $color-purpule;
+  border-bottom: 1px solid $color-purpule;
+  padding: 18px 0;
+  margin-bottom: 30px;
+  text-align: center;
+  color: #fff;
+  width: 380px;
+
+  @include xs-only {
+    width: 100%;
+  }
+}
+
 .actions {
-  margin-top: 40px;
-  display: flex;
-  justify-content: flex-end;
+  text-align: center;
+  margin-bottom: 45px;
+  line-height: 30px;
+  color: #fff;
+}
+
+.link {
+  color: $border-color;
+  margin:  0 auto 45px;
+  text-decoration: none;
+  font: 700 16px $font-proxima;
+
+  &:hover {
+    color: #FFB54E;
+  }
+
+  @include md-only {
+    margin: 0 0 10px;
+  }
 }
 
-.action {
-}
+.button {
+  text-align: center;
+  margin-bottom: 22px;
+
+  button {
+    padding: 0 30px;
+  }
+}
+
+.actionIcon {
+  transform: matrix(-1,0,0,-1,0,0);
+}
+
+.description {
+  font-weight: 400;
+  color: $additionalData-color-1;
+  font-size: 16px;
+  line-height: 22px;
+  margin-bottom: 40px;
+  text-align: center;
+}