feat: Top accounts

src/components/MicroblockTransactionsPanel.vue

@@ -24,7 +24,7 @@ import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useRouter } from '#app'
 import { useMicroblockDetailsStore } from '@/stores/microblockDetails'
-import { TX_TYPES_OPTIONS } from '~/utils/constants'
+import { TX_TYPES_OPTIONS } from '@/utils/constants'
 
 const { push } = useRouter()
 const microblockDetailsStore = useMicroblockDetailsStore()

src/components/TopAccountsPanel.vue

@@ -0,0 +1,28 @@
+<template>
+  <app-panel>
+    <top-accounts-table
+      :top-accounts="topAccounts"
+      class="u-hidden-mobile"/>
+    <top-accounts-table-condensed
+      :top-accounts="topAccounts"
+      class="u-hidden-desktop"/>
+  </app-panel>
+</template>
+
+<script setup>
+import { useTopAccountsStore } from '@/stores/topAccounts'
+import { useBlockchainStatsStore } from '@/stores/blockchainStats'
+import TopAccountsTable from '@/components/TopAccountsTable'
+import TopAccountsTableCondensed from '@/components/TopAccountsTableCondensed'
+
+const topAccountsStore = useTopAccountsStore()
+const { topAccounts } = storeToRefs(topAccountsStore)
+const { fetchTopAccounts } = useTopAccountsStore()
+const { fetchTotalStats } = useBlockchainStatsStore()
+
+await useAsyncData(async() => {
+  await fetchTopAccounts()
+  await fetchTotalStats()
+  return true
+})
+</script>

src/components/TopAccountsTable.vue

@@ -0,0 +1,60 @@
+<template>
+  <table class="top-accounts-table">
+    <tr>
+      <th>
+        Rank
+        <hint-tooltip>
+          {{ topAccountsHints.rank }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Account
+        <hint-tooltip>
+          {{ topAccountsHints.account }}
+        </hint-tooltip>
+      </th>
+      <th>
+        Balance
+        <hint-tooltip>
+          {{ topAccountsHints.balance }}
+        </hint-tooltip>
+      </th>
+      <th>
+        % Of Circulating
+        <hint-tooltip>
+          {{ topAccountsHints.percentage }}
+        </hint-tooltip>
+      </th>
+    </tr>
+    <tr
+      v-for="account in topAccounts"
+      :key="account.account">
+      <td>{{ account.rank }}.</td>
+
+      <td>
+        <app-link
+          :to="`/accounts/${account.account}`">
+          {{ account.account }}
+        </app-link>
+      </td>
+      <td>{{ account.balance }}</td>
+      <td>{{ account.percentage }} %</td>
+    </tr>
+  </table>
+</template>
+<script setup>
+import { topAccountsHints } from '@/utils/hints/topAccountsHints'
+
+defineProps({
+  topAccounts: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.top-accounts-table {
+  margin-bottom: var(--space-4);
+}
+</style>

src/components/TopAccountsTableCondensed.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <table
+      v-for="account in topAccounts"
+      :key="account.account"
+      class="top-accounts-table-condensed__table">
+      <tbody>
+        <tr class="top-accounts-table-condensed__row">
+          <th class="top-accounts-table-condensed__header">
+            <app-tooltip>
+              Rank
+              <template #tooltip>
+                {{ topAccountsHints.rank }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="top-accounts-table-condensed__data">
+            {{ account.rank }}.
+          </td>
+        </tr>
+        <tr class="top-accounts-table-condensed__row">
+          <th class="top-accounts-table-condensed__header">
+            <app-tooltip>
+              Account
+              <template #tooltip>
+                {{ topAccountsHints.account }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="top-accounts-table-condensed__data">
+            <app-link
+              :to="`/accounts/${account.account}`">
+              {{ account.account }}
+            </app-link>
+          </td>
+        </tr>
+        <tr class="top-accounts-table-condensed__row">
+          <th class="top-accounts-table-condensed__header">
+            <app-tooltip>
+              Balance
+              <template #tooltip>
+                {{ topAccountsHints.balance }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="top-accounts-table-condensed__data">
+            {{ account.balance }}
+          </td>
+        </tr>
+        <tr class="top-accounts-table-condensed__row">
+          <th class="top-accounts-table-condensed__header">
+            <app-tooltip>
+              % Of Circulating
+              <template #tooltip>
+                {{ topAccountsHints.percentage }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="top-accounts-table-condensed__data">
+            {{ account.percentage }} %
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script setup>
+
+import { topAccountsHints } from '@/utils/hints/topAccountsHints'
+
+defineProps({
+  topAccounts: {
+    type: Array,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.top-accounts-table-condensed {
+  &__table {
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-25);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>

src/pages/top-accounts/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <Head>
+    <Title>Top Accounts</Title>
+  </Head>
+
+  <page-header>
+    Top Accounts
+    <template #tooltip>
+      {{ topAccountsHints.topAccounts }}
+    </template>
+  </page-header>
+  <top-accounts-panel v-if="!isLoading"/>
+  <loader-panel v-else/>
+</template>
+
+<script setup>
+import PageHeader from '@/components/PageHeader'
+import { topAccountsHints } from '~/utils/hints/topAccountsHints'
+
+const { isLoading } = useLoading()
+</script>

src/stores/topAccounts.js

@@ -0,0 +1,31 @@
+import { useBlockchainStatsStore } from '@/stores/blockchainStats'
+
+export const useTopAccountsStore = defineStore('topAccounts', () => {
+  const axios = useAxios()
+  const rawTopAccounts = ref(null)
+  const { MIDDLEWARE_URL } = useRuntimeConfig().public
+  const blockchainStatsStore = useBlockchainStatsStore()
+
+  const topAccounts = computed(() =>
+    rawTopAccounts.value && distribution.value
+      ? adaptTopAccounts(rawTopAccounts.value, distribution.value)
+      : null,
+  )
+
+  const distribution = computed(() =>
+    blockchainStatsStore.totalTokenSupply && blockchainStatsStore.burnedCount
+      ? Number(blockchainStatsStore.totalTokenSupply) + Number(blockchainStatsStore.burnedCount)
+      : null,
+  )
+
+  async function fetchTopAccounts() {
+    rawTopAccounts.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/wealth`)
+    rawTopAccounts.value = data
+  }
+
+  return {
+    topAccounts,
+    fetchTopAccounts,
+  }
+})

src/utils/adapters.js

@@ -603,3 +603,14 @@ export function adaptNft(nft) {
     templateLimit: formatTemplateLimit(nft.extensions, nft.limits?.templateLimit),
   }
 }
+
+export function adaptTopAccounts(topAccounts, distribution) {
+  return topAccounts.map((account, index) => {
+    return {
+      rank: index + 1,
+      account: account.account,
+      balance: formatAePrice(formatAettosToAe(account.balance)),
+      percentage: (formatAettosToAe(account.balance) * 100 / distribution).toFixed(2),
+    }
+  })
+}

src/utils/hints/topAccountsHints.js

@@ -0,0 +1,7 @@
+export const topAccountsHints = {
+  topAccounts: 'The top accounts are the accounts with the highest balance of AE coins.',
+  rank: 'Rank of the account in the top accounts list.',
+  balance: 'Amount of AE tokens held by the account',
+  account: 'Account address.',
+  percentage: 'Percentage of the total supply of AE coins that the account holds.',
+}