feat: Account - Adjust transactions tab display only transactions per…

…formed by the account (#515)

Co-authored-by: luekromanowicz <lromanowicz1@gmail.com>

src/components/AccountTransactionsPanel.vue

@@ -3,7 +3,6 @@
     <paginated-content
       v-model:page-index="pageIndex"
       :entities="accountTransactions"
-      :total-count="accountTransactionsCount"
       :limit="limit"
       pagination-style="history"
       @prev-clicked="loadPrevTransactions"
@@ -35,26 +34,20 @@ import PaginatedContent from '@/components/PaginatedContent'
 
 const route = useRoute()
 const accountStore = useAccountStore()
-const { fetchAccountTransactions, fetchAccountTransactionsCount } = accountStore
-const { accountTransactions, accountTransactionsCount } = storeToRefs(accountStore)
+const { fetchAccountTransactions } = accountStore
+const { accountTransactions } = storeToRefs(accountStore)
 
 const selectedTxType = ref({ typeQuery: null, label: 'All types' })
 const pageIndex = ref(1)
 
 const limit = computed(() => isDesktop() ? 10 : 3)
 
-await useAsyncData(async() => {
-  await fetchAccountTransactionsCount(route.params.id, selectedTxType.value.typeQuery)
-  return true
-})
-
 watch(selectedTxType, () => {
   fetchAccountTransactions({
     accountId: route.params.id,
     limit: limit.value,
     type: selectedTxType.value.typeQuery,
   })
-  fetchAccountTransactionsCount(route.params.id, selectedTxType.value.typeQuery)
   pageIndex.value = 1
 })
 

src/pages/accounts/[id].vue

@@ -17,6 +17,9 @@
 
     <client-only>
       <app-tabs v-if="isTabsVisible">
+        <app-tab title="Activities">
+          <account-activities-panel/>
+        </app-tab>
         <app-tab title="Transactions">
           <account-transactions-panel/>
         </app-tab>
@@ -28,9 +31,6 @@
           :is-preselected="isTokensTabSelected">
           <account-tokens-panel/>
         </app-tab>
-        <app-tab title="Activities">
-          <account-activities-panel/>
-        </app-tab>
       </app-tabs>
     </client-only>
   </template>

src/stores/accountDetails.js

@@ -16,7 +16,6 @@ export const useAccountStore = defineStore('account', () => {
   const { fetchPrice } = useDexStore()
 
   const rawAccountDetails = ref(null)
-  const accountTransactionsCount = ref(null)
   const totalAccountTransactionsCount = ref(null)
   const accountNamesCount = ref(null)
   const selectedKeyblock = ref(null)
@@ -34,7 +33,6 @@ export const useAccountStore = defineStore('account', () => {
       ? {
         ...rawAccountDetails.value,
         balance: formatAettosToAe(rawAccountDetails.value.balance),
-        transactionsCount: accountTransactionsCount.value,
         totalTransactionsCount: totalAccountTransactionsCount.value,
         namesCount: accountNamesCount.value,
         isGeneralized: rawAccountDetails.value.kind === 'generalized',
@@ -90,17 +88,6 @@ export const useAccountStore = defineStore('account', () => {
     }
   }
 
-  async function fetchAccountTransactionsCount(accountId, txType = null) {
-    accountTransactionsCount.value = null
-
-    const params = txType ? `/${accountId}?type=${txType}` : `?id=${accountId}`
-    const txCountUrl = new URL(`${MIDDLEWARE_URL}/v2/txs/count${params}`)
-
-    const { data } = await axios.get(txCountUrl)
-
-    accountTransactionsCount.value = data
-  }
-
   async function fetchTotalAccountTransactionsCount(accountId) {
     totalAccountTransactionsCount.value = null
     const txCountUrl = new URL(`${MIDDLEWARE_URL}/v2/txs/count`)
@@ -165,7 +152,7 @@ export const useAccountStore = defineStore('account', () => {
     transactionsUrl.searchParams.append('limit', limit ?? 10)
 
     if (accountId) {
-      transactionsUrl.searchParams.append('account', accountId)
+      transactionsUrl.searchParams.append('sender_id', accountId)
     }
 
     if (type) {
@@ -178,7 +165,6 @@ export const useAccountStore = defineStore('account', () => {
 
   return {
     rawAccountDetails,
-    accountTransactionsCount,
     totalAccountTransactionsCount,
     accountNamesCount,
     selectedKeyblock,
@@ -199,7 +185,6 @@ export const useAccountStore = defineStore('account', () => {
     fetchAccountActivities,
     fetchTotalAccountTransactionsCount,
     fetchAccountTransactions,
-    fetchAccountTransactionsCount,
     fetchAccountNames,
     fetchAccountTokens,
   }