From cc937f70571f7fcdbcc89d6ab9047066cc9c331d Mon Sep 17 00:00:00 2001
From: Nikola Pavlov <nikola@txfusion.io>
Date: Fri, 17 Jan 2025 12:37:40 +0100
Subject: [PATCH 01/10] feat: add token page

---
 packages/app/src/components/AddressLink.vue   |   9 +-
 packages/app/src/components/Token.vue         | 253 ++++++++++++++++++
 .../app/src/components/TokenIconLabel.vue     |   8 +-
 .../src/components/token/TokenListTable.vue   |   2 +
 packages/app/src/locales/en.json              |   3 +
 packages/app/src/locales/uk.json              |   3 +
 packages/app/src/router/routes.ts             |   9 +
 packages/app/src/views/TokenView.vue          |  52 ++++
 packages/app/tests/components/Token.spec.ts   |  58 ++++
 9 files changed, 394 insertions(+), 3 deletions(-)
 create mode 100644 packages/app/src/components/Token.vue
 create mode 100644 packages/app/src/views/TokenView.vue
 create mode 100644 packages/app/tests/components/Token.spec.ts

diff --git a/packages/app/src/components/AddressLink.vue b/packages/app/src/components/AddressLink.vue
index 922573341e..64f29f7ef0 100644
--- a/packages/app/src/components/AddressLink.vue
+++ b/packages/app/src/components/AddressLink.vue
@@ -2,7 +2,7 @@
   <a
     v-if="network === 'L1' && !!currentNetwork.l1ExplorerUrl"
     target="_blank"
-    :href="`${currentNetwork.l1ExplorerUrl}/address/${formattedAddress}`"
+    :href="`${currentNetwork.l1ExplorerUrl}/${props.isTokenAddress ? `token` : `address`}/${formattedAddress}`"
   >
     <slot>
       {{ formattedAddress }}
@@ -13,7 +13,7 @@
       {{ formattedAddress }}
     </slot>
   </span>
-  <router-link v-else :to="{ name: 'address', params: { address: formattedAddress } }">
+  <router-link v-else :to="{ name: props.isTokenAddress ? `token` : `address`, params: { address: formattedAddress } }">
     <slot>
       {{ formattedAddress }}
     </slot>
@@ -40,6 +40,11 @@ const props = defineProps({
     type: String as PropType<NetworkOrigin>,
     default: "L2",
   },
+  isTokenAddress: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
 });
 
 const { currentNetwork } = useContext();
diff --git a/packages/app/src/components/Token.vue b/packages/app/src/components/Token.vue
new file mode 100644
index 0000000000..6d7456e4d2
--- /dev/null
+++ b/packages/app/src/components/Token.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="head-block">
+    <Breadcrumbs :items="breadcrumbItems" />
+    <SearchForm class="search-form" />
+  </div>
+  <div class="flex gap-2 items-center justify-start">
+    <div class="token-icon-container">
+      <img
+        v-if="contract?.address && !pending && tokenInfo"
+        class="token-img"
+        :src="tokenInfo.iconURL ?? undefined"
+        :alt="tokenInfo.symbol || t('balances.table.unknownSymbol')"
+      />
+    </div>
+
+    <Title
+      v-if="contract?.address && !pending"
+      :title="
+        tokenInfo?.name && tokenInfo?.symbol
+          ? `${tokenInfo?.name} (${tokenInfo?.symbol})`
+          : contractName ?? t('contract.title')
+      "
+      :value="contractName ? undefined : contract?.address"
+      :is-verified="contract?.verificationInfo != null"
+      :is-evm-like="contract?.isEvmLike"
+    />
+    <Spinner v-else size="md" />
+  </div>
+  <div class="tables-container">
+    <div class="contract-tables-container">
+      <div>
+        <ContractInfoTable class="contract-info-table" :loading="pending" :contract="contract!" />
+      </div>
+      <div>
+        <BalanceTable class="balance-table" :loading="pending" :balances="contract?.balances">
+          <template #not-found>
+            <EmptyState>
+              <template #image>
+                <div class="balances-empty-icon">
+                  <img src="/images/empty-state/empty_balance.svg" alt="empty_balance" />
+                </div>
+              </template>
+              <template #title>
+                {{ t("contract.balances.notFound.title") }}
+              </template>
+              <template #description>
+                <div class="balances-empty-description">{{ t("contract.balances.notFound.subtitle") }}</div>
+              </template>
+            </EmptyState>
+          </template>
+          <template #failed>
+            <EmptyState>
+              <template #image>
+                <div class="balances-empty-icon">
+                  <img src="/images/empty-state/error_balance.svg" alt="empty_balance" />
+                </div>
+              </template>
+              <template #title>
+                {{ t("contract.balances.error.title") }}
+              </template>
+              <template #description>
+                <div class="balances-empty-description">{{ t("contract.balances.error.subtitle") }}</div>
+              </template>
+            </EmptyState>
+          </template>
+        </BalanceTable>
+      </div>
+    </div>
+
+    <Tabs v-if="contract?.address && !pending" class="contract-tabs" :tabs="tabs">
+      <template #tab-1-content>
+        <TransactionsTable
+          class="transactions-table"
+          :search-params="transactionsSearchParams"
+          :contract-abi="contractABI"
+        >
+          <template #not-found>
+            <TransactionEmptyState />
+          </template>
+        </TransactionsTable>
+      </template>
+      <template #tab-2-content>
+        <TransfersTable :address="contract.address" />
+      </template>
+      <template #tab-3-content>
+        <ContractInfoTab :contract="contract" />
+      </template>
+      <template #tab-4-content>
+        <ContractEvents :contract="contract" />
+      </template>
+    </Tabs>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, type PropType, watchEffect } from "vue";
+import { useI18n } from "vue-i18n";
+
+import { CheckCircleIcon } from "@heroicons/vue/solid";
+
+import SearchForm from "@/components/SearchForm.vue";
+import BalanceTable from "@/components/balances/Table.vue";
+import Breadcrumbs from "@/components/common/Breadcrumbs.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import Spinner from "@/components/common/Spinner.vue";
+import Tabs from "@/components/common/Tabs.vue";
+import Title from "@/components/common/Title.vue";
+import ContractInfoTab from "@/components/contract/ContractInfoTab.vue";
+import ContractInfoTable from "@/components/contract/InfoTable.vue";
+import TransactionEmptyState from "@/components/contract/TransactionEmptyState.vue";
+import ContractEvents from "@/components/event/ContractEvents.vue";
+import TransactionsTable from "@/components/transactions/Table.vue";
+import TransfersTable from "@/components/transfers/Table.vue";
+
+import useToken from "@/composables/useToken";
+
+import type { BreadcrumbItem } from "@/components/common/Breadcrumbs.vue";
+import type { Contract } from "@/composables/useAddress";
+
+import { shortValue } from "@/utils/formatters";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  contract: {
+    type: [Object, null] as PropType<Contract | null>,
+    required: true,
+    default: null,
+  },
+  pending: {
+    type: Boolean,
+    default: false,
+  },
+  failed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { getTokenInfo, tokenInfo } = useToken();
+
+watchEffect(() => {
+  if (props.contract) {
+    getTokenInfo(props.contract.address);
+  }
+});
+
+const tabs = computed(() => [
+  { title: t("tabs.transactions"), hash: "#transactions" },
+  { title: t("tabs.transfers"), hash: "#transfers" },
+  {
+    title: t("tabs.contract"),
+    hash: "#contract",
+    icon: props.contract?.verificationInfo ? CheckCircleIcon : null,
+  },
+  { title: t("tabs.events"), hash: "#events" },
+]);
+const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
+  if (props.contract?.address) {
+    return [
+      { to: { name: "home" }, text: t("breadcrumbs.home") },
+      {
+        text: `${t("contract.contractNumber")}${shortValue(props.contract?.address)}`,
+      },
+    ];
+  }
+  return [];
+});
+
+const contractName = computed(() => props.contract?.verificationInfo?.request.contractName.replace(/.*\.sol:/, ""));
+const contractABI = computed(() => props.contract?.verificationInfo?.artifacts.abi);
+
+const transactionsSearchParams = computed(() => ({
+  address: props.contract?.address,
+}));
+</script>
+<style lang="scss" scoped>
+.head-block {
+  @apply mb-8 flex flex-col-reverse justify-between lg:mb-10 lg:flex-row;
+  h1 {
+    @apply mt-3;
+  }
+  .search-form {
+    @apply mb-6 w-full max-w-[26rem] lg:mb-0;
+  }
+}
+.tables-container {
+  @apply mt-8 grid grid-cols-1 gap-4;
+  .contract-tabs {
+    @apply shadow-md;
+  }
+  .contract-tables-container {
+    @apply grid grid-cols-1 gap-4 lg:grid-cols-2;
+  }
+  h2 {
+    @apply mb-4;
+  }
+  .contract-info-table {
+    @apply mb-8 overflow-hidden;
+  }
+  .transactions-table {
+    @apply shadow-none;
+    .table-body {
+      @apply rounded-none;
+    }
+  }
+  .balance-table {
+    @apply mb-4 overflow-hidden bg-white;
+    .balances-empty-icon {
+      @apply m-auto;
+      img {
+        @apply w-[2.875rem];
+      }
+    }
+    .balances-empty-description {
+      @apply max-w-[16rem] whitespace-normal;
+    }
+  }
+}
+.transaction-table-error {
+  @apply text-2xl text-error-700;
+}
+
+.token-icon-container {
+  @apply relative overflow-hidden rounded-full h-8 w-8;
+
+  .token-img-loader,
+  .token-img {
+    @apply absolute inset-0 h-full w-full rounded-full;
+  }
+  .token-img-loader {
+    @apply animate-pulse bg-neutral-200;
+  }
+  .token-img {
+    @apply transition-opacity duration-150;
+  }
+}
+</style>
+
+<style lang="scss">
+.contract-tabs {
+  .tab-head {
+    @apply overflow-auto;
+  }
+  .transactions-table {
+    .table-body {
+      @apply rounded-t-none;
+    }
+    table thead tr th {
+      @apply first:rounded-none last:rounded-none;
+    }
+  }
+}
+</style>
diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue
index 39675f1fd0..caf44ee877 100644
--- a/packages/app/src/components/TokenIconLabel.vue
+++ b/packages/app/src/components/TokenIconLabel.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="token-icon-label">
-    <AddressLink :address="address" class="token-link" :data-testid="$testId?.tokensIcon">
+    <AddressLink
+      :address="address"
+      class="token-link"
+      :data-testid="$testId?.tokensIcon"
+      :is-token-address="address.toLowerCase() === L2_BASE_TOKEN_ADDRESS ? false : true"
+    >
       <span v-if="showLinkSymbol" class="token-symbol">
         <span v-if="symbol">
           {{ symbol }}
@@ -32,6 +37,7 @@ import { computed, type PropType } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { useImage } from "@vueuse/core";
+import { L2_BASE_TOKEN_ADDRESS } from "zksync-ethers/build/utils";
 
 import AddressLink from "@/components/AddressLink.vue";
 
diff --git a/packages/app/src/components/token/TokenListTable.vue b/packages/app/src/components/token/TokenListTable.vue
index 7e2475aa04..3cb6020dc8 100644
--- a/packages/app/src/components/token/TokenListTable.vue
+++ b/packages/app/src/components/token/TokenListTable.vue
@@ -24,6 +24,7 @@
           <AddressLink
             :data-testid="$testId.tokenAddress"
             :address="item.l2Address"
+            :is-token-address="item.l2Address.toLowerCase() === L2_BASE_TOKEN_ADDRESS ? false : true"
             class="token-address block max-w-sm"
           >
             {{ shortenFitText(item.l2Address, "left", 210, subtraction) }}
