fix: load filtered transactions correctly

Author: CedrikNikita

src/popup/components/TransactionList.vue

@@ -36,6 +36,7 @@ import {
   PropType,
   computed,
   defineComponent,
+  watch,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
@@ -54,6 +55,7 @@ import {
   useAccounts,
   useAeSdk,
   useTransactionAndTokenFilter,
+  useViewport,
 } from '@/composables';
 import { AE_TRANSACTION_OWNERSHIP_STATUS } from '@/protocols/aeternity/config';
 import {
@@ -83,11 +85,12 @@ export default defineComponent({
     loading: Boolean,
   },
   emits: ['loadMore'],
-  setup(props) {
+  setup(props, { emit }) {
     const store = useStore();
     const { t } = useI18n();
     const { accounts, activeAccount } = useAccounts({ store });
     const { dexContracts } = useAeSdk({ store });
+    const { viewportElement } = useViewport();
 
     const {
       searchPhrase,
@@ -144,6 +147,32 @@ export default defineComponent({
       );
     }
 
+    function checkLoadMore() {
+      if (!viewportElement.value) {
+        return;
+      }
+
+      const {
+        scrollHeight,
+        scrollTop,
+        clientHeight,
+      } = viewportElement.value!;
+
+      if (scrollHeight - scrollTop <= clientHeight + 100) {
+        emit('loadMore');
+      }
+    }
+
+    watch(displayMode, () => {
+      checkLoadMore();
+    });
+
+    watch(() => props.loading, (val) => {
+      if (!val) {
+        checkLoadMore();
+      }
+    });
+
     const filteredTransactions = computed(
       () => pipe([
         filterTransactionsByDisplayMode,

src/popup/pages/FungibleTokens/TokenTransactions.vue

@@ -8,7 +8,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import {
+  computed, defineComponent, ref, onMounted,
+} from 'vue';
 import { useStore } from 'vuex';
 import type { ICommonTransaction, ITokenList, ITx } from '@/types';
 import { TXS_PER_PAGE } from '@/constants';
@@ -36,6 +38,7 @@ export default defineComponent({
     const {
       fetchTransactions,
       getAccountAllTransactions,
+      getAccountTransactionsState,
     } = useTransactionList({ store });
 
     const loading = ref(false);
@@ -48,6 +51,10 @@ export default defineComponent({
         : activeAccount.value.address,
     );
 
+    const canLoadMore = computed(() => (
+      !!getAccountTransactionsState(currentAddress.value!).nextPageUrl
+    ));
+
     const loadedTransactionList = computed(
       (): ICommonTransaction[] => getAccountAllTransactions(currentAddress.value!),
     );
@@ -89,11 +96,15 @@ export default defineComponent({
     }
 
     async function loadMore() {
-      if (!loading.value) {
+      if (!loading.value && canLoadMore.value) {
         await fetchTransactionList();
       }
     }
 
+    onMounted(() => {
+      fetchTransactionList();
+    });
+
     return {
       loading,
       filteredTransactions,

src/protocols/aeternity/views/AccountDetailsTransactions.vue

@@ -21,7 +21,6 @@ import {
   onMounted,
   onUnmounted,
   ref,
-  watch,
 } from 'vue';
 import { useStore } from 'vuex';
 
@@ -30,10 +29,8 @@ import { TXS_PER_PAGE } from '@/constants';
 import {
   useAccounts,
   useConnection,
-  useTransactionAndTokenFilter,
   useTransactionList,
   useUi,
-  useViewport,
 } from '@/composables';
 
 import MessageOffline from '@/popup/components/MessageOffline.vue';
@@ -58,7 +55,6 @@ export default defineComponent({
 
     const { isOnline } = useConnection();
     const { isAppActive } = useUi();
-    const { viewportElement } = useViewport();
     const { activeAccount } = useAccounts({ store });
 
     const {
@@ -67,8 +63,6 @@ export default defineComponent({
       fetchTransactions,
     } = useTransactionList({ store });
 
-    const { displayMode } = useTransactionAndTokenFilter();
-
     const loading = ref(false);
     const isDestroyed = ref(false);
 
@@ -94,39 +88,13 @@ export default defineComponent({
     }
 
     async function loadMore() {
-      if (!loading.value) {
+      if (!loading.value && !isDestroyed.value && canLoadMore.value) {
         await fetchTransactionList();
       }
     }
 
-    async function checkLoadMore() {
-      if (viewportElement.value && (isDestroyed.value || !canLoadMore.value)) {
-        return;
-      }
-
-      const {
-        scrollHeight,
-        scrollTop,
-        clientHeight,
-      } = viewportElement.value!;
-
-      if (scrollHeight - scrollTop <= clientHeight + 100) {
-        await loadMore();
-      }
-    }
-
-    watch(displayMode, () => {
-      checkLoadMore();
-    });
-
-    watch(loading, async (val) => {
-      if (!val) {
-        await checkLoadMore();
-      }
-    });
-
     onMounted(() => {
-      loadMore();
+      fetchTransactionList();
       polling = setInterval(() => {
         if (isAppActive.value) {
           fetchTransactionList(true);