Merge pull request #2948 from greggzigler/feat/multi-outputs

handle multiple outputs in transaction proposal

public/views/includes/output.html

@@ -0,0 +1,24 @@
+<div class="ng-animate-disabled row collapse line-b" ng-class="text-gray">
+  <li ng-if="output.isSummary" class="line-b p10 oh" ng-click="toggleOutputDetails(output)">
+    <span class="text-gray" translate>Recipients</span>:
+    <span class="right enable_text_select">{{output.recipientCount}}
+        <i ng-show="output.showDetails" class="icon-arrow-up3 size-24"></i>
+        <i ng-show="!output.showDetails" class="icon-arrow-down3 size-24"></i>
+    </span>
+  </li>
+  <li ng-if="!output.isSummary" class="line-b p10 oh" ng-click="copyAddress(output.toAddress)">
+    <span class="text-gray" translate>To</span>:
+    <span class="right enable_text_select">{{output.toAddress || output.address}}</span>
+  </li>
+  <li class="line-b p10">
+    <span ng-show="output.isSummary" class="text-gray" translate>Total</span>
+    <span ng-show="!output.isSummary" class="text-gray" translate>Amount</span>:
+    <span class="right">{{output.amountStr}}
+      <span ng-show="output.alternativeAmountStr" class="label gray radius">{{output.alternativeAmountStr}}</span>
+    </span>
+  </li>
+  <li class="line-b p10 oh">
+    <span class="text-gray" translate>Note</span>:
+    <span class="right">{{output.message}}</span>
+  </li>
+</div>

public/views/includes/transaction.html

@@ -11,13 +11,19 @@
         <time class="right size-12 text-gray m5t">{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
       </div>
       <div class="ellipsis size-14">
-        <span translate>To</span>:
+        <span ng-if="!tx.showSingle">
-        <span ng-if="tx.merchant">
+          <span translate>Recipients</span>:
-          <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+          <span>{{tx.outputs.length}}</span>
-          <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+        </span>
+        <span ng-if="tx.showSingle">
+          <span translate>To</span>:
+          <span ng-if="tx.merchant">
+            <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+            <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+          </span>
+          <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"> </contact>
+          {{tx.toAddress}}
         </span>
-        <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"> </contact>
-        {{tx.toAddress}}
       </div>
       <div class="ellipsis text-gray size-14">
         {{tx.message}}

public/views/modals/tx-details.html

@@ -27,8 +27,17 @@
   </div>
 
   <h4 class="title m0" translate>Details</h4>
+
   <ul class="no-bullet size-14 m0">
-    <li ng-if="btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
+    <div ng-if="!btx.showSingle"
+      ng-repeat="output in [ btx.outputs.summary ]"
+      ng-include="'views/includes/output.html'">
+    </div>
+    <div ng-if="!btx.showSingle && btx.outputs.summary.showDetails"
+      ng-repeat="output in btx.outputs.details"
+      ng-include="'views/includes/output.html'">
+    </div>
+    <li ng-if="btx.showSingle && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
     <span class="text-gray" translate>To</span>:
     <span class="right">
       <span ng-if="btx.merchant">
@@ -54,12 +63,6 @@
       <span class="text-gray" translate>Fee</span>:
       <span class="right">{{feeStr}}</span>
     </li>
-    <li ng-if="btx.message" class="line-b p10 oh">
-    <span class="text-gray" translate>Note</span>:
-    <span class="right">
-      {{btx.message}}
-    </span>
-    </li>
     <li ng-if="btx.merchant" class="line-b p10 oh">
     <span class="text-gray" translate>Merchant message</span>:
     <span class="right">

public/views/modals/txp-details.html

@@ -14,16 +14,18 @@
 <div class="modal-content fix-modals-touch" ng-init="updateCopayerList()">
   <h4 class="title m0" translate>Details</h4>
   <ul class="no-bullet size-14 m0">
-    <li class="line-b p10 oh" ng-click="copyAddress(tx.toAddress)">
+    <div ng-if="!tx.showSingle"
-      <span class="text-gray" translate>To</span>:
+      ng-repeat="output in [ tx.outputs.summary ]"
-      <span class="right enable_text_select">{{tx.toAddress}}</span>
+      ng-include="'views/includes/output.html'">
-    </li>
+    </div>
-    <li class="line-b p10">
+    <div ng-if="!tx.showSingle && tx.outputs.summary.showDetails"
-      <span class="text-gray" translate>Amount</span>:
+      ng-repeat="output in tx.outputs.details"
-      <span class="right">{{amountStr}}
+      ng-include="'views/includes/output.html'">
-        <span class="label gray radius">{{alternativeAmountStr}}</span>
+    </div>
-      </span>
+    <div ng-if="tx.showSingle"
-    </li>
+      ng-repeat="output in [ tx ]"
+      ng-include="'views/includes/output.html'">
+    </div>
     <li class="line-b p10">
       <span class="text-gray" translate>Fee</span>:
       <span class="right">{{feeStr}}</span>
@@ -38,10 +40,6 @@
       <span class="text-gray" translate>Created by</span>:
       <span class="right">{{tx.creatorName}}</span>
     </li>
-    <li class="line-b p10 oh">
-      <span class="text-gray" translate>Note</span>:
-      <span class="right">{{tx.message}}</span>
-    </li>
   </ul>
   <div ng-if="tx.paypro">
     <h4 class="title m0" translate>Payment details</h4>

src/js/controllers/index.js

@@ -425,19 +425,47 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     });
   };
 
