Fix spinner when sign/reject/remove/broadcast a transaction

public/views/includes/topbar.html

@@ -12,7 +12,7 @@
   <section class="right-small" ng-show="!goBackToState">
     <a ng-show="!closeToHome && index.isComplete" class="p10" 
       ng-click="topbar.openScanner()"><i class="fi-camera size-24"></i></a>
-    <a ng-show="closeToHome"
+    <a ng-show="closeToHome" class="p10"
       ng-click="topbar.goHome(); closeToHome = null">
       <span class="text-close">{{'Close'|translate}}</span>
     </a>

public/views/modals/copayers.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

public/views/modals/paypro.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

public/views/modals/scanner.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

public/views/modals/tx-details.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

public/views/modals/txp-details.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

public/views/walletHome.html

@@ -7,7 +7,8 @@
     <button class="button black expand" ng-click="$root.go('add')" translate>Create</button>
   </div>
 
-  <div class="onGoingProcess" ng-show="index.isOffline" style="background-color:#222">
+  <div class="onGoingProcess" ng-show="index.isOffline">
+    <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
     <div class="spinner">
       <div class="rect1"></div>
       <div class="rect2"></div>
@@ -16,9 +17,11 @@
       <div class="rect5"></div>
     </div>
     <span translate>Reconnecting to Wallet Service...</span>
+    </div>
   </div>
 
-  <div class="onGoingProcess" ng-show="index.anyOnGoingProcess && !index.isOffline" ng-style="{'background-color':index.backgroundColor}">
+  <div class="onGoingProcess" ng-show="index.anyOnGoingProcess && !index.isOffline">
+    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
     <div class="spinner">
       <div class="rect1"></div>
       <div class="rect2"></div>
@@ -27,15 +30,17 @@
       <div class="rect5"></div>
     </div>
     <span translate ng-show="
-index.onGoingProcessName == 'openingWallet'
+      index.onGoingProcessName == 'openingWallet'
-|| index.onGoingProcessName == 'updatingStatus'
+      || index.onGoingProcessName == 'updatingStatus'
-|| index.onGoingProcessName == 'updatingBalance'
+      || index.onGoingProcessName == 'updatingBalance'
-"> Updating Wallet... </span>
+      "> Updating Wallet... </span>
     <span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
     <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
+    </div>
   </div>
 
   <div class="onGoingProcess" ng-show="home.onGoingProcess && !index.anyOnGoingProcess">
+    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
     <div class="spinner">
       <div class="rect1"></div>
       <div class="rect2"></div>
@@ -44,6 +49,7 @@ index.onGoingProcessName == 'openingWallet'
       <div class="rect5"></div>
     </div>
     {{home.onGoingProcess|translate}}...
+    </div>
   </div>
 
   <div class="oh" ng-show="!index.noFocusedWallet">

src/css/main.css

@@ -1116,25 +1116,26 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 }
 
 .onGoingProcess {
+  left: 0;
+  width: 100%;
+  bottom: 90px;
+  position: absolute;
+  z-index: 1020;
+}
+
+.onGoingProcess-content {
   background: #213140;
   text-align: center;
   max-width: 16.5rem;
   max-height: 3.5rem;
-  top:auto;
-  left:0;
-  right:0;
-  bottom:170px;
   margin: auto;
-  border-radius: 3px;
   color: #fff;
   padding: 0.5rem;
   font-size: 13px;
-  position: absolute;
   opacity: 0.8;
-  z-index: 10;
+  border-radius: 3px;
 }
 
