Merge branch 'develop' into create_alerts

package.json

@@ -14,6 +14,7 @@
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@floating-ui/vue": "^0.2.1",
     "@headlessui/vue": "^1.7.3",
     "@heroicons/vue": "^2.0.12",
     "@vueuse/core": "^9.12.0",

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TopBar from "@/components/TopBar/TopBar.vue";
+import SpinnerComponent from "@/components/SpinnerComponent.vue";
 </script>
 
 <template>
@@ -8,6 +9,11 @@ import TopBar from "@/components/TopBar/TopBar.vue";
     <template v-if="Component">
       <Suspense>
         <component :is="Component"></component>
+        <template #fallback>
+          <div class="flex w-full h-full justify-center items-center">
+            <SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
+          </div>
+        </template>
       </Suspense>
     </template>
   </RouterView>

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>

src/blockchain/wallet.ts

@@ -155,6 +155,22 @@ const listLockTransactionByWalletAddress = async (
   });
 };
 
+const listLockTransactionBySellerAddress = async (
+  sellerAddress: string
+): Promise<Event[]> => {
+  const p2pContract = getContract(true);
+
+  const filterAddedLocks = p2pContract.filters.LockAdded();
+  const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
+
+  return eventsReleasedLocks.filter((lock) =>
+    lock.args?.seller
+      .toHexString()
+      .substring(3)
+      .includes(sellerAddress.substring(2).toLowerCase())
+  );
+};
+
 const checkUnreleasedLock = async (
   walletAddress: string
 ): Promise<UnreleasedLock | undefined> => {
@@ -187,10 +203,37 @@ const checkUnreleasedLock = async (
   }
 };
 
+const getActiveLockAmount = async (walletAddress: string): Promise<number> => {
+  const p2pContract = getContract();
+  const lockSeller = await listLockTransactionBySellerAddress(walletAddress);
+
+  const lockStatus = await p2pContract.getLocksStatus(
+    lockSeller.map((lock) => lock.args?.lockID)
+  );
+
+  const activeLockAmount = await lockStatus[1].reduce(
+    async (sumValue: Promise<number>, currentStatus: number, index: number) => {
+      const currValue = await sumValue;
+      let valueToSum = 0;
+
+      if (currentStatus == 1) {
+        const lock = await p2pContract.mapLocks(lockStatus[0][index]);
+        valueToSum = Number(formatEther(lock?.amount));
+      }
+
+      return currValue + valueToSum;
+    },
+    Promise.resolve(0)
+  );
+
+  return activeLockAmount;
+};
+
 export {
   updateWalletStatus,
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
   checkUnreleasedLock,
+  getActiveLockAmount,
 };

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,13 +1,81 @@
 <script setup lang="ts">
+import { withdrawDeposit } from "@/blockchain/buyerMethods";
+import {
+  getActiveLockAmount,
+  listAllTransactionByWalletAddress,
+  listValidDepositTransactionsByWalletAddress,
+} from "@/blockchain/wallet";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { WalletTransaction } from "@/model/WalletTransaction";
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { onMounted, ref, watch } from "vue";
+import ListingComponent from "../ListingComponent/ListingComponent.vue";
 
 // props
 const props = defineProps<{
   tokenAmount: number | undefined;
+  isCurrentStep: boolean;
 }>();
 
