handle multiple outputs in transaction proposal

public/views/includes/output.html

@@ -0,0 +1,20 @@
+<div class="ng-animate-disabled row collapse line-b" ng-class="text-gray'">
+  <ul class="no-bullet size-14 m0">
+    <li class="line-b p10 oh">
+    </li>    
+    <li 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}}</span>
+    </li>
+    <li class="line-b p10">
+      <span class="text-gray" translate>Amount</span>:
+      <span class="right">{{output.amountStr}}
+        <span 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>
+  </ul>
+</div>

public/views/includes/transaction.html

@@ -16,8 +16,16 @@
           <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>
+        <span ng-if="tx.outputs">
-        {{tx.toAddress}}
+          {{tx.outputs[0].toAddress.substring(0, 16)+'...'}}
+          <span translate>and </span>
+          {{tx.outputs.length - 1}}
+          <span translate> more</span>
+        </span>
+        <span ng-if="!tx.outputs">
+          <contact address="{{tx.toAddress}}" ng-hide="tx.merchant"> </contact>
+          {{tx.toAddress}}
+        </span>
       </div>
       <div class="ellipsis text-gray size-14">
         {{tx.message}}

public/views/modals/txp-details.html

@@ -16,7 +16,8 @@
   <ul class="no-bullet size-14 m0">
     <li class="line-b p10 oh" ng-click="copyAddress(tx.toAddress)">
       <span class="text-gray" translate>To</span>:
-      <span class="right enable_text_select">{{tx.toAddress}}</span>
+      <span class="right" translate ng-if="tx.outputs">See details below</span>
+      <span class="right enable_text_select" ng-if="!tx.outputs">{{tx.toAddress}}</span>
     </li>
     <li class="line-b p10">
       <span class="text-gray" translate>Amount</span>:
@@ -147,5 +148,11 @@
     </button>
   </div>
 
+  <div ng-if="tx.outputs">
+    <div ng-repeat="output in tx.outputs"
+      ng-include="'views/includes/output.html'">
+    </div>
+  </div>
+
   <div class="extra-margin-bottom"></div>
 </div>

src/js/controllers/index.js

@@ -429,15 +429,53 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     var config = configService.getSync().wallet.settings;
     self.pendingTxProposalsCountForUs = 0;
     lodash.each(txps, function(tx) {
-      var amount = tx.amount * self.satToUnit;
+      // gregg hack test data
-      tx.amountStr = profileService.formatAmount(tx.amount) + ' ' + config.unitName;
+      if (!tx.outputs) {
+        tx.outputs = [
+          { toAddress: '2MzCXF7QW4ArgiwDTh12qU3ymWNZzNsrbLo', amount: 123456, message: 'Bitography, Inc.' },
+          { toAddress: '2N9JWQkJxbpbW6M4sVaz2Yvn4yczTZgZZh6', amount:  76543, message: 'Chipotle @ Buckhead' },
+          { toAddress: '2NFvpdtduhJzQaJcsx3Hf1oJ1U4ouUfLiFG', amount: 543210, message: 'Grand Decentral' }
+        ];
+      }
+      // gregg hack test data
+
+      function formatAmount(obj) {
+        var amount = obj.amount * self.satToUnit;
+        obj.amountStr = profileService.formatAmount(obj.amount) + ' ' + config.unitName;
+        obj.alternativeAmount = rateService.toFiat(obj.amount, config.alternativeIsoCode) ? rateService.toFiat(obj.amount, config.alternativeIsoCode).toFixed(2) : 'N/A';
+        obj.alternativeAmountStr = obj.alternativeAmount + " " + config.alternativeIsoCode;
+      };
+
+      if (tx.outputs) {
+        if (tx.outputs.length === 1) {
+          tx.amount = tx.outputs[0].amount;
+          tx.toAddress = tx.outputs[0].toAddress;
+          tx.message += (' ' + tx.outputs[0].message);
+          delete tx.outputs;
+        } else {
+          tx.amount = lodash.reduce(tx.outputs, function(total, o) {
+            return total + o.amount;
+          }, 0);
+          var cumAmount = 0;
+          var cumPercent = 0;
+          var sorted = lodash.sortBy(tx.outputs, function(o) {
+            return -1 * o.amount; // descending order
+          });
+          tx.outputs = lodash.transform(sorted, function(outputs, o) {
+            cumAmount += o.amount;
+            cumPercent += 100 * (o.amount / tx.amount);
+            o.cumAmount = cumAmount;
+            o.cumPercent = cumPercent;
+            formatAmount(o);
+            outputs.push(o);
+          }, []);
+        }
+      }
+      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
       });