Merge pull request #222 from JDonadio/ref/wallets-view

Ref/wallets view

public/views/amount.html

@@ -2,11 +2,9 @@
 
   <ion-nav-bar class="bar-stable">
     <ion-nav-title>Enter Amount</ion-nav-title>
-
-
     <ion-nav-buttons side="primary">
-      <button class="button"   href ui-sref="tabs.send">
+      <button class="button no-border" ui-sref="tabs.send">
-        <i class="ion-arrow-left-c"></i> Back
+        <i class="icon ion-chevron-left"></i> Back
       </button>
     </ion-nav-buttons>
   </ion-nav-bar>
@@ -17,7 +15,7 @@
     <div class="list card">
 
       <div class="item item-divider">
-        Recipient 
+        Recipient
       </div>
 
       <div class="item item-text-wrap item-icon-left">

public/views/confirm.html

@@ -3,15 +3,13 @@
   <ion-pane>
     <ion-nav-bar class="bar-stable">
       <ion-nav-title>Confirm</ion-nav-title>
-
       <ion-nav-buttons side="primary">
-        <button class="button"   href ui-sref="tabs.send">
+        <button class="button no-border" ui-sref="tabs.send">
-          <i class="ion-arrow-left-c"></i> Back
+          <i class="icon ion-chevron-left"></i> Back
         </button>
       </ion-nav-buttons>
     </ion-nav-bar>
 
-
     <ion-content scroll="false" ng-controller="confirmController" ng-init="init()">
 
       <div class="card">
@@ -24,9 +22,9 @@
 
       <div class="list card">
         <div class="item">Fee: {{feeLevel}}
-            <span class="item-note">
+          <span class="item-note">
-              {{fee || '...'}}
+            {{fee || '...'}}
-            </span>
+          </span>
         </div>
 
         <div class="item item-icon-left">
@@ -42,30 +40,12 @@
         </div>
 
         <div class="item item-icon-left">
-          <i class="icon icon-wallet size-21" ng-style="{'color':recipientColor}"></i>
+          <i class="icon ion-briefcase size-21"></i>
           <label translate>From</label>
-          <p ng-show="network=='testnet'">[Only showing testnet wallets]</p>
+          <span class="badge badge-assertive" ng-show="notAvailable" translate>Not available</span>
-          <p ng-show="someFiltered">[Filtering wallets with no enought balance]</p>
-        </div>
-
-        <div class="item item-text-wrap" ng-style="{'height' : '200px'}">
-          <ion-slides class="slides" options="options" slider="data.slider">
-            <ion-slide-page ng-repeat="item in wallets track by $index" >
-              <div class="list card">
-                <ul class="pr">
-                  <li ng-show="wallets[0]" class="item item-icon-left">
-                      <i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
-                      {{item.name || item.id}}
-                      <span class="item-note"  ng-show="item.isComplete()">
-                        {{item.availableBalanceStr}}
-                      </span>
-                  </li>
-                </ul>
-              </div>
-            </ion-slide-page>
-          </ion-slides>
         </div>
 
+        <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
 
         <div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
           <span ng-show="!description">Add Description</span>
@@ -75,11 +55,9 @@
         </div>
       </div>
 
-      <div class="card">
+      <button class="item button button-block button-balanced" ng-click="approve()" ng-disabled="!txp">
-        <button class="item button button-full button-balanced" ng-click="approve()" ng-disabled="!txp" ng-show="wallet.canSign()"> Approve </button>
+        <span ng-show="wallet.canSign()" translate>Approve</span>
-        <button class="item button button-full button-balanced" ng-click="approve()" ng-disabled="!txp"  ng-show="!wallet.canSign()"> Send </button>
+        <span ng-show="!wallet.canSign()" translate>Send</span>
-      </div>
+      </button>
-      </div>
     </ion-content>
-
 </ion-view>

public/views/includes/note.html

@@ -1,11 +1,11 @@
 <div class="padding">
