P2Pix-Front-End/src/views/TransactionHistoryView.vue
2023-01-16 11:23:30 -03:00

56 lines
1.4 KiB
Vue

<script setup lang="ts">
import { useEtherStore } from "@/store/ether";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
import blockchain from "../utils/blockchain";
const etherStore = useEtherStore();
const { walletAddress } = storeToRefs(etherStore);
const allUserTransactions = ref<any[]>([]);
if (walletAddress.value) {
await blockchain
.listAllTransactionByWalletAddress(walletAddress.value)
.then((res) => {
if (res) allUserTransactions.value = res;
});
}
watch(walletAddress, async (newValue) => {
await blockchain.listAllTransactionByWalletAddress(newValue).then((res) => {
if (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 transações</div>
<div class="w-full max-w-4xl">
<ListingComponent
:wallet-transactions="allUserTransactions"
:is-manage-mode="false"
></ListingComponent>
</div>
</div>
</template>
<style scoped>
.page {
@apply flex flex-col gap-10 mt-20 w-full items-center;
}
.header {
@apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
}
</style>