Merge pull request #4331 from JDonadio/backup-spinner

Add spinner - backup flow

public/views/backup.html

@@ -19,6 +19,13 @@
     </section>
   </nav>
 
+  <div class="onGoingProcess" ng-show="wordsC.loading">
+    <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
+      <ion-spinner class="spinner-stable" icon="lines"></ion-spinner>
+      <span translate>Validating recovery phrase...</span>
+    </div>
+  </div>
+
   <div class="box-notification" ng-show="wordsC.error">
     <span class="text-warning">
       {{wordsC.error|translate}}
@@ -63,7 +70,7 @@
       </div>
 
       <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
-        <p class="text-center columns text-gray"  ng-show="index.n==1 && wordsC.step == 1">
+        <p class="text-center columns text-gray" ng-show="index.n==1 && wordsC.step == 1">
           <span translate>
             You need the wallet recovery phrase to restore this personal wallet. Write it down and keep them somewhere safe.
           </span>

src/js/controllers/backup.js

@@ -5,6 +5,7 @@ angular.module('copayApp.controllers').controller('backupController',
 
     var self = this;
     var fc = profileService.focusedClient;
+    self.loading = false;
     self.customWords = [];
     self.walletName = fc.credentials.walletName;
 
@@ -44,14 +45,32 @@ angular.module('copayApp.controllers').controller('backupController',
     };
 
     self.goToStep = function(n) {
-      self.step = n;
+      if (n == 1)
-      if (self.step == 1)
         init();
-      if (self.step == 3 && !self.mnemonicHasPassphrase)
+      if (n == 2)
-        self.step++;
+        self.step = 2;
-      if (self.step == 4) {
+      if (n == 3) {
-        confirm();
+        if (!self.mnemonicHasPassphrase)
+          finalStep();
+        else
+          self.step = 3;
       }
+      if (n == 4)
+        finalStep();
+
+      function finalStep() {
+        self.loading = true;
+        confirm(function(err) {
+          self.loading = false;
+          if (err) {
+            backupError(err);
+          }
+          $timeout(function() {
+            self.step = 4;
+            return;
+          }, 1);
+        });
+      };
     };
 
     function initWords() {
@@ -125,6 +144,7 @@ angular.module('copayApp.controllers').controller('backupController',
     };
 
     $scope.removeButton = function(index, item) {
+      if (self.loading) return;
       self.customWords.splice(index, 1);
       self.shuffledMnemonicWords[item.prevIndex].selected = false;
       self.shouldContinue();
@@ -137,40 +157,44 @@ angular.module('copayApp.controllers').controller('backupController',
         self.selectComplete = false;
     };
 
-    function confirm() {
+    function confirm(cb) {
       self.backupError = false;
 
       var customWordList = lodash.pluck(self.customWords, 'word');
 
       if (!lodash.isEqual(self.mnemonicWords, customWordList)) {
-        return backupError('Mnemonic string mismatch')
+        return cb('Mnemonic string mismatch');
       }
 
-      if (self.mnemonicHasPassphrase) {
+      $timeout(function() {
-        var walletClient = bwcService.getClient();
+        if (self.mnemonicHasPassphrase) {
-        var separator = self.useIdeograms ? '\u3000' : ' ';
+          var walletClient = bwcService.getClient();
-        var customSentence = customWordList.join(separator);
+          var separator = self.useIdeograms ? '\u3000' : ' ';
-        var passphrase = $scope.passphrase || '';
+          var customSentence = customWordList.join(separator);
+          var passphrase = $scope.passphrase || '';
 
-        try {
+          try {
-          walletClient.seedFromMnemonic(customSentence, {
+            walletClient.seedFromMnemonic(customSentence, {
-            network: fc.credentials.network,
+              network: fc.credentials.network,
-            passphrase: passphrase,
+              passphrase: passphrase,
-            account: fc.credentials.account
+              account: fc.credentials.account
-          })
+            });
-        } catch (err) {
+          } catch (err) {
-          return backupError(err);
+            return cb(err);
+          }
+
+          if (walletClient.credentials.xPrivKey != self.xPrivKey) {
+            return cb('Private key mismatch');
+          }
         }
 
-        if (walletClient.credentials.xPrivKey != self.xPrivKey) {
+        $rootScope.$emit('Local/BackupDone');
-          return backupError('Private key mismatch');
+        return cb();
-        }
+      }, 1);
-      }
-
-      $rootScope.$emit('Local/BackupDone');
     };
 
     function backupError(err) {
+      self.loading = false;
       $log.debug('Failed to verify backup: ', err);
       self.backupError = true;