From 32061c06b851706c4e170210022802051edf3ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Thu, 9 Oct 2025 19:59:22 +0200
Subject: [PATCH 1/9] First prototype of Hiero Hooks support.
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>
---
 _frontend/src/AppStorage.ts                   |  14 ++
 .../src/components/hooks/HieroHookEntry.vue   | 155 ++++++++++++++++++
 .../src/components/hooks/HieroHookStorage.vue |  90 ++++++++++
 .../src/components/hooks/HieroHooksList.vue   |  47 ++++++
 .../components/hooks/HieroHooksSection.vue    |  86 ++++++++++
 .../src/components/values/TimestampValue.vue  |  14 +-
 _frontend/src/pages/AccountDetails_Hooks.vue  |  47 ++++++
 .../src/pages/AccountDetails_Summary.vue      |  39 ++++-
 _frontend/src/router.ts                       |  10 ++
 _frontend/src/utils/RouteManager.ts           |   6 +-
 .../utils/cache/HieroHookStorageByIdCache.ts  |  68 ++++++++
 .../utils/cache/HieroHooksByAccountIdCache.ts |  74 +++++++++
 12 files changed, 642 insertions(+), 8 deletions(-)
 create mode 100644 _frontend/src/components/hooks/HieroHookEntry.vue
 create mode 100644 _frontend/src/components/hooks/HieroHookStorage.vue
 create mode 100644 _frontend/src/components/hooks/HieroHooksList.vue
 create mode 100644 _frontend/src/components/hooks/HieroHooksSection.vue
 create mode 100644 _frontend/src/pages/AccountDetails_Hooks.vue
 create mode 100644 _frontend/src/utils/cache/HieroHookStorageByIdCache.ts
 create mode 100644 _frontend/src/utils/cache/HieroHooksByAccountIdCache.ts

diff --git a/_frontend/src/AppStorage.ts b/_frontend/src/AppStorage.ts
index b920bf268..9c39051e6 100644
--- a/_frontend/src/AppStorage.ts
+++ b/_frontend/src/AppStorage.ts
@@ -229,6 +229,20 @@ export class AppStorage {
         this.setLocalStorageItem(this.ACCOUNT_AIRDROP_TAB_KEY, newValue)
     }
 
+    //
+    // preferred tabs in account hooks section
+    //
+
+    private static readonly ACCOUNT_HOOKS_TAB_KEY = 'accountHooksTab'
+
+    static getAccountHooksTab() {
+        return this.getLocalStorageItem(this.ACCOUNT_HOOKS_TAB_KEY)
+    }
+
+    static setAccountHooksTab(newValue: string | null) {
+        this.setLocalStorageItem(this.ACCOUNT_HOOKS_TAB_KEY, newValue)
+    }
+
     //
     // preferred tab in contract bytecode section
     //