@@ -66,6 +67,7 @@ import { type PropType, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { useElementSize } from "@vueuse/core";
+import { L2_BASE_TOKEN_ADDRESS } from "zksync-ethers/build/utils";
 
 import AddressLink from "@/components/AddressLink.vue";
 import TokenIconLabel from "@/components/TokenIconLabel.vue";
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 70faef1b62..a0291def12 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -321,6 +321,9 @@
     "addressView": {
         "title": "Address"
     },
+    "tokenView": {
+        "title": "Token"
+    },
     "contract": {
         "title": "Contract",
         "contractNumber": "Contract ",
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index ae5ed3089c..7de2d49cb5 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -386,6 +386,9 @@
     "addressView": {
         "title": "Адреса"
     },
+    "tokenView": {
+        "title": "Токен"
+    },
     "accountView": {
         "title": "Профіль",
         "infoTableError": "Виникла помилка",
diff --git a/packages/app/src/router/routes.ts b/packages/app/src/router/routes.ts
index baf36d3a28..c6c633fbee 100644
--- a/packages/app/src/router/routes.ts
+++ b/packages/app/src/router/routes.ts
@@ -58,6 +58,15 @@ export default [
       title: "addressView.title",
     },
   },
+  {
+    path: "/token/:address",
+    name: "token",
+    component: () => import("@/views/TokenView.vue"),
+    props: true,
+    meta: {
+      title: "tokenView.title",
+    },
+  },
   {
     path: "/contracts/verify",
     name: "contract-verification",
diff --git a/packages/app/src/views/TokenView.vue b/packages/app/src/views/TokenView.vue
new file mode 100644
index 0000000000..373470db42
--- /dev/null
+++ b/packages/app/src/views/TokenView.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="account-error" v-if="failed && !pending">
+    <PageError />
+  </div>
+  <template v-else-if="props.address && isAddress(props.address)">
+    <AccountView v-if="pageType === 'account'" :account="(item as Account)" :pending="pending" :failed="failed" />
+    <TokenView v-else :contract="(item as Contract)" :pending="pending" :failed="failed" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { computed, watchEffect } from "vue";
+
+import AccountView from "@/components/Account.vue";
+import PageError from "@/components/PageError.vue";
+import TokenView from "@/components/Token.vue";
+
+import useAddress, { type Account, type Contract } from "@/composables/useAddress";
+import useNotFound from "@/composables/useNotFound";
+
+import { isAddress } from "@/utils/validators";
+
+const { useNotFoundView, setNotFoundView } = useNotFound();
+
+const { item, isRequestPending: pending, isRequestFailed: failed, getByAddress } = useAddress();
+
+const props = defineProps({
+  address: {
+    type: String,
+    required: true,
+  },
+});
+
+const pageType = computed(() => {
+  return item.value?.type ? item.value?.type : "account";
+});
+
+useNotFoundView(pending, failed, item);
+
+watchEffect(() => {
+  if (!props.address || !isAddress(props.address)) {
+    return setNotFoundView();
+  }
+  getByAddress(props.address);
+});
+</script>
+
+<style lang="scss" scoped>
+.account-error {
+  @apply mt-24 flex justify-center;
+}
+</style>
diff --git a/packages/app/tests/components/Token.spec.ts b/packages/app/tests/components/Token.spec.ts
new file mode 100644
index 0000000000..5591c50d67
--- /dev/null
+++ b/packages/app/tests/components/Token.spec.ts
@@ -0,0 +1,58 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { render } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import Token from "@/components/Token.vue";
+
+import enUS from "@/locales/en.json";
+
+import $testId from "@/plugins/testId";
+
+const router = {
+  replace: vi.fn(),
+  currentRoute: {
+    value: {},
+  },
+};
+const routeQueryMock = vi.fn(() => ({}));
+
+vi.mock("vue-router", () => ({
+  useRouter: () => router,
+  useRoute: () => ({
+    query: routeQueryMock(),
+  }),
+}));
+
+describe("Account:", () => {
+  const i18n = createI18n({
+    locale: "en",
+    allowComposition: true,
+    messages: {
+      en: enUS,
+    },
+  });
+  it("renders component", () => {
+    const { container } = render(Token, {
+      props: {
+        account: {
+          accountType: "eOA",
+          address: "0xDB754A7833163caAB170814c5F9cAf32F09FDEd4",
+          balances: {},
+          sealedNonce: 0,
+          verifiedNonce: 0,
+        },
+      },
+      global: {
+        plugins: [i18n, $testId],
+        stubs: { RouterLink: RouterLinkStub, TransfersTable: { template: "<div />" } },
+      },
+    });
+    expect(container.querySelector(".breadcrumb-item-active")?.textContent).toBe("Account 0xDB75...DEd4");
+    expect(container.querySelector(".contract-info-table")).toBeDefined();
+    expect(container.querySelector(".balance-table")).toBeDefined();
+    expect(container.querySelector(".transactions-table")).toBeDefined();
+  });
+});

From 78537ce9615c82e707795d38932b2c8ffda5d7ff Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Mon, 27 Jan 2025 14:54:06 +0100
Subject: [PATCH 02/10] feat: add holders page

---
 .../api/src/balance/balance.service.spec.ts   |  82 +++++++++
 packages/api/src/balance/balance.service.ts   |  40 +++++
 .../api/src/balance/balanceForHolder.dto.ts   |  13 ++
 .../api/src/token/token.controller.spec.ts    |  31 ++++
 packages/api/src/token/token.controller.ts    |  35 +++-
 packages/api/src/token/token.module.ts        |   3 +-
 packages/app/src/components/Contract.vue      |  26 +++
 .../src/components/token/TokenHoldersList.vue | 155 ++++++++++++++++++
 .../token/TokenHoldersListEmptyState.vue      |  26 +++
 packages/app/src/composables/common/Api.d.ts  |   5 +
 .../app/src/composables/useTokenHolders.ts    |  10 ++
 packages/app/src/locales/en.json              |  12 +-
 packages/app/src/locales/uk.json              |  14 +-
 .../components/token/TokenHoldersList.spec.ts |  97 +++++++++++
 .../tests/composables/useTokenHolders.spec.ts | 104 ++++++++++++
 packages/app/tests/e2e/testId.json            |   7 +-
 packages/app/tests/mocks.ts                   |  15 ++
 17 files changed, 670 insertions(+), 5 deletions(-)
 create mode 100644 packages/api/src/balance/balanceForHolder.dto.ts
 create mode 100644 packages/app/src/components/token/TokenHoldersList.vue
 create mode 100644 packages/app/src/components/token/TokenHoldersListEmptyState.vue
 create mode 100644 packages/app/src/composables/useTokenHolders.ts
 create mode 100644 packages/app/tests/components/token/TokenHoldersList.spec.ts
 create mode 100644 packages/app/tests/composables/useTokenHolders.spec.ts

diff --git a/packages/api/src/balance/balance.service.spec.ts b/packages/api/src/balance/balance.service.spec.ts
index 6cbb72cee3..2a021d35b6 100644
--- a/packages/api/src/balance/balance.service.spec.ts
+++ b/packages/api/src/balance/balance.service.spec.ts
@@ -5,6 +5,8 @@ import { Repository, SelectQueryBuilder } from "typeorm";
 import { BalanceService } from "./balance.service";
 import { Balance } from "./balance.entity";
 import { hexTransformer } from "../common/transformers/hex.transformer";
+import * as utils from "../common/utils";
+jest.mock("../common/utils");
 
 describe("BalanceService", () => {
   let service: BalanceService;
@@ -299,4 +301,84 @@ describe("BalanceService", () => {
       expect(result).toEqual([]);
     });
   });
+
+  describe("getBalancesForTokenAddress", () => {
+    const subQuerySql = "subQuerySql";
+    const tokenAddress = "0x91d0a23f34e535e44df8ba84c53a0945cf0eeb69";
+    let subQueryBuilderMock;
+    let mainQueryBuilderMock;
+    const pagingOptions = {
+      limit: 10,
+      page: 2,
+    };
+    beforeEach(() => {
+      subQueryBuilderMock = mock<SelectQueryBuilder<Balance>>({
+        getQuery: jest.fn().mockReturnValue(subQuerySql),
+      });
+      mainQueryBuilderMock = mock<SelectQueryBuilder<Balance>>();
+      (utils.paginate as jest.Mock).mockResolvedValue({
+        items: [],
+      });
+      (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(subQueryBuilderMock);
+      (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(mainQueryBuilderMock);
+    });
+
+    it("creates sub query builder with proper params", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("latest_balances");
+    });
+
+    it("selects required fields in the sub query", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(subQueryBuilderMock.select).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.select).toHaveBeenCalledWith(`"tokenAddress"`);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledTimes(2);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledWith(`"address"`);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledWith(`MAX("blockNumber")`, "blockNumber");
+    });
+
+    it("filters balances in the sub query", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(subQueryBuilderMock.where).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.where).toHaveBeenCalledWith(`"tokenAddress" = :tokenAddress`);
+    });
+
+    it("groups by address and tokenAddress in the sub query", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(subQueryBuilderMock.groupBy).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.groupBy).toHaveBeenCalledWith(`"tokenAddress"`);
+      expect(subQueryBuilderMock.addGroupBy).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.addGroupBy).toHaveBeenCalledWith(`"address"`);
+    });
+
+    it("creates main query builder with proper params", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("balances");
+    });
+
+    it("joins main query with the sub query", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(mainQueryBuilderMock.innerJoin).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.innerJoin).toHaveBeenCalledWith(
+        `(${subQuerySql})`,
+        "latest_balances",
+        `balances."tokenAddress" = latest_balances."tokenAddress" AND
+      balances."address" = latest_balances."address" AND
+      balances."blockNumber" = latest_balances."blockNumber"`
+      );
+    });
+
+    it("sets query tokenAddress and addresses params", async () => {
+      await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledWith("tokenAddress", hexTransformer.to(tokenAddress));
+    });
+
+    it("returns pagination results", async () => {
+      const result = await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(result).toEqual({
+        items: [],
+      });
+    });
+  });
 });
diff --git a/packages/api/src/balance/balance.service.ts b/packages/api/src/balance/balance.service.ts
index e70626bd5b..753b2e0ab5 100644
--- a/packages/api/src/balance/balance.service.ts
+++ b/packages/api/src/balance/balance.service.ts
@@ -4,6 +4,9 @@ import { Repository } from "typeorm";
 import { Balance } from "./balance.entity";
 import { Token } from "../token/token.entity";
 import { hexTransformer } from "../common/transformers/hex.transformer";
+import { BalanceForHolderDto } from "./balanceForHolder.dto";
+import { paginate } from "../common/utils";
+import { IPaginationOptions, Pagination } from "nestjs-typeorm-paginate";
 
 export interface TokenBalance {
   balance: string;
@@ -99,4 +102,41 @@ export class BalanceService {
     const balancesRecords = await balancesQuery.getMany();
     return balancesRecords;
   }
+
+  public async getBalancesForTokenAddress(
+    tokenAddress: string,
+    paginationOptions?: IPaginationOptions
+  ): Promise<Pagination<BalanceForHolderDto>> {
+    const latestBalancesQuery = this.balanceRepository.createQueryBuilder("latest_balances");
+    latestBalancesQuery.select(`"tokenAddress"`);
+    latestBalancesQuery.addSelect(`"address"`);
+    latestBalancesQuery.addSelect(`MAX("blockNumber")`, "blockNumber");
+    latestBalancesQuery.where(`"tokenAddress" = :tokenAddress`);
+    latestBalancesQuery.groupBy(`"tokenAddress"`);
+    latestBalancesQuery.addGroupBy(`"address"`);
+
+    const balancesQuery = this.balanceRepository.createQueryBuilder("balances");
+    balancesQuery.innerJoin(
+      `(${latestBalancesQuery.getQuery()})`,
+      "latest_balances",
+      `balances."tokenAddress" = latest_balances."tokenAddress" AND
+      balances."address" = latest_balances."address" AND
+      balances."blockNumber" = latest_balances."blockNumber"`
+    );
+    balancesQuery.setParameter("tokenAddress", hexTransformer.to(tokenAddress));
+    balancesQuery.leftJoinAndSelect("balances.token", "token");
+    balancesQuery.orderBy(`CAST(balances.balance AS NUMERIC)`, "DESC");
+
+    const balancesForToken = await paginate<Balance>(balancesQuery, paginationOptions);
+
+    return {
+      ...balancesForToken,
+      items: balancesForToken.items.map((item) => {
+        return {
+          balance: item.balance,
+          address: item.address,
+        };
+      }),
+    };
+  }
 }
diff --git a/packages/api/src/balance/balanceForHolder.dto.ts b/packages/api/src/balance/balanceForHolder.dto.ts
new file mode 100644
index 0000000000..0868123c91
--- /dev/null
+++ b/packages/api/src/balance/balanceForHolder.dto.ts
@@ -0,0 +1,13 @@
+import { ApiProperty } from "@nestjs/swagger";
+
+export class BalanceForHolderDto {
+  @ApiProperty({ type: String, description: "Token balance", example: "0xd754F" })
+  public readonly balance: string;
+
+  @ApiProperty({
+    type: String,
+    description: "Holder address",
+    example: "0x868e3b4391ff95C1cd99C6F9B5332b4EC2b8A63A",
+  })
+  public readonly address: string;
+}
diff --git a/packages/api/src/token/token.controller.spec.ts b/packages/api/src/token/token.controller.spec.ts
index 2b6cfe890f..f04eaa43e0 100644
--- a/packages/api/src/token/token.controller.spec.ts
+++ b/packages/api/src/token/token.controller.spec.ts
@@ -8,6 +8,8 @@ import { TransferService } from "../transfer/transfer.service";
 import { Token } from "./token.entity";
 import { Transfer } from "../transfer/transfer.entity";
 import { PagingOptionsDto, PagingOptionsWithMaxItemsLimitDto } from "../common/dtos";
+import { BalanceForHolderDto } from "../balance/balanceForHolder.dto";
+import { BalanceService } from "../balance/balance.service";
 
 describe("TokenController", () => {
   const tokenAddress = "tokenAddress";
@@ -16,11 +18,13 @@ describe("TokenController", () => {
   let controller: TokenController;
   let serviceMock: TokenService;
   let transferServiceMock: TransferService;
+  let balanceServiceMock: BalanceService;
   let token;
 
   beforeEach(async () => {
     serviceMock = mock<TokenService>();
     transferServiceMock = mock<TransferService>();
+    balanceServiceMock = mock<BalanceService>();
 
     token = {
       l2Address: "tokenAddress",
@@ -37,6 +41,10 @@ describe("TokenController", () => {
           provide: TransferService,
           useValue: transferServiceMock,
         },
+        {
+          provide: BalanceService,
+          useValue: balanceServiceMock,
+        },
       ],
     }).compile();
 
@@ -144,4 +152,27 @@ describe("TokenController", () => {
       });
     });
   });
+  describe("getTokenHolders", () => {
+    const tokenHolders = mock<Pagination<BalanceForHolderDto>>();
+    describe("when token exists", () => {
+      beforeEach(() => {
+        (serviceMock.exists as jest.Mock).mockResolvedValueOnce(true);
+        (balanceServiceMock.getBalancesForTokenAddress as jest.Mock).mockResolvedValueOnce(tokenHolders);
+      });
+
+      it("queries transfers with the specified options", async () => {
+        await controller.getTokenHolders(tokenAddress, pagingOptionsWithLimit);
+        expect(balanceServiceMock.getBalancesForTokenAddress).toHaveBeenCalledTimes(1);
+        expect(balanceServiceMock.getBalancesForTokenAddress).toHaveBeenCalledWith(tokenAddress, {
+          ...pagingOptionsWithLimit,
+          route: `tokens/${tokenAddress}/holders`,
+        });
+      });
+
+      it("returns token transfers", async () => {
+        const result = await controller.getTokenHolders(tokenAddress, pagingOptionsWithLimit);
+        expect(result).toBe(tokenHolders);
+      });
+    });
+  });
 });
