From f25c61b21eae94a6ddc66c96447d612914a95d31 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 7 Dec 2022 19:38:47 -0300
Subject: [PATCH] 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          |  3 +++
 src/components/ListComponent.vue | 41 ++++++++++++++++----------------
 src/views/HomeView.vue           |  7 +++++-
 3 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 src/assets/redirect.svg

diff --git a/src/assets/redirect.svg b/src/assets/redirect.svg
new file mode 100644
index 0000000..5f3be00
--- /dev/null
+++ b/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>
diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
index b197c5d..b528239 100644
--- a/src/components/ListComponent.vue
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a11a388..9bf56ef 100644
--- a/src/views/HomeView.vue
+++ b/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>