add transaction comment - custom popup (Gabriel)

package.json

@@ -42,7 +42,7 @@
     "url": "https://github.com/bitpay/copay/issues"
   },
   "dependencies": {
-    "bitcore-wallet-client": "2.5.0",
+    "bitcore-wallet-client": "~2.5.0",
     "express": "^4.11.2",
     "fs": "0.0.2",
     "grunt": "^0.4.5",

public/views/includes/note.html

@@ -0,0 +1,7 @@
+<input type="text" ng-model="data.comment" autofocus>
+<div class="small-6 columns">
+  <button class="round outline dark-gray expand" ng-click="commentPopupClose()" translate>CANCEL</button>
+</div>
+<div class="small-6 columns">
+  <button ng-style="{'background-color': index.backgroundColor}" class="round outline expand" ng-click="commentPopupSave()" translate>SAVE</button>
+</div>

public/views/modals/paypro.html

@@ -11,7 +11,8 @@
     </section>
   </nav>
 
-  <ion-content>
+  <ion-content ng-style="{'background-color': '#F6F7F9'}">
+    <div class="modal-content">
       <div class="header-modal text-center p50t">
         <div class="size-42">
           {{unitTotal}}  {{unitName}}
@@ -59,6 +60,7 @@
         <span class="right">{{paypro.expires * 1000 | amTimeAgo }}</span>
         </li>
       </ul>
+    </div>
     <div class="extra-margin-bottom"></div>
   </ion-content>
 </ion-modal-view>

public/views/modals/tx-details.html

@@ -6,13 +6,11 @@
       </a>
     </section>
     <section class="middle tab-bar-section">
-      <h1 class="title ellipsis" translate>
-        Transaction
-      </h1>
+      <h1 class="title ellipsis" translate>Transaction</h1>
     </section>
   </nav>
 
-  <ion-content>
+  <ion-content ng-style="{'background-color': '#F6F7F9'}">
     <div class="modal-content">
       <div class="header-modal text-center" ng-init="getAlternativeAmount(btx)">
         <div ng-show="btx.action != 'invalid'">
@@ -51,7 +49,6 @@
       <h4 class="title m0" translate>Details</h4>
 
       <ul class="no-bullet size-14 m0">
-
         <li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh"
           ng-click="copyToClipboard(btx.addressTo)">
           <span class="text-gray" translate>To</span>
@@ -85,6 +82,8 @@
           <span class="right" translate>
             This transaction has become invalid; possibly due to a double spend attempt.
           </span>
+        </li>
+
         <li ng-if="btx.time" class="line-b p10 oh">
           <span class="text-gray" translate>Date</span>
           <span class="right enable_text_select">
@@ -92,16 +91,19 @@
             <time>({{ btx.time * 1000 | amTimeAgo}})</time>
           </span>
         </li>
+
         <li class="line-b p10" ng-show="btx.action != 'received'"
           ng-click="copyToClipboard(btx.feeStr)">
           <span class="text-gray" translate>Fee</span>
           <span class="right enable_text_select">{{btx.feeStr}}</span>
         </li>
+
         <li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'"
           ng-click="copyToClipboard(btx.message)">
           <span class="text-gray" translate>Note</span>
           <span class="right enable_text_select">{{btx.message}}</span>
         </li>
+
         <li ng-if="btx.merchant" class="line-b p10 oh"
           ng-click="copyToClipboard(btx.merchant.pr.pd.memo)">
           <span class="text-gray" translate>Merchant message</span>
@@ -109,6 +111,7 @@
             {{btx.merchant.pr.pd.memo}}
           </span>
         </li>
+
         <li ng-if="btx.time" class="line-b p10 oh">
           <span class="text-gray" translate>Confirmations</span>
           <span class="right" >
@@ -121,7 +124,15 @@
             <span class="label gray radius" ng-show="btx.safeConfirmed">
               {{btx.safeConfirmed}}
             </span>
+          </span>
+        </li>
 
+        <li class="p10 oh" ng-show="comment">
+          <span class="text-gray" translate>Comment</span>
+          <span class="right enable_text_select">{{comment}}</span><br>
+          <span class="right text-italic text-gray size-12 m10t">
+            <span>{{editedBy}}</span>
+            <time>{{createdOn * 1000 | amTimeAgo}}</time></span>
           </span>
         </li>
       </ul>
@@ -146,10 +157,12 @@
             (getShortNetworkName() == 'test' ? 'test-' : '') + 'insight.bitpay.com/tx/' + btx.txid)">
             <span class="text-gray" translate>See it on the blockchain</span>
           </button>