diff --git a/packages/api/src/token/token.controller.ts b/packages/api/src/token/token.controller.ts
index 7232eed00c..cbd0463fd3 100644
--- a/packages/api/src/token/token.controller.ts
+++ b/packages/api/src/token/token.controller.ts
@@ -19,6 +19,8 @@ import { ParseLimitedIntPipe } from "../common/pipes/parseLimitedInt.pipe";
 import { ParseAddressPipe, ADDRESS_REGEX_PATTERN } from "../common/pipes/parseAddress.pipe";
 import { swagger } from "../config/featureFlags";
 import { constants } from "../config/docs";
+import { BalanceService } from "../balance/balance.service";
+import { BalanceForHolderDto } from "../balance/balanceForHolder.dto";
 
 const entityName = "tokens";
 
@@ -26,7 +28,11 @@ const entityName = "tokens";
 @ApiExcludeController(!swagger.bffEnabled)
 @Controller(entityName)
 export class TokenController {
-  constructor(private readonly tokenService: TokenService, private readonly transferService: TransferService) {}
+  constructor(
+    private readonly tokenService: TokenService,
+    private readonly transferService: TransferService,
+    private readonly balanceService: BalanceService
+  ) {}
 
   @Get("")
   @ApiListPageOkResponse(TokenDto, { description: "Successfully returned token list" })
@@ -105,4 +111,31 @@ export class TokenController {
       }
     );
   }
+
+  @Get(":tokenAddress/holders")
+  @ApiParam({
+    name: "tokenAddress",
+    type: String,
+    schema: { pattern: ADDRESS_REGEX_PATTERN },
+    example: constants.tokenAddress,
+    description: "Valid hex token address",
+  })
+  @ApiListPageOkResponse(BalanceForHolderDto, { description: "Successfully returned balance for holder list" })
+  @ApiBadRequestResponse({
+    description: "Token address is invalid or paging query params are not valid or out of range",
+  })
+  @ApiNotFoundResponse({ description: "Token with the specified address does not exist" })
+  public async getTokenHolders(
+    @Param("tokenAddress", new ParseAddressPipe()) tokenAddress: string,
+    @Query() pagingOptions: PagingOptionsWithMaxItemsLimitDto
+  ): Promise<Pagination<BalanceForHolderDto>> {
+    if (!(await this.tokenService.exists(tokenAddress))) {
+      throw new NotFoundException();
+    }
+
+    return await this.balanceService.getBalancesForTokenAddress(tokenAddress, {
+      ...pagingOptions,
+      route: `${entityName}/${tokenAddress}/holders`,
+    });
+  }
 }
diff --git a/packages/api/src/token/token.module.ts b/packages/api/src/token/token.module.ts
index 43799ffab0..e80cba34c3 100644
--- a/packages/api/src/token/token.module.ts
+++ b/packages/api/src/token/token.module.ts
@@ -6,8 +6,9 @@ import { Token } from "./token.entity";
 import { Block } from "../block/block.entity";
 import { Transaction } from "../transaction/entities/transaction.entity";
 import { TransferModule } from "../transfer/transfer.module";
+import { BalanceModule } from "src/balance/balance.module";
 @Module({
-  imports: [TypeOrmModule.forFeature([Token, Block, Transaction]), TransferModule],
+  imports: [TypeOrmModule.forFeature([Token, Block, Transaction]), TransferModule, BalanceModule],
   controllers: [TokenController],
   providers: [TokenService],
   exports: [TokenService],
diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
index d60707f66b..2f15fa9353 100644
--- a/packages/app/src/components/Contract.vue
+++ b/packages/app/src/components/Contract.vue
@@ -73,11 +73,19 @@
       <template #tab-4-content>
         <ContractEvents :contract="contract" />
       </template>
+      <template v-if="tokenInfo" #tab-5-content>
+        <TokenHoldersList :tokenInfo="tokenInfo">
+          <template #not-found>
+            <TokenHoldersListEmptyState />
+          </template>
+        </TokenHoldersList>
+      </template>
     </Tabs>
   </div>
 </template>
 <script lang="ts" setup>
 import { computed, type PropType } from "vue";
+import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { CheckCircleIcon } from "@heroicons/vue/solid";
@@ -93,9 +101,13 @@ import ContractInfoTab from "@/components/contract/ContractInfoTab.vue";
 import ContractInfoTable from "@/components/contract/InfoTable.vue";
 import TransactionEmptyState from "@/components/contract/TransactionEmptyState.vue";
 import ContractEvents from "@/components/event/ContractEvents.vue";
+import TokenHoldersList from "@/components/token/TokenHoldersList.vue";
+import TokenHoldersListEmptyState from "@/components/token/TokenHoldersListEmptyState.vue";
 import TransactionsTable from "@/components/transactions/Table.vue";
 import TransfersTable from "@/components/transfers/Table.vue";
 
+import useToken from "@/composables/useToken";
+
 import type { BreadcrumbItem } from "@/components/common/Breadcrumbs.vue";
 import type { Contract } from "@/composables/useAddress";
 
@@ -128,7 +140,9 @@ const tabs = computed(() => [
     icon: props.contract?.verificationInfo ? CheckCircleIcon : null,
   },
   { title: t("tabs.events"), hash: "#events" },
+  ...(tokenInfo?.value?.l2Address ? [{ title: t("tabs.holders"), hash: "#holders" }] : []),
 ]);
+
 const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
   if (props.contract?.address) {
     return [
@@ -141,6 +155,18 @@ const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
   return [];
 });
 
+const { getTokenInfo, tokenInfo, isRequestPending: isLoadingTokenInfo } = useToken();
+getTokenInfo(props.contract?.address);
+
+watch(
+  () => props.contract,
+  (newContract) => {
+    if (newContract) {
+      getTokenInfo(newContract.address);
+    }
+  }
+);
+
 const contractName = computed(() => props.contract?.verificationInfo?.request.contractName.replace(/.*\.sol:/, ""));
 const contractABI = computed(() => props.contract?.verificationInfo?.artifacts.abi);
 
diff --git a/packages/app/src/components/token/TokenHoldersList.vue b/packages/app/src/components/token/TokenHoldersList.vue
new file mode 100644
index 0000000000..1b15ec7bfd
--- /dev/null
+++ b/packages/app/src/components/token/TokenHoldersList.vue
@@ -0,0 +1,155 @@
+<template>
+  <Table :data-testid="$testId.tokensHoldersTable" :loading="isLoading" :items="tokenHolders" ref="table">
+    <template v-if="tokenHolders?.length || isLoading" #table-head>
+      <table-head-column>{{ t("tokenHolders.table.address") }}</table-head-column>
+      <table-head-column>{{ t("tokenHolders.table.balance") }}</table-head-column>
+      <table-head-column>{{ t("tokenHolders.table.percentage") }}</table-head-column>
+      <table-head-column>{{ t("tokenHolders.table.value") }}</table-head-column>
+    </template>
+    <template #table-row="{ item }: { item: any }">
+      <TableBodyColumn :data-heading="t('tokenHolders.table.address')">
+        <AddressLink :address="item.address" class="block max-w-sm" :data-testid="$testId.tokenHoldersAddress">
+          {{ shortenFitText(item.address, "left", 210, subtraction) }}
+        </AddressLink>
+        <CopyButton :value="item.address" />
+      </TableBodyColumn>
+      <TableBodyColumn :data-heading="t('tokenHolders.table.balance')">
+        <div :data-testid="$testId.tokenHoldersBalance" class="balance-data-value">
+          {{ formatValue(item.balance, tokenInfo.decimals) }}
+        </div>
+      </TableBodyColumn>
+      <TableBodyColumn :data-testid="$testId.tokenHoldersPercentage" :data-heading="t('tokenHolders.table.percentage')">
+        {{ item.percentage }}
+      </TableBodyColumn>
+      <TableBodyColumn :data-heading="t('tokenHolders.table.value')">
+        <div class="balance-data-price">
+          <div :data-testid="$testId.tokenHoldersValue">
+            {{
+              tokenInfo.usdPrice && item.balance
+                ? formatPricePretty(item.balance, tokenInfo.decimals, tokenInfo.usdPrice.toString())
+                : ""
+            }}
+          </div>
+        </div>
+      </TableBodyColumn>
+    </template>
+    <template v-if="pagination && total && total > pageSize && tokenHolders?.length" #footer>
+      <Pagination
+        v-model:active-page="activePage"
+        :use-query="useQueryPagination"
+        :total-items="total!"
+        :page-size="pageSize"
+        :disabled="isLoading"
+      />
+    </template>
+    <template #loading>
+      <tr class="loading-row" v-for="row in 4" :key="row">
+        <TableBodyColumn class="w-16">
+          <ContentLoader />
+        </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+      </tr>
+    </template>
+    <template #empty>
+      <TableBodyColumn class="holders-not-found">
+        <slot name="not-found">{{ t("transactions.table.notFound") }}</slot>
+      </TableBodyColumn>
+    </template>
+  </Table>
+</template>
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+
+import AddressLink from "@/components/AddressLink.vue";
+import CopyButton from "@/components/common/CopyButton.vue";
+import { shortenFitText } from "@/components/common/HashLabel.vue";
+import Pagination from "@/components/common/Pagination.vue";
+import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
+import Table from "@/components/common/table/Table.vue";
+import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
+import TableHeadColumn from "@/components/common/table/TableHeadColumn.vue";
+
+import useTokenHolders from "@/composables/useTokenHolders";
+
+import type { Token } from "@/composables/useToken";
+import type { TokenHolder } from "@/composables/useTokenHolders";
+import type { PropType } from "vue";
+
+import { formatPricePretty, formatValue } from "@/utils/formatters";
+
+const props = defineProps({
+  tokenInfo: {
+    type: Object as PropType<Token>,
+    required: true,
+  },
+  pagination: {
+    type: Boolean,
+    default: true,
+  },
+  useQueryPagination: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const { data, load, total, pending, pageSize } = useTokenHolders(props.tokenInfo.l2Address);
+const activePage = ref(props.useQueryPagination ? parseInt(route.query.page as string) || 1 : 1);
+const isLoading = computed(() => pending.value);
+const { t } = useI18n();
+const table = ref(null);
+const subtraction = ref(6);
+
+watch(
+  [activePage, () => route.query.pageSize],
+  ([page, pageSize]) => {
+    const currentPageSize = pageSize ? parseInt(pageSize as string) : 10;
+    load(page, undefined, currentPageSize);
+  },
+  { immediate: true }
+);
+
+const tokenHolders = computed<TokenHolder[] | undefined>(() => {
+  return data.value?.map((holder) => {
+    return {
+      ...holder,
+      percentage: props.tokenInfo.liquidity
+        ? `${(parseFloat(holder.balance) / (props.tokenInfo.liquidity / 100)).toFixed(4)} %`
+        : "",
+    };
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.table-body-col {
+  @apply relative flex flex-col items-end justify-end text-right md:table-cell md:w-1/3 md:text-left;
+  &:before {
+    @apply absolute left-4 top-3 whitespace-nowrap pr-5 text-left text-xs uppercase text-neutral-400 content-[attr(data-heading)] md:content-none;
+  }
+  .holder-address-container {
+    @apply flex gap-x-2;
+    .holder-address {
+      @apply block cursor-pointer font-mono text-sm font-medium;
+    }
+  }
+  .loading-row {
+    .content-loader {
+      @apply w-full;
+    }
+  }
+  .holders-not-found {
+    @apply my-0 table-cell items-start justify-start bg-white p-4 text-left text-gray-700;
+  }
+}
+</style>
diff --git a/packages/app/src/components/token/TokenHoldersListEmptyState.vue b/packages/app/src/components/token/TokenHoldersListEmptyState.vue
new file mode 100644
index 0000000000..2799f26550
--- /dev/null
+++ b/packages/app/src/components/token/TokenHoldersListEmptyState.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="holders-empty-state">
+    <EmptyState>
+      <template #title>
+        {{ t("tokenHolders.notFound") }}
+      </template>
+    </EmptyState>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+import EmptyState from "@/components/common/EmptyState.vue";
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+.holders-empty-state {
+  @apply flex py-16 lg:justify-center lg:py-28;
+  .holders-empty-description {
+    @apply max-w-[23rem] whitespace-normal;
+  }
+}
+</style>
diff --git a/packages/app/src/composables/common/Api.d.ts b/packages/app/src/composables/common/Api.d.ts
index f328127b4f..832955a559 100644
--- a/packages/app/src/composables/common/Api.d.ts
+++ b/packages/app/src/composables/common/Api.d.ts
@@ -139,5 +139,10 @@ declare namespace Api {
       totalTransactions: number;
       isEvmLike: boolean;
     };
+
+    type TokenHolder = {
+      address: string;
+      balance: string;
+    };
   }
 }
diff --git a/packages/app/src/composables/useTokenHolders.ts b/packages/app/src/composables/useTokenHolders.ts
new file mode 100644
index 0000000000..c7067aea6f
--- /dev/null
+++ b/packages/app/src/composables/useTokenHolders.ts
@@ -0,0 +1,10 @@
+import useFetchCollection from "./common/useFetchCollection";
+import useContext from "./useContext";
+
+export type TokenHolder = Api.Response.TokenHolder;
+
+export default (tokenAddress: string, context = useContext()) => {
+  return useFetchCollection<Api.Response.TokenHolder>(
+    new URL(`/tokens/${tokenAddress}/holders`, context.currentNetwork.value.apiUrl)
+  );
+};
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 70faef1b62..1261641a09 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -598,6 +598,15 @@
             "tokenAddress": "Token Address"
         }
     },
+    "tokenHolders": {
+        "notFound": "Token doesn't have any holders at this moment",
+        "table": {
+            "address": "Address",
+            "balance": "Quantity",
+            "percentage": "Percentage",
+            "value": "Value"
+        }
+    },
     "pageError": {
         "title": "Something went wrong",
         "subtitle": "Unknown request, please try again, or go to the homepage.",
@@ -693,7 +702,8 @@
         "transactions": "Transactions",
         "contract": "Contract",
         "events": "Events",
-        "transfers": "Transfers"
+        "transfers": "Transfers",
+        "holders": "Holders"
     },
     "contractInfoTabs": {
         "contract": "Contract",
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index ae5ed3089c..54ac440a78 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -356,6 +356,15 @@
             "tokenAddress": "Адреса Токена"
         }
     },
+    "tokenHolders": {
+        "notFound": "Для даного токена токен-власники відсутні на цей момент",
+        "table": {
+            "address": "Адреса",
+            "balance": "Баланс",
+            "percentage": "Відсоток",
+            "value": "Вартість"
+        }
+    },
     "timeMessages": {
         "justNow": "щойно",
         "past": "тому",
@@ -431,7 +440,10 @@
     },
     "tabs": {
         "transactions": "Транзакції",
-        "contract": "Контракт"
+        "contract": "Контракт",
+        "events": "Події",
+        "transfers": "Трансфери",
+        "holders": "Власники"
     },
     "debuggerTool": {
         "title": "zkEVM Налагоджувач",
diff --git a/packages/app/tests/components/token/TokenHoldersList.spec.ts b/packages/app/tests/components/token/TokenHoldersList.spec.ts
new file mode 100644
index 0000000000..5131415268
--- /dev/null
+++ b/packages/app/tests/components/token/TokenHoldersList.spec.ts
@@ -0,0 +1,97 @@
+import { computed } from "vue";
+import { createI18n } from "vue-i18n";
+
+import { afterAll, beforeAll, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { render, type RenderResult } from "@testing-library/vue";
+import { RouterLinkStub } from "@vue/test-utils";
+
+import { useContextMock, useTokenHoldersMock } from "../../mocks";
+
+import TokenHolderList from "@/components/token/TokenHoldersList.vue";
+
+import enUS from "@/locales/en.json";
+import elements from "tests/e2e/testId.json";
+
+import $testId from "@/plugins/testId";
+
+const router = {
+  push: vi.fn(),
+};
+const routeQueryMock = vi.fn(() => ({}));
+vi.mock("vue-router", () => ({
+  useRouter: () => router,
+  useRoute: () => ({
+    query: routeQueryMock(),
+  }),
+}));
+
+describe("TokenListTable:", () => {
+  const i18n = createI18n({
+    locale: "en",
+    allowComposition: true,
+    messages: {
+      en: enUS,
+    },
+  });
+
+  let renderResult: RenderResult | null;
+  let mockContext: SpyInstance;
+  let mockHolders: SpyInstance;
+
+  beforeAll(() => {
+    mockHolders = useTokenHoldersMock({
+      data: computed(() => [
+        {
+          address: "0xe1134444211593Cfda9fc9eCc7B43208615556E2",
+          balance: "5000000000000000000",
+        },
+      ]),
+    });
+    mockContext = useContextMock();
+
+    renderResult = render(TokenHolderList, {
+      global: {
+        plugins: [i18n, $testId],
+        stubs: { RouterLink: RouterLinkStub },
+      },
+      props: {
+        tokenInfo: {
+          decimals: 18,
+          iconURL: "https://icon.com",
+          l1Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+          l2Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+          liquidity: 22000000000000000000000,
+          name: "Ether",
+          symbol: "ETH",
+          usdPrice: 150,
+        },
+        loading: false,
+        useQueryPagination: false,
+        notFound: false,
+      },
+    });
+  });
+
+  afterAll(() => {
+    mockContext?.mockRestore();
+    mockHolders?.mockRestore();
+    renderResult?.unmount();
+  });
+
+  it("renders transaction hash column", () => {
+    expect(renderResult!.getByTestId(elements.tokenHoldersAddress).textContent).toEqual("0xe11344442115...56E2");
+  });
+
+  it("renders timestamp column", () => {
+    expect(renderResult!.getByTestId(elements.tokenHoldersBalance).textContent).toEqual("5.0");
+  });
+
+  it("renders type column", () => {
+    expect(renderResult!.getByTestId(elements.tokenHoldersPercentage).textContent).toEqual("0.0227 %");
+  });
+
+  it("renders from column", () => {
+    expect(renderResult!.getByTestId(elements.tokenHoldersValue).textContent).toEqual("$750.00");
+  });
+});
diff --git a/packages/app/tests/composables/useTokenHolders.spec.ts b/packages/app/tests/composables/useTokenHolders.spec.ts
new file mode 100644
index 0000000000..8a87ce935b
--- /dev/null
+++ b/packages/app/tests/composables/useTokenHolders.spec.ts
@@ -0,0 +1,104 @@
+import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
+
+import { $fetch } from "ohmyfetch";
+
+import { useContextMock } from "../mocks";
+
+import useTokenHolders from "@/composables/useTokenHolders";
+
+vi.mock("ohmyfetch", () => {
+  return {
+    $fetch: vi.fn(() =>
+      Promise.resolve({
+        items: [
+          {
+            address: "0xe1134444211593Cfda9fc9eCc7B43208615556E2",
+            balance: "5000000000000000000",
+          },
+        ],
+        meta: {
+          totalItems: 1,
+          page: 1,
+          pageSize: 10,
+          totalPages: 1,
+          itemCount: 1,
+        },
+      })
+    ),
+  };
+});
+const tokenAddress = "0x0faF6df7054946141266420b43783387A78d82A9";
+
+describe("useTokenHolders:", () => {
+  let mockContext: SpyInstance;
+
+  beforeEach(() => {
+    mockContext = useContextMock();
+  });
+
+  afterEach(() => {
+    mockContext?.mockRestore();
+  });
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  it("creates useTokenHolders composable", () => {
+    const composable = useTokenHolders(tokenAddress);
+    expect(composable.pending).toBeDefined();
+    expect(composable.failed).toBeDefined();
+    expect(composable.load).toBeDefined();
+    expect(composable.data).toBeDefined();
+  });
+
+  it("gets token holders from API", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    await composable.load(1);
+    const batch = (composable.data.value || [])[0];
+
+    expect(composable.data.value?.length).toBe(1);
+    expect(batch).toEqual({
+      address: "0xe1134444211593Cfda9fc9eCc7B43208615556E2",
+      balance: "5000000000000000000",
+    });
+  });
+
+  it("sets pending to true when request pending", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    const promise = composable.load(1);
+
+    expect(composable.pending.value).toEqual(true);
+    await promise;
+  });
+
+  it("sets pending to false when request completed", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    await composable.load(1);
+
+    expect(composable.pending.value).toEqual(false);
+  });
+
+  it("sets failed to false when request completed", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    await composable.load(1);
+
+    expect(composable.failed.value).toEqual(false);
+  });
+
+  it("sets failed to true when request failed", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    const mock = ($fetch as any).mockRejectedValue(new Error());
+
+    await composable.load(1);
+
+    expect(composable.failed.value).toEqual(true);
+    mock.mockRestore();
+  });
+
+  it("sets batches to null when request failed", async () => {
+    const composable = useTokenHolders(tokenAddress);
+    const mock = ($fetch as any).mockRejectedValue(new Error());
+
+    await composable.load(1);
+
+    expect(composable.data.value).toEqual(null);
+    mock.mockRestore();
+  });
+});
diff --git a/packages/app/tests/e2e/testId.json b/packages/app/tests/e2e/testId.json
index 23625394d9..849ac7254a 100644
--- a/packages/app/tests/e2e/testId.json
+++ b/packages/app/tests/e2e/testId.json
@@ -27,10 +27,15 @@
   "latestTransactionsTable": "latest-transaction-table",
   "latestBatchesTable": "latest-batches-table",
   "tokensTable": "tokens-table",
