From 693f523853ef24abcf6dfb1c2a611d87ef28be33 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 4 Sep 2024 14:40:52 +0200
Subject: [PATCH 1/2] display token holders count

---
 hamster.aes                          |  0
 src/components/TokenDetailsPanel.vue | 15 +++++++++++++++
 src/components/TokenHoldersPanel.vue |  9 +++++++--
 src/pages/tokens/[id].vue            |  5 +++--
 src/stores/tokenDetails.js           | 13 +++++++++++--
 src/utils/hints/tokensHints.js       |  1 +
 6 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 hamster.aes

diff --git a/hamster.aes b/hamster.aes
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/TokenDetailsPanel.vue b/src/components/TokenDetailsPanel.vue
index 39ef2f918..16fa6f294 100644
--- a/src/components/TokenDetailsPanel.vue
+++ b/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(() =>
diff --git a/src/components/TokenHoldersPanel.vue b/src/components/TokenHoldersPanel.vue
index a8c591ef0..b98056b00 100644
--- a/src/components/TokenHoldersPanel.vue
+++ b/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,
   })
diff --git a/src/pages/tokens/[id].vue b/src/pages/tokens/[id].vue
index 90b909807..f93f74b95 100644
--- a/src/pages/tokens/[id].vue
+++ b/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()
diff --git a/src/stores/tokenDetails.js b/src/stores/tokenDetails.js
index a06eedcec..c2ed726a9 100644
--- a/src/stores/tokenDetails.js
+++ b/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(
@@ -91,16 +92,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,
diff --git a/src/utils/hints/tokensHints.js b/src/utils/hints/tokensHints.js
index 7365f9143..3c3ceb121 100644
--- a/src/utils/hints/tokensHints.js
+++ b/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.',

From 442ddc7568e8da1a62c9ec2ea1129f8f0b8afc00 Mon Sep 17 00:00:00 2001
From: janmichek <jan@janmichek.cz>
Date: Wed, 4 Sep 2024 14:41:13 +0200
Subject: [PATCH 2/2] remove unused file

---
 hamster.aes | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 hamster.aes

diff --git a/hamster.aes b/hamster.aes
deleted file mode 100644
index e69de29bb..000000000