Fix main view of the bitpay card

public/views/bitpayCard.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view id="bitpayCard">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
@@ -12,7 +12,7 @@
 
   <ion-content>
 
-    <div class="box-notification warning" ng-show="network == 'testnet'">
+    <div class="box-notification warning m0" ng-show="network == 'testnet'">
       Sandbox version. Only for testing purpose
     </div>
 
@@ -89,30 +89,21 @@
         </form>
     </div>
 
-    <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && !addFunds">
+    <div ng-show="bitpayCard.bitpayCardAuthenticated">
-      <div id="bitpayCard" class="oh pr">
+      <div class="oh pr">
         <div class="amount">
-          <div ng-show="!loadingHistory && bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
+          <div ng-if="!loadingHistory && bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
-            <strong class="size-36">${{bitpayCard.bitpayCardCurrentBalance}}</strong>
+            <div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
-            <div class="size-12">Available balance</div>
+            <a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'isCard': true, 'toName': 'BitPay Card'})">
+              <i class="icon ion-ios-plus-empty"></i> {{'Add Funds'|translate}}
+            </a>
           </div>
-          <div ng-show="loadingHistory">
+          <div ng-if="loadingHistory" class="m20t">
             <strong class="size-36">...</strong>
           </div>
         </div>
-        <div class="camera-icon" ng-show="bitpayCard.bitpayCardCurrentBalance">
-          <a ui-sref="tabs.bitpayCard.amount({'isCard': true, 'toName': 'BitPay Card'})">
-            <i class="icon ion-plus size-21"></i>
-          </a>
-        </div>
       </div>
 
-      <select class="m10" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
-        <option value="last30Days">Recent Activity</option>
-        <option value="lastMonth">Last Month</option>
-        <option value="all">All Activity</option>
-      </select>
-
       <div
         class="oh pr m20t text-gray size-12 text-center"
         ng-show="!bitpayCard.bitpayCardTransactionHistory[0] &&
@@ -124,12 +115,19 @@
         <i class="icon ion-android-sync"></i>
       </div>
 
-      <div class="card list" ng-show="!loadingHistory">
+      <div class="list" ng-show="!loadingHistory">
+        <div class="item item-divider">
+        <select class="select-style" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
+          <option value="last30Days">Recent Activity</option>
+          <option value="lastMonth">Last Month</option>
+          <option value="all">All Activity</option>
+        </select>
+        </div>
         <div
           ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
           class="item row"
           ng-init="bitpayCard.getMerchantInfo(tx)">
-          <div class="col" ng-init="icon = bitpayCard.getIconName(tx)">
+          <div class="col col-10" ng-init="icon = bitpayCard.getIconName(tx)">
             <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
           </div>
 
@@ -143,7 +141,7 @@
           </div>
           <div
             ng-init="desc = bitpayCard.processDescription(tx)"
-            class="col">
+            class="col size-12">
             {{desc}}
           </div>
           <div class="col">
@@ -162,55 +160,5 @@
         </div>
       </div>
     </div>
-
-    <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && addFunds">
-        <form
-           name="createInvoiceForm"
-           ng-submit="bitpayCard.sendFunds()"
-           novalidate>
-
-          <div class="card 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>
-              <a class="postfix">USD</a>
-            </label>
-
-            <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
-
-          </div>
-
-          <p class="size-12 text-warning" ng-show="bitpayCard.isMultisigWallet">
-            You selected a multisignature wallet. Please note that the transaction will only appear on your card's
-            Activity when the payment is fully signed.
-          </p>
-
-          <div class="row">
-            <div class="col">
-              <button class="button button-block button-light"
-                      type="button"
-                      ng-click="addFunds = false; fiat = null">
-                Cancel
-              </button>
-            </div>
-            <div class="col">
-              <button class="button button-block button-positive"
-                      ng-disabled="!fiat"
-                      type="submit">
-                Send
-              </button>
-            </div>
-          </div>
-        </form>
-    </div>
   </ion-content>
 </ion-view>

src/js/controllers/bitpayCard.js

@@ -98,81 +98,6 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
     });
   };
 
-  this.sendFunds = function() {
-    if (lodash.isEmpty(wallet)) return;
-
-    if (!wallet.canSign() && !wallet.isPrivKeyExternal()) {
-      $log.info('No signing proposal: No private key');
-      popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg('MISSING_PRIVATE_KEY'));
-      return;
-    }
-
-    var dataSrc = {
-      amount: $scope.fiat,
-      currency: 'USD'
-    };
-    var outputs = [];
-    var config = configService.getSync();
-    var configWallet = config.wallet;
-    var walletSettings = configWallet.settings;
-
-
-    ongoingProcess.set('Processing Transaction...', true);
-    $timeout(function() {
-
-      bitpayCardService.topUp(dataSrc, function(err, invoiceId) {
-        if (err) {
-          ongoingProcess.set('Processing Transaction...', false);
-          popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
-          return;
-        }
-
-        bitpayCardService.getInvoice(invoiceId, function(err, data) {
-          var address, comment, amount;
-
-          address = data.bitcoinAddress;
-          amount = parseInt((data.btcPrice * 100000000).toFixed(0));
-          comment = data.itemDesc;
-
-          outputs.push({
-            'toAddress': address,
-            'amount': amount,
-            'message': comment
-          });
-
-          var txp = {
-            toAddress: address,
-            amount: amount,
-            outputs: outputs,
-            message: comment,
-            payProUrl: null,
-            excludeUnconfirmedUtxos: configWallet.spendUnconfirmed ? false : true,
-            feeLevel: walletSettings.feeLevel || 'normal'
-          };
-
-          walletService.createTx(wallet, txp, function(err, createdTxp) {
-            ongoingProcess.set('Processing Transaction...', false);
-            if (err) {
-              popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
-              return;
-            }
-            walletService.publishAndSign(wallet, createdTxp, function(err, tx) {
-              if (err) {
-                popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
-                return;
-              }
-              self.update();
-              $scope.addFunds = false;
-              $timeout(function() {
-                $scope.$digest();
-              });
-            });
-          });
-        });
-      });
-    }, 100);
-  };
-
   this.authenticate = function() {
 
     var data = {

src/sass/views/bitpayCard.scss

@@ -3,8 +3,7 @@
     width: 100%;
     text-align: center;
     padding: 2rem 1rem 1.5rem 1rem;
-    min-height: 115px;
+    min-height: 140px;
-    margin-bottom: 25px;
     border-color: #172565;
     background-color: #1e3186;
     background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
@@ -13,4 +12,13 @@
   strong {
     line-height: 100%;
   }
+  .select-style {
+    border: none;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
 }