From 8f45016532c2b0b0a8d873326ce28c5936d397a8 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 24 Feb 2023 00:57:34 -0300
Subject: [PATCH] add text on listing component to show active lock amount

---
 src/assets/info.svg                              |  5 +++++
 .../ListingComponent/ListingComponent.vue        | 10 ++++++++--
 .../__tests__/ListingComponent.spec.ts           | 16 ++++++++++++++++
 src/views/HomeView.vue                           |  5 +++++
 src/views/ManageBidsView.vue                     |  5 +++++
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/info.svg

diff --git a/src/assets/info.svg b/src/assets/info.svg
new file mode 100644
index 0000000..0f60765
--- /dev/null
+++ b/src/assets/info.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 13.125C3.61726 13.125 0.875 10.3827 0.875 7C0.875 3.61726 3.61726 0.875 7 0.875C10.3827 0.875 13.125 3.61726 13.125 7C13.125 10.3827 10.3827 13.125 7 13.125ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#6B7280"/>
+<path d="M7.81437 5.7644L5.80973 6.01562L5.73795 6.34888L6.13272 6.42065C6.38907 6.48218 6.44034 6.57446 6.38395 6.83081L5.73795 9.86597C5.56876 10.6504 5.83023 11.0195 6.44547 11.0195C6.92228 11.0195 7.47599 10.7991 7.72721 10.4966L7.80411 10.1326C7.6298 10.2864 7.37345 10.3479 7.20426 10.3479C6.96329 10.3479 6.87613 10.1787 6.93766 9.88135L7.81437 5.7644Z" fill="#6B7280"/>
+<path d="M7.875 3.9375C7.875 4.42075 7.48325 4.8125 7 4.8125C6.51675 4.8125 6.125 4.42075 6.125 3.9375C6.125 3.45425 6.51675 3.0625 7 3.0625C7.48325 3.0625 7.875 3.45425 7.875 3.9375Z" fill="#6B7280"/>
+</svg>
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index e3433bf..2b8cc64 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -16,6 +16,7 @@ const etherStore = useEtherStore();
 const props = defineProps<{
   validDeposits: ValidDeposit[];
   walletTransactions: WalletTransaction[];
+  activeLockAmount: Number;
 }>();
 
 const emit = defineEmits(["depositWithdrawn"]);
@@ -139,7 +140,7 @@ showInitialItems();
 
 <template>
   <div class="blur-container" v-if="loadingWalletTransactions">
-    <SpinnerComponent width="8" height="8" fillColor="white"></SpinnerComponent>
+    <SpinnerComponent width="8" height="8"></SpinnerComponent>
   </div>
   <div class="blur-container" v-if="!loadingWalletTransactions">
     <div
@@ -154,7 +155,12 @@ showInitialItems();
           <p class="text-xl leading-7 font-semibold text-gray-900">
             {{ getRemaining() }} BRZ
           </p>
-          <p class="text-xs leading-4 font-medium text-gray-600"></p>
+          <div class="flex gap-2">
+            <span class="text-xs leading-4 font-normal text-gray-400">{{
+              activeLockAmount != 0 ? `com ${activeLockAmount} BRZ em lock` : ""
+            }}</span>
+            <img alt="info image" src="@/assets/info.svg" />
+          </div>
         </div>
       </div>
       <div class="pt-5">
diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
index 114530e..eba306d 100644
--- a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
+++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
@@ -17,6 +17,7 @@ describe("ListingComponent.vue", () => {
       props: {
         validDeposits: [],
         walletTransactions: [],
+        activeLockAmount: 0,
       },
     });
 
@@ -28,6 +29,7 @@ describe("ListingComponent.vue", () => {
       props: {
         validDeposits: [],
         walletTransactions: MockWalletTransactions,
+        activeLockAmount: 0,
       },
     });
 
@@ -41,6 +43,7 @@ describe("ListingComponent.vue", () => {
       props: {
         validDeposits: MockValidDeposits,
         walletTransactions: MockWalletTransactions,
+        activeLockAmount: 0,
       },
     });
     const btn = wrapper.find("button");
@@ -60,6 +63,7 @@ describe("ListingComponent.vue", () => {
       props: {
         validDeposits: MockValidDeposits,
         walletTransactions: MockWalletTransactions,
+        activeLockAmount: 0,
       },
     });
     wrapper.vm.$emit("depositWithdrawn");
@@ -68,4 +72,16 @@ describe("ListingComponent.vue", () => {
 
     expect(wrapper.emitted("depositWithdrawn")).toBeTruthy();
   });
+
+  test("Test should render lock info when active lock amount is greater than 0", () => {
+    const wrapper = mount(ListingComponent, {
+      props: {
+        validDeposits: MockValidDeposits,
+        walletTransactions: [],
+        activeLockAmount: 50,
+      },
+    });
+
+    expect(wrapper.html()).toContain("com 50 BRZ em lock");
+  });
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 199fd68..b3b534f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -18,6 +18,7 @@ import {
   listAllTransactionByWalletAddress,
   checkUnreleasedLock,
   listValidDepositTransactionsByWalletAddress,
+  getActiveLockAmount,
 } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
@@ -42,6 +43,7 @@ const loadingRelease = ref<boolean>(false);
 const showModal = ref<boolean>(false);
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
+const activeLockAmount = ref<Number>(0);
 
 const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
@@ -100,6 +102,8 @@ const getWalletTransactions = async () => {
       walletAddress.value
     );
 
+    activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
+
     if (walletDeposits) {
       depositList.value = walletDeposits;
     }
@@ -191,6 +195,7 @@ onMounted(async () => {
       <ListingComponent
         :valid-deposits="depositList"
         :wallet-transactions="lastWalletTransactions"
+        :active-lock-amount="activeLockAmount"
         @deposit-withdrawn="callWithdraw"
       ></ListingComponent>
     </div>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 94096c7..c02984f 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -7,6 +7,7 @@ import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
+  getActiveLockAmount,
 } from "@/blockchain/wallet";
 import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import type { ValidDeposit } from "@/model/ValidDeposit";
@@ -21,6 +22,7 @@ const loadingWithdraw = ref<boolean>(false);
 
 const depositList = ref<ValidDeposit[]>([]);
 const transactionsList = ref<WalletTransaction[]>([]);
+const activeLockAmount = ref<Number>(0);
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
@@ -53,6 +55,8 @@ const getWalletTransactions = async () => {
       walletAddress.value
     );
 
+    activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
+
     if (walletDeposits) {
       depositList.value = walletDeposits;
     }
@@ -92,6 +96,7 @@ watch(networkName, async () => {
         v-if="!loadingWithdraw && walletAddress"
         :valid-deposits="depositList"
         :wallet-transactions="transactionsList"
+        :active-lock-amount="activeLockAmount"
         @deposit-withdrawn="callWithdraw"
       ></ListingComponent>
       <LoadingComponent