fix conflics

.gitignore

@@ -28,4 +28,5 @@ npm-debug.log
 
 .DS_Store
 public/lib/*
+db/*
 

app/controllers/currency.js

@@ -40,11 +40,6 @@ exports.index = function(req, res) {
 
   // Init
   var currentTime = +new Date();
-  console.log('-----------------------------------');
-  console.log(timestamp);
-  console.log(currentTime);
-  console.log(currentTime >= (timestamp + delay));
-  console.log('-----------------------------------');
   if (bitstampRate === 0 || currentTime >= (timestamp + delay)) {
     timestamp = currentTime;
 
@@ -53,19 +48,13 @@ exports.index = function(req, res) {
 
       res.jsonp({
         status: 200,
-        data: {
+        data: { bitstamp: bitstampRate }
-          bitstamp: bitstampRate,
-          delay: delay
-        }
       });
     });
   } else {
     res.jsonp({
       status: 200,
-      data: {
+      data: { bitstamp: bitstampRate }
-        bitstamp: bitstampRate,
-        delay: delay
-      }
     });
   }
 };

app/controllers/transactions.js

@@ -50,10 +50,12 @@ var getTransaction = function(txid, cb) {
     }
 
     if (!tx || !tx.info) {
-console.log('[transactions.js.48]:: TXid %s not found in RPC. CHECK THIS.', tx.txid); //TODO
+console.log('[transactions.js.48]:: TXid %s not found in RPC. CHECK THIS.', txid); //TODO
       // not check this. no
-      tx.info = {
+      tx = {
-        txid: tx.txid
+        info: {
+          txid: txid
+        }
       };
     }
 

app/views/includes/foot.jade

@@ -1,21 +1,21 @@
 #footer(data-ng-include="'/views/includes/footer.html'", role='navigation')
 
 script(type='text/javascript', src='/socket.io/socket.io.js')
-script(type='text/javascript', src='/lib/momentjs/moment.js')
+script(type='text/javascript', src='/lib/momentjs/min/moment.min.js')
 script(type='text/javascript', src='/lib/qrcode-generator/js/qrcode.js')
 script(type='text/javascript', src='/lib/zeroclipboard/ZeroClipboard.min.js')
 
 //AngularJS
-script(type='text/javascript', src='/lib/angular/angular.js')
+script(type='text/javascript', src='/lib/angular/angular.min.js')
-script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
+script(type='text/javascript', src='/lib/angular-resource/angular-resource.min.js')
-script(type='text/javascript', src='/lib/angular-route/angular-route.js')
+script(type='text/javascript', src='/lib/angular-route/angular-route.min.js')
 script(type='text/javascript', src='/lib/angular-qrcode/qrcode.js')
-script(type='text/javascript', src='/lib/angular-animate/angular-animate.js')
+script(type='text/javascript', src='/lib/angular-animate/angular-animate.min.js')
 
 //Angular UI
-script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.js')
+script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap.min.js')
-script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.js')
+script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.min.js')
-script(type='text/javascript', src='/lib/angular-ui-utils/ui-utils.js')
+script(type='text/javascript', src='/lib/angular-ui-utils/ui-utils.min.js')
 
 //Application Init
 script(type='text/javascript', src='/js/app.js')
@@ -35,11 +35,12 @@ script(type='text/javascript', src='/js/services/currency.js')
 //Application Controllers
 script(type='text/javascript', src='/js/controllers/index.js')
 script(type='text/javascript', src='/js/controllers/header.js')
+script(type='text/javascript', src='/js/controllers/search.js')
 script(type='text/javascript', src='/js/controllers/blocks.js')
 script(type='text/javascript', src='/js/controllers/transactions.js')
 script(type='text/javascript', src='/js/controllers/address.js')
-script(type='text/javascript', src='/js/controllers/search.js')
 script(type='text/javascript', src='/js/controllers/status.js')
 script(type='text/javascript', src='/js/controllers/footer.js')
 script(type='text/javascript', src='/js/controllers/connection.js')
+script(type='text/javascript', src='/js/controllers/currency.js')
 script(type='text/javascript', src='/js/init.js')

public/css/common.css

@@ -196,25 +196,24 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .block-id {
   background-color: #373D42;
   border: 3px solid #FFFFFF;
-  height: 165px;
+  margin: 0 auto;
-  margin: 10px auto;
   width: 165px;
+  color: #fff;
+  text-align: center;
+  font-size: 80px;
 }
 
-.block-id h1 {
+.block-id span {
+  margin-top: 10px;
+}
+
+.block-id h2 {
   color: #FFFFFF;
   font-weight: bold;
   line-height: 30px;
-  text-align: center;
-  font-size: 24px;
-}
-
-.block-id h3 {
-  color: #FFFFFF;
-  font-weight: bold;
-  line-height: 30px;
-  text-align: center;
   font-size: 24px;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
 .icon-block {
@@ -223,6 +222,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-top:  10px;
 }
 
+.icon-block h3 {
+  color: #fff;
+}
+
 .block-tx {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -231,6 +234,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   margin: 20px 0 10px;
   overflow: hidden;
   padding: 15px;
+  border: 1px solid #ccc;
 }
 
 .btn {
@@ -267,6 +271,30 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border: 2px solid #6C0000;
 }
 
+.label {
+  padding: .7em 2em;
+  font-size: 13px;
+  text-transform: uppercase;
+  font-weight:100;
+}
+
+.label-primary {
+  background-color: #8DC429;
+}
+
+.label-default {
+  background-color: #ffffff;
+  color: #333;
+}
+
+.label-success {
+  background-color: #2FA4D7;
+}
+
+.label-danger {
+  background-color: #AC0015;
+}
+
 .progress-bar-info { background-color: #8DC429; }
 
 /* Set the fixed height of the footer here */
