Merge pull request #145 from JDonadio/feat/open-tx-modal

Open tx/txp modal without navigation

public/views/activity.html

@@ -19,7 +19,7 @@
 
     <div ng-if="!fetchingNotifications">
       <div class="list card">
-        <div class="item" ng-repeat="x in notifications" ng-click="x.action()">
+        <div class="item" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
           <span ng-include="'views/includes/walletActivity.html'"></span>
         </div>
 

public/views/includes/walletActivity.html

@@ -1,65 +1,65 @@
 <span class="wallet-activity">
-  <div ng-if="x.type ==  'NewCopayer' && x.wallet.n>1" translate>
+  <div ng-if="notification.type == 'NewCopayer' && notification.wallet.n>1" translate>
     Copayer joined
   </div>
 
-  <div ng-if="x.type == 'NewCopayer' && x.wallet.n==1" translate>
+  <div ng-if="notification.type == 'NewCopayer' && notification.wallet.n==1" translate>
     Wallet created
   </div>
 
-  <div ng-if="x.type == 'NewOutgoingTx'">
+  <div ng-if="notification.type == 'NewOutgoingTx'">
       <span translate>Payment Sent </span>
       <div class="wallet-activity-amount">
-      {{x.amountStr}}
+      {{notification.amountStr}}
       </div>
   </div>
 
 
 
-  <div ng-if="x.type == 'NewIncomingTx'">
+  <div ng-if="notification.type == 'NewIncomingTx'">
       <span translate>Payment Received</span>
       <div class="wallet-activity-amount">
-      {{x.amountStr}}
+      {{notification.amountStr}}
       </div>
   </div>
 
-  <div ng-if="x.type == 'TxProposalRemoved'">
+  <div ng-if="notification.type == 'TxProposalRemoved'">
     <span translate>Proposal Deleted</span>:
-    <b>{{x.message}}</b>
+    <b>{{notification.message}}</b>
     <div class="wallet-activity-amount">
-      {{x.amountStr}}:
+      {{notification.amountStr}}:
     </div>
   </div>
 
-  <div ng-if="x.type == 'TxProposalRejectedBy'">
+  <div ng-if="notification.type == 'TxProposalRejectedBy'">
     <span translate>Proposal Rejected</span>:
-    <b>{{x.message}}</b>
+    <b>{{notification.message}}</b>
     <div class="wallet-activity-amount">
-      {{x.amountStr}}:
+      {{notification.amountStr}}:
       </div>
   </div>
 
-  <span ng-if="x.type == 'NewTxProposal'">
+  <span ng-if="notification.type == 'NewTxProposal'">
     <span translate>New Proposal</span>:
-    <b>{{x.message}}</b>
+    <b>{{notification.message}}</b>
     <div class="wallet-activity-amount">
-    {{x.amountStr}} 
+    {{notification.amountStr}}
     </div>
   </span>
 
-  <span ng-if="x.type == 'TxProposalAcceptedBy'">
+  <span ng-if="notification.type == 'TxProposalAcceptedBy'">
     <span translate>Proposal Accepted</span>:
-    <b>{{x.message}}</b>
+    <b>{{notification.message}}</b>
     <div class="wallet-activity-amount">
-    {{x.amountStr}}
+    {{notification.amountStr}}
     </div>
   </span>
 
   <p class="wallet-activity-note">
-<!-- {{x.types}} -->
+<!-- {{notification.types}} -->
-    <i class="icon ion-record wallet-activity-note-child" ng-style="{'color':x.wallet.color}"></i>
+    <i class="icon ion-record wallet-activity-note-child" ng-style="{'color':notification.wallet.color}"></i>
-    <span ng-if="x.creatorName" class="wallet-activity-note-child">{{ x.creatorName}}@</span>
+    <span ng-if="notification.creatorName" class="wallet-activity-note-child">{{ notification.creatorName}}@</span>
-    <span class="wallet-activity-note-child">{{x.wallet.name}}</span>
+    <span class="wallet-activity-note-child">{{notification.wallet.name}}</span>
-    <time class="wallet-activity-note-child">{{ x.createdOn * 1000 | amTimeAgo}}</time>
+    <time class="wallet-activity-note-child">{{ notification.createdOn * 1000 | amTimeAgo}}</time>
   </p>
 </span>

