feat:prepare list component to receive real dtransactions from connected wallet

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>
Co-authored-by: Esio Freitas <esio.gustavo@gmail.com>

src/assets/redirect.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.97059 0.888889C9.97059 0.397969 10.3686 0 10.8595 0H15.1111C15.602 0 16 0.397969 16 0.888889V5.23654C16 5.72746 15.602 6.12543 15.1111 6.12543C14.6202 6.12543 14.2222 5.72746 14.2222 5.23654V3.06921L8.66058 8.75646C8.31735 9.10744 7.75457 9.11373 7.40358 8.77049C7.05259 8.42726 7.04631 7.86448 7.38954 7.51349L12.9986 1.77778H10.8595C10.3686 1.77778 9.97059 1.37981 9.97059 0.888889ZM2.74997 2.67823C2.11751 2.67823 1.77778 3.11618 1.77778 3.45456V13.4459C1.77778 13.7843 2.11751 14.2222 2.74997 14.2222H12.0554C12.6878 14.2222 13.0275 13.7843 13.0275 13.4459V9.98736C13.0275 9.49644 13.4255 9.09847 13.9164 9.09847C14.4073 9.09847 14.8053 9.49644 14.8053 9.98736V13.4459C14.8053 14.9469 13.4786 16 12.0554 16H2.74997C1.32673 16 0 14.9469 0 13.4459V3.45456C0 1.9536 1.32673 0.900455 2.74997 0.900455H5.89948C6.3904 0.900455 6.78837 1.29842 6.78837 1.78934C6.78837 2.28026 6.3904 2.67823 5.89948 2.67823H2.74997Z" fill="#111827"/>
+</svg>

src/components/ListComponent.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
-type Deposit = {
-  'id': string,
-  'ammount': string,
-  'date': string,
-  'etherscanLink': string
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import blockchain from "../utils/blockchain";
+// Store reference
+const etherStore = useEtherStore();
+
+const { walletAddress } = storeToRefs(etherStore);
+
+const lastDeposits = await blockchain.listTransactionByWalletAddress(walletAddress.value.toLowerCase())
+
+const openEtherscanUrl = (url: string) => {
+  window.open(url, "_blank")
 }
 
-
-const lastDeposits: Deposit[] = [
-  {
-    'id': 'massa',
-    'ammount': '100 BRZ',
-    'date': '20 out 2022',
-    'etherscanLink': 'Etherscan'
-  }
-];
 const props = defineProps({
   tokenAmmount: Number,
 });
@@ -72,20 +70,23 @@ const props = defineProps({
       </span>
     </div>
     <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg" v-for="deposit in lastDeposits" :key="deposit.id">
-        <p class="last-deposit-info">{{deposit.ammount}}</p>
-        <p class="last-deposit-info">{{deposit.date}}</p>
-        <p class="last-deposit-info">{{deposit.etherscanLink}}</p>
+      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg" v-for="deposit in lastDeposits" :key="deposit?.blockNumber">
+        <p class="last-deposit-info">{{blockchain.formatBigNumber(deposit?.args.amount)}} BRZ</p>
+        <p class="last-deposit-info">{{deposit?.event == 'DepositAdded' ? 'Depósito' : 'Compra'}}</p>
+        <div class="flex gap-2 cursor-pointer items-center" @click="openEtherscanUrl(`https://etherscan.io/tx/${deposit?.transactionHash}`)">
+          <p class="last-deposit-info">Etherscan</p>
+          <img alt="Redirect image" src="@/assets/redirect.svg"/>
+        </div>
       </div>
       <button
         type="button"
         class="text-white mt-2"
         @click="() => {}"
-        v-if="(lastDeposits.length != 0)"
+        v-if="(lastDeposits?.length != 0)"
       >
         Carregar mais
       </button>
-      <p class="font-bold" v-if="(lastDeposits.length == 0)">Não há nenhuma transação anterior</p>
+      <p class="font-bold" v-if="(lastDeposits?.length == 0)">Não há nenhuma transação anterior</p>
     </div>
   </div>
 </template>

src/views/HomeView.vue

@@ -63,7 +63,12 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 
 <template>
   <SearchComponent v-if="(flowStep == Step.Search)" @token-buy="confirmBuyClick" />
-  <ListComponent v-if="(flowStep == Step.List)" :tokenAmmount="tokenAmmount" />
+  <Suspense>
+    <ListComponent v-if="(flowStep == Step.List)" :tokenAmmount="tokenAmmount" />
+    <template #fallback>
+      Carregando...
+    </template>
+  </Suspense>
 </template>
 
 <style scoped></style>