diff --git a/_frontend/src/components/hooks/HieroHookEntry.vue b/_frontend/src/components/hooks/HieroHookEntry.vue
new file mode 100644
index 000000000..190c7ec8c
--- /dev/null
+++ b/_frontend/src/components/hooks/HieroHookEntry.vue
@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: Apache-2.0
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <div v-if="props.hook" class="card-root">
+
+    <div :class="{'split-content': isMediumScreen}">
+
+      <div class="left-content">
+        <Property id="hook-id">
+          <template #name>Hook ID</template>
+          <template #value>{{ props.hook.hook_id }}</template>
+        </Property>
+        <Property id="hook-contract-id">
+          <template #name>Contract</template>
+          <template #value>
+            <ContractLink :contract-id="props.hook.contract_id"/>
+          </template>
+        </Property>
+        <Property id="hook-owner-id">
+          <template #name>Owner</template>
+          <template #value>
+            <AccountLink :account-id="props.hook.owner_id"/>
+          </template>
+        </Property>
+        <Property id="hook-extension-point">
+          <template #name>Extension Point</template>
+          <template #value>{{ props.hook.extension_point }}</template>
+        </Property>
+        <Property id="hook-type">
+          <template #name>Hook Type</template>
+          <template #value>{{ props.hook.type }}</template>
+        </Property>
+      </div>
+
+      <div :class="{'split-separator': isMediumScreen}" class="right-content">
+        <Property id="hook-admin-key">
+          <template #name>Admin Key</template>
+          <template #value>
+            <KeyValue
+                :key-bytes="props.hook.admin_key?.key"
+                :key-type="props.hook.admin_key?._type"
+                :show-none="true"
+            />
+          </template>
+        </Property>
+        <Property id="hook-created-at">
+          <template #name>Created</template>
+          <template #value>
+            <TimestampValue
+                :show-none="true"
+                :timestamp="props.hook.created_timestamp"
+            />
+          </template>
+        </Property>
+        <Property id="hook-deleted">
+          <template #name>Deleted</template>
+          <template #value>{{ props.hook.deleted }}</template>
+        </Property>
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts" setup>
+
+import {inject, PropType} from "vue";
+import Property from "@/components/Property.vue";
+import {HieroHook} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
+import KeyValue from "@/components/values/KeyValue.vue";
+import TimestampValue from "@/components/values/TimestampValue.vue";
+import ContractLink from "@/components/values/link/ContractLink.vue";
+import AccountLink from "@/components/values/link/AccountLink.vue";
+
+const props = defineProps({
+  hook: {
+    type: Object as PropType<HieroHook | null>,
+    default: null
+  },
+})
+
+const isMediumScreen = inject('isMediumScreen', true)
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      STYLE                                                      -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+div.card-root {
+  background-color: var(--background-primary);
+  border: 1px solid var(--table-border);
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 16px;
+  padding: 16px;
+}
+
+@media (min-width: 1080px) {
+  div.card-root {
+    gap: 32px;
+    padding: 32px;
+  }
+}
+
+@media (min-width: 1080px) {
+  div.card-header {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+}
+
+div.split-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+}
+
+div.left-content {
+  align-content: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+div.right-content {
+  align-content: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+div.split-separator {
+  border-left: 1px solid var(--border-secondary);
+  padding-left: 24px;
+}
+
+</style>
diff --git a/_frontend/src/components/hooks/HieroHookStorage.vue b/_frontend/src/components/hooks/HieroHookStorage.vue
new file mode 100644
index 000000000..54e70d82d
--- /dev/null
+++ b/_frontend/src/components/hooks/HieroHookStorage.vue
@@ -0,0 +1,90 @@
+// SPDX-License-Identifier: Apache-2.0
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <div class="" style="display: flex; flex-direction: column; gap: 8px;">
+
+    <div style="display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-left: 8px">
+      <div>Storage State for Hook ID</div>
+      <SelectView v-model="hookId" small style="font-size:12px; min-width: 70px;">
+        <option v-for="h in hooks" :key="h.hook_id" :value="h.hook_id">
+          {{ h.hook_id }}
+        </option>
+      </SelectView>
+    </div>
+
+    <table class="o-table">
+      <thead>
+      <tr style="text-align: left;">
+        <th class="o-table__th" scope="col">ADDRESS</th>
+        <th class="o-table__th" scope="col">VALUE</th>
+        <th class="o-table__th" scope="col">DATE</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="s in slots" :key="s.timestamp">
+        <td class="o-table__td" style="max-width: 300px;">
+          <HexaDumpValue :byte-string="s.key" :word-wrap-medium="8" :word-wrap-small="4"/>
+        </td>
+        <td class="o-table__td" style="max-width: 300px;">
+          <HexaDumpValue :byte-string="s.value" :word-wrap-medium="8" :word-wrap-small="4"/>
+        </td>
+        <td class="o-table__td" style="max-width: 250px;">
+          <TimestampValue :nano="true" :timestamp="s.timestamp"/>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts" setup>
+
+import {computed, onBeforeUnmount, onMounted, ref} from "vue";
+import {HieroHooksByAccountIdCache} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
+import SelectView from "@/elements/SelectView.vue";
+import {HieroHookStorageByIdCache} from "@/utils/cache/HieroHookStorageByIdCache.ts";
+import HexaDumpValue from "@/components/values/HexaDumpValue.vue";
+import TimestampValue from "@/components/values/TimestampValue.vue";
+
+const props = defineProps({
+  accountId: {
+    type: String
+  }
+})
+
+const accountId = computed(() => props.accountId ?? null)
+const hooksLookup = HieroHooksByAccountIdCache.instance.makeLookup(accountId)
+onMounted(() => hooksLookup.mount())
+onBeforeUnmount(() => hooksLookup.unmount())
+const hooks = computed(() => hooksLookup.entity.value || [])
+const hookId = ref<number>(hooks.value[0]?.hook_id ?? 1)
+
+const storageLookupKey = computed(() => {
+  return accountId.value
+      ? HieroHookStorageByIdCache.makeKey(accountId.value, hookId.value)
+      : ''
+})
+const storageLookup = HieroHookStorageByIdCache.instance.makeLookup(storageLookupKey)
+onMounted(() => storageLookup.mount())
+onBeforeUnmount(() => storageLookup.unmount())
+const slots = computed(() => storageLookup.entity.value || [])
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      STYLE                                                      -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
diff --git a/_frontend/src/components/hooks/HieroHooksList.vue b/_frontend/src/components/hooks/HieroHooksList.vue
new file mode 100644
index 000000000..7a15acd65
--- /dev/null
+++ b/_frontend/src/components/hooks/HieroHooksList.vue
@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: Apache-2.0
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <template v-for="h in hooks" :key="h.hook_id">
+      <HieroHookEntry :hook="h"/>
+    </template>
+  </div>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts" setup>
+
+import {computed, onBeforeUnmount, onMounted} from "vue";
+import {HieroHooksByAccountIdCache} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
+import HieroHookEntry from "@/components/hooks/HieroHookEntry.vue";
+
+const props = defineProps({
+  accountId: {
+    type: String
+  }
+})
+
+const accountId = computed(() => props.accountId ?? null)
+const hooksLookup = HieroHooksByAccountIdCache.instance.makeLookup(accountId)
+onMounted(() => hooksLookup.mount())
+onBeforeUnmount(() => hooksLookup.unmount())
+const hooks = computed(() => hooksLookup.entity.value || [])
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      STYLE                                                      -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
diff --git a/_frontend/src/components/hooks/HieroHooksSection.vue b/_frontend/src/components/hooks/HieroHooksSection.vue
new file mode 100644
index 000000000..b0c887b95
--- /dev/null
+++ b/_frontend/src/components/hooks/HieroHooksSection.vue
@@ -0,0 +1,86 @@
+// SPDX-License-Identifier: Apache-2.0
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <DashboardCardV2 v-if="accountId">
+
+    <template #title>
+      Hiero Hooks
+    </template>
+
+    <template #content>
+      <Tabs
+          :selected-tab="selectedTab"
+          :tab-ids="tabIds"
+          :tabLabels="tabLabels"
+          @update:selected-tab="onUpdate($event)"
+      />
+
+      <div v-if="selectedTab === 'hooks'" id="hooks-table">
+        <HieroHooksList :account-id="props.accountId"/>
+      </div>
+
+      <div v-else-if="selectedTab === 'storage'" id="hooks-storage-table">
+        <HieroHookStorage :account-id="props.accountId"/>
+      </div>
+    </template>
+
+  </DashboardCardV2>
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts" setup>
+
+import {onBeforeMount, ref} from 'vue';
+import Tabs from "@/components/Tabs.vue";
+import DashboardCardV2 from "@/components/DashboardCardV2.vue";
+import HieroHooksList from "@/components/hooks/HieroHooksList.vue";
+import {useRoute, useRouter} from "vue-router";
+import {AppStorage} from "@/AppStorage.ts";
+import HieroHookStorage from "@/components/hooks/HieroHookStorage.vue";
+
+const props = defineProps({
+  accountId: String,
+})
+
+const route = useRoute(); // Get the current route object
+const router = useRouter(); // Router instance for navigation
+
+const tabIds = ['hooks', 'storage']
+const tabLabels = ['Hooks', 'Storage']
+const selectedTab = ref<string | null>(AppStorage.getAccountHooksTab() ?? tabIds[0])
+
+const onUpdate = (tab: string | null) => {
+  selectedTab.value = tab
+  AppStorage.setAccountHooksTab(tab)
+}
+
+onBeforeMount(() => {
+  const tabQuery = route.query.subtab; // Access the `tab` query parameter
+  console.log(`HieroHooksSection: tabQuery: ${JSON.stringify(tabQuery)}`)
+  console.log(`HieroHooksSection: tabQuery: ${typeof tabQuery}`)
+
+  if (tabQuery && typeof tabQuery === 'string') {
+    onUpdate(tabQuery)
+  }
+  router.replace({
+    path: route.path,
+    query: {...route.query, tab: undefined}, // Remove 'tab' from the query parameters
+  });
+});
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
diff --git a/_frontend/src/components/values/TimestampValue.vue b/_frontend/src/components/values/TimestampValue.vue
index 48bf36528..0dbd629e5 100644
--- a/_frontend/src/components/values/TimestampValue.vue
+++ b/_frontend/src/components/values/TimestampValue.vue
@@ -14,9 +14,10 @@
       <span>
         <span v-if="timePart" class="mr-3 h-is-numeric">
           <span>{{ timePart.hour }}:{{ timePart.minute }}</span>
-          <span class="h-is-low-contrast">:{{ timePart.second }}.{{
+          <span v-if="isMediumScreen" class="h-is-low-contrast">:{{ timePart.second }}.{{
               timePart.fractionalSecond
-            }}&nbsp;{{ timePart.dayPeriod }}</span>
+            }}</span>
+          <span>&nbsp;{{ timePart.dayPeriod }}</span>
         </span>
         <span class="h-is-numeric">{{ datePart }}</span>
       </span>
@@ -45,7 +46,7 @@ import {computed, defineComponent, inject, PropType, ref} from "vue";
 import {HMSF} from "@/utils/HMSF";
 import {initialLoadingKey} from "@/AppKeys";
 import {infiniteDuration} from "@/schemas/MirrorNodeSchemas";
-import { TriangleAlert } from 'lucide-vue-next';
+import {TriangleAlert} from 'lucide-vue-next';
 
 export default defineComponent({
   name: "TimestampValue",
@@ -68,6 +69,7 @@ export default defineComponent({
 
   setup(props) {
 
+    const isMediumScreen = inject('isMediumScreen', ref(true))
     const locale = "en-US"
 
     const seconds = computed(() => {
@@ -84,8 +86,11 @@ export default defineComponent({
       timeZoneName: "short",
       timeZone: HMSF.forceUTC ? "UTC" : undefined
     }
-    const dateFormat = new Intl.DateTimeFormat(locale, dateOptions)
     const datePart = computed(() => {
+      const options = {...dateOptions}
+      options.timeZoneName = isMediumScreen.value ? "short" : undefined
+
+      const dateFormat = new Intl.DateTimeFormat(locale, options)
       return (seconds.value != null && !isNever.value) ? dateFormat.format(seconds.value * 1000) : "?"
     })
 
@@ -96,6 +101,7 @@ export default defineComponent({
     const initialLoading = inject(initialLoadingKey, ref(false))
 
     return {
+      isMediumScreen,
       isNever,
       seconds,
       datePart,
diff --git a/_frontend/src/pages/AccountDetails_Hooks.vue b/_frontend/src/pages/AccountDetails_Hooks.vue
new file mode 100644
index 000000000..e7980417f
--- /dev/null
+++ b/_frontend/src/pages/AccountDetails_Hooks.vue
@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: Apache-2.0
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <HieroHooksSection :account-id="normalizedAccountId ?? undefined"/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts" setup>
+
+import {computed, onBeforeUnmount, onMounted} from 'vue';
+import {AccountLocParser} from "@/utils/parser/AccountLocParser";
+import {NetworkConfig} from "@/config/NetworkConfig";
+import HieroHooksSection from "@/components/hooks/HieroHooksSection.vue";
+
+const props = defineProps({
+  accountId: String,
+  network: String,
+})
+
+const networkConfig = NetworkConfig.inject()
+
+//
+// account
+//
+const accountLocParser = new AccountLocParser(computed(() => props.accountId ?? null), networkConfig)
+onMounted(() => accountLocParser.mount())
+onBeforeUnmount(() => accountLocParser.unmount())
+
+const normalizedAccountId = accountLocParser.accountId
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      STYLE                                                      -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style/>
+
diff --git a/_frontend/src/pages/AccountDetails_Summary.vue b/_frontend/src/pages/AccountDetails_Summary.vue
index f86f27bf3..b87bd328f 100644
--- a/_frontend/src/pages/AccountDetails_Summary.vue
+++ b/_frontend/src/pages/AccountDetails_Summary.vue
@@ -202,6 +202,41 @@
           <StringValue :string-value="account?.ethereum_nonce?.toString()"/>
         </template>
       </Property>
+      <!--
+            Show only if there are hooks, which might be indicated either by new properties of the accounts endpoint
+            or (more likely) by calling the new hooks endpoint.
+      -->
+      <Property id="numOfHooks">
+        <template #name>Nb. of Hooks</template>
+        <template #value>
+          <div style="display: flex; align-items: baseline; gap: 16px;">
+            <StringValue :string-value="'2'"/>
+            <ArrowLink
+                v-if="normalizedAccountId"
+                id="showHooksList"
+                :is-contrasted="true"
+                :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'hooks')"
+                text="Hooks list"
+            />
+          </div>
+        </template>
+      </Property>
+      <Property id="numOfStorage">
+        <template #name>Nb. of Storage Slots</template>
+        <template #value>
+          <div style="display: flex; align-items: baseline; gap: 16px;">
+            <StringValue :string-value="'4'"/>
+            <ArrowLink
+                v-if="normalizedAccountId"
+                id="showHooksStorageTable"
+                :is-contrasted="true"
+                :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'storage')"
+                text="Hooks storage"
+            />
+          </div>
+        </template>
+      </Property>
+
     </template>
 
     <template #footer>
@@ -251,6 +286,7 @@ import PublicLabel from "@/components/values/PublicLabel.vue";
 import {PublicLabelsCache} from "@/utils/cache/PublicLabelsCache.ts";
 import {routeManager, walletManager} from "@/utils/RouteManager.ts";
 import MirrorLink from "@/components/MirrorLink.vue";
+import ArrowLink from "@/components/ArrowLink.vue";
 
 const props = defineProps({
   accountId: String,
@@ -338,8 +374,7 @@ const onUpdateCompleted = () => accountLocParser.remount()
 const isMyAccount = computed(() => walletManager.accountId.value === props.accountId)
 const walletIconURL = computed(() => (isMyAccount.value) ? walletManager.walletIconURL.value || "" : "")
 const isHieroWallet = computed(() => walletManager.isHieroWallet.value)
-const isAccountEditable = computed(() => isMyAccount.value && isHieroWallet.value
-)
+const isAccountEditable = computed(() => isMyAccount.value && isHieroWallet.value)
 
 const hbarBalance = balanceAnalyzer.hbarBalance
 const isInactiveEvmAddress = accountLocParser.isInactiveEvmAddress
diff --git a/_frontend/src/router.ts b/_frontend/src/router.ts
index 56d69374c..8dabea6c3 100644
--- a/_frontend/src/router.ts
+++ b/_frontend/src/router.ts
@@ -3,6 +3,7 @@
 import AccountDetails from "@/pages/AccountDetails.vue";
 import AccountDetails_Allowances from "@/pages/AccountDetails_Allowances.vue";
 import AccountDetails_Assets from "@/pages/AccountDetails_Assets.vue";
+import AccountDetails_Hooks from "@/pages/AccountDetails_Hooks.vue";
 import AccountDetails_Operations from "@/pages/AccountDetails_Operations.vue";
 import AccountDetails_Summary from "@/pages/AccountDetails_Summary.vue";
 import Accounts from "@/pages/Accounts.vue";
@@ -435,6 +436,15 @@ export const ACCOUNT_DETAILS_ROUTE: RouteRecordRaw = {
                 tabLabel: "Allowances"
             }
         },
+        {
+            path: 'hooks',
+            name: 'AccountDetails_Hooks',
+            props: true,
+            component: AccountDetails_Hooks,
+            meta: {
+                tabLabel: "Hooks"
+            }
+        },
     ],
     props: true,
     meta: {
diff --git a/_frontend/src/utils/RouteManager.ts b/_frontend/src/utils/RouteManager.ts
index 9f1167d97..67262d496 100644
--- a/_frontend/src/utils/RouteManager.ts
+++ b/_frontend/src/utils/RouteManager.ts
@@ -249,11 +249,13 @@ export class RouteManager {
 
     public readonly accountDetailsOperator = new RouteOperator(ACCOUNT_DETAILS_ROUTE, this)
 
-    public makeRouteToAccount(accountId: string, tabId: string | null = null): RouteLocationRaw {
+    public makeRouteToAccount(accountId: string, tabId: string | null = null, subTab: string | null = null): RouteLocationRaw {
         const targetTabId = tabId ?? this.accountDetailsOperator.defaultTabId
+        const query = subTab !== null ? {'subtab': subTab} : undefined
         return {
             name: targetTabId,
-            params: {accountId: accountId, network: this.currentNetwork.value}
+            params: {accountId: accountId, network: this.currentNetwork.value},
+            query: query
         }
     }
 
diff --git a/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
new file mode 100644
index 000000000..2ff80bf46
--- /dev/null
+++ b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
@@ -0,0 +1,68 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import axios from 'axios';
+import {EntityCache} from './base/EntityCache';
+
+export interface HieroHookStorage {
+    key: string
+    value: string
+    timestamp: string
+}
+
+export class HieroHookStorageByIdCache extends EntityCache<string, HieroHookStorage[] | null> {
+
+    public static readonly instance = new HieroHookStorageByIdCache()
+
+    public static makeKey(accountId: string, hookId: number): string {
+        return `${accountId}---${hookId}`
+    }
+
+    //
+    // Cache
+    //
+    protected async load(key: string): Promise<HieroHookStorage[] | null> {
+        console.log("HieroHookStorageByIdCache.load", key)
+        const accountAndHookId = key.split("---")
+        const accountId = accountAndHookId[0]
+        const hookId = Number(accountAndHookId[1])
+        console.log("HieroHookStorageByIdCache.load", accountId, hookId)
+        let result: HieroHookStorage[] | null
+        // const params = {
+        //     limit: 100,
+        //     order: "desc",
+        // }
+
+        try {
+            // const response = await axios.get(`api/v1/accounts/${accountId}/hooks/${hookId}`, {params});
+            // result = await drainAccountHooks(response.data, params.limit)
+            result = [
+                [{
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000000",
+                    "value": "0x00000000000000000000000000000000000000000000000000000000000003e8",
+                    "timestamp": "1726874345.123456789"
+                }, {
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
+                    "value": "0x00000000000000000000000000000000000000000000000000000000FFFFFFFF",
+                    "timestamp": "1726874346.123456789"
+                }],
+                [{
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000000",
+                    "value": "0x00000000000000000000000000000000000000000000000000000000000003e8",
+                    "timestamp": "1727974345.123456789"
+                }, {
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
+                    "value": "0x0000000000000000000000000000000000000000000000000000000099999999",
+                    "timestamp": "1727974346.123456789"
+                }]
+            ][hookId - 1]
+        } catch (error) {
+            if (axios.isAxiosError(error) && error.response?.status == 404) {
+                result = null
+            } else {
+                throw error
+            }
+        }
+        return result
+    }
+}
+
diff --git a/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts b/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts
new file mode 100644
index 000000000..15b936616
--- /dev/null
+++ b/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts
@@ -0,0 +1,74 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import axios from 'axios';
+import {EntityCache} from './base/EntityCache';
+import {Key, KeyType} from '@/schemas/MirrorNodeSchemas.ts';
+
+export interface HieroHook {
+    admin_key: Key
+    contract_id: string  // Network entity ID in the format of shard.realm.num
+    created_timestamp: string
+    deleted: boolean
+    extension_point: "ACCOUNT_ALLOWANCE_HOOK"
+    hook_id: number
+    owner_id: string   // Network entity ID in the format of shard.realm.num
+    type: "LAMBDA"
+}
+
+export class HieroHooksByAccountIdCache extends EntityCache<string, HieroHook[] | null> {
+
+    public static readonly instance = new HieroHooksByAccountIdCache()
+
+    //
+    // Cache
+    //
+    protected async load(accountId: string): Promise<HieroHook[] | null> {
+        console.log("HieroHooksByAccountIdCache.load", accountId,)
+        let result: HieroHook[] | null
+        // const params = {
+        //     limit: 100,
+        //     order: "asc",
+        // }
+
+        try {
+            // const response = await axios.get(`api/v1/accounts/${accountId}/hooks`, {params});
+            // result = await drainAccountHooks(response.data, params.limit)
+            result = [
+                {
+                    "admin_key": {
+                        "_type": KeyType.ED25519,
+                        "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
+                    },
+                    "contract_id": "0.0.6984897",
+                    "created_timestamp": "1726874345.123456789",
+                    "deleted": false,
+                    "extension_point": "ACCOUNT_ALLOWANCE_HOOK",
+                    "hook_id": 1,
+                    "owner_id": "0.0.1306",
+                    "type": "LAMBDA"
+                },
+                {
+                    "admin_key": {
+                        "_type": KeyType.ED25519,
+                        "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
+                    },
+                    "contract_id": "0.0.6984897",
+                    "created_timestamp": "1726874345.123456789",
+                    "deleted": false,
+                    "extension_point": "ACCOUNT_ALLOWANCE_HOOK",
+                    "hook_id": 2,
+                    "owner_id": "0.0.1306",
+                    "type": "LAMBDA"
+                },
+            ]
+        } catch (error) {
+            if (axios.isAxiosError(error) && error.response?.status == 404) {
+                result = null
+            } else {
+                throw error
+            }
+        }
+        return result
+    }
+}
+

From 21996a8d6c08dac1f9c0e102964b026285a48185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Tue, 14 Oct 2025 23:32:03 +0200
Subject: [PATCH 2/9] Add LAMBDASSTORE transaction type.
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>
---
 _frontend/src/schemas/MirrorNodeSchemas.ts | 1 +
 _frontend/src/utils/TransactionTools.ts    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/_frontend/src/schemas/MirrorNodeSchemas.ts b/_frontend/src/schemas/MirrorNodeSchemas.ts
index cc4c360f3..102a3c3b8 100644
--- a/_frontend/src/schemas/MirrorNodeSchemas.ts
+++ b/_frontend/src/schemas/MirrorNodeSchemas.ts
@@ -257,6 +257,7 @@ export enum TransactionType {
     FILEDELETE = "FILEDELETE",
     FILEUPDATE = "FILEUPDATE",
     FREEZE = "FREEZE",
+    LAMBDASSTORE = "LAMBDASSTORE",
     NODECREATE = "NODECREATE",
     NODEDELETE = "NODEDELETE",
     NODESTAKEUPDATE = "NODESTAKEUPDATE",
diff --git a/_frontend/src/utils/TransactionTools.ts b/_frontend/src/utils/TransactionTools.ts
index 2281303f4..29b72439f 100644
--- a/_frontend/src/utils/TransactionTools.ts
+++ b/_frontend/src/utils/TransactionTools.ts
@@ -146,6 +146,10 @@ export function makeTypeLabel(type: TransactionType | undefined): string {
             result = "Freeze";
             break;
 
+        case TransactionType.LAMBDASSTORE:
+            result = "LambdaSStore";
+            break;
+
         case TransactionType.NODECREATE:
             result = "Node Create";
             break;

From 4196acf2f0e69969fbbb810943fd41f7e75e11af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 15 Oct 2025 10:09:53 +0200
Subject: [PATCH 3/9] More storage slots in the Hook mockup.
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/utils/cache/HieroHookStorageByIdCache.ts   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
index 2ff80bf46..b7c616090 100644
--- a/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
+++ b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
@@ -43,7 +43,11 @@ export class HieroHookStorageByIdCache extends EntityCache<string, HieroHookStor
                 }, {
                     "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
                     "value": "0x00000000000000000000000000000000000000000000000000000000FFFFFFFF",
-                    "timestamp": "1726874346.123456789"
+                    "timestamp": "1726876346.123456789"
+                }, {
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
+                    "value": "0x00000000000000000000000000000000000000000000000000000000CCCCCCCC",
+                    "timestamp": "1726878348.123456789"
                 }],
                 [{
                     "key": "0x0000000000000000000000000000000000000000000000000000000000000000",
@@ -52,8 +56,12 @@ export class HieroHookStorageByIdCache extends EntityCache<string, HieroHookStor
                 }, {
                     "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
                     "value": "0x0000000000000000000000000000000000000000000000000000000099999999",
-                    "timestamp": "1727974346.123456789"
-                }]
+                    "timestamp": "1727976346.123456789"
+                }, {
+                    "key": "0x0000000000000000000000000000000000000000000000000000000000000020",
+                    "value": "0x0000000000000000000000000000000000000000000000000000000055555555",
+                    "timestamp": "1727978348.123456789"
+                }],
             ][hookId - 1]
         } catch (error) {
             if (axios.isAxiosError(error) && error.response?.status == 404) {

From 02d51d7198e297a87f84e84fad13c50fc5c5e196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 15 Oct 2025 10:10:48 +0200
Subject: [PATCH 4/9] Add dynamic calculation of the nb of hooks and slots.
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_Summary.vue      | 35 ++++++++++++++++---
 .../utils/cache/HieroHookStorageByIdCache.ts  |  1 +
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/_frontend/src/pages/AccountDetails_Summary.vue b/_frontend/src/pages/AccountDetails_Summary.vue
index b87bd328f..447bf3e01 100644
--- a/_frontend/src/pages/AccountDetails_Summary.vue
+++ b/_frontend/src/pages/AccountDetails_Summary.vue
@@ -210,7 +210,7 @@
         <template #name>Nb. of Hooks</template>
         <template #value>
           <div style="display: flex; align-items: baseline; gap: 16px;">
-            <StringValue :string-value="'2'"/>
+            <PlainAmount :amount="nbOfHooks"/>
             <ArrowLink
                 v-if="normalizedAccountId"
                 id="showHooksList"
@@ -225,7 +225,7 @@
         <template #name>Nb. of Storage Slots</template>
         <template #value>
           <div style="display: flex; align-items: baseline; gap: 16px;">
-            <StringValue :string-value="'4'"/>
+            <PlainAmount :amount="nbOfSlots"/>
             <ArrowLink
                 v-if="normalizedAccountId"
                 id="showHooksStorageTable"
@@ -287,6 +287,9 @@ import {PublicLabelsCache} from "@/utils/cache/PublicLabelsCache.ts";
 import {routeManager, walletManager} from "@/utils/RouteManager.ts";
 import MirrorLink from "@/components/MirrorLink.vue";
 import ArrowLink from "@/components/ArrowLink.vue";
+import {HieroHooksByAccountIdCache} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
+import {HieroHookStorageByIdCache} from "@/utils/cache/HieroHookStorageByIdCache.ts";
+import PlainAmount from "@/components/values/PlainAmount.vue";
 
 const props = defineProps({
   accountId: String,
@@ -366,9 +369,7 @@ const label = computed(() =>
 // Account Update
 //
 const showUpdateAccountDialog = ref(false)
-
 const onUpdateAccount = () => showUpdateAccountDialog.value = true
-
 const onUpdateCompleted = () => accountLocParser.remount()
 
 const isMyAccount = computed(() => walletManager.accountId.value === props.accountId)
@@ -376,10 +377,34 @@ const walletIconURL = computed(() => (isMyAccount.value) ? walletManager.walletI
 const isHieroWallet = computed(() => walletManager.isHieroWallet.value)
 const isAccountEditable = computed(() => isMyAccount.value && isHieroWallet.value)
 
+//
+// Hooks
+//
+const normalizedAccountId = accountLocParser.accountId
+const hooksLookup = HieroHooksByAccountIdCache.instance.makeLookup(normalizedAccountId)
+onMounted(() => hooksLookup.mount())
+onBeforeUnmount(() => hooksLookup.unmount())
+const hooks = computed(() => hooksLookup.entity.value || [])
+
+const nbOfHooks = computed(() => hooks.value.length)
+const nbOfSlots = ref(0)
+watch(hooks, async () => {
+  let slots = 0
+  for (const hook of hooks.value) {
+    const key = HieroHookStorageByIdCache.makeKey(normalizedAccountId.value!, hook.hook_id)
+    const result = await HieroHookStorageByIdCache.instance.lookup(key)
+    if (result === null) {
+      console.error(`Could not find hook storage for hook ${hook.hook_id} of account ${normalizedAccountId.value}`)
+    } else {
+      slots += result.length
+    }
+  }
+  nbOfSlots.value = slots
+})
+
 const hbarBalance = balanceAnalyzer.hbarBalance
 const isInactiveEvmAddress = accountLocParser.isInactiveEvmAddress
 const account = accountLocParser.accountInfo
-const normalizedAccountId = accountLocParser.accountId
 const accountChecksum = accountLocParser.accountChecksum
 const accountDescription = accountLocParser.accountDescription
 const nodeId = accountLocParser.nodeId
diff --git a/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
index b7c616090..d69efc051 100644
--- a/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
+++ b/_frontend/src/utils/cache/HieroHookStorageByIdCache.ts
@@ -20,6 +20,7 @@ export class HieroHookStorageByIdCache extends EntityCache<string, HieroHookStor
     //
     // Cache
     //
+    // eslint-disable-next-line max-lines-per-function
     protected async load(key: string): Promise<HieroHookStorage[] | null> {
         console.log("HieroHookStorageByIdCache.load", key)
         const accountAndHookId = key.split("---")

From ff8eddfcc35601f3d78624d522a2cdf0f7088678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 15 Oct 2025 10:23:09 +0200
Subject: [PATCH 5/9] Don't display hooks properties when there is no hook
 defined.
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_Summary.vue      | 68 +++++++++----------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/_frontend/src/pages/AccountDetails_Summary.vue b/_frontend/src/pages/AccountDetails_Summary.vue
index 447bf3e01..cadd3de8f 100644
--- a/_frontend/src/pages/AccountDetails_Summary.vue
+++ b/_frontend/src/pages/AccountDetails_Summary.vue
@@ -71,7 +71,6 @@
     </template>
 
     <template #left-content>
-
       <Property id="balance">
         <template #name>
           Balance
@@ -202,41 +201,38 @@
           <StringValue :string-value="account?.ethereum_nonce?.toString()"/>
         </template>
       </Property>
-      <!--
-            Show only if there are hooks, which might be indicated either by new properties of the accounts endpoint
-            or (more likely) by calling the new hooks endpoint.
-      -->
-      <Property id="numOfHooks">
-        <template #name>Nb. of Hooks</template>
-        <template #value>
-          <div style="display: flex; align-items: baseline; gap: 16px;">
-            <PlainAmount :amount="nbOfHooks"/>
-            <ArrowLink
-                v-if="normalizedAccountId"
-                id="showHooksList"
-                :is-contrasted="true"
-                :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'hooks')"
-                text="Hooks list"
-            />
-          </div>
-        </template>
-      </Property>
-      <Property id="numOfStorage">
-        <template #name>Nb. of Storage Slots</template>
-        <template #value>
-          <div style="display: flex; align-items: baseline; gap: 16px;">
-            <PlainAmount :amount="nbOfSlots"/>
-            <ArrowLink
-                v-if="normalizedAccountId"
-                id="showHooksStorageTable"
-                :is-contrasted="true"
-                :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'storage')"
-                text="Hooks storage"
-            />
-          </div>
-        </template>
-      </Property>
-
+      <template v-if="nbOfHooks">
+        <Property id="numOfHooks">
+          <template #name>Nb. of Hooks</template>
+          <template #value>
+            <div style="display: flex; align-items: baseline; gap: 16px;">
+              <PlainAmount :amount="nbOfHooks"/>
+              <ArrowLink
+                  v-if="normalizedAccountId"
+                  id="showHooksList"
+                  :is-contrasted="true"
+                  :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'hooks')"
+                  text="Hooks list"
+              />
+            </div>
+          </template>
+        </Property>
+        <Property id="numOfStorage">
+          <template #name>Nb. of Storage Slots</template>
+          <template #value>
+            <div style="display: flex; align-items: baseline; gap: 16px;">
+              <PlainAmount :amount="nbOfSlots"/>
+              <ArrowLink
+                  v-if="normalizedAccountId"
+                  id="showHooksStorageTable"
+                  :is-contrasted="true"
+                  :route="routeManager.makeRouteToAccount(normalizedAccountId, 'AccountDetails_Hooks', 'storage')"
+                  text="Hooks storage"
+              />
+            </div>
+          </template>
+        </Property>
+      </template>
     </template>
 
     <template #footer>

From baf4d3c676b9cd7e776d79f313b9cedb5f5ec5fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Wed, 15 Oct 2025 22:43:44 +0200
Subject: [PATCH 6/9] 'Nb.' --> 'Number'
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>
---
 _frontend/src/pages/AccountDetails_Summary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_frontend/src/pages/AccountDetails_Summary.vue b/_frontend/src/pages/AccountDetails_Summary.vue
index cadd3de8f..dc6a367b1 100644
--- a/_frontend/src/pages/AccountDetails_Summary.vue
+++ b/_frontend/src/pages/AccountDetails_Summary.vue
@@ -203,7 +203,7 @@
       </Property>
       <template v-if="nbOfHooks">
         <Property id="numOfHooks">
-          <template #name>Nb. of Hooks</template>
+          <template #name>Number of Hooks</template>
           <template #value>
             <div style="display: flex; align-items: baseline; gap: 16px;">
               <PlainAmount :amount="nbOfHooks"/>
@@ -218,7 +218,7 @@
           </template>
         </Property>
         <Property id="numOfStorage">
-          <template #name>Nb. of Storage Slots</template>
+          <template #name>Number of Storage Slots</template>
           <template #value>
             <div style="display: flex; align-items: baseline; gap: 16px;">
               <PlainAmount :amount="nbOfSlots"/>

From 8b6dac62144aee36719ce4fa213539b68e15b13c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Fri, 14 Nov 2025 15:36:13 +0100
Subject: [PATCH 7/9] Add MN interfaces related to new
 /api/v1/accounts/{id}/hooks endpoint.
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>
---
 _frontend/src/schemas/MirrorNodeSchemas.ts | 25 ++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/_frontend/src/schemas/MirrorNodeSchemas.ts b/_frontend/src/schemas/MirrorNodeSchemas.ts
index 102a3c3b8..e0f205f9b 100644
--- a/_frontend/src/schemas/MirrorNodeSchemas.ts
+++ b/_frontend/src/schemas/MirrorNodeSchemas.ts
@@ -110,6 +110,31 @@ export interface NftAllowancesResponse {
     links: Links
 }
 
+export enum ExtensionPoint {
+    ACCOUNT_ALLOWANCE_HOOK = "ACCOUNT_ALLOWANCE_HOOK",
+}
+
+export enum HookType {
+    LAMBDA = "LAMBDA",
+}
+
+export interface Hook {
+    admin_key: Key | null,
+    contract_id: string | null,             // The contract entity that contains the hook's executing bytecode
+    created_timestamp: string | null,       // The consensus timestamp when the hook was created
+    deleted: boolean,                       // Whether the hook has been deleted
+    extension_point: ExtensionPoint,        // The extension point this hook implements
+    hook_id: number,                        // The unique identifier for the hook within the owner's scope
+    owner_id: string | null,                // The entity that owns the hook
+    timestamp_range: TimestampRange | null  // Timestamp range the hook is valid for
+    type: HookType,                         // The type of the hook implementation
+}
+
+export interface HooksResponse {
+    hooks: Array<Hook>,
+    links: Links
+}
+
 // ---------------------------------------------------------------------------------------------------------------------
 //                                                   Balance
 // ---------------------------------------------------------------------------------------------------------------------

From 8e28d0bd455dad93af2818aca4e77662f670a7d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Fri, 14 Nov 2025 15:39:14 +0100
Subject: [PATCH 8/9] Adjust mocked code in prototype to actual MN endpoint.
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/hooks/HieroHookEntry.vue   |  4 +-
 .../components/hooks/HieroHooksSection.vue    |  2 -
 .../utils/cache/HieroHooksByAccountIdCache.ts | 93 +++++++++----------
 3 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/_frontend/src/components/hooks/HieroHookEntry.vue b/_frontend/src/components/hooks/HieroHookEntry.vue
index 190c7ec8c..109321dda 100644
--- a/_frontend/src/components/hooks/HieroHookEntry.vue
+++ b/_frontend/src/components/hooks/HieroHookEntry.vue
@@ -77,15 +77,15 @@
 
 import {inject, PropType} from "vue";
 import Property from "@/components/Property.vue";
-import {HieroHook} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
 import KeyValue from "@/components/values/KeyValue.vue";
 import TimestampValue from "@/components/values/TimestampValue.vue";
 import ContractLink from "@/components/values/link/ContractLink.vue";
 import AccountLink from "@/components/values/link/AccountLink.vue";
+import {Hook} from "@/schemas/MirrorNodeSchemas.ts";
 
 const props = defineProps({
   hook: {
-    type: Object as PropType<HieroHook | null>,
+    type: Object as PropType<Hook | null>,
     default: null
   },
 })
diff --git a/_frontend/src/components/hooks/HieroHooksSection.vue b/_frontend/src/components/hooks/HieroHooksSection.vue
index b0c887b95..a9d1f7b54 100644
--- a/_frontend/src/components/hooks/HieroHooksSection.vue
+++ b/_frontend/src/components/hooks/HieroHooksSection.vue
@@ -64,8 +64,6 @@ const onUpdate = (tab: string | null) => {
 
 onBeforeMount(() => {
   const tabQuery = route.query.subtab; // Access the `tab` query parameter
-  console.log(`HieroHooksSection: tabQuery: ${JSON.stringify(tabQuery)}`)
-  console.log(`HieroHooksSection: tabQuery: ${typeof tabQuery}`)
 
   if (tabQuery && typeof tabQuery === 'string') {
     onUpdate(tabQuery)
diff --git a/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts b/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts
index 15b936616..271a84d34 100644
--- a/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts
+++ b/_frontend/src/utils/cache/HieroHooksByAccountIdCache.ts
@@ -2,65 +2,60 @@
 
 import axios from 'axios';
 import {EntityCache} from './base/EntityCache';
-import {Key, KeyType} from '@/schemas/MirrorNodeSchemas.ts';
+import {Hook, HooksResponse} from '@/schemas/MirrorNodeSchemas.ts';
 
-export interface HieroHook {
-    admin_key: Key
-    contract_id: string  // Network entity ID in the format of shard.realm.num
-    created_timestamp: string
-    deleted: boolean
-    extension_point: "ACCOUNT_ALLOWANCE_HOOK"
-    hook_id: number
-    owner_id: string   // Network entity ID in the format of shard.realm.num
-    type: "LAMBDA"
-}
-
-export class HieroHooksByAccountIdCache extends EntityCache<string, HieroHook[] | null> {
+export class HieroHooksByAccountIdCache extends EntityCache<string, Hook[] | null> {
 
     public static readonly instance = new HieroHooksByAccountIdCache()
 
     //
     // Cache
     //
-    protected async load(accountId: string): Promise<HieroHook[] | null> {
+    // eslint-disable-next-line max-lines-per-function
+    protected async load(accountId: string): Promise<Hook[] | null> {
         console.log("HieroHooksByAccountIdCache.load", accountId,)
-        let result: HieroHook[] | null
-        // const params = {
-        //     limit: 100,
-        //     order: "asc",
-        // }
+        let result: Hook[] | null
+        const params = {
+            limit: 100,
+            order: "asc",
+        }
 
         try {
-            // const response = await axios.get(`api/v1/accounts/${accountId}/hooks`, {params});
+            const response = await axios.get<HooksResponse>(`api/v1/accounts/${accountId}/hooks`, {params});
+            // TODO Provide drainAccountHooks() and use it here to get all available hooks at once
             // result = await drainAccountHooks(response.data, params.limit)
-            result = [
-                {
-                    "admin_key": {
-                        "_type": KeyType.ED25519,
-                        "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
-                    },
-                    "contract_id": "0.0.6984897",
-                    "created_timestamp": "1726874345.123456789",
-                    "deleted": false,
-                    "extension_point": "ACCOUNT_ALLOWANCE_HOOK",
-                    "hook_id": 1,
-                    "owner_id": "0.0.1306",
-                    "type": "LAMBDA"
-                },
-                {
-                    "admin_key": {
-                        "_type": KeyType.ED25519,
-                        "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
-                    },
-                    "contract_id": "0.0.6984897",
-                    "created_timestamp": "1726874345.123456789",
-                    "deleted": false,
-                    "extension_point": "ACCOUNT_ALLOWANCE_HOOK",
-                    "hook_id": 2,
-                    "owner_id": "0.0.1306",
-                    "type": "LAMBDA"
-                },
-            ]
+            result = response.data.hooks
+
+            // result = [
+            //     {
+            //         "admin_key": {
+            //             "_type": KeyType.ED25519,
+            //             "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
+            //         },
+            //         "contract_id": "0.0.6984897",
+            //         "created_timestamp": "1726874345.123456789",
+            //         "deleted": false,
+            //         "extension_point": ExtensionPoint.ACCOUNT_ALLOWANCE_HOOK,
+            //         "hook_id": 1,
+            //         "owner_id": "0.0.1306",
+            //         "timestamp_range": null,
+            //         "type": HookType.LAMBDA,
+            //     },
+            //     {
+            //         "admin_key": {
+            //             "_type": KeyType.ED25519,
+            //             "key": "0xe88d731ad218447874d7470b797cac989d23107b4da129441665625cd5269ab0"
+            //         },
+            //         "contract_id": "0.0.6984897",
+            //         "created_timestamp": "1726874345.123456789",
+            //         "deleted": false,
+            //         "extension_point": ExtensionPoint.ACCOUNT_ALLOWANCE_HOOK,
+            //         "hook_id": 2,
+            //         "owner_id": "0.0.1306",
+            //         "timestamp_range": null,
+            //         "type": HookType.LAMBDA,
+            //     },
+            // ]
         } catch (error) {
             if (axios.isAxiosError(error) && error.response?.status == 404) {
                 result = null
@@ -68,7 +63,7 @@ export class HieroHooksByAccountIdCache extends EntityCache<string, HieroHook[]
                 throw error
             }
         }
-        return result
+        return Promise.resolve(result)
     }
 }
 

From b0604b227f4f8aa269dfe519124bfdbdcec7fb6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Vi=C3=A9not?= <simon.vienot@icloud.com>
Date: Fri, 14 Nov 2025 16:44:45 +0100
Subject: [PATCH 9/9] Display DocSnippet when no hooks are defined for the
 account.
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/hooks/HieroHooksList.vue   | 13 ++++--
 .../components/hooks/HieroHooksSection.vue    | 44 +++++++++++++------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/_frontend/src/components/hooks/HieroHooksList.vue b/_frontend/src/components/hooks/HieroHooksList.vue
index 7a15acd65..a2e66b31c 100644
--- a/_frontend/src/components/hooks/HieroHooksList.vue
+++ b/_frontend/src/components/hooks/HieroHooksList.vue
@@ -20,21 +20,26 @@
 
 <script lang="ts" setup>
 
-import {computed, onBeforeUnmount, onMounted} from "vue";
+import {computed, onBeforeUnmount, onMounted, watch} from "vue";
 import {HieroHooksByAccountIdCache} from "@/utils/cache/HieroHooksByAccountIdCache.ts";
 import HieroHookEntry from "@/components/hooks/HieroHookEntry.vue";
 
 const props = defineProps({
-  accountId: {
-    type: String
-  }
+  accountId: String,
+  nbHooks: Number,
 })
 
+const emit = defineEmits(['update:nbHooks'])
+
+
 const accountId = computed(() => props.accountId ?? null)
 const hooksLookup = HieroHooksByAccountIdCache.instance.makeLookup(accountId)
 onMounted(() => hooksLookup.mount())
 onBeforeUnmount(() => hooksLookup.unmount())
 const hooks = computed(() => hooksLookup.entity.value || [])
+watch(hooks, () => {
+  emit('update:nbHooks', hooks.value.length)
+}, {immediate: true})
 
 </script>
 
diff --git a/_frontend/src/components/hooks/HieroHooksSection.vue b/_frontend/src/components/hooks/HieroHooksSection.vue
index a9d1f7b54..ed9b5e764 100644
--- a/_frontend/src/components/hooks/HieroHooksSection.vue
+++ b/_frontend/src/components/hooks/HieroHooksSection.vue
@@ -13,20 +13,33 @@
     </template>
 
     <template #content>
-      <Tabs
-          :selected-tab="selectedTab"
-          :tab-ids="tabIds"
-          :tabLabels="tabLabels"
-          @update:selected-tab="onUpdate($event)"
-      />
-
-      <div v-if="selectedTab === 'hooks'" id="hooks-table">
-        <HieroHooksList :account-id="props.accountId"/>
-      </div>
-
-      <div v-else-if="selectedTab === 'storage'" id="hooks-storage-table">
-        <HieroHookStorage :account-id="props.accountId"/>
-      </div>
+      <template v-if="nbHooks > 0">
+        <Tabs
+            :selected-tab="selectedTab"
+            :tab-ids="tabIds"
+            :tabLabels="tabLabels"
+            @update:selected-tab="onUpdate($event)"
+        />
+
+        <div v-if="selectedTab === 'hooks'" id="hooks-table">
+          <HieroHooksList
+              v-model:nb-hooks="nbHooks"
+              :account-id="props.accountId"
+          />
+        </div>
+
+        <div v-else-if="selectedTab === 'storage'" id="hooks-storage-table">
+          <HieroHookStorage :account-id="props.accountId"/>
+        </div>
+      </template>
+      <template v-else>
+        <DocSnippet
+            doc-hint="See how to create and use hooks in the Hedera documentation"
+            doc-url="https://docs.hedera.com/hedera/core-concepts"
+        >
+          <p>No hooks have been configured for this account.</p>
+        </DocSnippet>
+      </template>
     </template>
 
   </DashboardCardV2>
@@ -45,6 +58,7 @@ import HieroHooksList from "@/components/hooks/HieroHooksList.vue";
 import {useRoute, useRouter} from "vue-router";
 import {AppStorage} from "@/AppStorage.ts";
 import HieroHookStorage from "@/components/hooks/HieroHookStorage.vue";
+import DocSnippet from "@/components/DocSnippet.vue";
 
 const props = defineProps({
   accountId: String,
@@ -57,6 +71,8 @@ const tabIds = ['hooks', 'storage']
 const tabLabels = ['Hooks', 'Storage']
 const selectedTab = ref<string | null>(AppStorage.getAccountHooksTab() ?? tabIds[0])
 
+const nbHooks = ref(0)
+
 const onUpdate = (tab: string | null) => {
   selectedTab.value = tab
   AppStorage.setAccountHooksTab(tab)