Gh1090 improve transaction previews (#1540)

* improve transactiondashboard preview #1190 * Update src/language/en-US.json Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es> * update mosaic list tooltip Co-authored-by: Xavi Artigas <xavierartigas@yahoo.es>
symbol · Jun 16, 2021 · 12a0d3d · 12a0d3d
1 parent 71973bd
commit 12a0d3d
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 3 deletions.
diff --git a/src/components/AmountDisplay/AmountDisplay.vue b/src/components/AmountDisplay/AmountDisplay.vue
@@ -3,6 +3,17 @@
         <span :class="['integer-part', size]">{{ integerPart }}</span>
         <span :class="['fractional-part', size]">{{ fractionalPart }}</span>
         <span v-if="showTicker" :class="['ticker', size]">&nbsp;({{ displayedTicker }})</span>
+
+        <div v-if="hasCustomMosaic" class="tooltip">
+            <img :src="mosaicImage" class="warning-icon" />
+            <div class="tooltiptext">
+                <div v-for="mosaic in mosaicList" :key="mosaic.id">
+                    {{ `${'- ' + mosaic.id + ': ' + mosaic.amount}` }}
+                </div>
+            </div>
+        </div>
+
+        <Icon v-if="hasMessage" type="md-mail" class="coloring" />
     </span>
 </template>
 
@@ -35,5 +46,48 @@ export default class AmountDisplay extends AmountDisplayTs {}
     .fractional-part {
         opacity: 0.4;
     }
+    .coloring {
+        color: #44004e;
+        padding: 2px;
+    }
+    .warning-icon {
+        height: 0.2rem;
+    }
+    .tooltip {
+        position: relative;
+        display: inline-block;
+    }
+
+    .tooltip .tooltiptext {
+        visibility: hidden;
+        background-color: #555;
+        color: #fff;
+        text-align: center;
+        border-radius: 6px;
+        padding: 6px 5px;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 50%;
+        margin-left: -60px;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+
+    .tooltip .tooltiptext::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #555 transparent transparent transparent;
+    }
+
+    .tooltip:hover .tooltiptext {
+        visibility: visible;
+        opacity: 1;
+    }
 }
 </style>
diff --git a/src/components/AmountDisplay/AmountDisplayTs.ts b/src/components/AmountDisplay/AmountDisplayTs.ts
@@ -17,6 +17,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfigurationModel';
 import { mapGetters } from 'vuex';
+import { officialIcons } from '@/views/resources/Images';
 
 // configuration
 
@@ -37,9 +38,12 @@ export class AmountDisplayTs extends Vue {
     @Prop({ default: '' }) ticker: string;
 
     @Prop({ default: 'normal' }) size: 'normal' | 'smaller' | 'bigger' | 'biggest';
+    @Prop({ default: false }) hasMessage: boolean;
+    @Prop({ default: false }) hasCustomMosaic: boolean;
+    @Prop({ default: () => [] }) mosaicList: any[];
 
     public networkConfiguration: NetworkConfigurationModel;
-
+    private mosaicImage = officialIcons.mosaic;
     /// region computed properties getter/setter
     get integerPart(): string {
         return this.value >= 0 ? Math.floor(this.value).toLocaleString() : '-' + Math.floor(this.value * -1).toLocaleString();

diff --git a/src/components/MosaicAmountDisplay/MosaicAmountDisplay.vue b/src/components/MosaicAmountDisplay/MosaicAmountDisplay.vue
@@ -1,6 +1,15 @@
 <template>
     <span :class="['amount', 'overflow_ellipsis', color]">
-        <AmountDisplay :value="amount" :decimals="divisibility" :size="size" :show-ticker="showTicker" :ticker="ticker" />
+        <AmountDisplay
+            :value="amount"
+            :decimals="divisibility"
+            :size="size"
+            :show-ticker="showTicker"
+            :ticker="ticker"
+            :has-message="hasMessage"
+            :has-custom-mosaic="hasCustomMosaic"
+            :mosaic-list="mosaicList"
+        />
     </span>
 </template>
 

diff --git a/src/components/MosaicAmountDisplay/MosaicAmountDisplayTs.ts b/src/components/MosaicAmountDisplay/MosaicAmountDisplayTs.ts
@@ -67,6 +67,21 @@ export class MosaicAmountDisplayTs extends Vue {
     })
     showTicker: false;
 
+    @Prop({
+        default: false,
+    })
+    hasMessage: boolean;
+
+    @Prop({
+        default: false,
+    })
+    hasCustomMosaic: boolean;
+
+    @Prop({
+        default: () => [],
+    })
+    mosaicList: any[];
+
     private mosaics: MosaicModel[];
 
     private networkCurrency: NetworkCurrencyModel;

diff --git a/src/components/TransactionList/TransactionRow/TransactionRow.vue b/src/components/TransactionList/TransactionRow/TransactionRow.vue
@@ -18,6 +18,9 @@
                 :absolute-amount="getAmount()"
                 :color="getAmountColor()"
                 :show-ticker="isAmountShowTicker()"
+                :has-message="hasMessage"
+                :has-custom-mosaic="!!customAmount || transaction.mosaics.length > 1"
+                :mosaic-list="getMosaicList(transaction.mosaics)"
             />
             <span v-else>N/A</span>
         </div>

diff --git a/src/components/TransactionList/TransactionRow/TransactionRowTs.ts b/src/components/TransactionList/TransactionRow/TransactionRowTs.ts
@@ -17,6 +17,7 @@
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { mapGetters } from 'vuex';
 import {
+    Mosaic,
     AccountAddressRestrictionTransaction,
     AccountMetadataTransaction,
     AggregateTransaction,
@@ -45,6 +46,8 @@ import { TransactionView } from '@/core/transactions/TransactionView';
 import { NetworkConfigurationModel } from '../../../core/database/entities/NetworkConfigurationModel';
 import { ProfileModel } from '@/core/database/entities/ProfileModel';
 import { DateTimeFormatter } from '@js-joda/core';
+import { MosaicModel } from '@/core/database/entities/MosaicModel';
+import { NetworkCurrencyModel } from '@/core/database/entities/NetworkCurrencyModel';
 import { AccountModel } from '@/core/database/entities/AccountModel';
 import { TransactionStatus as TransactionStatusEnum } from '@/core/transactions/TransactionStatus';
 
@@ -58,6 +61,8 @@ import { TransactionStatus as TransactionStatusEnum } from '@/core/transactions/
         explorerBaseUrl: 'app/explorerUrl',
         networkConfiguration: 'network/networkConfiguration',
         currentProfile: 'profile/currentProfile',
+        mosaics: 'mosaic/mosaics',
+        networkCurrency: 'mosaic/networkCurrency',
         currentAccount: 'account/currentAccount',
         currentAccountMultisigInfo: 'account/currentAccountMultisigInfo',
     }),
