Merge pull request #120 from FredrikOseberg/feature/switch-accounts

Feature/switch accounts list

src/app/components/AccountInfo/AccountInfoAmounts/index.js

@@ -8,16 +8,18 @@ import tintSVG from '../../../../img/tint.svg'
 
 import style from './AccountInfoAmounts.css'
 
-const AccountInfoAmounts = ({ neo, getBalance, gas }) => {
+const AccountInfoAmounts = ({ neo, getBalance, gas, showRefresh = true, classNames }) => {
   return (
-    <div className={ style.accountInfoAmounts }>
+    <div className={ style.accountInfoAmounts + ' ' + classNames }>
       <div className={ style.accountInfoNeoAmount }>
         <img src={ neonPNG } alt='Neo' className={ style.accountInfoNeoAmountImg } />
         <p className={ style.accountInfoAmountParagraph }>{neo} NEO</p>
       </div>
-      <button className={ style.accountInfoRefreshButton } onClick={ getBalance }>
-        <img src={ syncSolidSVG } alt='refresh balance' className={ style.accountInfoRefreshButtonImage } />
-      </button>
+      {showRefresh && (
+        <button className={ style.accountInfoRefreshButton } onClick={ getBalance }>
+          <img src={ syncSolidSVG } alt='refresh balance' className={ style.accountInfoRefreshButtonImage } />
+        </button>
+      )}
       <div className={ style.accountInfoGasAmount }>
         <img src={ tintSVG } alt='drop' className={ style.accountInfoGasAmountImage } />
         <p className={ style.accountInfoAmountParagraph }>{gas > 0 ? gas : 0} GAS</p>
@@ -29,7 +31,9 @@ const AccountInfoAmounts = ({ neo, getBalance, gas }) => {
 AccountInfoAmounts.propTypes = {
   neo: PropTypes.number.isRequired,
   gas: PropTypes.number.isRequired,
-  getBalance: PropTypes.func.isRequired,
+  getBalance: PropTypes.func,
+  showRefresh: PropTypes.bool,
+  classNames: PropTypes.string,
 }
 
 export default AccountInfoAmounts

src/app/components/SwitchAccountCard/SwitchAccountCard.css

@@ -0,0 +1,11 @@
+.switchAccountCard {
+    background-color: #fff;
+    margin: 20px 0;
+    padding: 20px 0;
+    box-shadow: 2px 2px 2px rgba(201, 201, 201, 1)
+}
+
+.switchAccountAmounts {
+    margin-top:20px;
+}
+

src/app/components/SwitchAccountCard/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import AccountInfoHeader from '../../components/AccountInfo/AccountInfoHeader'
+import AccountInfoAmounts from '../../components/AccountInfo/AccountInfoAmounts'
+
+import style from './SwitchAccountCard.css'
+
+const SwitchAccountCard = ({ address, neo, gas, label, classNames }) => {
+  return (
+    <section className={ style.switchAccountCard + ' ' + classNames }>
+      <AccountInfoHeader address={ address } label={ label } showOptions={ false } />
+      <AccountInfoAmounts neo={ neo } gas={ gas } showRefresh={ false } classNames={ style.switchAccountAmounts } />
+    </section>
+  )
+}
+
+SwitchAccountCard.propTypes = {
+  address: PropTypes.string,
+  neo: PropTypes.number,
+  gas: PropTypes.number,
+  label: PropTypes.string,
+  classNames: PropTypes.string,
+}
+
+export default SwitchAccountCard

src/app/containers/App/App.js

@@ -22,6 +22,7 @@ import Settings from '../../components/Settings'
 import AddCustomNetwork from '../../containers/AddCustomNetwork'
 import CustomNetworkList from '../../containers/CustomNetworkList'
 import EditCustomNetwork from '../../containers/EditCustomNetwork'
+import SwitchAccount from '../../containers/SwitchAccount'
 
 import style from './App.css'
 
@@ -52,6 +53,7 @@ export default class App extends Component {
             <Route path='/addCustomNetwork' component={ AddCustomNetwork } />
             <Route path='/editCustomNetwork/:id' component={ EditCustomNetwork } />
             <Route path='/manageNetworks' component={ CustomNetworkList } />
+            <Route path='/switchAccounts' component={ SwitchAccount } />
             <Route path='/' component={ StartPage } />
           </ConnectedSwitch>
         </ContentWrapper>

src/app/containers/SwitchAccount/SwitchAccount.css

@@ -0,0 +1,12 @@
+.switchAccountContainer {
+    padding: 20px 0;
+}
+
+.switchAccountHeading {
+    text-align: center;
+    margin-top: 0;
+}
+
+.accountSelected {
+    border-top: 2px solid green;
+} 

src/app/containers/SwitchAccount/SwitchAccount.js

@@ -0,0 +1,93 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { getBalance } from '../../utils/helpers'
+
+import SwitchAccountCard from '../../components/SwitchAccountCard'
+
+import style from './SwitchAccount.css'
+
+class SwitchAccount extends Component {
+  state = {
+    accounts: [],
+  }
+
+  componentDidMount() {
+    this.setAccountState()
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { selectedNetworkId } = this.props
+    if (selectedNetworkId !== nextProps.selectedNetworkId) {
+      this.setAccountState()
+    }
+  }
+
+  setAccountState = () => {
+    const { accounts, networks, selectedNetworkId } = this.props
+    const formattedAccounts = []
+
+    const accountsArray = Object.keys(accounts)
+    accountsArray.map((account, index) => {
+      getBalance(networks, selectedNetworkId, accounts[account].address).then(response => {
+        formattedAccounts.push({
+          address: accounts[account].address,
+          encryptedKey: accounts[account].key,
+          label: accounts[account].label,
+          neo: response.neo,
+          gas: response.gas,
+        })
+        if (index === accountsArray.length - 1) {
+          this.setState({ accounts: formattedAccounts })
+        }
+      })
+    })
+  }
+
+  generateAccountCards = () => {
+    const { account } = this.props
+    const { accounts } = this.state
+    let selectedAccountIndex
+
+    const accountCards = accounts.map(({ label, neo, gas, address }, index) => {
+      let selectedStyles = null
+      if (account.address === address) {
+        selectedStyles = style.accountSelected
+        selectedAccountIndex = index
+      }
+      return (
+        <SwitchAccountCard
+          label={ label }
+          neo={ neo }
+          gas={ gas }
+          address={ address }
+          classNames={ selectedStyles }
+          key={ address }
+        />
+      )
+    })
+
+    const selectedAccount = accountCards.splice(selectedAccountIndex, 1)
+    accountCards.unshift(selectedAccount)
+
+    return accountCards
+  }
+
+  render() {
+    return (
+      <section className={ style.switchAccountContainer }>
+        <h1 className={ style.switchAccountHeading }>Switch Account</h1>
+        {this.generateAccountCards()}
+      </section>
+    )
+  }
+}
+
+SwitchAccount.propTypes = {
+  accounts: PropTypes.object,
+  account: PropTypes.object,
+  networks: PropTypes.object,
+  selectedNetworkId: PropTypes.object,
+}
+
+export default SwitchAccount

src/app/containers/SwitchAccount/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import SwitchAccount from './SwitchAccount'
+
+const mapStateToProps = state => ({
+  accounts: state.wallet.accounts,
+  account: state.account,
+  networks: state.config.networks,
+  selectedNetworkId: state.config.selectedNetworkId,
+})
+
+export default connect(mapStateToProps)(SwitchAccount)

src/data/mainNavigationData.js

@@ -31,7 +31,7 @@ export default [
     title: 'Switch Accounts',
     img: swapSVG,
     alt: 'Arrows in circles',
-    path: '/config',
+    path: '/switchAccounts',
     id: 4,
   },
   {