+  self.summarizeOutputs = function(tx, formatAmount) {
+    tx.showSingle = true;
+    if (tx.outputs) {
+      tx.showSingle = false;
+      tx.outputs.details = lodash.clone(tx.outputs);
+      tx.amount = lodash.reduce(tx.outputs.details, function(total, o) {
+        formatAmount(o);
+        return total + o.amount;
+      }, 0);
+      tx.outputs.summary = {
+        amount: tx.amount,
+        message: tx.message,
+        isSummary: true,
+        showDetails: false,
+        recipientCount: tx.outputs.details.length
+      };
+      formatAmount(tx.outputs.summary);
+      if (tx.outputs.length === 1 && !tx.outputs[0].message) {
+        tx.showSingle = true;
+        tx.toAddress = tx.outputs[0].toAddress; // txproposal
+        tx.address = tx.outputs[0].address;     // txhistory
+      }
+    }
+  };
+
   self.setPendingTxps = function(txps) {
     var config = configService.getSync().wallet.settings;
     self.pendingTxProposalsCountForUs = 0;
     lodash.each(txps, function(tx) {
-      var amount = tx.amount * self.satToUnit;
+      function formatAmount(tx) {
-      tx.amountStr = profileService.formatAmount(tx.amount) + ' ' + config.unitName;
+        tx.amountStr = profileService.formatAmount(tx.amount) + ' ' + config.unitName;
+        tx.alternativeAmount = rateService.toFiat(tx.amount, config.alternativeIsoCode) ? rateService.toFiat(tx.amount, config.alternativeIsoCode).toFixed(2) : 'N/A';
+        tx.alternativeAmountStr = tx.alternativeAmount + " " + config.alternativeIsoCode;
+      };
+
+      self.summarizeOutputs(tx, formatAmount);
+      formatAmount(tx);
+
       tx.feeStr = profileService.formatAmount(tx.fee) + ' ' + config.unitName;
-      tx.alternativeAmount = rateService.toFiat(tx.amount, config.alternativeIsoCode) ? rateService.toFiat(tx.amount, config.alternativeIsoCode).toFixed(2) : 'N/A';
-      tx.alternativeAmountStr = tx.alternativeAmount + " " + config.alternativeIsoCode;
       tx.alternativeIsoCode = config.alternativeIsoCode;
 
-
-
       var action = lodash.find(tx.actions, {
         copayerId: self.copayerId
       });
@@ -476,10 +504,15 @@ angular.module('copayApp.controllers').controller('indexController', function($r
         tx.time = now;
 
       tx.rateTs = Math.floor((tx.ts || now) / 1000);
-      tx.amountStr = profileService.formatAmount(tx.amount); //$filter('noFractionNumber')(
       if (tx.fees)
         tx.feeStr = profileService.formatAmount(tx.fees) + ' ' + config.unitName;
 
+      function formatAmount(tx) {
+        tx.amountStr = profileService.formatAmount(tx.amount); //$filter('noFractionNumber')(
+      };
+
+      self.summarizeOutputs(tx, formatAmount);
+      formatAmount(tx);
       if (c < self.limitHistory) {
         self.txHistory.push(tx);
         c++;

src/js/controllers/walletHome.js

@@ -364,6 +364,10 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
         self.copyAddress(addr);
       };
 
+      $scope.toggleOutputDetails = function(summary) {
+        summary.showDetails = !summary.showDetails;
+      };
+
       $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
       };
@@ -1049,6 +1053,10 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
       };
+
+      $scope.toggleOutputDetails = function(summary) {
+        summary.showDetails = !summary.showDetails;
+      };
     };
 
     var modalInstance = $modal.open({