simplify tx confirmations display (#3559)

* Hash component

* DRY code by using Hash component

* TxHash component: show hash inline

* TxHash component: less verbose confirmations display

* TxHash component: rename ui/Hash to ui/ShortenedHash

* signer: center message in TransactionFinished

* style fixes

js/src/views/Account/Transactions/Transaction/transaction.js

@@ -19,6 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
 
 import { IdentityIcon, IdentityName, MethodDecoding } from '../../../../ui';
+import ShortenedHash from '../../../../ui/ShortenedHash';
 import { txLink, addressLink } from '../../../../3rdparty/etherscan/links';
 
 import styles from '../transactions.css';
@@ -95,7 +96,7 @@ export default class Transaction extends Component {
             href={ txLink(transaction.hash, isTest) }
             target='_blank'
           >
-            { this.formatHash(transaction.hash) }
+            <ShortenedHash data={ transaction.hash } />
           </a>
         </div>
       </td>
@@ -150,14 +151,6 @@ export default class Transaction extends Component {
     );
   }
 
-  formatHash (hash) {
-    if (!hash || hash.length <= 16) {
-      return hash;
-    }
-
-    return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
-  }
-
   formatNumber (number) {
     return new BigNumber(number).toFormat();
   }

js/src/views/Contract/Events/Event/event.js

@@ -19,6 +19,7 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 
 import { IdentityIcon, IdentityName, Input, InputAddress } from '../../../../ui';
+import ShortenedHash from '../../../../ui/ShortenedHash';
 import { txLink } from '../../../../3rdparty/etherscan/links';
 
 import styles from '../../contract.css';
@@ -71,7 +72,7 @@ export default class Event extends Component {
           <div className={ styles.eventType }>
             { event.type }({ keys })
           </div>
-          <a href={ url } target='_blank'>{ this.formatHash(event.transactionHash) }</a>
+          <a href={ url } target='_blank'><ShortenedHash data={ event.transactionHash } /></a>
         </td>
         <td className={ styles.eventDetails }>
           <div className={ styles.eventParams }>
@@ -82,14 +83,6 @@ export default class Event extends Component {
     );
   }
 
-  formatHash (hash) {
-    if (!hash || hash.length <= 16) {
-      return hash;
-    }
-
-    return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
-  }
-
   renderAddressName (address, withName = true) {
     return (
       <span className={ styles.eventAddress }>