@@ -101,6 +106,9 @@ export class TransactionRowTs extends Vue {
      */
     protected timeHelpers: TimeHelpers = TimeHelpers;
 
+    private mosaics: MosaicModel[];
+    private networkCurrency: NetworkCurrencyModel;
+
     /**
      * Currently active account
      * @see {Store.Account}
@@ -188,7 +196,8 @@ export class TransactionRowTs extends Vue {
         if (this.transaction.type === TransactionType.TRANSFER) {
             // We may prefer XYM over other mosaic if XYM is 2nd+
             const transferTransaction = this.transaction as TransferTransaction;
-            const amount = (transferTransaction.mosaics.length && transferTransaction.mosaics[0].amount.compact()) || 0;
+            const amount =
+                (transferTransaction.mosaics.length && transferTransaction.mosaics[0].amount.compact()) || this.customAmount || 0;
             if (!this.isIncomingTransaction()) {
                 return -amount;
             }
@@ -361,4 +370,33 @@ export class TransactionRowTs extends Vue {
                 .format(DateTimeFormatter.ofPattern('yyyy-MM-dd HH:mm:ss'));
         }
     }
+
+    get hasMessage() {
+        return !!(this.transaction as TransferTransaction).message.payload.length;
+    }
+    private getMosaicList(mosaics: Mosaic[]): any[] {
+        const mosaicList = [];
+        mosaics.forEach((entry) => {
+            const mosaic = this.mosaics.find((m) => m.mosaicIdHex == entry.id.toHex());
+            const divisibility = mosaic ? mosaic.divisibility : this.networkConfiguration.maxMosaicDivisibility;
+            const amount = entry.amount.compact() / Math.pow(10, divisibility);
+            const id = (mosaic && mosaic.name) || entry.id.toHex();
+            mosaicList.push({ id, amount });
+        });
+        return mosaicList;
+    }
+
+    get customAmount() {
+        const transferTransaction = this.transaction as TransferTransaction;
+        let amount = (transferTransaction.mosaics.length && transferTransaction.mosaics[0].amount.compact()) || 0;
+        if (transferTransaction.mosaics.length > 1 && amount == 0) {
+            for (const mosaic of transferTransaction.mosaics) {
+                if (!!mosaic.amount.compact()) {
+                    amount = mosaic.amount.compact();
+                    break;
+                }
+            }
+            return amount;
+        }
+    }
 }
diff --git a/src/language/en-US.json b/src/language/en-US.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "Opted-in NEM NIS1 account",
     "show_details": "Show details",
     "hide_details": "Hide details",
+    "view_message": "View message",
     "transaction_signed": "Signed Successfully"
 }
diff --git a/src/language/ja-JP.json b/src/language/ja-JP.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "オプトイン済みのNEM NIS1アカウント",
     "show_details": "詳細を表示",
     "hide_details": "隠す",
+    "view_message": "メッセージを見る",
     "transaction_signed": "正常に署名されました"
 }
diff --git a/src/language/zh-CN.json b/src/language/zh-CN.json
@@ -1121,5 +1121,6 @@
     "optin_postlaunch_tx_nis_address": "选择加入NEM NIS1账户",
     "show_details": "显示详细信息",
     "hide_details": "隐藏详细信息",
+    "view_message": "查看留言",
     "transaction_signed": "已签"
 }