+  "tokensHoldersTable": "tokens-holders-table",
   "toAddress": "to-address",
   "transferType": "transfer-type",
   "transferFromOrigin": "transfer-from-origin",
   "transferToOrigin": "transfer-to-origin",
   "transferFromOriginTablet": "transfer-from-origin-tablet",
-  "transferToOriginTablet": "transfer-to-origin-tablet"
+  "transferToOriginTablet": "transfer-to-origin-tablet",
+  "tokenHoldersAddress": "token-holders-address",
+  "tokenHoldersBalance": "token-holders-balance",
+  "tokenHoldersPercentage": "token-holders-percentage",
+  "tokenHoldersValue": "token-holders-value"
 }
diff --git a/packages/app/tests/mocks.ts b/packages/app/tests/mocks.ts
index 38ac0897e8..5e556ce616 100644
--- a/packages/app/tests/mocks.ts
+++ b/packages/app/tests/mocks.ts
@@ -10,6 +10,7 @@ import * as useContext from "@/composables/useContext";
 import * as useContractEvents from "@/composables/useContractEvents";
 import * as useContractInteractionFactory from "@/composables/useContractInteraction";
 import * as useTokenFactory from "@/composables/useToken";
+import * as useTokenHolders from "@/composables/useTokenHolders";
 import * as useTokenLibraryMockFactory from "@/composables/useTokenLibrary";
 import * as useTransaction from "@/composables/useTransaction";
 import * as useTransactions from "@/composables/useTransactions";
@@ -194,3 +195,17 @@ export const useContextMock = (params: any = {}) => {
 
   return mockContextConfig;
 };
+
+export const useTokenHoldersMock = (params: any = {}) => {
+  const mockBlocks = vi.spyOn(useTokenHolders, "default").mockReturnValue({
+    data: ref([]),
+    total: ref(0),
+    load: () => vi.fn(),
+    pending: ref(false),
+    failed: ref(false),
+    page: ref(1),
+    pageSize: ref(10),
+    ...params,
+  });
+  return mockBlocks;
+};

From 51ff61702d7dcb9b2ec6d530f699e5b8f0a17148 Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Mon, 27 Jan 2025 15:16:05 +0100
Subject: [PATCH 03/10] fix: proper import and add check for pending token info

---
 packages/api/src/token/token.module.ts   | 2 +-
 packages/app/src/components/Contract.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/token/token.module.ts b/packages/api/src/token/token.module.ts
index e80cba34c3..f15e8f8826 100644
--- a/packages/api/src/token/token.module.ts
+++ b/packages/api/src/token/token.module.ts
@@ -6,7 +6,7 @@ import { Token } from "./token.entity";
 import { Block } from "../block/block.entity";
 import { Transaction } from "../transaction/entities/transaction.entity";
 import { TransferModule } from "../transfer/transfer.module";
-import { BalanceModule } from "src/balance/balance.module";
+import { BalanceModule } from "../balance/balance.module";
 @Module({
   imports: [TypeOrmModule.forFeature([Token, Block, Transaction]), TransferModule, BalanceModule],
   controllers: [TokenController],
diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
index 2f15fa9353..6f8f0df509 100644
--- a/packages/app/src/components/Contract.vue
+++ b/packages/app/src/components/Contract.vue
@@ -73,7 +73,7 @@
       <template #tab-4-content>
         <ContractEvents :contract="contract" />
       </template>
-      <template v-if="tokenInfo" #tab-5-content>
+      <template v-if="tokenInfo && !isLoadingTokenInfo" #tab-5-content>
         <TokenHoldersList :tokenInfo="tokenInfo">
           <template #not-found>
             <TokenHoldersListEmptyState />

From b425a764d70d6bcde0177a35fb288d5aeb5c759a Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Mon, 27 Jan 2025 15:58:30 +0100
Subject: [PATCH 04/10] fix: add proper validation for token holders list

---
 packages/app/src/components/Contract.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
index 6f8f0df509..3a9a484cfe 100644
--- a/packages/app/src/components/Contract.vue
+++ b/packages/app/src/components/Contract.vue
@@ -74,7 +74,7 @@
         <ContractEvents :contract="contract" />
       </template>
       <template v-if="tokenInfo && !isLoadingTokenInfo" #tab-5-content>
-        <TokenHoldersList :tokenInfo="tokenInfo">
+        <TokenHoldersList v-if="tokenInfo && !isLoadingTokenInfo" :tokenInfo="tokenInfo">
           <template #not-found>
             <TokenHoldersListEmptyState />
           </template>

From 0140f0d524cc817d78546b4a0a86a0dcb51f09c2 Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Tue, 28 Jan 2025 10:17:53 +0100
Subject: [PATCH 05/10] fix: add some missing tests

---
 .../api/src/balance/balance.service.spec.ts   | 48 ++++++++++++++++++-
 .../api/src/token/token.controller.spec.ts    | 16 +++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/packages/api/src/balance/balance.service.spec.ts b/packages/api/src/balance/balance.service.spec.ts
index 2a021d35b6..24b8352555 100644
--- a/packages/api/src/balance/balance.service.spec.ts
+++ b/packages/api/src/balance/balance.service.spec.ts
@@ -6,6 +6,7 @@ import { BalanceService } from "./balance.service";
 import { Balance } from "./balance.entity";
 import { hexTransformer } from "../common/transformers/hex.transformer";
 import * as utils from "../common/utils";
+import { IPaginationMeta, Pagination } from "nestjs-typeorm-paginate";
 jest.mock("../common/utils");
 
 describe("BalanceService", () => {
@@ -375,10 +376,55 @@ describe("BalanceService", () => {
     });
 
     it("returns pagination results", async () => {
+      const balances = [
+        mock<Balance>({ balance: "2222", address: "0x111111" }),
+        mock<Balance>({ balance: "3333", address: "0x222222" }),
+      ];
+      const paginationResult = mock<Pagination<Balance, IPaginationMeta>>({
+        meta: {
+          totalItems: 2,
+          itemCount: 2,
+          itemsPerPage: 10,
+          totalPages: 1,
+          currentPage: 1,
+        },
+        links: {
+          first: "first",
+          previous: "previous",
+          next: "next",
+          last: "last",
+        },
+        items: [balances[0], balances[1]],
+      });
+      (utils.paginate as jest.Mock).mockResolvedValue(paginationResult);
       const result = await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
-      expect(result).toEqual({
+      expect(utils.paginate).toHaveBeenCalledTimes(1);
+      expect(utils.paginate).toHaveBeenCalledWith(mainQueryBuilderMock, pagingOptions);
+      expect(result).toStrictEqual({
+        ...paginationResult,
+        items: [
+          { balance: balances[0].balance, address: balances[0].address },
+          { balance: balances[1].balance, address: balances[1].address },
+        ],
+      });
+    });
+
+    it("returns empty pagination results", async () => {
+      const paginationResult = mock<Pagination<Balance, IPaginationMeta>>({
+        meta: {
+          totalItems: 0,
+          itemCount: 0,
+          itemsPerPage: 10,
+          totalPages: 0,
+          currentPage: 1,
+        },
         items: [],
       });
+      (utils.paginate as jest.Mock).mockResolvedValue(paginationResult);
+      const result = await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
+      expect(utils.paginate).toHaveBeenCalledTimes(1);
+      expect(utils.paginate).toHaveBeenCalledWith(mainQueryBuilderMock, pagingOptions);
+      expect(result).toStrictEqual({ ...paginationResult, items: [] });
     });
   });
 });
diff --git a/packages/api/src/token/token.controller.spec.ts b/packages/api/src/token/token.controller.spec.ts
index f04eaa43e0..8f33f1b9b3 100644
--- a/packages/api/src/token/token.controller.spec.ts
+++ b/packages/api/src/token/token.controller.spec.ts
@@ -174,5 +174,21 @@ describe("TokenController", () => {
         expect(result).toBe(tokenHolders);
       });
     });
