feat: locked balance for timelocks and vote refactor

developerfred · Sep 30, 2019 · bb001cc · bb001cc
1 parent c38719b
commit bb001cc
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 18 deletions.
diff --git a/src/components/wallet/Delegate.vue b/src/components/wallet/Delegate.vue
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <div class="list-row">
+    <div :class="isVoting ? 'list-row-border-b' : 'list-row'">
       <div>{{ $t("WALLET.DELEGATE.FORGED_BLOCKS") }}</div>
       <div v-if="delegate.blocks">
         <span>
@@ -87,6 +87,10 @@ export default class WalletDelegate extends Vue {
     return this.$store.getters["delegates/byPublicKey"](this.wallet.publicKey);
   }
 
+  get isVoting() {
+    return !!this.wallet.vote;
+  }
+
   get delegateStatus() {
     const activeThreshold = this.$store.getters["network/activeDelegates"];
     if (this.wallet.isResigned) {

diff --git a/src/components/wallet/Details.vue b/src/components/wallet/Details.vue
@@ -110,13 +110,46 @@
         </div>
       </div>
 
-      <div v-show="isVoting" v-if="view === 'public'" class="flex-none border-r border-grey-dark px-9">
-        <div class="text-grey mb-2">
-          {{ $t("WALLET.VOTING_FOR") }}
+      <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") }}
+          <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 0 21 18"
+            width="17"
+            height="16"
+            class="fill-current ml-2"
+          >
+            <g>
+              <defs>
+                <rect id="SVGID_1_" width="21" height="18" />
+              </defs>
+              <clipPath id="SVGID_2_">
+                <use xlink:href="#SVGID_1_" style="overflow:visible;" />
+              </clipPath>
+              <g>
+                <path
+                  d="M8.5,16.6c-1.3-0.9-2.3-2.1-2.9-3.6
+                H1.2C0.6,13,0,12.5,0,11.8V7c0-0.5,0.5-1,1-1h1V4c0-1,0.3-2,0.9-2.8C3.5,0.4,4.5,0,5.5,0c1,0,2,0.4,2.6,1.2c0.4,0.6,0.7,1.2,0.8,2
+                c3.8-2.2,8.7-1,11,2.8s1,8.7-2.8,11C14.4,18.5,11,18.4,8.5,16.6z M7,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C9.7,4,7,6.7,7,10z
+                M4,4v2h2.1C6.3,5.5,6.6,5.1,7,4.7V4c0-1.2-0.1-2.2-1.5-2.2S4,2.8,4,4z M13,11c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1s1,0.4,1,1v2h2
+                c0.6,0,1,0.4,1,1s-0.4,1-1,1H13z"
+                />
+              </g>
+            </g>
+          </svg>
         </div>
-        <LinkWallet v-if="votedDelegate.address" :address="votedDelegate.address">
-          <span class="text-lg text-white semibold truncate">{{ votedDelegate.username }}</span>
-        </LinkWallet>
+        <span
+          v-tooltip="{
+            trigger: 'hover click',
+            content: readableCurrency(wallet.lockedBalance || 0),
+          }"
+          class="text-lg text-white semibold"
+        >
+          {{ readableCrypto(wallet.lockedBalance, false) }}
+        </span>
       </div>
 
       <div class="flex-none px-8">
@@ -260,13 +293,45 @@
             </div>
           </div>
 
-          <div v-show="isVoting" v-if="view === 'public'" class="md:w-1/2 px-6 w-full">
-            <div class="text-grey mb-2">
-              {{ $t("WALLET.VOTING_FOR") }}
+          <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") }}
+              <svg
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="17"
+                height="16"
+                class="fill-current ml-2"
+              >
+                <g>
+                  <defs>
+                    <rect id="SVGID_1_" width="21" height="18" />
+                  </defs>
+                  <clipPath id="SVGID_2_">
+                    <use xlink:href="#SVGID_1_" style="overflow:visible;" />
+                  </clipPath>
+                  <g>
+                    <path
+                      d="M8.5,16.6c-1.3-0.9-2.3-2.1-2.9-3.6
+                    H1.2C0.6,13,0,12.5,0,11.8V7c0-0.5,0.5-1,1-1h1V4c0-1,0.3-2,0.9-2.8C3.5,0.4,4.5,0,5.5,0c1,0,2,0.4,2.6,1.2c0.4,0.6,0.7,1.2,0.8,2
+                    c3.8-2.2,8.7-1,11,2.8s1,8.7-2.8,11C14.4,18.5,11,18.4,8.5,16.6z M7,10c0,3.3,2.7,6,6,6s6-2.7,6-6s-2.7-6-6-6C9.7,4,7,6.7,7,10z
+                    M4,4v2h2.1C6.3,5.5,6.6,5.1,7,4.7V4c0-1.2-0.1-2.2-1.5-2.2S4,2.8,4,4z M13,11c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1s1,0.4,1,1v2h2
+                    c0.6,0,1,0.4,1,1s-0.4,1-1,1H13z"
+                    />
+                  </g>
+                </g>
+              </svg>
             </div>
-            <LinkWallet v-if="votedDelegate.address" :address="votedDelegate.address">
-              <span class="text-white semibold truncate">{{ votedDelegate.username }}</span>
-            </LinkWallet>
+            <span
+              v-tooltip="{
+                trigger: 'hover click',
+                content: readableCurrency(wallet.lockedBalance),
+              }"
+              class="text-white"
+            >
+              {{ readableCrypto(wallet.lockedBalance, false) }}
+            </span>
           </div>
         </div>
       </div>
