From bb24df1011e9b754adf316bb221c4c729e9faaeb Mon Sep 17 00:00:00 2001
From: Tim Schmidt <tim@launchbadge.com>
Date: Tue, 3 Oct 2023 12:09:57 -0700
Subject: [PATCH] fix: nftdetails page organization, fix filter, probably broke
 pause/play

Signed-off-by: Tim Schmidt <tim@launchbadge.com>
---
 src/components/token/NftHolderTable.vue       | 154 +++++----
 .../transaction/NftTransactionTable.vue       |  10 +-
 .../NftTransactionTableController.ts          |   9 -
 .../transaction/TransactionFilterSelect.vue   |  81 ++---
 .../TransactionTableControllerXL.ts           |  89 ++---
 .../NftDetailsTransferGraph.vue               |   2 -
 .../transfer_graphs/NftTransferGraph.vue      |  96 +++---
 src/pages/NftDetails.vue                      | 129 ++++----
 src/schemas/HederaSchemas.ts                  | 308 ++++++++----------
 src/utils/cache/NftBySerialCache.ts           |   1 -
 src/utils/table/TableController.ts            |   2 +-
 11 files changed, 418 insertions(+), 463 deletions(-)

diff --git a/src/components/token/NftHolderTable.vue b/src/components/token/NftHolderTable.vue
index 5cb82799b..1c53dcc13 100644
--- a/src/components/token/NftHolderTable.vue
+++ b/src/components/token/NftHolderTable.vue
@@ -23,8 +23,9 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-  <div id="nft-holder-table">
-    <o-table
+
+ <div id="nft-holder-table">
+  <o-table
       :data="nfts"
       :loading="loading"
       paginated
@@ -33,48 +34,47 @@
       v-model:current-page="currentPage"
       :per-page="perPage"
       @page-change="onPageChange"
-      @cell-click="handleClick"
 
+      @cell-click="handleClick"
       :hoverable="true"
       :narrowed="true"
       :striped="true"
       :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
 
       style="cursor: pointer"
-
       aria-current-label="Current page"
       aria-next-label="Next page"
       aria-page-label="Page"
       aria-previous-label="Previous page"
       customRowKey="serial_number"
-    >
-      <o-table-column v-slot="props" field="serial_number" label="Serial #">
-        <div class="is-numeric">
-          {{ props.row.serial_number }}
-        </div>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="account_id" label="Account ID">
-        <AccountLink v-bind:account-id="props.row.account_id"/>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="deleted" label="Deleted">
-        {{ props.row.deleted }}
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="modified_timestamp" label="Modification Time">
-        <TimestampValue v-bind:timestamp="props.row.modified_timestamp"/>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="metadata" label="Metadata">
-        <div class="should-wrap">
-          <BlobValue v-bind:base64="true" v-bind:blob-value="props.row.metadata" v-bind:show-none="true"/>
-        </div>
-      </o-table-column>
-
-    </o-table>
-    <EmptyTable v-if="!nfts.length"/>
-  </div>
+  >
+    <o-table-column v-slot="props" field="serial_number" label="Serial #">
+      <div class="is-numeric">
+        {{ props.row.serial_number }}
+      </div>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="account_id" label="Account ID">
+      <AccountLink v-bind:account-id="props.row.account_id" no-anchor/>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="deleted" label="Deleted">
+      {{ props.row.deleted }}
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="modified_timestamp" label="Modification Time">
+      <TimestampValue v-bind:timestamp="props.row.modified_timestamp"/>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="metadata" label="Metadata">
+      <div class="should-wrap">
+        <BlobValue v-bind:base64="true" v-bind:blob-value="props.row.metadata" v-bind:show-none="true"/>
+      </div>
+    </o-table-column>
+
+  </o-table>
+  <EmptyTable v-if="!nfts.length"/>
+ </div>
 
 </template>
 
@@ -84,51 +84,61 @@
 
 <script lang="ts">
 
-import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue'
-import {Nft} from "@/schemas/HederaSchemas"
-import TimestampValue from "@/components/values/TimestampValue.vue"
-import AccountLink from "@/components/values/AccountLink.vue"
-import BlobValue from "@/components/values/BlobValue.vue"
-import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue'
-import EmptyTable from "@/components/EmptyTable.vue"
-import {NftHolderTableController} from "@/components/token/NftHolderTableController"
-import {routeManager} from "@/router"
+import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue';
+import {Nft} from "@/schemas/HederaSchemas";
+import TimestampValue from "@/components/values/TimestampValue.vue";
+import AccountLink from "@/components/values/AccountLink.vue";
+import BlobValue from "@/components/values/BlobValue.vue";
+import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
+import EmptyTable from "@/components/EmptyTable.vue";
+import {NftHolderTableController} from "@/components/token/NftHolderTableController";
+import { routeManager } from "@/router";
 
 export default defineComponent({
-    name: 'NftHolderTable',
+  name: 'NftHolderTable',
 
-    components: {EmptyTable, AccountLink, TimestampValue, BlobValue},
+  components: {EmptyTable, AccountLink, TimestampValue, BlobValue},
 
-    props: {
-        controller: {
-            type: Object as PropType<NftHolderTableController>,
-            required: true
-        },
+  props: {
+    controller: {
+      type: Object as PropType<NftHolderTableController>,
+      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,
-            nfts: props.controller.rows as ComputedRef<Nft[]>,
-            loading: props.controller.loading as ComputedRef<boolean>,
-            total: props.controller.totalRowCount as ComputedRef<number>,
-            currentPage: props.controller.currentPage as Ref<number>,
-            onPageChange: props.controller.onPageChange,
-            perPage: props.controller.pageSize as Ref<number>,
-            ORUGA_MOBILE_BREAKPOINT,
-            handleClick
-        }
+  },
+
+  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,
+      nfts: props.controller.rows as ComputedRef<Nft[]>,
+      loading: props.controller.loading as ComputedRef<boolean>,
+      total: props.controller.totalRowCount as ComputedRef<number>,
+      currentPage: props.controller.currentPage as Ref<number>,
+      onPageChange: props.controller.onPageChange,
+      perPage: props.controller.pageSize as Ref<number>,
+      ORUGA_MOBILE_BREAKPOINT,
+      handleClick,
     }
-})
+  }
+});
 
 </script>
