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

src/components/BuyConfirmedComponent.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
+import ListingComponent from "@/components/ListingComponent.vue";
+
+// props
+const props = defineProps<{
+  lastWalletReleaseTransactions: any[];
+  tokenAmount: Number | undefined;
+}>();
+
+// Emits
+const emit = defineEmits(["makeAnotherTransaction"]);
 </script>
 
 <template>
@@ -16,7 +26,7 @@ import CustomButton from "@/components/CustomButton.vue";
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -29,41 +39,24 @@ import CustomButton from "@/components/CustomButton.vue";
           @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"
+        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
-        @click="() => {}"
+        @click="emit('makeAnotherTransaction')"
       >
         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">
+    <div class="text-container mt-16">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
+        >Histórico de compras
       </span>
     </div>
-    <div class="blur-container">
+    <ListingComponent
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
+      :walletTransactions="lastWalletReleaseTransactions"
-        <p>100 BRZ</p>
+      :isManageMode="false"
-        <p>20 out 2022</p>
+    >
-        <p>Etherscan</p>
+    </ListingComponent>
-      </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>
 
@@ -72,6 +65,10 @@ import CustomButton from "@/components/CustomButton.vue";
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
 
+p {
+  @apply text-gray-900;
+}
+
 .text-container {
   @apply flex flex-col items-center justify-center gap-4;
 }
@@ -84,7 +81,11 @@ import CustomButton from "@/components/CustomButton.vue";
 }
 
 .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;
+  @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;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900;
 }
 
 input[type="number"] {

src/components/ListComponent.vue

@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-import blockchain from "../utils/blockchain";
-
-// props
-const props = defineProps<{
-  lastWalletReleaseTransactions: any[] | undefined;
-  tokenAmount: Number | undefined;
-}>();
-
-// Emits
-const emit = defineEmits(["makeAnotherTransaction"]);
-
-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = blockchain.formatBigNumber(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
-  window.open(url, "_blank");
-};
-</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">{{ props.tokenAmount }} 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>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
-        @click="emit('makeAnotherTransaction')"
-      >
-        Fazer nova transação
-      </button>
-    </div>
-    <div class="text-container mt-16">
-      <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
-      </span>
-    </div>
-    <div class="blur-container min-w-[80%] gap-8">
-      <div class="flex flex-row justify-between w-full px-8">
-        <span class="text-xs text-gray-50 font-medium">Valor</span>
-        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-      </div>
-      <div
-        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-        v-for="release in lastWalletReleaseTransactions"
-        :key="release?.blockNumber"
-      >
-        <span class="last-release-info">
-          {{ formatEventsAmount(release?.args.amount) }} BRZ
-        </span>
-        <span class="last-release-info">
-          {{ "Compra" }}
-        </span>
-        <div
-          class="flex gap-2 cursor-pointer items-center"
-          @click="
-            openEtherscanUrl(
-              `https://etherscan.io/tx/${release?.transactionHash}`
-            )
-          "
-        >
-          <span class="last-release-info">Etherscan</span>
-          <img alt="Redirect image" src="@/assets/redirect.svg" />
-        </div>
-      </div>
-      <div class="flex justify-center w-full right-6 mt-2">
-        <button
-          type="button"
-          class="text-white"
-          @click="() => {}"
-          v-if="lastWalletReleaseTransactions?.length != 0"
-        >
-          Carregar mais
-        </button>
-      </div>
-
-      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-        Não há nenhuma transação anterior
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-p {
-  @apply text-gray-900;
-}
-
-.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-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
-}
-
-.last-release-info {
-  @apply font-medium text-base text-gray-900;
-}
-
-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/components/ListingComponent.vue

@@ -6,7 +6,6 @@ import { ref, watch } from "vue";
 const props = defineProps<{
   walletTransactions: any[];
   isManageMode: boolean;
-  walletAddress?: string;
 }>();
 
 const itemsToShow = ref<any[]>([]);
@@ -153,8 +152,8 @@ showInitialItems();
         Carregar mais
       </button>
       <span class="text-gray-300">
-        ({{ itemsToShow.length }} de
+        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        {{ props.walletTransactions.length }} {{isManageMode ? 'ofertas' : 'transações'}})
+        {{ isManageMode ? "ofertas" : "transações" }})
       </span>
     </div>
 

src/views/BidHistoryView.vue

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

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
-      await blockchain.listReleaseTransactionByWalletAddress(
+      .listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
-        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/ManageBidsView.vue

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