rename list component to buy confirmed component and add Listing component inside it

src/views/BidHistoryView.vue

@@ -9,10 +9,12 @@ const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const allUserTransactions = ref<any[]>([]);
 
-  if (walletAddress.value) {
-  await blockchain.listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
-    if (res) allUserTransactions.value = res;
-  });
+if (walletAddress.value) {
+  await blockchain
+    .listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
+      if (res) allUserTransactions.value = res;
+    });
 }
 
 watch(walletAddress, async (newValue) => {

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
-import ListComponent from "@/components/ListComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
 import blockchain from "../utils/blockchain";
 import { ref } from "vue";
 
@@ -24,7 +24,7 @@ const tokenAmount = ref<number>();
 const lockTransactionHash = ref<string>("");
 const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
-const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
+const lastWalletReleaseTransactions = ref<any[]>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -72,10 +72,12 @@ const releaseTransaction = async ({ e2eId }: any) => {
     );
     release.wait();
 
-    lastWalletReleaseTransactions.value =
-      await blockchain.listReleaseTransactionByWalletAddress(
-        walletAddress.value.toLowerCase()
-      );
+    await blockchain
+      .listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
+      .then((releaseTransactions) => {
+        if (releaseTransactions)
+          lastWalletReleaseTransactions.value = releaseTransactions;
+      });
 
     await blockchain.updateWalletStatus();
     loadingRelease.value = false;
@@ -101,7 +103,7 @@ const releaseTransaction = async ({ e2eId }: any) => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <ListComponent
+    <BuyConfirmedComponent
       v-if="!loadingRelease"
       :last-wallet-release-transactions="lastWalletReleaseTransactions"
       :tokenAmount="tokenAmount"

src/views/ListView.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-</script>
-
-<template>
-  <div class="page">
-    <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
-        >Os tokens já foram transferidos <br />
-        para a sua carteira!
-      </span>
-    </div>
-    <div class="blur-container">
-      <div
-        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
-      >
-        <div>
-          <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
-        </div>
-        <div class="my-5">
-          <p>
-            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
-            cadastrar o BRZ em sua carteira.
-          </p>
-        </div>
-        <CustomButton
-          :text="'Cadastrar token na carteira'"
-          @buttonClicked="() => {}"
-        />
-      </div>
-    </div>
-    <div class="blur-container-row">
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
-        @click="() => {}"
-      >
-        Fazer nova transação
-      </button>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2"
-        @click="() => {}"
-      >
-        Desconectar
-      </button>
-    </div>
-    <div class="text-container mt-10">
-      <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
-      </span>
-    </div>
-    <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <p class="text-white mt-2 cursor-pointer">Carregar mais</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-gray-800 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-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-</style>

src/views/ManageBidsView.vue

@@ -8,7 +8,6 @@ import { ref, watch } from "vue";
 
 const etherStore = useEtherStore();
 
-
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);