Merge pull request #136 from cmgustavo/feature/01-blockchain-tx-list

Feature/01 blockchain tx list

css/main.css

@@ -117,6 +117,24 @@ body {
   font-size: 12px;
 }
 
+.btransactions .panel {
+  background: #fff;
+}
+
+.btransactions .txheader {
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.btransactions .txbottom {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+  font-size: 12px;
+}
+
 .pending table {
   width: 100%;
   border: none;

index.html

@@ -338,40 +338,54 @@
               </div>
             </div>
           </div>
-          <div class="large-12 columns">
-<!--
-            <h4>Last transactions</h4>
-            <div class="panel">
-              <div class="row">
-                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
-                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
-                <p class="large-5 columns"> Address 2 <small class="right"> 1231 BTC </small></p>
-                <span class="panel-res panel-sign">
-                  <i class="fi-check size-16"></i>
-                </span>
+          <div class="large-12 columns" ng-init="getTransactions()" ng-show="blockchain_txs[0].txid">
+            <h3>Last transactions</h3>
+            <div class="btransactions">
+              <div class="panel" ng-repeat="btx in blockchain_txs | orderBy: 'firstSeenTs':true">
+                <div class="txheader">
+                  <div class="row">
+                    <div class="large-8 columns">
+                      ID: {{btx.txid}}
+                    </div>
+                    <div class="large-4 columns text-right">
+                      {{btx.firstSeenTs * 1000 | date:'medium'}} </h6>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="large-5 columns">
+                    <div ng-repeat="vin in btx.vin">
+                      {{vin.addr}} 
+                      <small>{{vin.value}}</small>
+                    </div>
+                  </div>
+                  <div class="large-1 columns text-center">
+                    <i class="fi-arrow-right"></i>
+                  </div>
+                  <div class="large-6 columns">
+                    <div ng-repeat="vout in btx.vout">
+                      <div class="row">
+                        <div class="large-10 columns">
+                          <div ng-repeat="addr in vout.scriptPubKey.addresses">
+                            {{addr}}
+                          </div>
+                        </div>
+                        <div class="large-2 columns">
+                          <small>{{vout.value}}</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="txbottom">
+                  <div class="row">
+                    <div class="large-4 columns">Fees: {{btx.fees}}</div>
+                    <div class="large-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
+                    <div class="large-4 columns text-right">Total: {{btx.valueOut}}</div>
+                  </div>
+                </div>
               </div>
             </div>
-            <div class="panel">
-              <div class="row">
-                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
-                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
-                <p class="large-5 columns"> Address 2 <small class="right"> 1231 BTC </small></p>
-                <span class="panel-res panel-sign">
-                  <i class="fi-check size-16"></i>
-                </span>
-              </div>
-            </div>
-            <div class="panel">
-              <div class="row">
-                <p class="large-5 columns"> Address 1 <small class="right"> 1231 BTC </small></p>
-                <i class="large-1 columns fi-arrow-left size-16 text-center"></i>
-                <p class="large-5 columns"> Address 2 <small class="right"> 1231 BTC </small></p>
-                <span class="panel-res panel-ignore">
-                  <i class="fi-x size-16"></i>
-                </span>
-              </div>
-            </div>
--->
           </div>
         </div>    
       </div>

js/controllers/transactions.js

@@ -70,6 +70,17 @@ angular.module('copay.transactions').controller('TransactionsController',
       }
     };
 
+    $scope.getTransactions = function() {
+      var w   =$rootScope.wallet;
+      var addresses = w.getAddressesStr();
+
+      if (addresses.length > 0) {
+        w.blockchain.getTransactions(addresses, function(txs) {
+          $scope.blockchain_txs = txs;
+          $rootScope.$digest();
+        });
+      }
+    };
 
     $scope.reject = function (ntxid) {
       var w = $rootScope.wallet;

js/models/blockchain/Insight.js

@@ -27,7 +27,78 @@ function _asyncForEach(array, fn, callback) {
   } else {
     callback(); // Done!
   }
-}; 
+};
+
+function removeRepeatedElements(ar){ 
+  var ya=false,v="",aux=[].concat(ar),r=Array(); 
+  for (var i in aux){ // 
+    v=aux[i]; 
+    ya=false; 
+    for (var a in aux){ 
+      if (v==aux[a]){ 
+        if (ya==false){ 
+          ya=true; 
+        } 
+        else{ 
+          aux[a]=""; 
+        } 
+      } 
+    } 
+  } 
+  for (var a in aux){ 
+    if (aux[a]!=""){ 
+      r.push(aux[a]); 
+    } 
+  } 
+  return r; 
+}
+
+Insight.prototype.getTransactions = function(addresses, cb) {
+  var self = this;
+  
+  if (!addresses || !addresses.length) return cb([]);
+
+  var txids = [];
+  var txs = [];
+  
+  _asyncForEach(addresses, function(addr, callback) {
+    var options = {
+      host: self.host,
+      port: self.port,
+      scheme: self.scheme,
+      method: 'GET',
+      path: '/api/addr/' + addr,
+
+      headers: { 'Access-Control-Request-Headers' : '' }
+    };
+    
+    self._request(options, function(err, res) {
+      var txids_tmp = res.transactions;
+      for(var i=0; i<txids_tmp.length; i++) {
+        txids.push(txids_tmp[i]);
+      }
+      callback();
+    });
+  }, function() {
+    var clean_txids = removeRepeatedElements(txids);
+    _asyncForEach(clean_txids, function(txid, callback2) {
+      var options = {
+        host: self.host,
+        port: self.port,
+        scheme: self.scheme,
+        method: 'GET',
+        path: '/api/tx/' + txid,
+        headers: { 'Access-Control-Request-Headers' : '' }
+      };
+      self._request(options, function(err, res) {
+        txs.push(res);
+        callback2();
+      });
+    }, function() {
+      return cb(txs);
+    });
+  });
+};
 
 Insight.prototype.getUnspent = function(addresses, cb) {
   var self = this;
@@ -98,7 +169,6 @@ Insight.prototype._request = function(options, callback) {
     request.open(options.method, url, true);
     request.onreadystatechange = function() {
       if (request.readyState === 4) {
-console.log('[Insight.js.102]', request); //TODO
         if (request.status === 200) {
           return callback(null, JSON.parse(request.responseText));
         }