Merge pull request #6100 from cmgustavo/feat/tx-confirm-notification-02

Notify when a tx has been confirmed

app-template/package-template.json

@@ -56,7 +56,7 @@
     "bezier-easing": "^2.0.3",
     "bhttp": "^1.2.1",
     "bitauth": "^0.2.1",
-    "bitcore-wallet-client": "5.1.2",
+    "bitcore-wallet-client": "5.2.0",
     "bower": "^1.7.9",
     "cordova-android": "5.1.1",
     "cordova-custom-config": "^3.0.5",

src/js/controllers/tx-details.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txDetailsController', function($rootScope, $log, $ionicHistory, $scope, $timeout, walletService, lodash, gettextCatalog, profileService, configService, externalLinkService, popupService, ongoingProcess, txFormatService) {
+angular.module('copayApp.controllers').controller('txDetailsController', function($rootScope, $log, $ionicHistory, $scope, $timeout, walletService, lodash, gettextCatalog, profileService, externalLinkService, popupService, ongoingProcess, txFormatService, txConfirmNotification) {
 
   var txId;
   var listeners = [];
@@ -12,6 +12,10 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     $scope.color = $scope.wallet.color;
     $scope.copayerId = $scope.wallet.credentials.copayerId;
     $scope.isShared = $scope.wallet.credentials.n > 1; 
+
+    txConfirmNotification.checkIfEnabled(txId, function(res) {
+      $scope.txNotification = { value: res };
+    });
   });
 
   $scope.$on("$ionicView.afterEnter", function(event) {
@@ -188,4 +192,12 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
     });
   };
 
+  $scope.txConfirmNotificationChange = function() {
+    if ($scope.txNotification.value) {
+      txConfirmNotification.subscribe($scope.wallet, { txid: txId });
+    } else {
+      txConfirmNotification.unsubscribe($scope.wallet, txId);
+    }
+  };
+
 });

src/js/services/storageService.js

@@ -598,5 +598,17 @@ angular.module('copayApp.services')
       storage.remove('amazonGiftCards-' + network, cb);
     };
 
+    root.setTxConfirmNotification = function(txid, val, cb) {
+      storage.set('txConfirmNotif-' + txid, val, cb);
+    };
+
+    root.getTxConfirmNotification = function(txid, cb) {
+      storage.get('txConfirmNotif-' + txid, cb);
+    };
+
+    root.removeTxConfirmNotification = function(txid, cb) {
+      storage.remove('txConfirmNotif-' + txid, cb);
+    };
+
     return root;
   });

src/js/services/txConfirmNotification.js

@@ -0,0 +1,32 @@
+'use strict';
+angular.module('copayApp.services').factory('txConfirmNotification', function txConfirmNotification($log, storageService) {
+  var root = {};
+
+  root.checkIfEnabled = function(txid, cb) {
+    storageService.getTxConfirmNotification(txid, function(err, res) {
+      if (err) $log.error(err);
+      return cb(!!res);
+    });
+  };
+
+  root.subscribe = function(client, opts) {
+    client.txConfirmationSubscribe(opts, function(err, res) {
+      if (err) $log.error(err);
+      storageService.setTxConfirmNotification(opts.txid, true, function(err) {
+        if (err) $log.error(err);
+      });
+    });
+  };
+
+  root.unsubscribe = function(client, txId) {
+    client.txConfirmationUnsubscribe(txId, function(err, res) {
+      if (err) $log.error(err);
+      storageService.removeTxConfirmNotification(txId, function(err) {
+        if (err) $log.error(err);
+      });
+    });
+  };
+
+  return root;
+
+});

src/sass/views/includes/txp-details.scss

@@ -1,5 +1,6 @@
 #txp-details,
 #view-confirm {
+  @extend .deflash-blue;
   $item-lateral-padding: 20px;
   $item-vertical-padding: 10px;
   $item-border-color: #EFEFEF;
@@ -99,6 +100,14 @@
         }
       }
     }
+    .toggle-unconfirmed {
+      padding-bottom: 15px;
+    }
+    .toggle-label {
+      margin-top: 5px;
+      font-size: 14px;
+      color: $item-label-color;
+    } 
     .item-divider {
       padding-top: 1.2rem;
       color: $item-label-color;

www/views/tx-details.html

@@ -102,6 +102,13 @@
             </span>
           </span>
         </div>
+        <ion-toggle ng-show="!btx.confirmations || btx.confirmations == 0"
+                    class="toggle-unconfirmed"
+                    ng-model="txNotification.value" 
+                    toggle-class="toggle-balanced"
+                    ng-change="txConfirmNotificationChange()">
+          <span class="toggle-label" translate>Notify me if confirmed</span>
+        </ion-toggle>
         <div ng-if="actionList[0]">
           <div class="item item-divider" translate>Timeline</div>
           <div class="item timeline-item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">