public/views/modals/tx-details.html

@@ -1,5 +1,5 @@
 <ion-modal-view ng-controller="txDetailsController" ng-init="init()" id="tx-details">
-  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color':color}">
+  <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color}">
     <button class="button button-clear" ng-click="cancel()">
       {{'Close' | translate}}
     </button>
@@ -9,11 +9,11 @@
   </ion-header-bar>
 
   <ion-content>
-    <div class="header-modal text-center" ng-init="getAlternativeAmount(btx); showRate = false">
+    <div class="header-modal text-center" ng-init="showRate = false">
       <div ng-show="btx.action != 'invalid'">
 
         <i class="icon big-icon-svg">
-          <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+          <img src="img/icon-wallet.svg" ng-style="{'background-color': color}" class="bg"/>
         </i>
 
         <div class="size-36" copy-to-clipboard="btx.amountStr">
@@ -30,23 +30,23 @@
         </div>
       </div>
 
-        <div ng-show="btx.action == 'sent'">
+      <div ng-show="btx.action == 'sent'">
-          <span translate>Sent from</span> {{wallet.credentials.walletName}}
+        <span translate>Sent from</span> {{wallet.credentials.walletName}}
-          <div class="padding-vertical">
+        <div class="padding-vertical">
-            <i class="icon ion-ios-arrow-thin-down size-24"></i>
+          <i class="icon ion-ios-arrow-thin-down size-24"></i>
-          </div>
         </div>
+      </div>
 
-        <div ng-show="btx.action == 'received'">
+      <div ng-show="btx.action == 'received'">
-          <div class="padding-vertical">
+        <div class="padding-vertical">
-            <i class="icon ion-ios-arrow-thin-up size-24"></i>
+          <i class="icon ion-ios-arrow-thin-up size-24"></i>
-          </div>
-          <span translate>Received Funds</span>
         </div>
+        <span translate>Received Funds</span>
+      </div>
 
-        <div ng-show="btx.action == 'moved'">
+      <div ng-show="btx.action == 'moved'">
-          <span translate>Moved Funds</span>
+        <span translate>Moved Funds</span>
-        </div>
+      </div>
 
       <div ng-show="btx.action == 'invalid'">
         -
@@ -75,14 +75,22 @@
       </div>
 
       <div class="item">
