feat: multipayment display modals details (#1810)

ArkEcosystem · Mar 14, 2020 · 7d8582e · 7d8582e
1 parent 6e0815e
commit 7d8582e
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 5 deletions.
diff --git a/...s__/unit/components/Transaction/TransactionConfirm/TransactionConfirmMultiPayment.spec.js b/...s__/unit/components/Transaction/TransactionConfirm/TransactionConfirmMultiPayment.spec.js
@@ -1,5 +1,6 @@
 import { createLocalVue, mount } from '@vue/test-utils'
 import installI18n from '../../../__utils__/i18n'
+import CurrencyMixin from '@/mixins/currency'
 import TransactionConfirmMultiPayment from '@/components/Transaction/TransactionConfirm/TransactionConfirmMultiPayment'
 
 const localVue = createLocalVue()
@@ -34,6 +35,7 @@ const createWrapper = (component, transaction) => {
       transaction
     },
     mocks: {
+      currency_toBuilder: jest.fn(CurrencyMixin.methods.currency_toBuilder),
       formatter_networkCurrency: jest.fn((amount) => amount),
       wallet_formatAddress: jest.fn((address) => `formatted-${address}`),
       wallet_name: jest.fn(wallet => wallet)

diff --git a/src/renderer/components/Transaction/TransactionConfirm/TransactionConfirmMultiPayment.vue b/src/renderer/components/Transaction/TransactionConfirm/TransactionConfirmMultiPayment.vue
@@ -16,9 +16,16 @@
       </span>
     </ListDividedItem>
 
+    <ListDividedItem
+      class="TransactionConfirmMultiPayment__amount"
+      :label="$t('TRANSACTION.MULTI_PAYMENT.TOTAL_AMOUNT')"
+    >
+      {{ formatter_networkCurrency(totalAmount) }}
+    </ListDividedItem>
+
     <ListDividedItem
       class="TransactionConfirmMultiPayment__recipients"
-      :label="$t('TRANSACTION.RECIPIENTS')"
+      :label="`${$t('TRANSACTION.RECIPIENTS')} - ${payments.length}`"
       item-value-class="items-center"
     >
       <TransactionMultiPaymentList
@@ -27,6 +34,22 @@
         readonly
       />
     </ListDividedItem>
+
+    <ListDividedItem
+      v-if="transaction.vendorField"
+      class="TransactionConfirmMultiPayment__vendorfield"
+      :label="$t('TRANSACTION.VENDOR_FIELD')"
+      item-value-class="w-full break-words"
+    >
+      {{ transaction.vendorField }}
+    </ListDividedItem>
+
+    <ListDividedItem
+      class="TransactionConfirmMultiPayment__fee"
+      :label="$t('TRANSACTION.FEE')"
+    >
+      {{ formatter_networkCurrency(transaction.fee) }}
+    </ListDividedItem>
   </ListDivided>
 </template>
 
@@ -53,6 +76,16 @@ export default {
       return this.wallet_formatAddress(this.currentWallet.address)
     },
 
+    totalAmount () {
+      const amount = this.currency_toBuilder(0)
+
+      for (const payment of this.payments) {
+        amount.add(payment.amount)
+      }
+
+      return amount.value
+    },
+
     payments () {
       return this.transaction.asset.payments
     }
@@ -63,6 +96,11 @@ export default {
 <style scoped>
 .TransactionConfirmMultiPayment__recipients {
   @apply .overflow-y-auto;
-  max-height: 200px;
+}
+</style>
+
+<style>
+.TransactionConfirmMultiPayment__recipients .InputEditableList__list {
+  max-height: 13rem;
 }
 </style>
diff --git a/src/renderer/components/Transaction/TransactionModal.vue b/src/renderer/components/Transaction/TransactionModal.vue
@@ -385,5 +385,6 @@ export default {
 .TransactionModalMultiPayment,
 .TransactionModalMultiSignature {
   min-width: 35rem;
+  max-height: 80vh;
 }
 </style>
diff --git a/src/renderer/components/Transaction/TransactionShow/TransactionShow.vue b/src/renderer/components/Transaction/TransactionShow/TransactionShow.vue
@@ -220,7 +220,8 @@
         v-if="transaction.vendorField"
         :value="transaction.vendorField"
         :label="$t('TRANSACTION.VENDOR_FIELD')"
-        item-value-class="max-w-xs break-words"
+        item-label-class="mb-auto"
+        item-value-class="max-w-xs break-words text-justify"
       />
 
       <ListDividedItem

diff --git a/src/renderer/i18n/locales/en-US.js b/src/renderer/i18n/locales/en-US.js
@@ -1060,9 +1060,10 @@ export default {
     },
     MULTI_PAYMENT: {
       BUTTON_ADD: 'Add',
-      WARNING_DUPLICATE: 'The address is already a recipient',
+      NO_RECIPIENTS: 'There are no recipients',
       RECIPIENTS: 'Recipients',
-      NO_RECIPIENTS: 'There are no recipients'
+      TOTAL_AMOUNT: 'Total amount',
+      WARNING_DUPLICATE: 'The address is already a recipient'
     },
     MULTI_SIGNATURE: {
       ADDRESS: 'Multisignature Address',