Fix address and accounts links (#4491)

* Add proper links to TxRows (#4314)

* Add proper link to the Signer (#4314)

* Fix and add tests

js/src/ui/TxList/TxRow/txRow.js

@@ -16,8 +16,10 @@
 
 import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router';
 
-import { txLink, addressLink } from '~/3rdparty/etherscan/links';
+import { txLink } from '~/3rdparty/etherscan/links';
 
 import IdentityIcon from '../../IdentityIcon';
 import IdentityName from '../../IdentityName';
@@ -25,19 +27,20 @@ import MethodDecoding from '../../MethodDecoding';
 
 import styles from '../txList.css';
 
-export default class TxRow extends Component {
+class TxRow extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   };
 
   static propTypes = {
-    tx: PropTypes.object.isRequired,
+    accountAddresses: PropTypes.array.isRequired,
     address: PropTypes.string.isRequired,
     isTest: PropTypes.bool.isRequired,
+    tx: PropTypes.object.isRequired,
 
     block: PropTypes.object,
-    historic: PropTypes.bool,
-    className: PropTypes.string
+    className: PropTypes.string,
+    historic: PropTypes.bool
   };
 
   static defaultProps = {
@@ -77,22 +80,20 @@ export default class TxRow extends Component {
   }
 
   renderAddress (address) {
-    const { isTest } = this.props;
-
     let esLink = null;
 
     if (address) {
       esLink = (
-        <a
-          href={ addressLink(address, isTest) }
-          target='_blank'
+        <Link
+          activeClassName={ styles.currentLink }
           className={ styles.link }
+          to={ this.addressLink(address) }
         >
           <IdentityName
             address={ address }
             shorten
           />
-        </a>
+        </Link>
       );
     }
 
@@ -138,4 +139,30 @@ export default class TxRow extends Component {
       </td>
     );
   }
+
+  addressLink (address) {
+    const { accountAddresses } = this.props;
+    const isAccount = accountAddresses.includes(address);
+
+    if (isAccount) {
+      return `/accounts/${address}`;
+    }
+
+    return `/addresses/${address}`;
+  }
 }
+
+function mapStateToProps (initState) {
+  const { accounts } = initState.personal;
+  const accountAddresses = Object.keys(accounts);
+
+  return () => {
+    return { accountAddresses };
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  null
+)(TxRow);
+

js/src/ui/TxList/TxRow/txRow.spec.js

@@ -25,13 +25,28 @@ import TxRow from './txRow';
 
 const api = new Api({ execute: sinon.stub() });
 
+const STORE = {
+  dispatch: sinon.stub(),
+  subscribe: sinon.stub(),
+  getState: () => {
+    return {
+      personal: {
+        accounts: {
+          '0x123': {}
+        }
+      }
+    };
+  }
+};
+
 function render (props) {
   return shallow(
     <TxRow
+      store={ STORE }
       { ...props }
     />,
     { context: { api } }
-  );
+  ).find('TxRow').shallow({ context: { api } });
 }
 
 describe('ui/TxList/TxRow', () => {
@@ -48,5 +63,37 @@ describe('ui/TxList/TxRow', () => {
 
       expect(render({ address: '0x123', block, isTest: true, tx })).to.be.ok;
     });
+
+    it('renders an account link', () => {
+      const block = {
+        timestamp: new Date()
+      };
+      const tx = {
+        blockNumber: new BigNumber(123),
+        hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
+        to: '0x123',
+        value: new BigNumber(1)
+      };
+
+      const element = render({ address: '0x123', block, isTest: true, tx });
+
+      expect(element.find('Link').prop('to')).to.equal('/accounts/0x123');
+    });
+
+    it('renders an address link', () => {
+      const block = {
+        timestamp: new Date()
+      };
+      const tx = {
+        blockNumber: new BigNumber(123),
+        hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
+        to: '0x456',
+        value: new BigNumber(1)
+      };
+
+      const element = render({ address: '0x123', block, isTest: true, tx });
+
+      expect(element.find('Link').prop('to')).to.equal('/addresses/0x456');
+    });
   });
 });

js/src/ui/TxList/txList.css

@@ -65,6 +65,11 @@
 
   .link {
     vertical-align: top;
+
+    &.currentLink {
+      color: white;
+      cursor: text;
+    }
   }
 
   .right {