diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue index 5bfee8b..72da322 100644 --- a/src/components/ListingComponent.vue +++ b/src/components/ListingComponent.vue @@ -6,16 +6,16 @@ import { ref, watch } from "vue"; const props = defineProps<{ walletTransactions: any[]; isManageMode: boolean; + walletAddress?: string; }>(); const itemsToShow = ref([]); -itemsToShow.value = - props.walletTransactions?.length > 3 - ? props.walletTransactions.slice(0, 3) - : props.walletTransactions; - // Methods +const showInitialItems = (items: any[]) => { + return items.length > 3 ? items.slice(0, 3) : items; +}; + const formatEventsAmount = (amount: any) => { try { const formated = blockchain.formatBigNumber(amount); @@ -41,15 +41,21 @@ const loadMore = () => { // watch props changes watch(props, (newProps) => { - const itemsToShowQty = itemsToShow.value.length - itemsToShow.value = - newProps?.walletTransactions.length > itemsToShowQty + 3 - ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3) - : newProps.walletTransactions; -}) + const itemsToShowQty = itemsToShow.value.length; + if (itemsToShowQty == 0) + itemsToShow.value = showInitialItems(props.walletTransactions); + else + itemsToShow.value = + newProps?.walletTransactions.length > itemsToShowQty + ? newProps.walletTransactions.slice(0, itemsToShowQty) + : newProps.walletTransactions; +}); //emits const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]); + +// initial itemToShow value +itemsToShow.value = showInitialItems(props.walletTransactions);