+
+    describe("when token does not exist", () => {
+      beforeEach(() => {
+        (serviceMock.exists as jest.Mock).mockResolvedValueOnce(false);
+      });
+
+      it("throws NotFoundException", async () => {
+        expect.assertions(1);
+
+        try {
+          await controller.getTokenHolders(tokenAddress, pagingOptionsWithLimit);
+        } catch (error) {
+          expect(error).toBeInstanceOf(NotFoundException);
+        }
+      });
+    });
   });
 });

From aa3d25cc6c3f732e08d53bf86ce3291b3902b7a7 Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Wed, 29 Jan 2025 21:44:06 +0100
Subject: [PATCH 06/10] fix: create proper token page with new api and add
 holders page

---
 .../dtos/balances}/balanceForHolder.dto.ts    |   0
 .../src/api/dtos/token/tokenOverview.dto.ts   |  13 ++
 .../api/src/balance/balance.service.spec.ts   | 116 ++++++++++++++++++
 packages/api/src/balance/balance.service.ts   |  33 ++++-
 .../api/src/token/token.controller.spec.ts    |  43 ++++++-
 packages/api/src/token/token.controller.ts    |  26 +++-
 packages/app/src/components/Contract.vue      |  25 ----
 packages/app/src/components/Token.vue         |  78 +++++-------
 .../components/token/MarketTokenInfoTable.vue | 107 ++++++++++++++++
 .../token/OverviewTokenInfoTable.vue          | 115 +++++++++++++++++
 .../src/components/token/TokenHoldersList.vue |  24 ++--
 packages/app/src/composables/common/Api.d.ts  |   5 +
 .../app/src/composables/useTokenOverview.ts   |  39 ++++++
 packages/app/src/locales/en.json              |  17 ++-
 packages/app/src/locales/uk.json              |  17 ++-
 15 files changed, 570 insertions(+), 88 deletions(-)
 rename packages/api/src/{balance => api/dtos/balances}/balanceForHolder.dto.ts (100%)
 create mode 100644 packages/api/src/api/dtos/token/tokenOverview.dto.ts
 create mode 100644 packages/app/src/components/token/MarketTokenInfoTable.vue
 create mode 100644 packages/app/src/components/token/OverviewTokenInfoTable.vue
 create mode 100644 packages/app/src/composables/useTokenOverview.ts

diff --git a/packages/api/src/balance/balanceForHolder.dto.ts b/packages/api/src/api/dtos/balances/balanceForHolder.dto.ts
similarity index 100%
rename from packages/api/src/balance/balanceForHolder.dto.ts
rename to packages/api/src/api/dtos/balances/balanceForHolder.dto.ts
diff --git a/packages/api/src/api/dtos/token/tokenOverview.dto.ts b/packages/api/src/api/dtos/token/tokenOverview.dto.ts
new file mode 100644
index 0000000000..46aa494289
--- /dev/null
+++ b/packages/api/src/api/dtos/token/tokenOverview.dto.ts
@@ -0,0 +1,13 @@
+import { ApiProperty } from "@nestjs/swagger";
+
+export class TokenOverviewDto {
+  @ApiProperty({ type: Number, description: "Number of holders", example: "300" })
+  public readonly holders: number;
+
+  @ApiProperty({
+    type: Number,
+    description: "Total supply",
+    example: "1000000000000000000000000000",
+  })
+  public readonly maxTotalSupply: number;
+}
diff --git a/packages/api/src/balance/balance.service.spec.ts b/packages/api/src/balance/balance.service.spec.ts
index 24b8352555..603f98b2db 100644
--- a/packages/api/src/balance/balance.service.spec.ts
+++ b/packages/api/src/balance/balance.service.spec.ts
@@ -231,6 +231,10 @@ describe("BalanceService", () => {
       (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(mainQueryBuilderMock);
     });
 
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
     it("creates sub query builder with proper params", async () => {
       await service.getBalancesByAddresses(addresses, tokenAddress);
       expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("latest_balances");
@@ -324,6 +328,10 @@ describe("BalanceService", () => {
       (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(mainQueryBuilderMock);
     });
 
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
     it("creates sub query builder with proper params", async () => {
       await service.getBalancesForTokenAddress(tokenAddress, pagingOptions);
       expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("latest_balances");
@@ -427,4 +435,112 @@ describe("BalanceService", () => {
       expect(result).toStrictEqual({ ...paginationResult, items: [] });
     });
   });
+
+  describe("getSumAndCountBalances", () => {
+    const subQuerySql = "subQuerySql";
+    const tokenAddress = "0x91d0a23f34e535e44df8ba84c53a0945cf0eeb69";
+    let subQueryBuilderMock;
+    let mainQueryBuilderMock;
+
+    beforeEach(() => {
+      subQueryBuilderMock = mock<SelectQueryBuilder<Balance>>({
+        getQuery: jest.fn().mockReturnValue(subQuerySql),
+      });
+      mainQueryBuilderMock = mock<SelectQueryBuilder<Balance>>();
+      (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(subQueryBuilderMock);
+      (repositoryMock.createQueryBuilder as jest.Mock).mockReturnValueOnce(mainQueryBuilderMock);
+    });
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it("creates sub query builder with proper params", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("latest_balances");
+    });
+
+    it("selects required fields in the sub query", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(subQueryBuilderMock.select).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.select).toHaveBeenCalledWith(`"tokenAddress"`);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledTimes(2);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledWith(`"address"`);
+      expect(subQueryBuilderMock.addSelect).toHaveBeenCalledWith(`MAX("blockNumber")`, "blockNumber");
+    });
+
+    it("filters balances in the sub query", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(subQueryBuilderMock.where).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.where).toHaveBeenCalledWith(`"tokenAddress" = :tokenAddress`);
+    });
+
+    it("groups by address and tokenAddress in the sub query", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(subQueryBuilderMock.groupBy).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.groupBy).toHaveBeenCalledWith(`"tokenAddress"`);
+      expect(subQueryBuilderMock.addGroupBy).toHaveBeenCalledTimes(1);
+      expect(subQueryBuilderMock.addGroupBy).toHaveBeenCalledWith(`"address"`);
+    });
+
+    it("creates main query builder with proper params", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(repositoryMock.createQueryBuilder).toHaveBeenCalledWith("balances");
+    });
+
+    it("joins main query with the sub query", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(mainQueryBuilderMock.innerJoin).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.innerJoin).toHaveBeenCalledWith(
+        `(${subQuerySql})`,
+        "latest_balances",
+        `balances."tokenAddress" = latest_balances."tokenAddress" AND
+      balances."address" = latest_balances."address" AND
+      balances."blockNumber" = latest_balances."blockNumber"`
+      );
+    });
+
+    it("sets query tokenAddress param", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledWith("tokenAddress", hexTransformer.to(tokenAddress));
+    });
+
+    it("select count and sum", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(mainQueryBuilderMock.addSelect).toHaveBeenCalledTimes(2);
+      expect(mainQueryBuilderMock.addSelect).toHaveBeenNthCalledWith(
+        1,
+        "SUM(CAST(balances.balance AS NUMERIC))",
+        "totalBalance"
+      );
+      expect(mainQueryBuilderMock.addSelect).toHaveBeenNthCalledWith(2, "COUNT(balances.address)", "totalCount");
+    });
+
+    it("sets query tokenAddress param", async () => {
+      await service.getSumAndCountBalances(tokenAddress);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.setParameter).toHaveBeenCalledWith("tokenAddress", hexTransformer.to(tokenAddress));
+    });
+
+    it("returns results", async () => {
+      mainQueryBuilderMock.getRawOne = jest.fn().mockResolvedValue({
+        totalBalance: 1000,
+        totalCount: 2,
+      });
+      const result = await service.getSumAndCountBalances(tokenAddress);
+      expect(result).toStrictEqual({
+        holders: 2,
+        maxTotalSupply: 1000,
+      });
+    });
+
+    it("returns empty results", async () => {
+      const result = await service.getSumAndCountBalances(tokenAddress);
+      expect(result).toStrictEqual({
+        holders: 0,
+        maxTotalSupply: 0,
+      });
+    });
+  });
 });
diff --git a/packages/api/src/balance/balance.service.ts b/packages/api/src/balance/balance.service.ts
index 753b2e0ab5..bb445f95ef 100644
--- a/packages/api/src/balance/balance.service.ts
+++ b/packages/api/src/balance/balance.service.ts
@@ -4,9 +4,10 @@ import { Repository } from "typeorm";
 import { Balance } from "./balance.entity";
 import { Token } from "../token/token.entity";
 import { hexTransformer } from "../common/transformers/hex.transformer";
-import { BalanceForHolderDto } from "./balanceForHolder.dto";
+import { BalanceForHolderDto } from "../api/dtos/balances/balanceForHolder.dto";
 import { paginate } from "../common/utils";
 import { IPaginationOptions, Pagination } from "nestjs-typeorm-paginate";
+import { TokenOverviewDto } from "src/api/dtos/token/tokenOverview.dto";
 
 export interface TokenBalance {
   balance: string;
@@ -139,4 +140,34 @@ export class BalanceService {
       }),
     };
   }
+
+  public async getSumAndCountBalances(tokenAddress: string): Promise<TokenOverviewDto> {
+    const latestBalancesQuery = this.balanceRepository.createQueryBuilder("latest_balances");
+    latestBalancesQuery.select(`"tokenAddress"`);
+    latestBalancesQuery.addSelect(`"address"`);
+    latestBalancesQuery.addSelect(`MAX("blockNumber")`, "blockNumber");
+    latestBalancesQuery.where(`"tokenAddress" = :tokenAddress`);
+    latestBalancesQuery.groupBy(`"tokenAddress"`);
+    latestBalancesQuery.addGroupBy(`"address"`);
+
+    const balancesQuery = this.balanceRepository.createQueryBuilder("balances");
+    balancesQuery.innerJoin(
+      `(${latestBalancesQuery.getQuery()})`,
+      "latest_balances",
+      `balances."tokenAddress" = latest_balances."tokenAddress" AND
+      balances."address" = latest_balances."address" AND
+      balances."blockNumber" = latest_balances."blockNumber"`
+    );
+    balancesQuery.setParameter("tokenAddress", hexTransformer.to(tokenAddress));
+    balancesQuery.leftJoinAndSelect("balances.token", "token");
+    balancesQuery.select("SUM(CAST(balances.balance AS NUMERIC))", "totalBalance");
+    balancesQuery.addSelect("COUNT(balances.address)", "totalCount");
+
+    const result = await balancesQuery.getRawOne();
+
+    return {
+      maxTotalSupply: parseFloat(result?.totalBalance) || 0,
+      holders: parseInt(result?.totalCount) || 0,
+    };
+  }
 }
diff --git a/packages/api/src/token/token.controller.spec.ts b/packages/api/src/token/token.controller.spec.ts
index 8f33f1b9b3..438357d32e 100644
--- a/packages/api/src/token/token.controller.spec.ts
+++ b/packages/api/src/token/token.controller.spec.ts
@@ -8,8 +8,9 @@ import { TransferService } from "../transfer/transfer.service";
 import { Token } from "./token.entity";
 import { Transfer } from "../transfer/transfer.entity";
 import { PagingOptionsDto, PagingOptionsWithMaxItemsLimitDto } from "../common/dtos";
-import { BalanceForHolderDto } from "../balance/balanceForHolder.dto";
+import { BalanceForHolderDto } from "../api/dtos/balances/balanceForHolder.dto";
 import { BalanceService } from "../balance/balance.service";
+import { TokenOverviewDto } from "src/api/dtos/token/tokenOverview.dto";
 
 describe("TokenController", () => {
   const tokenAddress = "tokenAddress";
@@ -191,4 +192,44 @@ describe("TokenController", () => {
       });
     });
   });