-        <div translate>Created by</div>
+        <div ng-if="btx.action == 'received'">
-        <span>{{btx.creatorName}}</span>
+          <span translate>Date</span>
-        <span class="item-note">
+          <span class="item-note">
-          <time>{{ btx.createdOn * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
+            <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
-        </span>
+          </span>
+        </div>
+        <div ng-if="btx.action == 'sent'">
+          <div translate>Created by</div>
+          <span>{{btx.creatorName}}</span>
+          <span class="item-note">
+            <time>{{ btx.createdOn * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
+          </span>
+        </div>
       </div>
 
-      <div class="item" ng-show="btx.action != 'received'" copy-to-clipboard="btx.feeStr">
+      <div class="item" ng-if="btx.action != 'received' && btx.feeLevel" copy-to-clipboard="btx.feeStr">
         <div translate>Fee</div>
         <span class="enable_text_select">{{btx.feeLevel}} ({{btx.feeStr}})</span>
         <span class="right">

public/views/tab-home.html

@@ -30,12 +30,12 @@
         <span class="badge badge-assertive" ng-show="txpsN>3" translate> {{txpsN}}</span>
       </a>
 
-      <a ng-repeat="tx in txps" class="item"  ng-click="openTxpModal(tx)">
+      <a ng-repeat="tx in txps" class="item" ng-click="openTxpModal(tx)">
         <span ng-include="'views/includes/txp.html'"></span>
       </a>
     </div>
 
-    <div class="list card" ng-if="notifications.length > 0">
+    <div class="list card" ng-if="notifications[0]">
       <a class="item item-icon-right item-heading" ui-sref="tabs.activity" translate>
         Recent Activity
         <i class="icon nav-item-arrow-right"></i>
@@ -44,7 +44,7 @@
         <ion-spinner icon="lines"></ion-spinner>
         <div translate>Updating activity. Please stand by</div>
       </span>
-      <a class="item" ng-repeat="x in notifications" ng-click="x.action()">
+      <a class="item" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
         <span ng-include="'views/includes/walletActivity.html'"></span>
       </a>
     </div>

src/js/controllers/activity.js

@@ -1,9 +1,8 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('activityController',
-  function($rootScope, $timeout, $scope, $state, lodash, profileService, walletService, configService, txFormatService, $ionicModal, $log, platformInfo) {
+  function($timeout, $scope, $log, $ionicModal, lodash, txpModalService, profileService, walletService, ongoingProcess, popupService, gettextCatalog) {
-    var self = this;
+    $scope.openTxpModal = txpModalService.open;
-
 
     $scope.init = function() {
       $scope.fetchingNotifications = true;
@@ -14,9 +13,57 @@ angular.module('copayApp.controllers').controller('activityController',
         }
         $scope.fetchingNotifications = false;
         $scope.notifications = n;
-        $timeout(function() {
+
-          $scope.$apply();
+        profileService.getTxps({}, function(err, txps, n) {
-        }, 1);
+          if (err) $log.error(err);
+          $scope.txps = txps;
+          $timeout(function() {
+            $scope.$apply();
+          });
+        });
       });
-    }
+    };
+
+    $scope.openNotificationModal = function(n) {
+      if (!n.txpId && n.txid) {
+        openTxModal(n);
+      } else {
+        var txp = lodash.find($scope.txps, {
+          id: n.txpId
+        });
+        if (txp) txpModalService.open(txp);
+        else {
+          $log.warn('No txp found');
+          return popupService.showAlert(gettextCatalog.getString('Transaction not found'), null);
+        }
+      }
+    };
+
+    var openTxModal = function(n) {
+      var wallet = profileService.getWallet(n.walletId);
+
+      ongoingProcess.set('loadingTxInfo', true);
+      walletService.getTx(wallet, n.txid, function(err, tx) {
+        ongoingProcess.set('loadingTxInfo', false);
+
+        if (err) {
+          $log.error(err);
+          return popupService.showAlert(gettextCatalog.getString('Error'), err);
+        }
+
+        if (!tx) {
+          $log.warn('No tx found');
+          return popupService.showAlert(gettextCatalog.getString('Transaction not found'), null);
+        }
+
+        $scope.wallet = wallet;
+        $scope.btx = lodash.cloneDeep(tx);
+        $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
+          scope: $scope
+        }).then(function(modal) {
+          $scope.txDetailsModal = modal;
+          $scope.txDetailsModal.show();
+        });
+      });
+    };
   });

src/js/controllers/modals/txDetails.js

