Merge pull request #5360 from gabrielbazan7/fix/uiconfirm

improve confirm view UI

src/js/controllers/confirm.js

@@ -63,9 +63,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
     if (!$scope.wallets || !$scope.wallets.length) {
       $scope.noMatchingWallet = true;
-      if ($scope.paypro) {
+      displayValues();
-        displayValues();
+      $log.warn('No ' + $scope.network + ' wallets to make the payment');
-      }
       $timeout(function() {
         $scope.$apply();
       });
@@ -107,6 +106,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
             } else initConfirm();
           } else {
             if (!enoughFunds) $scope.insufficientFunds = true;
+            displayValues();
             $log.warn('No wallet available to make the payment');
           }
           $timeout(function() {

src/js/directives/clickToAccept.js

@@ -8,7 +8,9 @@ angular.module('copayApp.directives')
       transclude: true,
       scope: {
         sendStatus: '=clickSendStatus',
-        wallet: '=hasWalletChosen'
+        hasWalletChosen: '=hasWalletChosen',
+        insufficientFunds: '=insufficientFunds',
+        noMatchingWallet: '=noMatchingWallet'
       },
       link: function(scope, element, attrs) {
         scope.$watch('sendStatus', function() {

src/sass/views/confirm.scss

@@ -1,4 +1,5 @@
 #view-confirm {
+  background-color: #ffffff;
   @extend .deflash-blue;
   .icon-amazon {
     background-image: url("../img/icon-amazon.svg");

www/views/confirm.html

@@ -60,12 +60,18 @@
           <span class="label" ng-if="!isGlidera" translate>From</span>
           <span class="label" ng-if="isGlidera == 'buy'">To</span>
           <span class="label" ng-if="isGlidera == 'sell'">From</span>
-          <div class="wallet">
+          <div class="wallet" ng-if="wallet">
             <i class="icon big-icon-svg">
               <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
             </i>
             <div>{{wallet.name}}</div>
           </div>
+          <div class="wallet" ng-if="!wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': 'grey'}" class="bg"/>
+            </i>
+            <div>...</div>
+          </div>
           <i class="icon bp-arrow-right"></i>
         </a>
         <a class="item single-line item-icon-right" ng-if="!insufficientFunds && !noMatchingWallet && !isGlidera" ng-click="showDescriptionPopup()">
@@ -120,17 +126,21 @@
   </ion-content>
   <click-to-accept
     ng-click="approve(statusChangeHandler)"
-    ng-if="!isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
+    ng-if="!isCordova"
     click-send-status="sendStatus"
-    has-wallet-chosen="wallet">
+    has-wallet-chosen="wallet"
+    insufficient-funds="insufficientFunds"
+    no-matching-wallet="noMatchingWallet">
     {{'Accept' | translate}}
   </click-to-accept>
   <slide-to-accept
     ng-disabled="!wallet"
-    ng-if="isCordova && wallets[0] && !insufficientFunds && !noMatchingWallet"
+    ng-if="isCordova"
     slide-on-confirm="onConfirm()"
     slide-send-status="sendStatus"
-    has-wallet-chosen="wallet">
+    has-wallet-chosen="wallet"
+    insufficient-funds="insufficientFunds"
+    no-matching-wallet="noMatchingWallet">
     {{'Accept' | translate}}
   </slide-to-accept>
   <slide-to-accept-success

www/views/includes/alert.html

@@ -1,9 +0,0 @@
-<div class="columns m20t">
-  <div class="m20t  size-14 text-center">
-      <i class="fi-alert"></i>
-      {{msg|translate}}
-  </div>
-<div class="text-center m20t" ng-click="close()">
-    <a class="button outline light-gray round tiny small-4">OK</a>
-  </div>
-</div>

www/views/includes/clickToAccept.html

@@ -1,4 +1,4 @@
-<button ng-disabled="!wallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
+<button ng-disabled="!hasWalletChosen || insufficientFunds || noMatchingWallet" class="click-to-accept__button button button-standard button-primary" ng-class="{disable: sendStatus}">
   <span ng-if="!sendStatus">
     <ng-transclude></ng-transclude>
   </span>

www/views/includes/password.html

@@ -1,42 +0,0 @@
-
-  <div class="columns m20t">
-    <label class="size-14 text-center" for="password" ng-if="isSetup">
-      <span ng-show="!isVerification" translate>Set up a spending password</span>
-      <span ng-show="isVerification" translate>Repeat the spending password</span>
-    </label>
-    <label class="size-14 text-center" for="password" ng-if="!isSetup">
-      <span translate>Enter your spending password</span>
-    </label>
-
-    <div class="input m20t">
-      <input type="password" placeholder="{{'Your spending password'|translate}}"
-      id="passwordInput" name="password" ng-model="data.password" ng-keypress="keyPress($event)" autofocus>
-    </div>
-  </div>
-  <div class="row">
-    <div class="small-6 columns">
-      <button
-        class="round small-6 columns outline dark-gray expand"
-        ng-click="cancel()"
-        ng-disabled="loading">
-        <span class="size-12" translate>Cancel</span>
-      </button>
-    </div>
-
-    <div class="small-6 columns">
-      <button class="round expand"
-              ng-click="set()"
-              ng-disabled="!data.password || loading"
-        ng-style="{'background-color':index.backgroundColor}">
-        <span ng-if="isSetup" class="size-12" translate>SET</span>
-        <span ng-if="!isSetup" class="size-12">OK</span>
-      </button>
-    </div>
-  </div>
-
-    <p class="text-warning size-12 columns m20t text-center" ng-show="isSetup">
-      <i class="fi-alert"></i>
-      <span ng-show="!error" translate> Your wallet key will be encrypted. The Spending Password cannot be recovered. Be sure to write it down</span>
-
-      <span ng-show="error">{{error|translate}}</span>
-    </p>

www/views/tx-details.html

@@ -1,4 +1,4 @@
-<ion-view id="view-confirm" hide-tabs>
+<ion-view id="txp-details" hide-tabs>
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{title}}