Merge branch 'ref/design' of github.com:matiu/copay into ref/design

public/views/bitpayCard.html

@@ -1,32 +1,21 @@
-<div ng-controller="bitpayCardController as bitpayCard">
-  <div class="topbar-container">
-    <nav ng-controller="topbarController as topbar" ng-style="{'background-color': '#293C92'}" class="tab-bar">
-      <section ng-show="!addFunds" class="left-small">
-        <a class="p10"
-           ng-click="topbar.goHome()">
-          <span class="text-close">Close</span>
-        </a>
-      </section>
+<ion-view>
+  <ion-nav-bar class="bar-stable">
+    <ion-nav-buttons side="primary">
+      <button class="button no-border" ui-sref="tabs.home">
+        Close
+      </button>
+    </ion-nav-buttons>
+    <ion-nav-title>BitPay Card</ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="button no-border" ui-sref="bitpayCard.preferences">
+        <i class="icon ion-gear-b"></i>
+      </button>
+    </ion-nav-buttons>
+  </ion-nav-bar>
 
-      <section class="right-small" ng-show="bitpayCard.bitpayCardAuthenticated && !addFunds">
-        <a class="p10" href ui-sref="preferencesBitpayCard">
-          <i class="fi-widget size-24"></i>
-        </a>
-      </section>
+  <ion-content ng-controller="bitpayCardController as bitpayCard" ng-init="bitpayCard.init()">
 
-      <section class="middle tab-bar-section">
-        <h1 class="title ellipsis">
-          <span ng-show="!addFunds">BitPay Card</span>
-          <span ng-show="addFunds">Add Funds</span>
-        </h1>
-      </section>
-    </nav>
-  </div>
-
-  <div class="content bitpay_card p20b" ng-init="bitpayCard.init()">
-
-    <div class="box-notification text-center size-12 text-warning" ng-show="bitpayCard.sandbox">
-      <i class="fi-info"></i>
+    <div class="text-center size-12" ng-show="bitpayCard.sandbox">
       Sandbox version. Only for testing purpose
     </div>
 
@@ -34,16 +23,15 @@
       Loading...
     </div>
 
-    <div class="row" ng-show="!bitpayCard.bitpayCardAuthenticated && !bitpayCard.loadingSession">
-      <div class="columns large-centered large-6 medium-centered medium-6 small-centered small-10">
-        <div class="text-center m20v">
+    <div ng-show="!bitpayCard.bitpayCardAuthenticated && !bitpayCard.loadingSession">
+        <div class="text-center">
           <img src="img/bitpay-card-visa.svg" width="200">
         </div>
-        <h2 class="m20b text-center">
+        <h4 class="text-center">
           <span ng-show="!bitpayCard.bitpayCardTwoFactorPending">Login to your account</span>
           <span ng-show="bitpayCard.bitpayCardTwoFactorPending">2-Step Verification</span>
-        </h2>
-        <div class="m10b box-notification size-12 text-warning"
+        </h4>
+        <div class="m10b size-12"
              ng-show="bitpayCard.error"
              ng-click="bitpayCard.error = null">
           {{bitpayCard.error}}
@@ -55,37 +43,30 @@
              ng-submit="bitpayCard.authenticate()"
              novalidate>
 
-          <label>
-            Email
-            <div class="input">
-              <input
-                 name="email"
-                 type="email"
-                 ng-model="email"
-                 ng-disabled="bitpayCard.authenticating"
-                 required>
-            </div>
-          </label>
+          <div class="list">
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Email</span>
+              <input name="email"
+                     type="email"
+                     ng-model="email"
+                     ng-disabled="bitpayCard.authenticating"
+                     required>
+            </label>
 
-          <label>
-            Password
-            <div class="input">
-              <input
-                 name="password"
-                 type="password"
-                 ng-model="password"
-                 ng-disabled="bitpayCard.authenticating"
-                 required>
-            </div>
-          </label>
-
-          <div class="input text-center">
-            <input class="button black round tiny"
-                   ng-style="{'background-color': '#293C92'}"
-                   type="submit"
-                   ng-disabled="!authenticateForm.$valid || bitpayCard.authenticating"
-                   value="Login">
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Password</span>
+              <input name="password"
+                     type="password"
+                     ng-model="password"
+                     ng-disabled="bitpayCard.authenticating"
+                     required>
+            </label>
           </div>