-  <input type="text" ng-model="data.comment" autofocus>
+  <input type="text" ng-model="comment" autofocus>
 </div>
 <div class="row">
   <div class="col">
-    <button class="button button-dark button-block" ng-click="commentPopupClose()" translate>Cancel</button>
+    <button class="button button-dark button-block" ng-click="commentPopupClose(comment)" translate>Cancel</button>
   </div>
   <div class="col">
-    <button class="button button-dark button-block" ng-click="commentPopupSave()" translate>Save</button>
+    <button class="button button-dark button-block" ng-click="commentPopupSave(comment)" translate>Save</button>
   </div>
 </div>

public/views/includes/wallets.html

@@ -0,0 +1,16 @@
+<div class="wallets" ng-show="wallets[0]">
+  <ion-slides class="slides" slider="data.slider">
+    <ion-slide-page ng-repeat="wallet in wallets track by $index">
+      <div class="item item-icon-left">
+        <i class="icon ion-briefcase size-21" ng-style="{'color':wallet.color}"></i>
+          {{wallet.name || wallet.id}}
+        <span class="item-note" ng-show="wallet.n > 1 && wallet.isComplete()">
+          {{wallet.m}}-of-{{wallet.n}}
+        </span>
+        <span class="badge badge-assertive" ng-show="!wallet.isComplete()" translate>
+          Incomplete
+        </span>
+      </div>
+    </ion-slide-page>
+  </ion-slides>
+</div>

public/views/tab-receive.html

@@ -3,48 +3,33 @@
     <ion-nav-title>Receive</ion-nav-title>
   </ion-nav-bar>
 
-
+  <ion-content ng-controller="tabReceiveController" ng-init="init()">
-  <ion-content ng-controller="tabReceiveController" ng-init="init()"  >
+    <div class="text-center m30v" copy-to-clipboard="addr" ng-show="addr">
-
-    <div class="text-center m30v" copy-to-clipboard="addr" ng-show="addr" >
       <qrcode size="220" data="bitcoin:{{addr}}" ng-show="addr"></qrcode>
     </div>
 
+    <div class="padding assertive" ng-show="error">
+      {{error|translate}}
+    </div>
+
     <div ng-show="generatingAddress" class="m30v">
       <div style="height:220px; width:220px; margin:auto; background: #eee; text-align:center">
-        <ion-spinner class="spinner-stable" icon="lines" style="stroke:black; margin-top: 85px"></ion-spinner>
+        <div class="padding-top">
+          <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
+        </div>
       </div>
     </div>
 
-    <div ng-show="incomplete">
+    <div class="list card padding text-center" ng-if="!wallets[0]">
-      <div  style="height:220px; width:220px; margin: 30px auto; background: #eee; text-align:center">
+      <span translate>No Wallet</span>
-incomplete wallet
-      </div>
-
-      <div class="item item-icon-left" ng-click="shareAddress(addr)" ng-show="isCordova && addr" ng-disabled="generatingAddress">
-        <i class="icon ion-ios-upload-outline"></i>
-      </div>
-      <div class="item item-icon-left" ng-click="setAddress(true)" ng-show="!generatingAddress">
-        <i class="icon ion-ios-loop"></i>
-      </div>
-      <div class="item item-icon-left">
-        <i class="icon ion-social-bitcoin-outline"></i>
-      </div>
     </div>
 
-    <div ng-show="addrError">
+    <div class="list" ng-if="wallets[0]">
-      <div  style="height:220px; width:220px; margin: 30px auto; background: #eee; text-align:center">
-Error: {{addrError}}
-      </div>
-    </div>
-
-
-    <div ng-show="!incomplete">
       <div class="item item-icon-left" ng-click="shareAddress(addr)" ng-show="isCordova && addr" ng-disabled="generatingAddress">
         <i class="icon ion-ios-upload-outline"></i>
         <span translate>Share address</span>
       </div>
