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/ui/IdentityName/identityName.js

@@ -18,6 +18,8 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
+import ShortenedHash from '../ShortenedHash';
+
 const defaultName = 'UNNAMED';
 
 class IdentityName extends Component {
@@ -41,7 +43,7 @@ class IdentityName extends Component {
       return null;
     }
 
-    const addressFallback = shorten ? this.formatHash(address) : address;
+    const addressFallback = shorten ? (<ShortenedHash data={ address } />) : address;
     const fallback = unknown ? defaultName : addressFallback;
     const isUuid = hasAccount && account.name === account.uuid;
     const displayName = (name && name.toUpperCase().trim()) ||
@@ -55,14 +57,6 @@ class IdentityName extends Component {
       </span>
     );
   }
-
-  formatHash (hash) {
-    if (!hash || hash.length <= 16) {
-      return hash;
-    }
-
-    return `${hash.substr(2, 6)}...${hash.slice(-6)}`;
-  }
 }
 
 function mapStateToProps (state) {