+
+          <input class="button button-block button-positive"
+                 type="submit"
+                 ng-disabled="!authenticateForm.$valid || bitpayCard.authenticating"
+                 value="Login">
         </form>
 
         <p ng-show="bitpayCard.bitpayCardTwoFactorPending" class="size-12 text-center text-gray">
@@ -98,27 +79,22 @@
              ng-submit="bitpayCard.authenticate2FA()"
              novalidate>
 
-          <label>
-            Verification Code
-            <div class="input">
-              <input
-                 name="twoFactorCode"
-                 type="text"
-                 ng-model="twoFactorCode"
-                 ng-disabled="bitpayCard.authenticating"
-                 required>
-            </div>
-          </label>
-
-          <div class="input text-center">
-            <input class="button black round tiny"
-                   ng-style="{'background-color': '#293C92'}"
-                   type="submit"
-                   ng-disabled="!authenticate2FAForm.$valid || bitpayCard.authenticating"
-                   value="Login">
+          <div class="list">
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Verification Code</span>
+              <input name="twoFactorCode"
+                     type="text"
+                     ng-model="twoFactorCode"
+                     ng-disabled="bitpayCard.authenticating"
+                     required>
+            </label>
           </div>
+
+          <input class="button button-block button-positive"
+                 type="submit"
+                 ng-disabled="!authenticate2FAForm.$valid || bitpayCard.authenticating"
+                 value="Login">
         </form>
-      </div>
     </div>
 
     <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && !addFunds">
@@ -134,7 +110,7 @@
         </div>
         <div class="camera-icon" ng-show="bitpayCard.bitpayCardCurrentBalance">
           <a ng-click="addFunds = true">
-            <i class="fi-plus size-21"></i>
+            <i class="icon ion-plus size-21"></i>
           </a>
         </div>
       </div>
@@ -158,19 +134,19 @@
       </div>
 
       <div ng-show="loadingHistory" class="oh pr m20t text-gray text-center">
-        <img style="height:2em" class="animated flash infinite" src="img/icon-sync.svg">
+        <i class="icon ion-android-sync"></i>
       </div>
 
       <div
         ng-show="!loadingHistory"
         ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
-        class="row collapse last-transactions-content"
+        class="row"
         ng-init="bitpayCard.getMerchantInfo(tx)">
-        <div class="large-1 medium-1 small-1 columns" ng-init="icon = bitpayCard.getIconName(tx)">
+        <div class="col" ng-init="icon = bitpayCard.getIconName(tx)">
           <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
         </div>
 
-        <div class="large-4 medium-4 small-4 columns">
+        <div class="col">
           <div class="size-12 text-bold">
             {{tx.merchant.name}}
           </div>
@@ -180,14 +156,14 @@
         </div>
         <div
           ng-init="desc = bitpayCard.processDescription(tx)"
-          class="large-3 medium-3 small-3 show-for-medium-up columns size-12 text-gray text-right">
+          class="col">
           {{desc}}
         </div>
-        <div class="large-1 medium-1 small-1 columns text-right">
+        <div class="col">
           <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
           <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
         </div>
-        <div class="large-3 medium-3 small-3 columns text-right size-12 text-gray">
+        <div class="col text-right size-12 text-gray">
           <div class="size-14"
                ng-class="{
                'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
@@ -199,8 +175,7 @@
       </div>
     </div>
 
-    <div class="row m20t" ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && addFunds">
-      <div class="columns">
+    <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && addFunds">
         <div class="m10b box-notification size-12 text-warning"
              ng-show="bitpayCard.error"
              ng-click="bitpayCard.error = null">
@@ -211,41 +186,38 @@
            ng-submit="bitpayCard.sendFunds()"
            novalidate>
 
-          <label>
-            Amount
-            <div class="input">
+          <div class="list">
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Amount</span>
               <input
-                 type="number"
-                 id="fiat"
-                 name="fiat"
-                 ng-attr-placeholder="{{'Amount in USD'}}"
-                 min="0.01"
-                 max="2000"
-                 ng-model="fiat"
-                 autocomplete="off"
-                 required>
-
+                    type="number"
+                    id="fiat"
+                    name="fiat"
+                    ng-attr-placeholder="{{'Amount in USD'}}"
+                    min="0.01"
+                    max="2000"
+                    ng-model="fiat"
+                    autocomplete="off"
+                    required>
               <a class="postfix button black">USD</a>