-      <div class="item item-icon-left" ng-click="setAddress(true)" ng-disabled="">
+      <div class="item item-icon-left" ng-click="setAddress(null, true)" ng-disabled="">
         <i class="icon ion-ios-loop"></i>
         <span translate>Next Address</span>
       </div>
@@ -53,27 +38,8 @@ Error: {{addrError}}
         <span ng-show="generatingAddress">...</span>
         <span ng-show="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
       </div>
-    </div>
-    <div class="item item-text-wrap" ng-style="{'height' : '200px'}">
-      <ion-slides class="slides" options="options" slider="data.slider">
-        <ion-slide-page ng-repeat="item in wallets track by $index" >
-          <div class="list card">
-            <ul class="pr">
-              <li ng-show="wallets[0]" class="item item-icon-left">
-                  <i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
-                  {{item.name || item.id}}
-                  <span class="item-note" ng-show="item.n > 1 && item.isComplete()">
-                    {{item.m}}-of-{{item.n}}
-                  </span>
-                  <span class="badge badge-assertive" ng-show="!item.isComplete()" translate>
-                    Incomplete
-                  </span>
 
-              </li>
+      <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
-            </ul>
-          </div>
-        </ion-slide-page>
-      </ion-slides>
     </div>
   </ion-content>
 </ion-view>

public/views/tab-send.html

@@ -26,7 +26,11 @@
       </div>
     </div>
 
-    <div class="list card">
+    <div class="list card padding text-center" ng-if="!list[0]">
+      <span translate>No Wallet - Contact</span>
+    </div>
+
+    <div class="list card" ng-if="list[0]">
       <a class="item item-icon-left" ng-repeat="item in list" ng-click="goToAmount(item)">
         <i ng-show="item.isWallet" class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
         <i ng-show="!item.isWallet" class="icon ion-ios-person-outline"></i>

src/js/controllers/confirm.js

@@ -28,12 +28,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.commentPopupClose = function() {
       commentPopup.close();
     };
