Merge pull request #159 from aeternity/fix/transaction-item

Fix UI of pending tx item

src/popup/locales/en.json

@@ -187,9 +187,6 @@
     "recentTransactions": {
       "recentActivity": "Recent Activity",
       "viewAll": "View all",
-      "pendingStatus": "Pending",
-      "sentStatus": "Sent",
-      "receivedStatus": "Received",
       "noTransactionsFound": "No transactions found!"
     },
     "addFungibleToken": {
@@ -707,7 +704,10 @@
       "nameUpdate": "name update tx",
       "createTx": "create tx",
       "clear": "Clear filter",
-      "apply": "Apply filter"
+      "apply": "Apply filter",
+      "sent": "Sent",
+      "received": "Received",
+      "pending": "Pending"
     },
     "utilities": {
       "heading": "Utilities",

src/popup/router/components/PendingTxs.vue

@@ -1,60 +1,48 @@
 <template>
   <div v-if="filteredPendings.length" data-cy="pending-txs">
-    <ae-list-item
-      v-for="tr in filteredPendings"
-      :key="tr.hash"
-      fill="neutral"
-      class="list-item-transaction"
-    >
-      <div class="holder">
-        <span class="amount" data-cy="amount">
-          {{ tr.amount }} {{ $t('pages.appVUE.aeid') }}
-          <span class="text">( {{ tr.amountCurrency }} {{ currentCurrency }} )</span>
-        </span>
-        <span class="status" data-cy="status">{{
-          $t('pages.recentTransactions.pendingStatus')
-        }}</span>
-        <span class="time" data-cy="time">{{ tr.time | formatDate }}</span>
-      </div>
-      <div class="holder">
-        <span class="url" data-cy="url">{{ tr.domain }}</span>
-        <span class="seeTransaction"><Eye /></span>
-      </div>
-    </ae-list-item>
+    <TransactionItem
+      v-for="transaction in filteredPendings"
+      :key="transaction.hash"
+      :transaction="transaction"
+    />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { setInterval, clearInterval } from 'timers';
-import { formatDate } from '../../utils';
-import Eye from '../../../icons/eye.svg?vue-component';
+import TransactionItem from './TransactionItem';
 
 export default {
-  components: {
-    Eye,
-  },
+  components: { TransactionItem },
   computed: {
     ...mapGetters(['transactions', 'currentCurrency']),
     filteredPendings() {
-      return this.transactions.pending.filter(({ amount, hash }) => !Number.isNaN(+amount) && hash);
+      return this.transactions.pending
+        .filter(({ amount, hash }) => !Number.isNaN(+amount) && hash)
+        .map(({ time, hash, tipUrl, ...t }) => ({
+          time,
+          hash,
+          tipUrl,
+          tx: { ...t },
+          pending: true,
+        }));
     },
   },
-  filters: { formatDate },
   created() {
     const checkMined = setInterval(() => this.checkPendingTxMined(), 2500);
     this.$once('hook:destroyed', () => clearInterval(checkMined));
   },
   methods: {
     async checkPendingTxMined() {
       await Promise.all(
-        this.transactions.pending.map(async ({ hash, type, amount, domain }) => {
+        this.transactions.pending.map(async ({ hash, type, amount, tipUrl }) => {
           const mined = await this.$store.state.sdk.poll(hash);
           if (!mined) return;
           const pending = this.transactions.pending.filter(p => p.hash !== hash);
           this.$store.commit('SET_PENDING_TXS', pending);
           if (type === 'tip')
-            this.$router.push({ name: 'success-tip', params: { amount, domain } });
+            this.$router.push({ name: 'success-tip', params: { amount, tipUrl } });
           if (type === 'spend')
             this.$router.push({ name: 'send', params: { redirectstep: 3, successtx: mined } });
         }),
@@ -63,48 +51,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '../../../common/variables';
-
-.list-item-transaction {
-  display: inline-block !important;
-  padding: 5px 0;
-  border-color: $bg-color !important;
-  text-decoration: none;
-  list-style: none;
-  cursor: default;
-  border-top: 1px solid transparent;
-
-  .holder {
-    display: flex;
-    justify-content: space-between;
-
-    .url {
-      display: inline-block;
-      width: 295px;
-      white-space: nowrap;
-      overflow: hidden !important;
-      text-overflow: ellipsis;
-      color: $accent-color;
-      font-size: 12px;
-      text-align: left;
-    }
-
-    .time {
-      color: $text-color !important;
-      font-size: 12px;
-    }
-
-    .amount {
-      color: $secondary-color !important;
-      font-size: 14px;
-    }
-
-    .status {
-      color: $text-color !important;
-      font-size: 14px;
-    }
-  }
-}
-</style>

src/popup/router/components/RecentTransactions.vue

@@ -14,7 +14,7 @@
           :dark="true"
           v-for="transaction in transactions.latest"
           :key="transaction.id"
-          :transactionData="transaction"
+          :transaction="transaction"
         ></TransactionItem>
       </ae-list>
     </div>

src/popup/router/components/TransactionItem.vue

@@ -1,113 +1,115 @@
 <template>
   <div>
-    <ae-list-item fill="neutral" class="list-item-transaction" :class="transactionData.hash">
+    <li fill="neutral" class="list-item-transaction">
       <div class="holder">
         <span class="amount">
           <span data-cy="amount">{{ txAmount }}</span>
           {{ $t('pages.appVUE.aeid') }}
-          <span class="text" data-cy="currency-amount"
-            >( {{ txAmountToCurrency }} {{ current.currency.toUpperCase() }} )</span
-          >
+          <span class="text" data-cy="currency-amount">
+            ( {{ txAmountToCurrency }} {{ current.currency.toUpperCase() }} )
+          </span>
         </span>
-        <span class="status">{{
-          txType == 'Sent'
-            ? $t('pages.recentTransactions.sentStatus')
-            : $t('pages.recentTransactions.receivedStatus')
-        }}</span>
-        <span class="time" data-cy="time">{{ transactionDate }}</span>
+        <span class="status">{{ status }}</span>
+        <span class="time" data-cy="time">{{ transaction.time | formatDate }}</span>
       </div>
       <div class="holder tx-info">
         <span class="url" @click="visitTipUrl">{{ tipUrl }}</span>
-        <span class="seeTransaction" @click="seeTx(transactionData.hash)">
+        <span class="seeTransaction" @click="seeTx()">
           <img src="../../../icons/eye.png" />
         </span>
       </div>
-    </ae-list-item>
+    </li>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { decode } from '@aeternity/aepp-sdk/es/tx/builder/helpers';
-import { convertToAE } from '../../utils/helper';
+import { aettosToAe } from '../../utils/helper';
 import { formatDate } from '../../utils';
 import openUrl from '../../utils/openUrl';
 
 export default {
-  props: ['transactionData', 'recent', 'dark'],
-  data() {
-    return {
-      status: '',
-      tipUrl: null,
-      tipAmount: 0,
-      tipComment: null,
-    };
+  props: {
+    transaction: {
+      type: Object,
+      required: true,
+    },
   },
+  data: () => ({ tip: null }),
+  filters: { formatDate },
   async created() {
-    await this.$watchUntilTruly(() => this.sdk);
-    this.getEventData();
+    if (!this.transaction.pending) {
+      await this.$watchUntilTruly(() => this.sdk);
+      this.getEventData();
+    }
   },
   computed: {
-    ...mapGetters(['account', 'popup', 'sdk', 'current', 'network', 'transactions', 'tipping']),
-    txType() {
+    ...mapGetters(['account', 'sdk', 'current', 'network']),
+    status() {
       if (
-        this.transactionData.tx.sender_id === this.account.publicKey ||
-        this.transactionData.tx.account_id === this.account.publicKey ||
-        this.transactionData.tx.owner_id === this.account.publicKey ||
-        this.transactionData.tx.caller_id === this.account.publicKey
+        this.transaction.tx.sender_id === this.account.publicKey ||
+        this.transaction.tx.account_id === this.account.publicKey ||
+        this.transaction.tx.owner_id === this.account.publicKey ||
+        this.transaction.tx.caller_id === this.account.publicKey
       ) {
-        return 'Sent';
+        return this.$t('pages.transactions.sent');
+      }
+      if (this.transaction.pending) {
+        return this.$t('pages.transactions.pending');
       }
-      return 'Received';
+      return this.$t('pages.transactions.received');
     },
     txAmount() {
-      const amount = this.transactionData.tx.amount ? this.transactionData.tx.amount : 0;
-      return convertToAE(amount).toFixed(2);
+      const amount = this.transaction.tx.amount ? this.transaction.tx.amount : 0;
+      return (+aettosToAe(amount)).toFixed(2);
     },
     txAmountToCurrency() {
-      const amount = this.transactionData.tx.amount ? this.transactionData.tx.amount : 0;
-      const { fee } = this.transactionData.tx;
-      const txamount = (amount + fee) / 10 ** 18;
+      const amount = this.transaction.tx.amount ? this.transaction.tx.amount : 0;
+      const fee = this.transaction.tx.fee || 0;
+      const txamount = aettosToAe(amount + fee);
       return (txamount * this.current.currencyRate).toFixed(2);
     },
-    transactionDate() {
-      return formatDate(this.transactionData.time);
+    tipUrl() {
+      return this.transaction.tipUrl ? this.transaction.tipUrl : this.tip;
     },
   },
   methods: {
     async getEventData() {
-      const { log } = await this.sdk.tx(this.transactionData.hash, true);
+      const { log } = await this.sdk.tx(this.transaction.hash, true);
       if (log && log.length) {
-        this.tipUrl = decode(log[0].data).toString();
-        this.tipAmount = convertToAE(log[0].topics[2]);
+        this.tip = decode(log[0].data).toString();
       }
     },
     visitTipUrl() {
       if (this.tipUrl) {
         openUrl(this.tipUrl);
       }
     },
-    seeTx(txHash) {
-      openUrl(`${this.network[this.current.network].explorerUrl}/transactions/${txHash}`);
+    seeTx() {
+      openUrl(
+        `${this.network[this.current.network].explorerUrl}/transactions/${this.transaction.hash}`,
+      );
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../../../common/variables';
-.list-item-transaction:first-child {
-  border-top: 1px solid $tx-border-color !important;
-}
 .list-item-transaction {
   display: inline-block;
   padding: 10px 0;
-  border-color: $bg-color !important;
+  border-color: $bg-color;
   text-decoration: none;
   list-style: none;
   cursor: default;
   border-top: 1px solid transparent;
 
+  &:first-child {
+    border-top: 1px solid $tx-border-color !important;
+  }
+
   .holder {
     display: flex;
     justify-content: space-between;
@@ -132,27 +134,33 @@ export default {
       text-align: left;
       cursor: pointer;
     }
+
     .seeTransaction {
       margin-left: 10px;
       cursor: pointer;
     }
+
     .time {
       color: $text-color !important;
       font-size: 12px;
       padding-top: 1px;
     }
+
     .date {
       color: $text-color !important;
       font-size: 12px;
       padding-top: 1px;
     }
+
     .amount {
       color: $secondary-color !important;
       font-size: 14px;
     }
+
     .text {
       color: $white-color !important;
     }
+
     .status {
       color: $white-color !important;
       margin-left: 4px;

src/popup/router/pages/Send.vue

@@ -296,7 +296,7 @@ export default {
         if (hash) {
           await this.$store.dispatch('setPendingTx', {
             hash,
-            amount: this.form.amount,
+            amount,
             time: Date.parse(new Date()),
             type: 'spend',
           });