WIP

src/actions/savedAccounts.js

@@ -24,6 +24,17 @@ export const accountRemoved = (publicKey) => {
   };
 };
 
+/**
+ * An action to dispatch accountSwitched
+ */
+export const accountSwitched = (publicKey) => {
+  removeSavedAccount(publicKey);
+  return {
+    data: publicKey,
+    type: actionTypes.accountSwitched,
+  };
+};
+
 /**
  * The action to initiate savedAccounts store with the retrieved accounts
  *

src/components/dialog/dialogs.js

@@ -46,7 +46,7 @@ export default () => ({
     component: Register,
   },
   'save-account': {
-    title: i18next.t('Remember this account'),
+    title: i18next.t('Saved accounts'),
     component: SaveAccount,
   },
   settings: {

src/components/saveAccount/index.js

@@ -1,16 +1,19 @@
 import { connect } from 'react-redux';
 import { translate } from 'react-i18next';
-import { accountSaved } from '../../actions/savedAccounts';
+import { accountSaved, accountRemoved, accountSwitched } from '../../actions/savedAccounts';
 import SaveAccount from './saveAccount';
 
 const mapStateToProps = state => ({
   address: state.peers.data.options.address,
   publicKey: state.account.publicKey,
-  network: state.peers.data.options.name,
+  network: state.peers.data.options,
+  savedAccounts: state.savedAccounts,
 });
 
 const mapDispatchToProps = dispatch => ({
   accountSaved: data => dispatch(accountSaved(data)),
+  accountRemoved: data => dispatch(accountRemoved(data)),
+  accountSwitched: data => dispatch(accountSwitched(data)),
 });
 
 export default connect(

src/components/saveAccount/saveAccount.js

@@ -1,41 +1,73 @@
+import { Table, TableHead, TableRow, TableCell } from 'react-toolbox/lib/table';
 import React from 'react';
-import InfoParagraph from '../infoParagraph';
+import Button from 'react-toolbox/lib/button';
 import ActionBar from '../actionBar';
+import InfoParagraph from '../infoParagraph';
 import networks from '../../constants/networks';
+import getNetwork from '../../utils/getNetwork';
+import { extractAddress } from '../../utils/api/account';
 
 const SaveAccount = ({
   network,
   address,
   publicKey,
   closeDialog,
   accountSaved,
+  accountRemoved,
+  accountSwitched,
+  savedAccounts,
   t,
 }) => {
   const save = () => {
-    // eslint-disable-next-line arrow-body-style
-    const index = Object.keys(networks).map((item, i) => {
-      return (networks[item].name === network) ? i : null;
-    }).find(item => item !== null);
+    console.log('NET', network);
     accountSaved({
-      network: index,
+      network: network.code,
       address,
       publicKey,
     });
-    closeDialog();
   };
+  console.log('NET', network);
 
   return (
     <div className='save-account'>
-      <InfoParagraph>
-        {t('This will save public key of your account on this device, so next time it will launch without the need to log in. However, you will be prompted to enter the passphrase once you want to do any transaction.')}
-      </InfoParagraph>
+      { savedAccounts.length === 0 ?
+        <InfoParagraph>
+          {t('This will save public key of your account on this device, so next time it will launch without the need to log in. However, you will be prompted to enter the passphrase once you want to do any transaction.')}
+        </InfoParagraph> :
+        <div style={{ margin: '-24px -24px 24px -24px' }} >
+          <Table selectable={false}>
+            <TableHead>
+              <TableCell>{t('Address')}</TableCell>
+              <TableCell>{t('Network')}</TableCell>
+            </TableHead>
+            {savedAccounts.map(account => (
+              <TableRow key={account.publicKey}
+                style={{ 'font-weight': (account.publicKey === publicKey ? 'bold' : 'normal') }}>
+                <TableCell>
+                  {extractAddress(account.publicKey)}
+                </TableCell>
+                <TableCell>
+                  {account.network === networks.customNode.code ?
+                    account.address :
+                    t((getNetwork(account.network) || {}).name)}
+                </TableCell>
+                <TableCell style={{ 'text-align': 'right' }}>
+                  <Button raised={true} disabled={account.publicKey === publicKey} icon='exit_to_app' label={t('Switch')} onClick={accountSwitched.bind(this, account)} /> &nbsp;
+                  <Button raised={true} icon='clear' label={t('Forget')} onClick={accountRemoved.bind(this, account.publicKey)} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
+        </div>
+      }
       <ActionBar
         secondaryButton={{
           onClick: closeDialog,
         }}
         primaryButton={{
-          label: t('Save account'),
+          label: t('Add active account'),
           className: 'save-account-button',
+          disabled: savedAccounts.filter(account => account.publicKey === publicKey).length !== 0,
           onClick: save.bind(this),
         }} />
     </div>

src/components/saveAccountButton/saveAccountButton.js

@@ -2,17 +2,12 @@ import { MenuItem } from 'react-toolbox/lib/menu';
 import React from 'react';
 import RelativeLink from '../relativeLink';
 
-const SaveAccountButton = ({ account, savedAccounts, accountRemoved, t, theme }) =>
-  (savedAccounts.length > 0 ?
-    <MenuItem caption={t('Forget this account')}
-      className='forget-account'
-      onClick={accountRemoved.bind(null, account.publicKey)}
-    /> :
-    <MenuItem theme={theme}>
-      <RelativeLink className={`${theme.menuLink} save-account`} to='save-account'>
-        {t('Save account')}
-      </RelativeLink>
-    </MenuItem>
-  );
+const SaveAccountButton = ({ savedAccounts, t, theme }) => (
+  <MenuItem theme={theme}>
+    <RelativeLink className={`${theme.menuLink} save-account`} to='save-account'>
+      {savedAccounts.length > 0 ? t('Manage saved accounts') : t('Save account')}
+    </RelativeLink>
+  </MenuItem>
+);
 
 export default SaveAccountButton;

src/constants/actions.js

@@ -32,6 +32,7 @@ const actionTypes = {
   accountsRetrieved: 'ACCOUNTS_RETRIEVED',
   accountSaved: 'ACCOUNT_SAVED',
   accountRemoved: 'ACCOUNT_REMOVED',
+  accountSwitched: 'ACCOUNT_SWITCHED',
 };
 
 export default actionTypes;

src/store/middlewares/savedAccounts.js

@@ -1,6 +1,8 @@
 import i18next from 'i18next';
 import actionTypes from '../../constants/actions';
 import { successToastDisplayed } from '../../actions/toaster';
+import { accountLoggedOut } from '../../actions/account';
+import { activePeerSet } from '../../actions/peers';
 
 const savedAccountsMiddleware = store => next => (action) => {
   next(action);
@@ -11,6 +13,13 @@ const savedAccountsMiddleware = store => next => (action) => {
     case actionTypes.accountRemoved:
       store.dispatch(successToastDisplayed({ label: i18next.t('Account was successfully forgotten.') }));
       break;
+    case actionTypes.accountSwitched:
+      store.dispatch(accountLoggedOut());
+      store.dispatch(activePeerSet({
+        publicKey: action.data.publicKey,
+        network: action.data.network,
+      }));
+      break;
     default:
       break;
   }

src/utils/saveAccount.js

@@ -1,11 +1,11 @@
 export const getSavedAccount = () => {
   const savedAccounts = localStorage.getItem('accounts');
-  let account;
+  let accounts = [];
   if (savedAccounts) {
-    account = JSON.parse(savedAccounts);
+    accounts = JSON.parse(savedAccounts);
   }
 
-  return account;
+  return accounts;
 };
 
 export const setSavedAccount = ({ publicKey, network, address }) => {