-            </div>
-          </label>
+            </label>
 
-          <label>
-            Add From Copay Wallet
-          </label>
-          <div class="input">
-            <input
-               type="text"
-               id="address"
-               name="address"
-               ng-disabled="bitpayCard.selectedWalletId"
-               ng-attr-placeholder="{{'Choose your source wallet'}}"
-               ng-model="bitpayCard.selectedWalletName" required>
-            <a
-              class="postfix size-12 m0 text-gray"
-              ng-style="{'color': '#293C92'}"
-              ng-click="openWalletsModal(bitpayCard.allWallets)">
-              <i class="icon-wallet size-18"></i>
-            </a>
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Add From Copay Wallet</span>
+              <input
+                    type="text"
+                    id="address"
+                    name="address"
+                    ng-disabled="bitpayCard.selectedWalletId"
+                    ng-attr-placeholder="{{'Choose your source wallet'}}"
+                    ng-model="bitpayCard.selectedWalletName" required>
+              <a
+                    class="postfix size-12 m0 text-gray"
+                    ng-style="{'color': '#293C92'}"
+                    on-tap="openWalletsModal(bitpayCard.allWallets)">
+                <i class="icon-wallet size-18"></i>
+              </a>
+            </label>
           </div>
 
           <p class="size-12 text-warning" ng-show="bitpayCard.isMultisigWallet">
@@ -253,22 +225,24 @@
             Activity when the payment is fully signed.
           </p>
 
-          <div class="input row">
-            <div class="columns large-6 medium-6 small-6">
-            <input class="button outline dark-gray round expand"
-                   type="button" value="Cancel" ng-click="addFunds = false; bitpayCard.error = null">
+          <div class="row">
+            <div class="col">
+              <button class="button button-block button-stable"
+                      type="button"
+                      ng-click="addFunds = false; bitpayCard.error = null">
+                Cancel
+              </button>
             </div>
-            <div class="columns large-6 medium-6 small-6">
-            <input class="button black round expand"
-                   ng-style="{'background-color': '#293C92'}"
-                   ng-disabled="!bitpayCard.selectedWalletId || !fiat"
-                   type="submit" value="Send">
+            <div class="col">
+              <button class="button button-block button-positive"
+                      ng-disabled="!bitpayCard.selectedWalletId || !fiat"
+                      type="submit">
+                Send
+              </button>
             </div>
           </div>
         </form>
-      </div>
     </div>
+  </ion-content>
+</ion-view>
 
-    <div class="extra-margin-bottom"></div>
-  </div>
-</div>

public/views/buyAmazon.html

@@ -49,7 +49,7 @@
                    min="0.01"
                    max="500"
                    ng-model="fiat"
-                   autocomplete="off" required>
+                   autocomplete="off" ignore-mouse-wheel required>
 
             <a class="postfix button black">USD</a>
           </label>

public/views/buyAndSell.html

@@ -2,7 +2,7 @@
   <ion-nav-bar class="bar-stable">
     <ion-nav-buttons side="primary">
       <button class="button no-border" ui-sref="tabs.home">
-        Back
+        Close
       </button>
     </ion-nav-buttons>
     <ion-nav-title translate>Buy and sell</ion-nav-title>
@@ -10,11 +10,11 @@
   <ion-content>
     <ion-list>
       <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" ui-sref="glidera">
-        <img src="img/glidera-logo.png" width="150">
+        <img src="img/glidera-logo.png" width="100">
         <i class="icon ion-chevron-right icon-accessory"></i>
       </ion-item>
       <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" ui-sref="coinbase">
-        <img src="img/coinbase-logo.png" width="150">
+        <img src="img/coinbase-logo.png" width="100">
         <i class="icon ion-chevron-right icon-accessory"></i>
       </ion-item>
 

public/views/includes/menu-toggle.html

@@ -1,5 +0,0 @@
-<div class="medium-2 small-2 columns text-center bottombar-item">
-    <a ng-click="showPlugins ? showPlugins = false : showPlugins = true" class="menu-toggle">
-        <i class="size-24 db" ng-class="{ 'icon-arrow-left': showPlugins, 'icon-arrow-right' : !showPlugins }"> </i>
-    </a>
-</div>

