fix: add timelock status to detail screen and update multipayment tab…

…le (ArkEcosystemArchive#774)
developerfred · Nov 1, 2019 · da069b1 · da069b1
1 parent 32ed352
commit da069b1
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 41 deletions.
diff --git a/__tests__/e2e/specs/wallet_spec.js b/__tests__/e2e/specs/wallet_spec.js
@@ -135,8 +135,7 @@ describe("Wallet", () => {
   it("should not show the container if the wallet is not voting", () => {
     cy.visit("wallets/AUDud8tvyVZa67p3QY7XPRUTjRGnWQQ9Xv");
 
-    cy.get(".WalletVote")
-      .should("not.exist")
+    cy.get(".WalletVote").should("not.exist");
   });
 
   it("should show delegate information", () => {

diff --git a/src/components/SelectionType.vue b/src/components/SelectionType.vue
@@ -80,12 +80,32 @@ export default class SelectionType extends Vue {
     { key: "TIMELOCK", type: CoreTransaction.TIMELOCK, typeGroup: TypeGroupTransaction.CORE },
     { key: "TIMELOCK_CLAIM", type: CoreTransaction.TIMELOCK_CLAIM, typeGroup: TypeGroupTransaction.CORE },
     { key: "TIMELOCK_REFUND", type: CoreTransaction.TIMELOCK_REFUND, typeGroup: TypeGroupTransaction.CORE },
-    { key: "BUSINESS_REGISTRATION", type: MagistrateTransaction.BUSINESS_REGISTRATION, typeGroup: TypeGroupTransaction.MAGISTRATE },
-    { key: "BUSINESS_RESIGNATION", type: MagistrateTransaction.BUSINESS_RESIGNATION, typeGroup: TypeGroupTransaction.MAGISTRATE },
+    {
+      key: "BUSINESS_REGISTRATION",
+      type: MagistrateTransaction.BUSINESS_REGISTRATION,
+      typeGroup: TypeGroupTransaction.MAGISTRATE,
+    },
+    {
+      key: "BUSINESS_RESIGNATION",
+      type: MagistrateTransaction.BUSINESS_RESIGNATION,
+      typeGroup: TypeGroupTransaction.MAGISTRATE,
+    },
     { key: "BUSINESS_UPDATE", type: MagistrateTransaction.BUSINESS_UPDATE, typeGroup: TypeGroupTransaction.MAGISTRATE },
-    { key: "BRIDGECHAIN_REGISTRATION", type: MagistrateTransaction.BRIDGECHAIN_REGISTRATION, typeGroup: TypeGroupTransaction.MAGISTRATE },
-    { key: "BRIDGECHAIN_RESIGNATION", type: MagistrateTransaction.BRIDGECHAIN_RESIGNATION, typeGroup: TypeGroupTransaction.MAGISTRATE },
-    { key: "BRIDGECHAIN_UPDATE", type: MagistrateTransaction.BRIDGECHAIN_UPDATE, typeGroup: TypeGroupTransaction.MAGISTRATE },
+    {
+      key: "BRIDGECHAIN_REGISTRATION",
+      type: MagistrateTransaction.BRIDGECHAIN_REGISTRATION,
+      typeGroup: TypeGroupTransaction.MAGISTRATE,
+    },
+    {
+      key: "BRIDGECHAIN_RESIGNATION",
+      type: MagistrateTransaction.BRIDGECHAIN_RESIGNATION,
+      typeGroup: TypeGroupTransaction.MAGISTRATE,
+    },
+    {
+      key: "BRIDGECHAIN_UPDATE",
+      type: MagistrateTransaction.BRIDGECHAIN_UPDATE,
+      typeGroup: TypeGroupTransaction.MAGISTRATE,
+    },
   ];
   private transactionType: ITransactionType = { key: "ALL", type: -1 };
   private selectOpen: boolean = false;

diff --git a/src/components/links/LinkWallet.vue b/src/components/links/LinkWallet.vue
@@ -44,9 +44,7 @@
         </RouterLink>
       </template>
 
-      <span v-else-if="type === coreTransaction.SECOND_SIGNATURE">{{
-        $t("TRANSACTION.TYPES.SECOND_SIGNATURE")
-      }}</span>
+      <span v-else-if="type === coreTransaction.SECOND_SIGNATURE">{{ $t("TRANSACTION.TYPES.SECOND_SIGNATURE") }}</span>
       <span v-else-if="type === coreTransaction.DELEGATE_REGISTRATION">{{
         $t("TRANSACTION.TYPES.DELEGATE_REGISTRATION")
       }}</span>

diff --git a/src/components/tables/mobile/Transactions.vue b/src/components/tables/mobile/Transactions.vue
@@ -51,7 +51,12 @@
             {{ $t("TRANSACTION.AMOUNT") }}
           </div>
           <div>
-            <TransactionAmount :transaction="transaction" :type="transaction.type" :type-group="transaction.typeGroup" tooltip-placement="left" />
+            <TransactionAmount
+              :transaction="transaction"
+              :type="transaction.type"
+              :type-group="transaction.typeGroup"
+              tooltip-placement="left"
+            />
           </div>
         </div>
 
@@ -60,7 +65,12 @@
             {{ $t("TRANSACTION.FEE") }}
           </div>
           <div>
-            <TransactionAmount :transaction="transaction" :is-fee="true" :type-group="transaction.typeGroup" tooltip-placement="left" />
+            <TransactionAmount
+              :transaction="transaction"
+              :is-fee="true"
+              :type-group="transaction.typeGroup"
+              tooltip-placement="left"
+            />
           </div>
         </div>
 
@@ -81,7 +91,7 @@
               v-tooltip="{
                 content: readableNumber(transaction.confirmations) + ' ' + $t('COMMON.CONFIRMATIONS'),
                 trigger: 'hover click',
-                placement: 'left'
+                placement: 'left',
               }"
             >
               {{ $t("TRANSACTION.WELL_CONFIRMED") }}

diff --git a/src/components/tables/mobile/TransactionsDetail.vue b/src/components/tables/mobile/TransactionsDetail.vue
@@ -49,7 +49,12 @@
             {{ $t("TRANSACTION.AMOUNT") }}
           </div>
           <div>
-            <TransactionAmount :transaction="transaction" :type="transaction.type" :type-group="transaction.typeGroup" tooltip-placement="left" />
+            <TransactionAmount
+              :transaction="transaction"
+              :type="transaction.type"
+              :type-group="transaction.typeGroup"
+              tooltip-placement="left"
+            />
           </div>
         </div>
 

diff --git a/src/components/transaction/Details.vue b/src/components/transaction/Details.vue
@@ -31,7 +31,9 @@
         <div class="list-row-border-b">
           <div class="mr-4">{{ $t("TRANSACTION.AMOUNT") }}</div>
           <div
-            v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.MULTI_PAYMENT"
+            v-if="
+              transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.MULTI_PAYMENT
+            "
             v-tooltip="{
               trigger: 'hover click',
               content: price ? readableCurrency(multipaymentAmount, price) : '',
@@ -80,12 +82,17 @@
           <div>{{ transaction.nonce }}</div>
         </div>
 
-        <div v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.IPFS" class="list-row-border-b">
+        <div
+          v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.IPFS"
+          class="list-row-border-b"
+        >
           <div class="mr-4">{{ $t("TRANSACTION.IPFS") }}</div>
           <div class="overflow-hidden break-all">{{ transaction.asset.ipfs }}</div>
         </div>
 
-        <div v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK">
+        <div
+          v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK"
+        >
           <div v-if="transaction.asset.lock.expiration.type === 1" class="list-row-border-b">
             <div class="mr-4">{{ $t("TRANSACTION.TIMELOCK.EXPIRATION") }}</div>
             <div>{{ readableTimestampFromEpoch(transaction.asset.lock.expiration.value) }}</div>
@@ -102,16 +109,34 @@
               {{ transaction.asset.lock.expiration.value }}
             </div>
           </div>
+
+          <div class="list-row-border-b-no-wrap">
+            <div class="mr-4">{{ $t("TRANSACTION.TIMELOCK.STATUS") }}</div>
+            <div v-if="timelockLink">
+              <LinkTransaction :id="timelockLink">{{ timelockStatus }}</LinkTransaction>
+            </div>
+            <div v-else>{{ timelockStatus }}</div>
+          </div>
         </div>
 
-        <div v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK_CLAIM" class="list-row-border-b">
+        <div
+          v-if="
+            transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK_CLAIM
+          "
+          class="list-row-border-b"
+        >
           <div class="mr-4">{{ $t("TRANSACTION.TIMELOCK.CLAIMED") }}</div>
           <div class="overflow-hidden break-all">
             <LinkTransaction :id="transaction.asset.claim.lockTransactionId" />
           </div>
         </div>
 
-        <div v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK_REFUND" class="list-row-border-b">
+        <div
+          v-if="
+            transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.TIMELOCK_REFUND
+          "
+          class="list-row-border-b"
+        >
           <div class="mr-4">{{ $t("TRANSACTION.TIMELOCK.REFUND") }}</div>
           <div class="overflow-hidden break-all">
             <LinkTransaction :id="transaction.asset.refund.lockTransactionId" />
@@ -127,7 +152,10 @@
       </div>
     </section>
 
-    <section v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.MULTI_SIGNATURE" class="page-section py-5 md:py-10 mb-5">
+    <section
+      v-if="transaction.typeGroup === typeGroupTransaction.CORE && transaction.type === coreTransaction.MULTI_SIGNATURE"
+      class="page-section py-5 md:py-10 mb-5"
+    >
       <div class="px-5 sm:px-10">
         <div class="list-row-border-b">
           <div class="mr-4">{{ $t("TRANSACTION.MULTI_SIGNATURE.ADDRESS") }}</div>
@@ -169,11 +197,13 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { TranslateResult } from "vue-i18n";
 import { mapGetters } from "vuex";
 import { ITransaction } from "@/interfaces";
 import { CoreTransaction, MagistrateTransaction, TypeGroupTransaction } from "@/enums";
 import { LinkTransaction } from "@/components/links";
 import CryptoCompareService from "@/services/crypto-compare";
+import TransactionService from "@/services/transaction";
 
 @Component({
   components: {
@@ -192,6 +222,8 @@ export default class TransactionDetails extends Vue {
   private currencySymbol: string;
   private height: number;
   private multipaymentAmount: number | null = null;
+  private timelockStatus: TranslateResult | null = null;
+  private timelockLink: string | null = null;
 
   get confirmations() {
     return this.initialBlockHeight ? this.height - this.initialBlockHeight : this.transaction.confirmations;
@@ -232,6 +264,7 @@ export default class TransactionDetails extends Vue {
   public async onTransactionChanged() {
     this.updatePrice();
     this.handleMultipayment();
+    this.getTimelockStatus();
     this.setInitialBlockHeight();
   }
 
@@ -250,6 +283,7 @@ export default class TransactionDetails extends Vue {
   public async mounted() {
     this.updatePrice();
     this.handleMultipayment();
+    this.getTimelockStatus();
   }
 
   private async updatePrice() {
@@ -261,11 +295,34 @@ export default class TransactionDetails extends Vue {
   }
 
   private handleMultipayment() {
-    if (this.transaction.type === CoreTransaction.MULTI_PAYMENT && this.transaction.typeGroup === TypeGroupTransaction.CORE) {
+    if (
+      this.transaction.type === CoreTransaction.MULTI_PAYMENT &&
+      this.transaction.typeGroup === TypeGroupTransaction.CORE
+    ) {
       // @ts-ignore
       this.multipaymentAmount = this.calculateMultipaymentAmount(this.transaction);
     }
   }
+
+  private async getTimelockStatus() {
+    if (
+      this.transaction.type === CoreTransaction.TIMELOCK &&
+      this.transaction.typeGroup === TypeGroupTransaction.CORE
+    ) {
+      const response = await TransactionService.findUnlockedForLocks([this.transaction.id]);
+      if (response.data.length === 0) {
+        this.timelockStatus = this.$t("TRANSACTION.TIMELOCK.OPEN");
+      } else if (response.data[0].type === CoreTransaction.TIMELOCK_CLAIM) {
+        this.timelockStatus = this.$t("TRANSACTION.TIMELOCK.CLAIMED");
+        this.timelockLink = response.data[0].id;
+      } else if (response.data[0].type === CoreTransaction.TIMELOCK_REFUND) {
+        this.timelockStatus = this.$t("TRANSACTION.TIMELOCK.REFUNDED");
+        this.timelockLink = response.data[0].id;
+      }
+    } else {
+      this.timelockStatus = this.$t("TRANSACTION.TIMELOCK.UNKNOWN");
+    }
+  }
 }
 </script>
 

diff --git a/src/components/utils/TransactionAmount.vue b/src/components/utils/TransactionAmount.vue
@@ -54,24 +54,32 @@ export default class TransactionAmount extends Vue {
 
   get isTransfer() {
     if (this.type !== undefined) {
-      return (this.type === CoreTransaction.TRANSFER || this.type === CoreTransaction.TIMELOCK) && this.typeGroup === TypeGroupTransaction.CORE;
+      return (
+        (this.type === CoreTransaction.TRANSFER || this.type === CoreTransaction.TIMELOCK) &&
+        this.typeGroup === TypeGroupTransaction.CORE
+      );
     }
     return false;
   }
 
   get isOutgoing() {
     if (this.transaction.type === CoreTransaction.TIMELOCK && this.typeGroup === TypeGroupTransaction.CORE) {
       return (
-        (this.$route.params.address !== this.transaction.recipient && this.transaction.lockStatus === CoreTransaction.TIMELOCK_CLAIM) ||
-        (this.$route.params.address !== this.transaction.sender && this.transaction.lockStatus === CoreTransaction.TIMELOCK_REFUND)
+        (this.$route.params.address !== this.transaction.recipient &&
+          this.transaction.lockStatus === CoreTransaction.TIMELOCK_CLAIM) ||
+        (this.$route.params.address !== this.transaction.sender &&
+          this.transaction.lockStatus === CoreTransaction.TIMELOCK_REFUND)
       );
     }
     return this.transaction.sender === this.$route.params.address;
   }
 
   get isIncoming() {
     if (this.transaction.type === CoreTransaction.TIMELOCK && this.typeGroup === TypeGroupTransaction.CORE) {
-      return this.$route.params.address !== this.transaction.sender && this.transaction.lockStatus === CoreTransaction.TIMELOCK_CLAIM;
+      return (
+        this.$route.params.address !== this.transaction.sender &&
+        this.transaction.lockStatus === CoreTransaction.TIMELOCK_CLAIM
+      );
     }
     return this.transaction.recipient === this.$route.params.address && this.isTransfer;
   }

diff --git a/src/components/utils/pagination/Pagination.vue b/src/components/utils/pagination/Pagination.vue
@@ -23,7 +23,13 @@
     <div class="flex justify-center">
       <PaginationNavigationButton :is-visible="showFirst" type="first" class="mr-2" @click="emitFirst" />
 
-      <PaginationNavigationButton :is-visible="showPrevious" type="previous" :class="{ 'no-margin': !showNext }" class="mr-2" @click="emitPrevious" />
+      <PaginationNavigationButton
+        :is-visible="showPrevious"
+        type="previous"
+        :class="{ 'no-margin': !showNext }"
+        class="mr-2"
+        @click="emitPrevious"
+      />
 
       <div class="PaginationBar--large relative">
         <PaginationPageInput
@@ -62,7 +68,13 @@
         </div>
       </div>
 
-      <PaginationNavigationButton :is-visible="showNext" type="next" :class="{ 'no-margin': !showPrevious }" class="ml-2" @click="emitNext" />
+      <PaginationNavigationButton
+        :is-visible="showNext"
+        type="next"
+        :class="{ 'no-margin': !showPrevious }"
+        class="ml-2"
+        @click="emitNext"
+      />
 
       <PaginationNavigationButton :is-visible="showLast" type="last" class="ml-2" @click="emitLast" />
     </div>

diff --git a/src/components/wallet/Details.vue b/src/components/wallet/Details.vue
@@ -70,11 +70,7 @@
       <div v-if="view === 'public' && hasLockedBalance" class="flex-none border-r border-grey-dark px-9">
         <div class="flex items-center text-grey mb-2">
           {{ $t("WALLET.LOCKED_BALANCE") }}
-          <SvgIcon
-            class="ml-2"
-            name="locked-balance"
-            view-box="0 0 16 17"
-          />
+          <SvgIcon class="ml-2" name="locked-balance" view-box="0 0 16 17" />
         </div>
         <span
           v-tooltip="{
@@ -171,11 +167,7 @@
           <div v-if="view === 'public' && hasLockedBalance" class="md:w-1/2 px-6 w-full">
             <div class="flex items-center text-grey mb-2">
               {{ $t("WALLET.LOCKED_BALANCE") }}
-              <SvgIcon
-                class="ml-2"
-                name="locked-balance"
-                view-box="0 0 16 17"
-              />
+              <SvgIcon class="ml-2" name="locked-balance" view-box="0 0 16 17" />
             </div>
             <span
               v-tooltip="{

diff --git a/src/locales/en-GB.ts b/src/locales/en-GB.ts
@@ -64,7 +64,10 @@ export default {
       BLOCKHEIGHT: "Expiration blockheight",
       CLAIMED: "Claimed transaction",
       EXPIRATION: "Expiration",
+      OPEN: "Open lock",
       REFUND: "Refunded transaction",
+      STATUS: "Timelock status",
+      UNKNOWN: "Unknown",
     },
     TYPE: "Transaction type",
     TYPES: {
@@ -212,7 +215,7 @@ export default {
     DEVELOPMENT: "Development",
     SUPPLY: "Supply",
     MARKET_CAP: "Market Cap",
-    TESTNET: "Testnet Local"
+    TESTNET: "Testnet Local",
   },
 
   FOOTER: {