Add watch to network when user is on manage bids or transaction history

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/components/ListingComponent.vue

@@ -43,6 +43,18 @@ const loadMore = (): void => {
   );
 };
 
+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 (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -95,6 +107,19 @@ showInitialItems();
       <!-- TODO: change this hardcoded date -->
       <span class="last-release-info"> 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"
@@ -104,27 +129,6 @@ showInitialItems();
         <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
-      <span
-        class="last-release-info"
-        v-if="(item as Event).event == 'DepositAdded' && !props.isManageMode"
-      >
-        {{ "Oferta" }}
-      </span>
-
-      <span
-        class="last-release-info"
-        v-if="(item as Event).event == 'LockAdded' && !props.isManageMode"
-      >
-        {{ "Reserva" }}
-      </span>
-
-      <span
-        class="last-release-info"
-        v-if="(item as Event).event == 'LockReleased' && !props.isManageMode"
-      >
-        {{ "Compra" }}
-      </span>
-
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
@@ -135,15 +139,6 @@ showInitialItems();
         <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((item as Event)?.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"

src/views/ManageBidsView.vue

@@ -10,7 +10,7 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 
 const etherStore = useEtherStore();
 
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress, networkName } = storeToRefs(etherStore);
 const depositList = ref<ValidDeposit[]>([]);
 
 if (walletAddress.value) {
@@ -46,6 +46,12 @@ watch(walletAddress, async () => {
     depositList.value = walletDeposits;
   }
 });
+
+watch(networkName, async () => {
+  await listValidDepositTransactionsByWalletAddress(walletAddress.value).then((res) => {
+    if (res) depositList.value = res;
+  });
+});
 </script>
 
 <template>

src/views/TransactionHistoryView.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import ListingComponent from "@/components/ListingComponent.vue";
 import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
 import type { Event } from "ethers";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 
 const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress, networkName } = storeToRefs(etherStore);
 const allUserTransactions = ref<(Event | ValidDeposit)[]>([]);
 
+onMounted(async () => {
   if (walletAddress.value) {
   await listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
     if (res) allUserTransactions.value = res;
   });
 }
+})
 
 watch(walletAddress, async (newValue) => {
   await listAllTransactionByWalletAddress(newValue).then((res) => {
@@ -23,12 +25,10 @@ watch(walletAddress, async (newValue) => {
   });
 });
 
-watch(walletAddress, async (newValue) => {
+watch(networkName, async () => {
-  console.log(newValue);
+  await listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
+    if (res) allUserTransactions.value = res;
   });
-
-watch(allUserTransactions, (newValue) => {
-  console.log(newValue);
 });
 </script>