public/views/modals/bitpay-card-confirmation.html

@@ -1,18 +1,20 @@
-<ion-modal-view ng-controller="bitpayCardConfirmationController">
-  <div class="m20tp text-center">
-    <div class="row">
-    <h1 class="text-center m20b p20h">Are you sure you would like to log out of your Bitpay Card account?</h1>
-    <p class="text-gray p20h">You will need to log back for fill in your Bitpay Card.</p>
-    <div class="large-6 medium-6 small-6 columns">
-      <button class="button light-gray expand outline round" ng-click="cancel()">
-        <i class="fi-arrow-left"></i> <span class="tu">Back</span>
-      </button>
+<ion-modal-view>
+  <ion-content ng-controller="bitpayCardConfirmationController">
+    <div class="text-center">
+      <h1 class="text-center m20b p20h">Are you sure you would like to log out of your Bitpay Card account?</h1>
+      <p class="text-gray p20h">You will need to log back for fill in your Bitpay Card.</p>
+      <div class="row">
+        <div class="col">
+          <button class="button button-block button-stable" ng-click="cancel()">
+            Cancel
+          </button>
+        </div>
+        <div class="col">
+          <button class="button button-block button-assertive" ng-click="ok()">
+            <span>Log out</span>
+          </button>
+        </div>
+      </div>
     </div>
-    <div class="large-6 medium-6 small-6 columns">
-      <button class="button warning expand round" ng-click="ok()">
-        <span>Log out</span>
-      </button>
-    </div>
-    </div>
-  </div>
+  </ion-content>
 </ion-modal-view>

public/views/preferencesBitpayCard.html

@@ -1,19 +1,19 @@
-<div
-  class="topbar-container"
-  ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Preferences'; goBackToState = 'bitpayCard'; noColor = true">
-</div>
+<ion-view>
+  <ion-nav-bar class="bar-stable">
+    <ion-nav-buttons side="primary">
+      <button class="button no-border" ui-sref="bitpayCard.main">
+        <i class="icon ion-chevron-left"></i> Back
+      </button>
+    </ion-nav-buttons>
+    <ion-nav-title>Preferences</ion-nav-title>
+  </ion-nav-bar>
 
-<div class="content preferences" ng-controller="preferencesBitpayCardController as bitpay">
+  <ion-content ng-controller="preferencesBitpayCardController as bitpay">
+    <ul class="list">
+      <li class="item assertive" ng-click="bitpay.logout()">
+        Log out
+      </li>
+    </ul>
+  </ion-content>
+</ion-view>
 
-  <ul class="no-bullet m0">
-    <h4></h4>
-    <li ng-click="bitpay.logout()">
-      <i class="icon-arrow-right3 size-24 right text-gray"></i>
-      <span class="text-warning">Log out</span>
-    </li>
-  </ul>
-  <h4></h4>
-
-</div>
-<div class="extra-margin-bottom"></div>

public/views/tab-home.html

@@ -3,7 +3,7 @@
   <ion-nav-bar class="bar-stable">
     <ion-nav-title>Home</ion-nav-title>
   </ion-nav-bar>
-  <ion-content class="padding home" ng-controller="tabHomeController" cache-view="false" ng-init="init()">
+  <ion-content class="padding" ng-controller="tabHomeController">
 
     <div ng-if="txps[0]">
       <h3 class="title m0" translate>Payment Proposals</h3>
@@ -56,12 +56,10 @@
       </div>
     </div>
 
-    <div class="list card">
-      <ul class="pr">
-
-        <li ng-show="wallets[0]"
-          ng-repeat="item in wallets track by $index" class="item item-icon-left"
-          menu-toggle href ui-sref="wallet.details({'walletId': item.id})">
+    <div class="card" ng-show="wallets[0]">
+      <div ng-repeat="item in wallets track by $index"
+           class="item item-icon-left"
+           ui-sref="wallet.details({'walletId': item.id})">
             <i class="icon ion-briefcase size-21" ng-style="{'color':item.color}"></i>
             {{item.name || item.id}}
             <span  ng-show="item.n > 1" class="text-gray">