diff --git a/src/components/transaction/NftTransactionTable.vue b/src/components/transaction/NftTransactionTable.vue
index a18395181..0adddfa64 100644
--- a/src/components/transaction/NftTransactionTable.vue
+++ b/src/components/transaction/NftTransactionTable.vue
@@ -147,12 +147,16 @@ export default defineComponent({
             routeManager.routeToTransaction(t, event.ctrlKey || event.metaKey)
         }
 
+        const transactions = computed(() => {
+          return props.controller.rows.value.filter(el =>
+            !props.controller.transactionType.value || el.type === props.controller.transactionType.value
+          )
+        })
+
         return {
             isTouchDevice,
             isMediumScreen,
-            transactions: props.controller.rows as ComputedRef<
-                NftTransactionTransfer[]
-            >,
+            transactions: transactions,
             loading: props.controller.loading as ComputedRef<boolean>,
             total: props.controller.totalRowCount as ComputedRef<number>,
             currentPage: props.controller.currentPage as Ref<number>,
diff --git a/src/components/transaction/NftTransactionTableController.ts b/src/components/transaction/NftTransactionTableController.ts
index 5ef100954..1c8c01d8a 100644
--- a/src/components/transaction/NftTransactionTableController.ts
+++ b/src/components/transaction/NftTransactionTableController.ts
@@ -89,19 +89,10 @@ export class NftTransactionTableController extends TableController<
         const params = {} as {
             limit: number
             order: string
-            transactiontype: string | undefined
-            timestamp: string | undefined
         }
         params.limit = limit
         params.order = order
 
-        if (this.transactionType.value != "") {
-            params.transactiontype = this.transactionType.value
-        }
-        if (consensusTimestamp !== null) {
-            params.timestamp = operator + ":" + consensusTimestamp
-        }
-
         const r = await axios.get<NftTransactionHistory>(
             `api/v1/tokens/${this.tokenId.value}/nfts/${this.serialNumber.value}/transactions`,
             {params: params},
diff --git a/src/components/transaction/TransactionFilterSelect.vue b/src/components/transaction/TransactionFilterSelect.vue
index 21f569a82..c283141d8 100644
--- a/src/components/transaction/TransactionFilterSelect.vue
+++ b/src/components/transaction/TransactionFilterSelect.vue
@@ -40,48 +40,55 @@
 
 <script lang="ts">
 
-import {defineComponent, PropType} from "vue"
-import {TransactionType} from "@/schemas/HederaSchemas"
-import {makeTypeLabel} from "@/utils/TransactionTools"
-import {TransactionTableControllerXL} from "@/components/transaction/TransactionTableControllerXL"
-import {NftTransactionTableController} from "./NftTransactionTableController"
+import {defineComponent, PropType} from "vue";
+import {TransactionType} from "@/schemas/HederaSchemas";
+import {makeTypeLabel} from "@/utils/TransactionTools";
+import {TransactionTableControllerXL} from "@/components/transaction/TransactionTableControllerXL";
+import {NftTransactionTableController} from "./NftTransactionTableController";
 
 export default defineComponent({
-    name: "TransactionFilterSelect",
-
-    props: {
-        controller: {
-            type: Object as PropType<
-                TransactionTableControllerXL | NftTransactionTableController
-            >,
-            required: true,
-        },
-    },
+  name: "TransactionFilterSelect",
 
-    setup(props) {
-        const makeFilterLabel = (filterValue: string): string => {
-            return filterValue == ""
-                ? "TYPES: ALL"
-                : makeTypeLabel(filterValue as TransactionType)
-        }
-
-        return {
-            filterValues: makeFilterValues(),
-            selectedFilter: props.controller.transactionType,
-            makeFilterLabel,
-        }
+  props: {
+    controller: {
+      type: Object as PropType<
+        TransactionTableControllerXL | NftTransactionTableController
+      >,
+      required: true,
+    },
+    nftFilter: {
+      type: Boolean,
+      required: false,
     },
-})
-
-export function makeFilterValues(): string[] {
-    const result = Object.keys(TransactionType).sort((a, b) => {
-        return makeTypeLabel(a as TransactionType) <
-        makeTypeLabel(b as TransactionType)
-            ? -1
-            : 1
+  },
+
+  setup(props) {
+
+    const makeFilterLabel = (filterValue: string): string => {
+      return filterValue == "" ? "TYPES: ALL" : makeTypeLabel(filterValue as TransactionType)
+    }
+
+    return {
+      filterValues: makeFilterValues(props.nftFilter),
+      selectedFilter: props.controller.transactionType,
+      makeFilterLabel,
+    }
+  }
+});
+
+export function makeFilterValues(nftFilter: boolean): string[] {
+  let result = Object
+    .keys(TransactionType)
+    .sort((a, b) => {
+      return makeTypeLabel(a as TransactionType) < makeTypeLabel(b as TransactionType) ? -1 : 1;
+    })
+  if(nftFilter) {
+    result = result.filter(el => {
+      return el === "CRYPTOTRANSFER" || el.startsWith("TOKEN");
     })
-    result.splice(0, 0, "")
-    return result
+  }
+  result.splice(0, 0, "")
+  return result
 }
 
 </script>
diff --git a/src/components/transaction/TransactionTableControllerXL.ts b/src/components/transaction/TransactionTableControllerXL.ts
index 869711320..e96f12a4f 100644
--- a/src/components/transaction/TransactionTableControllerXL.ts
+++ b/src/components/transaction/TransactionTableControllerXL.ts
@@ -18,21 +18,16 @@
  *
  */
 
-import {
-    KeyOperator,
-    SortOrder,
-    TableController,
-} from "@/utils/table/TableController"
-import {Transaction, TransactionResponse} from "@/schemas/HederaSchemas"
-import {ComputedRef, ref, Ref, watch, WatchStopHandle} from "vue"
-import axios, {AxiosResponse} from "axios"
-import {LocationQuery, Router} from "vue-router"
-import {fetchStringQueryParam} from "@/utils/RouteManager"
-
-export class TransactionTableControllerXL extends TableController<
-    Transaction,
-    string
-> {
+import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
+import {Transaction, TransactionResponse} from "@/schemas/HederaSchemas";
+import {ComputedRef, ref, Ref, watch, WatchStopHandle} from "vue";
+import axios, {AxiosResponse} from "axios";
+import {LocationQuery, Router} from "vue-router";
+import {fetchStringQueryParam} from "@/utils/RouteManager";
+
+
+export class TransactionTableControllerXL extends TableController<Transaction, string> {
+
     private readonly accountId: Ref<string | null>
     private readonly accountIdMandatory: boolean
 
@@ -40,24 +35,13 @@ export class TransactionTableControllerXL extends TableController<
     // Public
     //
 
-    public constructor(
-        router: Router,
-        accountId: Ref<string | null>,
-        pageSize: ComputedRef<number>,
-        accountIdMandatory: boolean,
-        pageParamName = "p",
-        keyParamName = "k",
-    ) {
-        super(
-            router,
-            pageSize,
-            10 * pageSize.value,
-            5000,
-            10,
-            100,
-            pageParamName,
-            keyParamName,
-        )
+    public constructor(router: Router,
+                       accountId: Ref<string | null>,
+                       pageSize: ComputedRef<number>,
+                       accountIdMandatory: boolean,
+                       pageParamName = "p", keyParamName= "k") {
+        super(router, pageSize, 10 * pageSize.value, 5000, 10, 100,
+            pageParamName, keyParamName);
         this.accountId = accountId
         this.accountIdMandatory = accountIdMandatory
         this.watchAndReload([this.transactionType, this.accountId])
@@ -69,12 +53,8 @@ export class TransactionTableControllerXL extends TableController<
     // TableController
     //
 
-    public async load(
-        consensusTimestamp: string | null,
-        operator: KeyOperator,
-        order: SortOrder,
-        limit: number,
-    ): Promise<Transaction[] | null> {
+    public async load(consensusTimestamp: string | null, operator: KeyOperator,
+                      order: SortOrder, limit: number): Promise<Transaction[] | null> {
         let result: Promise<Transaction[] | null>
 
         if (this.accountIdMandatory && this.accountId.value === null) {
@@ -98,16 +78,10 @@ export class TransactionTableControllerXL extends TableController<
             if (consensusTimestamp !== null) {
                 params.timestamp = operator + ":" + consensusTimestamp
             }
-            const cb = (
-                r: AxiosResponse<TransactionResponse>,
-            ): Promise<Transaction[] | null> => {
+            const cb = (r: AxiosResponse<TransactionResponse>): Promise<Transaction[] | null> => {
                 return Promise.resolve(r.data.transactions ?? [])
             }
-            result = axios
-                .get<TransactionResponse>("api/v1/transactions", {
-                    params: params,
-                })
-                .then(cb)
+            result = axios.get<TransactionResponse>("api/v1/transactions", {params: params}).then(cb)
         }
 
         return result
@@ -128,26 +102,23 @@ export class TransactionTableControllerXL extends TableController<
     public mount(): void {
         this.transactionType.value = this.fetchTransactionTypeParam() // Must be done before calling mount()
         super.mount()
-        this.watchTransactionTypeHandle = watch(
-            this.transactionType, () => this.updateRouteQuery(),
-        )
+        this.watchTransactionTypeHandle = watch(this.transactionType, () => this.updateRouteQuery())
     }
 
     public unmount(): void {
         if (this.watchTransactionTypeHandle !== null) {
             this.watchTransactionTypeHandle()
         }
-        this.watchTransactionTypeHandle = null
+        this.watchTransactionTypeHandle = null;
         super.unmount()
     }
 
     protected makeRouteQuery(): LocationQuery {
         const result = super.makeRouteQuery()
         if (this.transactionType.value != "") {
-            result[this.typeParamName] =
-                this.transactionType.value.toLowerCase()
+            result[this.typeParamName] = this.transactionType.value.toLowerCase()
         } else {
-            delete (result[this.typeParamName])
+            delete(result[this.typeParamName])
         }
         return result
     }
@@ -157,14 +128,10 @@ export class TransactionTableControllerXL extends TableController<
     //
 
     private readonly typeParamName = "type"
-    private watchTransactionTypeHandle: WatchStopHandle | null = null
+    private watchTransactionTypeHandle: WatchStopHandle|null = null
 
     public fetchTransactionTypeParam(): string {
-        return (
-            fetchStringQueryParam(
-                this.typeParamName,
-                this.router.currentRoute.value,
-            )?.toUpperCase() ?? ""
-        )
+        return fetchStringQueryParam(this.typeParamName, this.router.currentRoute.value)?.toUpperCase() ?? ""
     }
+
 }
diff --git a/src/components/transfer_graphs/NftDetailsTransferGraph.vue b/src/components/transfer_graphs/NftDetailsTransferGraph.vue
index 87d1be066..e7e75b59f 100644
--- a/src/components/transfer_graphs/NftDetailsTransferGraph.vue
+++ b/src/components/transfer_graphs/NftDetailsTransferGraph.vue
@@ -143,8 +143,6 @@ export default defineComponent({
             }),
         );
 
-        console.log(nftTransferLayout);
-
         watch(
             () => props.transaction,
             () => {
diff --git a/src/components/transfer_graphs/NftTransferGraph.vue b/src/components/transfer_graphs/NftTransferGraph.vue
index 48a632911..3671095e1 100644
--- a/src/components/transfer_graphs/NftTransferGraph.vue
+++ b/src/components/transfer_graphs/NftTransferGraph.vue
@@ -44,24 +44,24 @@
         <!-- #0 : account id -->
         <div>
           <AccountLink
-            v-bind:account-id="nftTransferLayout[i-1].sender_account_id"
-            v-bind:no-anchor="compact"
-            null-label="MINT"
-            data-cy="sourceAccount"/>
+              v-bind:account-id="nftTransferLayout[i-1].sender_account_id"
+              v-bind:no-anchor="compact"
+              null-label="MINT"
+              data-cy="sourceAccount"/>
         </div>
 
         <!-- #1 : arrow -->
-        <div style="position: relative">
+        <div  style="position: relative">
           <ArrowSegment v-bind:compact="compact"/>
         </div>
 
         <!-- #2 : nfts -->
         <div>
           <TokenLink
-            v-bind:token-id="nftTransferLayout[i-1].token_id ?? undefined"
-            v-bind:show-extra="true"
-            v-bind:no-anchor="compact"
-            data-cy="nft"/>
+              v-bind:token-id="nftTransferLayout[i-1].token_id ?? undefined"
+              v-bind:show-extra="true"
+              v-bind:no-anchor="compact"
+              data-cy="nft"/>
           <div class="h-is-text-size-3" style="max-width: 200px">
             <template v-if="!compact">
             <span v-for="sn in nftTransferLayout[i-1].serial_numbers" :key="sn">
@@ -72,22 +72,22 @@
         </div>
 
         <!-- #3 : arrow -->
-        <div style="position: relative">
+        <div  style="position: relative">
           <ArrowSegment v-bind:compact="compact"/>
         </div>
 
         <!-- #4 : account id -->
         <div>
           <AccountLink
-            v-bind:account-id="nftTransferLayout[i-1].receiver_account_id"
-            v-bind:no-anchor="compact"
-            null-label="BURN"
-            data-cy="destinationAccount"/>
+              v-bind:account-id="nftTransferLayout[i-1].receiver_account_id"
+              v-bind:no-anchor="compact"
+              null-label="BURN"
+              data-cy="destinationAccount"/>
         </div>
 
         <!-- #5 : description -->
         <div v-if="!compact && descriptionVisible">
-          <span class="h-is-smaller">{{ nftTransferLayout[i - 1].description }}</span>
+          <span class="h-is-smaller">{{ nftTransferLayout[i-1].description }}</span>
         </div>
 
       </template>
@@ -103,38 +103,38 @@
 
 <script lang="ts">
 
-import {defineComponent, inject, PropType, ref, watch} from "vue"
-import AccountLink from "@/components/values/AccountLink.vue"
-import TokenLink from "@/components/values/TokenLink.vue"
-import ArrowSegment from "@/components/transfer_graphs/ArrowSegment.vue"
-import {NFTTransferLayout} from "@/components/transfer_graphs/layout/NFTTransferLayout"
-import {TransactionDetail} from "@/schemas/HederaSchemas"
+import {defineComponent, inject, PropType, ref, watch} from "vue";
+import AccountLink from "@/components/values/AccountLink.vue";
+import TokenLink from "@/components/values/TokenLink.vue";
+import ArrowSegment from "@/components/transfer_graphs/ArrowSegment.vue";
+import {NFTTransferLayout} from "@/components/transfer_graphs/layout/NFTTransferLayout";
+import {TransactionDetail} from "@/schemas/HederaSchemas";
 
 export default defineComponent({
-    name: "NftTransferGraph",
-    components: {TokenLink, AccountLink, ArrowSegment},
-    props: {
-        transaction: Object as PropType<TransactionDetail>,
-        compact: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props) {
-
-        const nftTransferLayout = ref(NFTTransferLayout.make(props.transaction))
-
-        watch(() => props.transaction, () => {
-            nftTransferLayout.value = NFTTransferLayout.make(props.transaction)
-        })
-
-        const descriptionVisible = inject("isSmallScreen", true)
-
-        return {
-            nftTransferLayout,
-            descriptionVisible
-        }
+  name: "NftTransferGraph",
+  components: {TokenLink, AccountLink, ArrowSegment},
+  props: {
+    transaction: Object as PropType<TransactionDetail>,
+    compact: {
+      type: Boolean,
+      default: false
     }
+  },
+  setup(props) {
+
+    const nftTransferLayout = ref(NFTTransferLayout.make(props.transaction))
+
+    watch(() => props.transaction, () => {
+      nftTransferLayout.value = NFTTransferLayout.make(props.transaction)
+    })
+
+    const descriptionVisible = inject("isSmallScreen", true)
+
+    return {
+      nftTransferLayout,
+      descriptionVisible
+    }
+  }
 })
 
 </script>
@@ -146,13 +146,13 @@ export default defineComponent({
 <style scoped>
 
 .graph-container {
-    display: inline-grid;
-    grid-template-columns: repeat(5, auto);
-    column-gap: 1em;
+  display: inline-grid;
+  grid-template-columns: repeat(5, auto);
+  column-gap: 1em;
 }
 
 .graph-container-6 {
-    grid-template-columns: repeat(6, auto);
+  grid-template-columns: repeat(6, auto)
 }
 
 </style>
diff --git a/src/pages/NftDetails.vue b/src/pages/NftDetails.vue
index 54ba17bcd..4f6c90680 100644
--- a/src/pages/NftDetails.vue
+++ b/src/pages/NftDetails.vue
@@ -28,90 +28,81 @@
     class="section"
   >
     <DashboardCard>
-      <template v-slot:title>
-        <span class="h-is-primary-title mr-1"> Serial Number </span>
+      <template #title>
+        <span class="h-is-primary-title mr-1"> Serial Number {{ serialNumber }}</span>
         <div
           class="is-inline-block h-is-tertiary-text h-is-extra-text should-wrap"
           style="word-break: break-all"
         >
-          {{ serialNumber }}
-        </div>
-        <div
-          id="entityId"
-          class="headline-grid h-is-tertiary-text mt-3 is-align-items-baseline"
-        >
-          <div class="h-is-property-text has-text-weight-light">
-            Token ID:
-          </div>
-          <div>
-            <Copyable :content-to-copy="normalizedTokenId ?? ''">
-              <template v-slot:content>
-                <span>{{ normalizedTokenId ?? "" }}</span>
-              </template>
-            </Copyable>
-          </div>
+          {{ symbol }}
         </div>
       </template>
 
-      <template v-slot:content>
+      <template #content>
         <NotificationBanner
           v-if="notification"
           :message="notification"
         />
       </template>
 
-      <template v-slot:leftContent>
+      <template #leftContent>
+        <Property id="tokenId">
+          <template #name>Token ID</template>
+          <template #value>
+            <TokenLink :token-id="tokenId" />
+          </template>
+        </Property>
         <Property id="accountId">
-          <template v-slot:name>Account ID</template>
-          <template v-slot:value>
+          <template #name>Account ID</template>
+          <template #value>
             <AccountLink
-              :account-id="tokenInfo?.account_id"
+              :account-id="nftInfo?.account_id"
               :show-none="true"
             />
           </template>
         </Property>
         <Property id="createdTimestamp">
-          <template v-slot:name>Created Timestamp</template>
-          <template v-slot:value>
+          <template #name>Created Timestamp</template>
+          <template #value>
             <TimestampValue
               :show-none="true"
-              :timestamp="tokenInfo?.created_timestamp"
+              :timestamp="nftInfo?.created_timestamp"
             />
           </template>
         </Property>
         <Property id="delegatingSpender">
-          <template v-slot:name>Delegating Spender</template>
-          <template v-slot:value>
+          <template #name>Delegating Spender</template>
+          <template #value>
             <AccountLink
-              :account-id="tokenInfo?.delegating_spender"
+              :account-id="nftInfo?.delegating_spender"
               :show-none="true"
             />
           </template>
         </Property>
         <Property id="metadata">
-          <template v-slot:name>Metadata</template>
-          <template v-slot:value>
+          <template #name>Metadata</template>
+          <template #value>
             <BlobValue
               :base64="true"
-              :blob-value="tokenInfo?.metadata"
+              :blob-value="nftInfo?.metadata"
               :show-none="true"
             />
           </template>
         </Property>
         <Property id="modifiedTimeStamp">
-          <template v-slot:name>Modified Timestamp</template>
-          <template v-slot:value>
+          <template #name>Modified Timestamp</template>
+          <template #value>
             <TimestampValue
-              :timestamp="tokenInfo?.modified_timestamp"
+              :timestamp="nftInfo?.modified_timestamp"
               :show-none="true"
             />
           </template>
         </Property>
         <Property id="spenderId">
-          <template v-slot:name>Spender ID</template>
-          <template v-slot:value>
+          <template #name>Spender ID</template>
+          <template #value>
             <AccountLink
-              :account-id="tokenInfo?.spender_id"
+              :account-id="nftInfo?.spender_id"
               :show-none="true"
             />
           </template>
@@ -119,23 +110,24 @@
       </template>
     </DashboardCard>
 
-    <DashboardCard v-if="tokenInfo">
-      <template v-slot:title>
+    <DashboardCard v-if="nftInfo">
+      <template #title>
         <p id="recentTransactions" class="h-is-secondary-title">
           Recent Transactions
         </p>
       </template>
-      <template v-slot:control>
+      <template #control>
         <div class="is-flex is-align-items-flex-end">
           <PlayPauseButton
             v-bind:controller="transactionTableController"
           />
           <TransactionFilterSelect
             v-bind:controller="transactionTableController"
+            nft-filter
           />
         </div>
       </template>
-      <template v-slot:content>
+      <template #content>
         <div id="recentTransactionsTable">
           <NftTransactionTable
             v-bind:controller="transactionTableController"
@@ -177,27 +169,29 @@ import PlayPauseButton from "@/components/PlayPauseButton.vue"
 import AccountLink from "@/components/values/AccountLink.vue"
 import {NftBySerialCache} from "@/utils/cache/NftBySerialCache"
 import ContractResultsSection from "@/components/contracts/ContractResultsSection.vue"
-import Copyable from "@/components/Copyable.vue"
 import NftTransactionTable from "@/components/transaction/NftTransactionTable.vue"
 import {NftTransactionTableController} from "@/components/transaction/NftTransactionTableController"
 import TransactionFilterSelect from "@/components/transaction/TransactionFilterSelect.vue"
+import { makeTokenSymbol } from "@/schemas/HederaUtils";
+import { TokenInfoCache } from "@/utils/cache/TokenInfoCache";
+import TokenLink from "@/components/values/TokenLink.vue";
 
 export default defineComponent({
     name: "NftDetails",
 
     components: {
-        Copyable,
-        ContractResultsSection,
-        PlayPauseButton,
-        AccountLink,
-        NotificationBanner,
-        Property,
-        BlobValue,
-        DashboardCard,
-        TimestampValue,
-        NftTransactionTable,
-        TransactionFilterSelect,
-        Footer,
+      TokenLink,
+      ContractResultsSection,
+      PlayPauseButton,
+      AccountLink,
+      NotificationBanner,
+      Property,
+      BlobValue,
+      DashboardCard,
+      TimestampValue,
+      NftTransactionTable,
+      TransactionFilterSelect,
+      Footer,
     },
 
     props: {
@@ -225,26 +219,32 @@ export default defineComponent({
         })
         const validEntityId = computed(() => normalizedTokenId.value != null)
 
+        const tokenLookup = TokenInfoCache.instance.makeLookup(normalizedTokenId)
+        onMounted(() => tokenLookup.mount())
+        onBeforeUnmount(() => tokenLookup.unmount())
+
+        const symbol = computed(() => makeTokenSymbol(tokenLookup.entity.value, 256))
+
         const serialNumber = ref(props.serialNumber)
-        const tokenLookup = NftBySerialCache.instance.makeLookup(
+        const nftLookup = NftBySerialCache.instance.makeLookup(
             normalizedTokenId,
             serialNumber,
         )
-        onMounted(() => tokenLookup.mount())
-        onBeforeUnmount(() => tokenLookup.unmount())
+        onMounted(() => nftLookup.mount())
+        onBeforeUnmount(() => nftLookup.unmount())
 
         const notification = computed(() => {
             let result
             if (!validEntityId.value) {
                 result = "Invalid token ID: " + props.tokenId
-            } else if (tokenLookup.entity.value == null) {
-                if (tokenLookup.isLoaded()) {
+            } else if (nftLookup.entity.value == null) {
+                if (nftLookup.isLoaded()) {
                     result =
                         "Token with ID " + props.tokenId + " was not found"
                 } else {
                     result = null
                 }
-            } else if (tokenLookup.entity.value?.deleted) {
+            } else if (nftLookup.entity.value?.deleted) {
                 result = "Token is deleted"
             } else {
                 result = null
@@ -252,7 +252,7 @@ export default defineComponent({
             return result
         })
 
-        const showTokenDetails = (tokenId: string) => {
+        const shownftDetails = (tokenId: string) => {
             routeManager.routeToToken(tokenId)
         }
 
@@ -303,13 +303,14 @@ export default defineComponent({
             isSmallScreen,
             isMediumScreen,
             isTouchDevice,
-            tokenInfo: tokenLookup.entity,
+            nftInfo: nftLookup.entity,
             validEntityId,
             normalizedTokenId,
             notification,
-            showTokenDetails,
+            shownftDetails,
             parseBigIntString,
             transactionTableController,
+            symbol
         }
     },
 })
diff --git a/src/schemas/HederaSchemas.ts b/src/schemas/HederaSchemas.ts
index ca3c8ec8a..3b3702a7d 100644
--- a/src/schemas/HederaSchemas.ts
+++ b/src/schemas/HederaSchemas.ts
@@ -22,8 +22,8 @@
 //                                                      Account
 // ---------------------------------------------------------------------------------------------------------------------
 
-import {EntityID} from "@/utils/EntityID"
-import {makeDefaultNodeDescription} from "@/schemas/HederaUtils"
+import {EntityID} from "@/utils/EntityID";
+import {makeDefaultNodeDescription} from "@/schemas/HederaUtils";
 
 export interface AccountsResponse {
     accounts: AccountInfo[] | undefined
@@ -37,7 +37,7 @@ export interface AccountInfo {
     created_timestamp: string | null
     deleted: boolean | null
     expiry_timestamp: string | null
-    key: Key | null
+    key : Key | null
     max_automatic_token_associations: number | null
     memo: string | null
     receiver_sig_required: boolean | null
@@ -47,7 +47,7 @@ export interface AccountInfo {
     decline_reward: boolean | null      // Whether the account declines receiving a staking reward
     staked_account_id: string | null    // The account to which this account is staking
     staked_node_id: number | null       // The id of the node to which this account is staking
-    stake_period_start: string | null   // The staking period during which either the staking settings for this account
+    stake_period_start : string | null  // The staking period during which either the staking settings for this account
                                         // changed (such as starting staking or changing stakedNode) or the most recent
                                         // reward was earned, whichever is later. If this account is not currently
                                         // staked to a node, then the value is null
@@ -68,43 +68,43 @@ export interface Balance {
 }
 
 export interface TokenBalance {
-    token_id: string | null             // Network entity ID in the format of shard.realm.num
+    token_id: string | null // Network entity ID in the format of shard.realm.num
     balance: number
 }
 
 export interface TokenRelationshipResponse {
-    tokens: Array<TokenRelationship>
+    tokens: Array<TokenRelationship>,
     links: Links
 }
 
 export interface TokenRelationship {
-    automatic_association: boolean
-    balance: number
-    created_timestamp: string
-    freeze_status: string               // [ NOT_APPLICABLE, FROZEN, UNFROZEN ]
-    kyc_status: string                  // [ NOT_APPLICABLE, GRANTED, REVOKED ]
-    token_id: string | null
+    automatic_association: boolean,
+    balance: number,
+    created_timestamp: string,
+    freeze_status: string, // [ NOT_APPLICABLE, FROZEN, UNFROZEN ]
+    kyc_status: string,    // [ NOT_APPLICABLE, GRANTED, REVOKED ]
+    token_id: string | null,
 }
 
 export interface CryptoAllowancesResponse {
-    allowances: Array<CryptoAllowance>
+    allowances: Array<CryptoAllowance>,
     links: Links
 }
 
 export interface CryptoAllowance {
-    amount_granted: number              // The granted amount of the spender's allowance in tinybars.
-    owner: string | null                // Network entity ID in the format of shard.realm.num
-    spender: string | null              // Network entity ID in the format of shard.realm.num
+    amount_granted: number,     // The granted amount of the spender's allowance in tinybars.
+    owner: string | null,       // Network entity ID in the format of shard.realm.num
+    spender: string | null,     // Network entity ID in the format of shard.realm.num
     timestamp: TimestampRange
 }
 
 export interface TokenAllowancesResponse {
-    allowances: Array<TokenAllowance>
+    allowances: Array<TokenAllowance>,
     links: Links
 }
 
 export interface TokenAllowance extends CryptoAllowance {
-    token_id: string | null             // Network entity ID in the format of shard.realm.num
+    token_id: string | null,    // Network entity ID in the format of shard.realm.num
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -118,7 +118,7 @@ export interface BalancesResponse {
 }
 
 export interface AccountBalance {
-    account: string | null              // Network entity ID in the format of shard.realm.num
+    account: string | null // Network entity ID in the format of shard.realm.num
     balance: number
     tokens: Array<TokenBalance>
 }
@@ -140,7 +140,6 @@ export interface NftTransactionHistory {
 export interface TransactionByIdResponse {
     transactions: Array<TransactionDetail> | undefined
 }
-
 export interface Transaction {
 
     bytes: string | null
@@ -181,15 +180,17 @@ export interface TransactionDetail extends Transaction {
     assessed_custom_fees: CustomFee[]
 }
 
+
 export interface NftTransfer {
+    receiver_account_id: string | null | undefined  // Network entity ID in the format of shard.realm.num
+    sender_account_id: string | null | undefined    // Network entity ID in the format of shard.realm.num
     is_approval: boolean
-    receiver_account_id: string | null | undefined // Network entity ID in the format of shard.realm.num
-    sender_account_id: string | null | undefined // Network entity ID in the format of shard.realm.num
     serial_number: number
-    token_id: string | null             // Network entity ID in the format of shard.realm.num}
+    token_id: string | null                         // Network entity ID in the format of shard.realm.num}
 }
 
 export function compareNftTransfer(t1: NftTransfer, t2: NftTransfer): number {
+
     let result = compareString(t1.sender_account_id, t2.sender_account_id)
 
     if (result == 0) {
@@ -208,25 +209,25 @@ export function compareNftTransfer(t1: NftTransfer, t2: NftTransfer): number {
 }
 
 export interface Transfer {
-    account: string | null              // Network entity ID in the format of shard.realm.num
+    account: string | null                          // Network entity ID in the format of shard.realm.num
     amount: number
     is_approval: boolean | undefined
 }
 
 export interface TokenTransfer extends Transfer {
-    token_id: string | null             // Network entity ID in the format of shard.realm.num
+    token_id: string | null                         // Network entity ID in the format of shard.realm.num
 }
 
 export interface StakingRewardTransfer {
-    account: string | null              // Network entity ID in the format of shard.realm.num
+    account: string | null                          // Network entity ID in the format of shard.realm.num
     amount: number
 }
 
 export interface CustomFee {
     amount: number | undefined
-    collector_account_id: string | undefined // Network entity ID in the format of shard.realm.num
+    collector_account_id: string | undefined        // Network entity ID in the format of shard.realm.num
     effective_payer_account_ids: string[] | undefined
-    token_id: string | null | undefined // Network entity ID in the format of shard.realm.num
+    token_id: string | null | undefined             // Network entity ID in the format of shard.realm.num
 }
 
 export enum TransactionType {
@@ -274,18 +275,15 @@ export enum TransactionType {
     UNCHECKEDSUBMIT = "UNCHECKEDSUBMIT",
     ETHEREUMTRANSACTION = "ETHEREUMTRANSACTION",
     NODESTAKEUPDATE = "NODESTAKEUPDATE",
-    UTILPRNG = "UTILPRNG",
+    UTILPRNG = "UTILPRNG"
 }
 
 export enum TransactionResult {
     SUCCESS = "success",
-    FAILURE = "fail",
+    FAILURE = "fail"
 }
 
-export function compareTransferByAccount(
-    t1: Transfer | StakingRewardTransfer,
-    t2: Transfer | StakingRewardTransfer,
-): number {
+export function compareTransferByAccount(t1: Transfer | StakingRewardTransfer, t2: Transfer | StakingRewardTransfer): number {
     let result: number
     const account1 = t1.account
     const account2 = t2.account
@@ -295,9 +293,9 @@ export function compareTransferByAccount(
         if (accountId1 != null && accountId2 != null) {
             result = accountId1.compareAccountID(accountId2)
         } else {
-            result = account1.localeCompare(account2)
+            result = account1.localeCompare(account2);
         }
-    } else if (account1 != null) {
+    } else if (account1 != null){
         result = +1
     } else if (account2 != null) {
         result = -1
@@ -307,13 +305,11 @@ export function compareTransferByAccount(
     return result
 }
 
-export function compareTokenTransferByTokenId(
-    t1: TokenTransfer,
-    t2: TokenTransfer,
-): number {
+export function compareTokenTransferByTokenId(t1: TokenTransfer, t2: TokenTransfer): number {
     return compareString(t1.token_id, t2.token_id)
 }
 
+
 // ---------------------------------------------------------------------------------------------------------------------
 //                                                      Token
 // ---------------------------------------------------------------------------------------------------------------------
@@ -331,6 +327,7 @@ export interface Token {
 }
 
 export interface TokenInfo {
+
     admin_key: Key | null
     auto_renew_account: string | null   // Network entity ID in the format of shard.realm.num
     auto_renew_period: number | null
@@ -348,35 +345,35 @@ export interface TokenInfo {
     name: string
     memo: string
     pause_key: Key | null
-    pause_status: string                // NOT_APPLICABLE, PAUSED, UNPAUSED
+    pause_status: string // NOT_APPLICABLE, PAUSED, UNPAUSED
     supply_key: Key | null
-    supply_type: string                 // FINITE, INFINITE
+    supply_type: string // FINITE, INFINITE
     symbol: string
-    token_id: string | null             // Network entity ID in the format of shard.realm.num
+    token_id: string | null     // Network entity ID in the format of shard.realm.num
     total_supply: string
-    treasury_account_id: string | null  // Network entity ID in the format of shard.realm.num
-    type: string                        // FUNGIBLE_COMMON, NON_FUNGIBLE_UNIQUE
+    treasury_account_id: string | null   // Network entity ID in the format of shard.realm.num
+    type: string // FUNGIBLE_COMMON, NON_FUNGIBLE_UNIQUE
     wipe_key: Key | null
     custom_fees: CustomFees
 }
 
 export interface CustomFees {
     created_timestamp: string | undefined
-    fixed_fees: FixedFee[] | undefined  // Network entity ID in the format of shard.realm.num
+    fixed_fees: FixedFee[] | undefined                    // Network entity ID in the format of shard.realm.num
     fractional_fees: FractionalFee[] | undefined
-    royalty_fees: RoyaltyFee[] | null | undefined // Network entity ID in the format of shard.realm.num
+    royalty_fees: RoyaltyFee[] | null | undefined             // Network entity ID in the format of shard.realm.num
 }
 
 export interface FixedFee {
     amount: number | undefined
-    collector_account_id: string | undefined // Network entity ID in the format of shard.realm.num
-    denominating_token_id: string | undefined // Network entity ID in the format of shard.realm.num
+    collector_account_id: string | undefined            // Network entity ID in the format of shard.realm.num
+    denominating_token_id: string | undefined           // Network entity ID in the format of shard.realm.num
 }
 
 export interface FractionalFee {
     amount: FractionAmount | undefined
-    collector_account_id: string | undefined // Network entity ID in the format of shard.realm.num
-    denominating_token_id: string | undefined // Network entity ID in the format of shard.realm.num
+    collector_account_id: string | undefined            // Network entity ID in the format of shard.realm.num
+    denominating_token_id: string | undefined           // Network entity ID in the format of shard.realm.num
     maximum: number | undefined
     mininum: number | undefined
     net_of_transfers: boolean | undefined
@@ -384,13 +381,13 @@ export interface FractionalFee {
 
 export interface RoyaltyFee {
     amount: FractionAmount | undefined
-    collector_account_id: string | undefined // Network entity ID in the format of shard.realm.num
-    fallback_fee: FallbackFee | undefined // Network entity ID in the format of shard.realm.num
+    collector_account_id: string | undefined            // Network entity ID in the format of shard.realm.num
+    fallback_fee: FallbackFee | undefined              // Network entity ID in the format of shard.realm.num
 }
 
 export interface FallbackFee {
     amount: number | undefined
-    denominating_token_id: string | undefined // Network entity ID in the format of shard.realm.num
+    denominating_token_id: string | undefined           // Network entity ID in the format of shard.realm.num
 }
 
 export interface FractionAmount {
@@ -405,7 +402,7 @@ export interface TokenBalancesResponse {
 }
 
 export interface TokenDistribution {
-    account: string | null              // Network entity ID in the format of shard.realm.num
+    account: string | null // Network entity ID in the format of shard.realm.num
     balance: number
 }
 
@@ -440,25 +437,25 @@ export interface TopicMessagesResponse {
 }
 
 export interface TopicMessage {
-    chunk_info: ChunkInfo | null
-    consensus_timestamp: string
-    topic_id: string | null
-    message: string
-    running_hash: string
-    running_hash_version: number
+    chunk_info: ChunkInfo | null,
+    consensus_timestamp: string,
+    topic_id: string | null,
+    message: string,
+    running_hash: string,
+    running_hash_version: number,
     sequence_number: number
 }
 
 export interface ChunkInfo {
-    initial_transaction_id: TransactionId
-    number: number
+    initial_transaction_id: TransactionId,
+    number: number,
     total: number
 }
 
 export interface TransactionId {
-    account_id: string | null
-    nonce: number | null
-    scheduled: boolean | null
+    account_id: string | null,
+    nonce: number | null,
+    scheduled: boolean | null,
     transaction_valid_start: string
 }
 
@@ -472,22 +469,23 @@ export interface ContractsResponse {
 }
 
 export interface Contract {
+
     admin_key: Key | null
     auto_renew_account: string | null   // Network entity ID in the format of shard.realm.num
     auto_renew_period: number | null
-    contract_id: string | null          // Network entity ID in the format of shard.realm.num
+    contract_id: string | null   // Network entity ID in the format of shard.realm.num
     created_timestamp: string | null
     deleted: boolean
     evm_address: string
     expiration_timestamp: string | null
-    file_id: string | null | undefined  // Network entity ID in the format of shard.realm.num
+    file_id: string | null | undefined   // Network entity ID in the format of shard.realm.num
     max_automatic_token_associations: number | null
     memo: string
     nonce: number | undefined
-    obtainer_id: string | null          // Network entity ID in the format of shard.realm.num
+    obtainer_id: string | null   // Network entity ID in the format of shard.realm.num
     permanent_removal: boolean | null
-    proxy_account_id: string | null     // Network entity ID in the format of shard.realm.num
-    timestamp: TimestampRange           // timestamp range the entity is valid for
+    proxy_account_id: string | null   // Network entity ID in the format of shard.realm.num
+    timestamp: TimestampRange   // timestamp range the entity is valid for
 }
 
 export interface ContractResponse extends Contract {
@@ -496,8 +494,8 @@ export interface ContractResponse extends Contract {
 }
 
 export interface TimestampRange {
-    from: string | undefined            // The inclusive from timestamp in seconds
-    to: string | null | undefined       // The exclusive to timestamp in seconds
+    from: string | undefined    // The inclusive from timestamp in seconds
+    to: string | null | undefined   // The exclusive to timestamp in seconds
 }
 
 export interface ContractResultsResponse {
@@ -525,20 +523,20 @@ export interface ContractResult {
 
 export interface ContractResultDetails extends ContractResult {
     access_list: string | null
-    block_gas_used: number | null       // integer
+    block_gas_used: number | null // integer
     block_hash: string | null
-    block_number: number | null         // integer
+    block_number: number | null // integer
     chain_id: string | null
     gas_price: string | null
     logs: ContractResultLog[]
     max_fee_per_gas: string | null
     max_priority_fee_per_gas: string | null
-    nonce: number | null                // integer
+    nonce: number | null // integer
     r: string | null
     s: string | null
     state_changes: ContractResultStateChange[]
-    transaction_index: number | null    // integer
-    type: number | null                 // The type of the wrapped ethereum transaction, 0 (Pre-Eip1559) or 2 (Post-Eip1559)
+    transaction_index: number | null // integer
+    type: number | null // The type of the wrapped ethereum transaction, 0 (Pre-Eip1559) or 2 (Post-Eip1559)
     v: number | null
 }
 
@@ -547,7 +545,7 @@ export interface ContractResultLog {
     bloom: string | null | undefined
     contract_id: string | null | undefined
     data: string | null | undefined
-    index: number | undefined           // integer
+    index: number | undefined // integer
     topics: string[] | undefined
 }
 
@@ -565,34 +563,34 @@ export interface ContractActionsResponse {
 }
 
 export interface ContractAction {
-    call_depth: number | undefined
-    call_operation_type: string | undefined
-    call_type: string | undefined
-    caller: string | null | undefined   // Network entity ID in the format of shard.realm.num
-    caller_type: string | undefined     // enum EntityType
-    from: string | undefined
-    gas: number | undefined
-    gas_used: number | undefined
-    index: number | undefined
-    input: string | null | undefined
-    recipient: string | null | undefined
-    recipient_type: string | null | undefined // enum EntityType
-    result_data: string | null | undefined
-    result_data_type: string | undefined // enum ResultDataType
-    timestamp: string | undefined
-    to: string | null | undefined
+    call_depth: number | undefined,
+    call_operation_type: string | undefined,
+    call_type: string | undefined,
+    caller: string | null | undefined, // Network entity ID in the format of shard.realm.num
+    caller_type: string | undefined,   // enum EntityType
+    from: string | undefined,
+    gas: number | undefined,
+    gas_used: number | undefined,
+    index: number | undefined,
+    input: string | null | undefined,
+    recipient: string | null | undefined,
+    recipient_type: string | null | undefined, // enum EntityType
+    result_data: string | null | undefined,
+    result_data_type: string | undefined,      // enum ResultDataType
+    timestamp: string | undefined,
+    to: string | null | undefined,
     value: number | undefined
 }
 
 export enum EntityType {
     ACCOUNT = "ACCOUNT",
-    CONTRACT = "CONTRACT",
+    CONTRACT = "CONTRACT"
 }
 
 export enum ResultDataType {
     OUTPUT = "OUTPUT",
     REVERT_REASON = "REVERT_REASON",
-    ERROR = "ERROR",
+    ERROR = "ERROR"
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -606,19 +604,19 @@ export interface NetworkNodesResponse {
 
 export interface NetworkNode {
     description: string | null | undefined
-    file_id: string | null | undefined  // Network entity ID in the format of shard.realm.num
+    file_id: string | null | undefined   // Network entity ID in the format of shard.realm.num
     memo: string | undefined
     node_id: number | undefined
-    node_account_id: string | null | undefined // Network entity ID in the format of shard.realm.num
+    node_account_id: string | null | undefined   // Network entity ID in the format of shard.realm.num
     node_cert_hash: string | null | undefined
-    public_key: string | null | undefined // hex encoded X509 RSA public key used to sign stream files
+    public_key: string | null | undefined   // hex encoded X509 RSA public key used to sign stream files
     service_endpoints: ServiceEndPoint[] | undefined
     timestamp: TimestampRange | undefined
-    max_stake: number | null            // The maximum stake (rewarded or not rewarded) this node can have as consensus weight
-    min_stake: number | null            // The minimum stake (rewarded or not rewarded) this node must reach before having non-zero consensus weight
-    stake: number | null                // The node consensus weight at the beginning of the staking period
-    stake_not_rewarded: number | null   // The sum (balance + stakedToMe) for all accounts staked to this node with declineReward=true at the beginning of the staking period
-    stake_rewarded: number | null       // The sum (balance + staked) for all accounts staked to the node that are not declining rewards at the beginning of the staking period
+    max_stake: number | null // The maximum stake (rewarded or not rewarded) this node can have as consensus weight
+    min_stake: number | null // The minimum stake (rewarded or not rewarded) this node must reach before having non-zero consensus weight
+    stake: number | null // The node consensus weight at the beginning of the staking period
+    stake_not_rewarded: number | null // The sum (balance + stakedToMe) for all accounts staked to this node with declineReward=true at the beginning of the staking period
+    stake_rewarded: number | null // The sum (balance + staked) for all accounts staked to the node that are not declining rewards at the beginning of the staking period
     staking_period: TimestampRange | null
     reward_rate_start: number | null
 }
@@ -629,41 +627,27 @@ export interface ServiceEndPoint {
 }
 
 export function makeShortNodeDescription(description: string): string {
-    const separator = description.indexOf("|") ?? -1
-    return separator !== -1
-        ? description.slice(0, separator) ?? null
-        : description
+    const separator = description.indexOf('|') ?? -1
+    return (separator !== -1) ? (description.slice(0, separator) ?? null) : description
 }
 
 export function makeNodeSelectorDescription(node: NetworkNode): string {
     const percentFormatter = new Intl.NumberFormat("en-US", {
-        style: "percent",
-        maximumFractionDigits: 1,
+        style: 'percent',
+        maximumFractionDigits: 1
     })
-    const unclampedStakeAmount =
-        (node.stake_rewarded ?? 0) + (node.stake_not_rewarded ?? 0)
-    const percentMin = node.min_stake
-        ? unclampedStakeAmount / node.min_stake
-        : 0
-    const percentMax = node.max_stake
-        ? (node.stake_rewarded ?? 0) / node.max_stake
-        : 0
-
-    let result =
-        node.node_id +
-        " - " +
-        (node.description ?? makeDefaultNodeDescription(node.node_id ?? null))
+    const unclampedStakeAmount = (node.stake_rewarded ?? 0) + (node.stake_not_rewarded ?? 0)
+    const percentMin = node.min_stake ? unclampedStakeAmount / node.min_stake : 0
+    const percentMax = node.max_stake ? (node.stake_rewarded ?? 0) / node.max_stake : 0
+
+    let result = node.node_id
+        + ' - '
+        + (node.description ?? makeDefaultNodeDescription(node.node_id ?? null))
 
     if (percentMin !== 0 && percentMin < 1) {
-        result +=
-            " - Not Rewarding (total stake is " +
-            percentFormatter.format(percentMin) +
-            " of min)"
+        result += " - Not Rewarding (total stake is " + percentFormatter.format(percentMin) + " of min)"
     } else if (percentMax !== 0) {
-        result +=
-            " - Rewarding (staked for reward is " +
-            percentFormatter.format(percentMax) +
-            " of max)"
+        result += " - Rewarding (staked for reward is " + percentFormatter.format(percentMax) + " of max)"
     }
     return result
 }
@@ -672,33 +656,33 @@ export function makeNodeSelectorDescription(node: NetworkNode): string {
 //                                                      Network
 // ---------------------------------------------------------------------------------------------------------------------
 
-export interface NetworkExchangeRateSetResponse {
-    current_rate: ExchangeRate
-    next_rate: ExchangeRate
+export interface NetworkExchangeRateSetResponse{
+    current_rate: ExchangeRate,
+    next_rate: ExchangeRate,
     timestamp: string
 }
 
 export interface ExchangeRate {
-    cent_equivalent: number
-    expiration_time: number
+    cent_equivalent: number,
+    expiration_time: number,
     hbar_equivalent: number
 }
 
 export interface NetworkSupplyResponse {
-    released_supply: string | undefined // The network's released supply of hbars in tinybars
-    timestamp: string | undefined       // The consensus timestamp at which the released supply was valid
-    total_supply: string | undefined    // The network's total supply of hbars in tinybars
-}
-
-export interface NetworkStake {
-    max_staking_reward_rate_per_hbar: number
-    node_reward_fee_fraction: number
-    stake_total: number
-    staking_period: TimestampRange
-    staking_period_duration: number
-    staking_periods_stored: number
-    staking_reward_fee_fraction: number
-    staking_reward_rate: number
+    released_supply:	string | undefined  // The network's released supply of hbars in tinybars
+    timestamp: string | undefined  // The consensus timestamp at which the released supply was valid
+    total_supply: string | undefined  // The network's total supply of hbars in tinybars
+}
+
+export interface  NetworkStake {
+    max_staking_reward_rate_per_hbar: number,
+    node_reward_fee_fraction: number,
+    stake_total: number,
+    staking_period: TimestampRange,
+    staking_period_duration: number,
+    staking_periods_stored: number,
+    staking_reward_fee_fraction: number,
+    staking_reward_rate: number,
     staking_start_threshold: number
 }
 
@@ -712,7 +696,7 @@ export interface BlocksResponse {
 }
 
 export interface Block {
-    count: number | undefined           // integer - minimum 0
+    count: number | undefined // integer - minimum 0
     gas_used: number | null | undefined // integer - minimum 0
     hapi_version: string | undefined
     hash: string | undefined
@@ -720,13 +704,13 @@ export interface Block {
     name: string | undefined
     number: number | undefined
     previous_hash: string | undefined
-    size: number | null | undefined     // integer
+    size: number | null | undefined // integer
     timestamp: TimestampRange | undefined
 }
 
 export interface TimestampRange {
-    from: string | undefined            // pattern: ^\d{1,10}(\.\d{1,9})?$
-    to: string | null | undefined       // pattern: ^\d{1,10}(\.\d{1,9})?$
+    from: string | undefined // pattern: ^\d{1,10}(\.\d{1,9})?$
+    to: string | null | undefined // pattern: ^\d{1,10}(\.\d{1,9})?$
 }
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -739,7 +723,7 @@ export interface StakingRewardsResponse {
 }
 
 export interface StakingReward {
-    account_id: string | null
+    account_id: string|null
     amount: number
     timestamp: string
 }
@@ -756,7 +740,7 @@ export interface Key {
 export enum KeyType {
     ECDSA_SECP256K1 = "ECDSA_SECP256K1",
     ED25519 = "ED25519",
-    ProtobufEncoded = "ProtobufEncoded",
+    ProtobufEncoded = "ProtobufEncoded"
 }
 
 export interface Links {
@@ -769,10 +753,7 @@ export const infiniteDuration = 31556888202959784
 //                                                      Private
 // ---------------------------------------------------------------------------------------------------------------------
 
-function compareString(
-    s1: string | null | undefined,
-    s2: string | null | undefined,
-): number {
+function compareString(s1: string|null|undefined, s2: string|null|undefined): number {
     let result: number
 
     if (s1 && s2) {
@@ -789,10 +770,7 @@ function compareString(
     return result
 }
 
-function compareNumber(
-    n1: number | null | undefined,
-    n2: number | null | undefined,
-): number {
+function compareNumber(n1: number|null|undefined, n2: number|null|undefined): number {
     let result: number
 
     if (n1 && n2) {
diff --git a/src/utils/cache/NftBySerialCache.ts b/src/utils/cache/NftBySerialCache.ts
index 38b01caca..a39949ea8 100644
--- a/src/utils/cache/NftBySerialCache.ts
+++ b/src/utils/cache/NftBySerialCache.ts
@@ -38,7 +38,6 @@ export class NftBySerialCache extends SerialCache<string, Nft | null> {
             const response = await axios.get<Nft>(
                 `api/v1/tokens/${tokenIdSerialArray[0]}/nfts/${tokenIdSerialArray[1]}`,
             )
-            console.log(response)
             result = Promise.resolve(response.data)
         } catch (error) {
             if (axios.isAxiosError(error) && error.response?.status == 404) {
diff --git a/src/utils/table/TableController.ts b/src/utils/table/TableController.ts
index 72282121c..3bb2416d4 100644
--- a/src/utils/table/TableController.ts
+++ b/src/utils/table/TableController.ts
@@ -238,7 +238,7 @@ export abstract class TableController<R, K> {
     // Private
     //
 
-    private readonly autoRefreshRef: Ref<boolean> = ref(false)
+    private autoRefreshRef: Ref<boolean> = ref(false)
     private readonly mountedRef: Ref<boolean> = ref(false)