Merge branch 'develop' into setup-tests

src/components/ListingComponent/ListingComponent.vue

@@ -1,42 +1,62 @@
 <script setup lang="ts">
-import blockchain from "@/utils/blockchain";
+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 { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  walletTransactions: any[];
+  walletTransactions: (Event | ValidDeposit)[];
   isManageMode: boolean;
 }>();
 
-const itemsToShow = ref<any[]>([]);
+const etherStore = useEtherStore();
+
+const itemsToShow = ref<(Event | ValidDeposit)[]>([]);
 
 // Methods
-const showInitialItems = () => {
+const isValidDeposit = (
+  deposit: Event | ValidDeposit
+): deposit is ValidDeposit => {
+  return (deposit as ValidDeposit).depositID !== undefined;
+};
+
+const showInitialItems = (): void => {
   itemsToShow.value = props.walletTransactions.slice(0, 3);
 };
 
-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = blockchain.formatBigNumber(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
+const openEtherscanUrl = (transactionHash: string): void => {
+  const networkUrl =
+    etherStore.networkName == NetworkEnum.ethereum
+      ? "goerli.etherscan.io"
+      : "mumbai.polygonscan.com";
+  const url = `https://${networkUrl}/tx/${transactionHash}`;
   window.open(url, "_blank");
 };
 
-const loadMore = () => {
+const loadMore = (): void => {
   const itemsShowing = itemsToShow.value.length;
   itemsToShow.value?.push(
     ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
   );
 };
 
+const getEventName = (event: string | undefined): string => {
+  if (!event) return "Desconhecido";
+
+  const possibleEventName: { [key: string]: string } = {
+    DepositAdded: "Oferta",
+    LockAdded: "Compra",
+    LockReleased: "Reserva",
+  };
+
+  return possibleEventName[event];
+};
+
 // watch props changes
-watch(props, async () => {
+watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
   if (itemsToShowQty == 0) showInitialItems();
   else
@@ -75,11 +95,11 @@ showInitialItems();
     <div
       class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
       v-for="(item, index) in itemsToShow"
-      :key="item.depositID"
+      :key="item.blockNumber"
     >
       <span class="last-release-info">
         {{
-          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+          isValidDeposit(item) ? item.remaining : formatEther(item.args?.amount)
         }}
         BRZ
       </span>
@@ -87,55 +107,38 @@ showInitialItems();
       <!-- TODO: change this hardcoded date -->
       <span class="last-release-info transaction-date"> 20 out 2022 </span>
 
+      <span class="last-release-info" v-if="!props.isManageMode">
+        {{ getEventName((item as Event).event) }}
+      </span>
+
+      <div
+        v-if="!props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="openEtherscanUrl((item as Event)?.transactionHash)"
+      >
+        <span class="last-release-info">Etherscan</span>
+        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      </div>
+
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', item.depositID, index)"
+        @click="emit('cancelDeposit', (item as ValidDeposit).depositID, index)"
       >
         <span class="last-release-info">Cancelar</span>
         <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
-      <span
-        class="last-release-info transfer-type"
-        v-if="item.event == 'DepositAdded' && !props.isManageMode"
-      >
-        {{ "Oferta" }}
-      </span>
-
-      <span
-        class="last-release-info transfer-type"
-        v-if="item.event == 'LockAdded' && !props.isManageMode"
-      >
-        {{ "Reserva" }}
-      </span>
-
-      <span
-        class="last-release-info transfer-type"
-        v-if="item.event == 'LockReleased' && !props.isManageMode"
-      >
-        {{ "Compra" }}
-      </span>
-
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('withdrawDeposit', item.depositID, index)"
+        @click="
+          emit('withdrawDeposit', (item as ValidDeposit).depositID, index)
+        "
       >
         <span class="last-release-info">Retirar</span>
         <img alt="Cancel image" src="@/assets/withdraw.svg" />
       </div>
-
-      <div
-        v-if="!props.isManageMode"
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="
-          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
-        "
-      >
-        <span class="last-release-info">Etherscan</span>
-        <img alt="Redirect image" src="@/assets/redirect.svg" />
-      </div>
     </div>
     <div
       class="flex flex-col justify-center items-center w-full mt-2 gap-2"