+
+  describe("getTokenOverview", () => {
+    describe("when token exists", () => {
+      const tokenOverview = mock<TokenOverviewDto>({
+        holders: 2,
+        maxTotalSupply: 10000000000000000000000000000,
+      });
+      beforeEach(() => {
+        (serviceMock.exists as jest.Mock).mockResolvedValueOnce(true);
+        (balanceServiceMock.getSumAndCountBalances as jest.Mock).mockResolvedValueOnce(tokenOverview);
+      });
+
+      it("queries overview with the specified options", async () => {
+        await controller.getTokenOverview(tokenAddress);
+        expect(balanceServiceMock.getSumAndCountBalances).toHaveBeenCalledTimes(1);
+        expect(balanceServiceMock.getSumAndCountBalances).toHaveBeenCalledWith(tokenAddress);
+      });
+
+      it("returns token overview", async () => {
+        const result = await controller.getTokenOverview(tokenAddress);
+        expect(result).toBe(tokenOverview);
+      });
+    });
+
+    describe("when token does not exist", () => {
+      beforeEach(() => {
+        (serviceMock.exists as jest.Mock).mockResolvedValueOnce(false);
+      });
+
+      it("throws NotFoundException", async () => {
+        expect.assertions(1);
+
+        try {
+          await controller.getTokenOverview(tokenAddress);
+        } catch (error) {
+          expect(error).toBeInstanceOf(NotFoundException);
+        }
+      });
+    });
+  });
 });
diff --git a/packages/api/src/token/token.controller.ts b/packages/api/src/token/token.controller.ts
index cbd0463fd3..8c92df9f08 100644
--- a/packages/api/src/token/token.controller.ts
+++ b/packages/api/src/token/token.controller.ts
@@ -20,7 +20,8 @@ import { ParseAddressPipe, ADDRESS_REGEX_PATTERN } from "../common/pipes/parseAd
 import { swagger } from "../config/featureFlags";
 import { constants } from "../config/docs";
 import { BalanceService } from "../balance/balance.service";
-import { BalanceForHolderDto } from "../balance/balanceForHolder.dto";
+import { BalanceForHolderDto } from "../api/dtos/balances/balanceForHolder.dto";
+import { TokenOverviewDto } from "src/api/dtos/token/tokenOverview.dto";
 
 const entityName = "tokens";
 
@@ -138,4 +139,27 @@ export class TokenController {
       route: `${entityName}/${tokenAddress}/holders`,
     });
   }
+
+  @Get(":tokenAddress/overview")
+  @ApiParam({
+    name: "tokenAddress",
+    type: String,
+    schema: { pattern: ADDRESS_REGEX_PATTERN },
+    example: constants.tokenAddress,
+    description: "Valid hex token address",
+  })
+  @ApiListPageOkResponse(BalanceForHolderDto, { description: "Successfully returned balance for holder list" })
+  @ApiBadRequestResponse({
+    description: "Token address is invalid or paging query params are not valid or out of range",
+  })
+  @ApiNotFoundResponse({ description: "Token with the specified address does not exist" })
+  public async getTokenOverview(
+    @Param("tokenAddress", new ParseAddressPipe()) tokenAddress: string
+  ): Promise<TokenOverviewDto> {
+    if (!(await this.tokenService.exists(tokenAddress))) {
+      throw new NotFoundException();
+    }
+
+    return await this.balanceService.getSumAndCountBalances(tokenAddress);
+  }
 }
diff --git a/packages/app/src/components/Contract.vue b/packages/app/src/components/Contract.vue
index 3a9a484cfe..70e9a80db1 100644
--- a/packages/app/src/components/Contract.vue
+++ b/packages/app/src/components/Contract.vue
@@ -73,19 +73,11 @@
       <template #tab-4-content>
         <ContractEvents :contract="contract" />
       </template>
-      <template v-if="tokenInfo && !isLoadingTokenInfo" #tab-5-content>
-        <TokenHoldersList v-if="tokenInfo && !isLoadingTokenInfo" :tokenInfo="tokenInfo">
-          <template #not-found>
-            <TokenHoldersListEmptyState />
-          </template>
-        </TokenHoldersList>
-      </template>
     </Tabs>
   </div>
 </template>
 <script lang="ts" setup>
 import { computed, type PropType } from "vue";
-import { watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { CheckCircleIcon } from "@heroicons/vue/solid";
@@ -101,13 +93,9 @@ import ContractInfoTab from "@/components/contract/ContractInfoTab.vue";
 import ContractInfoTable from "@/components/contract/InfoTable.vue";
 import TransactionEmptyState from "@/components/contract/TransactionEmptyState.vue";
 import ContractEvents from "@/components/event/ContractEvents.vue";
-import TokenHoldersList from "@/components/token/TokenHoldersList.vue";
-import TokenHoldersListEmptyState from "@/components/token/TokenHoldersListEmptyState.vue";
 import TransactionsTable from "@/components/transactions/Table.vue";
 import TransfersTable from "@/components/transfers/Table.vue";
 
-import useToken from "@/composables/useToken";
-
 import type { BreadcrumbItem } from "@/components/common/Breadcrumbs.vue";
 import type { Contract } from "@/composables/useAddress";
 
@@ -140,7 +128,6 @@ const tabs = computed(() => [
     icon: props.contract?.verificationInfo ? CheckCircleIcon : null,
   },
   { title: t("tabs.events"), hash: "#events" },
-  ...(tokenInfo?.value?.l2Address ? [{ title: t("tabs.holders"), hash: "#holders" }] : []),
 ]);
 
 const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
@@ -155,18 +142,6 @@ const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
   return [];
 });
 
-const { getTokenInfo, tokenInfo, isRequestPending: isLoadingTokenInfo } = useToken();
-getTokenInfo(props.contract?.address);
-
-watch(
-  () => props.contract,
-  (newContract) => {
-    if (newContract) {
-      getTokenInfo(newContract.address);
-    }
-  }
-);
-
 const contractName = computed(() => props.contract?.verificationInfo?.request.contractName.replace(/.*\.sol:/, ""));
 const contractABI = computed(() => props.contract?.verificationInfo?.artifacts.abi);
 
diff --git a/packages/app/src/components/Token.vue b/packages/app/src/components/Token.vue
index 6d7456e4d2..fde41dc46a 100644
--- a/packages/app/src/components/Token.vue
+++ b/packages/app/src/components/Token.vue
@@ -29,41 +29,15 @@
   <div class="tables-container">
     <div class="contract-tables-container">
       <div>
-        <ContractInfoTable class="contract-info-table" :loading="pending" :contract="contract!" />
+        <OverviewTokenInfoTable
+          class="token-info-table"
+          :loading="isLoadingTokenOverview"
+          :tokenOverview="tokenOverview!"
+          :tokenInfo="tokenInfo!"
+        />
       </div>
       <div>
-        <BalanceTable class="balance-table" :loading="pending" :balances="contract?.balances">
-          <template #not-found>
-            <EmptyState>
-              <template #image>
-                <div class="balances-empty-icon">
-                  <img src="/images/empty-state/empty_balance.svg" alt="empty_balance" />
-                </div>
-              </template>
-              <template #title>
-                {{ t("contract.balances.notFound.title") }}
-              </template>
-              <template #description>
-                <div class="balances-empty-description">{{ t("contract.balances.notFound.subtitle") }}</div>
-              </template>
-            </EmptyState>
-          </template>
-          <template #failed>
-            <EmptyState>
-              <template #image>
-                <div class="balances-empty-icon">
-                  <img src="/images/empty-state/error_balance.svg" alt="empty_balance" />
-                </div>
-              </template>
-              <template #title>
-                {{ t("contract.balances.error.title") }}
-              </template>
-              <template #description>
-                <div class="balances-empty-description">{{ t("contract.balances.error.subtitle") }}</div>
-              </template>
-            </EmptyState>
-          </template>
-        </BalanceTable>
+        <MarketTokenInfoTable class="token-info-table" :loading="pending" :tokenInfo="tokenInfo!" />
       </div>
     </div>
 
@@ -88,30 +62,43 @@
       <template #tab-4-content>
         <ContractEvents :contract="contract" />
       </template>
+      <template v-if="tokenInfo && !isLoadingTokenInfo" #tab-5-content>
+        <TokenHoldersList
+          v-if="tokenInfo && !isLoadingTokenInfo && tokenOverview && !isLoadingTokenInfo"
+          :tokenInfo="tokenInfo"
+          :tokenOverview="tokenOverview"
+        >
+          <template #not-found>
+            <TokenHoldersListEmptyState />
+          </template>
+        </TokenHoldersList>
+      </template>
     </Tabs>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, type PropType, watchEffect } from "vue";
+import { computed, type PropType, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { CheckCircleIcon } from "@heroicons/vue/solid";
 
 import SearchForm from "@/components/SearchForm.vue";
-import BalanceTable from "@/components/balances/Table.vue";
 import Breadcrumbs from "@/components/common/Breadcrumbs.vue";
-import EmptyState from "@/components/common/EmptyState.vue";
 import Spinner from "@/components/common/Spinner.vue";
 import Tabs from "@/components/common/Tabs.vue";
 import Title from "@/components/common/Title.vue";
 import ContractInfoTab from "@/components/contract/ContractInfoTab.vue";
-import ContractInfoTable from "@/components/contract/InfoTable.vue";
 import TransactionEmptyState from "@/components/contract/TransactionEmptyState.vue";
 import ContractEvents from "@/components/event/ContractEvents.vue";
+import MarketTokenInfoTable from "@/components/token/MarketTokenInfoTable.vue";
+import OverviewTokenInfoTable from "@/components/token/OverviewTokenInfoTable.vue";
+import TokenHoldersList from "@/components/token/TokenHoldersList.vue";
+import TokenHoldersListEmptyState from "@/components/token/TokenHoldersListEmptyState.vue";
 import TransactionsTable from "@/components/transactions/Table.vue";
 import TransfersTable from "@/components/transfers/Table.vue";
 
 import useToken from "@/composables/useToken";
+import useTokenOverview from "@/composables/useTokenOverview";
 
 import type { BreadcrumbItem } from "@/components/common/Breadcrumbs.vue";
 import type { Contract } from "@/composables/useAddress";
@@ -136,11 +123,13 @@ const props = defineProps({
   },
 });
 
-const { getTokenInfo, tokenInfo } = useToken();
+const { getTokenInfo, tokenInfo, isRequestPending: isLoadingTokenInfo } = useToken();
+const { getTokenOverview, tokenOverview, isRequestPending: isLoadingTokenOverview } = useTokenOverview();
 
 watchEffect(() => {
   if (props.contract) {
     getTokenInfo(props.contract.address);
+    getTokenOverview(props.contract.address);
   }
 });
 
