Display Wallet Owners in Accounts list (#3741)

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 (
         <div
           className={ styles.item }
@@ -68,6 +71,7 @@ export default class List extends Component {
             link={ link }
             account={ account }
             balance={ balance }
+            owners={ owners }
             handleAddSearchToken={ handleAddSearchToken } />
         </div>
       );

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() }
       </Container>
     );
   }
 
+  renderOwners () {
+    const { owners } = this.props;
+
+    if (!owners || owners.length === 0) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.owners }>
+        {
+          owners.map((owner) => (
+            <div key={ owner.address }>
+              <div
+                data-tip
+                data-for={ `owner_${owner.address}` }
+                data-effect='solid'
+              >
+                <IdentityIcon address={ owner.address } button />
+              </div>
+              <ReactTooltip id={ `owner_${owner.address}` }>
+                <strong>{ owner.name } </strong><small> (owner)</small>
+              </ReactTooltip>
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+
   renderLink () {
     const { link, noLink, account, name } = this.props;
 

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;
 }

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
   };