From e812a3f3b04b8ddb4bdd010f383d3d1649bffdf6 Mon Sep 17 00:00:00 2001
From: Tim Schmidt <tim@launchbadge.com>
Date: Wed, 11 Oct 2023 12:05:05 -0700
Subject: [PATCH 01/14] feat: add nft list and links from balances

Signed-off-by: Tim Schmidt <tim@launchbadge.com>
---
 src/components/account/NftsTable.vue          | 127 ++++++++++++++++++
 src/components/account/NftsTableController.ts |  85 ++++++++++++
 src/pages/AccountBalances.vue                 |  29 +++-
 tests/e2e/specs/AccountNavigation.cy.ts       |   1 +
 4 files changed, 238 insertions(+), 4 deletions(-)
 create mode 100644 src/components/account/NftsTable.vue
 create mode 100644 src/components/account/NftsTableController.ts

diff --git a/src/components/account/NftsTable.vue b/src/components/account/NftsTable.vue
new file mode 100644
index 000000000..1ee373513
--- /dev/null
+++ b/src/components/account/NftsTable.vue
@@ -0,0 +1,127 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <o-table
+    :data="nfts"
+    :loading="loading"
+    :hoverable="true"
+    :paginated="!isTouchDevice"
+    backend-pagination
+    :total="totalRowCount"
+    :current-page="currentPage"
+    :per-page="pageSize"
+    @page-change="onPageChange"
+    :striped="true"
+    :v-model:current-page="currentPage"
+    :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
+    aria-current-label="Current page"
+    aria-next-label="Next page"
+    aria-page-label="Page"
+    aria-previous-label="Previous page"
+    @cell-click="handleClick"
+  >
+    <o-table-column v-slot="props" field="token_id" label="Token">
+      <TokenLink
+        v-bind:show-extra="true"
+        v-bind:token-id="props.row.token_id"
+        v-bind:no-anchor="true"
+      />
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="serial" label="Serial Number" position="right">
+      {{props.row.serial_number}}
+    </o-table-column>
+
+  </o-table>
+
+  <EmptyTable v-if="!nfts.length"/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {defineComponent, inject, PropType, ref, ComputedRef, Ref} from 'vue';
+import { Nft, TokenBalance, TokenRelationship } from "@/schemas/HederaSchemas";
+import TokenLink from "@/components/values/TokenLink.vue";
+import TokenAmount from "@/components/values/TokenAmount.vue";
+import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
+import EmptyTable from "@/components/EmptyTable.vue";
+import {routeManager} from "@/router";
+import { NftsTableController } from "@/components/account/NftsTableController";
+
+export default defineComponent({
+  name: 'NftsTable',
+
+  components: {
+    EmptyTable,
+    TokenLink,
+  },
+
+  props: {
+    controller: {
+      type: Object as PropType<NftsTableController>,
+      required: true
+    },
+  },
+
+  setup(props) {
+    const isTouchDevice = inject('isTouchDevice', false)
+    const isMediumScreen = inject('isMediumScreen', true)
+
+    const handleClick = (nft: Nft, c: unknown, i: number, ci: number, event: MouseEvent) => {
+      if (nft.token_id && nft.serial_number) {
+        routeManager.routeToSerial(nft.token_id, nft.serial_number, event.ctrlKey || event.metaKey)
+      }
+    }
+
+    return {
+      isTouchDevice,
+      isMediumScreen,
+      nfts: props.controller.rows as ComputedRef<Nft[]>,
+      loading: props.controller.loading as ComputedRef<boolean>,
+      totalRowCount: props.controller.totalRowCount as ComputedRef<number>,
+      currentPage: props.controller.currentPage as Ref<number>,
+      onPageChange: props.controller.onPageChange,
+      pageSize: props.controller.pageSize as Ref<Number>,
+      handleClick,
+      ORUGA_MOBILE_BREAKPOINT
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/account/NftsTableController.ts b/src/components/account/NftsTableController.ts
new file mode 100644
index 000000000..c9573172e
--- /dev/null
+++ b/src/components/account/NftsTableController.ts
@@ -0,0 +1,85 @@
+/*-
+ *
+ * Hedera Mirror Node Explorer
+ *
+ * Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+    Nft,
+    Nfts,
+    NftTransactionHistory,
+    TokenBalancesResponse,
+    TokenDistribution,
+    TokenRelationship
+} from "@/schemas/HederaSchemas";
+import {ComputedRef, Ref} from "vue";
+import axios, {AxiosResponse} from "axios";
+import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
+import {Router} from "vue-router";
+
+export class NftsTableController extends TableController<Nft, string> {
+
+    public readonly accountId: Ref<string | null>
+
+    //
+    // Public
+    //
+
+    public constructor(router: Router, accountId: Ref<string | null>, pageSize: ComputedRef<number>) {
+        super(router, pageSize, 10 * pageSize.value, 5000, 10, 100)
+        this.accountId = accountId
+    }
+
+    //
+    // TableController
+    //
+
+    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
+        if (this.accountId.value == null) {
+            return Promise.resolve(null)
+        }
+
+        const params = {} as {
+            limit: number
+            "token.id": string | undefined
+            order: string
+        }
+        params.limit = limit
+        params.order = order
+        if (tokenId !== null) {
+            params["token.id"] = operator + ":" + tokenId
+        }
+
+        const r = await axios.get<Nfts>(
+          `api/v1/accounts/${this.accountId.value}/nfts`,
+          {params: params},
+        )
+        return r.data.nfts ?? []
+    }
+
+    public keyFor(row: Nft): string {
+        return row.token_id ?? ""
+    }
+
+    public stringFromKey(key: string): string {
+        return key;
+    }
+
+    public keyFromString(s: string): string | null {
+        return s;
+    }
+}
diff --git a/src/pages/AccountBalances.vue b/src/pages/AccountBalances.vue
index 9151d0add..0d032e142 100644
--- a/src/pages/AccountBalances.vue
+++ b/src/pages/AccountBalances.vue
@@ -36,6 +36,16 @@
       </template>
     </DashboardCard>
 
+    <DashboardCard>
+      <template v-slot:title>
+        <span class="h-is-primary-title">NFTs owned by </span>
+        <span class="h-is-secondary-text">{{ accountId }}</span>
+      </template>
+      <template v-slot:content>
+        <NftsTable :controller="nftsTableController"/>
+      </template>
+    </DashboardCard>
+
   </section>
 
   <Footer/>
@@ -55,12 +65,15 @@ import Footer from "@/components/Footer.vue";
 import {TokenRelationshipsTableController} from "@/components/account/TokenRelationshipsTableController";
 import {useRouter} from "vue-router";
 import {EntityID} from "@/utils/EntityID";
+import NftsTable from "@/components/account/NftsTable.vue";
+import { NftsTableController } from "@/components/account/NftsTableController";
 
 export default defineComponent({
 
   name: 'AccountBalances',
 
   components: {
+    NftsTable,
     Footer,
     DashboardCard,
     BalanceTable
@@ -85,18 +98,26 @@ export default defineComponent({
     })
 
     const tokenRelationshipTableController =
-        new TokenRelationshipsTableController(useRouter(), normalizedAccountId, perPage)
-    onMounted(() => tokenRelationshipTableController.mount())
-    onBeforeUnmount(() => tokenRelationshipTableController.unmount())
+        new TokenRelationshipsTableController(useRouter(), normalizedAccountId, perPage);
+    const nftsTableController = new NftsTableController(useRouter(), normalizedAccountId, perPage);
+    onMounted(() => {
+        tokenRelationshipTableController.mount()
+        nftsTableController.mount()
+    })
+    onBeforeUnmount(() => {
+        tokenRelationshipTableController.unmount()
+        nftsTableController.unmount()
+    })
 
     return {
       isSmallScreen,
       isTouchDevice,
       tokenRelationshipTableController,
+      nftsTableController,
     }
   }
 });
 
 </script>
 
-<style/>
\ No newline at end of file
+<style/>
diff --git a/tests/e2e/specs/AccountNavigation.cy.ts b/tests/e2e/specs/AccountNavigation.cy.ts
index dbea5d223..e4dbcee0a 100644
--- a/tests/e2e/specs/AccountNavigation.cy.ts
+++ b/tests/e2e/specs/AccountNavigation.cy.ts
@@ -85,6 +85,7 @@ describe('Account Navigation', () => {
         cy.contains('Token Balances for Account ' + accountId1)
 
         cy.get('table')
+            .eq(0)
             .find('tbody tr')
             .should('have.length.at.least', 2)
             .eq(0)

From 93d86347a94ee3f11f7cc5c80d29abf3d39ce674 Mon Sep 17 00:00:00 2001
From: Tim Schmidt <tim@launchbadge.com>
Date: Fri, 15 Dec 2023 11:27:11 -0800
Subject: [PATCH 02/14] feat: add collection page

Signed-off-by: Tim Schmidt <tim@launchbadge.com>
---
 src/components/account/CollectionTable.vue    | 132 ++++++++++++++++++
 .../account/CollectionTableController.ts      | 101 ++++++++++++++
 src/components/account/NftsTable.vue          |  21 ++-
 src/components/account/NftsTableController.ts |  32 ++++-
 src/pages/AccountCollection.vue               | 109 +++++++++++++++
 src/router.ts                                 |   7 +
 src/utils/RouteManager.ts                     |  19 +++
 7 files changed, 404 insertions(+), 17 deletions(-)
 create mode 100644 src/components/account/CollectionTable.vue
 create mode 100644 src/components/account/CollectionTableController.ts
 create mode 100644 src/pages/AccountCollection.vue

diff --git a/src/components/account/CollectionTable.vue b/src/components/account/CollectionTable.vue
new file mode 100644
index 000000000..16392a2fc
--- /dev/null
+++ b/src/components/account/CollectionTable.vue
@@ -0,0 +1,132 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+  <o-table
+    :data="collection"
+    :loading="loading"
+    :hoverable="true"
+    :paginated="!isTouchDevice"
+    backend-pagination
+    :total="totalRowCount"
+    :current-page="currentPage"
+    :per-page="pageSize"
+    @page-change="onPageChange"
+    :striped="true"
+    :v-model:current-page="currentPage"
+    :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
+    aria-current-label="Current page"
+    aria-next-label="Next page"
+    aria-page-label="Page"
+    aria-previous-label="Previous page"
+    @cell-click="handleClick"
+  >
+    <o-table-column v-slot="props" field="serial" label="Serial">
+      {{ props.row.serial_number }}
+    </o-table-column>
+  </o-table>
+
+  <EmptyTable v-if="!collection.length"/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {defineComponent, inject, PropType, ref, ComputedRef, Ref} from 'vue';
+import { Nft } from "@/schemas/HederaSchemas";
+import TokenLink from "@/components/values/TokenLink.vue";
+import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
+import EmptyTable from "@/components/EmptyTable.vue";
+import {routeManager} from "@/router";
+import { Collection, NftsTableController } from "@/components/account/NftsTableController";
+import { useRoute } from "vue-router";
+import { CollectionTableController } from "@/components/account/CollectionTableController";
+
+export default defineComponent({
+  name: 'CollectionTable',
+
+  components: {
+    EmptyTable,
+    TokenLink,
+  },
+
+  props: {
+    controller: {
+      type: Object as PropType<CollectionTableController>,
+      required: true
+    },
+    tokenId: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const isTouchDevice = inject('isTouchDevice', false)
+    const isMediumScreen = inject('isMediumScreen', true)
+
+    const handleClick = (
+      n: Nft,
+      c: unknown,
+      i: number,
+      ci: number,
+      event: MouseEvent,
+    ) => {
+      if (n.token_id && n.serial_number) {
+        routeManager.routeToSerial(
+          n.token_id,
+          n.serial_number,
+          event.ctrlKey || event.metaKey,
+        );
+      }
+    };
+
+    return {
+      isTouchDevice,
+      isMediumScreen,
+      collection: props.controller.rows as ComputedRef<Nft[]>,
+      loading: props.controller.loading as ComputedRef<boolean>,
+      totalRowCount: props.controller.totalRowCount as ComputedRef<number>,
+      currentPage: props.controller.currentPage as Ref<number>,
+      onPageChange: props.controller.onPageChange,
+      pageSize: props.controller.pageSize as Ref<Number>,
+      handleClick,
+      ORUGA_MOBILE_BREAKPOINT
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/account/CollectionTableController.ts b/src/components/account/CollectionTableController.ts
new file mode 100644
index 000000000..5a51140d0
--- /dev/null
+++ b/src/components/account/CollectionTableController.ts
@@ -0,0 +1,101 @@
+/*-
+ *
+ * Hedera Mirror Node Explorer
+ *
+ * Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {
+    Nft,
+    Nfts,
+    NftTransactionHistory,
+    TokenBalancesResponse,
+    TokenDistribution,
+    TokenRelationship
+} from "@/schemas/HederaSchemas";
+import {ComputedRef, Ref} from "vue";
+import axios, {AxiosResponse} from "axios";
+import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
+import {Router} from "vue-router";
+
+export class CollectionTableController extends TableController<Nft, string> {
+
+    public readonly accountId: Ref<string | null>
+    public readonly tokenId: string
+
+    //
+    // Public
+    //
+
+    public constructor(router: Router, tokenId: string, accountId: Ref<string | null>, pageSize: ComputedRef<number>) {
+        super(router, pageSize, 10 * pageSize.value, 5000, 10, 100)
+        this.accountId = accountId
+        this.tokenId = tokenId
+    }
+
+    //
+    // TableController
+    //
+
+    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
+        if (this.accountId.value == null) {
+            return Promise.resolve(null)
+        }
+
+        const params = {} as {
+            limit: number
+            "token.id": string | undefined
+            order: string
+        }
+        params.limit = 10000
+        params.order = order
+        if (tokenId !== null) {
+            params["token.id"] = operator + ":" + tokenId
+        }
+
+        const { data } = await axios.get<Nfts>(
+          `api/v1/accounts/${this.accountId.value}/nfts`,
+          {params: params},
+        )
+
+        const collectionsMap = new Map();
+        for (const nft of data.nfts!) {
+            let collection = collectionsMap.get(nft.token_id);
+            if (collection === undefined) {
+                collection = { count: 0, nfts: [] };
+                collectionsMap.set(nft.token_id, collection);
+            }
+            collection.count += 1;
+            collection.nfts.push(nft);
+        }
+
+        const nfts = collectionsMap.get(this.tokenId).nfts
+
+        return nfts
+    }
+
+    public keyFor(row: Nft): string {
+        return row.token_id ?? ""
+    }
+
+    public stringFromKey(key: string): string {
+        return key;
+    }
+
+    public keyFromString(s: string): string | null {
+        return s;
+    }
+}
diff --git a/src/components/account/NftsTable.vue b/src/components/account/NftsTable.vue
index 1ee373513..6c50e9cd0 100644
--- a/src/components/account/NftsTable.vue
+++ b/src/components/account/NftsTable.vue
@@ -23,7 +23,6 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-
   <o-table
     :data="nfts"
     :loading="loading"
@@ -50,11 +49,9 @@
         v-bind:no-anchor="true"
       />
     </o-table-column>
-
-    <o-table-column v-slot="props" field="serial" label="Serial Number" position="right">
-      {{props.row.serial_number}}
+    <o-table-column v-slot="props" field="owned" label="Owned" position="right">
+      {{props.row.tokens.count}}
     </o-table-column>
-
   </o-table>
 
   <EmptyTable v-if="!nfts.length"/>
@@ -68,13 +65,13 @@
 <script lang="ts">
 
 import {defineComponent, inject, PropType, ref, ComputedRef, Ref} from 'vue';
-import { Nft, TokenBalance, TokenRelationship } from "@/schemas/HederaSchemas";
+import { Nft } from "@/schemas/HederaSchemas";
 import TokenLink from "@/components/values/TokenLink.vue";
-import TokenAmount from "@/components/values/TokenAmount.vue";
 import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
 import EmptyTable from "@/components/EmptyTable.vue";
 import {routeManager} from "@/router";
-import { NftsTableController } from "@/components/account/NftsTableController";
+import { Collection, NftsTableController } from "@/components/account/NftsTableController";
+import { useRoute } from "vue-router";
 
 export default defineComponent({
   name: 'NftsTable',
@@ -92,19 +89,21 @@ export default defineComponent({
   },
 
   setup(props) {
+    const route = useRoute();
+
     const isTouchDevice = inject('isTouchDevice', false)
     const isMediumScreen = inject('isMediumScreen', true)
 
     const handleClick = (nft: Nft, c: unknown, i: number, ci: number, event: MouseEvent) => {
-      if (nft.token_id && nft.serial_number) {
-        routeManager.routeToSerial(nft.token_id, nft.serial_number, event.ctrlKey || event.metaKey)
+      if (nft.token_id) {
+        routeManager.routeToCollection(route.params.accountId as string, nft.token_id, event.ctrlKey || event.metaKey)
       }
     }
 
     return {
       isTouchDevice,
       isMediumScreen,
-      nfts: props.controller.rows as ComputedRef<Nft[]>,
+      nfts: props.controller.rows as ComputedRef<Collection[]>,
       loading: props.controller.loading as ComputedRef<boolean>,
       totalRowCount: props.controller.totalRowCount as ComputedRef<number>,
       currentPage: props.controller.currentPage as Ref<number>,
diff --git a/src/components/account/NftsTableController.ts b/src/components/account/NftsTableController.ts
index c9573172e..e2b4bc461 100644
--- a/src/components/account/NftsTableController.ts
+++ b/src/components/account/NftsTableController.ts
@@ -31,7 +31,15 @@ import axios, {AxiosResponse} from "axios";
 import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
 import {Router} from "vue-router";
 
-export class NftsTableController extends TableController<Nft, string> {
+export interface Collection {
+    token_id: string,
+    tokens: {
+        count: number,
+        nfts: Nft[]
+    }
+}
+
+export class NftsTableController extends TableController<Collection, string> {
 
     public readonly accountId: Ref<string | null>
 
@@ -48,7 +56,7 @@ export class NftsTableController extends TableController<Nft, string> {
     // TableController
     //
 
-    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
+    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Collection[] | null> {
         if (this.accountId.value == null) {
             return Promise.resolve(null)
         }
@@ -58,20 +66,32 @@ export class NftsTableController extends TableController<Nft, string> {
             "token.id": string | undefined
             order: string
         }
-        params.limit = limit
+        params.limit = 10000
         params.order = order
         if (tokenId !== null) {
             params["token.id"] = operator + ":" + tokenId
         }
 
-        const r = await axios.get<Nfts>(
+        const { data } = await axios.get<Nfts>(
           `api/v1/accounts/${this.accountId.value}/nfts`,
           {params: params},
         )
-        return r.data.nfts ?? []
+
+        const collectionsMap = new Map();
+        for (const nft of data.nfts!) {
+            let collection = collectionsMap.get(nft.token_id);
+            if (collection === undefined) {
+                collection = { count: 0, nfts: [] };
+                collectionsMap.set(nft.token_id, collection);
+            }
+            collection.count += 1;
+            collection.nfts.push(nft);
+        }
+
+        return Array.from(collectionsMap, ([token_id, tokens]) => ({ token_id,  tokens})) ?? []
     }
 
-    public keyFor(row: Nft): string {
+    public keyFor(row: Collection): string {
         return row.token_id ?? ""
     }
 
diff --git a/src/pages/AccountCollection.vue b/src/pages/AccountCollection.vue
new file mode 100644
index 000000000..a7e18c9f2
--- /dev/null
+++ b/src/pages/AccountCollection.vue
@@ -0,0 +1,109 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <section class="section" :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}">
+
+    <DashboardCard>
+      <template v-slot:title>
+        <span class="h-is-primary-title">Collection </span>
+        <span class="h-is-secondary-text">{{ tokenId }}</span>
+      </template>
+      <template v-slot:content>
+        <CollectionTable :token-id="tokenId" :controller="collectionTableController"/>
+      </template>
+    </DashboardCard>
+
+  </section>
+
+  <Footer/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted} from 'vue';
+import DashboardCard from "@/components/DashboardCard.vue";
+import Footer from "@/components/Footer.vue";
+import { useRouter } from "vue-router";
+import {EntityID} from "@/utils/EntityID";
+import { CollectionTableController } from "@/components/account/CollectionTableController";
+import CollectionTable from "@/components/account/CollectionTable.vue";
+
+export default defineComponent({
+
+  name: 'AccountCollection',
+
+  components: {
+    CollectionTable,
+    Footer,
+    DashboardCard
+  },
+
+  props: {
+    accountId: {
+      type: String,
+      required: true
+    },
+    tokenId: {
+      type: String,
+      required: true
+    },
+    network: String
+  },
+
+  setup(props) {
+    const isSmallScreen = inject('isSmallScreen', true)
+    const isMediumScreen = inject('isMediumScreen', true)
+    const isTouchDevice = inject('isTouchDevice', false)
+    const perPage = computed(() => isMediumScreen ? 15 : 5)
+    const normalizedAccountId = computed(() => {
+      const result = EntityID.parse(props.accountId) ?? EntityID.fromAddress(props.accountId)
+      return result !== null ? result.toString() : null
+    })
+
+    const collectionTableController = new CollectionTableController(useRouter(), props.tokenId, normalizedAccountId, perPage);
+    onMounted(() => {
+      collectionTableController.mount()
+    })
+    onBeforeUnmount(() => {
+      collectionTableController.unmount()
+    })
+
+    return {
+      isSmallScreen,
+      isTouchDevice,
+      collectionTableController
+    }
+  }
+});
+
+</script>
+
+<style/>
diff --git a/src/router.ts b/src/router.ts
index 674471f9e..cde8801b8 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -51,6 +51,7 @@ import AccountsWithKey from "@/pages/AccountsWithKey.vue";
 import AdminKeyDetails from "@/pages/AdminKeyDetails.vue";
 import AddressDetails from "@/pages/AddressDetails.vue";
 import RoutingSpec from "@/pages/RoutingSpec.vue";
+import AccountCollection from "@/pages/AccountCollection.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -140,6 +141,12 @@ const routes: Array<RouteRecordRaw> = [
     component: AccountBalances,
     props: true
   },
+  {
+    path: '/:network/accountbalances/:accountId/:tokenId',
+    name: 'AccountCollection',
+    component: AccountCollection,
+    props: true
+  },
   {
     path: '/:network/tokens',
     name: 'Tokens',
diff --git a/src/utils/RouteManager.ts b/src/utils/RouteManager.ts
index 6e4937ed2..f54e891d4 100644
--- a/src/utils/RouteManager.ts
+++ b/src/utils/RouteManager.ts
@@ -277,6 +277,13 @@ export class RouteManager {
         }
     }
 
+    public makeRouteToCollection(accountId: string, tokenId: string): RouteLocationRaw {
+        return {
+            name: 'AccountCollection',
+            params: {accountId: accountId, tokenId: tokenId, network: this.currentNetwork.value}
+        }
+    }
+
     public routeToSerial(tokenId: string, serialNumber: number, newTab = false): Promise<NavigationFailure | void | undefined> {
         let result: Promise<NavigationFailure | void | undefined>
         if (newTab) {
@@ -289,6 +296,18 @@ export class RouteManager {
         return result
     }
 
+    public routeToCollection(accountId: string, tokenId: string, newTab = false): Promise<NavigationFailure | void | undefined> {
+        let result: Promise<NavigationFailure | void | undefined>
+        if (newTab) {
+            const routeData = this.router.resolve(this.makeRouteToCollection(accountId, tokenId))
+            window.open(routeData.href, '_blank')
+            result = Promise.resolve()
+        } else {
+            result = this.router.push(this.makeRouteToCollection(accountId, tokenId))
+        }
+        return result
+    }
+
     //
     // Contract
     //

From d0ba728b4133b9a4f466626576c7ffce138c6804 Mon Sep 17 00:00:00 2001
From: Eric Le Ponner <eric.leponner@icloud.com>
Date: Mon, 22 Jan 2024 17:55:01 +0100
Subject: [PATCH 03/14] Fixed CollectionTableController.

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
---
 .../account/CollectionTableController.ts      | 53 +++++++------------
 1 file changed, 19 insertions(+), 34 deletions(-)

diff --git a/src/components/account/CollectionTableController.ts b/src/components/account/CollectionTableController.ts
index 5a51140d0..0aff3d32c 100644
--- a/src/components/account/CollectionTableController.ts
+++ b/src/components/account/CollectionTableController.ts
@@ -18,20 +18,13 @@
  *
  */
 
-import {
-    Nft,
-    Nfts,
-    NftTransactionHistory,
-    TokenBalancesResponse,
-    TokenDistribution,
-    TokenRelationship
-} from "@/schemas/HederaSchemas";
+import {Nft, Nfts} from "@/schemas/HederaSchemas";
 import {ComputedRef, Ref} from "vue";
-import axios, {AxiosResponse} from "axios";
+import axios from "axios";
 import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
 import {Router} from "vue-router";
 
-export class CollectionTableController extends TableController<Nft, string> {
+export class CollectionTableController extends TableController<Nft, number> {
 
     public readonly accountId: Ref<string | null>
     public readonly tokenId: string
@@ -50,20 +43,23 @@ export class CollectionTableController extends TableController<Nft, string> {
     // TableController
     //
 
-    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
-        if (this.accountId.value == null) {
+    public async load(serialNumber: number | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
+        if (this.tokenId == null || this.accountId.value == null) {
             return Promise.resolve(null)
         }
 
         const params = {} as {
             limit: number
             "token.id": string | undefined
+            serialnumber: string | undefined
             order: string
         }
-        params.limit = 10000
+        params.limit = limit
         params.order = order
-        if (tokenId !== null) {
-            params["token.id"] = operator + ":" + tokenId
+        params["token.id"] = this.tokenId
+
+        if (serialNumber !== null) {
+            params.serialnumber = operator + ":" + serialNumber
         }
 
         const { data } = await axios.get<Nfts>(
@@ -71,31 +67,20 @@ export class CollectionTableController extends TableController<Nft, string> {
           {params: params},
         )
 
-        const collectionsMap = new Map();
-        for (const nft of data.nfts!) {
-            let collection = collectionsMap.get(nft.token_id);
-            if (collection === undefined) {
-                collection = { count: 0, nfts: [] };
-                collectionsMap.set(nft.token_id, collection);
-            }
-            collection.count += 1;
-            collection.nfts.push(nft);
-        }
-
-        const nfts = collectionsMap.get(this.tokenId).nfts
+        const nfts = data.nfts ?? null
 
-        return nfts
+        return Promise.resolve(nfts)
     }
 
-    public keyFor(row: Nft): string {
-        return row.token_id ?? ""
+    public keyFor(row: Nft): number {
+        return row.serial_number ?? 0
     }
 
-    public stringFromKey(key: string): string {
-        return key;
+    public stringFromKey(serialNumber: number): string {
+        return serialNumber.toString()
     }
 
-    public keyFromString(s: string): string | null {
-        return s;
+    public keyFromString(s: string): number | null {
+        return Number(s)
     }
 }

From 9af86d0e2943c57c42415c8a35fe90650c8ff304 Mon Sep 17 00:00:00 2001
From: Eric Le Ponner <eric.leponner@icloud.com>
Date: Tue, 23 Jan 2024 11:18:05 +0100
Subject: [PATCH 04/14] Added NftCollectionCache (to be used later).

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
---
 src/utils/cache/CacheUtils.ts         |  2 +
 src/utils/cache/NftCollectionCache.ts | 91 +++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/utils/cache/NftCollectionCache.ts

diff --git a/src/utils/cache/CacheUtils.ts b/src/utils/cache/CacheUtils.ts
index 0fac22c82..fdb32d190 100644
--- a/src/utils/cache/CacheUtils.ts
+++ b/src/utils/cache/CacheUtils.ts
@@ -47,6 +47,7 @@ import {SourcifyCache} from "@/utils/cache/SourcifyCache";
 import {TokenAssociationCache} from "@/utils/cache/TokenAssociationCache";
 import {MarketDataCache} from "@/components/dashboard/MarketDataCache";
 import { ContractResultsLogsByContractIdCache } from "@/utils/cache/ContractResultsLogsByContractIdCache"
+import {NftCollectionCache} from "@/utils/cache/NftCollectionCache";
 
 export class CacheUtils {
 
@@ -68,6 +69,7 @@ export class CacheUtils {
         HbarPriceCache.instance.clear()
         // IPFSCache.instance => no clear: we preserve it because IPFS content is valid for all networks
         NetworkCache.instance.clear()
+        NftCollectionCache.instance.clear()
         SourcifyCache.instance.clear()
         StakeCache.instance.clear()
         TokenAssociationCache.instance.clear()
diff --git a/src/utils/cache/NftCollectionCache.ts b/src/utils/cache/NftCollectionCache.ts
new file mode 100644
index 000000000..b8f0b8344
--- /dev/null
+++ b/src/utils/cache/NftCollectionCache.ts
@@ -0,0 +1,91 @@
+/*-
+ *
+ * Hedera Mirror Node Explorer
+ *
+ * Copyright (C) 2021 - 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {EntityCache} from "@/utils/cache/base/EntityCache";
+import {Nft, Nfts} from "@/schemas/HederaSchemas";
+import axios, {AxiosResponse} from "axios";
+
+export class NftCollectionCache extends EntityCache<string, NftCollectionInfo[]> {
+
+    public static readonly instance = new NftCollectionCache()
+
+    //
+    // Cache
+    //
+
+    protected async load(accountId: string): Promise<NftCollectionInfo[]> {
+        let result: NftCollectionInfo[] = []
+        let nextURL: string|null = "api/v1/accounts/" + accountId + "/nfts"
+        const params = {
+            limit: 25
+        }
+        while (nextURL !== null) {
+            const response: AxiosResponse<Nfts>
+                = await axios.get<Nfts>(nextURL, { params: params})
+            this.appendNfts(response.data.nfts ?? [], result)
+            nextURL = response.data.links?.next ?? null
+        }
+        return Promise.resolve(result)
+    }
+
+    //
+    // Private
+    //
+
+    private static readonly SAMPLE_COUNT = 10
+
+    private appendNfts(nfts: Nft[], result: NftCollectionInfo[]) {
+        for (const nft of nfts) {
+            this.appendNft(nft, result)
+        }
+    }
+
+    private appendNft(nft: Nft, result: NftCollectionInfo[]) {
+
+        //
+        // Nfts[] are returned in a specific order.
+        // See https://testnet.mirrornode.hedera.com/api/v1/docs/#/accounts/listNftByAccountId
+        // Logic below assumes this ordering
+        //
+
+        const lastCollection = result.length >= 1 ? result[result.length-1] : null
+        if (lastCollection !== null && lastCollection.tokenId === nft.token_id) {
+            lastCollection.collectionSize += 1
+            if (lastCollection.samples.length < NftCollectionCache.SAMPLE_COUNT) {
+                lastCollection.samples.push(nft)
+            }
+        } else {
+            result.push(new NftCollectionInfo(nft.token_id ?? null, nft))
+        }
+    }
+}
+
+export class NftCollectionInfo {
+
+    public readonly tokenId: string|null
+    public collectionSize: number
+    public samples: Nft[]
+
+    public constructor(tokenId: string|null, firstSample: Nft) {
+        this.tokenId = tokenId
+        this.collectionSize = 1
+        this.samples = [firstSample]
+    }
+}
\ No newline at end of file

From 66a5934a3ac4c7eb74dc680176ad10b618aad3ce Mon Sep 17 00:00:00 2001
From: Eric Le Ponner <eric.leponner@icloud.com>
Date: Tue, 23 Jan 2024 12:39:19 +0100
Subject: [PATCH 05/14] NftsTable vue now uses NftCollectionCache in place of
 NftsTableController.

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
---
 src/components/account/CollectionTable.vue    |   8 +-
 src/components/account/NftsTable.vue          |  51 ++++-----
 src/components/account/NftsTableController.ts | 105 ------------------
 src/pages/AccountBalances.vue                 |  14 ++-
 4 files changed, 33 insertions(+), 145 deletions(-)
 delete mode 100644 src/components/account/NftsTableController.ts

diff --git a/src/components/account/CollectionTable.vue b/src/components/account/CollectionTable.vue
index 16392a2fc..8aa9dad6e 100644
--- a/src/components/account/CollectionTable.vue
+++ b/src/components/account/CollectionTable.vue
@@ -57,15 +57,13 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, PropType, ref, ComputedRef, Ref} from 'vue';
-import { Nft } from "@/schemas/HederaSchemas";
+import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue';
+import {Nft} from "@/schemas/HederaSchemas";
 import TokenLink from "@/components/values/TokenLink.vue";
 import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
 import EmptyTable from "@/components/EmptyTable.vue";
 import {routeManager} from "@/router";
-import { Collection, NftsTableController } from "@/components/account/NftsTableController";
-import { useRoute } from "vue-router";
-import { CollectionTableController } from "@/components/account/CollectionTableController";
+import {CollectionTableController} from "@/components/account/CollectionTableController";
 
 export default defineComponent({
   name: 'CollectionTable',
diff --git a/src/components/account/NftsTable.vue b/src/components/account/NftsTable.vue
index 6c50e9cd0..8b8d123e4 100644
--- a/src/components/account/NftsTable.vue
+++ b/src/components/account/NftsTable.vue
@@ -24,37 +24,34 @@
 
 <template>
   <o-table
-    :data="nfts"
-    :loading="loading"
-    :hoverable="true"
+    :data="collections"
     :paginated="!isTouchDevice"
-    backend-pagination
-    :total="totalRowCount"
-    :current-page="currentPage"
-    :per-page="pageSize"
-    @page-change="onPageChange"
+    :per-page="perPage"
+    @cell-click="handleClick"
+
+    :hoverable="true"
+    :narrowed="true"
     :striped="true"
-    :v-model:current-page="currentPage"
     :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
+
     aria-current-label="Current page"
     aria-next-label="Next page"
     aria-page-label="Page"
     aria-previous-label="Previous page"
-    @cell-click="handleClick"
   >
     <o-table-column v-slot="props" field="token_id" label="Token">
       <TokenLink
         v-bind:show-extra="true"
-        v-bind:token-id="props.row.token_id"
+        v-bind:token-id="props.row.tokenId"
         v-bind:no-anchor="true"
       />
     </o-table-column>
     <o-table-column v-slot="props" field="owned" label="Owned" position="right">
-      {{props.row.tokens.count}}
+      {{ props.row.collectionSize }}
     </o-table-column>
   </o-table>
 
-  <EmptyTable v-if="!nfts.length"/>
+  <EmptyTable v-if="!collections.length"/>
 
 </template>
 
@@ -64,14 +61,13 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, PropType, ref, ComputedRef, Ref} from 'vue';
-import { Nft } from "@/schemas/HederaSchemas";
+import {computed, defineComponent, inject, PropType} from 'vue';
 import TokenLink from "@/components/values/TokenLink.vue";
 import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
 import EmptyTable from "@/components/EmptyTable.vue";
 import {routeManager} from "@/router";
-import { Collection, NftsTableController } from "@/components/account/NftsTableController";
-import { useRoute } from "vue-router";
+import {useRoute} from "vue-router";
+import {NftCollectionInfo} from "@/utils/cache/NftCollectionCache";
 
 export default defineComponent({
   name: 'NftsTable',
@@ -82,33 +78,30 @@ export default defineComponent({
   },
 
   props: {
-    controller: {
-      type: Object as PropType<NftsTableController>,
+    collections: {
+      type: Object as PropType<NftCollectionInfo[]>,
       required: true
     },
   },
 
-  setup(props) {
+  setup() {
     const route = useRoute();
 
     const isTouchDevice = inject('isTouchDevice', false)
     const isMediumScreen = inject('isMediumScreen', true)
 
-    const handleClick = (nft: Nft, c: unknown, i: number, ci: number, event: MouseEvent) => {
-      if (nft.token_id) {
-        routeManager.routeToCollection(route.params.accountId as string, nft.token_id, event.ctrlKey || event.metaKey)
+    const perPage = computed(() => isMediumScreen ? 15 : 5)
+
+    const handleClick = (nft: NftCollectionInfo, c: unknown, i: number, ci: number, event: MouseEvent) => {
+      if (nft.tokenId) {
+        routeManager.routeToCollection(route.params.accountId as string, nft.tokenId, event.ctrlKey || event.metaKey)
       }
     }
 
     return {
       isTouchDevice,
       isMediumScreen,
-      nfts: props.controller.rows as ComputedRef<Collection[]>,
-      loading: props.controller.loading as ComputedRef<boolean>,
-      totalRowCount: props.controller.totalRowCount as ComputedRef<number>,
-      currentPage: props.controller.currentPage as Ref<number>,
-      onPageChange: props.controller.onPageChange,
-      pageSize: props.controller.pageSize as Ref<Number>,
+      perPage,
       handleClick,
       ORUGA_MOBILE_BREAKPOINT
     }
diff --git a/src/components/account/NftsTableController.ts b/src/components/account/NftsTableController.ts
deleted file mode 100644
index e2b4bc461..000000000
--- a/src/components/account/NftsTableController.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*-
- *
- * Hedera Mirror Node Explorer
- *
- * Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import {
-    Nft,
-    Nfts,
-    NftTransactionHistory,
-    TokenBalancesResponse,
-    TokenDistribution,
-    TokenRelationship
-} from "@/schemas/HederaSchemas";
-import {ComputedRef, Ref} from "vue";
-import axios, {AxiosResponse} from "axios";
-import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
-import {Router} from "vue-router";
-
-export interface Collection {
-    token_id: string,
-    tokens: {
-        count: number,
-        nfts: Nft[]
-    }
-}
-
-export class NftsTableController extends TableController<Collection, string> {
-
-    public readonly accountId: Ref<string | null>
-
-    //
-    // Public
-    //
-
-    public constructor(router: Router, accountId: Ref<string | null>, pageSize: ComputedRef<number>) {
-        super(router, pageSize, 10 * pageSize.value, 5000, 10, 100)
-        this.accountId = accountId
-    }
-
-    //
-    // TableController
-    //
-
-    public async load(tokenId: string | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Collection[] | null> {
-        if (this.accountId.value == null) {
-            return Promise.resolve(null)
-        }
-
-        const params = {} as {
-            limit: number
-            "token.id": string | undefined
-            order: string
-        }
-        params.limit = 10000
-        params.order = order
-        if (tokenId !== null) {
-            params["token.id"] = operator + ":" + tokenId
-        }
-
-        const { data } = await axios.get<Nfts>(
-          `api/v1/accounts/${this.accountId.value}/nfts`,
-          {params: params},
-        )
-
-        const collectionsMap = new Map();
-        for (const nft of data.nfts!) {
-            let collection = collectionsMap.get(nft.token_id);
-            if (collection === undefined) {
-                collection = { count: 0, nfts: [] };
-                collectionsMap.set(nft.token_id, collection);
-            }
-            collection.count += 1;
-            collection.nfts.push(nft);
-        }
-
-        return Array.from(collectionsMap, ([token_id, tokens]) => ({ token_id,  tokens})) ?? []
-    }
-
-    public keyFor(row: Collection): string {
-        return row.token_id ?? ""
-    }
-
-    public stringFromKey(key: string): string {
-        return key;
-    }
-
-    public keyFromString(s: string): string | null {
-        return s;
-    }
-}
diff --git a/src/pages/AccountBalances.vue b/src/pages/AccountBalances.vue
index 0d032e142..749a843f6 100644
--- a/src/pages/AccountBalances.vue
+++ b/src/pages/AccountBalances.vue
@@ -42,7 +42,7 @@
         <span class="h-is-secondary-text">{{ accountId }}</span>
       </template>
       <template v-slot:content>
-        <NftsTable :controller="nftsTableController"/>
+        <NftsTable :collections="nftCollections"/>
       </template>
     </DashboardCard>
 
@@ -66,7 +66,7 @@ import {TokenRelationshipsTableController} from "@/components/account/TokenRelat
 import {useRouter} from "vue-router";
 import {EntityID} from "@/utils/EntityID";
 import NftsTable from "@/components/account/NftsTable.vue";
-import { NftsTableController } from "@/components/account/NftsTableController";
+import {NftCollectionCache} from "@/utils/cache/NftCollectionCache";
 
 export default defineComponent({
 
@@ -99,21 +99,23 @@ export default defineComponent({
 
     const tokenRelationshipTableController =
         new TokenRelationshipsTableController(useRouter(), normalizedAccountId, perPage);
-    const nftsTableController = new NftsTableController(useRouter(), normalizedAccountId, perPage);
+    const nftCollectionLookup = NftCollectionCache.instance.makeLookup(normalizedAccountId)
     onMounted(() => {
         tokenRelationshipTableController.mount()
-        nftsTableController.mount()
+        nftCollectionLookup.mount()
     })
     onBeforeUnmount(() => {
         tokenRelationshipTableController.unmount()
-        nftsTableController.unmount()
+        nftCollectionLookup.unmount()
     })
 
+    const nftCollections = computed( () => nftCollectionLookup.entity.value ?? [])
+
     return {
       isSmallScreen,
       isTouchDevice,
       tokenRelationshipTableController,
-      nftsTableController,
+      nftCollections
     }
   }
 });

From 3d6ea146f2345a722bb041e7b30ea462e1dd008d Mon Sep 17 00:00:00 2001
From: Eric Le Ponner <eric.leponner@icloud.com>
Date: Tue, 23 Jan 2024 15:14:29 +0100
Subject: [PATCH 06/14] Extended AccountBalances unit test (to be validate
 NftCollectionCache).

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
---
 src/pages/AccountBalances.vue              |  4 +-
 tests/unit/account/AccountBalances.spec.ts | 57 ++++++++++++++++++++--
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/pages/AccountBalances.vue b/src/pages/AccountBalances.vue
index 749a843f6..6f7a28292 100644
--- a/src/pages/AccountBalances.vue
+++ b/src/pages/AccountBalances.vue
@@ -26,7 +26,7 @@
 
   <section class="section" :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}">
 
-    <DashboardCard>
+    <DashboardCard id="balanceCard">
       <template v-slot:title>
         <span class="h-is-primary-title">Token Balances for Account </span>
         <span class="h-is-secondary-text">{{ accountId }}</span>
@@ -36,7 +36,7 @@
       </template>
     </DashboardCard>
 
-    <DashboardCard>
+    <DashboardCard id="nftsCard">
       <template v-slot:title>
         <span class="h-is-primary-title">NFTs owned by </span>
         <span class="h-is-secondary-text">{{ accountId }}</span>
diff --git a/tests/unit/account/AccountBalances.spec.ts b/tests/unit/account/AccountBalances.spec.ts
index 852d6b20f..27bb0c8da 100644
--- a/tests/unit/account/AccountBalances.spec.ts
+++ b/tests/unit/account/AccountBalances.spec.ts
@@ -23,7 +23,7 @@ import {flushPromises, mount} from "@vue/test-utils"
 import router from "@/router";
 import axios from "axios";
 import {
-    SAMPLE_ASSOCIATED_TOKEN, SAMPLE_ASSOCIATED_TOKEN_2,
+    SAMPLE_ASSOCIATED_TOKEN, SAMPLE_ASSOCIATED_TOKEN_2, SAMPLE_NFTS, SAMPLE_NONFUNGIBLE,
     SAMPLE_TOKEN_ASSOCIATIONS
 } from "../Mocks";
 import MockAdapter from "axios-mock-adapter";
@@ -42,7 +42,7 @@ HMSF.forceUTC = true
 
 describe("AccountBalances.vue", () => {
 
-    test("all props", async () => {
+    test("tokens", async () => {
 
         await router.push("/") // To avoid "missing required param 'network'" error
 
@@ -70,13 +70,62 @@ describe("AccountBalances.vue", () => {
         // console.log(wrapper.find('thead').text())
         // console.log(wrapper.find('tbody').text())
 
-        expect(wrapper.find('thead').text()).toBe("Token Balance")
-        expect(wrapper.find('tbody').text()).toBe(
+        const balanceCard = wrapper.get("#balanceCard")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance")
+        expect(balanceCard.find('tbody').text()).toBe(
             "0.0.34332104" + "HSuite" + "0.0000" +
             "0.0.49292859" + "TokenA7" + "0.00000000")
 
+        const nftsCard = wrapper.get("#nftsCard")
+        expect(nftsCard.find('thead').text()).toBe("Token Owned")
+        expect(nftsCard.find('tbody').text()).toBe("")
+
+        wrapper.unmount()
+        await flushPromises()
+        mock.restore()
+    });
+
+    test("nfts", async () => {
+
+        await router.push("/") // To avoid "missing required param 'network'" error
+
+        const mock = new MockAdapter(axios);
+        const accountId = SAMPLE_NFTS.nfts[0].account_id
+        const tokenId = SAMPLE_NFTS.nfts[0].token_id
+
+        const matcher1 = `/api/v1/accounts/${accountId}/nfts`
+        mock.onGet(matcher1).reply(200, SAMPLE_NFTS)
+
+        const matcher2 = "/api/v1/tokens/" + tokenId
+        mock.onGet(matcher2).reply(200, SAMPLE_NONFUNGIBLE)
+
+        const matcher3 = "/api/v1/accounts/" + accountId + "/tokens"
+        mock.onGet(matcher3).reply(200, { tokens: []})
+
+        const wrapper = mount(AccountBalances, {
+            global: {
+                plugins: [router, Oruga]
+            },
+            props: {
+                accountId: accountId
+            },
+        });
+
+        await flushPromises()
+        // console.log(wrapper.find('thead').text())
+        // console.log(wrapper.find('tbody').text())
+
+        const balanceCard = wrapper.get("#balanceCard")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance")
+        expect(balanceCard.find('tbody').text()).toBe("")
+
+        const nftsCard = wrapper.get("#nftsCard")
+        expect(nftsCard.find('thead').text()).toBe("Token Owned")
+        expect(nftsCard.find('tbody').text()).toBe("0.0.748383Ħ Frens Kingdom2")
+
         wrapper.unmount()
         await flushPromises()
+        mock.restore()
     });
 
 });

From fe67a1ecde305c38dbafc671e6b2a48d94896977 Mon Sep 17 00:00:00 2001
From: Eric Le Ponner <eric.leponner@icloud.com>
Date: Tue, 23 Jan 2024 15:15:05 +0100
Subject: [PATCH 07/14] Fixed warning reported by esbuild in
 ApproveAllowanceDialog vue.

Signed-off-by: Eric Le Ponner <eric.leponner@icloud.com>
---
 src/components/allowances/ApproveAllowanceDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/allowances/ApproveAllowanceDialog.vue b/src/components/allowances/ApproveAllowanceDialog.vue
index 55e932da4..c214ee09b 100644
--- a/src/components/allowances/ApproveAllowanceDialog.vue
+++ b/src/components/allowances/ApproveAllowanceDialog.vue
@@ -321,7 +321,7 @@ export default defineComponent({
         result ||= allowanceChoice.value !== "token"
         result ||= selectedSpender.value !== props.currentTokenAllowance?.spender
         result ||= selectedToken.value !== props.currentTokenAllowance.token_id
-        result ||= selectedTokenAmount.value !== props.currentTokenAllowance?.amount_granted.toString() ?? null
+        result ||= selectedTokenAmount.value !== (props.currentTokenAllowance?.amount_granted.toString() ?? null)
       } else {
         result = true
       }

From 495f03ea9f63cd2bdf67b5ece5ba394c4aec04b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 16:35:18 +0100
Subject: [PATCH 08/14] 'Balance' column -> 'Balance/Nb of NFTs' in
 BalanceTable.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/components/account/BalanceTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/account/BalanceTable.vue b/src/components/account/BalanceTable.vue
index b0cb64ca7..361fd1a26 100644
--- a/src/components/account/BalanceTable.vue
+++ b/src/components/account/BalanceTable.vue
@@ -54,7 +54,7 @@
       />
     </o-table-column>
 
-    <o-table-column v-slot="props" field="balance" label="Balance" position="right">
+    <o-table-column v-slot="props" field="balance" label="Balance/Nb of NFTs" position="right">
       <TokenAmount v-bind:amount="BigInt(props.row.balance)"
                    v-bind:token-id="props.row.token_id"/>
     </o-table-column>

From ec96e53f65d83146471a9122a2a42f8a4f41da8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 16:36:37 +0100
Subject: [PATCH 09/14] 'Token Balances for Account' -> 'All Tokens Owned by'
 in AccountBalances.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/pages/AccountBalances.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/AccountBalances.vue b/src/pages/AccountBalances.vue
index 6f7a28292..e7eaa16bb 100644
--- a/src/pages/AccountBalances.vue
+++ b/src/pages/AccountBalances.vue
@@ -28,7 +28,7 @@
 
     <DashboardCard id="balanceCard">
       <template v-slot:title>
-        <span class="h-is-primary-title">Token Balances for Account </span>
+        <span class="h-is-primary-title">All Tokens Owned by </span>
         <span class="h-is-secondary-text">{{ accountId }}</span>
       </template>
       <template v-slot:content>
@@ -38,7 +38,7 @@
 
     <DashboardCard id="nftsCard">
       <template v-slot:title>
-        <span class="h-is-primary-title">NFTs owned by </span>
+        <span class="h-is-primary-title">NFTs Owned by </span>
         <span class="h-is-secondary-text">{{ accountId }}</span>
       </template>
       <template v-slot:content>

From 8cc2420dc03d02aee2179d340df6d5c48ff6a8e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 17:32:56 +0100
Subject: [PATCH 10/14] AccountDetails and ContractDetails always display at
 least a subset of the tokens with non-zero balance.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/pages/AccountDetails.vue  | 35 ++++++++++++++++++++++-------------
 src/pages/ContractDetails.vue | 33 +++++++++++++++++++--------------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
index b9fed9d9a..2e9112c2d 100644
--- a/src/pages/AccountDetails.vue
+++ b/src/pages/AccountDetails.vue
@@ -97,7 +97,7 @@
         <div class="columns h-is-property-text">
           <div class="column">
             <Property id="balance">
-              <template v-slot:name>{{ tokenBalances?.length ? 'Balances' : 'Balance' }}</template>
+              <template v-slot:name>{{ displayedBalances.length ? 'Balances' : 'Balance' }}</template>
               <template v-slot:value>
                 <div v-if="account" class="h-is-tertiary-text">
                   <HbarAmount v-bind:amount="hbarBalance" v-bind:show-extra="true" timestamp="0"/>
@@ -105,16 +105,14 @@
                 <div v-else-if="isInactiveEvmAddress" class="h-is-tertiary-text">
                   <HbarAmount v-bind:amount="0" v-bind:show-extra="true" timestamp="0"/>
                 </div>
+                <div v-for="b in displayedBalances" :key="b.token_id ?? undefined" class="h-is-tertiary-text">
+                    <TokenAmount v-bind:amount="BigInt(b.balance)" v-bind:show-extra="true" v-bind:token-id="b.token_id"/>
+                </div>
                 <div v-if="displayAllTokenLinks">
                   <router-link :to="{name: 'AccountBalances', params: {accountId: accountId}}">
-                    Show all token balances
+                    <span class="h-is-text-size-3 has-text-grey">Show all tokens</span>
                   </router-link>
                 </div>
-                <div v-else>
-                  <div v-for="b in tokenBalances ?? []" :key="b.token_id ?? undefined" class="h-is-tertiary-text">
-                    <TokenAmount v-bind:amount="BigInt(b.balance)" v-bind:show-extra="true" v-bind:token-id="b.token_id"/>
-                  </div>
-                </div>
                 <div v-if="elapsed && !isSmallScreen" class="has-text-grey has-text-right"> {{ elapsed }} ago</div>
               </template>
             </Property>
@@ -283,7 +281,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, watch} from 'vue';
+import {computed, ComputedRef, defineComponent, inject, onBeforeUnmount, onMounted, watch} from 'vue';
 import KeyValue from "@/components/values/KeyValue.vue";
 import PlayPauseButton from "@/components/PlayPauseButton.vue";
 import TransactionTable from "@/components/transaction/TransactionTable.vue";
@@ -314,6 +312,7 @@ import EVMAddress from "@/components/values/EVMAddress.vue";
 import ApproveAllowanceSection from "@/components/allowances/ApproveAllowanceSection.vue";
 import InfoTooltip from "@/components/InfoTooltip.vue";
 import Copyable from "@/components/Copyable.vue";
+import {TokenBalance} from "@/schemas/HederaSchemas";
 
 const MAX_TOKEN_BALANCES = 10
 
@@ -413,10 +412,6 @@ export default defineComponent({
     const balanceAnalyzer = new BalanceAnalyzer(accountLocParser.accountId, 10000)
     onMounted(() => balanceAnalyzer.mount())
     onBeforeUnmount(() => balanceAnalyzer.unmount())
-    const displayAllTokenLinks = computed(() => {
-      const tokenCount = balanceAnalyzer.tokenBalances.value?.length ?? 0
-      return tokenCount > MAX_TOKEN_BALANCES
-    })
     const elapsed = computed(() => {
           let result: string | null
           if (balanceAnalyzer.balanceTimeStamp.value) {
@@ -435,6 +430,20 @@ export default defineComponent({
         }
     )
 
+    const displayedBalances: ComputedRef<TokenBalance[]> = computed(() => {
+        const result: TokenBalance[] = []
+        const allBalances = balanceAnalyzer.tokenBalances.value
+        for (let i = 0; i < allBalances.length && result.length < MAX_TOKEN_BALANCES; i++) {
+            if (allBalances[i].balance > 0) {
+                result.push(allBalances[i])
+            }
+        }
+        return result
+    })
+
+    const displayAllTokenLinks = computed(
+        () => displayedBalances.value.length < balanceAnalyzer.tokenBalances.value.length)
+
     //
     // contract
     //
@@ -500,7 +509,7 @@ export default defineComponent({
       ethereumAddress: accountLocParser.ethereumAddress,
       balanceTimeStamp: balanceAnalyzer.balanceTimeStamp,
       hbarBalance: balanceAnalyzer.hbarBalance,
-      tokenBalances: balanceAnalyzer.tokenBalances,
+      displayedBalances,
       balanceAnalyzer, // For testing purpose
       displayAllTokenLinks,
       elapsed,
diff --git a/src/pages/ContractDetails.vue b/src/pages/ContractDetails.vue
index 96fe2f4f2..0f02d83fe 100644
--- a/src/pages/ContractDetails.vue
+++ b/src/pages/ContractDetails.vue
@@ -68,20 +68,18 @@
 
       <template v-slot:leftContent>
             <Property id="balance">
-              <template v-slot:name>{{ tokens?.length ? 'Balances' : 'Balance' }}</template>
+              <template v-slot:name>{{ displayedBalances.length ? 'Balances' : 'Balance' }}</template>
               <template v-slot:value>
                 <div class="has-flex-direction-column">
                   <HbarAmount v-if="contract" :amount="balance" :show-extra="true" timestamp="0"/>
+                  <div v-for="t in displayedBalances" :key="t.token_id ?? undefined">
+                    <TokenAmount :amount="BigInt(t.balance)" :show-extra="true" :token-id="t.token_id"/>
+                  </div>
                   <div v-if="displayAllTokenLinks">
                     <router-link :to="{name: 'AccountBalances', params: {accountId: contractId}}">
-                      See all token balances
+                      <span class="h-is-text-size-3 has-text-grey">Show all tokens</span>
                     </router-link>
                   </div>
-                  <div v-else>
-                    <div v-for="t in tokens ?? []" :key="t.token_id ?? undefined">
-                      <TokenAmount :amount="BigInt(t.balance)" :show-extra="true" :token-id="t.token_id"/>
-                    </div>
-                  </div>
                 </div>
               </template>
             </Property>
@@ -311,9 +309,6 @@ export default defineComponent({
     const balance: ComputedRef<number|null>
         = computed(() => accountLookup.entity.value?.balance?.balance ?? null)
 
-    const tokens: ComputedRef<TokenBalance[]|null>
-        = computed(() => accountLookup.entity.value?.balance?.tokens ?? null)
-
     //
     // balanceCache
     //
@@ -321,11 +316,21 @@ export default defineComponent({
     const balanceAnalyzer = new BalanceAnalyzer(contractLocParser.contractId, 10000)
     onMounted(() => balanceAnalyzer.mount())
     onBeforeUnmount(() => balanceAnalyzer.unmount())
-    const displayAllTokenLinks = computed(() => {
-      const tokenCount = balanceAnalyzer.tokenBalances.value?.length ?? 0
-      return tokenCount > MAX_TOKEN_BALANCES
+
+    const displayedBalances: ComputedRef<TokenBalance[]> = computed(() => {
+      const result: TokenBalance[] = []
+      const allBalances = balanceAnalyzer.tokenBalances.value
+      for (let i = 0; i < allBalances.length && result.length < MAX_TOKEN_BALANCES; i++) {
+        if (allBalances[i].balance > 0) {
+          result.push(allBalances[i])
+        }
+      }
+      return result
     })
 
+    const displayAllTokenLinks = computed(
+        () => displayedBalances.value.length < balanceAnalyzer.tokenBalances.value.length)
+
     const accountRoute = computed(() => {
       return normalizedContractId.value !== null ?  routeManager.makeRouteToAccount(normalizedContractId.value) : null
     })
@@ -347,7 +352,7 @@ export default defineComponent({
       isTouchDevice,
       contract: contractLocParser.entity,
       balance,
-      tokens,
+      displayedBalances,
       ethereumAddress: contractLocParser.ethereumAddress,
       displayNonce,
       accountChecksum,

From db443b1597f60207a341aca42d8c8234385ec7d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 19:45:44 +0100
Subject: [PATCH 11/14] Display token symbol and account ID in title of
 AccountCollection.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/pages/AccountCollection.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/pages/AccountCollection.vue b/src/pages/AccountCollection.vue
index a7e18c9f2..20b0b9ab4 100644
--- a/src/pages/AccountCollection.vue
+++ b/src/pages/AccountCollection.vue
@@ -28,8 +28,15 @@
 
     <DashboardCard>
       <template v-slot:title>
-        <span class="h-is-primary-title">Collection </span>
-        <span class="h-is-secondary-text">{{ tokenId }}</span>
+        <div class="is-flex is-align-items-baseline">
+          <p class="h-is-primary-title">Collection</p>
+          <TokenLink
+              v-bind:show-extra="true"
+              v-bind:token-id="tokenId"
+              class="h-is-secondary-text ml-2"
+          />
+        </div>
+        <p class="h-is-tertiary-text has-text-grey">{{ 'for Account ' + normalizedAccountId }}</p>
       </template>
       <template v-slot:content>
         <CollectionTable :token-id="tokenId" :controller="collectionTableController"/>
@@ -55,12 +62,14 @@ import { useRouter } from "vue-router";
 import {EntityID} from "@/utils/EntityID";
 import { CollectionTableController } from "@/components/account/CollectionTableController";
 import CollectionTable from "@/components/account/CollectionTable.vue";
+import TokenLink from "@/components/values/TokenLink.vue";
 
 export default defineComponent({
 
   name: 'AccountCollection',
 
   components: {
+    TokenLink,
     CollectionTable,
     Footer,
     DashboardCard
@@ -99,7 +108,8 @@ export default defineComponent({
     return {
       isSmallScreen,
       isTouchDevice,
-      collectionTableController
+      collectionTableController,
+      normalizedAccountId,
     }
   }
 });

From f7d40b1c84b0d1b9e02587f92dee7bf0b5862543 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 20:11:46 +0100
Subject: [PATCH 12/14] Adjust AccountBalances unit test.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 tests/unit/account/AccountBalances.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/account/AccountBalances.spec.ts b/tests/unit/account/AccountBalances.spec.ts
index 27bb0c8da..04fd5f4db 100644
--- a/tests/unit/account/AccountBalances.spec.ts
+++ b/tests/unit/account/AccountBalances.spec.ts
@@ -71,7 +71,7 @@ describe("AccountBalances.vue", () => {
         // console.log(wrapper.find('tbody').text())
 
         const balanceCard = wrapper.get("#balanceCard")
-        expect(balanceCard.find('thead').text()).toBe("Token Balance")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance/Nb of NFTs")
         expect(balanceCard.find('tbody').text()).toBe(
             "0.0.34332104" + "HSuite" + "0.0000" +
             "0.0.49292859" + "TokenA7" + "0.00000000")

From cd35ba4cb4db12f9900fff2d3d8c7e49cc46f8f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 23 Jan 2024 20:12:15 +0100
Subject: [PATCH 13/14] Adjust AccountNavigation e2e test.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 tests/e2e/specs/AccountNavigation.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/specs/AccountNavigation.cy.ts b/tests/e2e/specs/AccountNavigation.cy.ts
index e4dbcee0a..a4070b838 100644
--- a/tests/e2e/specs/AccountNavigation.cy.ts
+++ b/tests/e2e/specs/AccountNavigation.cy.ts
@@ -78,11 +78,11 @@ describe('Account Navigation', () => {
         cy.url().should('include', '/mainnet/account/')
 
         cy.get('#balance')
-            .contains('a', "Show all token balances")
+            .contains('a', "Show all tokens")
             .click()
 
         cy.url().should('include', 'accountbalances/' + accountId1)
-        cy.contains('Token Balances for Account ' + accountId1)
+        cy.contains('All Tokens Owned by ' + accountId1)
 
         cy.get('table')
             .eq(0)

From 08e54f83f7b010676010e1b99943be15b2edaa5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 24 Jan 2024 12:06:21 +0100
Subject: [PATCH 14/14] Change route:
 '/:network/accountbalances/:accountId/:tokenId' to:
 '/:network/accountcollection/:accountId/:tokenId'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

And fix unit test.

Signed-off-by: Simon Viénot <simon.vienot@icloud.com>
---
 src/router.ts                              | 2 +-
 tests/unit/account/AccountBalances.spec.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/router.ts b/src/router.ts
index cde8801b8..eaa8fed7e 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -142,7 +142,7 @@ const routes: Array<RouteRecordRaw> = [
     props: true
   },
   {
-    path: '/:network/accountbalances/:accountId/:tokenId',
+    path: '/:network/accountcollection/:accountId/:tokenId',
     name: 'AccountCollection',
     component: AccountCollection,
     props: true
diff --git a/tests/unit/account/AccountBalances.spec.ts b/tests/unit/account/AccountBalances.spec.ts
index 04fd5f4db..57ec963fe 100644
--- a/tests/unit/account/AccountBalances.spec.ts
+++ b/tests/unit/account/AccountBalances.spec.ts
@@ -116,7 +116,7 @@ describe("AccountBalances.vue", () => {
         // console.log(wrapper.find('tbody').text())
 
         const balanceCard = wrapper.get("#balanceCard")
-        expect(balanceCard.find('thead').text()).toBe("Token Balance")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance/Nb of NFTs")
         expect(balanceCard.find('tbody').text()).toBe("")
 
         const nftsCard = wrapper.get("#nftsCard")