@@ -74,27 +72,23 @@
             <span class="item-note"  ng-show="item.isComplete()">
               {{item.status.availableBalanceStr}}
             </span>
-        </li>
-      </ul>
+        </div>
     </div>
 
     <h3>Next steps </h3>
     <div class="list card">
       <ul class="pr">
-      <li menu-toggle href ui-sref="bitpayCard" ng-show="bitpayCardEnabled" class="item item-icon-left">
+      <li ui-sref="bitpayCard.main" ng-show="bitpayCardEnabled" class="item item-icon-left">
         <i class="icon ion-card"></i>
           BitPay Card
       </li>
-      <li ng-show="buyAndSellEnabled" menu-toggle href ui-sref="buyandsell"  class="item item-icon-left">
+      <li ng-show="buyAndSellEnabled" ui-sref="buyandsell"  class="item item-icon-left">
         <i class="icon ion-cash"></i>
             Buy and Sell
       </li>
-      <li menu-toggle href ui-sref="amazon.main" class="item item-icon-left">
+      <li ui-sref="amazon.main" class="item item-icon-left">
         <i class="icon ion-ios-cart"></i>
         Gift Cards
-        <span class="item-note">
-          bla bla
-        </span>
       </li>
       </ul>
     </div>

src/js/controllers/bitpayCard.js

@@ -5,8 +5,7 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
   var self = this;
   var client;
 