+          <button class="button outline round dark-gray tiny" ng-click="showCommentPopup()">
+            <span class="text-gray" translate ng-show="!comment">Add a comment <i class="ion-ios-plus-outline"></i></span>
+            <span class="text-gray" translate ng-show="comment">Edit comment <i class="ion-ios-compose-outline"></i></span>
+          </button>
         </div>
       </div>
-
-      <div class="extra-margin-bottom"></div>
     </div>
   </ion-content>
 </ion-modal-view>

public/views/modals/txp-details.html

@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <ion-content>
+  <ion-content ng-style="{'background-color': '#F6F7F9'}">
     <div class="modal-content fix-modals-touch" ng-init="updateCopayerList()">
       <div class="payment-proposal-head" ng-style="{'background-color':color}">
         <div class="size-36">{{tx.amountStr}}</div>

public/views/walletHome.html

@@ -204,12 +204,11 @@
                 <div class="m10t">
                   <span ng-show="btx.action == 'received'" translate>Received</span>
                   <span ng-show="btx.action == 'sent'">
-                    {{index.addressbook[btx.addressTo]}}
-                    <span ng-show="!index.addressbook[btx.addressTo] && btx.message">
-                      <span class="ellipsis">{{btx.message}}</span>
-                    </span>
-                    <span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
-                      <span translate> Sent</span>
+                    <span class="ellipsis">
+                      <span ng-if="btx.message">{{btx.message}}</span>
+                      <span ng-if="!btx.message && btx.note.body">{{btx.note.body}}</span>
+                      <span ng-if="!btx.message && !btx.note.body && index.addressbook[btx.addressTo]">{{index.addressbook[btx.addressTo]}}</span>
+                      <span ng-if="!btx.message && !btx.note.body && !index.addressbook[btx.addressTo]" translate> Sent</span>
                     </span>
                   </span>
                   <span ng-show="btx.action == 'moved'" translate>Moved</span>

src/css/ionic-migration.css

@@ -20,6 +20,14 @@
 	z-index: -1;
 }
 
+.popup-container.active .popup {
+	border-radius: 10px;
+}
+
+.popup-container .popup {
+	width: 300px;
+}
+
 .bct {
  	background-color: transparent !important;
 	margin-top: -25px;

src/js/controllers/modals/txDetails.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txDetailsController', function($rootScope, $scope, $filter, profileService, nodeWebkit, configService,  gettextCatalog) {
+angular.module('copayApp.controllers').controller('txDetailsController', function($rootScope, $log, $scope, $filter, $ionicPopup, gettextCatalog, profileService, configService) {
 
   var self = $scope.self;
   var fc = profileService.focusedClient;
@@ -13,8 +13,51 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
   $scope.copayerId = fc.credentials.copayerId;
   $scope.isShared = fc.credentials.n > 1;
 
+  if ($scope.btx.txid) {
+    fc.getTxNote({
+      txid: $scope.btx.txid
+    }, function(err, note) {
+      if (err || !note) {
+        $log.debug(gettextCatalog.getString('Could not fetch transaction note'));
+        return;
+      }
+      $scope.comment = note.body;
+      $scope.editedBy = gettextCatalog.getString('Edited by') + ' ' + note.editedByName;
+      $scope.createdOn = note.createdOn;
+    });
+  }
+
+  $scope.showCommentPopup = function() {
+    $scope.data = {
+      comment: ''
+    };
+
+    var commentPopup = $ionicPopup.show({
+      templateUrl: "views/includes/note.html",
+      title: gettextCatalog.getString('Enter a new comment'),
+      subTitle: gettextCatalog.getString('Save an empty content to delete it'),
+      scope: $scope,
+    });
+
+    $scope.commentPopupClose = function() {
+      commentPopup.close();
+    };
+
+    $scope.commentPopupSave = function() {
+      fc.editTxNote({
+        txid: $scope.btx.txid,
+        body: $scope.data.comment
+      }, function() {});
+      $scope.comment = $scope.data.comment;
+      $scope.editedBy = gettextCatalog.getString('Edited by') + ' ' + fc.credentials.copayerName;
+      $scope.createdOn = Math.floor(Date.now() / 1000);
+      commentPopup.close();
+    };
+  };
+
   $scope.getAlternativeAmount = function() {
     var satToBtc = 1 / 100000000;
+
     fc.getFiatRate({
       code: $scope.alternativeIsoCode,
       ts: $scope.btx.time * 1000