-
 /*/////////////////// SPINNER ////////////////////*/
 
 .spinner {

src/css/mobile.css

@@ -127,10 +127,10 @@ _:-ms-fullscreen, :root .main {
   margin-left: 26px;
   font-size: 1rem;
   font-weight: 400;
+  padding: 10px 0;
 }
 
 .tab-bar .text-close {
-  margin-right: 10px;
   font-size: 1rem;
   font-weight: 400;
 }
@@ -582,6 +582,10 @@ a.pin-button:active {
   transform: none !important;
 }
 
+.popup-tx-status {
+  z-index: 1030;
+}
+
 .popup-txsent {
   position: absolute;
   width: 100%;

src/js/controllers/walletHome.js

@@ -155,26 +155,26 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
           return;
         };
 
-        if (isCordova) {
+        self.setOngoingProcess('Signing transaction');
-          window.plugins.spinnerDialog.show(null, 'Signing transaction...', true);
-        }
         $scope.loading = true;
         $scope.error = null;
         $timeout(function() {
           fc.signTxProposal(txp, function(err, txpsi) {
             profileService.lockFC();
-            if (isCordova) {
+            self.setOngoingProcess();
-              window.plugins.spinnerDialog.hide();
-            }
-            $scope.loading = false;
             if (err) {
+              $scope.loading = false;
               $scope.error = err.message || 'Transaction not signed. Please try again.';
               $scope.$digest();
             } else {
               //if txp has required signatures then broadcast it
               var txpHasRequiredSignatures = txpsi.status == 'accepted';
               if (txpHasRequiredSignatures) {
+                self.setOngoingProcess('Broadcasting transaction');
+                $scope.loading = true;
                 fc.broadcastTxProposal(txpsi, function(err, txpsb) {
+                  self.setOngoingProcess();
+                  $scope.loading = false;
                   if (err) {
                     $scope.error = 'Transaction not broadcasted. Please try again.';
                     $scope.$digest();
@@ -183,6 +183,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
                   }
                 });
               } else {
+                $scope.loading = false;
                 $modalInstance.close(txpsi);
               }
             }
@@ -191,16 +192,12 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       };
 
       $scope.reject = function(txp) {
-        if (isCordova) {
+        self.setOngoingProcess('Rejecting transaction');
-          window.plugins.spinnerDialog.show(null, 'Rejecting transaction...', true);
-        }
         $scope.loading = true;
         $scope.error = null;
         $timeout(function() {
           fc.rejectTxProposal(txp, null, function(err, txpr) {
-            if (isCordova) {
+            self.setOngoingProcess();
-              window.plugins.spinnerDialog.hide();
-            }
             $scope.loading = false;
             if (err) {
               $scope.error = err.message || 'Transaction not rejected. Please try again.';
@@ -214,16 +211,12 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
 
       $scope.remove = function(txp) {
-        if (isCordova) {
+        self.setOngoingProcess('Deleting transaction');
-          window.plugins.spinnerDialog.show(null, 'Deleting transaction...', true);
-        }
         $scope.loading = true;
         $scope.error = null;
         $timeout(function() {
           fc.removeTxProposal(txp, function(err, txpb) {
-            if (isCordova) {
+            self.setOngoingProcess();
-              window.plugins.spinnerDialog.hide();
-            }
             $scope.loading = false;
 
             // Hacky: request tries to parse an empty response
@@ -238,16 +231,12 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       };
 
       $scope.broadcast = function(txp) {
-        if (isCordova) {
+        self.setOngoingProcess('Broadcasting transaction');
-          window.plugins.spinnerDialog.show(null, 'Sending transaction...', true);
-        }
         $scope.loading = true;
         $scope.error = null;
         $timeout(function() {
           fc.broadcastTxProposal(txp, function(err, txpb) {
-            if (isCordova) {
+            self.setOngoingProcess();
-              window.plugins.spinnerDialog.hide();
-            }
             $scope.loading = false;
             if (err) {
               $scope.error = err.message || 'Transaction not sent. Please try again.';
@@ -449,7 +438,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $timeout(function() {
         self.onGoingProcess = name;
         $rootScope.$apply();
-      })
+      });
     }
   };
 
@@ -471,7 +460,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       return;
     };
 
-    self.setOngoingProcess('Sending transaction');
+    self.setOngoingProcess('Creating transaction');
     $timeout(function() {
       var comment = form.comment.$modelValue;
       var paypro = self._paypro;
@@ -493,7 +482,6 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
         }
 
         self.signAndBroadcast(txp, function(err) {
-          self.setOngoingProcess();
           profileService.lockFC();
           if (err) {
             return self.setError(err);
@@ -512,7 +500,9 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       profileService.lockFC();
       self.setOngoingProcess();
 
-      if (err) return cb(err);
+      if (err) { 
+        return cb(err);
+      }
 
       if (signedTx.status == 'accepted') {
         self.setOngoingProcess('Broadcasting transaction');

src/js/services/txStatus.js

@@ -38,7 +38,7 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
     };
     $modal.open({
       templateUrl: 'views/modals/tx-status.html',
-      windowClass: 'full',
+      windowClass: 'full popup-tx-status',
       controller: ModalInstanceCtrl,
     });
   };