@@ -1,20 +1,18 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txDetailsController', function($log, $timeout, $scope, $filter, $stateParams, lodash, gettextCatalog, profileService, configService, txFormatService, externalLinkService, popupService) {
+angular.module('copayApp.controllers').controller('txDetailsController', function($log, $timeout, $scope, $filter, $stateParams, ongoingProcess, walletService, lodash, gettextCatalog, profileService, configService, txFormatService, externalLinkService, popupService) {
-  var self = $scope.self;
-  var wallet = profileService.getWallet($stateParams.walletId);
   var config = configService.getSync();
   var configWallet = config.wallet;
   var walletSettings = configWallet.settings;
+  var wallet;
+  $scope.title = gettextCatalog.getString('Transaction');
 
   $scope.init = function() {
+    wallet = $scope.wallet;
     $scope.alternativeIsoCode = walletSettings.alternativeIsoCode;
     $scope.color = wallet.color;
     $scope.copayerId = wallet.credentials.copayerId;
     $scope.isShared = wallet.credentials.n > 1;
-
-    $scope.btx.amountStr = txFormatService.formatAmount($scope.btx.amount, true) + ' ' + walletSettings.unitName;
-    $scope.btx.feeStr = txFormatService.formatAmount($scope.btx.fees, true) + ' ' + walletSettings.unitName;
     $scope.btx.feeLevel = walletSettings.feeLevel;
 
     if ($scope.btx.action != 'invalid') {
@@ -22,7 +20,30 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
       if ($scope.btx.action == 'received') $scope.title = gettextCatalog.getString('Received Funds');
       if ($scope.btx.action == 'moved') $scope.title = gettextCatalog.getString('Moved Funds');
     }
+
+    updateMemo();
     initActionList();
+    getAlternativeAmount();
+
+    $timeout(function() {
+      $scope.$apply();
+    });
+  };
+
+  function updateMemo() {
+    wallet.getTxNote({
+      txid: $scope.btx.txid
+    }, function(err, note) {
+      if (err || !note) {
+        $log.debug(gettextCatalog.getString('Could not fetch transaction note'));
+        return;
+      }
+
+      $scope.note = note;
+      $timeout(function() {
+        $scope.$apply();
+      });
+    });
   };
 
   function initActionList() {
@@ -60,12 +81,12 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
   };
 
   $scope.showCommentPopup = function() {
-    popupService.showPrompt(gettextCatalog.getString('Memo'), ' ', {}, function(res) {
+    popupService.showPrompt(gettextCatalog.getString('Memo'), ' ', {}, function(text) {
       $log.debug('Saving memo');
 
       var args = {
         txid: $scope.btx.txid,
-        body: res
+        body: text
       };
 
       wallet.editTxNote(args, function(err) {
@@ -77,7 +98,7 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
         $scope.btx.note = null;
         if (args.body) {
           $scope.btx.note = {};
-          $scope.btx.note.body = res;
+          $scope.btx.note.body = text;
           $scope.btx.note.editedByName = wallet.credentials.copayerName;
           $scope.btx.note.editedOn = Math.floor(Date.now() / 1000);
         }
@@ -85,12 +106,12 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
 
         $timeout(function() {
           $scope.$apply();
-        }, 200);
+        });
       });
     });
   };
 
-  $scope.getAlternativeAmount = function() {
+  var getAlternativeAmount = function() {
     var satToBtc = 1 / 100000000;
 
     wallet.getFiatRate({
@@ -123,5 +144,4 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
   $scope.cancel = function() {
     $scope.txDetailsModal.hide();
   };
-
 });

src/js/controllers/tab-home.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('tabHomeController',
-  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicScrollDelegate, lodash, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, $window) {
+  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, gettextCatalog, lodash, popupService, ongoingProcess, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, $window) {
     $scope.externalServices = {};
     $scope.bitpayCardEnabled = true; // TODO
     $scope.openTxpModal = txpModalService.open;
@@ -16,6 +16,49 @@ angular.module('copayApp.controllers').controller('tabHomeController',
       $scope.coinbaseEnabled = config.coinbase.enabled && !isWindowsPhoneApp;
     });
 
+    $scope.openNotificationModal = function(n) {
+      if (!n.txpId && n.txid) {
+        openTxModal(n);
+      } else {
+        var txp = lodash.find($scope.txps, {
+          id: n.txpId
+        });
+        if (txp) txpModalService.open(txp);
+        else {
+          $log.warn('No txp found');
+          return popupService.showAlert(gettextCatalog.getString('Transaction not found'), null);
+        }
+      }
+    };
+
+    var openTxModal = function(n) {
+      var wallet = profileService.getWallet(n.walletId);
+
+      ongoingProcess.set('loadingTxInfo', true);
+      walletService.getTx(wallet, n.txid, function(err, tx) {
+        ongoingProcess.set('loadingTxInfo', false);
+
+        if (err) {
+          $log.error(err);
+          return popupService.showAlert(gettextCatalog.getString('Error'), err);
+        }
+
+        if (!tx) {
+          $log.warn('No tx found');
+          return popupService.showAlert(gettextCatalog.getString('Transaction not found'), null);
+        }
+
+        $scope.wallet = wallet;
+        $scope.btx = lodash.cloneDeep(tx);
+        $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
+          scope: $scope
+        }).then(function(modal) {
+          $scope.txDetailsModal = modal;
+          $scope.txDetailsModal.show();
+        });
+      });
+    };
+
     $scope.openWallet = function(wallet) {
       if (!wallet.isComplete()) {
         return $state.go('tabs.copayers', {
@@ -112,7 +155,9 @@ angular.module('copayApp.controllers').controller('tabHomeController',
     $scope.hideHomeTip = function() {
       $scope.homeTip = null;
       $state.transitionTo($state.current, null, {
-        reload: false, inherit: false, notify: false
+        reload: false,
+        inherit: false,
+        notify: false
       });
     };
 

src/js/controllers/walletDetails.js

@@ -152,18 +152,13 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     $scope.close = function() {
       $scope.searchModal.hide();
     }
-
   };
 
   $scope.openTxModal = function(btx) {
-    var self = this;
-
     $scope.btx = lodash.cloneDeep(btx);
-    $scope.self = self;
+    $scope.walletId = wallet.id;
-
     $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
-      scope: $scope,
+      scope: $scope
-      hideDelay: 500
     }).then(function(modal) {
       $scope.txDetailsModal = modal;
       $scope.txDetailsModal.show();

src/js/services/onGoingProcess.js

@@ -32,6 +32,7 @@ angular.module('copayApp.services').factory('ongoingProcess', function($log, $ti
     'sweepingWallet': gettext('Sweeping Wallet...'),
     'validatingWallet': gettext('Validating wallet integrity...'),
     'validatingWords': gettext('Validating recovery phrase...'),
+    'loadingTxInfo': gettext('Loading transaction info...'),
   };
 
   root.clear = function() {

src/js/services/profileService.js

@@ -822,11 +822,11 @@ angular.module('copayApp.services')
 
           x.action = function() {
             // TODO?
-            $state.go('tabs.details', {
+            // $state.go('tabs.details', {
-              walletId: x.walletId,
+            //   walletId: x.walletId,
-              txpId: x.txpId,
+            //   txpId: x.txpId,
-              txid: x.txid,
+            //   txid: x.txid,
-            });
+            // });
           };
         });
 

src/js/services/walletService.js

@@ -502,6 +502,32 @@ angular.module('copayApp.services').factory('walletService', function($log, $tim
     });
   };
 
+  root.getTx = function(wallet, txid, cb) {
+    var tx;
+
+    if (wallet.completeHistory && wallet.completeHistory.isValid) {
+      tx = lodash.find(wallet.completeHistory, {
+        txid: txid
+      });
+
+      finish();
+    } else {
+      root.getTxHistory(wallet, {}, function(err, txHistory) {
+        if (err) return cb(err);
+
+        tx = lodash.find(txHistory, {
+          txid: txid
+        });
+
+        finish();
+      });
+    }
+
+    function finish() {
+      if (tx) return cb(null, tx);
+      else return cb();
+    };
+  };
 
   root.getTxHistory = function(wallet, opts, cb) {
     opts = opts || {};