Merge pull request #227 from Bitcoin-com/wallet/task/414

Improvement - 414 - "Custom amount" QR screen to include the price in big letters

src/js/controllers/customAmount.js

@@ -64,6 +64,14 @@ angular.module('copayApp.controllers').controller('customAmountController', func
       var currency = parsedAmount.currency;
       $scope.amountUnitStr = parsedAmount.amountUnitStr;
 
+      configService.whenAvailable(function (config) {
+        $scope.selectedPriceDisplay = config.wallet.settings.priceDisplay;
+
+        $timeout(function () {
+          $scope.$apply();
+        });
+      });
+
       if (currency != 'BTC' && currency != 'BCH') {
         // Convert to BTC or BCH
         var config = configService.getSync().wallet.settings;

src/js/services/txFormatService.js

@@ -201,7 +201,7 @@ angular.module('copayApp.services').factory('txFormatService', function($filter,
     var alternativeIsoCode = config.alternativeIsoCode;
 
     // If fiat currency
-    if (currency != 'BCH' && currency != 'BTC' && currency != 'sat') {
+    if (currency && currency.toUpperCase() != 'BCH' && currency.toUpperCase() != 'BTC' && currency != 'sat') {
       amountUnitStr = $filter('formatFiatAmount')(amount) + ' ' + currency;
       amountSat = rateService.fromFiat(amount, currency, coin).toFixed(0);
     } else if (currency == 'sat') {

src/sass/qr.scss

@@ -5,8 +5,8 @@ qrcode {
       content: "";
       background-size: 100% 100%;
       display: block;
-      left: 88px;
+      left: calc(50% - 22px);
-      margin-top: 88px;
+      margin-top: calc(50% - 22px);
       width: 44px;
       height: 44px;
       position:absolute;

src/sass/views/custom-amount.scss

@@ -26,16 +26,10 @@
     height: 100%;
     .qr-code {
       text-align: center;
-      margin-top: 24vh;
+      margin-top: 6px;
-      margin-bottom: 7vh;
+      qrcode canvas {
-      @media(max-height: 800px) {
+        height: 30vh;
-        margin-top: 18vh;
+        max-height: 220px;
-      }
-      @media(max-height: 700px) {
-        margin-top: 14vh;
-      }
-      @media(max-height: 600px) {
-        margin-top: 8vh;
       }
     }
     .info {
@@ -91,5 +85,34 @@
     .address-types {
       text-align: center;
     }
+
+    .amount {
+      margin-top: 20vh;
+      margin-bottom: 4vh;
+      @media(max-height: 800px) {
+        margin-top: 12vh;
+        margin-bottom: 6vh;
+      }
+      @media(max-height: 700px) {
+        margin-top: 10vh;
+        margin-bottom: 4vh;
+      }
+      @media(max-height: 600px) {
+        margin-top: 6vh;
+        margin-bottom: 2vh;
+
+      }
+      width: 100%;
+      text-align: center;
+      //padding-top: 30px;
+      display: block;
+      align-items: center;
+      justify-content: center;
+
+      &-alternative {
+        line-height: 36px;
+      }
+    }
+
   }
 }

www/views/customAmount.html

@@ -30,8 +30,22 @@
           <br/>Return To Address<br/>
         </p>
       </div>
+      <div ng-show="!showingPaymentReceived" class="amount">
+        <div ng-show="selectedPriceDisplay=='fiat'">
+          <span class="size-36">{{amountUnitStr}}</span>
+          <div class="size-14 amount-alternative">
+            {{altAmountStr | uppercase}}
+          </div>
+        </div>
+        <div ng-show="selectedPriceDisplay=='crypto'">
+          <span class="size-36">{{altAmountStr | uppercase}}</span>
+          <div class="size-14 amount-alternative">
+            {{amountUnitStr}}
+          </div>
+        </div>
+      </div>
       <div ng-show="!showingPaymentReceived" class="qr-code" copy-to-clipboard="copyToClipboard()">
-        <qrcode size="220" data="{{ protocolHandler }}:{{address + '?amount=' + amountBtc}}" color="#334"></qrcode>
+        <qrcode class="qr-overlay qr-overlay--{{ wallet.coin }}" size="220" data="{{ protocolHandler }}:{{address + '?amount=' + amountBtc}}" color="#334"></qrcode>
       </div>
       <div ng-show="!showingPaymentReceived" ng-show="address && coin == 'bch'" class="address-types">
         <div>
@@ -57,12 +71,6 @@
             {{address}}
           </span>
         </div>
-        <div class="item single-line">
-          <span class="label" translate>Amount</span>
-          <span class="item-note">
-            {{amountUnitStr}} - {{altAmountStr}}
-          </span>
-        </div>
         <div class="item single-line">
           <div class="wallet">
             <i class="icon big-icon-svg" ng-include="'views/includes/walletIcon.html'"></i>