From 79b3f0948742ff5f476a1160fcf01b66883c538a Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 9 Jan 2025 21:25:07 -0300
Subject: [PATCH 1/8] adding section /accounts for paginated native  balances

---
 src/App.vue                                   |  9 +-
 src/boot/core.ts                              |  1 -
 src/components/Token/HolderList.vue           | 40 +++++----
 src/config/chains/telos-evm-testnet/index.ts  |  4 +
 src/config/chains/telos-evm/index.ts          |  4 +
 .../chains/telos-zkevm-testnet/index.ts       |  4 +
 src/i18n/de-de/index.js                       |  2 +
 src/i18n/en-us/index.js                       |  2 +
 src/i18n/es-es/index.js                       |  2 +
 src/i18n/fr-fr/index.js                       |  2 +
 src/i18n/pt-br/index.js                       |  2 +
 src/pages/Holders.vue                         | 15 ----
 src/pages/HoldersPage.vue                     | 82 +++++++++++++++++++
 src/router/routes.js                          |  6 +-
 14 files changed, 138 insertions(+), 37 deletions(-)
 delete mode 100644 src/pages/Holders.vue
 create mode 100644 src/pages/HoldersPage.vue

diff --git a/src/App.vue b/src/App.vue
index 69ec64ffa..43d59c3a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -36,7 +36,11 @@ const checkNetworkHealth = async () => {
     const background = theme?.primary || '#0099FF';
     const color = theme?.color || 'white';
     // print in console with background #8B3F98 and white text the following message: Using indexer {health.data.version} with {health.data.secondsBehind} seconds behind
-    console.debug(`%cUsing indexer ${health.data.version} for '${chainName}' with ${health.data.secondsBehind} seconds behind`, `background: ${background}; color: ${color};`);
+    console.debug(
+        `%cUsing indexer ${health.data.version} for '${chainName}' ` +
+        (health.data?.secondsBehind > 3 ? `%cwith ${health.data.secondsBehind} seconds behind` : ''),
+        `background: ${background}; color: ${color};`,
+    );
 
     if (health.data?.secondsBehind > 3) {
         let behindBy = moment(health.data.secondsBehind * 1000).utc().format('HH:mm:ss');
@@ -64,7 +68,7 @@ const checkNetworkHealth = async () => {
 };
 
 onMounted(async () => {
-    // await checkNetworkHealth();
+    await checkNetworkHealth();
 
     // On login we must set the address and record the provider
     getCore().events.onLoggedOut.subscribe(() => {
@@ -97,6 +101,7 @@ watch(
         }
     },
 );
+
 </script>
 
 <template>
diff --git a/src/boot/core.ts b/src/boot/core.ts
index 431a12c9a..2cb6dec6e 100644
--- a/src/boot/core.ts
+++ b/src/boot/core.ts
@@ -7,7 +7,6 @@ export default boot(({ app }) => {
 
     const defaultNetwork = Object.keys(evmSettings)[0];
     let network = new URLSearchParams(window.location.search).get('network') ?? process.env.NETWORK_EVM_NAME;
-    console.log('Multichain initMultichain()', { network, NETWORK_EVM_NAME: process.env.NETWORK_EVM_NAME });
     if (network) {
         const exists = Object.keys(evmSettings).some(key => evmSettings[key].getNetwork() === network);
         if (!exists) {
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index 9d3df9fb9..e3d969950 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -5,6 +5,8 @@ import { formatWei } from 'src/lib/utils';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
 import { useChainStore } from 'src/core';
+import { NativeCurrencyAddress } from 'src/core/types';
+
 export default {
     name: 'HolderList',
     components: {
@@ -105,13 +107,28 @@ export default {
             this.loading = false;
         },
         getPath(props) {
+            // Decide base path depending on whether contract is the native address
             const { page, rowsPerPage, descending } = props.pagination;
-            let path = `/v1/token/${this.contract.address}/holders?limit=${
+            let basePath = '';
+
+            if (this.contract.address === NativeCurrencyAddress) {
+                basePath = '/v1/balances';
+            } else {
+                basePath = `/v1/token/${this.contract.address}/holders`;
+            }
+
+            let path = `${basePath}?limit=${
                 rowsPerPage === 0 ? 10 : rowsPerPage
             }`;
-            path += `&includeAbi=true&offset=${(page - 1) * rowsPerPage}`;
+            path += '&includeAbi=true';
+            path += `&offset=${(page - 1) * rowsPerPage}`;
             path += '&includePagination=true';
-            path = (!this.showSystemContracts) ? path + '&not=' + this.systemContractsList : path;
+
+            // Optionally exclude system contracts if showSystemContracts is false
+            if (!this.showSystemContracts) {
+                path += '&not=' + this.systemContractsList;
+            }
+
             path += `&sort=${descending ? 'desc' : 'asc'}`;
             return path;
         },
@@ -285,19 +302,10 @@ export default {
     </template>
     <template v-slot:body="">
         <q-tr>
-            <q-td key="holder">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="balance">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="telos_supply_share">
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="supply_share" >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-            <q-td key="updated">
+            <q-td
+                v-for="col in columns"
+                :key="col.name"
+            >
                 <q-skeleton type="text" class="c-trx-overview__skeleton" />
             </q-td>
         </q-tr>
diff --git a/src/config/chains/telos-evm-testnet/index.ts b/src/config/chains/telos-evm-testnet/index.ts
index a5177a7b8..c5cd97e31 100644
--- a/src/config/chains/telos-evm-testnet/index.ts
+++ b/src/config/chains/telos-evm-testnet/index.ts
@@ -173,6 +173,10 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
+                    {
+                        'label': 'components.header.accounts',
+                        'internalLink': 'accounts',
+                    },
                 ],
             },
             {
diff --git a/src/config/chains/telos-evm/index.ts b/src/config/chains/telos-evm/index.ts
index 8211d75be..e01b221a1 100644
--- a/src/config/chains/telos-evm/index.ts
+++ b/src/config/chains/telos-evm/index.ts
@@ -205,6 +205,10 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
+                    {
+                        'label': 'components.header.accounts',
+                        'internalLink': 'accounts',
+                    },
                 ],
             },
             {
diff --git a/src/config/chains/telos-zkevm-testnet/index.ts b/src/config/chains/telos-zkevm-testnet/index.ts
index 813e1d0a2..b11836b8c 100644
--- a/src/config/chains/telos-zkevm-testnet/index.ts
+++ b/src/config/chains/telos-zkevm-testnet/index.ts
@@ -191,6 +191,10 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
+                    {
+                        'label': 'components.header.accounts',
+                        'internalLink': 'accounts',
+                    },
                 ],
             },
             {
diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index 23b09d203..ebbfb354f 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Heim',
             more: 'Mehr',
             network: 'Netzwerk',
+            accounts: 'Konten',
+            accounts_title: 'Top-Konten nach {symbol}-Saldo',
             open_language_switcher: 'open language switcher',
             search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
             search_placeholder: 'Suche alles auf Telos',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index b4f240fdc..87dac1560 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -472,6 +472,8 @@ export default {
             home: 'Home',
             more: 'More',
             network: 'Network',
+            accounts: 'Accounts',
+            accounts_title: 'Top Accounts by {symbol} Balance',
             open_language_switcher: 'Open language switcher',
             search_failed: 'Search failed, please enter a valid search term.',
             search_placeholder: 'Search Address/Block/TxnHash',
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index c2743c7dc..8fb753988 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Inicio',
             more: 'Más',
             network: 'Red',
+            accounts: 'Cuentas',
+            accounts_title: 'Principales cuentas por saldo de {symbol}',
             open_language_switcher: 'Abrir el selector de idioma',
             search_failed: 'La búsqueda falló, ingrese un término de búsqueda válido.',
             search_placeholder: 'Busca cualquier cosa en Telos',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index 5eaa27ced..a565b3ca4 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Accueil',
             more: 'Plus',
             network: 'Réseau',
+            accounts: 'Comptes',
+            accounts_title: 'Comptes principaux par solde de {symbol}',
             open_language_switcher: 'Ouvrir le sélécteur de language',
             search_failed: 'La recherche a échoué, veuillez saisir des mots clés de recherche corrects.',
             search_placeholder: 'Adresse, Tx, Bloc',
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index b993e1905..68dc7e5b9 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -473,6 +473,8 @@ export default {
             home: 'Início',
             more: 'Mais',
             network: 'Rede',
+            accounts: 'Contas',
+            accounts_title: 'Principais contas por saldo de {symbol}',
             open_language_switcher: 'Abrir o seletor de idioma',
             search_failed: 'A busca falhou, insira um termo de pesquisa válido.',
             search_placeholder: 'Pesquise qualquer coisa no Telos',
diff --git a/src/pages/Holders.vue b/src/pages/Holders.vue
deleted file mode 100644
index 19e55414b..000000000
--- a/src/pages/Holders.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-export default {
-    name: 'HoldersPage',
-    components: {},
-    data() {
-        return {};
-    },
-};
-</script>
-
-<template>
-<div></div>
-</template>
-
-<style lang="sass" scoped></style>
diff --git a/src/pages/HoldersPage.vue b/src/pages/HoldersPage.vue
new file mode 100644
index 000000000..7a8b2b05c
--- /dev/null
+++ b/src/pages/HoldersPage.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+import HolderList from 'components/Token/HolderList.vue';
+import { NativeCurrencyAddress } from 'src/core/types';
+
+
+interface Properties {
+  name: string,
+  supply: string,
+  symbol: string,
+  holders: string,
+  decimals: string,
+  holders_updated: string,
+}
+
+const { t: $t } = useI18n();
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+const symbol = computed(() => systemToken.value.symbol);
+const contract = ref<{address:string, properties:Properties}>(({
+    address: NativeCurrencyAddress,
+    properties: {
+        name: '',
+        supply: '1000000000000000000000000000000',
+        symbol: symbol.value,
+        holders: '0',
+        decimals: '18',
+        holders_updated: '0',
+    },
+}));
+
+onMounted(() => {
+    useChainStore().currentChain.settings.getTelosApi().get('supply/total').then((res) => {
+        contract.value.properties.supply = Number(res.data).toFixed(systemToken.value.decimals).split('.').join('');
+    });
+    contract.value.properties.name = systemToken.value.name;
+    contract.value.properties.symbol = systemToken.value.symbol;
+    contract.value.properties.decimals = systemToken.value.decimals.toString();
+});
+
+</script>
+
+<template>
+<q-page class="c-holders">
+    <div class="c-holders__header">
+        <span class="c-holders__header-title">{{ $t('components.header.accounts_title', { symbol }) }}</span>
+    </div>
+
+    <div class="c-holders__main-container">
+        <div class="c-holders__main-content">
+            <HolderList
+                :contract="contract"
+            />
+        </div>
+    </div>
+
+</q-page>
+</template>
+<style lang="scss">
+
+.c-holders {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-block-num {
+            font-size: 1.5rem;
+            margin-left: 10px;
+        }
+    }
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+    }
+}
+
+</style>
+
diff --git a/src/router/routes.js b/src/router/routes.js
index d86a3b143..5ff68a855 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -86,12 +86,12 @@ const routes = [
         }],
     },
     {
-        path: '/holders',
+        path: '/accounts',
         component: () => import('layouts/MainLayout.vue'),
         children: [{
             path: '',
-            name: 'holders',
-            component: () => import('pages/Holders.vue'),
+            name: 'accounts',
+            component: () => import('pages/HoldersPage.vue'),
             meta: { networkChange: null },
         }],
     },

From d9c57f5d8e369b43eb72a4b84468ce95a9b17a93 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 10 Jan 2025 21:13:49 -0300
Subject: [PATCH 2/8] adding minimum indexer version support component

---
 src/components/MinimumVersionRequired.vue     | 127 +++++++
 src/components/Token/HolderList.vue           | 343 ++++++++++--------
 src/config/chains/telos-evm-testnet/index.ts  |   4 -
 .../chains/telos-zkevm-testnet/index.ts       |   4 -
 src/core/chains/EVMChainSettings.ts           |  58 ++-
 src/core/mocks/ChainStore.ts                  |   6 +-
 src/core/types/IndexerTypes.ts                |   1 +
 src/i18n/en-us/index.js                       |   4 +
 src/pages/HoldersPage.vue                     |   2 +
 9 files changed, 388 insertions(+), 161 deletions(-)
 create mode 100644 src/components/MinimumVersionRequired.vue

diff --git a/src/components/MinimumVersionRequired.vue b/src/components/MinimumVersionRequired.vue
new file mode 100644
index 000000000..26c6eba10
--- /dev/null
+++ b/src/components/MinimumVersionRequired.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+
+const { t: $t } = useI18n();
+const loadingComplete = ref(false);
+
+defineProps({
+    required: {
+        type: String,
+        required: true,
+    },
+});
+
+const current = ref('...');
+const settings = computed(() => useChainStore().currentChain.settings);
+const state = computed(() => settings.value.indexerHealthState);
+
+const updateData = async () => {
+    loadingComplete.value = false;
+    try {
+        if (typeof state.value.version === 'undefined') {
+            return;
+        }
+        current.value = state.value.version;
+        loadingComplete.value = true;
+    } catch(e) {
+        console.error(e);
+    }
+};
+
+onBeforeMount(async () => {
+    useChainStore().currentChain.settings.indexerReady$.subscribe(() => {
+        updateData();
+    });
+});
+
+watch(() => useChainStore().currentChain.settings.indexerHealthState.version, () => {
+    updateData();
+});
+
+</script>
+
+<template>
+<q-card class="c-minimum-version-required c-minimum-version-required__card">
+    <q-card-section class="c-minimum-version-required__card-section c-minimum-version-required__card-section--title">
+        <q-icon name="info" class="c-minimum-version-required__not-supported-icon" />
+        <div class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_title', {
+                network: settings.getDisplay(),
+            }) }}
+        </div>
+    </q-card-section>
+    <q-card-section class="c-minimum-version-required__card-section">
+        <!--
+            indexer_outdated_desc_1: '(Need version { version } but ',
+            indexer_outdated_desc_2: '{ apiUrl }',
+            indexer_outdated_desc_3: ' is version { current })',
+        -->
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_1', {
+                version: required,
+            }) }}
+        </span>
+        <a
+            color="primary"
+            class="c-minimum-version-required__not-supported-text"
+            :href="`${settings.getIndexerApiEndpoint()}/v1/health`"
+            target="_blank"
+        >
+            {{ $t('pages.indexer_outdated_desc_2', {
+                apiUrl: settings.getIndexerApiEndpoint(),
+            }) }}
+        </a>
+        <span class="c-minimum-version-required__not-supported-text">
+            {{ $t('pages.indexer_outdated_desc_3', {
+                current: current,
+            }) }}
+        </span>
+    </q-card-section>
+</q-card>
+</template>
+
+<style lang="scss">
+.c-minimum-version-required {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__card {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        &-section {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 6px;
+            word-wrap: break-word;
+            &--title {
+                flex-direction: row;
+                padding: 25px 0 10px 0;
+                font-size: 18px
+            }
+        }
+    }
+
+    &__not-supported-icon {
+        font-size: 24px;
+    }
+
+    @media screen and (min-width: $breakpoint-md-min) {
+        width: 70%;
+        &__card-section {
+            flex-direction: row;
+        }
+    }
+}
+</style>
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index e3d969950..055057fab 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -1,6 +1,7 @@
 <script>
 import AddressField from 'components/AddressField';
 import DateField from 'components/DateField';
+import MinimumVersionRequired from 'components/MinimumVersionRequired';
 import { formatWei } from 'src/lib/utils';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
@@ -12,6 +13,7 @@ export default {
     components: {
         AddressField,
         DateField,
+        MinimumVersionRequired,
     },
     props: {
         contract: {
@@ -25,14 +27,35 @@ export default {
         }
     },
     async mounted() {
+        console.log('-- HolderList mounted() 1 -- ', {
+            weHaveIndexerSupport: this.weHaveIndexerSupport,
+            version: useChainStore().currentChain.settings.indexerHealthState.version,
+        });
         let list = await useChainStore().currentChain.settings.getContractManager().getSystemContractsList();
         for(const contract in list.contracts){
             this.systemContractsList += list.contracts[contract].address + ',';
         }
         this.systemContractsList.substr(this.systemContractsList.length -2, this.systemContractsList.length - 1);
-        await this.onRequest({
-            pagination: this.pagination,
+        this.weHaveIndexerSupport = useChainStore().currentChain.settings.hasIndexerSupportOver(this.minimumVersion);
+        this.settings.indexerReady$.subscribe(() => {
+            this.weHaveIndexerSupport = useChainStore().currentChain.settings.hasIndexerSupportOver(this.minimumVersion);
+            console.log('------ indexerReady$ -------', {
+                weHaveIndexerSupport: this.weHaveIndexerSupport,
+                version: useChainStore().currentChain.settings.indexerHealthState.version,
+            });
+            this.onRequest({
+                pagination: this.pagination,
+            });
         });
+
+    },
+    computed: {
+        settings() {
+            return useChainStore().currentChain.settings;
+        },
+        state() {
+            return this.settings.indexerHealthState;
+        },
     },
     data() {
         let columns = [
@@ -67,6 +90,9 @@ export default {
             columns.splice(3, 1);
         }
         return {
+            weHaveIndexerSupport: false,
+            minimumVersion: '1.2.9', // "1.2.9 - adding /v1/balances endpoint"
+            // https://github.com/telosnetwork/teloscan-indexer/commit/14a712c3353566b2ba82a13a5336e4199e3476bf
             columns: columns,
             holders: [],
             loadingRows: [],
@@ -84,7 +110,13 @@ export default {
         };
     },
     methods: {
+        hasIndexerSupport() {
+            return this.weHaveIndexerSupport;
+        },
         async onRequest(props) {
+            if (!this.weHaveIndexerSupport) {
+                return;
+            }
             this.loading = true;
 
             const { page, rowsPerPage, sortBy, descending } = props.pagination;
@@ -157,160 +189,168 @@ export default {
 </script>
 
 <template>
-<q-table
-    v-if="!loading"
-    v-model:pagination="pagination"
-    :rows="holders"
-    :rows-per-page-label="$t('global.records_per_page')"
-    :binary-state-sort="true"
-    :row-key="row => row.address"
-    :columns="columns"
-    :rows-per-page-options="[10, 20, 50]"
-    @request="onRequest"
->
-    <template v-slot:header="props">
-        <q-tr :props="props">
-            <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-            >
-                <div class="u-flex--center-y">
-                    {{ col.label }}
-                </div>
-            </q-th>
-        </q-tr>
-    </template>
-    <template v-slot:body="props">
-        <q-tr :props="props">
-            <q-td key="holder" :props="props">
-                <AddressField
-                    :key="props.row.address + 'c'"
-                    :address="props.row.address"
-                    :truncate="18"
-                    :useHighlight="false"
-                />
-            </q-td>
-            <q-td key="balance" :props="props">
-                <span v-if="contract?.properties?.decimals">
-                    {{ displayBalance(props.row.balance, contract.properties?.decimals) }}
-                </span>
-                <span v-else>
-                    {{ props.row.balance }}
-                </span>
-            </q-td>
-            <q-td key="telos_supply_share" :props="props">
-                <span v-if="contract?.properties?.supply">
-                    <span>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            formatWei(
-                                contract.properties.supply,
-                                contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.decimals,
-                            2,
-                        )}}
+<template v-if="!weHaveIndexerSupport">
+    <MinimumVersionRequired
+        class="c-minimum-version-required"
+        required="1.2.9"
+    />
+</template>
+<template v-else>
+    <q-table
+        v-if="!loading"
+        v-model:pagination="pagination"
+        :rows="holders"
+        :rows-per-page-label="$t('global.records_per_page')"
+        :binary-state-sort="true"
+        :row-key="row => row.address"
+        :columns="columns"
+        :rows-per-page-options="[10, 20, 50]"
+        @request="onRequest"
+    >
+        <template v-slot:header="props">
+            <q-tr :props="props">
+                <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                >
+                    <div class="u-flex--center-y">
+                        {{ col.label }}
+                    </div>
+                </q-th>
+            </q-tr>
+        </template>
+        <template v-slot:body="props">
+            <q-tr :props="props">
+                <q-td key="holder" :props="props">
+                    <AddressField
+                        :key="props.row.address + 'c'"
+                        :address="props.row.address"
+                        :truncate="18"
+                        :useHighlight="false"
+                    />
+                </q-td>
+                <q-td key="balance" :props="props">
+                    <span v-if="contract?.properties?.decimals">
+                        {{ displayBalance(props.row.balance, contract.properties?.decimals) }}
                     </span>
-                    <q-tooltip>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
+                    <span v-else>
+                        {{ props.row.balance }}
+                    </span>
+                </q-td>
+                <q-td key="telos_supply_share" :props="props">
+                    <span v-if="contract?.properties?.supply">
+                        <span>
+                            {{ displaySupplyShare(
+                                formatWei(
+                                    props.row.balance,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
+                                formatWei(
+                                    contract.properties.supply,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
                                 contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            formatWei(
-                                contract.properties.supply,
+                                2,
+                            )}}
+                        </span>
+                        <q-tooltip>
+                            {{ displaySupplyShare(
+                                formatWei(
+                                    props.row.balance,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
+                                formatWei(
+                                    contract.properties.supply,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
                                 contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.decimals,
-                            false,
-                        )}}
-                    </q-tooltip>
-                </span>
-            </q-td>
-            <q-td v-if="contract?.properties?.total_supply_ibc" key="supply_share" :props="props">
-                <span>
+                                false,
+                            )}}
+                        </q-tooltip>
+                    </span>
+                </q-td>
+                <q-td v-if="contract?.properties?.total_supply_ibc" key="supply_share" :props="props">
                     <span>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
+                        <span>
+                            {{ displaySupplyShare(
+                                formatWei(
+                                    props.row.balance,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
+                                contract.properties?.total_supply_ibc, // Already formatted
                                 contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.total_supply_ibc, // Already formatted
-                            contract.properties?.decimals,
-                            2,
-                        )}}
-                    </span>
-                    <q-tooltip>
-                        {{ displaySupplyShare(
-                            formatWei(
-                                props.row.balance,
+                                2,
+                            )}}
+                        </span>
+                        <q-tooltip>
+                            {{ displaySupplyShare(
+                                formatWei(
+                                    props.row.balance,
+                                    contract.properties?.decimals,
+                                    contract.properties?.decimals
+                                ),
+                                contract.properties?.total_supply_ibc, // Already formatted
                                 contract.properties?.decimals,
-                                contract.properties?.decimals
-                            ),
-                            contract.properties?.total_supply_ibc, // Already formatted
-                            contract.properties?.decimals,
-                            false,
-                        )}}
-                    </q-tooltip>
-                </span>
-            </q-td>
-            <q-td key="updated" :props="props">
-                <DateField :epoch="props.row.updated / 1000" />
-            </q-td>
-        </q-tr>
-    </template>
-    <template v-if="holders.length > 0" v-slot:bottom-row>
-        <q-toggle
-            v-model="showSystemContracts"
-            :label="$t('components.holders.show_system_contracts')"
-            color="primary"
-            checked-icon="visibility"
-            unchecked-icon="visibility_off"
-            @update:model-value="onRequest({pagination: pagination})"
-        />
-    </template>
-</q-table>
-<q-table
-    v-else
-    v-model:pagination="pagination"
-    :rows="loadingRows"
-    :rows-per-page-label="$t('global.records_per_page')"
-    :columns="columns"
-    :rows-per-page-options="[10, 20, 50]"
->
-    <template v-slot:header="props">
-        <q-tr :props="props">
-            <q-th
-                v-for="col in props.cols"
-                :key="col.name"
-                :props="props"
-            >
-                <div class="u-flex--center-y">
-                    {{ col.label }}
-                </div>
-            </q-th>
-        </q-tr>
-    </template>
-    <template v-slot:body="">
-        <q-tr>
-            <q-td
-                v-for="col in columns"
-                :key="col.name"
-            >
-                <q-skeleton type="text" class="c-trx-overview__skeleton" />
-            </q-td>
-        </q-tr>
-    </template>
-</q-table>
+                                false,
+                            )}}
+                        </q-tooltip>
+                    </span>
+                </q-td>
+                <q-td key="updated" :props="props">
+                    <DateField :epoch="props.row.updated / 1000" />
+                </q-td>
+            </q-tr>
+        </template>
+        <template v-if="holders.length > 0" v-slot:bottom-row>
+            <q-toggle
+                v-model="showSystemContracts"
+                :label="$t('components.holders.show_system_contracts')"
+                color="primary"
+                checked-icon="visibility"
+                unchecked-icon="visibility_off"
+                @update:model-value="onRequest({pagination: pagination})"
+            />
+        </template>
+    </q-table>
+    <q-table
+        v-else
+        v-model:pagination="pagination"
+        :rows="loadingRows"
+        :rows-per-page-label="$t('global.records_per_page')"
+        :columns="columns"
+        :rows-per-page-options="[10, 20, 50]"
+    >
+        <template v-slot:header="props">
+            <q-tr :props="props">
+                <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                >
+                    <div class="u-flex--center-y">
+                        {{ col.label }}
+                    </div>
+                </q-th>
+            </q-tr>
+        </template>
+        <template v-slot:body="">
+            <q-tr>
+                <q-td
+                    v-for="col in columns"
+                    :key="col.name"
+                >
+                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                </q-td>
+            </q-tr>
+        </template>
+    </q-table>
+</template>
 </template>
 
 <style scoped lang="sass">
@@ -326,5 +366,6 @@ export default {
 @media only screen and (max-width: 764px)
     .q-table .q-toggle
         display: none
-
+.c-minimum-version-required
+    align-self: center
 </style>
diff --git a/src/config/chains/telos-evm-testnet/index.ts b/src/config/chains/telos-evm-testnet/index.ts
index c5cd97e31..a5177a7b8 100644
--- a/src/config/chains/telos-evm-testnet/index.ts
+++ b/src/config/chains/telos-evm-testnet/index.ts
@@ -173,10 +173,6 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
-                    {
-                        'label': 'components.header.accounts',
-                        'internalLink': 'accounts',
-                    },
                 ],
             },
             {
diff --git a/src/config/chains/telos-zkevm-testnet/index.ts b/src/config/chains/telos-zkevm-testnet/index.ts
index b11836b8c..813e1d0a2 100644
--- a/src/config/chains/telos-zkevm-testnet/index.ts
+++ b/src/config/chains/telos-zkevm-testnet/index.ts
@@ -191,10 +191,6 @@ const config: NetworkConfig =
                         'label': 'components.header.blocks',
                         'internalLink': 'blocks',
                     },
-                    {
-                        'label': 'components.header.accounts',
-                        'internalLink': 'accounts',
-                    },
                 ],
             },
             {
diff --git a/src/core/chains/EVMChainSettings.ts b/src/core/chains/EVMChainSettings.ts
index eb35b5db6..d35d156d9 100644
--- a/src/core/chains/EVMChainSettings.ts
+++ b/src/core/chains/EVMChainSettings.ts
@@ -28,7 +28,7 @@ import { dateIsWithinXMinutes } from 'src/core/stores/utils/date-utils';
 import { createTraceFunction } from 'src/core/mocks/FeedbackStore';
 import { getCore } from 'src/core';
 import { WEI_PRECISION, PRICE_UPDATE_INTERVAL_IN_MIN } from 'src/core/stores/utils';
-import { BehaviorSubject, filter } from 'rxjs';
+import { BehaviorSubject, filter, take } from 'rxjs';
 import { TelosEvmApi } from '@telosnetwork/telosevm-js';
 
 import ContractManager from 'src/lib/contract/ContractManager';
@@ -88,6 +88,12 @@ export default abstract class EVMChainSettings implements ChainSettings {
     // This observable is used to check if the indexer health state was already checked
     indexerChecked$ = new BehaviorSubject(false);
 
+    // This observable is used to check if the indexer is ready
+    indexerReady$ = this.indexerChecked$.pipe(
+        filter(checked => checked),
+        take(1),
+    );
+
     // This function is used to trace the execution of the code
     trace = createTraceFunction('EVMChainSettings');
 
@@ -267,6 +273,56 @@ export default abstract class EVMChainSettings implements ChainSettings {
         return this._indexerHealthState.state;
     }
 
+    hasIndexerSupportOver(version:string): boolean {
+        // version is a string like '1.2.3'
+        console.log('hasIndexerSupportOver', this.indexerHealthState.version, version);
+        if (this.indexerHealthState.version === undefined) {
+            return false;
+        } else {
+            const pass = this.compareVersions(this.indexerHealthState.version, version) >= 0;
+            if (!pass) {
+                console.error('Indexer API version not supported for this chain:', {
+                    network: this.network,
+                    version: this.indexerHealthState.version,
+                    required: version,
+                });
+            }
+            return pass;
+        }
+    }
+
+    compareVersions(v1: string, v2: string): number {
+        // We divide in parts A, B and C, and convert to number.
+        // If any part does not exist or is not a number, we use 0 by default
+        const [major1, minor1, patch1] = v1.split('.').map(num => parseInt(num, 10) || 0);
+        const [major2, minor2, patch2] = v2.split('.').map(num => parseInt(num, 10) || 0);
+
+        // Compare from left to right
+        if (major1 > major2) {
+            return 1;
+        }
+        if (major1 < major2) {
+            return -1;
+        }
+
+        if (minor1 > minor2) {
+            return 1;
+        }
+        if (minor1 < minor2) {
+            return -1;
+        }
+
+        if (patch1 > patch2) {
+            return 1;
+        }
+        if (patch1 < patch2) {
+            return -1;
+        }
+
+        // If we reach here, they are equal
+        return 0;
+    }
+
     isNative() {
         return false;
     }
diff --git a/src/core/mocks/ChainStore.ts b/src/core/mocks/ChainStore.ts
index a681d1b08..847ad9304 100644
--- a/src/core/mocks/ChainStore.ts
+++ b/src/core/mocks/ChainStore.ts
@@ -4,7 +4,7 @@
 declare const fathom: { trackEvent: (eventName: string) => void };
 
 import { RpcEndpoint, UAL } from 'universal-authenticator-library';
-import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators } from 'src/core/types';
+import { TokenClass, Theme, Themes, SocialLink, FooterLinksConfig, HeaderMenuConfig, HeaderIndicators, IndexerHealthResponse } from 'src/core/types';
 import TelosEVM from 'src/config/chains/telos-evm';
 import TelosEVMTestnet from 'src/config/chains/telos-evm-testnet';
 import { ethers } from 'ethers';
@@ -12,6 +12,7 @@ import { TelosEvmApi } from '@telosnetwork/telosevm-js';
 import { AxiosInstance } from 'axios';
 import ContractManager from 'src/lib/contract/ContractManager';
 import TelosZkEVM from 'src/config/chains/telos-zkevm-testnet';
+import { Observable } from 'rxjs';
 
 export interface TeloscanEVMChainSettings {
     getStakedSystemToken(): TokenClass;
@@ -38,6 +39,7 @@ export interface TeloscanEVMChainSettings {
     getFooterLinks: () => FooterLinksConfig;
     getHeaderIndicators: () => HeaderIndicators;
     getHeaderMenuConfig: () => HeaderMenuConfig;
+    hasIndexerSupportOver(version:string): boolean;
     // Telos Specific
     getEthAccountByNativeAccount: (account: string) => Promise<string>;
     getNativeSupport(): TelosEvmApi | null;
@@ -47,6 +49,8 @@ export interface TeloscanEVMChainSettings {
     getContractManager(): ContractManager;
     getUAL(): UAL | null;
     getMonitorUrl(): string;
+    indexerHealthState: IndexerHealthResponse;
+    indexerReady$: Observable<boolean>;
 }
 
 export const evmSettings: { [network: string]: TeloscanEVMChainSettings } = {
diff --git a/src/core/types/IndexerTypes.ts b/src/core/types/IndexerTypes.ts
index 671238cff..e8b0ea424 100644
--- a/src/core/types/IndexerTypes.ts
+++ b/src/core/types/IndexerTypes.ts
@@ -149,6 +149,7 @@ export interface IndexerHealthResponse {
     blockNumber: number;
     blockTimestamp: string;
     secondsBehind: number;
+    version: string;
 }
 
 export interface IndexerTokenHoldersResponse {
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 87dac1560..3a4b5ab2d 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -62,6 +62,10 @@ export default {
             title: 'Page not found.',
             subtitle: 'Please double-check the URL. If it looks correct, try again later.',
         },
+        indexer_outdated_title: 'The current page is not supported on { network }.',
+        indexer_outdated_desc_1: '(Need version { version } but ',
+        indexer_outdated_desc_2: '{ apiUrl }/v1/health',
+        indexer_outdated_desc_3: ' is version { current })',
         issuer: 'Issuer',
         account_not_found: 'We could not find this account',
         approvals: 'Approvals',
diff --git a/src/pages/HoldersPage.vue b/src/pages/HoldersPage.vue
index 7a8b2b05c..5c69c9f32 100644
--- a/src/pages/HoldersPage.vue
+++ b/src/pages/HoldersPage.vue
@@ -75,6 +75,8 @@ onMounted(() => {
     }
     &__main-content {
         padding: 0px;
+        display: flex;
+        flex-direction: column;
     }
 }
 

From fadf665e97629eb6313cd7155fb522f800717e2d Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Fri, 10 Jan 2025 21:20:57 -0300
Subject: [PATCH 3/8] fix the last slash character in the indexer url

---
 src/config/chains/telos-zkevm-testnet/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/config/chains/telos-zkevm-testnet/index.ts b/src/config/chains/telos-zkevm-testnet/index.ts
index 813e1d0a2..18cc77f73 100644
--- a/src/config/chains/telos-zkevm-testnet/index.ts
+++ b/src/config/chains/telos-zkevm-testnet/index.ts
@@ -72,7 +72,7 @@ const config: NetworkConfig =
         'explorer': 'https://zktest.teloscan.io',
         'ecosystem': 'https://www.telos.net/ecosystem',
         'bridge': 'https://bridge.telos.net/bridge',
-        'indexer': 'https://api.zktest.teloscan.io/',
+        'indexer': 'https://api.zktest.teloscan.io',
         'contractsBucket': 'https://verified-evm-contracts.s3.amazonaws.com',
         'monitor': 'https://api.monitor-test.telos.net',
     },

From 86e42cdacacf757e08e74deb4568622d569eb5a8 Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Sat, 11 Jan 2025 13:33:39 -0300
Subject: [PATCH 4/8] change the "Accounts" section to "Top accounts"

---
 src/i18n/de-de/index.js | 2 +-
 src/i18n/en-us/index.js | 2 +-
 src/i18n/es-es/index.js | 2 +-
 src/i18n/fr-fr/index.js | 2 +-
 src/i18n/pt-br/index.js | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/i18n/de-de/index.js b/src/i18n/de-de/index.js
index ebbfb354f..7a73e095e 100644
--- a/src/i18n/de-de/index.js
+++ b/src/i18n/de-de/index.js
@@ -473,7 +473,7 @@ export default {
             home: 'Heim',
             more: 'Mehr',
             network: 'Netzwerk',
-            accounts: 'Konten',
+            accounts: 'Top-Konten',
             accounts_title: 'Top-Konten nach {symbol}-Saldo',
             open_language_switcher: 'open language switcher',
             search_failed: 'Suche fehlgeschlagen, bitte geben Sie einen gültigen Suchbegriff ein.',
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 3a4b5ab2d..656bba7de 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -476,7 +476,7 @@ export default {
             home: 'Home',
             more: 'More',
             network: 'Network',
-            accounts: 'Accounts',
+            accounts: 'Top Accounts',
             accounts_title: 'Top Accounts by {symbol} Balance',
             open_language_switcher: 'Open language switcher',
             search_failed: 'Search failed, please enter a valid search term.',
diff --git a/src/i18n/es-es/index.js b/src/i18n/es-es/index.js
index 8fb753988..197739202 100644
--- a/src/i18n/es-es/index.js
+++ b/src/i18n/es-es/index.js
@@ -473,7 +473,7 @@ export default {
             home: 'Inicio',
             more: 'Más',
             network: 'Red',
-            accounts: 'Cuentas',
+            accounts: 'Cuentas principales',
             accounts_title: 'Principales cuentas por saldo de {symbol}',
             open_language_switcher: 'Abrir el selector de idioma',
             search_failed: 'La búsqueda falló, ingrese un término de búsqueda válido.',
diff --git a/src/i18n/fr-fr/index.js b/src/i18n/fr-fr/index.js
index a565b3ca4..1b12b36f2 100644
--- a/src/i18n/fr-fr/index.js
+++ b/src/i18n/fr-fr/index.js
@@ -473,7 +473,7 @@ export default {
             home: 'Accueil',
             more: 'Plus',
             network: 'Réseau',
-            accounts: 'Comptes',
+            accounts: 'Comptes principaux',
             accounts_title: 'Comptes principaux par solde de {symbol}',
             open_language_switcher: 'Ouvrir le sélécteur de language',
             search_failed: 'La recherche a échoué, veuillez saisir des mots clés de recherche corrects.',
diff --git a/src/i18n/pt-br/index.js b/src/i18n/pt-br/index.js
index 68dc7e5b9..526f3758f 100644
--- a/src/i18n/pt-br/index.js
+++ b/src/i18n/pt-br/index.js
@@ -473,7 +473,7 @@ export default {
             home: 'Início',
             more: 'Mais',
             network: 'Rede',
-            accounts: 'Contas',
+            accounts: 'Principais contas',
             accounts_title: 'Principais contas por saldo de {symbol}',
             open_language_switcher: 'Abrir o seletor de idioma',
             search_failed: 'A busca falhou, insira um termo de pesquisa válido.',

From bc37fe5e8d4a0a23a7b1712c2b886a5270a1048b Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 15 Jan 2025 10:28:04 -0300
Subject: [PATCH 5/8] saving WIP - new HoldersPage in progress

---
 src/components/AddressField.vue     |    2 +-
 src/components/Token/HolderList.vue | 1050 ++++++++++++++++++---------
 src/components/TransactionTable.vue |    1 +
 src/core/types/Api.ts               |    5 +
 src/core/types/EvmHolders.ts        |   25 +
 src/core/types/index.ts             |    1 +
 src/lib/contract/ContractManager.js |    2 +-
 src/lib/utils.js                    |   23 +-
 src/pages/AccountPage.vue           |    6 +-
 src/pages/HoldersPage.vue           |   34 +-
 src/types/Pagination.ts             |    2 +-
 11 files changed, 774 insertions(+), 377 deletions(-)
 create mode 100644 src/core/types/EvmHolders.ts

diff --git a/src/components/AddressField.vue b/src/components/AddressField.vue
index 41957b0dc..af97eace1 100644
--- a/src/components/AddressField.vue
+++ b/src/components/AddressField.vue
@@ -114,7 +114,7 @@ const getDisplay = async () => {
 };
 
 const loadDisplayInfo = async () => {
-    let info = await useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
+    let info = useChainStore().currentChain.settings.getContractManager().getContractDisplayInfo(props.address);
 
     if (info) {
         contractName.value = info.name ?? '';
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index 055057fab..0bb56698b 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -1,371 +1,753 @@
-<script>
-import AddressField from 'components/AddressField';
-import DateField from 'components/DateField';
-import MinimumVersionRequired from 'components/MinimumVersionRequired';
-import { formatWei } from 'src/lib/utils';
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- src/components/Token/HolderList.vue -->
+<script lang="ts" setup>
+// We import the needed libraries
+import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Pagination } from 'src/types'; // Existing Pagination type
+import AddressField from 'components/AddressField.vue';
+import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
 import { useChainStore } from 'src/core';
-import { NativeCurrencyAddress } from 'src/core/types';
+import {
+    EvmHolder,
+    IndexerHoldersResponse,
+    NativeCurrencyAddress,
+    ContractDisplayInfo,
+} from 'src/core/types';
+import { useRouter, useRoute } from 'vue-router';
 
-export default {
+defineOptions({
     name: 'HolderList',
-    components: {
-        AddressField,
-        DateField,
-        MinimumVersionRequired,
+});
+
+// Default decimals
+const DEFAULT_DECIMALS = 18;
+
+// default pagination options
+const rows_per_page_options = [10, 25, 50];
+const default_rows_per_pages = 25;
+
+// Default columns if user does not provide any
+const defaultColumns = ['rank', 'holder', 'balance', 'percentage_bar'];
+
+    type Alignment = 'left' | 'center' | 'right';
+
+    interface ContractProps {
+        address: string
+        properties?: {
+            decimals?: number
+            supply?: string
+            total_supply_ibc?: string
+            symbol?: string
+            price?: string
+        }
+    }
+
+    interface TableColumn {
+        name: string
+        label: string
+        align: Alignment
+        field: string
+        sortable?: boolean
+    }
+
+// We define the props, including a new 'columns' array
+const props = withDefaults(
+    defineProps<{
+            contract?: ContractProps
+            columns?: string[]
+        }>(),
+    {},
+);
+
+// Access i18n
+const { t: $t, locale } = useI18n();
+
+// We will keep track of the system token from chain settings
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+
+// We define a reference for system token contract
+const systemTokenContract = ref<ContractProps>({
+    address: systemToken.value.contract,
+    properties: {
+        decimals: systemToken.value.decimals || DEFAULT_DECIMALS,
+        supply: '0',
+        total_supply_ibc: '0',
+        symbol: systemToken.value.symbol,
     },
-    props: {
-        contract: {
-            type: Object,
-            required: true,
+} as ContractProps);
+
+// Our contract data
+const contract: Ref<ContractProps> = ref<ContractProps>(
+    props.contract
+        ? props.contract
+        : {
+            address: NativeCurrencyAddress,
+            properties: {
+                decimals: DEFAULT_DECIMALS,
+                supply: '0',
+                total_supply_ibc: '0',
+                symbol: '',
+                price: '',
+            },
         },
+);
+
+// Minimum version for the indexer
+const minimumVersion = '1.2.9';
+
+// Reactive references
+const weHaveIndexerSupport = ref(false);
+const holders = ref<EvmHolder[]>([]);
+const loadingRows = ref<number[]>([]);
+const loading = ref(true);
+const systemContractsList = ref('');
+const showSystemContracts = ref(false);
+
+// Pagination
+const pagination = ref<Pagination>({
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+});
+
+// Chain settings
+const chainSettings = computed(() => useChainStore().currentChain.settings);
+
+// Decide which columns to show (either user-provided or default)
+const visibleColumns = computed(() => {
+    if (!props.columns || props.columns.length === 0) {
+        return defaultColumns;
+    }
+    return props.columns;
+});
+
+// Dictionary that maps each column name to a Quasar TableColumn
+const columnsDict: Record<string, TableColumn> = {
+    rank: {
+        name: 'rank',
+        field: 'rank',
+        label: 'Rank',
+        align: 'left',
     },
-    created(){
-        for (var i = 1; i <= this.pagination.rowsPerPage; i++) {
-            this.loadingRows.push(i);
-        }
+    holder: {
+        name: 'holder',
+        field: 'holder',
+        label: $t('components.holders.holder'),
+        align: 'left',
     },
-    async mounted() {
-        console.log('-- HolderList mounted() 1 -- ', {
-            weHaveIndexerSupport: this.weHaveIndexerSupport,
-            version: useChainStore().currentChain.settings.indexerHealthState.version,
-        });
-        let list = await useChainStore().currentChain.settings.getContractManager().getSystemContractsList();
-        for(const contract in list.contracts){
-            this.systemContractsList += list.contracts[contract].address + ',';
-        }
-        this.systemContractsList.substr(this.systemContractsList.length -2, this.systemContractsList.length - 1);
-        this.weHaveIndexerSupport = useChainStore().currentChain.settings.hasIndexerSupportOver(this.minimumVersion);
-        this.settings.indexerReady$.subscribe(() => {
-            this.weHaveIndexerSupport = useChainStore().currentChain.settings.hasIndexerSupportOver(this.minimumVersion);
-            console.log('------ indexerReady$ -------', {
-                weHaveIndexerSupport: this.weHaveIndexerSupport,
-                version: useChainStore().currentChain.settings.indexerHealthState.version,
-            });
-            this.onRequest({
-                pagination: this.pagination,
-            });
-        });
-
+    address: {
+        name: 'address',
+        field: 'address',
+        label: 'Address',
+        align: 'left',
     },
-    computed: {
-        settings() {
-            return useChainStore().currentChain.settings;
-        },
-        state() {
-            return this.settings.indexerHealthState;
-        },
+    tag_name: {
+        name: 'tag_name',
+        field: 'tag_name',
+        label: 'Contract Name',
+        align: 'left',
     },
-    data() {
-        let columns = [
-            {
-                name: 'holder',
-                label: this.$t('components.holders.holder'),
-                align: 'left',
-            },
-            {
-                name: 'balance',
-                label: this.$t('components.holders.balance'),
-                align: 'left',
-                sortable: true,
-            },
-            {
-                name: 'telos_supply_share',
-                label: '% ' + this.$t('components.holders.telos_supply'),
-                align: 'left',
-            },
-            {
-                name: 'supply_share',
-                label: '% ' + this.$t('components.holders.global_supply'),
-                align: 'left',
-            },
-            {
-                name: 'updated',
-                label: this.$t('global.updated'),
-                align: 'left',
-            },
-        ];
-        if(!this.contract.properties?.total_supply_ibc){
-            columns.splice(3, 1);
+    balance: {
+        name: 'balance',
+        field: 'balance',
+        label: 'Balance',
+        align: 'left',
+    },
+    quantity: {
+        name: 'quantity',
+        field: 'quantity',
+        label: 'Quantity',
+        align: 'left',
+    },
+    percentage: {
+        name: 'percentage',
+        field: 'percentage',
+        label: 'percentage',
+        align: 'left',
+    },
+    percentage_bar: {
+        name: 'percentage_bar',
+        field: 'percentage_bar',
+        label: 'percentage',
+        align: 'left',
+    },
+    txn_count: {
+        name: 'txn_count',
+        field: 'txn_count',
+        label: 'Txn Count',
+        align: 'left',
+    },
+    value: {
+        name: 'value',
+        field: 'value',
+        label: 'Value (USD)',
+        align: 'left',
+    },
+};
+
+// This computed array transforms the visibleColumns into an array of Quasar columns
+const tableColumns = computed<TableColumn[]>(() =>
+    visibleColumns.value.map((colName) => {
+        if (columnsDict[colName]) {
+            return columnsDict[colName];
         }
+        // Fallback if the user passes a column not in the dictionary
         return {
-            weHaveIndexerSupport: false,
-            minimumVersion: '1.2.9', // "1.2.9 - adding /v1/balances endpoint"
-            // https://github.com/telosnetwork/teloscan-indexer/commit/14a712c3353566b2ba82a13a5336e4199e3476bf
-            columns: columns,
-            holders: [],
-            loadingRows: [],
-            loading: true,
-            systemContractsList: '',
-            showSystemContracts: false,
-            filterBy: this.filter,
-            pagination: {
-                sortBy: 'balance',
-                descending: true,
-                page: 1,
-                rowsPerPage: 10,
-                rowsNumber: 0,
-            },
+            name: colName,
+            field: colName,
+            label: colName,
+            align: 'left',
         };
+    }),
+);
+
+// Prepare skeleton rows (loading placeholders)
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (let i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+};
+
+// Router to handle query parameters
+const router = useRouter();
+const route = useRoute();
+
+// this function takes current pagination values and push them to the URL
+const updateUrlParams = () => {
+    const query = { ...route.query };
+    const newPage = pagination.value.page;
+    const newRows = pagination.value.rowsPerPage;
+
+    // If page is 1, remove param; otherwise set it
+    if (newPage !== 1 || newRows !== default_rows_per_pages) {
+        // only if they are different from each other
+        if (query.p !== newPage.toString()) {
+            query.p = newPage.toString();
+        }
+        if (query.ps !== newRows.toString()) {
+            query.ps = newRows.toString();
+        }
+    } else {
+        delete query.p;
+        delete query.ps;
+    }
+
+    console.log('HolderList.updateUrlParams()', { query });
+
+    router.replace({ query });
+};
+
+// this function takes the URL query and updates the pagination values
+const takeUrlParams = () => {
+    const query = route.query;
+    if (query.p) {
+        pagination.value.page = parseInt(query.p as string, 10);
+    } else {
+        pagination.value.page = 1;
+    }
+    if (query.ps) {
+        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
+    } else {
+        pagination.value.rowsPerPage = default_rows_per_pages;
+    }
+    console.log('HolderList.takeUrlParams()', { query, pagination: pagination.value });
+};
+
+const onPaginationChange = (props: { pagination: Pagination }) => {
+    console.log('HolderList.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
+    pagination.value = props.pagination;
+    updateUrlParams();
+};
+
+// Update URL query if pagination changes
+watch(
+    () => [route.query.p, route.query.ps],
+    () => {
+        console.log('HolderList.watch(route.query)', { query: route.query, pagination: pagination.value });
+        takeUrlParams();
+        onRequest({ pagination: pagination.value });
     },
-    methods: {
-        hasIndexerSupport() {
-            return this.weHaveIndexerSupport;
-        },
-        async onRequest(props) {
-            if (!this.weHaveIndexerSupport) {
-                return;
-            }
-            this.loading = true;
+    { deep: true, immediate: true },
+);
 
-            const { page, rowsPerPage, sortBy, descending } = props.pagination;
+onBeforeMount(() => {
+    updateLoadingRows();
+});
 
-            const indexerApi = useChainStore().currentChain.settings.getIndexerApi();
-            let response = await indexerApi.get(this.getPath(props));
+onMounted(async () => {
+    // If we have query params on mount, reflect them in pagination
+    if (route.query.p) {
+        pagination.value.page = parseInt(route.query.p as string, 10);
+    }
+    if (route.query.ps) {
+        pagination.value.rowsPerPage = parseInt(route.query.ps as string, 10);
+    }
 
-            this.pagination.page = page;
-            this.pagination.rowsPerPage = rowsPerPage;
-            this.pagination.sortBy = sortBy;
-            this.pagination.descending = descending;
-            if (response.data?.total_count && this.pagination.rowsNumber !== response.data?.total_count) {
-                this.pagination.rowsNumber = response.data.total_count;
-            }
-            let holders = [];
-            for (let holder of response.data.results) {
-                holders.push(holder);
-            }
-            this.holders = holders;
-            this.loading = false;
-        },
-        getPath(props) {
-            // Decide base path depending on whether contract is the native address
-            const { page, rowsPerPage, descending } = props.pagination;
-            let basePath = '';
-
-            if (this.contract.address === NativeCurrencyAddress) {
-                basePath = '/v1/balances';
-            } else {
-                basePath = `/v1/token/${this.contract.address}/holders`;
-            }
+    // Build a list of system contracts
+    const list = await chainSettings.value.getContractManager().getSystemContractsList();
+    for (const c in list.contracts) {
+        systemContractsList.value += list.contracts[c].address + ',';
+    }
+    // Remove trailing comma
+    if (systemContractsList.value.endsWith(',')) {
+        systemContractsList.value = systemContractsList.value.slice(0, -1);
+    }
 
-            let path = `${basePath}?limit=${
-                rowsPerPage === 0 ? 10 : rowsPerPage
-            }`;
-            path += '&includeAbi=true';
-            path += `&offset=${(page - 1) * rowsPerPage}`;
-            path += '&includePagination=true';
+    // Remove the value column if no price is provided
+    if (!contract.value.properties?.price) {
+        const index = tableColumns.value.findIndex(col => col.name === 'value');
+        if (index !== -1) {
+            tableColumns.value.splice(index, 1);
+        }
+    }
 
-            // Optionally exclude system contracts if showSystemContracts is false
-            if (!this.showSystemContracts) {
-                path += '&not=' + this.systemContractsList;
-            }
+    // Check indexer support
+    weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
 
-            path += `&sort=${descending ? 'desc' : 'asc'}`;
-            return path;
-        },
-        formatWei,
-        displaySupplyShare(balance, supplies, decimals, fixed){
-            let share = new BigDecimal(balance).divide(new BigDecimal(supplies)).multiply(new BigDecimal('100'));
-            if(fixed){
-                if(share.compareTo(new BigDecimal('0.01')) ===  -1){
-                    return '< 0.01%';
-                }
-                share = share.round(fixed);
-            }
-            if(share.compareTo(new BigDecimal('0.000000000000000001')) === -1){
-                return '< 0.000000000000000001%';
+    // Listen for indexer readiness
+    chainSettings.value.indexerReady$.subscribe(() => {
+        weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
+        onRequest({ pagination: pagination.value });
+    });
+
+    // Retrieve total supply from chain for system token
+    chainSettings.value.getTelosApi().get('supply/total').then((res) => {
+        if (systemTokenContract.value.properties) {
+            const supplyNum = Number(res.data).toFixed(systemToken.value.decimals);
+            // Turn it into a string with no decimal point
+            const supply = supplyNum.split('.').join('');
+            systemTokenContract.value.properties.supply = supply;
+
+            // If no contract is provided, assume it's native
+            if (!props.contract && contract.value.properties) {
+                contract.value.properties.total_supply_ibc = supply;
+                contract.value.properties.supply = supply;
             }
-            return share.getValue() + '%';
-        },
-        displayBalance(balanceString, tokenDecimals){
-            const locale = this.$i18n.global.locale.value;
-            const bn = BigNumber.from(balanceString);
-            const formatted = ethers.utils.formatUnits(bn.toString(), (tokenDecimals));
-            return parseFloat(formatted).toLocaleString(locale);
-        },
-    },
-};
+        }
+    });
+});
+
+// Our method for requesting the data
+async function onRequest(props: { pagination: Pagination }) {
+    if (!weHaveIndexerSupport.value) {
+        return;
+    }
+    console.log('HolderList.onRequest()', { props_pagination: props.pagination, pagination: pagination.value });
+
+    const { page, rowsPerPage, sortBy, descending } = props.pagination;
+    const indexerApi = chainSettings.value.getIndexerApi();
+
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+
+    updateLoadingRows();
+    loading.value = true;
+
+    const response = await indexerApi.get(getPath()) as { data?: IndexerHoldersResponse };
+
+    if (response.data?.total_count && pagination.value.rowsNumber !== response.data?.total_count) {
+        pagination.value.rowsNumber = response.data.total_count;
+    }
+
+    const resultHolders: EvmHolder[] = [];
+    for (const entry of response.data?.results || []) {
+        const holder: EvmHolder = {
+            rank: 0,
+            txn_count: 0,
+            ...(entry as Partial<EvmHolder>),
+        } as EvmHolder;
+        resultHolders.push(holder);
+    }
+    holders.value = resultHolders;
+    loading.value = false;
+    console.log('HolderList.onRequest()', { loading: loading.value, holders: holders.value });
+}
+
+// Build the URL path for the request
+function getPath(): string {
+    const { page, rowsPerPage, descending } = pagination.value;
+    let basePath = '';
+
+    if (contract.value.address === NativeCurrencyAddress) {
+        basePath = '/v1/balances';
+    } else {
+        basePath = `/v1/token/${contract.value.address}/holders`;
+    }
+
+    let path = `${basePath}?limit=${rowsPerPage === 0 ? 10 : rowsPerPage}`;
+    path += '&includeAbi=true';
+    path += `&offset=${(page - 1) * rowsPerPage}`;
+    path += '&includePagination=true';
+
+    if (!showSystemContracts.value) {
+        path += `&not=${systemContractsList.value}`;
+    }
+
+    path += `&sort=${descending ? 'desc' : 'asc'}`;
+    console.log('HolderList.getPath()', { page, rowsPerPage, path });
+    return path;
+}
+
+// Utility to display the supply share
+function displaySupplyShare(
+    _balance: string,
+    _supplies: string,
+    decimals: number | undefined,
+    fixed: number | boolean,
+): string {
+    const balance = _balance.split('.').join('');
+    const supplies = _supplies.split('.').join('');
+    let result = '';
+
+    // Check if balance is zero
+    if (new BigDecimal(balance).compareTo(new BigDecimal('0')) === 0) {
+        return '0%';
+    }
+
+    const share = new BigDecimal(balance)
+        .divide(new BigDecimal(+supplies > 0 ? supplies : 1), decimals ? decimals : 0)
+        .multiply(new BigDecimal('100'));
+    const shareFixed = share.round(2);
+
+    if (share.compareTo(new BigDecimal('0.00001')) === -1) {
+        result = '< 0.00001%';
+    } else if (share.compareTo(new BigDecimal('0.0001')) === -1) {
+        result = '< 0.0001%';
+    } else if (share.compareTo(new BigDecimal('0.001')) === -1) {
+        result = '< 0.001%';
+    } else if (share.compareTo(new BigDecimal('0.01')) === -1) {
+        result = '< 0.01%';
+    } else if (+supplies > 0) {
+        if (fixed) {
+            result = shareFixed.getValue() + '%';
+        } else {
+            result = share.getValue() + '%';
+        }
+    } else {
+        result = '--%';
+    }
+
+    return result;
+}
+
+// Utility to display the quantity
+function displayQuantity(balanceString: string, tokenDecimals?: number): string {
+    const bn = BigNumber.from(balanceString);
+    const formatted = ethers.utils.formatUnits(bn.toString(), tokenDecimals || 0);
+    const result = parseFloat(formatted).toLocaleString(locale.value);
+    return result;
+}
+
+// Function that returns the symbol for the current token or fallback
+function getSymbol(): string {
+    return contract.value.properties?.symbol
+            || systemToken.value.symbol
+            || '???';
+}
+
+// Function to get contract name if available
+function getContractName(holderAddress: string): string {
+    const info = chainSettings.value
+        .getContractManager()
+        .getContractDisplayInfo(holderAddress) as never as ContractDisplayInfo | null;
+    return info?.name || '';
+}
+
+// Function to truncate an address
+function truncateAddress(address: string, chars = 6): string {
+    if (address.length <= chars * 2) {
+        return address;
+    }
+    const start = address.slice(0, chars);
+    const end = address.slice(-chars);
+    return start + '...' + end;
+}
+
+// Function to compute the fraction for percentage bar
+function computeBarValue(balanceString: string): number {
+    // We can attempt to parse a fraction from displaySupplyShare
+    // For simplicity, just parse it as a float if possible
+    const shareStr = displaySupplyShare(
+        balanceString,
+        contract.value.properties?.supply || '0',
+        contract.value.properties?.decimals || DEFAULT_DECIMALS,
+        false,
+    );
+        // If it starts with '<', assume a very small fraction
+    if (shareStr.startsWith('<')) {
+        return 0.0001;
+    }
+    if (shareStr === '--%') {
+        return 0;
+    }
+    // Remove '%' sign
+    const numeric = parseFloat(shareStr.replace('%', ''));
+    return numeric / 100;
+}
+
+function calculateDollarValue(row: EvmHolder): string {
+    try {
+        const token_price = contract.value.properties?.price || '0.0';
+        const token_decimals = contract.value.properties?.decimals || 0;
+        const price_decimals = token_price.split('.')[1]?.length || 0;
+        const balance = BigNumber.from(row.balance);
+        const price = BigNumber.from(token_price.split('.').join(''));
+        const value = balance.mul(price).div(BigNumber.from(10).pow(price_decimals));
+        const partial_result = ethers.utils.formatUnits(value.toString(), token_decimals);
+        const result = '$' + parseFloat(parseFloat(partial_result).toFixed(0))
+            .toLocaleString(locale.value);
+        return result;
+    } catch (e) {
+        console.error('HolderList.calculateDollarValue()', e);
+        return '--';
+    }
+}
 </script>
 
 <template>
-<template v-if="!weHaveIndexerSupport">
+<template v-if="!weHaveIndexerSupport && !loading">
     <MinimumVersionRequired
         class="c-minimum-version-required"
         required="1.2.9"
     />
 </template>
 <template v-else>
-    <q-table
-        v-if="!loading"
-        v-model:pagination="pagination"
-        :rows="holders"
-        :rows-per-page-label="$t('global.records_per_page')"
-        :binary-state-sort="true"
-        :row-key="row => row.address"
-        :columns="columns"
-        :rows-per-page-options="[10, 20, 50]"
-        @request="onRequest"
-    >
-        <template v-slot:header="props">
-            <q-tr :props="props">
-                <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                >
-                    <div class="u-flex--center-y">
-                        {{ col.label }}
-                    </div>
-                </q-th>
-            </q-tr>
-        </template>
-        <template v-slot:body="props">
-            <q-tr :props="props">
-                <q-td key="holder" :props="props">
-                    <AddressField
-                        :key="props.row.address + 'c'"
-                        :address="props.row.address"
-                        :truncate="18"
-                        :useHighlight="false"
-                    />
-                </q-td>
-                <q-td key="balance" :props="props">
-                    <span v-if="contract?.properties?.decimals">
-                        {{ displayBalance(props.row.balance, contract.properties?.decimals) }}
-                    </span>
-                    <span v-else>
-                        {{ props.row.balance }}
-                    </span>
-                </q-td>
-                <q-td key="telos_supply_share" :props="props">
-                    <span v-if="contract?.properties?.supply">
-                        <span>
-                            {{ displaySupplyShare(
-                                formatWei(
-                                    props.row.balance,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                formatWei(
-                                    contract.properties.supply,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                contract.properties?.decimals,
-                                2,
-                            )}}
-                        </span>
-                        <q-tooltip>
-                            {{ displaySupplyShare(
-                                formatWei(
-                                    props.row.balance,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                formatWei(
-                                    contract.properties.supply,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                contract.properties?.decimals,
-                                false,
-                            )}}
-                        </q-tooltip>
-                    </span>
-                </q-td>
-                <q-td v-if="contract?.properties?.total_supply_ibc" key="supply_share" :props="props">
-                    <span>
-                        <span>
-                            {{ displaySupplyShare(
-                                formatWei(
-                                    props.row.balance,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                contract.properties?.total_supply_ibc, // Already formatted
-                                contract.properties?.decimals,
-                                2,
-                            )}}
-                        </span>
-                        <q-tooltip>
+    <div class="c-holder-list">
+        <!-- Table with data -->
+        <q-table
+            v-if="!loading"
+            v-model:pagination="pagination"
+            class="c-holder-list__table"
+            :rows="holders"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :binary-state-sort="true"
+            :row-key="row => row.address"
+            :rows-per-page-options="rows_per_page_options"
+            @request="onPaginationChange"
+        >
+            <!-- Table header -->
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+
+            <!-- Table body -->
+            <template v-slot:body="props">
+                <q-tr :props="props">
+                    <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <!-- rank -->
+                        <div v-if="col.name === 'rank'" class="c-holder-list__cell-content">
+                            {{ props.row.rank }}
+                        </div>
+
+                        <!-- holder -->
+                        <div v-else-if="col.name === 'holder'" class="c-holder-list__cell-content">
+                            <AddressField
+                                :key="props.row.address + 'c'"
+                                :address="props.row.address"
+                                :truncate="DEFAULT_DECIMALS"
+                                :useHighlight="false"
+                            />
+                        </div>
+
+                        <!-- address -->
+                        <div v-else-if="col.name === 'address'" class="c-holder-list__cell-content">
+                            <router-link
+                                :to="{
+                                    name: 'address',
+                                    params: { address: props.row.address }
+                                }"
+                            >
+                                {{ truncateAddress(props.row.address) }}
+                            </router-link>
+                        </div>
+
+                        <!-- tag_name -->
+                        <div v-else-if="col.name === 'tag_name'" class="c-holder-list__cell-content">
+                            {{ getContractName(props.row.address) }}
+                        </div>
+
+                        <!-- balance (with symbol) -->
+                        <div v-else-if="col.name === 'balance'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }} {{ getSymbol() }}
+                        </div>
+
+                        <!-- quantity (just the number) -->
+                        <div v-else-if="col.name === 'quantity'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }}
+                        </div>
+
+                        <!-- percentage (old telos_supply_share) -->
+                        <div v-else-if="col.name === 'percentage'" class="c-holder-list__cell-content">
                             {{ displaySupplyShare(
-                                formatWei(
+                                props.row.balance,
+                                contract.properties?.supply || '0',
+                                contract.properties?.decimals || DEFAULT_DECIMALS,
+                                true
+                            ) }}
+                        </div>
+
+                        <!-- percentage_bar -->
+                        <div v-else-if="col.name === 'percentage_bar'" class="c-holder-list__cell-content">
+                            <div class="c-holder-list__cell-content-num">
+                                {{ displaySupplyShare(
                                     props.row.balance,
-                                    contract.properties?.decimals,
-                                    contract.properties?.decimals
-                                ),
-                                contract.properties?.total_supply_ibc, // Already formatted
-                                contract.properties?.decimals,
-                                false,
-                            )}}
-                        </q-tooltip>
-                    </span>
-                </q-td>
-                <q-td key="updated" :props="props">
-                    <DateField :epoch="props.row.updated / 1000" />
-                </q-td>
-            </q-tr>
-        </template>
-        <template v-if="holders.length > 0" v-slot:bottom-row>
-            <q-toggle
-                v-model="showSystemContracts"
-                :label="$t('components.holders.show_system_contracts')"
-                color="primary"
-                checked-icon="visibility"
-                unchecked-icon="visibility_off"
-                @update:model-value="onRequest({pagination: pagination})"
-            />
-        </template>
-    </q-table>
-    <q-table
-        v-else
-        v-model:pagination="pagination"
-        :rows="loadingRows"
-        :rows-per-page-label="$t('global.records_per_page')"
-        :columns="columns"
-        :rows-per-page-options="[10, 20, 50]"
-    >
-        <template v-slot:header="props">
-            <q-tr :props="props">
-                <q-th
-                    v-for="col in props.cols"
-                    :key="col.name"
-                    :props="props"
-                >
-                    <div class="u-flex--center-y">
-                        {{ col.label }}
-                    </div>
-                </q-th>
-            </q-tr>
-        </template>
-        <template v-slot:body="">
-            <q-tr>
-                <q-td
-                    v-for="col in columns"
-                    :key="col.name"
-                >
-                    <q-skeleton type="text" class="c-trx-overview__skeleton" />
-                </q-td>
-            </q-tr>
-        </template>
-    </q-table>
+                                    contract.properties?.supply || '0',
+                                    contract.properties?.decimals || DEFAULT_DECIMALS,
+                                    true
+                                ) }}
+                            </div>
+                            <q-linear-progress
+                                class="c-holder-list__cell-content-bar"
+                                :value="computeBarValue(props.row.balance)"
+                                color="primary"
+                                track-color="grey-2"
+                            />
+                        </div>
+
+                        <!-- txn_count -->
+                        <div v-else-if="col.name === 'txn_count'">
+                            {{ props.row.txn_count }}
+                        </div>
+
+                        <!-- value -->
+                        <div v-else-if="col.name === 'value'">
+                            {{ calculateDollarValue(props.row) }}
+                        </div>
+
+                        <!-- fallback if user passes something not handled -->
+                        <div v-else>
+                            {{ props.row[col.field] }}
+                        </div>
+                    </q-td>
+                </q-tr>
+            </template>
+
+            <!-- Bottom row toggle for system contracts -->
+            <template v-if="holders.length > 0" v-slot:bottom-row>
+                <q-toggle
+                    v-model="showSystemContracts"
+                    :label="$t('components.holders.show_system_contracts')"
+                    color="primary"
+                    checked-icon="visibility"
+                    unchecked-icon="visibility_off"
+                    @update:model-value="onPaginationChange({ pagination: pagination })"
+                />
+            </template>
+        </q-table>
+
+        <!-- Table skeleton when loading -->
+        <q-table
+            v-else
+            v-model:pagination="pagination"
+            :rows="loadingRows"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :rows-per-page-options="rows_per_page_options"
+        >
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+            <template v-slot:body="">
+                <q-tr>
+                    <q-td
+                        v-for="col in tableColumns"
+                        :key="col.name"
+                        class="c-holder-list__cell"
+                    >
+                        <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                    </q-td>
+                </q-tr>
+            </template>
+        </q-table>
+    </div>
 </template>
 </template>
 
-<style scoped lang="sass">
-.q-table .q-toggle
-    font-size: 12px
-    position: absolute
-    bottom: 4px
-.sortable
-    height: 60px
-    display: flex
-    align-items: center
-
-@media only screen and (max-width: 764px)
-    .q-table .q-toggle
-        display: none
-.c-minimum-version-required
-    align-self: center
+<style lang="scss" scoped>
+    .c-holder-list {
+        &__cell {
+            padding: 7px 9px !important;
+            &-content {
+                display: flex;
+                align-items: flex-start;
+                flex-direction: column;
+                &-num {
+                    font-size: 14px;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+
+    .q-table .q-toggle {
+        font-size: 12px;
+        position: absolute;
+        bottom: 4px;
+    }
+
+    .sortable {
+        height: 60px;
+        display: flex;
+        align-items: center;
+    }
+
+    @media only screen and (max-width: 764px) {
+        .q-table .q-toggle {
+            display: none;
+        }
+    }
+
+    .c-minimum-version-required {
+        align-self: center;
+    }
 </style>
diff --git a/src/components/TransactionTable.vue b/src/components/TransactionTable.vue
index 79e55f685..383d6e6dd 100644
--- a/src/components/TransactionTable.vue
+++ b/src/components/TransactionTable.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
+// src/components/TransactionTable.vue
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
 import { onBeforeMount, ref, watch } from 'vue';
diff --git a/src/core/types/Api.ts b/src/core/types/Api.ts
index ff81d4458..f6ea417e8 100644
--- a/src/core/types/Api.ts
+++ b/src/core/types/Api.ts
@@ -29,6 +29,11 @@ import {
 
 export const NativeCurrencyAddress = '___NATIVE_CURRENCY___';
 
+export interface ContractDisplayInfo {
+  name: string;
+  symbol?: string;
+}
+
 export type AccountCreatorInfo = {
   creator: string;
   timestamp: string;
diff --git a/src/core/types/EvmHolders.ts b/src/core/types/EvmHolders.ts
new file mode 100644
index 000000000..5a94b9ab2
--- /dev/null
+++ b/src/core/types/EvmHolders.ts
@@ -0,0 +1,25 @@
+import { IndexerContractData } from 'src/core/types/EvmTransaction';
+
+export interface EvmHolder {
+    rank: number;
+    address: string;
+    balance: string;
+    updated: number;
+    trxCount: number;
+}
+
+export interface IndexerHoldersResponse {
+    abi: {
+        [code: string]: string
+    };
+    code: number;
+    contracts: {
+        [contractHash: string]: IndexerContractData
+    };
+    message: string;
+    more: boolean;
+    results: EvmHolder[]
+    success: boolean;
+    total_count: number;
+}
+
diff --git a/src/core/types/index.ts b/src/core/types/index.ts
index f1e550cef..28eb70e38 100644
--- a/src/core/types/index.ts
+++ b/src/core/types/index.ts
@@ -6,6 +6,7 @@ export * from 'src/core/types/ChainInfo';
 export * from 'src/core/types/ChainSettings';
 export * from 'src/core/types/EvmBlockData';
 export * from 'src/core/types/EvmContractData';
+export * from 'src/core/types/EvmHolders';
 export * from 'src/core/types/EvmLog';
 export * from 'src/core/types/EvmRexDeposit';
 export * from 'src/core/types/EvmTransaction';
diff --git a/src/lib/contract/ContractManager.js b/src/lib/contract/ContractManager.js
index 4550bd2bb..017db2fbf 100644
--- a/src/lib/contract/ContractManager.js
+++ b/src/lib/contract/ContractManager.js
@@ -330,7 +330,7 @@ export default class ContractManager {
         }
         return null;
     }
-    async getContractDisplayInfo(address) {
+    getContractDisplayInfo(address) {
         const addressLower = typeof address === 'string' ? address.toLowerCase() : '';
         if (this.nullContractsManager.existsContract(addressLower)) {
             return this.nullContractsManager.getContractInfo(addressLower);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 73be988e7..3ef6f5b1d 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -32,15 +32,22 @@ export const LOGIN_DATA_KEY = 'loginData';
 export const DEFAULT_CHAIN_ID = '40'; // Telos Mainnet
 
 export function formatWei(bn, tokenDecimals, displayDecimals) {
-    const amount = BigNumber.from(bn);
-    const formatted = ethers.utils.formatUnits(amount.toString(), (tokenDecimals || WEI_PRECISION));
-    let str = formatted.toString();
-    str = str.padEnd(str.length + displayDecimals, '0');
-    if(displayDecimals > 0 && str.includes('.')) {
-        const parts = str.split('.');
-        return parts[0] + '.' + parts[1].slice(0, displayDecimals);
+    try {
+        const amount = BigNumber.from(bn);
+        const formatted = ethers.utils.formatUnits(amount.toString(), (tokenDecimals || WEI_PRECISION));
+        let str = formatted.toString();
+        str = str.padEnd(str.length + displayDecimals, '0');
+        if(displayDecimals > 0 && str.includes('.')) {
+            const parts = str.split('.');
+            return parts[0] + '.' + parts[1].slice(0, displayDecimals);
+        }
+        console.log('formatWei()', { str, bn, tokenDecimals, displayDecimals });
+        return str;
+    } catch (e) {
+        console.log('formatWei()', { bn, tokenDecimals, displayDecimals, e });
+        console.error('formatWei() error', e);
+        return '0';
     }
-    return str;
 }
 
 export function isValidAddressFormat(ethAddressString) {
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index 76eb51cde..ba2e0704b 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -321,7 +321,11 @@ async function loadAccount() {
                 <NFTList :address="contract.address" filter="contract" />
             </q-tab-panel>
             <q-tab-panel v-if="isToken" name="holders">
-                <HolderList v-if="contract" :contract="contract" />
+                <HolderList
+                    v-if="contract"
+                    :contract="contract"
+                    :columns="['rank','holder','quantity','percentage_bar','value']"
+                />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
                 <InternalTransactionFlatTable
diff --git a/src/pages/HoldersPage.vue b/src/pages/HoldersPage.vue
index 5c69c9f32..732f644fb 100644
--- a/src/pages/HoldersPage.vue
+++ b/src/pages/HoldersPage.vue
@@ -1,44 +1,16 @@
 <script setup lang="ts">
+// src/pages/HoldersPage.vue
 
-import { computed, onMounted, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useChainStore } from 'src/core';
 import HolderList from 'components/Token/HolderList.vue';
-import { NativeCurrencyAddress } from 'src/core/types';
 
 
-interface Properties {
-  name: string,
-  supply: string,
-  symbol: string,
-  holders: string,
-  decimals: string,
-  holders_updated: string,
-}
 
 const { t: $t } = useI18n();
 const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
 const symbol = computed(() => systemToken.value.symbol);
-const contract = ref<{address:string, properties:Properties}>(({
-    address: NativeCurrencyAddress,
-    properties: {
-        name: '',
-        supply: '1000000000000000000000000000000',
-        symbol: symbol.value,
-        holders: '0',
-        decimals: '18',
-        holders_updated: '0',
-    },
-}));
-
-onMounted(() => {
-    useChainStore().currentChain.settings.getTelosApi().get('supply/total').then((res) => {
-        contract.value.properties.supply = Number(res.data).toFixed(systemToken.value.decimals).split('.').join('');
-    });
-    contract.value.properties.name = systemToken.value.name;
-    contract.value.properties.symbol = systemToken.value.symbol;
-    contract.value.properties.decimals = systemToken.value.decimals.toString();
-});
 
 </script>
 
@@ -51,7 +23,7 @@ onMounted(() => {
     <div class="c-holders__main-container">
         <div class="c-holders__main-content">
             <HolderList
-                :contract="contract"
+                :columns="['rank','address','tag_name','balance','percentage','txn_count']"
             />
         </div>
     </div>
diff --git a/src/types/Pagination.ts b/src/types/Pagination.ts
index 0afc4a894..6b150e009 100644
--- a/src/types/Pagination.ts
+++ b/src/types/Pagination.ts
@@ -3,7 +3,7 @@ export type Pagination = {
     descending: boolean;
     page: number;
     rowsPerPage: number;
-    rowsNumber: number;
+    rowsNumber?: number;
 }
 
 

From c75465a4640bad6f798fa3ac36be1b046ab925cd Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Wed, 22 Jan 2025 01:25:12 -0300
Subject: [PATCH 6/8] saving WIP - pagination

---
 src/components/Token/HolderList.vue         | 191 ++---
 src/components/Token/HolderListOriginal.vue | 753 ++++++++++++++++++++
 src/components/Token/TablePagination.vue    | 263 +++++++
 src/lib/pagination.ts                       | 120 ++++
 4 files changed, 1211 insertions(+), 116 deletions(-)
 create mode 100644 src/components/Token/HolderListOriginal.vue
 create mode 100644 src/components/Token/TablePagination.vue
 create mode 100644 src/lib/pagination.ts

diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index 0bb56698b..a671ea958 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -2,11 +2,12 @@
 <!-- src/components/Token/HolderList.vue -->
 <script lang="ts" setup>
 // We import the needed libraries
-import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
+import { ref, toRaw, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Pagination } from 'src/types'; // Existing Pagination type
 import AddressField from 'components/AddressField.vue';
 import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
+// import TablePagination from 'src/components/Token/TablePagination.vue';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
 import { useChainStore } from 'src/core';
@@ -16,7 +17,18 @@ import {
     NativeCurrencyAddress,
     ContractDisplayInfo,
 } from 'src/core/types';
+import {
+    pagination,            // Reactive pagination object. Represents current pagination state
+    onPaginationChange,
+    default_rows_per_page_options,
+    setRouterInstances,
+} from 'src/lib/pagination';
 import { useRouter, useRoute } from 'vue-router';
+// Router to handle query parameters
+const router = useRouter();
+const route = useRoute();
+
+setRouterInstances(router, route);
 
 defineOptions({
     name: 'HolderList',
@@ -25,33 +37,29 @@ defineOptions({
 // Default decimals
 const DEFAULT_DECIMALS = 18;
 
-// default pagination options
-const rows_per_page_options = [10, 25, 50];
-const default_rows_per_pages = 25;
-
 // Default columns if user does not provide any
 const defaultColumns = ['rank', 'holder', 'balance', 'percentage_bar'];
 
-    type Alignment = 'left' | 'center' | 'right';
+type Alignment = 'left' | 'center' | 'right';
 
-    interface ContractProps {
-        address: string
-        properties?: {
-            decimals?: number
-            supply?: string
-            total_supply_ibc?: string
-            symbol?: string
-            price?: string
-        }
+interface ContractProps {
+    address: string
+    properties?: {
+        decimals?: number
+        supply?: string
+        total_supply_ibc?: string
+        symbol?: string
+        price?: string
     }
+}
 
-    interface TableColumn {
-        name: string
-        label: string
-        align: Alignment
-        field: string
-        sortable?: boolean
-    }
+interface TableColumn {
+    name: string
+    label: string
+    align: Alignment
+    field: string
+    sortable?: boolean
+}
 
 // We define the props, including a new 'columns' array
 const props = withDefaults(
@@ -106,14 +114,6 @@ const loading = ref(true);
 const systemContractsList = ref('');
 const showSystemContracts = ref(false);
 
-// Pagination
-const pagination = ref<Pagination>({
-    sortBy: 'balance',
-    descending: true,
-    page: 1,
-    rowsPerPage: 25,
-    rowsNumber: 0,
-});
 
 // Chain settings
 const chainSettings = computed(() => useChainStore().currentChain.settings);
@@ -214,66 +214,16 @@ const updateLoadingRows = () => {
     }
 };
 
-// Router to handle query parameters
-const router = useRouter();
-const route = useRoute();
-
-// this function takes current pagination values and push them to the URL
-const updateUrlParams = () => {
-    const query = { ...route.query };
-    const newPage = pagination.value.page;
-    const newRows = pagination.value.rowsPerPage;
-
-    // If page is 1, remove param; otherwise set it
-    if (newPage !== 1 || newRows !== default_rows_per_pages) {
-        // only if they are different from each other
-        if (query.p !== newPage.toString()) {
-            query.p = newPage.toString();
-        }
-        if (query.ps !== newRows.toString()) {
-            query.ps = newRows.toString();
-        }
-    } else {
-        delete query.p;
-        delete query.ps;
-    }
-
-    console.log('HolderList.updateUrlParams()', { query });
-
-    router.replace({ query });
-};
 
-// this function takes the URL query and updates the pagination values
-const takeUrlParams = () => {
-    const query = route.query;
-    if (query.p) {
-        pagination.value.page = parseInt(query.p as string, 10);
-    } else {
-        pagination.value.page = 1;
-    }
-    if (query.ps) {
-        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
-    } else {
-        pagination.value.rowsPerPage = default_rows_per_pages;
-    }
-    console.log('HolderList.takeUrlParams()', { query, pagination: pagination.value });
-};
 
-const onPaginationChange = (props: { pagination: Pagination }) => {
-    console.log('HolderList.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
-    pagination.value = props.pagination;
-    updateUrlParams();
-};
 
 // Update URL query if pagination changes
 watch(
-    () => [route.query.p, route.query.ps],
+    () => [pagination.value?.page, pagination.value?.rowsPerPage],
     () => {
-        console.log('HolderList.watch(route.query)', { query: route.query, pagination: pagination.value });
-        takeUrlParams();
-        onRequest({ pagination: pagination.value });
+        console.log('HoldersList.watch() page:', pagination.value?.page, 'rowsPerPage:', pagination.value?.rowsPerPage);
+        onRequest();
     },
-    { deep: true, immediate: true },
 );
 
 onBeforeMount(() => {
@@ -281,14 +231,6 @@ onBeforeMount(() => {
 });
 
 onMounted(async () => {
-    // If we have query params on mount, reflect them in pagination
-    if (route.query.p) {
-        pagination.value.page = parseInt(route.query.p as string, 10);
-    }
-    if (route.query.ps) {
-        pagination.value.rowsPerPage = parseInt(route.query.ps as string, 10);
-    }
-
     // Build a list of system contracts
     const list = await chainSettings.value.getContractManager().getSystemContractsList();
     for (const c in list.contracts) {
@@ -313,7 +255,8 @@ onMounted(async () => {
     // Listen for indexer readiness
     chainSettings.value.indexerReady$.subscribe(() => {
         weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
-        onRequest({ pagination: pagination.value });
+        console.log('HoldersList.onMounted() --> chainSettings.value.indexerReady$', { pagination: pagination.value });
+        onRequest();
     });
 
     // Retrieve total supply from chain for system token
@@ -334,29 +277,41 @@ onMounted(async () => {
 });
 
 // Our method for requesting the data
-async function onRequest(props: { pagination: Pagination }) {
+let counter = 0;
+
+// bouce onRequest
+let timer = setTimeout(() => { /**/ }, 0);
+function onRequest() {
+    console.log('HolderList.onRequest() BOUNCING');
+    clearTimeout(timer);
+    timer = setTimeout(doRequest, 500);
+}
+async function doRequest() {
     if (!weHaveIndexerSupport.value) {
         return;
     }
-    console.log('HolderList.onRequest()', { props_pagination: props.pagination, pagination: pagination.value });
+    counter++;
+    if (counter > 6) {
+        console.error('HolderList.onRequest() - too many requests');
+        return;
+    }
+    console.log('HolderList.onRequest()', counter, { pagination: pagination.value });
 
-    const { page, rowsPerPage, sortBy, descending } = props.pagination;
+    // const { page, rowsPerPage, sortBy, descending } = props.pagination;
     const indexerApi = chainSettings.value.getIndexerApi();
 
-    pagination.value.page = page;
-    pagination.value.rowsPerPage = rowsPerPage;
-    pagination.value.sortBy = sortBy;
-    pagination.value.descending = descending;
+    // pagination.value.page = page;
+    // pagination.value.rowsPerPage = rowsPerPage;
+    // pagination.value.sortBy = sortBy;
+    // pagination.value.descending = descending;
 
     updateLoadingRows();
     loading.value = true;
-
     const response = await indexerApi.get(getPath()) as { data?: IndexerHoldersResponse };
 
     if (response.data?.total_count && pagination.value.rowsNumber !== response.data?.total_count) {
         pagination.value.rowsNumber = response.data.total_count;
     }
-
     const resultHolders: EvmHolder[] = [];
     for (const entry of response.data?.results || []) {
         const holder: EvmHolder = {
@@ -392,7 +347,7 @@ function getPath(): string {
     }
 
     path += `&sort=${descending ? 'desc' : 'asc'}`;
-    console.log('HolderList.getPath()', { page, rowsPerPage, path });
+    // console.log('HolderList.getPath()', { page, rowsPerPage, path });
     return path;
 }
 
@@ -522,6 +477,7 @@ function calculateDollarValue(row: EvmHolder): string {
 <template v-else>
     <div class="c-holder-list">
         <!-- Table with data -->
+        <!-- @request="onPaginationChange" -->
         <q-table
             v-if="!loading"
             v-model:pagination="pagination"
@@ -530,12 +486,18 @@ function calculateDollarValue(row: EvmHolder): string {
             :columns="tableColumns"
             :rows-per-page-label="$t('global.records_per_page')"
             :binary-state-sort="true"
+            :hide-bottom='false'
             :row-key="row => row.address"
-            :rows-per-page-options="rows_per_page_options"
-            @request="onPaginationChange"
+            :rows-per-page-options="default_rows_per_page_options"
         >
             <!-- Table header -->
             <template v-slot:header="props">
+                <!-- Table pagination buttons in header -->
+                <!--q-tr>
+                    <q-td :colspan="tableColumns.length">
+                        <TablePagination/>
+                    </q-td>
+                </q-tr-->
                 <q-tr :props="props">
                     <q-th
                         v-for="col in props.cols"
@@ -654,16 +616,13 @@ function calculateDollarValue(row: EvmHolder): string {
                 </q-tr>
             </template>
 
-            <!-- Bottom row toggle for system contracts -->
-            <template v-if="holders.length > 0" v-slot:bottom-row>
-                <q-toggle
-                    v-model="showSystemContracts"
-                    :label="$t('components.holders.show_system_contracts')"
-                    color="primary"
-                    checked-icon="visibility"
-                    unchecked-icon="visibility_off"
-                    @update:model-value="onPaginationChange({ pagination: pagination })"
-                />
+            <!-- Bottom row with table pagination buttons -->
+            <template v-slot:bottom-row>
+                <!--q-tr>
+                    <q-td :colspan="tableColumns.length">
+                        <TablePagination/>
+                    </q-td>
+                </q-tr-->
             </template>
         </q-table>
 
@@ -674,7 +633,7 @@ function calculateDollarValue(row: EvmHolder): string {
             :rows="loadingRows"
             :columns="tableColumns"
             :rows-per-page-label="$t('global.records_per_page')"
-            :rows-per-page-options="rows_per_page_options"
+            :rows-per-page-options="[10, 25, 50, 100]"
         >
             <template v-slot:header="props">
                 <q-tr :props="props">
@@ -713,7 +672,7 @@ function calculateDollarValue(row: EvmHolder): string {
 </template>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
     .c-holder-list {
         &__cell {
             padding: 7px 9px !important;
diff --git a/src/components/Token/HolderListOriginal.vue b/src/components/Token/HolderListOriginal.vue
new file mode 100644
index 000000000..0bb56698b
--- /dev/null
+++ b/src/components/Token/HolderListOriginal.vue
@@ -0,0 +1,753 @@
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- src/components/Token/HolderList.vue -->
+<script lang="ts" setup>
+// We import the needed libraries
+import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Pagination } from 'src/types'; // Existing Pagination type
+import AddressField from 'components/AddressField.vue';
+import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
+import BigDecimal from 'js-big-decimal';
+import { BigNumber, ethers } from 'ethers';
+import { useChainStore } from 'src/core';
+import {
+    EvmHolder,
+    IndexerHoldersResponse,
+    NativeCurrencyAddress,
+    ContractDisplayInfo,
+} from 'src/core/types';
+import { useRouter, useRoute } from 'vue-router';
+
+defineOptions({
+    name: 'HolderList',
+});
+
+// Default decimals
+const DEFAULT_DECIMALS = 18;
+
+// default pagination options
+const rows_per_page_options = [10, 25, 50];
+const default_rows_per_pages = 25;
+
+// Default columns if user does not provide any
+const defaultColumns = ['rank', 'holder', 'balance', 'percentage_bar'];
+
+    type Alignment = 'left' | 'center' | 'right';
+
+    interface ContractProps {
+        address: string
+        properties?: {
+            decimals?: number
+            supply?: string
+            total_supply_ibc?: string
+            symbol?: string
+            price?: string
+        }
+    }
+
+    interface TableColumn {
+        name: string
+        label: string
+        align: Alignment
+        field: string
+        sortable?: boolean
+    }
+
+// We define the props, including a new 'columns' array
+const props = withDefaults(
+    defineProps<{
+            contract?: ContractProps
+            columns?: string[]
+        }>(),
+    {},
+);
+
+// Access i18n
+const { t: $t, locale } = useI18n();
+
+// We will keep track of the system token from chain settings
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+
+// We define a reference for system token contract
+const systemTokenContract = ref<ContractProps>({
+    address: systemToken.value.contract,
+    properties: {
+        decimals: systemToken.value.decimals || DEFAULT_DECIMALS,
+        supply: '0',
+        total_supply_ibc: '0',
+        symbol: systemToken.value.symbol,
+    },
+} as ContractProps);
+
+// Our contract data
+const contract: Ref<ContractProps> = ref<ContractProps>(
+    props.contract
+        ? props.contract
+        : {
+            address: NativeCurrencyAddress,
+            properties: {
+                decimals: DEFAULT_DECIMALS,
+                supply: '0',
+                total_supply_ibc: '0',
+                symbol: '',
+                price: '',
+            },
+        },
+);
+
+// Minimum version for the indexer
+const minimumVersion = '1.2.9';
+
+// Reactive references
+const weHaveIndexerSupport = ref(false);
+const holders = ref<EvmHolder[]>([]);
+const loadingRows = ref<number[]>([]);
+const loading = ref(true);
+const systemContractsList = ref('');
+const showSystemContracts = ref(false);
+
+// Pagination
+const pagination = ref<Pagination>({
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+});
+
+// Chain settings
+const chainSettings = computed(() => useChainStore().currentChain.settings);
+
+// Decide which columns to show (either user-provided or default)
+const visibleColumns = computed(() => {
+    if (!props.columns || props.columns.length === 0) {
+        return defaultColumns;
+    }
+    return props.columns;
+});
+
+// Dictionary that maps each column name to a Quasar TableColumn
+const columnsDict: Record<string, TableColumn> = {
+    rank: {
+        name: 'rank',
+        field: 'rank',
+        label: 'Rank',
+        align: 'left',
+    },
+    holder: {
+        name: 'holder',
+        field: 'holder',
+        label: $t('components.holders.holder'),
+        align: 'left',
+    },
+    address: {
+        name: 'address',
+        field: 'address',
+        label: 'Address',
+        align: 'left',
+    },
+    tag_name: {
+        name: 'tag_name',
+        field: 'tag_name',
+        label: 'Contract Name',
+        align: 'left',
+    },
+    balance: {
+        name: 'balance',
+        field: 'balance',
+        label: 'Balance',
+        align: 'left',
+    },
+    quantity: {
+        name: 'quantity',
+        field: 'quantity',
+        label: 'Quantity',
+        align: 'left',
+    },
+    percentage: {
+        name: 'percentage',
+        field: 'percentage',
+        label: 'percentage',
+        align: 'left',
+    },
+    percentage_bar: {
+        name: 'percentage_bar',
+        field: 'percentage_bar',
+        label: 'percentage',
+        align: 'left',
+    },
+    txn_count: {
+        name: 'txn_count',
+        field: 'txn_count',
+        label: 'Txn Count',
+        align: 'left',
+    },
+    value: {
+        name: 'value',
+        field: 'value',
+        label: 'Value (USD)',
+        align: 'left',
+    },
+};
+
+// This computed array transforms the visibleColumns into an array of Quasar columns
+const tableColumns = computed<TableColumn[]>(() =>
+    visibleColumns.value.map((colName) => {
+        if (columnsDict[colName]) {
+            return columnsDict[colName];
+        }
+        // Fallback if the user passes a column not in the dictionary
+        return {
+            name: colName,
+            field: colName,
+            label: colName,
+            align: 'left',
+        };
+    }),
+);
+
+// Prepare skeleton rows (loading placeholders)
+const updateLoadingRows = () => {
+    loadingRows.value = [];
+    for (let i = 1; i <= pagination.value.rowsPerPage; i++) {
+        loadingRows.value.push(i);
+    }
+};
+
+// Router to handle query parameters
+const router = useRouter();
+const route = useRoute();
+
+// this function takes current pagination values and push them to the URL
+const updateUrlParams = () => {
+    const query = { ...route.query };
+    const newPage = pagination.value.page;
+    const newRows = pagination.value.rowsPerPage;
+
+    // If page is 1, remove param; otherwise set it
+    if (newPage !== 1 || newRows !== default_rows_per_pages) {
+        // only if they are different from each other
+        if (query.p !== newPage.toString()) {
+            query.p = newPage.toString();
+        }
+        if (query.ps !== newRows.toString()) {
+            query.ps = newRows.toString();
+        }
+    } else {
+        delete query.p;
+        delete query.ps;
+    }
+
+    console.log('HolderList.updateUrlParams()', { query });
+
+    router.replace({ query });
+};
+
+// this function takes the URL query and updates the pagination values
+const takeUrlParams = () => {
+    const query = route.query;
+    if (query.p) {
+        pagination.value.page = parseInt(query.p as string, 10);
+    } else {
+        pagination.value.page = 1;
+    }
+    if (query.ps) {
+        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
+    } else {
+        pagination.value.rowsPerPage = default_rows_per_pages;
+    }
+    console.log('HolderList.takeUrlParams()', { query, pagination: pagination.value });
+};
+
+const onPaginationChange = (props: { pagination: Pagination }) => {
+    console.log('HolderList.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
+    pagination.value = props.pagination;
+    updateUrlParams();
+};
+
+// Update URL query if pagination changes
+watch(
+    () => [route.query.p, route.query.ps],
+    () => {
+        console.log('HolderList.watch(route.query)', { query: route.query, pagination: pagination.value });
+        takeUrlParams();
+        onRequest({ pagination: pagination.value });
+    },
+    { deep: true, immediate: true },
+);
+
+onBeforeMount(() => {
+    updateLoadingRows();
+});
+
+onMounted(async () => {
+    // If we have query params on mount, reflect them in pagination
+    if (route.query.p) {
+        pagination.value.page = parseInt(route.query.p as string, 10);
+    }
+    if (route.query.ps) {
+        pagination.value.rowsPerPage = parseInt(route.query.ps as string, 10);
+    }
+
+    // Build a list of system contracts
+    const list = await chainSettings.value.getContractManager().getSystemContractsList();
+    for (const c in list.contracts) {
+        systemContractsList.value += list.contracts[c].address + ',';
+    }
+    // Remove trailing comma
+    if (systemContractsList.value.endsWith(',')) {
+        systemContractsList.value = systemContractsList.value.slice(0, -1);
+    }
+
+    // Remove the value column if no price is provided
+    if (!contract.value.properties?.price) {
+        const index = tableColumns.value.findIndex(col => col.name === 'value');
+        if (index !== -1) {
+            tableColumns.value.splice(index, 1);
+        }
+    }
+
+    // Check indexer support
+    weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
+
+    // Listen for indexer readiness
+    chainSettings.value.indexerReady$.subscribe(() => {
+        weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
+        onRequest({ pagination: pagination.value });
+    });
+
+    // Retrieve total supply from chain for system token
+    chainSettings.value.getTelosApi().get('supply/total').then((res) => {
+        if (systemTokenContract.value.properties) {
+            const supplyNum = Number(res.data).toFixed(systemToken.value.decimals);
+            // Turn it into a string with no decimal point
+            const supply = supplyNum.split('.').join('');
+            systemTokenContract.value.properties.supply = supply;
+
+            // If no contract is provided, assume it's native
+            if (!props.contract && contract.value.properties) {
+                contract.value.properties.total_supply_ibc = supply;
+                contract.value.properties.supply = supply;
+            }
+        }
+    });
+});
+
+// Our method for requesting the data
+async function onRequest(props: { pagination: Pagination }) {
+    if (!weHaveIndexerSupport.value) {
+        return;
+    }
+    console.log('HolderList.onRequest()', { props_pagination: props.pagination, pagination: pagination.value });
+
+    const { page, rowsPerPage, sortBy, descending } = props.pagination;
+    const indexerApi = chainSettings.value.getIndexerApi();
+
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+
+    updateLoadingRows();
+    loading.value = true;
+
+    const response = await indexerApi.get(getPath()) as { data?: IndexerHoldersResponse };
+
+    if (response.data?.total_count && pagination.value.rowsNumber !== response.data?.total_count) {
+        pagination.value.rowsNumber = response.data.total_count;
+    }
+
+    const resultHolders: EvmHolder[] = [];
+    for (const entry of response.data?.results || []) {
+        const holder: EvmHolder = {
+            rank: 0,
+            txn_count: 0,
+            ...(entry as Partial<EvmHolder>),
+        } as EvmHolder;
+        resultHolders.push(holder);
+    }
+    holders.value = resultHolders;
+    loading.value = false;
+    console.log('HolderList.onRequest()', { loading: loading.value, holders: holders.value });
+}
+
+// Build the URL path for the request
+function getPath(): string {
+    const { page, rowsPerPage, descending } = pagination.value;
+    let basePath = '';
+
+    if (contract.value.address === NativeCurrencyAddress) {
+        basePath = '/v1/balances';
+    } else {
+        basePath = `/v1/token/${contract.value.address}/holders`;
+    }
+
+    let path = `${basePath}?limit=${rowsPerPage === 0 ? 10 : rowsPerPage}`;
+    path += '&includeAbi=true';
+    path += `&offset=${(page - 1) * rowsPerPage}`;
+    path += '&includePagination=true';
+
+    if (!showSystemContracts.value) {
+        path += `&not=${systemContractsList.value}`;
+    }
+
+    path += `&sort=${descending ? 'desc' : 'asc'}`;
+    console.log('HolderList.getPath()', { page, rowsPerPage, path });
+    return path;
+}
+
+// Utility to display the supply share
+function displaySupplyShare(
+    _balance: string,
+    _supplies: string,
+    decimals: number | undefined,
+    fixed: number | boolean,
+): string {
+    const balance = _balance.split('.').join('');
+    const supplies = _supplies.split('.').join('');
+    let result = '';
+
+    // Check if balance is zero
+    if (new BigDecimal(balance).compareTo(new BigDecimal('0')) === 0) {
+        return '0%';
+    }
+
+    const share = new BigDecimal(balance)
+        .divide(new BigDecimal(+supplies > 0 ? supplies : 1), decimals ? decimals : 0)
+        .multiply(new BigDecimal('100'));
+    const shareFixed = share.round(2);
+
+    if (share.compareTo(new BigDecimal('0.00001')) === -1) {
+        result = '< 0.00001%';
+    } else if (share.compareTo(new BigDecimal('0.0001')) === -1) {
+        result = '< 0.0001%';
+    } else if (share.compareTo(new BigDecimal('0.001')) === -1) {
+        result = '< 0.001%';
+    } else if (share.compareTo(new BigDecimal('0.01')) === -1) {
+        result = '< 0.01%';
+    } else if (+supplies > 0) {
+        if (fixed) {
+            result = shareFixed.getValue() + '%';
+        } else {
+            result = share.getValue() + '%';
+        }
+    } else {
+        result = '--%';
+    }
+
+    return result;
+}
+
+// Utility to display the quantity
+function displayQuantity(balanceString: string, tokenDecimals?: number): string {
+    const bn = BigNumber.from(balanceString);
+    const formatted = ethers.utils.formatUnits(bn.toString(), tokenDecimals || 0);
+    const result = parseFloat(formatted).toLocaleString(locale.value);
+    return result;
+}
+
+// Function that returns the symbol for the current token or fallback
+function getSymbol(): string {
+    return contract.value.properties?.symbol
+            || systemToken.value.symbol
+            || '???';
+}
+
+// Function to get contract name if available
+function getContractName(holderAddress: string): string {
+    const info = chainSettings.value
+        .getContractManager()
+        .getContractDisplayInfo(holderAddress) as never as ContractDisplayInfo | null;
+    return info?.name || '';
+}
+
+// Function to truncate an address
+function truncateAddress(address: string, chars = 6): string {
+    if (address.length <= chars * 2) {
+        return address;
+    }
+    const start = address.slice(0, chars);
+    const end = address.slice(-chars);
+    return start + '...' + end;
+}
+
+// Function to compute the fraction for percentage bar
+function computeBarValue(balanceString: string): number {
+    // We can attempt to parse a fraction from displaySupplyShare
+    // For simplicity, just parse it as a float if possible
+    const shareStr = displaySupplyShare(
+        balanceString,
+        contract.value.properties?.supply || '0',
+        contract.value.properties?.decimals || DEFAULT_DECIMALS,
+        false,
+    );
+        // If it starts with '<', assume a very small fraction
+    if (shareStr.startsWith('<')) {
+        return 0.0001;
+    }
+    if (shareStr === '--%') {
+        return 0;
+    }
+    // Remove '%' sign
+    const numeric = parseFloat(shareStr.replace('%', ''));
+    return numeric / 100;
+}
+
+function calculateDollarValue(row: EvmHolder): string {
+    try {
+        const token_price = contract.value.properties?.price || '0.0';
+        const token_decimals = contract.value.properties?.decimals || 0;
+        const price_decimals = token_price.split('.')[1]?.length || 0;
+        const balance = BigNumber.from(row.balance);
+        const price = BigNumber.from(token_price.split('.').join(''));
+        const value = balance.mul(price).div(BigNumber.from(10).pow(price_decimals));
+        const partial_result = ethers.utils.formatUnits(value.toString(), token_decimals);
+        const result = '$' + parseFloat(parseFloat(partial_result).toFixed(0))
+            .toLocaleString(locale.value);
+        return result;
+    } catch (e) {
+        console.error('HolderList.calculateDollarValue()', e);
+        return '--';
+    }
+}
+</script>
+
+<template>
+<template v-if="!weHaveIndexerSupport && !loading">
+    <MinimumVersionRequired
+        class="c-minimum-version-required"
+        required="1.2.9"
+    />
+</template>
+<template v-else>
+    <div class="c-holder-list">
+        <!-- Table with data -->
+        <q-table
+            v-if="!loading"
+            v-model:pagination="pagination"
+            class="c-holder-list__table"
+            :rows="holders"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :binary-state-sort="true"
+            :row-key="row => row.address"
+            :rows-per-page-options="rows_per_page_options"
+            @request="onPaginationChange"
+        >
+            <!-- Table header -->
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+
+            <!-- Table body -->
+            <template v-slot:body="props">
+                <q-tr :props="props">
+                    <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <!-- rank -->
+                        <div v-if="col.name === 'rank'" class="c-holder-list__cell-content">
+                            {{ props.row.rank }}
+                        </div>
+
+                        <!-- holder -->
+                        <div v-else-if="col.name === 'holder'" class="c-holder-list__cell-content">
+                            <AddressField
+                                :key="props.row.address + 'c'"
+                                :address="props.row.address"
+                                :truncate="DEFAULT_DECIMALS"
+                                :useHighlight="false"
+                            />
+                        </div>
+
+                        <!-- address -->
+                        <div v-else-if="col.name === 'address'" class="c-holder-list__cell-content">
+                            <router-link
+                                :to="{
+                                    name: 'address',
+                                    params: { address: props.row.address }
+                                }"
+                            >
+                                {{ truncateAddress(props.row.address) }}
+                            </router-link>
+                        </div>
+
+                        <!-- tag_name -->
+                        <div v-else-if="col.name === 'tag_name'" class="c-holder-list__cell-content">
+                            {{ getContractName(props.row.address) }}
+                        </div>
+
+                        <!-- balance (with symbol) -->
+                        <div v-else-if="col.name === 'balance'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }} {{ getSymbol() }}
+                        </div>
+
+                        <!-- quantity (just the number) -->
+                        <div v-else-if="col.name === 'quantity'" class="c-holder-list__cell-content">
+                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }}
+                        </div>
+
+                        <!-- percentage (old telos_supply_share) -->
+                        <div v-else-if="col.name === 'percentage'" class="c-holder-list__cell-content">
+                            {{ displaySupplyShare(
+                                props.row.balance,
+                                contract.properties?.supply || '0',
+                                contract.properties?.decimals || DEFAULT_DECIMALS,
+                                true
+                            ) }}
+                        </div>
+
+                        <!-- percentage_bar -->
+                        <div v-else-if="col.name === 'percentage_bar'" class="c-holder-list__cell-content">
+                            <div class="c-holder-list__cell-content-num">
+                                {{ displaySupplyShare(
+                                    props.row.balance,
+                                    contract.properties?.supply || '0',
+                                    contract.properties?.decimals || DEFAULT_DECIMALS,
+                                    true
+                                ) }}
+                            </div>
+                            <q-linear-progress
+                                class="c-holder-list__cell-content-bar"
+                                :value="computeBarValue(props.row.balance)"
+                                color="primary"
+                                track-color="grey-2"
+                            />
+                        </div>
+
+                        <!-- txn_count -->
+                        <div v-else-if="col.name === 'txn_count'">
+                            {{ props.row.txn_count }}
+                        </div>
+
+                        <!-- value -->
+                        <div v-else-if="col.name === 'value'">
+                            {{ calculateDollarValue(props.row) }}
+                        </div>
+
+                        <!-- fallback if user passes something not handled -->
+                        <div v-else>
+                            {{ props.row[col.field] }}
+                        </div>
+                    </q-td>
+                </q-tr>
+            </template>
+
+            <!-- Bottom row toggle for system contracts -->
+            <template v-if="holders.length > 0" v-slot:bottom-row>
+                <q-toggle
+                    v-model="showSystemContracts"
+                    :label="$t('components.holders.show_system_contracts')"
+                    color="primary"
+                    checked-icon="visibility"
+                    unchecked-icon="visibility_off"
+                    @update:model-value="onPaginationChange({ pagination: pagination })"
+                />
+            </template>
+        </q-table>
+
+        <!-- Table skeleton when loading -->
+        <q-table
+            v-else
+            v-model:pagination="pagination"
+            :rows="loadingRows"
+            :columns="tableColumns"
+            :rows-per-page-label="$t('global.records_per_page')"
+            :rows-per-page-options="rows_per_page_options"
+        >
+            <template v-slot:header="props">
+                <q-tr :props="props">
+                    <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        class="c-holder-list__cell"
+                    >
+                        <div class="u-flex--center-y">
+                            {{ col.label }}
+                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
+                            <q-icon
+                                v-if="col.name === 'balance' || col.name === 'quantity'"
+                                name="arrow_downward"
+                                size="16px"
+                                class="q-ml-xs"
+                            />
+                        </div>
+                    </q-th>
+                </q-tr>
+            </template>
+            <template v-slot:body="">
+                <q-tr>
+                    <q-td
+                        v-for="col in tableColumns"
+                        :key="col.name"
+                        class="c-holder-list__cell"
+                    >
+                        <q-skeleton type="text" class="c-trx-overview__skeleton" />
+                    </q-td>
+                </q-tr>
+            </template>
+        </q-table>
+    </div>
+</template>
+</template>
+
+<style lang="scss" scoped>
+    .c-holder-list {
+        &__cell {
+            padding: 7px 9px !important;
+            &-content {
+                display: flex;
+                align-items: flex-start;
+                flex-direction: column;
+                &-num {
+                    font-size: 14px;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+
+    .q-table .q-toggle {
+        font-size: 12px;
+        position: absolute;
+        bottom: 4px;
+    }
+
+    .sortable {
+        height: 60px;
+        display: flex;
+        align-items: center;
+    }
+
+    @media only screen and (max-width: 764px) {
+        .q-table .q-toggle {
+            display: none;
+        }
+    }
+
+    .c-minimum-version-required {
+        align-self: center;
+    }
+</style>
diff --git a/src/components/Token/TablePagination.vue b/src/components/Token/TablePagination.vue
new file mode 100644
index 000000000..32c6a1ec2
--- /dev/null
+++ b/src/components/Token/TablePagination.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+// Import reactive shared pagination state and helper methods
+import {
+    pagination,
+    default_rows_per_page_options,
+    onPaginationChange,
+    setRouterInstances,
+} from 'src/lib/pagination';
+import { useRouter, useRoute } from 'vue-router';
+
+import { computed } from 'vue';
+
+// Available rows per page options (10, 25, 50, etc.)
+const rowsPerPageOptions = default_rows_per_page_options;
+
+// Compute the first row number displayed on the current page
+const startRow = computed(() => {
+    if (pagination.value.rowsNumber === 0) {
+        return 0;
+    }
+    return (pagination.value.page - 1) * pagination.value.rowsPerPage + 1;
+});
+
+// Compute the last row number displayed on the current page
+const endRow = computed(() => Math.min(
+    pagination.value.page * pagination.value.rowsPerPage,
+    pagination.value.rowsNumber ?? 0,
+));
+
+// Check if we are on the first page
+const isOnFirstPage = computed(() => pagination.value.page <= 1);
+
+// Check if we are on the last page
+const isOnLastPage = computed(() => {
+    const lastPage = Math.ceil(
+        (pagination.value.rowsNumber ?? 0)/ pagination.value.rowsPerPage,
+    ) || 1;
+    return pagination.value.page >= lastPage;
+});
+
+// Go to first page
+const goToFirstPage = () => {
+    if (isOnFirstPage.value) {
+        return;
+    }
+    onPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: 1,
+        },
+    });
+};
+
+// Go to previous page
+const goToPreviousPage = () => {
+    if (isOnFirstPage.value) {
+        return;
+    }
+    onPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: pagination.value.page - 1,
+        },
+    });
+};
+
+// Go to next page
+const goToNextPage = () => {
+    if (isOnLastPage.value) {
+        return;
+    }
+    onPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: pagination.value.page + 1,
+        },
+    });
+};
+
+// Go to last page
+const goToLastPage = () => {
+    if (isOnLastPage.value) {
+        return;
+    }
+    const lastPage = Math.ceil(
+        (pagination.value.rowsNumber ?? 0) / pagination.value.rowsPerPage,
+    ) || 1;
+    onPaginationChange({
+        pagination: {
+            ...pagination.value,
+            page: lastPage,
+        },
+    });
+};
+
+// Called when user changes rows-per-page in the <select>
+const onRowsPerPageChange = (event: number) => {
+    console.log('TablePagination.onRowsPerPageChange()', { event });
+    const newValue = event;
+    onPaginationChange({
+        pagination: {
+            ...pagination.value,
+            rowsPerPage: newValue,
+            // Always reset to the first page when changing the rowsPerPage
+            page: 1,
+        },
+    });
+};
+
+setRouterInstances(useRouter(), useRoute());
+
+</script>
+
+<template>
+<!-- This component displays pagination controls at the bottom of a table -->
+<div class="c-table-pagination">
+    <div class="c-table-pagination__page-size">
+        <span class="c-table-pagination__page-size-label">Records per page:</span>
+        <!--select
+            class="c-table-pagination__page-size-select"
+            :value="pagination.rowsPerPage"
+            @change="onRowsPerPageChange($event)"
+        >
+            <option
+                v-for="option in rowsPerPageOptions"
+                :key="option"
+                :value="option"
+            >
+                {{ option }}
+            </option>
+        </select-->
+        <q-btn
+            flat
+            dense
+            round
+            color="primary"
+            :label="pagination.rowsPerPage"
+            rightIcon="chevron_down"
+        >
+            <q-menu cover anchor="center middle">
+                <q-item
+                    v-for="option in rowsPerPageOptions"
+                    :key="option"
+                    clickable
+                    @click="onRowsPerPageChange(option)"
+                >
+                    <q-item-section>{{ option }}</q-item-section>
+                </q-item>
+            </q-menu>
+            <i class="q-icon notranslate material-icons q-select__dropdown-icon" aria-hidden="true" role="presentation">arrow_drop_down</i>
+        </q-btn>
+    </div>
+
+    <div class="c-table-pagination__info">
+        <span class="c-table-pagination__info-range">
+            {{ startRow }}-{{ endRow }} of {{ pagination.rowsNumber }}
+        </span>
+    </div>
+
+    <div class="c-table-pagination__nav">
+        <!-- Go to first page -->
+        <!-- <q-btn push color="white" text-color="primary" round icon="card_giftcard" /> -->
+        <q-btn
+            flat
+            dense
+            round
+            :disabled="pagination.page === 1"
+            icon="first_page"
+            @click="goToFirstPage()"
+        />
+
+        <!-- Go to previous page -->
+        <q-btn
+            flat
+            dense
+            round
+            :disabled="pagination.page === 1"
+            icon="chevron_left"
+            @click="goToPreviousPage()"
+        />
+
+        <!-- Go to next page -->
+        <q-btn
+            flat
+            dense
+            round
+            icon="chevron_right"
+            @click="goToNextPage()"
+        />
+
+        <!-- Go to last page -->
+        <q-btn
+            flat
+            dense
+            round
+            icon="last_page"
+            @click="goToLastPage()"
+        />
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+.c-table-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 12px;
+
+    &__page-size {
+        display: flex;
+        align-items: center;
+        margin-right: 16px;
+
+        &-label {
+            margin-right: 6px;
+        }
+
+        &-select {
+            padding: 4px 8px;
+        }
+    }
+
+    &__info {
+        margin-right: 16px;
+
+        &-range {
+            font-weight: 400;
+        }
+    }
+
+    &__nav {
+        display: flex;
+        align-items: center;
+
+        &-button {
+            margin: 0 3px;
+            padding: 4px 8px;
+            cursor: pointer;
+            border: 1px solid #ccc;
+            background: #333;
+            color: #fff;
+            border-radius: 4px;
+
+            &:disabled {
+                opacity: 0.4;
+                cursor: not-allowed;
+            }
+
+            /* BEM variants for different arrows */
+            // &--first {
+            // }
+            // &--prev  {
+            // }
+            // &--next  {
+            // }
+            // &--last  {
+            // }
+        }
+    }
+}
+</style>
+
diff --git a/src/lib/pagination.ts b/src/lib/pagination.ts
new file mode 100644
index 000000000..edaa212be
--- /dev/null
+++ b/src/lib/pagination.ts
@@ -0,0 +1,120 @@
+// Pagination
+
+import { Pagination } from 'src/types';
+import { Ref, ref, watch } from 'vue';
+import { Router, RouteLocationNormalizedLoaded } from 'vue-router';
+
+export const internal_pagination = ref<Pagination>({
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+});
+
+export const pagination = ref<Pagination>({ ...internal_pagination.value });
+
+// default pagination options
+export const default_rows_per_page_options = [10, 25, 50];
+export const default_rows_per_pages = 25;
+
+const router: Ref<Router | null> = ref(null);
+const route: Ref<RouteLocationNormalizedLoaded | null> = ref(null);
+
+export const setRouterInstances = (rr: Router, rt: RouteLocationNormalizedLoaded) => {
+    router.value = rr;
+    route.value = rt;
+    checkRouters();
+};
+
+// check if router instances are set
+const checkRouters = () => {
+    if (!router.value || !route.value) {
+        throw new Error('Router instances are not set');
+    }
+};
+
+// this function takes current pagination values and push them to the URL
+export const updateUrlParams = () => {
+    checkRouters();
+    const query = { ...route.value?.query ?? {} };
+    const newPage = pagination.value.page;
+    const newRows = pagination.value.rowsPerPage;
+
+    // If page is 1, remove param; otherwise set it
+    if (newPage !== 1 || newRows !== default_rows_per_pages) {
+        // only if they are different from each other
+        if (query.p !== newPage.toString()) {
+            query.p = newPage.toString();
+        }
+        if (query.ps !== newRows.toString()) {
+            query.ps = newRows.toString();
+        }
+    } else {
+        delete query.p;
+        delete query.ps;
+    }
+
+    console.log('pagination.updateUrlParams()', { query });
+
+    router.value?.replace({ query });
+};
+
+// this function takes the URL query and updates the pagination values
+export const takeUrlParams = () => {
+    checkRouters();
+    const query = route.value?.query;
+    if (query?.p) {
+        pagination.value.page = parseInt(query.p as string, 10);
+    } else {
+        pagination.value.page = 1;
+    }
+    if (query?.ps) {
+        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
+    } else {
+        pagination.value.rowsPerPage = default_rows_per_pages;
+    }
+    console.log('pagination.takeUrlParams()', { query, pagination: pagination.value });
+};
+
+const last_pagination: Pagination = { ...pagination.value };
+
+export const onPaginationChange = (props: { pagination: Pagination }) => {
+    console.log('pagination.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
+    if (
+        last_pagination.page === props.pagination.page &&
+        last_pagination.rowsPerPage === props.pagination.rowsPerPage &&
+        last_pagination.sortBy === props.pagination.sortBy &&
+        last_pagination.descending === props.pagination.descending
+    ) {
+        // No change
+        console.log('pagination.onPaginationChange() No change');
+        return;
+    }
+    pagination.value.page = props.pagination.page;
+    pagination.value.rowsPerPage = props.pagination.rowsPerPage;
+    pagination.value.rowsNumber = props.pagination.rowsNumber;
+    pagination.value.sortBy = props.pagination.sortBy;
+    pagination.value.descending = props.pagination.descending;
+    updateUrlParams();
+};
+
+// Update URL query if pagination changes
+watch(
+    () => [route.value?.query],
+    () => {
+        if (route.value?.query) {
+            console.log('pagination.watch(route.query)', { query: route.value?.query, pagination: pagination.value });
+            if (
+                last_pagination.page === +(route.value?.query?.p ?? '') &&
+                last_pagination.rowsPerPage === +(route.value?.query?.ps ?? '')
+            ) {
+                // No change
+                console.log('pagination.watch(route.query) No change');
+                return;
+            }
+            takeUrlParams();
+        }
+    },
+    { deep: true, immediate: true },
+);

From 46c72452134edba8e3a647b0fb7b6d162c649701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Wed, 22 Jan 2025 06:24:43 -0300
Subject: [PATCH 7/8] pagination buttons on header and footer + urp params

---
 src/components/Token/HolderList.vue         | 162 ++---
 src/components/Token/HolderListOriginal.vue | 753 --------------------
 src/components/Token/TablePagination.vue    | 152 ++--
 src/css/app.scss                            |   6 +-
 src/lib/pagination.ts                       | 102 ++-
 5 files changed, 235 insertions(+), 940 deletions(-)
 delete mode 100644 src/components/Token/HolderListOriginal.vue

diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index a671ea958..6761c99c8 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -2,12 +2,11 @@
 <!-- src/components/Token/HolderList.vue -->
 <script lang="ts" setup>
 // We import the needed libraries
-import { ref, toRaw, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
+import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Pagination } from 'src/types'; // Existing Pagination type
 import AddressField from 'components/AddressField.vue';
 import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
-// import TablePagination from 'src/components/Token/TablePagination.vue';
+import TablePagination from 'src/components/Token/TablePagination.vue';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
 import { useChainStore } from 'src/core';
@@ -19,16 +18,9 @@ import {
 } from 'src/core/types';
 import {
     pagination,            // Reactive pagination object. Represents current pagination state
-    onPaginationChange,
     default_rows_per_page_options,
-    setRouterInstances,
+    setPaginationTotalNumber,
 } from 'src/lib/pagination';
-import { useRouter, useRoute } from 'vue-router';
-// Router to handle query parameters
-const router = useRouter();
-const route = useRoute();
-
-setRouterInstances(router, route);
 
 defineOptions({
     name: 'HolderList',
@@ -214,18 +206,6 @@ const updateLoadingRows = () => {
     }
 };
 
-
-
-
-// Update URL query if pagination changes
-watch(
-    () => [pagination.value?.page, pagination.value?.rowsPerPage],
-    () => {
-        console.log('HoldersList.watch() page:', pagination.value?.page, 'rowsPerPage:', pagination.value?.rowsPerPage);
-        onRequest();
-    },
-);
-
 onBeforeMount(() => {
     updateLoadingRows();
 });
@@ -276,41 +256,52 @@ onMounted(async () => {
     });
 });
 
+// Internal pagination model
+const pagination_model = {
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+};
+
+// Update URL query if pagination changes
+watch(
+    () => pagination.value,
+    (a) => {
+        pagination_model.page = pagination.value.page;
+        pagination_model.rowsPerPage = pagination.value.rowsPerPage;
+        pagination_model.rowsNumber = pagination.value.rowsNumber || 0;
+        onRequest();
+    },
+    { deep: true },
+);
 // Our method for requesting the data
-let counter = 0;
-
-// bouce onRequest
-let timer = setTimeout(() => { /**/ }, 0);
-function onRequest() {
-    console.log('HolderList.onRequest() BOUNCING');
-    clearTimeout(timer);
-    timer = setTimeout(doRequest, 500);
-}
-async function doRequest() {
+const last = {
+    path: '',
+};
+async function onRequest() {
     if (!weHaveIndexerSupport.value) {
         return;
     }
-    counter++;
-    if (counter > 6) {
-        console.error('HolderList.onRequest() - too many requests');
-        return;
-    }
-    console.log('HolderList.onRequest()', counter, { pagination: pagination.value });
 
-    // const { page, rowsPerPage, sortBy, descending } = props.pagination;
     const indexerApi = chainSettings.value.getIndexerApi();
 
-    // pagination.value.page = page;
-    // pagination.value.rowsPerPage = rowsPerPage;
-    // pagination.value.sortBy = sortBy;
-    // pagination.value.descending = descending;
+    const new_path = getPath();
+    if (new_path === last.path) {
+        return;
+    } else {
+        last.path = new_path;
+    }
 
+    // prepare skeleton rows
     updateLoadingRows();
     loading.value = true;
-    const response = await indexerApi.get(getPath()) as { data?: IndexerHoldersResponse };
 
-    if (response.data?.total_count && pagination.value.rowsNumber !== response.data?.total_count) {
-        pagination.value.rowsNumber = response.data.total_count;
+    const response = await indexerApi.get(new_path) as { data?: IndexerHoldersResponse };
+    if (response.data?.total_count && pagination_model.rowsNumber !== response.data?.total_count) {
+        pagination_model.rowsNumber = response.data.total_count;
+        setPaginationTotalNumber(pagination_model.rowsNumber);
     }
     const resultHolders: EvmHolder[] = [];
     for (const entry of response.data?.results || []) {
@@ -323,7 +314,6 @@ async function doRequest() {
     }
     holders.value = resultHolders;
     loading.value = false;
-    console.log('HolderList.onRequest()', { loading: loading.value, holders: holders.value });
 }
 
 // Build the URL path for the request
@@ -347,7 +337,6 @@ function getPath(): string {
     }
 
     path += `&sort=${descending ? 'desc' : 'asc'}`;
-    // console.log('HolderList.getPath()', { page, rowsPerPage, path });
     return path;
 }
 
@@ -477,27 +466,26 @@ function calculateDollarValue(row: EvmHolder): string {
 <template v-else>
     <div class="c-holder-list">
         <!-- Table with data -->
-        <!-- @request="onPaginationChange" -->
         <q-table
             v-if="!loading"
-            v-model:pagination="pagination"
+            v-model:pagination="pagination_model"
             class="c-holder-list__table"
             :rows="holders"
             :columns="tableColumns"
             :rows-per-page-label="$t('global.records_per_page')"
             :binary-state-sort="true"
-            :hide-bottom='false'
+            :hide-bottom='true'
             :row-key="row => row.address"
             :rows-per-page-options="default_rows_per_page_options"
         >
             <!-- Table header -->
             <template v-slot:header="props">
                 <!-- Table pagination buttons in header -->
-                <!--q-tr>
+                <q-tr>
                     <q-td :colspan="tableColumns.length">
                         <TablePagination/>
                     </q-td>
-                </q-tr-->
+                </q-tr>
                 <q-tr :props="props">
                     <q-th
                         v-for="col in props.cols"
@@ -618,11 +606,11 @@ function calculateDollarValue(row: EvmHolder): string {
 
             <!-- Bottom row with table pagination buttons -->
             <template v-slot:bottom-row>
-                <!--q-tr>
-                    <q-td :colspan="tableColumns.length">
+                <q-tr>
+                    <q-td :colspan="tableColumns.length" class="pagination-container">
                         <TablePagination/>
                     </q-td>
-                </q-tr-->
+                </q-tr>
             </template>
         </q-table>
 
@@ -673,40 +661,44 @@ function calculateDollarValue(row: EvmHolder): string {
 </template>
 
 <style lang="scss">
-    .c-holder-list {
-        &__cell {
-            padding: 7px 9px !important;
-            &-content {
-                display: flex;
-                align-items: flex-start;
-                flex-direction: column;
-                &-num {
-                    font-size: 14px;
-                    font-weight: 500;
-                }
+.q-table .q-td.pagination-container {
+    padding: 4px 14px;
+}
+
+.c-holder-list {
+    &__cell {
+        padding: 7px 9px !important;
+        &-content {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: column;
+            &-num {
+                font-size: 14px;
+                font-weight: 500;
             }
         }
     }
+}
 
-    .q-table .q-toggle {
-        font-size: 12px;
-        position: absolute;
-        bottom: 4px;
-    }
+.q-table .q-toggle {
+    font-size: 12px;
+    position: absolute;
+    bottom: 4px;
+}
 
-    .sortable {
-        height: 60px;
-        display: flex;
-        align-items: center;
-    }
+.sortable {
+    height: 60px;
+    display: flex;
+    align-items: center;
+}
 
-    @media only screen and (max-width: 764px) {
-        .q-table .q-toggle {
-            display: none;
-        }
+@media only screen and (max-width: 764px) {
+    .q-table .q-toggle {
+        display: none;
     }
+}
 
-    .c-minimum-version-required {
-        align-self: center;
-    }
+.c-minimum-version-required {
+    align-self: center;
+}
 </style>
diff --git a/src/components/Token/HolderListOriginal.vue b/src/components/Token/HolderListOriginal.vue
deleted file mode 100644
index 0bb56698b..000000000
--- a/src/components/Token/HolderListOriginal.vue
+++ /dev/null
@@ -1,753 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-unused-vars -->
-<!-- src/components/Token/HolderList.vue -->
-<script lang="ts" setup>
-// We import the needed libraries
-import { ref, computed, onBeforeMount, onMounted, Ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { Pagination } from 'src/types'; // Existing Pagination type
-import AddressField from 'components/AddressField.vue';
-import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
-import BigDecimal from 'js-big-decimal';
-import { BigNumber, ethers } from 'ethers';
-import { useChainStore } from 'src/core';
-import {
-    EvmHolder,
-    IndexerHoldersResponse,
-    NativeCurrencyAddress,
-    ContractDisplayInfo,
-} from 'src/core/types';
-import { useRouter, useRoute } from 'vue-router';
-
-defineOptions({
-    name: 'HolderList',
-});
-
-// Default decimals
-const DEFAULT_DECIMALS = 18;
-
-// default pagination options
-const rows_per_page_options = [10, 25, 50];
-const default_rows_per_pages = 25;
-
-// Default columns if user does not provide any
-const defaultColumns = ['rank', 'holder', 'balance', 'percentage_bar'];
-
-    type Alignment = 'left' | 'center' | 'right';
-
-    interface ContractProps {
-        address: string
-        properties?: {
-            decimals?: number
-            supply?: string
-            total_supply_ibc?: string
-            symbol?: string
-            price?: string
-        }
-    }
-
-    interface TableColumn {
-        name: string
-        label: string
-        align: Alignment
-        field: string
-        sortable?: boolean
-    }
-
-// We define the props, including a new 'columns' array
-const props = withDefaults(
-    defineProps<{
-            contract?: ContractProps
-            columns?: string[]
-        }>(),
-    {},
-);
-
-// Access i18n
-const { t: $t, locale } = useI18n();
-
-// We will keep track of the system token from chain settings
-const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
-
-// We define a reference for system token contract
-const systemTokenContract = ref<ContractProps>({
-    address: systemToken.value.contract,
-    properties: {
-        decimals: systemToken.value.decimals || DEFAULT_DECIMALS,
-        supply: '0',
-        total_supply_ibc: '0',
-        symbol: systemToken.value.symbol,
-    },
-} as ContractProps);
-
-// Our contract data
-const contract: Ref<ContractProps> = ref<ContractProps>(
-    props.contract
-        ? props.contract
-        : {
-            address: NativeCurrencyAddress,
-            properties: {
-                decimals: DEFAULT_DECIMALS,
-                supply: '0',
-                total_supply_ibc: '0',
-                symbol: '',
-                price: '',
-            },
-        },
-);
-
-// Minimum version for the indexer
-const minimumVersion = '1.2.9';
-
-// Reactive references
-const weHaveIndexerSupport = ref(false);
-const holders = ref<EvmHolder[]>([]);
-const loadingRows = ref<number[]>([]);
-const loading = ref(true);
-const systemContractsList = ref('');
-const showSystemContracts = ref(false);
-
-// Pagination
-const pagination = ref<Pagination>({
-    sortBy: 'balance',
-    descending: true,
-    page: 1,
-    rowsPerPage: 25,
-    rowsNumber: 0,
-});
-
-// Chain settings
-const chainSettings = computed(() => useChainStore().currentChain.settings);
-
-// Decide which columns to show (either user-provided or default)
-const visibleColumns = computed(() => {
-    if (!props.columns || props.columns.length === 0) {
-        return defaultColumns;
-    }
-    return props.columns;
-});
-
-// Dictionary that maps each column name to a Quasar TableColumn
-const columnsDict: Record<string, TableColumn> = {
-    rank: {
-        name: 'rank',
-        field: 'rank',
-        label: 'Rank',
-        align: 'left',
-    },
-    holder: {
-        name: 'holder',
-        field: 'holder',
-        label: $t('components.holders.holder'),
-        align: 'left',
-    },
-    address: {
-        name: 'address',
-        field: 'address',
-        label: 'Address',
-        align: 'left',
-    },
-    tag_name: {
-        name: 'tag_name',
-        field: 'tag_name',
-        label: 'Contract Name',
-        align: 'left',
-    },
-    balance: {
-        name: 'balance',
-        field: 'balance',
-        label: 'Balance',
-        align: 'left',
-    },
-    quantity: {
-        name: 'quantity',
-        field: 'quantity',
-        label: 'Quantity',
-        align: 'left',
-    },
-    percentage: {
-        name: 'percentage',
-        field: 'percentage',
-        label: 'percentage',
-        align: 'left',
-    },
-    percentage_bar: {
-        name: 'percentage_bar',
-        field: 'percentage_bar',
-        label: 'percentage',
-        align: 'left',
-    },
-    txn_count: {
-        name: 'txn_count',
-        field: 'txn_count',
-        label: 'Txn Count',
-        align: 'left',
-    },
-    value: {
-        name: 'value',
-        field: 'value',
-        label: 'Value (USD)',
-        align: 'left',
-    },
-};
-
-// This computed array transforms the visibleColumns into an array of Quasar columns
-const tableColumns = computed<TableColumn[]>(() =>
-    visibleColumns.value.map((colName) => {
-        if (columnsDict[colName]) {
-            return columnsDict[colName];
-        }
-        // Fallback if the user passes a column not in the dictionary
-        return {
-            name: colName,
-            field: colName,
-            label: colName,
-            align: 'left',
-        };
-    }),
-);
-
-// Prepare skeleton rows (loading placeholders)
-const updateLoadingRows = () => {
-    loadingRows.value = [];
-    for (let i = 1; i <= pagination.value.rowsPerPage; i++) {
-        loadingRows.value.push(i);
-    }
-};
-
-// Router to handle query parameters
-const router = useRouter();
-const route = useRoute();
-
-// this function takes current pagination values and push them to the URL
-const updateUrlParams = () => {
-    const query = { ...route.query };
-    const newPage = pagination.value.page;
-    const newRows = pagination.value.rowsPerPage;
-
-    // If page is 1, remove param; otherwise set it
-    if (newPage !== 1 || newRows !== default_rows_per_pages) {
-        // only if they are different from each other
-        if (query.p !== newPage.toString()) {
-            query.p = newPage.toString();
-        }
-        if (query.ps !== newRows.toString()) {
-            query.ps = newRows.toString();
-        }
-    } else {
-        delete query.p;
-        delete query.ps;
-    }
-
-    console.log('HolderList.updateUrlParams()', { query });
-
-    router.replace({ query });
-};
-
-// this function takes the URL query and updates the pagination values
-const takeUrlParams = () => {
-    const query = route.query;
-    if (query.p) {
-        pagination.value.page = parseInt(query.p as string, 10);
-    } else {
-        pagination.value.page = 1;
-    }
-    if (query.ps) {
-        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
-    } else {
-        pagination.value.rowsPerPage = default_rows_per_pages;
-    }
-    console.log('HolderList.takeUrlParams()', { query, pagination: pagination.value });
-};
-
-const onPaginationChange = (props: { pagination: Pagination }) => {
-    console.log('HolderList.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
-    pagination.value = props.pagination;
-    updateUrlParams();
-};
-
-// Update URL query if pagination changes
-watch(
-    () => [route.query.p, route.query.ps],
-    () => {
-        console.log('HolderList.watch(route.query)', { query: route.query, pagination: pagination.value });
-        takeUrlParams();
-        onRequest({ pagination: pagination.value });
-    },
-    { deep: true, immediate: true },
-);
-
-onBeforeMount(() => {
-    updateLoadingRows();
-});
-
-onMounted(async () => {
-    // If we have query params on mount, reflect them in pagination
-    if (route.query.p) {
-        pagination.value.page = parseInt(route.query.p as string, 10);
-    }
-    if (route.query.ps) {
-        pagination.value.rowsPerPage = parseInt(route.query.ps as string, 10);
-    }
-
-    // Build a list of system contracts
-    const list = await chainSettings.value.getContractManager().getSystemContractsList();
-    for (const c in list.contracts) {
-        systemContractsList.value += list.contracts[c].address + ',';
-    }
-    // Remove trailing comma
-    if (systemContractsList.value.endsWith(',')) {
-        systemContractsList.value = systemContractsList.value.slice(0, -1);
-    }
-
-    // Remove the value column if no price is provided
-    if (!contract.value.properties?.price) {
-        const index = tableColumns.value.findIndex(col => col.name === 'value');
-        if (index !== -1) {
-            tableColumns.value.splice(index, 1);
-        }
-    }
-
-    // Check indexer support
-    weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
-
-    // Listen for indexer readiness
-    chainSettings.value.indexerReady$.subscribe(() => {
-        weHaveIndexerSupport.value = chainSettings.value.hasIndexerSupportOver(minimumVersion);
-        onRequest({ pagination: pagination.value });
-    });
-
-    // Retrieve total supply from chain for system token
-    chainSettings.value.getTelosApi().get('supply/total').then((res) => {
-        if (systemTokenContract.value.properties) {
-            const supplyNum = Number(res.data).toFixed(systemToken.value.decimals);
-            // Turn it into a string with no decimal point
-            const supply = supplyNum.split('.').join('');
-            systemTokenContract.value.properties.supply = supply;
-
-            // If no contract is provided, assume it's native
-            if (!props.contract && contract.value.properties) {
-                contract.value.properties.total_supply_ibc = supply;
-                contract.value.properties.supply = supply;
-            }
-        }
-    });
-});
-
-// Our method for requesting the data
-async function onRequest(props: { pagination: Pagination }) {
-    if (!weHaveIndexerSupport.value) {
-        return;
-    }
-    console.log('HolderList.onRequest()', { props_pagination: props.pagination, pagination: pagination.value });
-
-    const { page, rowsPerPage, sortBy, descending } = props.pagination;
-    const indexerApi = chainSettings.value.getIndexerApi();
-
-    pagination.value.page = page;
-    pagination.value.rowsPerPage = rowsPerPage;
-    pagination.value.sortBy = sortBy;
-    pagination.value.descending = descending;
-
-    updateLoadingRows();
-    loading.value = true;
-
-    const response = await indexerApi.get(getPath()) as { data?: IndexerHoldersResponse };
-
-    if (response.data?.total_count && pagination.value.rowsNumber !== response.data?.total_count) {
-        pagination.value.rowsNumber = response.data.total_count;
-    }
-
-    const resultHolders: EvmHolder[] = [];
-    for (const entry of response.data?.results || []) {
-        const holder: EvmHolder = {
-            rank: 0,
-            txn_count: 0,
-            ...(entry as Partial<EvmHolder>),
-        } as EvmHolder;
-        resultHolders.push(holder);
-    }
-    holders.value = resultHolders;
-    loading.value = false;
-    console.log('HolderList.onRequest()', { loading: loading.value, holders: holders.value });
-}
-
-// Build the URL path for the request
-function getPath(): string {
-    const { page, rowsPerPage, descending } = pagination.value;
-    let basePath = '';
-
-    if (contract.value.address === NativeCurrencyAddress) {
-        basePath = '/v1/balances';
-    } else {
-        basePath = `/v1/token/${contract.value.address}/holders`;
-    }
-
-    let path = `${basePath}?limit=${rowsPerPage === 0 ? 10 : rowsPerPage}`;
-    path += '&includeAbi=true';
-    path += `&offset=${(page - 1) * rowsPerPage}`;
-    path += '&includePagination=true';
-
-    if (!showSystemContracts.value) {
-        path += `&not=${systemContractsList.value}`;
-    }
-
-    path += `&sort=${descending ? 'desc' : 'asc'}`;
-    console.log('HolderList.getPath()', { page, rowsPerPage, path });
-    return path;
-}
-
-// Utility to display the supply share
-function displaySupplyShare(
-    _balance: string,
-    _supplies: string,
-    decimals: number | undefined,
-    fixed: number | boolean,
-): string {
-    const balance = _balance.split('.').join('');
-    const supplies = _supplies.split('.').join('');
-    let result = '';
-
-    // Check if balance is zero
-    if (new BigDecimal(balance).compareTo(new BigDecimal('0')) === 0) {
-        return '0%';
-    }
-
-    const share = new BigDecimal(balance)
-        .divide(new BigDecimal(+supplies > 0 ? supplies : 1), decimals ? decimals : 0)
-        .multiply(new BigDecimal('100'));
-    const shareFixed = share.round(2);
-
-    if (share.compareTo(new BigDecimal('0.00001')) === -1) {
-        result = '< 0.00001%';
-    } else if (share.compareTo(new BigDecimal('0.0001')) === -1) {
-        result = '< 0.0001%';
-    } else if (share.compareTo(new BigDecimal('0.001')) === -1) {
-        result = '< 0.001%';
-    } else if (share.compareTo(new BigDecimal('0.01')) === -1) {
-        result = '< 0.01%';
-    } else if (+supplies > 0) {
-        if (fixed) {
-            result = shareFixed.getValue() + '%';
-        } else {
-            result = share.getValue() + '%';
-        }
-    } else {
-        result = '--%';
-    }
-
-    return result;
-}
-
-// Utility to display the quantity
-function displayQuantity(balanceString: string, tokenDecimals?: number): string {
-    const bn = BigNumber.from(balanceString);
-    const formatted = ethers.utils.formatUnits(bn.toString(), tokenDecimals || 0);
-    const result = parseFloat(formatted).toLocaleString(locale.value);
-    return result;
-}
-
-// Function that returns the symbol for the current token or fallback
-function getSymbol(): string {
-    return contract.value.properties?.symbol
-            || systemToken.value.symbol
-            || '???';
-}
-
-// Function to get contract name if available
-function getContractName(holderAddress: string): string {
-    const info = chainSettings.value
-        .getContractManager()
-        .getContractDisplayInfo(holderAddress) as never as ContractDisplayInfo | null;
-    return info?.name || '';
-}
-
-// Function to truncate an address
-function truncateAddress(address: string, chars = 6): string {
-    if (address.length <= chars * 2) {
-        return address;
-    }
-    const start = address.slice(0, chars);
-    const end = address.slice(-chars);
-    return start + '...' + end;
-}
-
-// Function to compute the fraction for percentage bar
-function computeBarValue(balanceString: string): number {
-    // We can attempt to parse a fraction from displaySupplyShare
-    // For simplicity, just parse it as a float if possible
-    const shareStr = displaySupplyShare(
-        balanceString,
-        contract.value.properties?.supply || '0',
-        contract.value.properties?.decimals || DEFAULT_DECIMALS,
-        false,
-    );
-        // If it starts with '<', assume a very small fraction
-    if (shareStr.startsWith('<')) {
-        return 0.0001;
-    }
-    if (shareStr === '--%') {
-        return 0;
-    }
-    // Remove '%' sign
-    const numeric = parseFloat(shareStr.replace('%', ''));
-    return numeric / 100;
-}
-
-function calculateDollarValue(row: EvmHolder): string {
-    try {
-        const token_price = contract.value.properties?.price || '0.0';
-        const token_decimals = contract.value.properties?.decimals || 0;
-        const price_decimals = token_price.split('.')[1]?.length || 0;
-        const balance = BigNumber.from(row.balance);
-        const price = BigNumber.from(token_price.split('.').join(''));
-        const value = balance.mul(price).div(BigNumber.from(10).pow(price_decimals));
-        const partial_result = ethers.utils.formatUnits(value.toString(), token_decimals);
-        const result = '$' + parseFloat(parseFloat(partial_result).toFixed(0))
-            .toLocaleString(locale.value);
-        return result;
-    } catch (e) {
-        console.error('HolderList.calculateDollarValue()', e);
-        return '--';
-    }
-}
-</script>
-
-<template>
-<template v-if="!weHaveIndexerSupport && !loading">
-    <MinimumVersionRequired
-        class="c-minimum-version-required"
-        required="1.2.9"
-    />
-</template>
-<template v-else>
-    <div class="c-holder-list">
-        <!-- Table with data -->
-        <q-table
-            v-if="!loading"
-            v-model:pagination="pagination"
-            class="c-holder-list__table"
-            :rows="holders"
-            :columns="tableColumns"
-            :rows-per-page-label="$t('global.records_per_page')"
-            :binary-state-sort="true"
-            :row-key="row => row.address"
-            :rows-per-page-options="rows_per_page_options"
-            @request="onPaginationChange"
-        >
-            <!-- Table header -->
-            <template v-slot:header="props">
-                <q-tr :props="props">
-                    <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        class="c-holder-list__cell"
-                    >
-                        <div class="u-flex--center-y">
-                            {{ col.label }}
-                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
-                            <q-icon
-                                v-if="col.name === 'balance' || col.name === 'quantity'"
-                                name="arrow_downward"
-                                size="16px"
-                                class="q-ml-xs"
-                            />
-                        </div>
-                    </q-th>
-                </q-tr>
-            </template>
-
-            <!-- Table body -->
-            <template v-slot:body="props">
-                <q-tr :props="props">
-                    <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        class="c-holder-list__cell"
-                    >
-                        <!-- rank -->
-                        <div v-if="col.name === 'rank'" class="c-holder-list__cell-content">
-                            {{ props.row.rank }}
-                        </div>
-
-                        <!-- holder -->
-                        <div v-else-if="col.name === 'holder'" class="c-holder-list__cell-content">
-                            <AddressField
-                                :key="props.row.address + 'c'"
-                                :address="props.row.address"
-                                :truncate="DEFAULT_DECIMALS"
-                                :useHighlight="false"
-                            />
-                        </div>
-
-                        <!-- address -->
-                        <div v-else-if="col.name === 'address'" class="c-holder-list__cell-content">
-                            <router-link
-                                :to="{
-                                    name: 'address',
-                                    params: { address: props.row.address }
-                                }"
-                            >
-                                {{ truncateAddress(props.row.address) }}
-                            </router-link>
-                        </div>
-
-                        <!-- tag_name -->
-                        <div v-else-if="col.name === 'tag_name'" class="c-holder-list__cell-content">
-                            {{ getContractName(props.row.address) }}
-                        </div>
-
-                        <!-- balance (with symbol) -->
-                        <div v-else-if="col.name === 'balance'" class="c-holder-list__cell-content">
-                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }} {{ getSymbol() }}
-                        </div>
-
-                        <!-- quantity (just the number) -->
-                        <div v-else-if="col.name === 'quantity'" class="c-holder-list__cell-content">
-                            {{ displayQuantity(props.row.balance, contract.properties?.decimals) }}
-                        </div>
-
-                        <!-- percentage (old telos_supply_share) -->
-                        <div v-else-if="col.name === 'percentage'" class="c-holder-list__cell-content">
-                            {{ displaySupplyShare(
-                                props.row.balance,
-                                contract.properties?.supply || '0',
-                                contract.properties?.decimals || DEFAULT_DECIMALS,
-                                true
-                            ) }}
-                        </div>
-
-                        <!-- percentage_bar -->
-                        <div v-else-if="col.name === 'percentage_bar'" class="c-holder-list__cell-content">
-                            <div class="c-holder-list__cell-content-num">
-                                {{ displaySupplyShare(
-                                    props.row.balance,
-                                    contract.properties?.supply || '0',
-                                    contract.properties?.decimals || DEFAULT_DECIMALS,
-                                    true
-                                ) }}
-                            </div>
-                            <q-linear-progress
-                                class="c-holder-list__cell-content-bar"
-                                :value="computeBarValue(props.row.balance)"
-                                color="primary"
-                                track-color="grey-2"
-                            />
-                        </div>
-
-                        <!-- txn_count -->
-                        <div v-else-if="col.name === 'txn_count'">
-                            {{ props.row.txn_count }}
-                        </div>
-
-                        <!-- value -->
-                        <div v-else-if="col.name === 'value'">
-                            {{ calculateDollarValue(props.row) }}
-                        </div>
-
-                        <!-- fallback if user passes something not handled -->
-                        <div v-else>
-                            {{ props.row[col.field] }}
-                        </div>
-                    </q-td>
-                </q-tr>
-            </template>
-
-            <!-- Bottom row toggle for system contracts -->
-            <template v-if="holders.length > 0" v-slot:bottom-row>
-                <q-toggle
-                    v-model="showSystemContracts"
-                    :label="$t('components.holders.show_system_contracts')"
-                    color="primary"
-                    checked-icon="visibility"
-                    unchecked-icon="visibility_off"
-                    @update:model-value="onPaginationChange({ pagination: pagination })"
-                />
-            </template>
-        </q-table>
-
-        <!-- Table skeleton when loading -->
-        <q-table
-            v-else
-            v-model:pagination="pagination"
-            :rows="loadingRows"
-            :columns="tableColumns"
-            :rows-per-page-label="$t('global.records_per_page')"
-            :rows-per-page-options="rows_per_page_options"
-        >
-            <template v-slot:header="props">
-                <q-tr :props="props">
-                    <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        class="c-holder-list__cell"
-                    >
-                        <div class="u-flex--center-y">
-                            {{ col.label }}
-                            <!-- Add downward arrow for 'balance' or 'quantity' columns -->
-                            <q-icon
-                                v-if="col.name === 'balance' || col.name === 'quantity'"
-                                name="arrow_downward"
-                                size="16px"
-                                class="q-ml-xs"
-                            />
-                        </div>
-                    </q-th>
-                </q-tr>
-            </template>
-            <template v-slot:body="">
-                <q-tr>
-                    <q-td
-                        v-for="col in tableColumns"
-                        :key="col.name"
-                        class="c-holder-list__cell"
-                    >
-                        <q-skeleton type="text" class="c-trx-overview__skeleton" />
-                    </q-td>
-                </q-tr>
-            </template>
-        </q-table>
-    </div>
-</template>
-</template>
-
-<style lang="scss" scoped>
-    .c-holder-list {
-        &__cell {
-            padding: 7px 9px !important;
-            &-content {
-                display: flex;
-                align-items: flex-start;
-                flex-direction: column;
-                &-num {
-                    font-size: 14px;
-                    font-weight: 500;
-                }
-            }
-        }
-    }
-
-    .q-table .q-toggle {
-        font-size: 12px;
-        position: absolute;
-        bottom: 4px;
-    }
-
-    .sortable {
-        height: 60px;
-        display: flex;
-        align-items: center;
-    }
-
-    @media only screen and (max-width: 764px) {
-        .q-table .q-toggle {
-            display: none;
-        }
-    }
-
-    .c-minimum-version-required {
-        align-self: center;
-    }
-</style>
diff --git a/src/components/Token/TablePagination.vue b/src/components/Token/TablePagination.vue
index 32c6a1ec2..d8e886462 100644
--- a/src/components/Token/TablePagination.vue
+++ b/src/components/Token/TablePagination.vue
@@ -5,45 +5,77 @@ import {
     default_rows_per_page_options,
     onPaginationChange,
     setRouterInstances,
+    // setRouterInstances,
 } from 'src/lib/pagination';
-import { useRouter, useRoute } from 'vue-router';
+import { Pagination } from 'src/types';
+// import { useRouter, useRoute } from 'vue-router';
 
-import { computed } from 'vue';
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 // Available rows per page options (10, 25, 50, etc.)
 const rowsPerPageOptions = default_rows_per_page_options;
+const isOnLastPage = ref(false);
+const endRow = ref(0);
+const isOnFirstPage = ref(true);
+const startRow = ref(0);
 
-// Compute the first row number displayed on the current page
-const startRow = computed(() => {
-    if (pagination.value.rowsNumber === 0) {
-        return 0;
-    }
-    return (pagination.value.page - 1) * pagination.value.rowsPerPage + 1;
-});
+// Internal pagination model
+const pagination_model = {
+    sortBy: 'balance',
+    descending: true,
+    page: 1,
+    rowsPerPage: 25,
+    rowsNumber: 0,
+};
 
-// Compute the last row number displayed on the current page
-const endRow = computed(() => Math.min(
-    pagination.value.page * pagination.value.rowsPerPage,
-    pagination.value.rowsNumber ?? 0,
-));
+watch(
+    () => pagination.value,
+    (a) => {
+        console.log('TablePagination.watch() page:', pagination.value?.page, 'rowsPerPage:', pagination.value?.rowsPerPage, 'a:', a);
+        updatePaginationModel();
+    },
+);
+
+const updatePaginationModel = () => {
+    pagination_model.page = pagination.value.page;
+    pagination_model.rowsPerPage = pagination.value.rowsPerPage;
+    pagination_model.rowsNumber = pagination.value.rowsNumber || 0;
+    isOnLastPage.value = pagination_model.page === Math.ceil(
+        (pagination_model.rowsNumber ?? 0) / pagination_model.rowsPerPage,
+    );
+    endRow.value = Math.min(
+        pagination_model.page * pagination_model.rowsPerPage,
+        pagination_model.rowsNumber ?? 0,
+    );
+    isOnFirstPage.value = pagination_model.page <= 1;
+    startRow.value = (pagination_model.rowsNumber === 0) ? 0 : (pagination_model.page - 1) * pagination_model.rowsPerPage + 1;
+    console.log('TablePagination.updatePaginationModel()', {
+        pagination_model: JSON.parse(JSON.stringify(pagination_model)),
+        isOnLastPage: isOnLastPage.value,
+        endRow: endRow.value,
+        isOnFirstPage: isOnFirstPage.value,
+        startRow: startRow.value,
+    });
+};
 
-// Check if we are on the first page
-const isOnFirstPage = computed(() => pagination.value.page <= 1);
 
-// Check if we are on the last page
-const isOnLastPage = computed(() => {
-    const lastPage = Math.ceil(
-        (pagination.value.rowsNumber ?? 0)/ pagination.value.rowsPerPage,
-    ) || 1;
-    return pagination.value.page >= lastPage;
+onMounted(() => {
+    updatePaginationModel();
 });
 
+// setPaginationChange
+const setPaginationChange = (props: { pagination: Pagination }) => {
+    onPaginationChange(props);
+    updatePaginationModel();
+};
+
 // Go to first page
 const goToFirstPage = () => {
     if (isOnFirstPage.value) {
         return;
     }
-    onPaginationChange({
+    setPaginationChange({
         pagination: {
             ...pagination.value,
             page: 1,
@@ -56,7 +88,7 @@ const goToPreviousPage = () => {
     if (isOnFirstPage.value) {
         return;
     }
-    onPaginationChange({
+    setPaginationChange({
         pagination: {
             ...pagination.value,
             page: pagination.value.page - 1,
@@ -69,7 +101,7 @@ const goToNextPage = () => {
     if (isOnLastPage.value) {
         return;
     }
-    onPaginationChange({
+    setPaginationChange({
         pagination: {
             ...pagination.value,
             page: pagination.value.page + 1,
@@ -85,7 +117,7 @@ const goToLastPage = () => {
     const lastPage = Math.ceil(
         (pagination.value.rowsNumber ?? 0) / pagination.value.rowsPerPage,
     ) || 1;
-    onPaginationChange({
+    setPaginationChange({
         pagination: {
             ...pagination.value,
             page: lastPage,
@@ -94,10 +126,8 @@ const goToLastPage = () => {
 };
 
 // Called when user changes rows-per-page in the <select>
-const onRowsPerPageChange = (event: number) => {
-    console.log('TablePagination.onRowsPerPageChange()', { event });
-    const newValue = event;
-    onPaginationChange({
+const onRowsPerPageChange = (newValue: number) => {
+    setPaginationChange({
         pagination: {
             ...pagination.value,
             rowsPerPage: newValue,
@@ -107,7 +137,9 @@ const onRowsPerPageChange = (event: number) => {
     });
 };
 
-setRouterInstances(useRouter(), useRoute());
+onMounted(() => {
+    setRouterInstances(useRouter(), useRoute());
+});
 
 </script>
 
@@ -116,26 +148,14 @@ setRouterInstances(useRouter(), useRoute());
 <div class="c-table-pagination">
     <div class="c-table-pagination__page-size">
         <span class="c-table-pagination__page-size-label">Records per page:</span>
-        <!--select
-            class="c-table-pagination__page-size-select"
-            :value="pagination.rowsPerPage"
-            @change="onRowsPerPageChange($event)"
-        >
-            <option
-                v-for="option in rowsPerPageOptions"
-                :key="option"
-                :value="option"
-            >
-                {{ option }}
-            </option>
-        </select-->
         <q-btn
             flat
             dense
             round
-            color="primary"
+            color="default"
             :label="pagination.rowsPerPage"
             rightIcon="chevron_down"
+            class="c-table-pagination__page-size-select"
         >
             <q-menu cover anchor="center middle">
                 <q-item
@@ -159,11 +179,11 @@ setRouterInstances(useRouter(), useRoute());
 
     <div class="c-table-pagination__nav">
         <!-- Go to first page -->
-        <!-- <q-btn push color="white" text-color="primary" round icon="card_giftcard" /> -->
         <q-btn
             flat
             dense
             round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--first"
             :disabled="pagination.page === 1"
             icon="first_page"
             @click="goToFirstPage()"
@@ -174,6 +194,7 @@ setRouterInstances(useRouter(), useRoute());
             flat
             dense
             round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--prev"
             :disabled="pagination.page === 1"
             icon="chevron_left"
             @click="goToPreviousPage()"
@@ -184,6 +205,7 @@ setRouterInstances(useRouter(), useRoute());
             flat
             dense
             round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--next"
             icon="chevron_right"
             @click="goToNextPage()"
         />
@@ -193,6 +215,7 @@ setRouterInstances(useRouter(), useRoute());
             flat
             dense
             round
+            class="c-table-pagination__nav-button c-table-pagination__nav-button--last"
             icon="last_page"
             @click="goToLastPage()"
         />
@@ -210,14 +233,14 @@ setRouterInstances(useRouter(), useRoute());
     &__page-size {
         display: flex;
         align-items: center;
-        margin-right: 16px;
+        margin-right: 9px;
 
         &-label {
             margin-right: 6px;
         }
 
         &-select {
-            padding: 4px 8px;
+            padding-left: 5px;
         }
     }
 
@@ -232,32 +255,19 @@ setRouterInstances(useRouter(), useRoute());
     &__nav {
         display: flex;
         align-items: center;
+        color: var(--pagination-buttons-color);
+    }
 
-        &-button {
-            margin: 0 3px;
-            padding: 4px 8px;
-            cursor: pointer;
-            border: 1px solid #ccc;
-            background: #333;
-            color: #fff;
-            border-radius: 4px;
-
-            &:disabled {
-                opacity: 0.4;
-                cursor: not-allowed;
-            }
-
-            /* BEM variants for different arrows */
-            // &--first {
-            // }
-            // &--prev  {
-            // }
-            // &--next  {
-            // }
-            // &--last  {
-            // }
+    &__page-size-select {
+        .q-focus-helper {
+            display: none;
         }
     }
+
+    .q-select__dropdown-icon {
+        padding-right: 7px;
+        padding-left: 6px;
+    }
 }
 </style>
 
diff --git a/src/css/app.scss b/src/css/app.scss
index fcab94e42..06ce8a780 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -40,6 +40,8 @@ body.body--light {
     --notify-neutral: #4D4D4D;
     --notify-info: #008888;
 
+    --pagination-buttons-color: #{$grey-8};
+
     a:hover {
         color: $a-hover-light;
     }
@@ -79,11 +81,13 @@ body.body--dark {
         color: $a-hover-dark;
     }
 
+    --pagination-buttons-color: #{$grey-8};
+
     .vjs-tree-node.is-highlight,.vjs-tree-node:hover{
         background-color:#313436
     }
 
-    
+
 }
 
 a {
diff --git a/src/lib/pagination.ts b/src/lib/pagination.ts
index edaa212be..4815f6f94 100644
--- a/src/lib/pagination.ts
+++ b/src/lib/pagination.ts
@@ -1,18 +1,18 @@
 // Pagination
 
 import { Pagination } from 'src/types';
-import { Ref, ref, watch } from 'vue';
+import { Ref, ref, toRaw, watch } from 'vue';
 import { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 
-export const internal_pagination = ref<Pagination>({
+export const internal_pagination: Pagination = {
     sortBy: 'balance',
     descending: true,
     page: 1,
     rowsPerPage: 25,
     rowsNumber: 0,
-});
+};
 
-export const pagination = ref<Pagination>({ ...internal_pagination.value });
+export const pagination = ref<Pagination>({ ...internal_pagination });
 
 // default pagination options
 export const default_rows_per_page_options = [10, 25, 50];
@@ -22,6 +22,7 @@ const router: Ref<Router | null> = ref(null);
 const route: Ref<RouteLocationNormalizedLoaded | null> = ref(null);
 
 export const setRouterInstances = (rr: Router, rt: RouteLocationNormalizedLoaded) => {
+    console.log('pagination.setRouterInstances()', { rr, rt });
     router.value = rr;
     route.value = rt;
     checkRouters();
@@ -35,68 +36,109 @@ const checkRouters = () => {
 };
 
 // this function takes current pagination values and push them to the URL
-export const updateUrlParams = () => {
+export const updateUrlParams = (newPage: number, newRows: number) => {
     checkRouters();
     const query = { ...route.value?.query ?? {} };
-    const newPage = pagination.value.page;
-    const newRows = pagination.value.rowsPerPage;
+
+    console.log('pagination.updateUrlParams()', { newPage, newRows });
 
     // If page is 1, remove param; otherwise set it
     if (newPage !== 1 || newRows !== default_rows_per_pages) {
         // only if they are different from each other
         if (query.p !== newPage.toString()) {
             query.p = newPage.toString();
+            console.log('pagination.updateUrlParams() -> query.p: ', query.p);
         }
         if (query.ps !== newRows.toString()) {
             query.ps = newRows.toString();
+            console.log('pagination.updateUrlParams() -> query.ps: ', query.ps);
         }
     } else {
         delete query.p;
         delete query.ps;
     }
 
-    console.log('pagination.updateUrlParams()', { query });
-
-    router.value?.replace({ query });
+    if (router.value) {
+        console.log('pagination.updateUrlParams() -->', { query });
+        router.value.replace({ query });
+    }
 };
 
 // this function takes the URL query and updates the pagination values
 export const takeUrlParams = () => {
     checkRouters();
     const query = route.value?.query;
+    let dirty = false;
     if (query?.p) {
-        pagination.value.page = parseInt(query.p as string, 10);
+        const p = parseInt(query.p as string, 10);
+        if (p !== internal_pagination.page) {
+            internal_pagination.page = p;
+            dirty = true;
+            console.log('pagination.takeUrlParams() -> page: ', internal_pagination.page);
+        }
     } else {
-        pagination.value.page = 1;
+        console.log('pagination.takeUrlParams() -> page: 1');
+        dirty = true;
+        internal_pagination.page = 1;
     }
     if (query?.ps) {
-        pagination.value.rowsPerPage = parseInt(query.ps as string, 10);
+        const ps = parseInt(query.ps as string, 10);
+        if (ps !== internal_pagination.rowsPerPage) {
+            dirty = true;
+            internal_pagination.rowsPerPage = ps;
+            console.log('pagination.takeUrlParams() -> rowsPerPage: ', internal_pagination.rowsPerPage);
+        }
     } else {
-        pagination.value.rowsPerPage = default_rows_per_pages;
+        console.log('pagination.takeUrlParams() -> rowsPerPage: default');
+        dirty = true;
+        internal_pagination.rowsPerPage = default_rows_per_pages;
     }
-    console.log('pagination.takeUrlParams()', { query, pagination: pagination.value });
-};
 
-const last_pagination: Pagination = { ...pagination.value };
+    if (dirty) {
+        const value = { ...internal_pagination };
+        console.log('pagination.takeUrlParams() ---> final', value);
+        pagination.value = value;
+    }
+};
 
 export const onPaginationChange = (props: { pagination: Pagination }) => {
-    console.log('pagination.onPaginationChange()', { props_pagination: props.pagination, pagination: pagination.value });
+    console.log('pagination.onPaginationChange()', {
+        rowsNumber: props.pagination.rowsNumber,
+        props_pagination: props.pagination,
+        rowsPerPage: pagination.value.rowsPerPage,
+        page: pagination.value.page,
+    });
     if (
-        last_pagination.page === props.pagination.page &&
-        last_pagination.rowsPerPage === props.pagination.rowsPerPage &&
-        last_pagination.sortBy === props.pagination.sortBy &&
-        last_pagination.descending === props.pagination.descending
+        internal_pagination.page === props.pagination.page &&
+        internal_pagination.rowsPerPage === props.pagination.rowsPerPage &&
+        internal_pagination.sortBy === props.pagination.sortBy &&
+        internal_pagination.descending === props.pagination.descending
     ) {
         // No change
         console.log('pagination.onPaginationChange() No change');
         return;
     }
+    // internal_pagination.page = props.pagination.page;
+    internal_pagination.page = props.pagination.page;
+    internal_pagination.rowsPerPage = props.pagination.rowsPerPage;
+    pagination.value.rowsNumber = internal_pagination.rowsNumber;
+    pagination.value.rowsPerPage = internal_pagination.rowsPerPage;
+    pagination.value.descending = internal_pagination.descending;
+    pagination.value.sortBy = internal_pagination.sortBy;
     pagination.value.page = props.pagination.page;
-    pagination.value.rowsPerPage = props.pagination.rowsPerPage;
-    pagination.value.rowsNumber = props.pagination.rowsNumber;
-    pagination.value.sortBy = props.pagination.sortBy;
-    pagination.value.descending = props.pagination.descending;
-    updateUrlParams();
+    console.log('pagination.onPaginationChange() pagination.value: ', { pagination: toRaw(pagination.value) });
+    updateUrlParams(props.pagination.page, props.pagination.rowsPerPage);
+};
+
+
+// set pagination total number
+export const setPaginationTotalNumber = (total: number) => {
+    internal_pagination.rowsNumber = total;
+    onPaginationChange({
+        pagination: {
+            ...internal_pagination,
+        },
+    });
 };
 
 // Update URL query if pagination changes
@@ -104,10 +146,10 @@ watch(
     () => [route.value?.query],
     () => {
         if (route.value?.query) {
-            console.log('pagination.watch(route.query)', { query: route.value?.query, pagination: pagination.value });
+            console.log('pagination.watch(route.query)', { query: route.value?.query, rowsPerPage: pagination.value.rowsPerPage, page: pagination.value.page });
             if (
-                last_pagination.page === +(route.value?.query?.p ?? '') &&
-                last_pagination.rowsPerPage === +(route.value?.query?.ps ?? '')
+                internal_pagination.page === +(route.value?.query?.p ?? '') &&
+                internal_pagination.rowsPerPage === +(route.value?.query?.ps ?? '')
             ) {
                 // No change
                 console.log('pagination.watch(route.query) No change');

From 3158e82f6734c9fb7308c4640e1fc0452633fcec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viterbo=20Rodr=C3=ADguez?= <viter.rod@gmail.com>
Date: Mon, 27 Jan 2025 08:29:30 -0300
Subject: [PATCH 8/8] temporary removing rank and trx_count columns

---
 src/components/MinimumVersionRequired.vue |   2 +-
 src/components/Token/HolderList.vue       |  11 ++-
 src/core/mocks/ChainStore.ts              |   2 +
 src/pages/AccountPage.vue                 |   2 +-
 src/pages/HoldersPage.vue                 | 112 +++++++++++-----------
 5 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/src/components/MinimumVersionRequired.vue b/src/components/MinimumVersionRequired.vue
index 26c6eba10..1fbaad9a2 100644
--- a/src/components/MinimumVersionRequired.vue
+++ b/src/components/MinimumVersionRequired.vue
@@ -13,7 +13,7 @@ defineProps({
     },
 });
 
-const current = ref('...');
+const current = ref('N/A');
 const settings = computed(() => useChainStore().currentChain.settings);
 const state = computed(() => settings.value.indexerHealthState);
 
diff --git a/src/components/Token/HolderList.vue b/src/components/Token/HolderList.vue
index 6761c99c8..6f66ea193 100644
--- a/src/components/Token/HolderList.vue
+++ b/src/components/Token/HolderList.vue
@@ -9,7 +9,7 @@ import MinimumVersionRequired from 'components/MinimumVersionRequired.vue';
 import TablePagination from 'src/components/Token/TablePagination.vue';
 import BigDecimal from 'js-big-decimal';
 import { BigNumber, ethers } from 'ethers';
-import { useChainStore } from 'src/core';
+import { INDEXER_SUPPORT_TIME_OUT, useChainStore } from 'src/core';
 import {
     EvmHolder,
     IndexerHoldersResponse,
@@ -239,6 +239,12 @@ onMounted(async () => {
         onRequest();
     });
 
+    setTimeout(() => {
+        console.log('HoldersList.onMounted() --> setTimeout() !!!!');
+        weHaveIndexerSupport.value = false;
+        loading.value = false;
+    }, INDEXER_SUPPORT_TIME_OUT);
+
     // Retrieve total supply from chain for system token
     chainSettings.value.getTelosApi().get('supply/total').then((res) => {
         if (systemTokenContract.value.properties) {
@@ -282,6 +288,7 @@ const last = {
 };
 async function onRequest() {
     if (!weHaveIndexerSupport.value) {
+        console.log('onRequest() NO INDEXER; ----------------');
         return;
     }
 
@@ -296,6 +303,7 @@ async function onRequest() {
 
     // prepare skeleton rows
     updateLoadingRows();
+    console.log('loading.value = true; ----------------');
     loading.value = true;
 
     const response = await indexerApi.get(new_path) as { data?: IndexerHoldersResponse };
@@ -314,6 +322,7 @@ async function onRequest() {
     }
     holders.value = resultHolders;
     loading.value = false;
+    console.log('loading.value = false; ----------------');
 }
 
 // Build the URL path for the request
diff --git a/src/core/mocks/ChainStore.ts b/src/core/mocks/ChainStore.ts
index 847ad9304..ed988c009 100644
--- a/src/core/mocks/ChainStore.ts
+++ b/src/core/mocks/ChainStore.ts
@@ -14,6 +14,8 @@ import ContractManager from 'src/lib/contract/ContractManager';
 import TelosZkEVM from 'src/config/chains/telos-zkevm-testnet';
 import { Observable } from 'rxjs';
 
+export const INDEXER_SUPPORT_TIME_OUT = 5000;
+
 export interface TeloscanEVMChainSettings {
     getStakedSystemToken(): TokenClass;
     getWrappedSystemToken: () => TokenClass;
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index ba2e0704b..6994201fd 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -324,7 +324,7 @@ async function loadAccount() {
                 <HolderList
                     v-if="contract"
                     :contract="contract"
-                    :columns="['rank','holder','quantity','percentage_bar','value']"
+                    :columns="['holder','quantity','percentage_bar','value']"
                 />
             </q-tab-panel>
             <q-tab-panel v-else name="internaltx">
diff --git a/src/pages/HoldersPage.vue b/src/pages/HoldersPage.vue
index 732f644fb..12924cae8 100644
--- a/src/pages/HoldersPage.vue
+++ b/src/pages/HoldersPage.vue
@@ -1,56 +1,56 @@
-<script setup lang="ts">
-// src/pages/HoldersPage.vue
-
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useChainStore } from 'src/core';
-import HolderList from 'components/Token/HolderList.vue';
-
-
-
-const { t: $t } = useI18n();
-const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
-const symbol = computed(() => systemToken.value.symbol);
-
-</script>
-
-<template>
-<q-page class="c-holders">
-    <div class="c-holders__header">
-        <span class="c-holders__header-title">{{ $t('components.header.accounts_title', { symbol }) }}</span>
-    </div>
-
-    <div class="c-holders__main-container">
-        <div class="c-holders__main-content">
-            <HolderList
-                :columns="['rank','address','tag_name','balance','percentage','txn_count']"
-            />
-        </div>
-    </div>
-
-</q-page>
-</template>
-<style lang="scss">
-
-.c-holders {
-    @include page-container;
-
-    &__header {
-        @include page-header;
-        &-block-num {
-            font-size: 1.5rem;
-            margin-left: 10px;
-        }
-    }
-    &__main-container {
-        background: transparent !important;
-    }
-    &__main-content {
-        padding: 0px;
-        display: flex;
-        flex-direction: column;
-    }
-}
-
-</style>
-
+<script setup lang="ts">
+// src/pages/HoldersPage.vue
+
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useChainStore } from 'src/core';
+import HolderList from 'components/Token/HolderList.vue';
+
+
+
+const { t: $t } = useI18n();
+const systemToken = computed(() => useChainStore().currentChain.settings.getSystemToken());
+const symbol = computed(() => systemToken.value.symbol);
+
+</script>
+
+<template>
+<q-page class="c-holders">
+    <div class="c-holders__header">
+        <span class="c-holders__header-title">{{ $t('components.header.accounts_title', { symbol }) }}</span>
+    </div>
+
+    <div class="c-holders__main-container">
+        <div class="c-holders__main-content">
+            <HolderList
+                :columns="['address','tag_name','balance','percentage']"
+            />
+        </div>
+    </div>
+
+</q-page>
+</template>
+<style lang="scss">
+
+.c-holders {
+    @include page-container;
+
+    &__header {
+        @include page-header;
+        &-block-num {
+            font-size: 1.5rem;
+            margin-left: 10px;
+        }
+    }
+    &__main-container {
+        background: transparent !important;
+    }
+    &__main-content {
+        padding: 0px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+</style>
+