@@ -324,6 +389,10 @@ export default class WalletDetails extends Vue {
     return !!this.wallet.vote;
   }
 
+  get hasLockedBalance() {
+    return !!this.wallet.lockedBalance;
+  }
+
   private setView(view: string) {
     this.view = view;
   }

diff --git a/src/components/wallet/Vote.vue b/src/components/wallet/Vote.vue
@@ -0,0 +1,35 @@
+<template>
+  <div v-if="isVoting" class="WalletVote">
+    <div class="list-row-border-b">
+      <div>{{ $t("WALLET.VOTING_FOR") }}</div>
+      <div>
+        <LinkWallet v-if="votedDelegate.address" :address="votedDelegate.address">
+          <span class="truncate">{{ votedDelegate.username }}</span>
+        </LinkWallet>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IWallet } from "@/interfaces";
+
+@Component
+export default class WalletVote extends Vue {
+  @Prop({ required: true }) public wallet: IWallet;
+
+  private view: string = "public";
+  private knownWallets: { [key: string]: string };
+
+  get votedDelegate() {
+    return this.$store.getters["delegates/byPublicKey"](this.wallet.vote) || {};
+  }
+
+  get isVoting() {
+    return !!this.wallet.vote;
+  }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/components/wallet/index.ts b/src/components/wallet/index.ts
@@ -2,5 +2,6 @@ import WalletDelegate from "./Delegate.vue";
 import WalletDetails from "./Details.vue";
 import WalletTransactions from "./Transactions.vue";
 import WalletVoters from "./Voters.vue";
+import WalletVote from "./Vote.vue";
 
-export { WalletDelegate, WalletDetails, WalletTransactions, WalletVoters };
+export { WalletDelegate, WalletDetails, WalletTransactions, WalletVoters, WalletVote };
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -96,6 +96,7 @@ export interface IWallet {
   vote: string;
   isDelegate: boolean;
   isResigned?: boolean;
+  lockedBalance?: string;
 }
 
 export interface IApiResponse {

diff --git a/src/locales/en-GB.ts b/src/locales/en-GB.ts
@@ -104,6 +104,7 @@ export default {
     VERIFIED: "This is a verified address",
     VOTING_FOR: "Voting for",
     BALANCE: "Balance ({token})",
+    LOCKED_BALANCE: "Locked Balance",
     SECOND_PASSPHRASE_ENABLED: "Second signature enabled",
     MULTI_SIGNATURE_WALLET: "Multi signature wallet",
     SUMMARY: "Wallet summary",

diff --git a/src/pages/Wallet.vue b/src/pages/Wallet.vue
@@ -4,9 +4,10 @@
 
     <WalletDetails :wallet="wallet" />
 
-    <section v-show="isDelegate" :class="{ 'py-5 md:py-10': isDelegate }" class="page-section mb-5">
-      <div v-show="isDelegate" class="px-5 sm:px-10">
-        <WalletDelegate :wallet="wallet" />
+    <section v-show="isDelegate || wallet.vote" :class="{ 'py-5 md:py-10': isDelegate }" class="page-section mb-5">
+      <div class="px-5 sm:px-10">
+        <WalletDelegate v-if="isDelegate" :wallet="wallet" />
+        <WalletVote v-if="wallet.vote" :wallet="wallet" />
       </div>
     </section>
 
@@ -18,7 +19,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import { Route } from "vue-router";
 import { IWallet } from "@/interfaces";
-import { WalletDelegate, WalletDetails, WalletTransactions } from "@/components/wallet";
+import { WalletDelegate, WalletDetails, WalletTransactions, WalletVote } from "@/components/wallet";
 import WalletService from "@/services/wallet";
 
 Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate"]);
@@ -28,6 +29,7 @@ Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate"]);
     WalletDelegate,
     WalletDetails,
     WalletTransactions,
+    WalletVote,
   },
 })
 export default class WalletPage extends Vue {