From 124684b5a1dcf7cdafa48ed7641079b8ed40c68a Mon Sep 17 00:00:00 2001
From: Sam Cheng Hung <samchenghung@gmail.com>
Date: Thu, 29 Mar 2018 14:14:43 +0900
Subject: [PATCH] Update: Adds amount received on payment received overlay on
 Receive tab

---
 src/js/controllers/tab-receive.js |  8 ++++++++
 src/sass/views/tab-receive.scss   | 11 +++++++++++
 www/css/main.css                  |  9 +++++++++
 www/views/tab-receive.html        |  7 ++++---
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/js/controllers/tab-receive.js b/src/js/controllers/tab-receive.js
index 819192f75..be761d3fd 100644
--- a/src/js/controllers/tab-receive.js
+++ b/src/js/controllers/tab-receive.js
@@ -40,6 +40,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
       if ($scope.wallet.coin == 'bch') {
           bchAddresses = bitcoinCashJsService.translateAddresses(addr);
           $scope.addr = bchAddresses[$scope.bchAddressType.type];
+          $scope.addrBchLegacy = bchAddresses['legacy'];
 
           // listen to bch address
           currentAddressSocket = new WebSocket("wss://ws.blockchain.info/bch/inv");
@@ -118,6 +119,13 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
     }*/
 
     if (data.op == "utx") {
+      var watchAddress = $scope.wallet.coin == 'bch' ? $scope.addrBchLegacy : $scope.addr;
+      for (var i = 0; i < data.x.out.length; i++) {
+        if (data.x.out[i].addr == watchAddress) {
+          $scope.paymentReceivedAmount = (data.x.out[i].value / 100000000).toFixed(8);
+        }
+      }
+      $scope.paymentReceivedCoin = $scope.wallet.coin;
       $scope.showingPaymentReceived = true
       $scope.$apply();
     }
diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss
index c013ef4f5..40dc79504 100644
--- a/src/sass/views/tab-receive.scss
+++ b/src/sass/views/tab-receive.scss
@@ -83,4 +83,15 @@
     bottom: 0;
     width: 100%;
   }
+  .payment-received-container {
+    margin: 0 20px;
+    .payment-received-amount {
+      font-size: 1.8em;
+      display: block;
+      margin: 20px auto;
+    }
+    .payment-received-currency {
+      text-transform: uppercase;
+    }
+  }
 }
diff --git a/www/css/main.css b/www/css/main.css
index 8027d43c5..6f47a72f5 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -10735,6 +10735,15 @@ textarea.d-block {
   bottom: 0;
   width: 100%; }
 
+#tab-receive .payment-received-container {
+  margin: 0 20px; }
+  #tab-receive .payment-received-container .payment-received-amount {
+    font-size: 1.8em;
+    display: block;
+    margin: 15px auto; }
+  #tab-receive .payment-received-container .payment-received-currency {
+    text-transform: uppercase; }
+
 #tab-scan {
   color: #fff;
   text-align: center;
diff --git a/www/views/tab-receive.html b/www/views/tab-receive.html
index 45cc191f0..41e52275e 100644
--- a/www/views/tab-receive.html
+++ b/www/views/tab-receive.html
@@ -54,14 +54,15 @@
           </div>
         </div>
         <!-- animation for payment received -->
-        <div ng-show="showingPaymentReceived" ng-click="showingPaymentReceived = false">
+        <div class="payment-received-container" ng-show="showingPaymentReceived" ng-click="showingPaymentReceived = false">
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
             <circle class="path circle" fill="none" stroke="#19B234" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
             <polyline class="path check" fill="none" stroke="#19B234" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
           </svg>
           <p class="success animated fadeIn">
-            <br/>Payment Received!<br/>
-            <br/>Return To Address<br/>
+            <br/>Payment Received!
+            <span class="payment-received-amount">{{ paymentReceivedAmount }} <span class="payment-received-currency">{{ paymentReceivedCoin }}</span></span>
+            Return To Address<br/>
           </p>
         </div>
         <!-- end of animation -->