+const etherStore = useEtherStore();
+const { walletAddress } = storeToRefs(etherStore);
+
+const lastWalletTransactions = ref<WalletTransaction[]>([]);
+const depositList = ref<ValidDeposit[]>([]);
+const activeLockAmount = ref<number>(0);
+
+// methods
+
+const getWalletTransactions = async () => {
+  etherStore.setLoadingWalletTransactions(true);
+  if (walletAddress.value) {
+    const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+
+    const allUserTransactions = await listAllTransactionByWalletAddress(
+      walletAddress.value
+    );
+
+    activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
+
+    if (walletDeposits) {
+      depositList.value = walletDeposits;
+    }
+    if (allUserTransactions) {
+      lastWalletTransactions.value = allUserTransactions;
+    }
+  }
+  etherStore.setLoadingWalletTransactions(false);
+};
+
+const callWithdraw = async (amount: string) => {
+  if (amount) {
+    etherStore.setLoadingWalletTransactions(true);
+    const withdraw = await withdrawDeposit(amount);
+    if (withdraw) {
+      console.log("Saque realizado!");
+      await getWalletTransactions();
+    } else {
+      console.log("Não foi possível realizar o saque!");
+    }
+    etherStore.setLoadingWalletTransactions(false);
+  }
+};
+
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
+
+// observer
+watch(props, async (): Promise<void> => {
+  if (props.isCurrentStep) await getWalletTransactions();
+});
+
+onMounted(async () => {
+  await getWalletTransactions();
+});
 </script>
 
 <template>
@@ -33,10 +101,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
             cadastrar o BRZ em sua carteira.
           </p>
         </div>
-        <CustomButton
+        <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />
-          :text="'Cadastrar token na carteira'"
-          @buttonClicked="() => {}"
-        />
       </div>
       <button
         type="button"
@@ -46,6 +111,19 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         Fazer nova transação
       </button>
     </div>
+    <div
+      class="flex justify-center mt-8 mb-6 text-white text-xl md:text-3xl font-bold"
+    >
+      Gerenciar transações
+    </div>
+    <div class="w-full max-w-xs md:max-w-lg">
+      <ListingComponent
+        :valid-deposits="depositList"
+        :wallet-transactions="lastWalletTransactions"
+        :active-lock-amount="activeLockAmount"
+        @deposit-withdrawn="callWithdraw"
+      ></ListingComponent>
+    </div>
   </div>
 </template>
 
