diff --git a/js/src/views/Accounts/List/list.js b/js/src/views/Accounts/List/list.js
index c2e961bb8..4d54b640f 100644
--- a/js/src/views/Accounts/List/list.js
+++ b/js/src/views/Accounts/List/list.js
@@ -24,6 +24,7 @@ import styles from './list.css';
export default class List extends Component {
static propTypes = {
accounts: PropTypes.object,
+ walletsOwners: PropTypes.object,
balances: PropTypes.object,
link: PropTypes.string,
search: PropTypes.array,
@@ -42,7 +43,7 @@ export default class List extends Component {
}
renderAccounts () {
- const { accounts, balances, link, empty, handleAddSearchToken } = this.props;
+ const { accounts, balances, link, empty, handleAddSearchToken, walletsOwners } = this.props;
if (empty) {
return (
@@ -60,6 +61,8 @@ export default class List extends Component {
const account = accounts[address] || {};
const balance = balances[address] || {};
+ const owners = walletsOwners && walletsOwners[address] || null;
+
return (
);
diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js
index 842629c6f..764f24edf 100644
--- a/js/src/views/Accounts/Summary/summary.js
+++ b/js/src/views/Accounts/Summary/summary.js
@@ -17,8 +17,12 @@
import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { isEqual } from 'lodash';
+import ReactTooltip from 'react-tooltip';
import { Balance, Container, ContainerTitle, IdentityIcon, IdentityName, Tags, Input } from '~/ui';
+import { nullableProptype } from '~/util/proptypes';
+
+import styles from '../accounts.css';
export default class Summary extends Component {
static contextTypes = {
@@ -31,7 +35,8 @@ export default class Summary extends Component {
link: PropTypes.string,
name: PropTypes.string,
noLink: PropTypes.bool,
- handleAddSearchToken: PropTypes.func
+ handleAddSearchToken: PropTypes.func,
+ owners: nullableProptype(PropTypes.array)
};
static defaultProps = {
@@ -100,11 +105,41 @@ export default class Summary extends Component {
title={ this.renderLink() }
byline={ addressComponent } />
+ { this.renderOwners() }
{ this.renderBalance() }
);
}
+ renderOwners () {
+ const { owners } = this.props;
+
+ if (!owners || owners.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {
+ owners.map((owner) => (
+
+
+
+
+
+ { owner.name } (owner)
+
+
+ ))
+ }
+
+ );
+ }
+
renderLink () {
const { link, noLink, account, name } = this.props;
diff --git a/js/src/views/Accounts/accounts.css b/js/src/views/Accounts/accounts.css
index 0ed8b5256..469f33ddc 100644
--- a/js/src/views/Accounts/accounts.css
+++ b/js/src/views/Accounts/accounts.css
@@ -22,6 +22,12 @@
left: 7em;
}
+.owners {
+ margin-top: 1em;
+ display: flex;
+ margin-bottom: -0.5em;
+}
+
.toolbar {
position: relative;
}
diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js
index 203971004..a8a29945f 100644
--- a/js/src/views/Accounts/accounts.js
+++ b/js/src/views/Accounts/accounts.js
@@ -37,6 +37,7 @@ class Accounts extends Component {
accounts: PropTypes.object.isRequired,
hasAccounts: PropTypes.bool.isRequired,
wallets: PropTypes.object.isRequired,
+ walletsOwners: PropTypes.object.isRequired,
hasWallets: PropTypes.bool.isRequired,
balances: PropTypes.object
@@ -137,7 +138,7 @@ class Accounts extends Component {
return this.renderLoading(this.props.wallets);
}
- const { wallets, hasWallets, balances } = this.props;
+ const { wallets, hasWallets, balances, walletsOwners } = this.props;
const { searchValues, sortOrder } = this.state;
if (!wallets || Object.keys(wallets).length === 0) {
@@ -153,6 +154,7 @@ class Accounts extends Component {
empty={ !hasWallets }
order={ sortOrder }
handleAddSearchToken={ this.onAddSearchToken }
+ walletsOwners={ walletsOwners }
/>
);
}
@@ -285,13 +287,29 @@ class Accounts extends Component {
}
function mapStateToProps (state) {
- const { accounts, hasAccounts, wallets, hasWallets } = state.personal;
+ const { accounts, hasAccounts, wallets, hasWallets, accountsInfo } = state.personal;
const { balances } = state.balances;
+ const walletsInfo = state.wallet.wallets;
+
+ const walletsOwners = Object
+ .keys(walletsInfo)
+ .map((wallet) => ({
+ owners: walletsInfo[wallet].owners.map((owner) => ({
+ address: owner,
+ name: accountsInfo[owner] && accountsInfo[owner].name || owner
+ })),
+ address: wallet
+ }))
+ .reduce((walletsOwners, wallet) => {
+ walletsOwners[wallet.address] = wallet.owners;
+ return walletsOwners;
+ }, {});
return {
accounts,
hasAccounts,
wallets,
+ walletsOwners,
hasWallets,
balances
};