Update DepositsHistory page behavior

src/views/DepositsHistoryView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import ListingComponent from "@/components/ListingComponent.vue";
 import blockchain from "../utils/blockchain";
 
@@ -9,29 +9,28 @@ const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const allUserTransactions = ref<any[]>([]);
 
-if (walletAddress.value != "") {
-  blockchain
-    .listAllTransactionByWalletAddress(walletAddress.value)
-    .then((res) => {
-      allUserTransactions.value = res;
-    });
-}
+watch(walletAddress, async (newValue) => {
+  await blockchain
+    .listAllTransactionByWalletAddress(newValue)
+    .then((res) => (allUserTransactions.value = res));
+});
+
+watch(walletAddress, async (newValue) => {
+  console.log(newValue);
+});
+
+watch(allUserTransactions, (newValue) => {
+  console.log(newValue);
+});
 </script>
 
 <template>
   <div class="page">
     <div class="header">Histórico de Depósitos</div>
     <ListingComponent
-      v-if="walletAddress != '' && allUserTransactions.length != 0"
       :wallet-transactions="allUserTransactions"
       :is-manage-mode="false"
     ></ListingComponent>
-    <div v-if="walletAddress == ''">
-      Conecte sua carteira para ver o histórico
-    </div>
-    <div v-if="allUserTransactions.length == 0 && walletAddress != ''">
-      Carregando dados...
-    </div>
   </div>
 </template>