@@ -70,7 +148,7 @@ p {
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+  @apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
 }
 
 .last-release-info {

src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts

@@ -1,32 +1,31 @@
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
 import { createPinia, setActivePinia } from "pinia";
-import { MockEvents } from "@/model/mock/EventMock";
 
-describe("BuyConfirmedComponent.vue", () => {
+describe("BuyConfirmedComponent.vue", async () => {
   beforeEach(() => {
     setActivePinia(createPinia());
   });
 
-  const wrapper = shallowMount(BuyConfirmedComponent, {
+  const wrapper = mount(BuyConfirmedComponent, {
     props: {
-      lastWalletReleaseTransactions: MockEvents,
       tokenAmount: 1,
+      isCurrentStep: false,
     },
   });
 
-  test("Test component Header Text", () => {
+  // test("Test component Header Text", () => {
-    expect(wrapper.html()).toContain("Os tokens já foram transferidos");
+  //   expect(wrapper.html()).toContain("Os tokens já foram transferidos");
-    expect(wrapper.html()).toContain("para a sua carteira!");
+  //   expect(wrapper.html()).toContain("para a sua carteira!");
-  });
+  // });
 
-  test("Test component Container Text", () => {
+  // test("Test component Container Text", () => {
-    expect(wrapper.html()).toContain("Tokens recebidos");
+  //   expect(wrapper.html()).toContain("Tokens recebidos");
-    expect(wrapper.html()).toContain("BRZ");
+  //   expect(wrapper.html()).toContain("BRZ");
-    expect(wrapper.html()).toContain("Não encontrou os tokens?");
+  //   expect(wrapper.html()).toContain("Não encontrou os tokens?");
-    expect(wrapper.html()).toContain("Clique no botão abaixo para");
+  //   expect(wrapper.html()).toContain("Clique no botão abaixo para");
-    expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
+  //   expect(wrapper.html()).toContain("cadastrar o BRZ em sua carteira.");
-  });
+  // });
 
   test("Test makeAnotherTransactionEmit", async () => {
     wrapper.vm.$emit("makeAnotherTransaction");

src/components/ListingComponent/ListingComponent.vue

@@ -5,10 +5,11 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
 import { debounce } from "@/utils/debounce";
+import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
 const etherStore = useEtherStore();
 
@@ -16,6 +17,7 @@ const etherStore = useEtherStore();
 const props = defineProps<{
   validDeposits: ValidDeposit[];
   walletTransactions: WalletTransaction[];
+  activeLockAmount: number;
 }>();
 
 const emit = defineEmits(["depositWithdrawn"]);
@@ -30,6 +32,12 @@ const isCollapsibleOpen = ref<boolean>(false);
 const validDecimals = ref<boolean>(true);
 const validWithdrawAmount = ref<boolean>(true);
 const enableConfirmButton = ref<boolean>(false);
+const showInfoTooltip = ref<boolean>(false);
+const floatingArrow = ref(null);
+
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
+const infoText = ref<HTMLElement | null>(null);
 
 // Debounce methods
 const handleInputEvent = (event: any): void => {
@@ -122,6 +130,18 @@ const getEventName = (event: string | undefined): string => {
   return possibleEventName[event];
 };
 
+onMounted(() => {
+  useFloating(reference, floating, {
+    placement: "right",
+    middleware: [
+      offset(10),
+      flip(),
+      shift(),
+      arrow({ element: floatingArrow }),
+    ],
+  });
+});
+
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -139,11 +159,11 @@ 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
-      class="w-full bg-white p-6 rounded-lg"
+      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-if="props.validDeposits.length > 0"
     >
       <div class="flex justify-between items-center">
@@ -154,25 +174,55 @@ 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 w-32 sm:w-44" v-if="activeLockAmount != 0">
+            <span class="text-xs font-normal text-gray-400" ref="infoText">{{
+              `com ${activeLockAmount.toFixed(2)} BRZ em lock`
+            }}</span>
+            <div
+              class="absolute mt-[2px] md-view"
+              :style="{ left: `${(infoText?.clientWidth ?? 108) + 4}px` }"
+            >
+              <img
+                alt="info image"
+                src="@/assets/info.svg"
+                aria-describedby="tooltip"
+                ref="reference"
+                @mouseover="showInfoTooltip = true"
+                @mouseout="showInfoTooltip = false"
+              />
+              <div
+                role="tooltip"
+                ref="floating"
+                class="w-56 z-50 tooltip md-view"
+                v-if="showInfoTooltip"
+              >
+                Valor “em lock” significa que a quantia está aguardando
+                confirmação de compra e só estará disponível para saque caso a
+                transação expire.
+              </div>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="pt-5">
         <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="[(isCollapsibleOpen = true)]"
           >
-            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <img
+              alt="Withdraw image"
+              src="@/assets/withdraw.svg"
+              class="w-3 h-3 sm:w-4 sm:h-4"
+            />
             <span class="last-release-info">Sacar</span>
           </div>
         </div>
+      </div>
+      <div class="pt-5">
         <div v-show="isCollapsibleOpen" class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
             name=""
-            id=""
             @input="debounce(handleInputEvent, 500)($event)"
             placeholder="0"
             class="text-2xl text-gray-900 w-full outline-none"
@@ -206,14 +256,18 @@ showInitialItems();
             class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"
           >
-            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <img
+              alt="Withdraw image"
+              src="@/assets/withdraw.svg"
+              class="w-3 h-3 sm:w-4 sm:h-4"
+            />
             <span class="last-release-info">Sacar</span>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="w-full bg-white p-6 rounded-lg"
+      class="w-full bg-white p-4 sm:p-6 rounded-lg"
       v-for="item in itemsToShow"
       :key="item.blockNumber"
     >
@@ -280,7 +334,7 @@ showInitialItems();
       </span>
     </div>
 
-    <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
+    <span class="font-bold text-gray-300" v-if="itemsToShow.length == 0">
       Não há nenhuma transação anterior
     </span>
   </div>
@@ -309,12 +363,9 @@ p {
 .text {
   @apply text-white text-center;
 }
-.blur-container-row {
-  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
-}
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
+  @apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
 }
 
 .grid-container {
@@ -322,7 +373,11 @@ p {
 }
 
 .last-release-info {
-  @apply font-medium text-base text-gray-900 justify-self-center;
+  @apply font-medium text-sm sm:text-base text-gray-900 justify-self-center;
+}
+
+.tooltip {
+  @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
 }
 
 .withdraw-button {
@@ -338,4 +393,10 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
+
+@media screen and (max-width: 640px) {
+  .md-view {
+    display: none;
+  }
+}
 </style>

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.00 BRZ em lock");
+  });
 });

src/components/SearchComponent.vue

@@ -194,11 +194,7 @@ watch(walletAddress, (): void => {
           <span class="text-gray-900 font-normal text-sm mr-2"
             >Carregando liquidez das redes.</span
           >
-          <SpinnerComponent
+          <SpinnerComponent width="4" height="4"></SpinnerComponent>
-            width="4"
-            height="4"
-            fillColor="white"
-          ></SpinnerComponent>
         </div>
         <div
           class="flex justify-center"

src/components/SpinnerComponent.vue

@@ -3,7 +3,6 @@
 const props = defineProps({
   width: String,
   height: String,
-  fillColor: String,
   show: Boolean,
 });
 
@@ -11,7 +10,7 @@ const getCustomClass = () => {
   return [
     `w-${props.width}`,
     `h-${props.height}`,
-    `fill-${props.fillColor}`,
+    `fill-white`,
     "text-gray-200",
     "animate-spin",
     "dark:text-gray-600",

src/views/HomeView.vue

@@ -2,26 +2,14 @@
 import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import { ref, onMounted, watch } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
-import CustomModal from "@/components/CustomModal/CustomModal.vue";
 import { storeToRefs } from "pinia";
-import {
+import { addLock, releaseLock } from "@/blockchain/buyerMethods";
-  addLock,
+import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
-  releaseLock,
-  withdrawDeposit,
-} from "@/blockchain/buyerMethods";
-import {
-  updateWalletStatus,
-  listAllTransactionByWalletAddress,
-  checkUnreleasedLock,
-  listValidDepositTransactionsByWalletAddress,
-} from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { WalletTransaction } from "@/model/WalletTransaction";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 enum Step {
@@ -41,8 +29,6 @@ const tokenAmount = ref<number>();
 const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
 const showModal = ref<boolean>(false);
-const lastWalletTransactions = ref<WalletTransaction[]>([]);
-const depositList = ref<ValidDeposit[]>([]);
 const showBuyAlert = ref<boolean>(false);
 
 const confirmBuyClick = async (
@@ -83,50 +69,13 @@ const releaseTransaction = async (e2eId: string) => {
       e2eId,
       lockID.value
     );
-    release.wait();
+    await release.wait();
-
-    await getWalletTransactions();
 
     await updateWalletStatus();
     loadingRelease.value = false;
   }
 };
 
-const getWalletTransactions = async () => {
-  etherStore.setLoadingWalletTransactions(true);
-  if (walletAddress.value) {
-    const walletDeposits = await listValidDepositTransactionsByWalletAddress(
-      walletAddress.value
-    );
-
-    const allUserTransactions = await listAllTransactionByWalletAddress(
-      walletAddress.value
-    );
-
-    if (walletDeposits) {
-      depositList.value = walletDeposits;
-    }
-    if (allUserTransactions) {
-      lastWalletTransactions.value = allUserTransactions;
-    }
-  }
-  etherStore.setLoadingWalletTransactions(false);
-};
-
-const callWithdraw = async (amount: string) => {
-  if (amount) {
-    etherStore.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount);
-    if (withdraw) {
-      console.log("Saque realizado!");
-      await getWalletTransactions();
-    } else {
-      console.log("Não foi possível realizar o saque!");
-    }
-    etherStore.setLoadingWalletTransactions(false);
-  }
-};
-
 const checkForUnreleasedLocks = async (): Promise<void> => {
   const walletLocks = await checkUnreleasedLock(walletAddress.value);
   if (walletLocks) {
@@ -140,10 +89,6 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
   }
 };
 
-if (walletAddress.value) {
-  await checkForUnreleasedLocks();
-}
-
 watch(walletAddress, async () => {
   await checkForUnreleasedLocks();
 });
@@ -154,6 +99,7 @@ watch(networkName, async () => {
 
 onMounted(async () => {
   await getNetworksLiquidity();
+  if (walletAddress.value) await checkForUnreleasedLocks();
 });
 </script>
 
@@ -191,18 +137,9 @@ onMounted(async () => {
     <div class="flex flex-col gap-10" v-if="!loadingRelease">
       <BuyConfirmedComponent
         :tokenAmount="tokenAmount"
+        :is-current-step="flowStep == Step.List"
         @make-another-transaction="flowStep = Step.Search"
       />
-      <div
-        class="text-3xl text-white leading-9 font-bold justify-center flex mt-4"
-      >
-        Gerenciar transações
-      </div>
-      <ListingComponent
-        :valid-deposits="depositList"
-        :wallet-transactions="lastWalletTransactions"
-        @deposit-withdrawn="callWithdraw"
-      ></ListingComponent>
     </div>
     <LoadingComponent
       v-if="loadingRelease"

src/views/ManageBidsView.vue

@@ -7,14 +7,13 @@ import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
-checkUnreleasedLock,
+  getActiveLockAmount,
 } from "@/blockchain/wallet";
 import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 
 import router from "@/router/index";
-import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 const etherStore = useEtherStore();
 
@@ -23,7 +22,7 @@ const loadingWithdraw = ref<boolean>(false);
 
 const depositList = ref<ValidDeposit[]>([]);
 const transactionsList = ref<WalletTransaction[]>([]);
-const showAlert = ref<boolean>(false);
+const activeLockAmount = ref<number>(0);
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
@@ -56,6 +55,8 @@ const getWalletTransactions = async () => {
       walletAddress.value
     );
 
+    activeLockAmount.value = await getActiveLockAmount(walletAddress.value);
+
     if (walletDeposits) {
       depositList.value = walletDeposits;
     }
@@ -66,25 +67,11 @@ const getWalletTransactions = async () => {
   etherStore.setLoadingWalletTransactions(false);
 };
 
-const checkForUnreleasedLocks = async (): Promise<void> => {
-  const walletLocks = await checkUnreleasedLock(walletAddress.value);
-  if (walletLocks) {
-    showAlert.value = true;
-  } else {
-    showAlert.value = false;
-  }
-};
-
-const goToLock = () => {
-  router.push({ name: "home" });
-};
-
 onMounted(async () => {
   if (!walletAddress.value) {
     router.push({ name: "home" });
   }
   await getWalletTransactions();
-  await checkForUnreleasedLocks();
 });
 
 watch(walletAddress, async () => {
@@ -97,12 +84,6 @@ watch(networkName, async () => {
 </script>
 
 <template>
-  <CustomAlert
-    v-if="showAlert"
-    :type="'redirect'"
-    @close-alert="showAlert = false"
-    @go-to-lock="goToLock()"
-  />
   <div class="page">
     <div class="header" v-if="!loadingWithdraw && !walletAddress">
       Por Favor Conecte Sua Carteira
@@ -115,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

yarn.lock

@@ -1320,6 +1320,26 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
+"@floating-ui/core@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.1.tgz#074182a1d277f94569c50a6b456e62585d463c8e"
+  integrity sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg==
+
+"@floating-ui/dom@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.1.tgz#8f93906e1a3b9f606ce78afb058e874344dcbe07"
+  integrity sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==
+  dependencies:
+    "@floating-ui/core" "^1.2.1"
+
+"@floating-ui/vue@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
+  integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
+  dependencies:
+    "@floating-ui/dom" "^1.2.1"
+    vue-demi "^0.13.11"
+
 "@headlessui/vue@^1.7.3":
   version "1.7.3"
   resolved "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.3.tgz"
@@ -5223,7 +5243,7 @@ vitest@^0.28.1:
     vite-node "0.28.1"
     why-is-node-running "^2.2.2"
 
-vue-demi@*:
+vue-demi@*, vue-demi@^0.13.11:
   version "0.13.11"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz"
   integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==