@@ -278,9 +306,10 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   overflow: hidden;
 }
 
-#footer .currency a:active {
+.currency a.active {
-  color: #fff;
+  color: #000;
   text-decoration: underline;
+  cursor: default;
 }
 
 #footer a.insight {
@@ -303,7 +332,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .line-mid { padding: 15px 0;}
 .line-top {
   border-top: 1px solid #EAEAEA;
-  padding: 15px 0;
+  padding: 15px 0 0 0;
 }
 
 /* Custom page CSS
@@ -412,14 +441,38 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   width: 30px;
 }
 .btn-copy { margin-left: 5px; }
+.btn-copy .tooltip {
+  display: inline-block;
+  margin-left: 10px;
+  margin-top: -2px;
+  opacity: 0;
+}
+.btn-copy.zeroclipboard-is-hover { color: #2a6496; }
+.btn-copy.zeroclipboard-is-active .tooltip { opacity: 1; }
 .btn-expand { margin-right: 5px; }
 
+@media (max-width: 991px) {
+  .btn-copy {
+    display: none; 
+  }
+}
+
+.txid {
+  line-height: 26px;
+}
+
+.tx-id {
+  background-color: #373D42;
+  border: 3px solid #FFFFFF;
+  margin: 0 auto;
+  width: 165px;
+  color: #FFFFFF;
+  font-size: 80px;
+  text-align: center;
+}
+
 .transaction-vin-vout .ellipsis { margin-bottom: 10px; }
 .transaction-vin-vout .btc-value { margin-left: 15px; }
 
 .page-header { margin-top: 0; }
 
-.block_hash {
-  margin-left: 46px;
-  text-align: center;
-}

public/js/config.js

@@ -53,5 +53,6 @@ angular.module('insight')
       $rootScope.titleDetail = '';
       $rootScope.title = $route.current.title;
       $rootScope.isCollapsed = true;
+      $rootScope.currentAddr = null;
     });
   });

public/js/controllers/connection.js

@@ -4,6 +4,7 @@ angular.module('insight.connection').controller('ConnectionController',
 function($scope, $window, Status, Sync, getSocket) {
 
   // Set initial values
+  $scope.apiOnline = true;
   $scope.serverOnline = true;
   $scope.clienteOnline = true;
 
@@ -22,7 +23,7 @@ function($scope, $window, Status, Sync, getSocket) {
   $scope.getConnStatus = function() {
     Sync.get({},
     function(sync) {
-      $scope.apiOnline = (sync.status !== 'aborted' && sync.status !== 'error') ? true : false;
+      $scope.apiOnline = (sync.status !== 'aborted' && sync.status !== 'error');
     },
     function() {
       $scope.apiOnline = false;
@@ -31,7 +32,7 @@ function($scope, $window, Status, Sync, getSocket) {
 
   socket.emit('subscribe', 'sync');
   socket.on('status', function(sync) {
-      $scope.apiOnline = (sync.status !== 'aborted' && sync.status !== 'error') ? true : false;
+      $scope.apiOnline = (sync.status !== 'aborted' && sync.status !== 'error');
   });
 
   // Check for the client conneciton

public/js/controllers/currency.js

@@ -0,0 +1,51 @@
+'use strict';
+
+angular.module('insight.currency').controller('CurrencyController',
+  function($scope, $rootScope, Currency) {
+
+    var _roundFloat = function(x, n) {
+      if(!parseInt(n, 10) || !parseFloat(x)) n = 0;
+
+      return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
+    };
+
+    $rootScope.currency.getConvertion = function(value) {
+      if (typeof value !== 'undefined' && value !== null) {
+        var response;
+
+        if (this.symbol === 'USD') {
+          response = _roundFloat((value * this.factor), 2);
+        } else if (this.symbol === 'mBTC') {
+          this.factor = 1000;
+          response = _roundFloat((value * this.factor), 5);
+        } else {
+          this.factor = 1;
+          response = value;
+        }
+
+        return response + ' ' + this.symbol;
+      }
+
+      return 'value error';
+    };
+
+    $scope.setCurrency = function(currency) {
+      $rootScope.currency.symbol = currency;
+
+      if (currency === 'USD') {
+        Currency.get({}, function(res) {
+          $rootScope.currency.factor = $rootScope.currency.bitstamp = res.data.bitstamp;
+        });
+      } else if (currency === 'mBTC') {
+        $rootScope.currency.factor = 1000;
+      } else {
+        $rootScope.currency.factor = 1;
+      }
+    };
+
+    // Get initial value
+    Currency.get({}, function(res) {
+      $rootScope.currency.bitstamp = res.data.bitstamp;
+    });
+
+  });

public/js/controllers/footer.js

@@ -1,54 +1,7 @@
 'use strict';
 
 angular.module('insight.system').controller('FooterController',
-  function($rootScope, $scope, Version, Currency) {
+  function($scope, Version) {
-
-    var _roundFloat = function(x, n) {
-      if(!parseInt(n, 10)) n = 0;
-
-      if(!parseFloat(x)) return false;
-
-      return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
-    };
-
-    $rootScope.currency = {
-      factor: 1,
-      symbol: 'BTC',
-      bitstamp: 0,
-      getConversion: function(value) {
-        if (value !== 'undefined' && value !== null) {
-          var response;
-
-          if (this.symbol === 'USD') {
-            response = _roundFloat((value * this.factor), 2);
-          } else if (this.symbol === 'mBTC') {
-            this.factor = 1000;
-            response = _roundFloat((value * this.factor), 5);
-          } else {
-            this.factor = 1;
-            response = value;
-          }
-
-          return response + ' ' + this.symbol;
-        }
-
-        return null;
-      }
-    };
-
-    $scope.setCurrency = function(currency) {
-      if (currency === 'USD') {
-        Currency.get({}, function(res) {
-          $rootScope.currency.factor = res.data.bitstamp;
-        });
-      } else if (currency === 'mBTC') {
-        $rootScope.currency.factor = 1000;
-      } else {
-        $rootScope.currency.factor = 1;
-      }
-
-      $rootScope.currency.symbol = currency;
-    };
 
     var _getVersion = function() {
       Version.get({},

public/js/controllers/header.js

@@ -1,10 +1,14 @@
 'use strict';
 
 angular.module('insight.system').controller('HeaderController',
-  function($scope, $rootScope, getSocket, Global, Block, Currency) {
+  function($scope, $rootScope, getSocket, Global, Block) {
   $scope.global = Global;
 
-  Currency.get();
+  $rootScope.currency = {
+    factor: 1,
+    bitstamp: 0,
+    symbol: 'BTC'
+  };
 
   $scope.menu = [
     {

public/js/controllers/transactions.js

@@ -75,7 +75,7 @@ function($scope, $rootScope, $routeParams, $location, Global, Transaction, Trans
     tx.voutSimple = _aggregateItems(tx.vout);
   };
 
-  var _paginate = function (data) {
+  var _paginate = function(data) {
     $scope.loading = false;
 
     pagesTotal = data.pagesTotal;

public/js/directives.js

@@ -39,6 +39,7 @@ angular.module('insight')
     return {
       restric: 'A',
       scope: { clipCopy: '=clipCopy' },
+      template: '<span class="glyphicon glyphicon-paperclip"></span><div class="tooltip fade right in"><div class="tooltip-arrow"></div><div class="tooltip-inner">Copied!</div></div>',
       link: function(scope, elm) {
         var clip = new ZeroClipboard(elm);
 
@@ -48,6 +49,9 @@ angular.module('insight')
           };
 
           client.on('mousedown', onMousedown);
+          client.on('noflash wrongflash', function() {
+            return elm.remove();
+          });
 
           scope.$on('$destroy', function() {
             client.off('mousedown', onMousedown);

public/views/address.html

@@ -5,10 +5,10 @@
       <h1 class="text-center">Address</h1>
       <div class="text-center">
         <qrcode size="160" data="{{address.addrStr}}"></qrcode>
-        <div class="m10v">
+      </div>
-          <button class="pull-right btn-copy" clip-copy="address.addrStr"><span class="glyphicon glyphicon-paperclip"></span></button>
+      <div class="m10v">
-          <a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
+        <button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
-        </div>
+        <a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
       </div>
       <div class="m20v">
         <h4>Summary</h4>
@@ -16,15 +16,15 @@
           <tbody>
           <tr>
             <td class="small">Total Received</td>
-            <td class="address ellipsis text-right">{{address.totalReceived}} BTC</td>
+            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
           </tr>
           <tr>
             <td class="small">Total Sent</td>
-            <td class="address ellipsis text-right">{{address.totalSent}} BTC</td>
+            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
           </tr>
           <tr>
             <td class="small">Final Balance</td>
-            <td class="address ellipsis text-right">{{address.balance}} BTC</td>
+            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
           </tr>
           <tr>
             <td class="small">No. Transactions</td>
@@ -33,6 +33,7 @@
           </tbody>
         </table>
       </div> <!-- END OF TRANSACTIONS TABLE -->
+      <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-MD-3 -->
     <div class="col-xs-12 col-md-9 col-md-offset-3">
       <div data-ng-controller="transactionsController" data-ng-init="load('address')">

public/views/block.html

@@ -2,15 +2,14 @@
 <section data-ng-controller="BlocksController" data-ng-init="findOne()">
   <div class="row">
     <div class="col-xs-12 col-gray col-gray-fixed">
+      <h1 class="text-center">Block</h1>
       <div class="block-id">
-        <div class="icon-block text-center">
+        <span class="glyphicon glyphicon-list-alt"></span>
-          <span class="glyphicon glyphicon-list-alt"></span>
+        <h2 data-ng-if="block">#{{ block.height }}</h2>
-        </div>
-        <h1 data-ng-if="block">Block #{{ block.height }}</h1>
       </div>
       <div class="m10v">
-        <button class="pull-right btn-copy" clip-copy="block.hash"><span class="glyphicon glyphicon-paperclip"></span></button>
+        <button class="pull-right btn-copy" clip-copy="block.hash"></button>
-        <a class="ellipsis block_hash" href="/address/{{block.hash}}">{{block.hash}}</a>
+        <a class="ellipsis" href="/address/{{block.hash}}">{{block.hash}}</a>
       </div>
       <div class="m20v" data-ng-show="!tx.isCoinBase">
         <h4>Hashes</h4>
@@ -31,6 +30,7 @@
           </tbody>
         </table>
       </div> <!-- END OF TRANSACTIONS TABLE -->
+      <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-GRAY   -->
 
     <div class="col-xs-12 col-md-9 col-md-offset-3">

public/views/includes/currency.html

@@ -0,0 +1,8 @@
+<div class="currency text-center m10t" data-ng-controller="CurrencyController">
+  <small>
+    Currency:
+    <a href="#" data-ng-click="setCurrency('USD')" data-ng-class="{active: currency.symbol == 'USD'}" tooltip="Change to USD: Bitstamp ${{currency.bitstamp}}">USD</a> ·
+    <a href="#" data-ng-click="setCurrency('BTC')" data-ng-class="{active: currency.symbol == 'BTC'}" tooltip="Change to BTC">BTC</a> ·
+    <a href="#" data-ng-click="setCurrency('mBTC')" data-ng-class="{active: currency.symbol == 'mBTC'}" tooltip="Change to mBTC">mBTC</a>
+  </small>
+</div>

public/views/includes/footer.html

@@ -1,9 +1,3 @@
 <div class="container" data-ng-controller="FooterController">
-  <div class="pull-left m10v currency">
-    <small>Currency:</small>
-    <a href="#" data-ng-click="setCurrency('USD')">USD</a> -
-    <a href="#" data-ng-click="setCurrency('BTC')">BTC</a> -
-    <a href="#" data-ng-click="setCurrency('mBTC')">mBTC</a>
-  </div>
   <a class="insight m10v pull-right" href="/">Insight <small>API v{{version}}</small></a>
 </div>

public/views/transaction.html

@@ -1,55 +1,58 @@
 <div data-ng-include src="'/views/includes/connection.html'"></div>
 <section data-ng-controller="transactionsController" data-ng-init="findThis()">
-    <h1>
+<div class="row">
-      Transaction
+  <div class="col-xs-12 col-gray col-gray-fixed">
-      <small>View information about a bitcoin transaction</small>
+    <h1 class="text-center">Transaction</h1>
-    </h1>
+    <div class="tx-id">
-
+      <span class="glyphicon glyphicon-retweet"></span>
-  <div class="block-tx">
-    <div data-ng-include src="'/views/transaction/tx.html'"></div>
-  </div><!--  END OF BLOCK-TX -->
-
-  <div class="row m50v">
-    <div data-ng-class="{'col-md-6':!tx.isCoinBase}">
-      <h2>Summary</h2>
-      <table class="table" style="table-layout: fixed">
-        <tbody>
-        <tr>
-          <td><strong> Size </strong></td>
-          <td class="text-muted text-right">{{tx.size}} (bytes)</td>
-        </tr>
-        <tr>
-          <td><strong>Received Time </strong></td>
-          <td class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
-        </tr>
-        <tr>
-          <td><strong>Block </strong>
-          <td class="text-right">
-
-              <a href="/block/{{tx.blockhash}}" class=" ellipsis">{{tx.blockhash}}</a>
-        </tbody>
-      </table>
     </div>
-    <div class="col-md-6"  data-ng-show="!tx.isCoinBase">
+    <div class="m10v">
+      <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
+      <div class="ellipsis">
+        <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+      </div>
+    </div>
+    <h4>Summary</h4>
+    <table class="table" style="table-layout: fixed">
+      <tbody>
+      <tr>
+        <td><strong> Size </strong></td>
+        <td class="text-muted text-right">{{tx.size}} (bytes)</td>
+      </tr>
+      <tr>
+        <td><strong>Received Time </strong></td>
+        <td class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
+      </tr>
+      </tbody>
+    </table>
+    <div data-ng-include src="'/views/includes/currency.html'"></div>
+  </div>
+  <div class="col-xs-12 col-md-9 col-md-offset-3">
+    <h2>
+      Details
+      <small>View information about a bitcoin transaction</small>
+    </h2>
+    <div class="block-tx">
+      <div data-ng-include src="'/views/transaction/tx.html'"></div>
+    </div>
+    <div data-ng-show="!tx.isCoinBase">
       <h2>Inputs and Outputs</h2>
         <table class="table">
           <tbody>
           <tr>
             <td><strong>Total Input</strong></td>
-            <td class="text-muted text-right">{{tx.valueIn}} BTC</td>
+            <td class="text-muted text-right">{{$root.currency.getConvertion(tx.valueIn)}}</td>
           </tr>
           <tr>
             <td><strong>Total Output</strong></td>
-            <td class="text-muted text-right">{{tx.valueOut}} BTC</td>
+            <td class="text-muted text-right">{{$root.currency.getConvertion(tx.valueOut)}}</td>
           </tr>
           <tr>
             <td><strong>Fees</strong></td>
-            <td class="text-muted text-right">{{tx.fees}} BTC</td>
+            <td class="text-muted text-right">{{$root.currency.getConvertion(tx.fees)}}</td>
           </tr>
           </tbody>
         </table>
     </div>
-
   </div>
 </section>
-

public/views/transaction/list.html

@@ -1,5 +1,5 @@
 <div class="alert alert-warning" data-ng-show="!txs[0].txid && !loading">There are not transactions</div>
-<div class="block-tx fader" data-ng-show="txs && txs[0].txid" data-ng-repeat="tx in txs">
+<div class="block-tx" data-ng-show="txs && txs[0].txid" data-ng-repeat="tx in txs">
   <div data-ng-include src="'/views/transaction/tx.html'"></div>
 </div>
 <div class="progress progress-striped active" data-ng-show="loading">

public/views/transaction/tx.html

@@ -1,102 +1,119 @@
-  <div class="line-bot">
+<div class="line-bot row">
-    <time class="pull-right">{{tx.time * 1000 | date:'medium'}}</time>
+  <div class="col-xs-12 col-md-6">
-    <button class="btn-expand" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
+    <button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
-    <a href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+    <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
-    <button class="btn-copy" clip-copy="tx.txid"><span class="glyphicon glyphicon-paperclip"></span></button>
+    <div class="ellipsis">
+      <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+    </div>
   </div>
-  <div class="row line-mid">
+  <div class="col-xs-12 col-md-6 text-right">
-    <div class="col-md-5">
+    <time>{{tx.time * 1000 | date:'medium'}}</time>
-      <div class="row" data-ng-show="tx.isCoinBase">
+  </div>
-        <div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
+</div>
-          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConversion(vin.reward)}}</small></div>
+<div class="row line-mid">
+  <div class="col-md-5">
+    <div class="row" data-ng-show="tx.isCoinBase">
+      <div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
+        <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.reward)}}</small></div>
+        <div class="ellipsis">
+          <span>No Inputs (Newly Generated Coins)</span>
+        </div>
+      </div>
+    </div>
+    <div class="row" data-ng-show="!tx.isCoinBase">
+      <div data-ng-repeat="vin in tx.vinSimple" data-ng-show="!itemsExpanded">
+        <div class="col-md-12 transaction-vin-vout">
+          <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
           <div class="ellipsis">
-            <span>No Inputs (Newly Generated Coins)</span>
+            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
+            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
+            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
           </div>
         </div>
       </div>
-      <div class="row" data-ng-show="!tx.isCoinBase">
+      <div data-ng-repeat="vin in tx.vin" data-ng-show="itemsExpanded">
-        <div data-ng-repeat="vin in tx.vinSimple" data-ng-show="!itemsExpanded">
+        <div class="col-md-12 transaction-vin-vout">
-          <div class="col-md-12 transaction-vin-vout">
+          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
-            <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConversion(vin.value)}}</small></div>
+          <div class="ellipsis">
-            <div class="ellipsis">
+            <a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
-              <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
+            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
-              <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
+            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
-              <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
-            </div>
           </div>
         </div>
-        <div data-ng-repeat="vin in tx.vin" data-ng-show="itemsExpanded">
+        <div class="col-md-12">
-          <div class="col-md-12 transaction-vin-vout">
+          <div class="panel panel-default">
-            <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConversion(vin.value)}}</small></div>
+            <div class="panel-body" style="word-wrap:break-word">
-            <div class="ellipsis">
+              <small>
-              <a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
+                <strong>scriptSig</strong>
-              <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
+                {{vin.scriptSig.asm}}
-              <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
+              </small>
-            </div>
-          </div>
-          <div class="col-md-12">
-            <div class="panel panel-default">
-              <div class="panel-body" style="word-wrap:break-word">
-                <small>
-                  <strong>scriptSig</strong>
-                  {{vin.scriptSig.asm}}
-                </small>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="col-md-1 text-center hidden-xs hidden-sm">
-      <span class="glyphicon glyphicon-chevron-right text-primary"></span>
-    </div>
-    <div class="col-xs-12 text-center hidden-md hidden-lg">
-      <span class="glyphicon glyphicon-chevron-down text-primary"></span>
-    </div>
-    <div class="col-md-6">
-      <div class="row">
-        <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!itemsExpanded">
-          <div class="col-md-12 transaction-vin-vout">
-            <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}"><small>{{$root.currency.getConversion(vout.value)}}</small></div>
-            <div class="ellipsis">
-              <span data-ng-show="vout.notAddr">{{vout.addr}}</span>
-              <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
-              <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
-            </div>
-          </div>
-        </div>
-        <div data-ng-repeat="vout in tx.vout" data-ng-show="itemsExpanded">
-          <div class="col-md-12 transaction-vin-vout">
-            <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConversion(vout.value)}}</small></div>
-            <div class="ellipsis">
-              <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
-            </div>
-          </div>
-          <div class="col-md-12">
-            <div class="panel panel-default">
-              <div class="panel-body" style="word-wrap:break-word">
-                <small>
-                  <p>
-                    <strong>Type</strong>
-                    {{vout.scriptPubKey.type}}
-                  </p>
-                  <p>
-                    <strong>scriptPubKey</strong>
-                    {{vout.scriptPubKey.asm}}
-                  </p>
-                </small>
-              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class="line-top">
+  <div class="col-md-1 text-center hidden-xs hidden-sm">
-    <small data-ng-show="!tx.isCoinBase" class="text-muted">Fees: {{tx.fees}}</small>
+    <span class="glyphicon glyphicon-chevron-right text-primary"></span>
-    <div class="pull-right">
+  </div>
-      <button data-ng-show="tx.confirmations" class="btn btn-success">{{tx.confirmations}} Confirmations</button>
+  <div class="col-xs-12 text-center hidden-md hidden-lg">
-      <button data-ng-show="!tx.confirmations" class="btn btn-danger">Unconfirmed Transaction!</button>
+    <span class="glyphicon glyphicon-chevron-down text-primary"></span>
-      <button class="btn btn-primary">{{$root.currency.getConversion(tx.valueOut)}}</button>
+  </div>
+  <div class="col-md-6">
+    <div class="row">
+      <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!itemsExpanded">
+        <div class="col-md-12 transaction-vin-vout">
+          <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}"><small>{{$root.currency.getConvertion(vout.value)}}</small></div>
+          <div class="ellipsis">
+            <span data-ng-show="vout.notAddr">{{vout.addr}}</span>
+            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
+            <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
+          </div>
+        </div>
+      </div>
+      <div data-ng-repeat="vout in tx.vout" data-ng-show="itemsExpanded">
+        <div class="col-md-12 transaction-vin-vout">
+          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vout.value)}}</small></div>
+          <div class="ellipsis">
+            <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
+          </div>
+        </div>
+        <div class="col-md-12">
+          <div class="panel panel-default">
+            <div class="panel-body" style="word-wrap:break-word">
+              <small>
+                <p>
+                  <strong>Type</strong>
+                  {{vout.scriptPubKey.type}}
+                </p>
+                <p>
+                  <strong>scriptPubKey</strong>
+                  {{vout.scriptPubKey.asm}}
+                </p>
+              </small>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+</div>
+<div class="panel panel-default" data-ng-show="itemsExpanded">
+  <div class="panel-body" style="word-wrap:break-word">
+    <small>
+      <strong>BlockHash</strong>
+      <a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
+      <button class="btn-copy" clip-copy="tx.blockhash"></button>
+    </small>
+  </div>
+</div>
+<div class="line-top row">
+  <div class="col-xs-4 col-md-6">
+    <span data-ng-show="!tx.isCoinBase" class="label label-default">Fees: {{$root.currency.getConvertion(tx.fees)}}</span>
+  </div>
+  <div class="col-xs-8 col-md-6 text-right">
+    <span data-ng-show="tx.confirmations" class="label label-success">{{tx.confirmations}} Confirmations</span>
+    <span data-ng-show="!tx.confirmations" class="label label-danger">Unconfirmed Transaction!</span>
+    <span class="label label-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
+  </div>
+</div>