@@ -153,6 +142,7 @@ const tabs = computed(() => [
     icon: props.contract?.verificationInfo ? CheckCircleIcon : null,
   },
   { title: t("tabs.events"), hash: "#events" },
+  ...(tokenInfo?.value?.l2Address ? [{ title: t("tabs.holders"), hash: "#holders" }] : []),
 ]);
 const breadcrumbItems = computed((): BreadcrumbItem[] | [] => {
   if (props.contract?.address) {
@@ -203,18 +193,6 @@ const transactionsSearchParams = computed(() => ({
       @apply rounded-none;
     }
   }
-  .balance-table {
-    @apply mb-4 overflow-hidden bg-white;
-    .balances-empty-icon {
-      @apply m-auto;
-      img {
-        @apply w-[2.875rem];
-      }
-    }
-    .balances-empty-description {
-      @apply max-w-[16rem] whitespace-normal;
-    }
-  }
 }
 .transaction-table-error {
   @apply text-2xl text-error-700;
diff --git a/packages/app/src/components/token/MarketTokenInfoTable.vue b/packages/app/src/components/token/MarketTokenInfoTable.vue
new file mode 100644
index 0000000000..2e9798ef6e
--- /dev/null
+++ b/packages/app/src/components/token/MarketTokenInfoTable.vue
@@ -0,0 +1,107 @@
+<template>
+  <Table class="token-info-table" :loading="loading">
+    <template v-if="!loading && tokenInfo" #default>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.market.marketCap") }}
+        </table-body-column>
+        <table-body-column class="token-info-field-value">
+          <div v-if="tokenInfo.liquidity && tokenInfo.usdPrice">
+            {{ formatMoney(tokenInfo.liquidity, tokenInfo.decimals) }}
+          </div>
+        </table-body-column>
+      </tr>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.market.price") }}
+        </table-body-column>
+        <table-body-column class="contract-info-field-value">
+          <TokenPrice :address="tokenInfo.l2Address" />
+        </table-body-column>
+      </tr>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.market.circulatingSupply") }}
+        </table-body-column>
+        <table-body-column v-if="tokenInfo.liquidity && tokenInfo.usdPrice" class="contract-info-field-value">
+          {{ (tokenInfo.liquidity / tokenInfo.usdPrice).toFixed(0) }}
+        </table-body-column>
+      </tr>
+    </template>
+    <template v-if="!loading && !tokenInfo" #empty>
+      <TableBodyColumn colspan="3">
+        <div class="token-not-found">
+          {{ t("transactions.table.notFound") }}
+        </div>
+      </TableBodyColumn>
+    </template>
+    <template #loading>
+      <tr class="loading-row" v-for="row in 3" :key="row">
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+      </tr>
+    </template>
+  </Table>
+</template>
+
+<script lang="ts" setup>
+import { type PropType } from "vue";
+import { useI18n } from "vue-i18n";
+
+import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
+import Table from "@/components/common/table/Table.vue";
+import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
+import TokenPrice from "@/components/common/table/fields/TokenPrice.vue";
+
+import type { Token } from "@/composables/useToken";
+
+import { formatMoney } from "@/utils/formatters";
+
+const props = defineProps({
+  tokenInfo: {
+    type: Object as PropType<Token>,
+    default: () => ({}),
+  },
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+.token-info-table {
+  .table-body-col {
+    @apply py-4;
+  }
+  .loading-row {
+    .table-body-col {
+      @apply first:w-40;
+
+      .content-loader {
+        @apply w-full;
+
+        &:nth-child(2) {
+          @apply max-w-md;
+        }
+      }
+    }
+  }
+  .token-info-field-label {
+    @apply text-gray-400;
+  }
+  .token-info-field-value {
+    @apply text-gray-800;
+  }
+
+  .token-not-found {
+    @apply px-1.5 py-2 text-gray-700;
+  }
+}
+</style>
diff --git a/packages/app/src/components/token/OverviewTokenInfoTable.vue b/packages/app/src/components/token/OverviewTokenInfoTable.vue
new file mode 100644
index 0000000000..d507ed52a0
--- /dev/null
+++ b/packages/app/src/components/token/OverviewTokenInfoTable.vue
@@ -0,0 +1,115 @@
+<template>
+  <Table class="token-info-table" :loading="loading">
+    <template v-if="!loading && tokenOverview && tokenInfo" #default>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.overview.maxTotalSupply") }}
+        </table-body-column>
+        <table-body-column class="token-info-field-value">
+          {{ formatValue(tokenOverview.maxTotalSupply, tokenInfo.decimals) }}
+        </table-body-column>
+      </tr>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.overview.holders") }}
+        </table-body-column>
+        <table-body-column class="contract-info-field-value">
+          {{ tokenOverview.holders }}
+        </table-body-column>
+      </tr>
+      <tr>
+        <table-body-column class="token-info-field-label">
+          {{ t("tokenView.table.overview.tokenContract") }}
+        </table-body-column>
+        <table-body-column class="contract-info-field-value">
+          <AddressLink :address="tokenInfo.l2Address" class="block max-w-sm" :data-testid="$testId.tokenHoldersAddress">
+            {{ shortenFitText(tokenInfo.l2Address, "left", 210, subtraction) }}
+          </AddressLink>
+        </table-body-column>
+      </tr>
+    </template>
+    <template v-if="!loading && !tokenOverview" #empty>
+      <TableBodyColumn colspan="3">
+        <div class="token-not-found">
+          {{ t("transactions.table.notFound") }}
+        </div>
+      </TableBodyColumn>
+    </template>
+    <template #loading>
+      <tr class="loading-row" v-for="row in 4" :key="row">
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader />
+        </TableBodyColumn>
+      </tr>
+    </template>
+  </Table>
+</template>
+
+<script lang="ts" setup>
+import { type PropType, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+import AddressLink from "@/components/AddressLink.vue";
+import { shortenFitText } from "@/components/common/HashLabel.vue";
+import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
+import Table from "@/components/common/table/Table.vue";
+import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
+
+import { type Token } from "@/composables/useToken";
+
+import type { TokenOverview } from "@/composables/useTokenOverview";
+
+import { formatValue } from "@/utils/formatters";
+
+const props = defineProps({
+  tokenOverview: {
+    type: Object as PropType<TokenOverview>,
+    default: () => ({}),
+  },
+  tokenInfo: {
+    type: Object as PropType<Token>,
+    default: () => ({}),
+  },
+  loading: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const subtraction = ref(6);
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss">
+.token-info-table {
+  .table-body-col {
+    @apply py-4;
+  }
+  .loading-row {
+    .table-body-col {
+      @apply first:w-40;
+
+      .content-loader {
+        @apply w-full;
+
+        &:nth-child(2) {
+          @apply max-w-md;
+        }
+      }
+    }
+  }
+  .token-info-field-label {
+    @apply text-gray-400;
+  }
+  .token-info-field-value {
+    @apply text-gray-800;
+  }
+
+  .token-not-found {
+    @apply px-1.5 py-2 text-gray-700;
+  }
+}
+</style>
diff --git a/packages/app/src/components/token/TokenHoldersList.vue b/packages/app/src/components/token/TokenHoldersList.vue
index 1b15ec7bfd..ea6e6cfee4 100644
--- a/packages/app/src/components/token/TokenHoldersList.vue
+++ b/packages/app/src/components/token/TokenHoldersList.vue
@@ -8,10 +8,12 @@
     </template>
     <template #table-row="{ item }: { item: any }">
       <TableBodyColumn :data-heading="t('tokenHolders.table.address')">
-        <AddressLink :address="item.address" class="block max-w-sm" :data-testid="$testId.tokenHoldersAddress">
-          {{ shortenFitText(item.address, "left", 210, subtraction) }}
-        </AddressLink>
-        <CopyButton :value="item.address" />
+        <div class="holder-address-container">
+          <AddressLink :address="item.address" class="block max-w-sm" :data-testid="$testId.tokenHoldersAddress">
+            {{ shortenFitText(item.address, "left", 210, subtraction) }}
+          </AddressLink>
+          <CopyButton :value="item.address" />
+        </div>
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('tokenHolders.table.balance')">
         <div :data-testid="$testId.tokenHoldersBalance" class="balance-data-value">
@@ -80,6 +82,7 @@ import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
 import TableHeadColumn from "@/components/common/table/TableHeadColumn.vue";
 
 import useTokenHolders from "@/composables/useTokenHolders";
+import { type TokenOverview } from "@/composables/useTokenOverview";
 
 import type { Token } from "@/composables/useToken";
 import type { TokenHolder } from "@/composables/useTokenHolders";
@@ -92,6 +95,10 @@ const props = defineProps({
     type: Object as PropType<Token>,
     required: true,
   },
+  tokenOverview: {
+    type: Object as PropType<TokenOverview>,
+    required: true,
+  },
   pagination: {
     type: Boolean,
     default: true,
@@ -123,9 +130,10 @@ const tokenHolders = computed<TokenHolder[] | undefined>(() => {
   return data.value?.map((holder) => {
     return {
       ...holder,
-      percentage: props.tokenInfo.liquidity
-        ? `${(parseFloat(holder.balance) / (props.tokenInfo.liquidity / 100)).toFixed(4)} %`
-        : "",
+      percentage:
+        props.tokenOverview.maxTotalSupply && holder.balance
+          ? `${(parseFloat(holder.balance) / (props.tokenOverview.maxTotalSupply / 100)).toFixed(4)} %`
+          : "",
     };
   });
 });
@@ -138,7 +146,7 @@ const tokenHolders = computed<TokenHolder[] | undefined>(() => {
     @apply absolute left-4 top-3 whitespace-nowrap pr-5 text-left text-xs uppercase text-neutral-400 content-[attr(data-heading)] md:content-none;
   }
   .holder-address-container {
-    @apply flex gap-x-2;
+    @apply flex gap-x-1;
     .holder-address {
       @apply block cursor-pointer font-mono text-sm font-medium;
     }
diff --git a/packages/app/src/composables/common/Api.d.ts b/packages/app/src/composables/common/Api.d.ts
index 832955a559..ccab652102 100644
--- a/packages/app/src/composables/common/Api.d.ts
+++ b/packages/app/src/composables/common/Api.d.ts
@@ -144,5 +144,10 @@ declare namespace Api {
       address: string;
       balance: string;
     };
+
+    type TokenOverview = {
+      holders: number;
+      maxTotalSupply: number;
+    };
   }
 }
diff --git a/packages/app/src/composables/useTokenOverview.ts b/packages/app/src/composables/useTokenOverview.ts
new file mode 100644
index 0000000000..9426639a0f
--- /dev/null
+++ b/packages/app/src/composables/useTokenOverview.ts
@@ -0,0 +1,39 @@
+import { ref } from "vue";
+
+import useFetch from "./common/useFetch";
+import useContext from "./useContext";
+
+import type { Hash } from "@/types";
+
+export type TokenOverview = Api.Response.TokenOverview;
+
+export default () => {
+  const isRequestPending = ref(false);
+  const isRequestFailed = ref(false);
+  const tokenOverview = ref(null as TokenOverview | null);
+
+  const getTokenOverview = async (address?: Hash, context = useContext()) => {
+    tokenOverview.value = null;
+    isRequestFailed.value = false;
+    if (!address) {
+      console.error("Token address is required");
+      return;
+    }
+
+    const { failed, fetch, item, pending } = useFetch<TokenOverview>(
+      () => new URL(`/tokens/${address}/overview`, context.currentNetwork.value.apiUrl)
+    );
+    await fetch();
+
+    isRequestPending.value = pending.value;
+    isRequestFailed.value = failed.value;
+    tokenOverview.value = item.value;
+  };
+
+  return {
+    isRequestPending,
+    isRequestFailed,
+    tokenOverview,
+    getTokenOverview,
+  };
+};
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 9d7b3f9b8f..db158e05b8 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -322,7 +322,22 @@
         "title": "Address"
     },
     "tokenView": {
-        "title": "Token"
+        "title": "Token",
+        "table": {
+            "market": {
+                "marketCap": "Market Cap",
+                "totalSupply": "Total Supply",
+                "circulatingSupply": "Circulating Supply Market Cap",
+                "price": "Price",
+                "decimals": "Decimals"
+            },
+            "overview": {
+                "holders": "Holders",
+                "maxTotalSupply": "Max Total Supply",
+                "totalTransfers": "Total Transfers",
+                "tokenContract": "Token Contract"
+            }
+        }
     },
     "contract": {
         "title": "Contract",
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index 7cd389842f..800beddd0a 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -396,7 +396,22 @@
         "title": "Адреса"
     },
     "tokenView": {
-        "title": "Токен"
+        "title": "Токен",
+        "table": {
+            "market": {
+                "marketCap": "Капіталізація ринку",
+                "totalSupply": "Загальна кількість",
+                "circulatingSupply": "Обігова кількість",
+                "price": "Ціна",
+                "decimals": "Десяткові"
+            },
+            "overview": {
+                "holders": "Власники",
+                "maxTotalSupply": "Максимальна загальна кількість",
+                "totalTransfers": "Загальна кількість трансферів",
+                "tokenContract": "Контракт Токена"
+            }
+        }
     },
     "accountView": {
         "title": "Профіль",

From 3e5e367efb7779d7a99af6b69f4afa89351b9f0b Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Thu, 30 Jan 2025 12:09:44 +0100
Subject: [PATCH 07/10] fix: typecheck and lint warnings

---
 packages/app/src/components/Token.vue                        | 2 +-
 packages/app/src/components/token/MarketTokenInfoTable.vue   | 4 ++--
 packages/app/src/components/token/OverviewTokenInfoTable.vue | 5 ++---
 packages/app/src/components/token/TokenHoldersList.vue       | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/app/src/components/Token.vue b/packages/app/src/components/Token.vue
index fde41dc46a..ad8a44da6b 100644
--- a/packages/app/src/components/Token.vue
+++ b/packages/app/src/components/Token.vue
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, type PropType, watch, watchEffect } from "vue";
+import { computed, type PropType, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { CheckCircleIcon } from "@heroicons/vue/solid";
diff --git a/packages/app/src/components/token/MarketTokenInfoTable.vue b/packages/app/src/components/token/MarketTokenInfoTable.vue
index 2e9798ef6e..79bf982673 100644
--- a/packages/app/src/components/token/MarketTokenInfoTable.vue
+++ b/packages/app/src/components/token/MarketTokenInfoTable.vue
@@ -49,7 +49,6 @@
 </template>
 
 <script lang="ts" setup>
-import { type PropType } from "vue";
 import { useI18n } from "vue-i18n";
 
 import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
@@ -58,10 +57,11 @@ import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
 import TokenPrice from "@/components/common/table/fields/TokenPrice.vue";
 
 import type { Token } from "@/composables/useToken";
+import type { PropType } from "vue";
 
 import { formatMoney } from "@/utils/formatters";
 
-const props = defineProps({
+defineProps({
   tokenInfo: {
     type: Object as PropType<Token>,
     default: () => ({}),
diff --git a/packages/app/src/components/token/OverviewTokenInfoTable.vue b/packages/app/src/components/token/OverviewTokenInfoTable.vue
index d507ed52a0..6c430f8063 100644
--- a/packages/app/src/components/token/OverviewTokenInfoTable.vue
+++ b/packages/app/src/components/token/OverviewTokenInfoTable.vue
@@ -58,13 +58,12 @@ import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
 import Table from "@/components/common/table/Table.vue";
 import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
 
-import { type Token } from "@/composables/useToken";
-
+import type { Token } from "@/composables/useToken";
 import type { TokenOverview } from "@/composables/useTokenOverview";
 
 import { formatValue } from "@/utils/formatters";
 
-const props = defineProps({
+defineProps({
   tokenOverview: {
     type: Object as PropType<TokenOverview>,
     default: () => ({}),
diff --git a/packages/app/src/components/token/TokenHoldersList.vue b/packages/app/src/components/token/TokenHoldersList.vue
index ea6e6cfee4..cc52b1e6b4 100644
--- a/packages/app/src/components/token/TokenHoldersList.vue
+++ b/packages/app/src/components/token/TokenHoldersList.vue
@@ -82,10 +82,10 @@ import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
 import TableHeadColumn from "@/components/common/table/TableHeadColumn.vue";
 
 import useTokenHolders from "@/composables/useTokenHolders";
-import { type TokenOverview } from "@/composables/useTokenOverview";
 
 import type { Token } from "@/composables/useToken";
 import type { TokenHolder } from "@/composables/useTokenHolders";
+import type { TokenOverview } from "@/composables/useTokenOverview";
 import type { PropType } from "vue";
 
 import { formatPricePretty, formatValue } from "@/utils/formatters";

From 50067ec4b679b164a8acc5d3cc0c83498cec669a Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Thu, 30 Jan 2025 14:09:43 +0100
Subject: [PATCH 08/10] fix: add and fix tests

---
 .../token/OverviewTokenInfoTable.vue          |  4 +-
 packages/app/tests/components/Token.spec.ts   | 36 ++++++++-
 .../tests/components/TokenIconLabel.spec.ts   |  2 +-
 .../token/MarketTokenInfoTable.spec.ts        | 73 +++++++++++++++++++
 .../token/OverviewTokenInfoTable.spec.ts      | 72 ++++++++++++++++++
 .../components/token/TokenHoldersList.spec.ts |  8 +-
 6 files changed, 186 insertions(+), 9 deletions(-)
 create mode 100644 packages/app/tests/components/token/MarketTokenInfoTable.spec.ts
 create mode 100644 packages/app/tests/components/token/OverviewTokenInfoTable.spec.ts

diff --git a/packages/app/src/components/token/OverviewTokenInfoTable.vue b/packages/app/src/components/token/OverviewTokenInfoTable.vue
index 6c430f8063..0052a53f13 100644
--- a/packages/app/src/components/token/OverviewTokenInfoTable.vue
+++ b/packages/app/src/components/token/OverviewTokenInfoTable.vue
@@ -22,7 +22,7 @@
           {{ t("tokenView.table.overview.tokenContract") }}
         </table-body-column>
         <table-body-column class="contract-info-field-value">
-          <AddressLink :address="tokenInfo.l2Address" class="block max-w-sm" :data-testid="$testId.tokenHoldersAddress">
+          <AddressLink :address="tokenInfo.l2Address" class="block max-w-sm">
             {{ shortenFitText(tokenInfo.l2Address, "left", 210, subtraction) }}
           </AddressLink>
         </table-body-column>
@@ -36,7 +36,7 @@
       </TableBodyColumn>
     </template>
     <template #loading>
-      <tr class="loading-row" v-for="row in 4" :key="row">
+      <tr class="loading-row" v-for="row in 3" :key="row">
         <TableBodyColumn>
           <ContentLoader />
         </TableBodyColumn>
diff --git a/packages/app/tests/components/Token.spec.ts b/packages/app/tests/components/Token.spec.ts
index 5591c50d67..ac9564db84 100644
--- a/packages/app/tests/components/Token.spec.ts
+++ b/packages/app/tests/components/Token.spec.ts
@@ -1,3 +1,4 @@
+import { computed } from "vue";
 import { createI18n } from "vue-i18n";
 
 import { describe, expect, it, vi } from "vitest";
@@ -34,10 +35,38 @@ describe("Account:", () => {
       en: enUS,
     },
   });
+
+  vi.mock("@/composables/useToken", () => {
+    return {
+      default: () => ({
+        getTokenInfo: () => undefined,
+        tokenInfo: computed(() => ({
+          l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+          name: "Ether",
+          symbol: "ETH",
+          decimals: 18,
+          usdPrice: 150,
+        })),
+      }),
+    };
+  });
+
+  vi.mock("@/composables/useTokenOverview", () => {
+    return {
+      default: () => ({
+        getTokenOverview: () => undefined,
+        tokenOverview: computed(() => ({
+          holders: 140221,
+          maxTotalSupply: 100000000000000000000000000,
+        })),
+      }),
+    };
+  });
+
   it("renders component", () => {
     const { container } = render(Token, {
       props: {
-        account: {
+        contract: {
           accountType: "eOA",
           address: "0xDB754A7833163caAB170814c5F9cAf32F09FDEd4",
           balances: {},
@@ -50,9 +79,8 @@ describe("Account:", () => {
         stubs: { RouterLink: RouterLinkStub, TransfersTable: { template: "<div />" } },
       },
     });
-    expect(container.querySelector(".breadcrumb-item-active")?.textContent).toBe("Account 0xDB75...DEd4");
-    expect(container.querySelector(".contract-info-table")).toBeDefined();
-    expect(container.querySelector(".balance-table")).toBeDefined();
+    expect(container.querySelector(".breadcrumb-item-active")?.textContent).toBe("Contract 0xDB75...DEd4");
+    expect(container.querySelector(".token-info-table")).toBeDefined();
     expect(container.querySelector(".transactions-table")).toBeDefined();
   });
 });
diff --git a/packages/app/tests/components/TokenIconLabel.spec.ts b/packages/app/tests/components/TokenIconLabel.spec.ts
index f085bc8cb9..a51cce9a55 100644
--- a/packages/app/tests/components/TokenIconLabel.spec.ts
+++ b/packages/app/tests/components/TokenIconLabel.spec.ts
@@ -81,7 +81,7 @@ describe("TokenIconLabel", () => {
     });
     const contractPageUrl = wrapper.findAllComponents(RouterLinkStub);
 
-    expect(contractPageUrl[0].props().to.name).toBe("address");
+    expect(contractPageUrl[0].props().to.name).toBe("token");
     expect(contractPageUrl[0].props().to.params.address).toBe("0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3");
   });
   it("renders default 'sm' size for icon", () => {
diff --git a/packages/app/tests/components/token/MarketTokenInfoTable.spec.ts b/packages/app/tests/components/token/MarketTokenInfoTable.spec.ts
new file mode 100644
index 0000000000..3f07f1167d
--- /dev/null
+++ b/packages/app/tests/components/token/MarketTokenInfoTable.spec.ts
@@ -0,0 +1,73 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it, vi } from "vitest";
+
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import MarketTokenInfoTable from "@/components/token/MarketTokenInfoTable.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { Token } from "@/composables/useToken";
+
+describe("MarketTokenInfoTable", () => {
+  const i18n = createI18n({
+    locale: "en",
+    allowComposition: true,
+    messages: {
+      en: enUS,
+    },
+  });
+
+  vi.mock("@/components/common/table/fields/TokenPrice.vue", () => ({
+    default: {
+      name: "TokenPrice",
+      template: "<div class='token-price'> $0.33 </div>",
+    },
+  }));
+
+  it("renders table based on input", () => {
+    const wrapper = mount(MarketTokenInfoTable, {
+      global: {
+        plugins: [i18n],
+        stubs: { RouterLink: RouterLinkStub },
+      },
+      props: {
+        tokenInfo: {
+          l2Address: "0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3",
+          decimals: 4,
+          liquidity: 220000000000,
+          usdPrice: 0.33,
+          name: "Ether",
+          symbol: "ETH",
+        } as Token,
+        loading: false,
+      },
+    });
+    const rowArray = wrapper.findAll("tr");
+    const marketCap = rowArray[0].findAll("td");
+    expect(marketCap[0].text()).toBe("Market Cap");
+    expect(marketCap[1].text()).toBe("$220.00B");
+
+    const price = rowArray[1].findAll("td");
+    expect(price[0].text()).toBe("Price");
+    expect(price[1].text()).toBe("$0.33");
+
+    const tokenContract = rowArray[2].findAll("td");
+    expect(tokenContract[0].text()).toBe("Circulating Supply Market Cap");
+    expect(tokenContract[1].text()).toBe("666666666667");
+  });
+
+  it("renders loading state", () => {
+    const wrapper = mount(MarketTokenInfoTable, {
+      global: {
+        plugins: [i18n],
+        stubs: { RouterLink: RouterLinkStub },
+      },
+      props: {
+        loading: true,
+      },
+    });
+    expect(wrapper.findAll(".content-loader").length).toBe(6);
+  });
+});
diff --git a/packages/app/tests/components/token/OverviewTokenInfoTable.spec.ts b/packages/app/tests/components/token/OverviewTokenInfoTable.spec.ts
new file mode 100644
index 0000000000..0208dc40bb
--- /dev/null
+++ b/packages/app/tests/components/token/OverviewTokenInfoTable.spec.ts
@@ -0,0 +1,72 @@
+import { createI18n } from "vue-i18n";
+
+import { describe, expect, it } from "vitest";
+
+import { mount, RouterLinkStub } from "@vue/test-utils";
+
+import OverviewTokenInfoTable from "@/components/token/OverviewTokenInfoTable.vue";
+
+import enUS from "@/locales/en.json";
+
+import type { Token } from "@/composables/useToken";
+
+describe("OverviewTokenInfoTable", () => {
+  const i18n = createI18n({
+    locale: "en",
+    allowComposition: true,
+    messages: {
+      en: enUS,
+    },
+  });
+  it("renders table based on input", () => {
+    const wrapper = mount(OverviewTokenInfoTable, {
+      global: {
+        plugins: [i18n],
+        stubs: { RouterLink: RouterLinkStub },
+      },
+      props: {
+        tokenInfo: {
+          l2Address: "0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3",
+          decimals: 18,
+          liquidity: 220000000000,
+          name: "Ether",
+          symbol: "ETH",
+        } as Token,
+        tokenOverview: {
+          holders: 31231,
+          maxTotalSupply: 100000000000000000000000000,
+        },
+        loading: false,
+      },
+    });
+    const rowArray = wrapper.findAll("tr");
+    const maxTotalSupply = rowArray[0].findAll("td");
+    expect(maxTotalSupply[0].text()).toBe("Max Total Supply");
+    expect(maxTotalSupply[1].text()).toBe("100000000.000000004764729344");
+
+    const holders = rowArray[1].findAll("td");
+    expect(holders[0].text()).toBe("Holders");
+    expect(holders[1].text()).toBe("31231");
+
+    const tokenContract = rowArray[2].findAll("td");
+    expect(tokenContract[0].text()).toBe("Token Contract");
+    expect(tokenContract[1].text()).toBe("0xc2675AE7F35b...Dea3");
+    const [tokenLink] = tokenContract[1].findAllComponents(RouterLinkStub);
+    expect(tokenLink).toBeTruthy();
+    expect(tokenLink.props().to.name).toBe("address");
+    expect(tokenLink.props().to.params.address).toBe("0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3");
+  });
+
+  it("renders loading state", () => {
+    const wrapper = mount(OverviewTokenInfoTable, {
+      global: {
+        plugins: [i18n],
+        stubs: { RouterLink: RouterLinkStub },
+      },
+      props: {
+        loading: true,
+      },
+    });
+    expect(wrapper.findAll(".content-loader").length).toBe(6);
+  });
+});
diff --git a/packages/app/tests/components/token/TokenHoldersList.spec.ts b/packages/app/tests/components/token/TokenHoldersList.spec.ts
index 5131415268..3093890ee9 100644
--- a/packages/app/tests/components/token/TokenHoldersList.spec.ts
+++ b/packages/app/tests/components/token/TokenHoldersList.spec.ts
@@ -38,7 +38,6 @@ describe("TokenListTable:", () => {
   let renderResult: RenderResult | null;
   let mockContext: SpyInstance;
   let mockHolders: SpyInstance;
-
   beforeAll(() => {
     mockHolders = useTokenHoldersMock({
       data: computed(() => [
@@ -48,6 +47,7 @@ describe("TokenListTable:", () => {
         },
       ]),
     });
+
     mockContext = useContextMock();
 
     renderResult = render(TokenHolderList, {
@@ -66,6 +66,10 @@ describe("TokenListTable:", () => {
           symbol: "ETH",
           usdPrice: 150,
         },
+        tokenOverview: {
+          holders: 1,
+          maxTotalSupply: 10000000000000000000,
+        },
         loading: false,
         useQueryPagination: false,
         notFound: false,
@@ -88,7 +92,7 @@ describe("TokenListTable:", () => {
   });
 
   it("renders type column", () => {
-    expect(renderResult!.getByTestId(elements.tokenHoldersPercentage).textContent).toEqual("0.0227 %");
+    expect(renderResult!.getByTestId(elements.tokenHoldersPercentage).textContent).toEqual("50.0000 %");
   });
 
   it("renders from column", () => {

From 7dee292f5f584679a94534f867bef2c428c5fe3a Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Thu, 30 Jan 2025 14:20:16 +0100
Subject: [PATCH 09/10] fix: api test for sum and count

---
 packages/api/src/balance/balance.service.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/api/src/balance/balance.service.spec.ts b/packages/api/src/balance/balance.service.spec.ts
index 603f98b2db..18a7f21eed 100644
--- a/packages/api/src/balance/balance.service.spec.ts
+++ b/packages/api/src/balance/balance.service.spec.ts
@@ -508,13 +508,13 @@ describe("BalanceService", () => {
 
     it("select count and sum", async () => {
       await service.getSumAndCountBalances(tokenAddress);
-      expect(mainQueryBuilderMock.addSelect).toHaveBeenCalledTimes(2);
-      expect(mainQueryBuilderMock.addSelect).toHaveBeenNthCalledWith(
-        1,
+      expect(mainQueryBuilderMock.select).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.addSelect).toHaveBeenCalledTimes(1);
+      expect(mainQueryBuilderMock.select).toHaveBeenCalledWith(
         "SUM(CAST(balances.balance AS NUMERIC))",
         "totalBalance"
       );
-      expect(mainQueryBuilderMock.addSelect).toHaveBeenNthCalledWith(2, "COUNT(balances.address)", "totalCount");
+      expect(mainQueryBuilderMock.addSelect).toHaveBeenCalledWith("COUNT(balances.address)", "totalCount");
     });
 
     it("sets query tokenAddress param", async () => {

From e7faebd7e33430501e0c45d08d8fb7d8cdd3a204 Mon Sep 17 00:00:00 2001
From: Marko Arambasic <marko@txfusion.io>
Date: Thu, 30 Jan 2025 14:59:09 +0100
Subject: [PATCH 10/10] fix: redirect tests for new token page

---
 .../tests/e2e/features/redirection/redirectionSet2.feature    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/tests/e2e/features/redirection/redirectionSet2.feature b/packages/app/tests/e2e/features/redirection/redirectionSet2.feature
index 0794c3e98e..61b058aa90 100644
--- a/packages/app/tests/e2e/features/redirection/redirectionSet2.feature
+++ b/packages/app/tests/e2e/features/redirection/redirectionSet2.feature
@@ -141,5 +141,5 @@ Feature: Redirection
 
     Examples:
       | Artifact type     | url         |
-      | token icon        | /address/   |
-      | token address     | /address/   |
+      | token icon        | /token/   |
+      | token address     | /token/   |