Go through contract links in Transaction List display (#4863)

* Go through contract links (#4822)

* Fix tests, add one for /contracts/<address>

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

@@ -35,6 +35,7 @@ class TxRow extends Component {
   static propTypes = {
     accountAddresses: PropTypes.array.isRequired,
     address: PropTypes.string.isRequired,
+    contractAddresses: PropTypes.array.isRequired,
     netVersion: PropTypes.string.isRequired,
     tx: PropTypes.object.isRequired,
 
@@ -53,7 +54,7 @@ class TxRow extends Component {
     return (
       <tr className={ className || '' }>
         { this.renderBlockNumber(tx.blockNumber) }
-        { this.renderAddress(tx.from) }
+        { this.renderAddress(tx.from, false) }
         <td className={ styles.transaction }>
           { this.renderEtherValue(tx.value) }
           <div>⇒</div>
@@ -67,7 +68,7 @@ class TxRow extends Component {
             </a>
           </div>
         </td>
-        { this.renderAddress(tx.to) }
+        { this.renderAddress(tx.to || tx.creates, !!tx.creates) }
         <td className={ styles.method }>
           <MethodDecoding
             historic={ historic }
@@ -79,10 +80,11 @@ class TxRow extends Component {
     );
   }
 
-  renderAddress (address) {
+  renderAddress (address, isDeploy = false) {
+    const isKnownContract = this.getIsKnownContract(address);
     let esLink = null;
 
-    if (address) {
+    if (address && (!isDeploy || isKnownContract)) {
       esLink = (
         <Link
           activeClassName={ styles.currentLink }
@@ -103,7 +105,7 @@ class TxRow extends Component {
           <IdentityIcon
             center
             className={ styles.icon }
-            address={ address }
+            address={ (!isDeploy || isKnownContract) ? address : '' }
           />
         </div>
         <div className={ styles.center }>
@@ -140,9 +142,22 @@ class TxRow extends Component {
     );
   }
 
+  getIsKnownContract (address) {
+    const { contractAddresses } = this.props;
+
+    return contractAddresses
+      .map((a) => a.toLowerCase())
+      .includes(address.toLowerCase());
+  }
+
   addressLink (address) {
     const { accountAddresses } = this.props;
     const isAccount = accountAddresses.includes(address);
+    const isContract = this.getIsKnownContract(address);
+
+    if (isContract) {
+      return `/contracts/${address}`;
+    }
 
     if (isAccount) {
       return `/accounts/${address}`;
@@ -153,14 +168,16 @@ class TxRow extends Component {
 }
 
 function mapStateToProps (initState) {
-  const { accounts } = initState.personal;
+  const { accounts, contracts } = initState.personal;
   const accountAddresses = Object.keys(accounts);
+  const contractAddresses = Object.keys(contracts);
 
   return (state) => {
     const { netVersion } = state.nodeStatus;
 
     return {
       accountAddresses,
+      contractAddresses,
       netVersion
     };
   };

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

@@ -35,7 +35,14 @@ const STORE = {
       },
       personal: {
         accounts: {
-          '0x123': {}
+          '0x123': {
+            address: '0x123'
+          }
+        },
+        contracts: {
+          '0x999': {
+            address: '0x999'
+          }
         }
       }
     };
@@ -60,43 +67,64 @@ describe('ui/TxList/TxRow', () => {
       };
       const tx = {
         blockNumber: new BigNumber(123),
+        from: '0x234',
         hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
+        to: '0x123',
         value: new BigNumber(1)
       };
 
       expect(render({ address: '0x123', block, netVersion: '42', tx })).to.be.ok;
     });
 
-    it('renders an account link', () => {
+    it('renders account links', () => {
       const block = {
         timestamp: new Date()
       };
       const tx = {
         blockNumber: new BigNumber(123),
+        from: '0x234',
         hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
         to: '0x123',
         value: new BigNumber(1)
       };
 
       const element = render({ address: '0x123', block, netVersion: '42', tx });
 
-      expect(element.find('Link').prop('to')).to.equal('/accounts/0x123');
+      expect(element.find('Link').get(1).props.to).to.equal('/accounts/0x123');
     });
 
-    it('renders an address link', () => {
+    it('renders address links', () => {
       const block = {
         timestamp: new Date()
       };
       const tx = {
         blockNumber: new BigNumber(123),
+        from: '0x234',
         hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
         to: '0x456',
         value: new BigNumber(1)
       };
 
       const element = render({ address: '0x123', block, netVersion: '42', tx });
 
-      expect(element.find('Link').prop('to')).to.equal('/addresses/0x456');
+      expect(element.find('Link').get(1).props.to).to.equal('/addresses/0x456');
+    });
+
+    it('renders contract links', () => {
+      const block = {
+        timestamp: new Date()
+      };
+      const tx = {
+        blockNumber: new BigNumber(123),
+        from: '0x234',
+        hash: '0x123456789abcdef0123456789abcdef0123456789abcdef',
+        to: '0x999',
+        value: new BigNumber(1)
+      };
+
+      const element = render({ address: '0x123', block, netVersion: '42', tx });
+
+      expect(element.find('Link').get(1).props.to).to.equal('/contracts/0x999');
     });
   });
 });