feat: Implement counter for token holders

src/components/TokenDetailsPanel.vue

@@ -102,6 +102,17 @@
             {{ tokenDetails.decimals }}
           </td>
         </tr>
+        <tr class="token-details-panel__row">
+          <th class="token-details-panel__table-header">
+            <hint-tooltip>
+              {{ tokensHints.holders }}
+            </hint-tooltip>
+            Token Holders
+          </th>
+          <td>
+            {{ tokenHoldersCount }}
+          </td>
+        </tr>
         <tr class="token-details-panel__row">
           <th class="token-details-panel__table-header">
             <hint-tooltip>
@@ -172,6 +183,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  tokenHoldersCount: {
+    type: Number,
+    required: true,
+  },
 })
 
 const tokenMiddlewareUrl = computed(() =>

src/components/TokenHoldersPanel.vue

@@ -2,6 +2,7 @@
   <app-panel class="token-holders-panel">
     <paginated-content
       :entities="tokenHolders"
+      :total-count="tokenHoldersCount"
       @prev-clicked="loadPrevHolders"
       @next-clicked="loadNextHolders">
       <token-holders-table
@@ -28,19 +29,23 @@ import TokenHoldersTableCondensed from '@/components/TokenHoldersTableCondensed'
 import PaginatedContent from '@/components/PaginatedContent'
 
 const tokenDetailsStore = useTokenDetailsStore()
-const { fetchTokenHolders } = tokenDetailsStore
-const { tokenHolders, tokenDetails } = storeToRefs(tokenDetailsStore)
+const { fetchTokenHolders, fetchTokenHoldersCount } = tokenDetailsStore
+const { tokenHolders, tokenDetails, tokenHoldersCount } = storeToRefs(tokenDetailsStore)
 
 function loadPrevHolders() {
   fetchTokenHolders({ queryParameters: tokenHolders.value.prev })
+  fetchTokenHoldersCount()
 }
 
 function loadNextHolders() {
   fetchTokenHolders({ queryParameters: tokenHolders.value.next })
+  fetchTokenHoldersCount()
 }
 
 if (process.client) {
   const limit = computed(() => isDesktop() ? 10 : 3)
+  fetchTokenHoldersCount()
+
   fetchTokenHolders({
     limit: limit.value,
   })

src/pages/tokens/[id].vue

@@ -13,7 +13,8 @@
   <template v-if="!isLoading">
     <token-details-panel
       class="token-details__panel"
-      :token-details="tokenDetails"/>
+      :token-details="tokenDetails"
+      :token-holders-count="tokenHoldersCount"/>
 
     <app-tabs v-model="activeTabIndex">
       <app-tab title="Holders">
@@ -35,7 +36,7 @@ const route = useRoute()
 const { push, replace } = useRouter()
 
 const tokenDetailsStore = useTokenDetailsStore()
-const { tokenDetails } = storeToRefs(tokenDetailsStore)
+const { tokenDetails, tokenHoldersCount } = storeToRefs(tokenDetailsStore)
 const { fetchTokenDetails } = tokenDetailsStore
 
 const { isLoading } = useLoading()

src/stores/tokenDetails.js

@@ -1,7 +1,7 @@
 import { defineStore, storeToRefs } from 'pinia'
 import { useRuntimeConfig } from 'nuxt/app'
 import useAxios from '@/composables/useAxios'
-import { adaptTokenDetails, adaptTokenEvents } from '@/utils/adapters'
+import { adaptTokenDetails, adaptTokenEvents, adaptTokenHolders } from '@/utils/adapters'
 import { TOKEN_SUPPLY_ACI } from '@/utils/constants'
 import { useAesdk } from '@/stores/aesdk'
 import { useDexStore } from '@/stores/dex'
@@ -20,6 +20,7 @@ export const useTokenDetailsStore = defineStore('tokenDetails', () => {
   const rawToken = ref(null)
   const rawTotalSupply = ref(null)
   const rawTokenHolders = ref(null)
+  const tokenHoldersCount = ref(null)
 
   const tokenDetails = computed(() => rawToken.value
     ? adaptTokenDetails(
@@ -87,15 +88,24 @@ export const useTokenDetailsStore = defineStore('tokenDetails', () => {
 
   async function fetchTokenHolders({ queryParameters, limit } = {}) {
     rawTokenHolders.value = null
-    const defaultParameters = `/v3/aex9/${tokenId.value}/balances?by=amount&limit=${limit ?? 10}`
+    const defaultParameters = `/v2/aex9/${tokenId.value}/balances?by=amount&limit=${limit ?? 10}`
     const { data } = await axios.get(`${MIDDLEWARE_URL}${queryParameters || defaultParameters}`)
     rawTokenHolders.value = data
   }
 
+  async function fetchTokenHoldersCount() {
+    tokenHoldersCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/aex9/${tokenId.value}`)
+    tokenHoldersCount.value = data.holders
+  }
+
   return {
     fetchTokenDetails,
     fetchTokenHolders,
+    tokenHoldersCount,
     fetchTokenEvents,
+    fetchTokenEventsCount,
+    fetchTokenHoldersCount,
     tokenDetails,
     tokenHolders,
     tokenEvents,

src/utils/hints/tokensHints.js

@@ -10,6 +10,7 @@ export const tokensHints = {
   extensions: 'Extensions that are implemented for this token according to the creator of the smart contract.',
   apiLinks: 'Links to sources of the token data.',
   account: 'Account of the token holder.',
+  holders: 'Amount of holders of the token.',
   amount: 'Amount of the tokens held by its owner.',
   percentage: 'Percentage of the token supply held by the account.',
   hash: 'Transaction hash of the event.',