making list a component instead of a view

src/components/ListComponent.vue

@@ -1,5 +1,25 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
+type Deposit = {
+  'id': string,
+  'ammount': string,
+  'date': string,
+  'etherscanLink': string
+}
+
+
+const lastDeposits: Deposit[] = [
+  {
+    'id': 'massa',
+    'ammount': '100 BRZ',
+    'date': '20 out 2022',
+    'etherscanLink': 'Etherscan'
+  }
+];
+const props = defineProps({
+  tokenAmmount: Number,
+});
+
 </script>
 
 <template>
@@ -16,7 +36,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.tokenAmmount}} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -52,17 +72,20 @@ import CustomButton from "@/components/CustomButton.vue";
       </span>
     </div>
     <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
+      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg" v-for="deposit in lastDeposits" :key="deposit.id">
-        <p>100 BRZ</p>
+        <p class="last-deposit-info">{{deposit.ammount}}</p>
-        <p>20 out 2022</p>
+        <p class="last-deposit-info">{{deposit.date}}</p>
-        <p>Etherscan</p>
+        <p class="last-deposit-info">{{deposit.etherscanLink}}</p>
       </div>
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
+      <button
-        <p>100 BRZ</p>
+        type="button"
-        <p>20 out 2022</p>
+        class="text-white mt-2"
-        <p>Etherscan</p>
+        @click="() => {}"
-      </div>
+        v-if="(lastDeposits.length != 0)"
-      <p class="text-white mt-2 cursor-pointer">Carregar mais</p>
+      >
+        Carregar mais
+      </button>
+      <p class="font-bold" v-if="(lastDeposits.length == 0)">Não há nenhuma transação anterior</p>
     </div>
   </div>
 </template>
@@ -72,6 +95,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;
 }
@@ -87,6 +114,10 @@ import CustomButton from "@/components/CustomButton.vue";
   @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;
 }
 
+.last-deposit-info{
+  @apply font-medium text-base
+}
+
 input[type="number"] {
   -moz-appearance: textfield;
 }

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import QrCodeFormVue from "../views/QrCodeForm.vue";
 import MockView from "../views/MockView.vue";
-import ListView from "@/views/ListView.vue";
+import ListView from "../components/ListComponent.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

src/views/HomeView.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
 import blockchain from "../utils/blockchain";
+import ListComponent from "@/components/ListComponent.vue";
+import { ref } from "vue";
+
+enum Step {
+  Search,
+  Buy,
+  List
+}
+
+const flowStep = ref<Step>(Step.Search)
+const tokenAmmount = ref()
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -10,12 +21,15 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     .mapDeposits(selectedDeposit["args"]["depositID"])
     .then((deposit) => (depositDetail = deposit));
   console.log(tokenValue);
+  tokenAmmount.value = tokenValue
+  flowStep.value = Step.List
   console.log(depositDetail);
 };
 </script>
 
 <template>
-  <SearchComponent @token-buy="confirmBuyClick" />
+  <SearchComponent v-if="(flowStep == Step.Search)" @token-buy="confirmBuyClick" />
+  <ListComponent v-if="(flowStep == Step.List)" :tokenAmmount="tokenAmmount" />
 </template>
 
 <style scoped></style>