-    $scope.commentPopupSave = function() {
+    $scope.commentPopupSave = function(description) {
-      $log.debug('Saving description: ' + $scope.data.comment);
+      $log.debug('Saving description: ' + description);
-      $scope.description = $scope.data.comment;
+      $scope.description = description;
       $scope.txp = null;
 
+      ongoingProcess.set('creatingTx', true);
       createTx($scope.wallet, function(err, txp) {
+        ongoingProcess.set('creatingTx', false);
         if (err) return;
         cachedTxp[$scope.wallet.id] = txp;
         apply(txp);
@@ -42,7 +44,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     };
   };
 
-
   var setFromPayPro = function(uri, cb) {
     if (!cb) cb = function() {};
 
@@ -92,23 +93,12 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
-
-
   $scope.init = function() {
-
+    // TODO (URL , etc)
-    if ($stateParams.paypro) {
-      return setFromPayPro($stateParams.paypro, function(err) {
-        if (err && !isChromeApp) {
-          showAlert(gettext('Could not fetch payment'));
-        }
-      });
-    }
-
     if (!$stateParams.toAddress || !$stateParams.toAmount) {
       $log.error('Bad params at amount')
       throw ('bad params');
     }
-
     $scope.isCordova = platformInfo.isCordova;
 
     var config = configService.getSync().wallet;
@@ -122,64 +112,87 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.description = $stateParams.description;
     $scope.paypro = $stateParams.paypro;
 
-    var network = (new bitcore.Address($scope.toAddress)).network.name;
+    var networkName = (new bitcore.Address($scope.toAddress)).network.name;
-    $scope.network = network;
+    $scope.network = networkName;
 
-    function setWallets() {
+    $scope.notAvailable = false;
-      var w = profileService.getWallets({
+    var wallets = profileService.getWallets({
-        onlyComplete: true,
+      onlyComplete: true,
-        network: network,
+      network: networkName,
+    });
+
+    var filteredWallets = [];
+    var index = 0;
+
+    ongoingProcess.set('scanning', true);
+
+    lodash.each(wallets, function(w) {
+      walletService.getStatus(w, {}, function(err, status) {
+        if (err) $log.error(err);
+        if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
+        if (status.availableBalanceSat > amount) filteredWallets.push(w);
+
+        if (++index == wallets.length) {
+          ongoingProcess.set('scanning', false);
+
+          if (!lodash.isEmpty(filteredWallets)) {
+            $scope.wallets = lodash.clone(filteredWallets);
+            $scope.notAvailable = false;
+          } else {
+            $scope.notAvailable = true;
+            $log.warn('No wallet available to make the payment');
+          }
+
+          $timeout(function() {
+            $scope.$apply();
+          }, 10);
+          return;
+        }
       });
-      $scope.wallets = lodash.filter(w, function(x) {
+    });
-        if (!x.availableBalanceSat) return true;
-        return x.availableBalanceSat > amount;
-      });
-
-      $scope.someFiltered = $scope.wallets.length != w.length;
-
-    };
-
-    var stop;
-
-    function setWallet(wallet, delayed) {
-      $scope.wallet = wallet;
-      $scope.fee = $scope.txp = null;
-      $timeout(function() {
-        $scope.$apply();
-      }, 10);
-
-      if (stop) {
-        $timeout.cancel(stop);
-        stop = null;
-      }
-
-      if (cachedTxp[wallet.id]) {
-        apply(cachedTxp[wallet.id]);
-      } else {
-        stop = $timeout(function() {
-          createTx(wallet, function(err, txp) {
-            if (err) return;
-            cachedTxp[wallet.id] = txp;
-            apply(txp);
-          });
-        }, delayed ? 2000 : 1);
-      }
-    };
 
     txFormatService.formatAlternativeStr(amount, function(v) {
       $scope.alternativeAmountStr = v;
     });
+  };
 
-    $scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
+  $scope.$on('Wallet/Changed', function(event, wallet) {
-      setWallet($scope.wallets[data.slider.activeIndex], true);
+    if (lodash.isEmpty(wallet)) {
-    });
+      $log.debug('No wallet provided');
+      return;
+    }
+    $log.debug('Wallet changed: ' + wallet.name);
+    setWallet(wallet, true);
+  });
 
-    setWallets();
+  function setWallet(wallet, delayed) {
-    setWallet($scope.wallets[0]);
+    var stop;
+    $scope.wallet = wallet;
+    $scope.fee = $scope.txp = null;
 
     $timeout(function() {
       $ionicScrollDelegate.resize();
-    }, 100);
+      $scope.$apply();
+    }, 10);
+
+    if (stop) {
+      $timeout.cancel(stop);
+      stop = null;
+    }
+
+    if (cachedTxp[wallet.id]) {
+      apply(cachedTxp[wallet.id]);
+    } else {
+      ongoingProcess.set('creatingTx', true);
+      stop = $timeout(function() {
+        createTx(wallet, function(err, txp) {
+          ongoingProcess.set('creatingTx', false);
+          if (err) return;
+          cachedTxp[wallet.id] = txp;
+          apply(txp);
+        });
+      }, delayed ? 2000 : 1);
+    }
   };
 
   var setSendError = function(msg) {
@@ -244,7 +257,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
-
   $scope.openPPModal = function() {
     $ionicModal.fromTemplateUrl('views/modals/paypro.html', {
       scope: $scope
@@ -254,8 +266,6 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
-
-
   $scope.approve = function() {
     var wallet = $scope.wallet;
     var txp = $scope.txp;
@@ -287,7 +297,4 @@ angular.module('copayApp.controllers').controller('confirmController', function(
   $scope.cancel = function() {
     $state.transitionTo('tabs.send');
   };
-
-
-
 });

src/js/controllers/tab-receive.js

@@ -1,65 +1,54 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('tabReceiveController', function($scope, $ionicPopover, $timeout, platformInfo, nodeWebkit, walletService, profileService, configService, lodash, gettextCatalog) {
+angular.module('copayApp.controllers').controller('tabReceiveController', function($scope, $timeout, $log, platformInfo, walletService, profileService, configService, lodash, gettextCatalog) {
 
   $scope.isCordova = platformInfo.isCordova;
 
   $scope.init = function() {
-    $scope.index = 0;
+    $scope.wallets = profileService.getWallets({
+      onlyComplete: true
+    });
     $scope.isCordova = platformInfo.isCordova;
     $scope.isNW = platformInfo.isNW;
-    $scope.setWallets();
-    $scope.setAddress(false);
-    $scope.options = {
-      loop: false,
-      effect: 'flip',
-      speed: 500,
-      spaceBetween: 100
-    }
-
-    $scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
-      // data.slider is the instance of Swiper
-      $scope.slider = data.slider;
-    });
-
-    $scope.$on("$ionicSlides.slideChangeStart", function(event, data) {
-      console.log('Slide change is beginning');
-    });
-
-    $scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
-      $scope.index = data.slider.activeIndex;
-      $scope.setAddress();
-    });
   }
 
+  $scope.$on('Wallet/Changed', function(event, wallet) {
+    if (lodash.isEmpty(wallet)) {
+      $log.debug('No wallet provided');
+      return;
+    }
+    $scope.defaultWallet = wallet;
+    $log.debug('Wallet changed: ' + wallet.name);
+    $scope.setAddress(wallet);
+  });
+
   $scope.shareAddress = function(addr) {
     if ($scope.isCordova) {
       window.plugins.socialsharing.share('bitcoin:' + addr, null, null, null);
     }
   };
 
-  $scope.setAddress = function(forceNew) {
+  $scope.setAddress = function(wallet, forceNew) {
+    var wallet = wallet || $scope.defaultWallet;
     if ($scope.generatingAddress) return;
 
     $scope.addr = null;
-    $scope.addrError = null;
+    $scope.error = null;
 
-    var wallet = $scope.wallets[$scope.index];
+    if (wallet && !wallet.isComplete()) {
-    if (!wallet.isComplete()) {
-      $scope.incomplete = true;
       $timeout(function() {
         $scope.$digest();
       });
       return;
     }
 
-    $scope.incomplete = false;
     $scope.generatingAddress = true;
+
     $timeout(function() {
-      walletService.getAddress($scope.wallets[$scope.index], forceNew, function(err, addr) {
+      walletService.getAddress(wallet, forceNew, function(err, addr) {
         $scope.generatingAddress = false;
         if (err) {
-          $scope.addrError = err;
+          $scope.error = err;
         } else {
           if (addr)
             $scope.addr = addr;
@@ -68,10 +57,4 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       });
     });
   };
-
-
-  $scope.setWallets = function() {
-    $scope.wallets = profileService.getWallets();
-  };
-
 });

src/js/directives/directives.js

@@ -142,4 +142,23 @@ angular.module('copayApp.directives')
         });
       }
     }
+  })
+  .directive('wallets', function($log, profileService, walletService, lodash) {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/wallets.html',
+      scope: {
+        wallets: '=wallets'
+      },
+      link: function(scope, element, attrs) {
+        scope.$on("$ionicSlides.sliderInitialized", function(event, data) {
+          scope.slider = data.slider;
+          scope.$emit('Wallet/Changed', scope.wallets ? scope.wallets[0] : null);
+        });
+
+        scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
+          scope.$emit('Wallet/Changed', scope.wallets ? scope.wallets[data.slider.activeIndex] : null);
+        });
+      }
+    }
   });

src/sass/main.scss

@@ -881,6 +881,9 @@ input[type=file] {
   width: inherit;
 }
 
+.wallets {
+  height: 105px;
+}
 /*
  * Calculator
  */