feat(audit-trail): register routes and enhance layout for result view

Author: alexruzenhack

apps/explorer/src/components/ui/PageHeader.tsx

@@ -25,6 +25,7 @@ type PageHeaderType =
     | 'Package'
     | 'Identity'
     | 'Notarization'
+    | 'Audit Trail'
     | 'Abstract Account';
 
 export interface PageHeaderProps {
@@ -87,7 +88,7 @@ export function PageHeader({
                             <>
                                 {type && (
                                     <div className="flex flex-row items-center gap-xxs">
-                                        <span className="text-headline-sm text-iota-neutral-10 dark:text-iota-neutral-92">
+                                        <span className="dark:text-iota-neutral-92 text-headline-sm text-iota-neutral-10">
                                             {type}
                                         </span>
                                         {status && (
@@ -103,7 +104,7 @@ export function PageHeader({
                                     </div>
                                 )}
                                 {title && (
-                                    <div className="flex items-center gap-xxs text-iota-neutral-40 dark:text-iota-neutral-60">
+                                    <div className="dark:text-iota-neutral-60 flex items-center gap-xxs text-iota-neutral-40">
                                         <span
                                             className="break-all text-body-ds-lg"
                                             data-testid="heading-object-id"
@@ -124,7 +125,7 @@ export function PageHeader({
                                 {isLoadingSubtitle ? (
                                     <Placeholder width="w-48" />
                                 ) : subtitle ? (
-                                    <span className="truncate text-body-md text-iota-neutral-40 dark:text-iota-neutral-60">
+                                    <span className="dark:text-iota-neutral-60 truncate text-body-md text-iota-neutral-40">
                                         {subtitle}
                                     </span>
                                 ) : null}

apps/explorer/src/components/ui/SideBySidePanels.tsx

@@ -1,8 +1,9 @@
 // Copyright (c) 2026 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Panel, PanelGroup } from 'react-resizable-panels';
 import { ErrorBoundary } from '~/components';
+import { clsx } from 'clsx';
+import { Panel, PanelGroup } from 'react-resizable-panels';
 
 /**
  * The props for the SideBySidePanels component.
@@ -16,16 +17,31 @@ interface SideBySidePanelsProps {
      * The component for the second panel.
      */
     secondPanel: React.ReactNode;
+    /**
+     * The desired width distribution between panels on md+ screens.
+     */
+    ratio?: '50-50' | '66-34';
 }
 
+const RATIO_CLASSES = {
+    '50-50': { first: 'md:w-1/2', second: 'md:w-1/2' },
+    '66-34': { first: 'md:w-4/6', second: 'md:w-2/6' },
+};
+
 /**
  * Component that displays two panels side by side, already wrapped in ErrorBoundary.
  */
-export function SideBySidePanels({ firstPanel, secondPanel }: SideBySidePanelsProps) {
+export function SideBySidePanels({
+    firstPanel,
+    secondPanel,
+    ratio = '50-50',
+}: SideBySidePanelsProps) {
+    const classes = RATIO_CLASSES[ratio];
+
     return (
         <ErrorBoundary>
             <div className="flex flex-col gap-md md:flex-row">
-                <div className="flex w-full flex-1 md:w-1/2">
+                <div className={clsx('flex w-full flex-1', classes.first)}>
                     <div className="panel-bg flex w-full flex-col rounded-xl border border-transparent p-md--rs">
                         <PanelGroup direction="horizontal">
                             <Panel>
@@ -34,7 +50,7 @@ export function SideBySidePanels({ firstPanel, secondPanel }: SideBySidePanelsPr
                         </PanelGroup>
                     </div>
                 </div>
-                <div className="flex w-full md:w-1/2">
+                <div className={clsx('flex w-full', classes.second)}>
                     <div className="panel-bg flex w-full flex-col rounded-xl border border-transparent p-md--rs">
                         <PanelGroup direction="horizontal">
                             <Panel>

apps/explorer/src/hooks/useResolveAuditTrail.ts

@@ -0,0 +1,89 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+// TODO: use '@iota/audit-trail/web' after publish
+import { type AuditTrailHandle, type OnChainAuditTrail, type Record } from '@iota/audit-trail';
+import { useInfiniteQuery, useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useAuditTrailClient } from '~/contexts';
+
+// NOTE: These are placeholder types based on the specification.
+// They will be replaced with the actual types from '@iota/audit-trail'.
+
+type ListPageResponse = {
+    records: Record[];
+    cursor?: bigint;
+};
+
+/**
+ * A React hook that resolves an Object ID to its corresponding Audit Trail document on chain.
+ *
+ * @param {string} objectId - The Object ID to resolve.
+ * @returns a Audit Trail document on chain.
+ */
+export function useResolveOnChainAuditTrail(objectId: string): UseQueryResult<OnChainAuditTrail> {
+    const auditTrailClient = useAuditTrailClient();
+    return useQuery({
+        queryKey: ['resolve-audit-trail', objectId],
+        queryFn: async () => auditTrailClient?.trail(objectId).get(),
+        enabled: !!auditTrailClient,
+    });
+}
+
+/**
+ * A React hook that resolves an Object ID to its corresponding Audit Trail document on chain.
+ *
+ * @param {string} objectId - The Object ID to resolve.
+ * @returns a Audit Trail document on chain.
+ */
+export function useResolveAuditTrailHandle(objectId: string): UseQueryResult<AuditTrailHandle> {
+    const auditTrailClient = useAuditTrailClient();
+    return useQuery({
+        queryKey: ['resolve-audit-trail-handle', objectId],
+        queryFn: async () => auditTrailClient?.trail(objectId),
+        enabled: !!auditTrailClient,
+    });
+}
+
+type UsePaginatedAuditTrailRecordsParams = {
+    objectId: string;
+    auditTrail: AuditTrailHandle | null;
+    pageSize: number;
+};
+
+export function usePaginatedAuditTrailRecords({
+    objectId,
+    auditTrail,
+    pageSize,
+}: UsePaginatedAuditTrailRecordsParams) {
+    const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
+        useInfiniteQuery<ListPageResponse>({
+            queryKey: ['paginatedRecords', objectId, auditTrail, pageSize],
+            queryFn: async ({ pageParam = 0n }) => {
+                if (!auditTrail) {
+                    return { records: [], cursor: undefined };
+                }
+
+                const response = await auditTrail.records().listPage(pageParam as bigint, pageSize);
+
+                // This is a temporary hack because the wasm bindings do not return the correct type.
+                // This should be removed once the bindings are fixed.
+                return response as unknown as ListPageResponse;
+            },
+            initialPageParam: 0n,
+            getNextPageParam: (lastPage) => lastPage.cursor,
+            enabled: Boolean(auditTrail),
+        });
+
+    const records = useMemo(() => data?.pages.flatMap((page) => page.records) ?? [], [data]);
+
+    return {
+        records,
+        error,
+        fetchNextPage,
+        hasNextPage,
+        isFetching,
+        isFetchingNextPage,
+        isLoading,
+    };
+}

apps/explorer/src/pages/index.tsx

@@ -18,6 +18,7 @@ import { ValidatorPageResult } from './validators/Validators';
 import { Layout } from '~/components';
 import { IdentityResult } from './trust-framework/identity-result/IdentityResult';
 import { NotarizationResult } from './trust-framework/notarization-result/NotarizationResult';
+import { AuditTrailResult } from './trust-framework/audit-trail-result/AuditTrailResult';
 
 interface RedirectWithIdProps {
     base: string;
@@ -50,6 +51,7 @@ export const router = sentryCreateBrowserRouter([
             { path: 'validator/:id', element: <ValidatorDetails /> },
             { path: 'identity/:id', element: <IdentityResult /> },
             { path: 'notarization/:id', element: <NotarizationResult /> },
+            { path: 'audit-trail/:id', element: <AuditTrailResult /> },
         ],
     },
     {

apps/explorer/src/pages/trust-framework/audit-trail-result/AuditTrailContent.tsx

@@ -0,0 +1,116 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { AddressAlias, useCopyToClipboard, useGetObjectOrPastObject } from '@iota/core';
+import { PageHeader, PageLayout } from '~/components';
+import { onCopySuccess } from '~/lib';
+import { useAuditTrailPkgId } from '~/contexts';
+import { useMemo } from 'react';
+import { Warning } from '@iota/apps-ui-icons';
+import {
+    getAuditTrailRecordsSize,
+    getAuditTrailType,
+    MetadataBuilder,
+} from '../headerMetadataHelper';
+import {
+    useResolveAuditTrailHandle,
+    useResolveOnChainAuditTrail,
+} from '~/hooks/useResolveAuditTrail';
+import { TransactionsView } from '../common/TransactionsView';
+
+interface AuditTrailContentProps {
+    objectId: string;
+}
+
+export function AuditTrailContent({ objectId }: AuditTrailContentProps) {
+    const { data: objectResult, isPending: isObjectPending } = useGetObjectOrPastObject(objectId);
+    const { data: auditTrailObject, isPending: isAuditTrailObjectPending } =
+        useResolveOnChainAuditTrail(objectId);
+    const { data: auditTrailHandle, isPending: isAuditTrailHandlePending } =
+        useResolveAuditTrailHandle(objectId);
+
+    const copyToClipboard = useCopyToClipboard(onCopySuccess);
+    const iotaAuditTrailPackage = useAuditTrailPkgId();
+
+    const isPending = useMemo(
+        () => isAuditTrailObjectPending || isObjectPending || isAuditTrailHandlePending,
+        [isAuditTrailObjectPending, isObjectPending, isAuditTrailHandlePending],
+    );
+    if (isPending) {
+        return <PageLayout loading loadingText="Loading Audit Trail Object..." content={[]} />;
+    }
+
+    if (auditTrailObject == null || auditTrailHandle == null) {
+        return (
+            <PageLayout
+                content={
+                    <InfoBox
+                        title="Error resolving Audit Trail"
+                        supportingText={`Could not resolve Audit Trail ${objectId} in the current network.`}
+                        icon={<Warning />}
+                        type={InfoBoxType.Error}
+                        style={InfoBoxStyle.Elevated}
+                    />
+                }
+            />
+        );
+    }
+
+    if (objectResult == null) {
+        return (
+            <PageLayout
+                content={
+                    <InfoBox
+                        title="Error fetching Object"
+                        supportingText={`Could not fetch Object ID ${objectId} from the current network.`}
+                        icon={<Warning />}
+                        type={InfoBoxType.Error}
+                        style={InfoBoxStyle.Elevated}
+                    />
+                }
+            />
+        );
+    }
+
+    if (iotaAuditTrailPackage == null) {
+        // The activation of this branch is a symptom of Notarization WASM Web module not loaded.
+        return (
+            <PageLayout
+                content={
+                    <InfoBox
+                        title="Error loading official Audit Trail package"
+                        supportingText="Could not load package ID from Audit Trail client."
+                        icon={<Warning />}
+                        type={InfoBoxType.Error}
+                        style={InfoBoxStyle.Elevated}
+                    />
+                }
+            />
+        );
+    }
+
+    return (
+        <PageLayout
+            content={
+                <div className="flex flex-col gap-y-2xl">
+                    <PageHeader
+                        type="Audit Trail"
+                        title={
+                            <AddressAlias
+                                address={objectId || ''}
+                                onCopy={() => copyToClipboard(objectId || '')}
+                            />
+                        }
+                        showCopyButton={false}
+                        metaItems={MetadataBuilder.create()
+                            .addItem(getAuditTrailType(objectResult.data!, iotaAuditTrailPackage))
+                            .addItem(getAuditTrailRecordsSize(auditTrailObject))
+                            .build()}
+                    />
+                    <TransactionsView objectId={objectId} />
+                </div>
+            }
+        />
+    );
+}

apps/explorer/src/pages/trust-framework/audit-trail-result/AuditTrailResult.tsx

@@ -0,0 +1,30 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
+import { useParams } from 'react-router-dom';
+import { PageLayout } from '~/components';
+import { Warning } from '@iota/apps-ui-icons';
+import { AuditTrailContent } from './AuditTrailContent';
+
+export function AuditTrailResult() {
+    const { id: auditTrailId } = useParams();
+
+    if (auditTrailId == null) {
+        return (
+            <PageLayout
+                content={
+                    <InfoBox
+                        title="Audit Trail not implemented yet!"
+                        supportingText="Wait for the Audit Trail implementation."
+                        icon={<Warning />}
+                        type={InfoBoxType.Error}
+                        style={InfoBoxStyle.Elevated}
+                    />
+                }
+            />
+        );
+    }
+
+    return <AuditTrailContent objectId={auditTrailId} />;
+}