expand input / outputs

app/models/Transaction.js

@@ -279,7 +279,7 @@ TransactionSchema.statics.queryInfo = function(txid,  cb) {
       else {
         tx.ins.forEach(function(i) {
           if (i.value) {
-            info.vin[c].value = util.formatValue(i.value);
+            info.vin[c].value = parseFloat(util.formatValue(i.value));
             var n = util.valueToBigInt(i.value).toNumber();
             info.vin[c].valueSat = n;
             valueIn           = valueIn.add( n );

public/css/common.css

@@ -314,4 +314,13 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   background-color: #1a1a1a;
 }
 
+.expanded-tx {
+  border-bottom: 1px dashed #444;
+}
+
+
+.expanded-tx small {
+  font-size: 80%;
+}
+
 

public/js/controllers/transactions.js

@@ -29,11 +29,13 @@ angular.module('insight.transactions').controller('transactionsController',
 
       // non standard output
       if (items[i].scriptPubKey && items[i].scriptPubKey.addresses.length > 1) {
+        item[i].addr = items[i].scriptPubKey.addresses.join(',');
         ret.push(items[i]);
         continue;
       }
 
-      var addr = items[i].addr || items[i].scriptPubKey.addresses[0];
+      var addr = items[i].addr || 
+        (items[i].scriptPubKey && items[i].scriptPubKey.addresses[0] );
       if (!tmp[addr]) {
         tmp[addr] = {};
         tmp[addr].valueSat = 0;
@@ -57,7 +59,6 @@ angular.module('insight.transactions').controller('transactionsController',
   $scope.processTX = function(tx) {
     tx.vinSimple = $scope.aggregateItems(tx.vin);
     tx.voutSimple = $scope.aggregateItems(tx.vout);
-console.log('[transactions.js.33:insSimple:]',tx); //TODO
   };
 
   $scope.findTx = function(txid) {
@@ -85,6 +86,9 @@ $scope.processTX(tx);
     TransactionsByBlock.query({
      block: bId
     }, function(txs) {
+      angular.forEach(txs, function(tx) {
+        $scope.processTX(tx);
+      });
       $scope.txs = txs;
     });
   };
@@ -93,6 +97,9 @@ $scope.processTX(tx);
     TransactionsByAddress.query({
      address: aId
     }, function(txs) {
+      angular.forEach(txs, function(tx) {
+        $scope.processTX(tx);
+      });
       $scope.txs = txs;
     });
   };

public/views/transaction.html

@@ -48,19 +48,6 @@
           </tbody>
         </table>
     </div>
-    <div class="col-md-12"  data-ng-show="!tx.isCoinBase">
-      <h3>ScriptSig</h3>
-      <ul class="list-group" data-ng-repeat="vin in tx.vin">
-        <li class="list-group-item" style="word-wrap:break-word">
-          {{vin.scriptSig.asm}}
-      </ul>
-    </div>
-    <div class="col-md-12"  data-ng-show="!tx.isCoinBase">
-      <h3>ScriptPubKey</h3>
-      <ul class="list-group" data-ng-repeat="vout in tx.vout"  style="word-wrap:break-word">
-        <li class="list-group-item"> {{vout.scriptPubKey.asm}}
-      </ul>
-    </div>
  
   </div>
 </section>

public/views/transaction/tx.html

@@ -11,19 +11,45 @@
         </div>
         <p class="text-muted pull-right"> <small>{{vin.reward}} BTC</small></p>
       </div>
-      <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
+
+      <div data-ng-show="!tx.isCoinBase">
+        <ul class="list-unstyled" data-ng-repeat="vin in tx.vinSimple" data-ng-show="!inputsExpanded">
           <li class="row">
-          <a class="col-md-1 glyphicon glyphicon-circle-arrow-left" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" tooltip="Outpoint: {{vin.txid}},{{vin.vout}}"  tooltip-placement="right" >
+            <div class="col-md-8">
+              <div class="ellipsis">
+                <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
+              </div>
+            </div>
+            <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
+        </ul>
+
+        <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="inputsExpanded">
+          <li class="row expanded-tx">
+            <a class="col-md-1 glyphicon glyphicon-arrow-right" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" tooltip="Outpoint: {{vin.txid}},{{vin.vout}}"  tooltip-placement="right" >
             </a>
             <div class="col-md-8">
               <div class="ellipsis">
                 <span data-ng-show="!vin.addr">Address could not be parsed</span>
                 <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>
               </div>
+              <div style="word-wrap:break-word">
+                <small><strong>scriptSig</strong>{{vin.scriptSig.asm}}</small>
+              </div>
             </div>
             <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
-        </li>
         </ul>
+
+        <div class="text-center">
+          <a class="text-small" data-ng-click="inputsExpanded = !inputsExpanded">
+            <span data-ng-show="inputsExpanded">
+              <span class="glyphicon glyphicon-chevron-up"></span> Collapse Inputs
+            </span>
+            <span data-ng-show="!inputsExpanded">
+              <span class="glyphicon glyphicon-chevron-down"></span> Expand Inputs
+            </span>
+          </a>
+        </div>
+      </div>
     </div>
 
     <div class="col-md-1 text-center">
@@ -32,21 +58,41 @@
 
     <div class="col-md-6">
       <div class="row">
-        <div class="col-md-3">
+        <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!outputsExpanded">
-          <div data-ng-repeat="vout in tx.vout">
+          <div class="col-md-9">
-            <small data-ng-repeat="address in vout.scriptPubKey.addresses">{{vout.scriptPubKey.type}}</small>
-          </div>
-        </div>
-        <div data-ng-repeat="vout in tx.vout">
-          <div class="col-md-6">
             <div class="ellipsis">
-              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
+              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
             </div>
           </div>
           <div class="col-md-3">
             <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
           </div>
         </div>
+        <div data-ng-repeat="vout in tx.vout" data-ng-show="outputsExpanded">
+          <div class="col-md-9 expanded-tx">
+            <div class="ellipsis">
+              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
+            </div>
+            <small><strong>type</strong> {{vout.scriptPubKey.type}}</small> 
+            <div>
+              <small><strong>scriptPubKey</strong> {{vout.scriptPubKey.asm}}</small>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
+          </div>
+        </div>
+ 
+      </div>
+      <div class="text-center">
+        <a class="text-small" data-ng-click="outputsExpanded = !outputsExpanded">
+          <span data-ng-show="outputsExpanded">
+            <span class="glyphicon glyphicon-chevron-up"></span> Collapse Outputs 
+          </span>
+          <span data-ng-show="!outputsExpanded">
+            <span class="glyphicon glyphicon-chevron-down"></span> Expand Outputs 
+          </span>
+        </a>
       </div>
     </div>
   </div>