From 4b08b6df4b4de24c88bc1678d50ac2bcf99dd29b Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Tue, 24 Jan 2023 22:25:38 -0300
Subject: [PATCH] Improve Listing Component and import with alias in other
 components

---
 .../BuyConfirmedComponent/BuyConfirmedComponent.vue   |  4 ++--
 src/components/ListingComponent/ListingComponent.vue  | 11 ++++++++---
 src/components/SearchComponent.vue                    |  2 +-
 src/components/TopBar/TopBar.vue                      |  8 ++++----
 src/views/HomeView.vue                                |  8 ++++----
 src/views/ManageBidsView.vue                          |  2 +-
 src/views/TransactionHistoryView.vue                  |  2 +-
 7 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index ccc8914..7e78877 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import type { Event } from "ethers";
 
 // props
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 8769ea5..309d458 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -3,7 +3,7 @@ import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { useEtherStore } from "@/store/ether";
 import { formatEther } from "@ethersproject/units";
-import type { Event } from "ethers";
+import type { BigNumber, Event } from "ethers";
 import { ref, watch } from "vue";
 
 // props
@@ -55,6 +55,11 @@ const getEventName = (event: string | undefined): string => {
   return possibleEventName[event];
 };
 
+const getAmountFormatted = (amount?: BigNumber): string => {
+  if(!amount) return ""
+  return formatEther(amount);
+}
+
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -99,7 +104,7 @@ showInitialItems();
     >
       <span class="last-release-info">
         {{
-          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
+          isValidDeposit(item) ? item.remaining : getAmountFormatted(item.args?.amount)
         }}
         BRZ
       </span>
@@ -137,7 +142,7 @@ showInitialItems();
         "
       >
         <span class="last-release-info">Retirar</span>
-        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+        <img alt="Withdraw image" src="@/assets/withdraw.svg" />
       </div>
     </div>
     <div
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 443c05f..dd328cb 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
-import CustomButton from "../components/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 0f6e03a..42c9abe 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { useEtherStore } from "../../store/ether";
+import { useEtherStore } from "@/store/ether";
 import { ref } from "vue";
 import { NetworkEnum } from "@/model/NetworkEnum";
-import { connectProvider, requestNetworkChange } from "../blockchain/provider";
-import ethereumImage from "../assets/ethereum.svg";
-import polygonImage from "../assets/polygon.svg";
+import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
+import ethereumImage from "@/assets/ethereum.svg";
+import polygonImage from "@/assets/polygon.svg";
 
 // Store reference
 const etherStore = useEtherStore();
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 946f0c6..612258a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import SearchComponent from "../components/SearchComponent.vue";
-import ValidationComponent from "../components/LoadingComponent.vue";
-import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
+import SearchComponent from "@/components/SearchComponent.vue";
+import ValidationComponent from "@/components/LoadingComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
 import { ref, onMounted } from "vue";
 import { useEtherStore } from "@/store/ether";
-import QrCodeComponent from "../components/QrCodeComponent.vue";
+import QrCodeComponent from "@/components/QrCodeComponent.vue";
 import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus } from "@/blockchain/wallet";
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 000f42a..c1d5cab 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import type { BigNumber } from "ethers";
 import { ref, watch, onMounted } from "vue";
 import { cancelDeposit, withdrawDeposit } from "@/blockchain/buyerMethods";
diff --git a/src/views/TransactionHistoryView.vue b/src/views/TransactionHistoryView.vue
index 41f9757..b463172 100644
--- a/src/views/TransactionHistoryView.vue
+++ b/src/views/TransactionHistoryView.vue
@@ -2,7 +2,7 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { ref, watch, onMounted } from "vue";
-import ListingComponent from "@/components/ListingComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
 import type { Event } from "ethers";
 import type { ValidDeposit } from "@/model/ValidDeposit";