-  var network = 'livenet';
-  self.sandbox = network == 'testnet' ? true : false;
+  self.sandbox = bitpayCardService.getEnvironment() == 'testnet' ? true : false;
 
   if (platformInfo.isCordova && StatusBar.isVisible) {
     StatusBar.backgroundColorByHexString("#293C92");
@@ -71,7 +70,6 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
   this.update = function() {
     var dateRange = setDateRange($scope.dateRange);
     self.loadingSession = true;
-    bitpayCardService.setCredentials(network);
     bitpayCardService.isAuthenticated(function(err, bpSession) {
       self.loadingSession = false;
       if (err) {
@@ -110,14 +108,16 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
     $scope.dateRange = 'last30Days';
     self.update();
 
-    self.allWallets = profileService.getWallets(network);
-    client = profileService.focusedClient;
-
-    if (!client) return;
+    var network = bitpayCardService.getEnvironment();
+    self.allWallets = profileService.getWallets({
+      network: network,
+      n: 1,
+      onlyComplete: true
+    });
 
     if (lodash.isEmpty(self.allWallets)) return;
 
-    if (client.credentials.network != network) return;
+    client = self.allWallets[0];
 
     if (client.credentials.n > 1)
       self.isMultisigWallet = true;

src/js/controllers/modals/bitpayCardConfirmation.js

@@ -1,10 +1,10 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('bitpayCardConfirmationController', function($scope, $timeout, go, bitpayCardService) {
+angular.module('copayApp.controllers').controller('bitpayCardConfirmationController', function($scope, $timeout, $state, bitpayCardService) {
 
   $scope.ok = function() {
     bitpayCardService.logout(function() {
-      go.path('bitpayCard');
+      $state.go('bitpayCard.main');
     });
     $scope.cancel();
   };

src/js/controllers/tab-home.js

@@ -4,7 +4,9 @@ angular.module('copayApp.controllers').controller('tabHomeController',
   function($rootScope, $timeout, $scope, $state, lodash, profileService, walletService, configService, txFormatService, $ionicModal, $log, platformInfo) {
     var self = this;
 
-    self.glideraEnabled = configService.getSync().glidera.enabled;
+    self.setWallets = function() {
+      $scope.wallets = profileService.getWallets();
+    };
 
 
     var setPendingTxps = function(txps) {
@@ -144,14 +146,13 @@ angular.module('copayApp.controllers').controller('tabHomeController',
       });
     });
 
-    var config = configService.getSync().wallet;
-
     var GLIDERA_LOCK_TIME = 6 * 60 * 60;
 
     var glideraActive = true; // TODO TODO TODO
     // isGlidera flag is a security measure so glidera status is not
     // only determined by the tx.message
     $scope.openTxpModal = function(tx) {
+      var config = configService.getSync().wallet;
       var scope = $rootScope.$new(true);
       scope.tx = tx;
       scope.wallet = tx.wallet;
@@ -167,12 +168,12 @@ angular.module('copayApp.controllers').controller('tabHomeController',
       });
     };
 
-    $scope.init = function() {
+    configService.whenAvailable(function() {
       var config = configService.getSync();
-      var isWindowsPhoneApp = platformInfo.isWP && isCordova;
       var glideraEnabled = config.glidera.enabled;
       var coinbaseEnabled = config.coinbase.enabled;
+      var isWindowsPhoneApp = platformInfo.isWP && isCordova;
       $scope.buyAndSellEnabled = !isWindowsPhoneApp && (glideraEnabled || coinbaseEnabled);
-    }
+    });
 
   });

src/js/controllers/tab-send.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('tabSendController', function($scope, $ionicModal, $log, $timeout, addressbookService, profileService, configService, lodash, $state, walletService) {
+angular.module('copayApp.controllers').controller('tabSendController', function($scope, $ionicModal, $log, $timeout, addressbookService, profileService, lodash, $state, walletService) {
 
   var originalList;
 

src/js/directives/directives.js

@@ -1,22 +1,6 @@
 'use strict';
-
-function selectText(element) {
-  var doc = document;
-  if (doc.body.createTextRange) { // ms
-    var range = doc.body.createTextRange();
-    range.moveToElementText(element);
-    range.select();
-  } else if (window.getSelection) {
-    var selection = window.getSelection();
-    var range = doc.createRange();
-    range.selectNodeContents(element);
-    selection.removeAllRanges();
-    selection.addRange(range);
-
-  }
-}
 angular.module('copayApp.directives')
-  .directive('validAddress', ['$rootScope', 'bitcore', 
+  .directive('validAddress', ['$rootScope', 'bitcore',
     function($rootScope, bitcore) {
       return {
         require: 'ngModel',
@@ -24,10 +8,6 @@ angular.module('copayApp.directives')
           var URI = bitcore.URI;
           var Address = bitcore.Address
           var validator = function(value) {
-            var networkName = attrs.networkName;
-
-            if (!networkName) 
-              throw 'validAddress should provide network name';
 
             // Regular url
             if (/^https?:\/\//.test(value)) {
@@ -37,13 +17,14 @@ angular.module('copayApp.directives')
 
             // Bip21 uri
             if (/^bitcoin:/.test(value)) {
-              var uri, isAddressValid;
+              var uri, isAddressValidLivenet, isAddressValidTestnet;
               var isUriValid = URI.isValid(value);
               if (isUriValid) {
                 uri = new URI(value);
-                isAddressValid = Address.isValid(uri.address.toString(), networkName)
+                isAddressValidLivenet = Address.isValid(uri.address.toString(), 'livenet')
+                isAddressValidTestnet = Address.isValid(uri.address.toString(), 'testnet')
               }
-              ctrl.$setValidity('validAddress', isUriValid && isAddressValid);
+              ctrl.$setValidity('validAddress', isUriValid && (isAddressValidLivenet || isAddressValidTestnet));
               return value;
             }
 
@@ -53,34 +34,13 @@ angular.module('copayApp.directives')
             }
 
             // Regular Address
-            ctrl.$setValidity('validAddress', Address.isValid(value, networkName));
+            var regularAddressLivenet = Address.isValid(value, 'livenet');
+            var regularAddressTestnet = Address.isValid(value, 'testnet');
+            ctrl.$setValidity('validAddress', (regularAddressLivenet || regularAddressTestnet));
             return value;
           };
 
 
-          ctrl.$parsers.unshift(validator);
-          ctrl.$formatters.unshift(validator);
-        }
-      };
-    }
-  ])
-  .directive('validUrl', [
-
-    function() {
-      return {
-        require: 'ngModel',
-        link: function(scope, elem, attrs, ctrl) {
-          var validator = function(value) {
-            // Regular url
-            if (/^https?:\/\//.test(value)) {
-              ctrl.$setValidity('validUrl', true);
-              return value;
-            } else {
-              ctrl.$setValidity('validUrl', false);
-              return value;
-            }
-          };
-
           ctrl.$parsers.unshift(validator);
           ctrl.$formatters.unshift(validator);
         }
@@ -143,23 +103,6 @@ angular.module('copayApp.directives')
       }
     };
   })
-  .directive('loading', function() {
-    return {
-      restrict: 'A',
-      link: function($scope, element, attr) {
-        var a = element.html();
-        var text = attr.loading;
-        element.on('click', function() {
-          element.html('<i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i> ' + text + '...');
-        });
-        $scope.$watch('loading', function(val) {
-          if (!val) {
-            element.html(a);
-          }
-        });
-      }
-    }
-  })
   .directive('ngFileSelect', function() {
     return {
       link: function($scope, el) {
@@ -187,147 +130,6 @@ angular.module('copayApp.directives')
       };
     }
   ])
-  .directive('highlightOnChange', function() {
-    return {
-      restrict: 'A',
-      link: function(scope, element, attrs) {
-        scope.$watch(attrs.highlightOnChange, function(newValue, oldValue) {
-          element.addClass('highlight');
-          setTimeout(function() {
-            element.removeClass('highlight');
-          }, 500);
-        });
-      }
-    }
-  })
-  .directive('checkStrength', function() {
-    return {
-      replace: false,
-      restrict: 'EACM',
-      require: 'ngModel',
-      link: function(scope, element, attrs) {
-
-        var MIN_LENGTH = 8;
-        var MESSAGES = ['Very Weak', 'Very Weak', 'Weak', 'Medium', 'Strong', 'Very Strong'];
-        var COLOR = ['#dd514c', '#dd514c', '#faa732', '#faa732', '#16A085', '#16A085'];
-
-        function evaluateMeter(password) {
-          var passwordStrength = 0;
-          var text;
-          if (password.length > 0) passwordStrength = 1;
-          if (password.length >= MIN_LENGTH) {
-            if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))) {
-              passwordStrength++;
-            } else {
-              text = ', add mixed case';
-            }
-            if (password.match(/\d+/)) {
-              passwordStrength++;
-            } else {
-              if (!text) text = ', add numerals';
-            }
-            if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) {
-              passwordStrength++;
-            } else {
-              if (!text) text = ', add punctuation';
-            }
-            if (password.length > 12) {
-              passwordStrength++;
-            } else {
-              if (!text) text = ', add characters';
-            }
-          } else {
-            text = ', that\'s short';
-          }
-          if (!text) text = '';
-
-          return {
-            strength: passwordStrength,
-            message: MESSAGES[passwordStrength] + text,
-            color: COLOR[passwordStrength]
-          }
-        }
-
-        scope.$watch(attrs.ngModel, function(newValue, oldValue) {
-          if (newValue && newValue !== '') {
-            var info = evaluateMeter(newValue);
-            scope[attrs.checkStrength] = info;
-          }
-        });
-      }
-    };
-  })
-  .directive('showFocus', function($timeout) {
-    return function(scope, element, attrs) {
-      scope.$watch(attrs.showFocus,
-        function(newValue) {
-          $timeout(function() {
-            newValue && element[0].focus();
-          });
-        }, true);
-    };
-  })
-  .directive('match', function() {
-    return {
-      require: 'ngModel',
-      restrict: 'A',
-      scope: {
-        match: '='
-      },
-      link: function(scope, elem, attrs, ctrl) {
-        scope.$watch(function() {
-          return (ctrl.$pristine && angular.isUndefined(ctrl.$modelValue)) || scope.match === ctrl.$modelValue;
-        }, function(currentValue) {
-          ctrl.$setValidity('match', currentValue);
-        });
-      }
-    };
-  })
-  .directive('clipCopy', function() {
-    return {
-      restrict: 'A',
-      scope: {
-        clipCopy: '=clipCopy'
-      },
-      link: function(scope, elm) {
-        // TODO this does not work (FIXME)
-        elm.attr('tooltip', 'Press Ctrl+C to Copy');
-        elm.attr('tooltip-placement', 'top');
-
-        elm.bind('click', function() {
-          selectText(elm[0]);
-        });
-      }
-    };
-  })
-  .directive('menuToggle', function() {
-    return {
-      restrict: 'E',
-      replace: true,
-      templateUrl: 'views/includes/menu-toggle.html'
-    }
-  })
-  .directive('logo', function() {
-    return {
-      restrict: 'E',
-      scope: {
-        width: "@",
-        negative: "="
-      },
-      controller: function($scope) {
-        $scope.logo_url = $scope.negative ? 'img/logo-negative.svg' : 'img/logo.svg';
-      },
-      replace: true,
-      template: '<img ng-src="{{ logo_url }}" alt="Copay">'
-    }
-  })
-  .directive('availableBalance', function() {
-    return {
-      restrict: 'E',
-      replace: true,
-      templateUrl: 'views/includes/available-balance.html'
-    }
-  })
   .directive('ignoreMouseWheel', function($rootScope, $timeout) {
     return {
       restrict: 'A',

src/js/routes.js

@@ -85,7 +85,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-      .state('disclaimer', {
+    .state('disclaimer', {
       url: '/disclaimer',
       templateUrl: 'views/disclaimer.html',
     })
@@ -557,13 +557,26 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-    .state('bitpayCard', {
-        url: '/bitpay-card',
-        templateUrl: 'views/bitpayCard.html'
+      .state('bitpayCard', {
+        url: '/bitpayCard',
+        abstract: true,
+        template: '<ion-nav-view name="bitpayCard"></ion-nav-view>'
       })
-      .state('preferencesBitpayCard', {
-        url: '/preferences-bitpay-card',
-        templateUrl: 'views/preferencesBitpayCard.html'
+      .state('bitpayCard.main', {
+        url: '/main',
+        views: {
+          'bitpayCard': {
+            templateUrl: 'views/bitpayCard.html'
+          }
+        }
+      })
+      .state('bitpayCard.preferences', {
+        url: '/preferences',
+        views: {
+          'bitpayCard': {
+            templateUrl: 'views/preferencesBitpayCard.html'
+          }
+        }
       })
 
     /*

src/js/services/bitpayCardService.js

@@ -5,9 +5,13 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   var credentials = {};
   var bpSession = {};
 
-  root.setCredentials = function(network) {
-    credentials.NETWORK = network;
-    if (network == 'testnet') {
+  var _setCredentials = function() {
+    /*
+     * Development: 'testnet'
+     * Production: 'livenet'
+     */
+    credentials.NETWORK = 'livenet';
+    if (credentials.NETWORK == 'testnet') {
       credentials.BITPAY_API_URL = 'https://test.bitpay.com';
     }
     else {
@@ -16,6 +20,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   var _getUser = function(cb) {
+    _setCredentials();
     storageService.getBitpayCard(credentials.NETWORK, function(err, user) {
       if (err) return cb(err);
       if (lodash.isString(user)) {
@@ -26,6 +31,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   var _setUser = function(user, cb) {
+    _setCredentials();
     user = JSON.stringify(user);
     storageService.setBitpayCard(credentials.NETWORK, user, function(err) {
       return cb(err);
@@ -33,6 +39,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   var _getSession = function(cb) {
+    _setCredentials();
     $http({
       method: 'GET',
       url: credentials.BITPAY_API_URL + '/visa-api/session',
@@ -50,6 +57,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   var _getBitPay = function(endpoint) {
+    _setCredentials();
     return {
       method: 'GET',
       url: credentials.BITPAY_API_URL + endpoint,
@@ -61,6 +69,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   var _postBitPay = function(endpoint, data) {
+    _setCredentials();
     return {
       method: 'POST',
       url: credentials.BITPAY_API_URL + endpoint,
@@ -72,6 +81,11 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
     };
   };
 
+  root.getEnvironment = function() {
+    _setCredentials();
+    return credentials.NETWORK;
+  };
+
   root.topUp = function(data, cb) {
     var dataSrc = {
       amount: data.amount,
@@ -173,6 +187,7 @@ angular.module('copayApp.services').factory('bitpayCardService', function($http,
   };
 
   root.logout = function(cb) {
+    _setCredentials();
     storageService.removeBitpayCard(credentials.NETWORK, function(err) {
       $http(_getBitPay('/visa-api/logout')).then(function(data) {
         $log.info('BitPay Logout: SUCCESS');

src/sass/main.scss

@@ -955,3 +955,13 @@ input[type="number"] {
 	.calculator .button-calc .columns { padding: 20px; }
   .calculator .header-calc { top: 18%; }
 }
+
+/* Turn Off Number Input Spinners */
+
+input[type=number] {
+  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+