diff --git a/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityCard.tsx b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityCard.tsx
new file mode 100644
index 000000000..4ce074b6f
--- /dev/null
+++ b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityCard.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { rpc as StellarRpc, xdr } from "@stellar/stellar-sdk";
+import { Badge, Icon } from "@stellar/design-system";
+
+import { SdsLink } from "@/components/SdsLink";
+import { Routes } from "@/constants/routes";
+
+import { ContractActivityJson } from "./ContractActivityJson";
+import {
+ formatRelativeTime,
+ parseScVal,
+ truncateHash,
+ ParsedScVal,
+} from "./helpers";
+
+/**
+ * Renders a single contract event as a card with header, data rows, and
+ * collapsible JSON.
+ *
+ * @example
+ *
+ */
+export const ContractActivityCard = ({
+ event,
+}: {
+ event: StellarRpc.Api.EventResponse;
+}) => {
+ const txDashboardUrl = `${Routes.TRANSACTION_DASHBOARD}?txHash=${event.txHash}`;
+
+ // Parse topics and value
+ const topicRows: ParsedScVal[] = event.topic.map((t: xdr.ScVal) =>
+ parseScVal(t),
+ );
+ const valueRow: ParsedScVal = parseScVal(event.value);
+
+ // Build JSON for the collapsible viewer
+ const eventJson = JSON.stringify(
+ {
+ id: event.id,
+ type: event.type,
+ ledger: event.ledger,
+ ledgerClosedAt: event.ledgerClosedAt,
+ contractId: event.contractId?.toString(),
+ txHash: event.txHash,
+ topic: event.topic.map((t: xdr.ScVal) => t.toXDR("base64")),
+ value: event.value.toXDR("base64"),
+ },
+ null,
+ 2,
+ );
+
+ return (
+
+ {/* Header row */}
+
+
+ }
+ iconPosition="right"
+ >
+ {truncateHash(event.txHash)}
+
+
+
+
+ {formatRelativeTime(event.ledgerClosedAt)}
+
+
+
+ {/* Event body (gray box) */}
+
+ {/* Topics */}
+ {topicRows.map((row, i) => (
+
+ ))}
+
+ {/* Value */}
+
+
+ {/* Transaction hash */}
+
+ trx hash
+ {event.txHash}
+
+
+
+ {/* Collapsible JSON */}
+
+
+ {row.label}
+
+ {row.isAddress ? (
+
+ {row.displayValue}
+
+ ) : (
+ {row.displayValue}
+ )}
+ {row.typeAnnotation ? (
+
+ {row.typeAnnotation}
+
+ ) : null}
+
+
+ );
+};
diff --git a/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityJson.tsx b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityJson.tsx
new file mode 100644
index 000000000..f6ec6f473
--- /dev/null
+++ b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/ContractActivityJson.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { Icon } from "@stellar/design-system";
+
+import { CodeEditor } from "@/components/CodeEditor";
+
+/**
+ * Collapsible JSON viewer for a single contract event.
+ * Collapsed by default, toggled via "View JSON" link.
+ *
+ * @example
+ *
+ */
+export const ContractActivityJson = ({
+ eventJson,
+}: {
+ eventJson: string;
+}) => {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ return (
+
+
+
+ {isExpanded ? (
+
+ ) : null}
+
+ );
+};
diff --git a/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/helpers.ts b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/helpers.ts
new file mode 100644
index 000000000..25a1a87b6
--- /dev/null
+++ b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/helpers.ts
@@ -0,0 +1,244 @@
+import { Address, scValToNative, xdr } from "@stellar/stellar-sdk";
+import { rpc as StellarRpc } from "@stellar/stellar-sdk";
+
+// =============================================================================
+// Relative timestamp formatting
+// =============================================================================
+
+/**
+ * Formats an ISO timestamp as a human-readable relative time string.
+ * Matches the Figma spec: "~X seconds ago", "~X min ago", etc.
+ *
+ * @param isoTimestamp - ISO 8601 date string (ledgerClosedAt)
+ * @returns Relative time string, e.g. "~15 seconds ago"
+ *
+ * @example
+ * formatRelativeTime("2025-03-24T12:00:00Z"); // "~2 min ago"
+ */
+export const formatRelativeTime = (isoTimestamp: string): string => {
+ const now = Date.now();
+ const then = new Date(isoTimestamp).getTime();
+ const elapsedMs = now - then;
+ const elapsedSeconds = Math.floor(elapsedMs / 1000);
+
+ if (elapsedSeconds < 60) {
+ return `~${elapsedSeconds} seconds ago`;
+ }
+
+ const elapsedMinutes = Math.floor(elapsedSeconds / 60);
+ if (elapsedMinutes < 60) {
+ return `~${elapsedMinutes} min ago`;
+ }
+
+ const elapsedHours = Math.floor(elapsedMinutes / 60);
+ if (elapsedHours < 24) {
+ return `~${elapsedHours} hours ago`;
+ }
+
+ const elapsedDays = Math.floor(elapsedHours / 24);
+ return `~${elapsedDays} days ago`;
+};
+
+// =============================================================================
+// ScVal introspection
+// =============================================================================
+
+export interface ParsedScVal {
+ label: string;
+ typeAnnotation: string;
+ displayValue: string;
+ isAddress: boolean;
+}
+
+/**
+ * Truncates a hex hash to the format "2e887...b6f1f" (5 + 5 chars).
+ *
+ * @param hash - Full transaction hash
+ * @returns Truncated hash string
+ *
+ * @example
+ * truncateHash("2e887abcdef1234567890b6f1f"); // "2e887...b6f1f"
+ */
+export const truncateHash = (hash: string): string => {
+ if (hash.length <= 12) return hash;
+ return `${hash.slice(0, 5)}...${hash.slice(-5)}`;
+};
+
+/**
+ * Converts an i128 ScVal (hi + lo parts) into a decimal string.
+ *
+ * @param parts - The i128 value from ScVal
+ * @returns String representation of the 128-bit integer
+ */
+const i128ToString = (parts: xdr.Int128Parts): string => {
+ const hi = BigInt(parts.hi().toString());
+ const lo = BigInt(parts.lo().toString());
+ // hi is the high 64 bits, lo is the unsigned low 64 bits
+ const SHIFT = BigInt(64);
+ const MASK = (BigInt(1) << SHIFT) - BigInt(1);
+ const value = (hi << SHIFT) | (lo & MASK);
+ return value.toString();
+};
+
+/**
+ * Converts a u128 ScVal (hi + lo parts) into a decimal string.
+ *
+ * @param parts - The u128 value from ScVal
+ * @returns String representation of the unsigned 128-bit integer
+ */
+const u128ToString = (parts: xdr.UInt128Parts): string => {
+ const hi = BigInt(parts.hi().toString());
+ const lo = BigInt(parts.lo().toString());
+ const SHIFT = BigInt(64);
+ const MASK = (BigInt(1) << SHIFT) - BigInt(1);
+ const value = (hi << SHIFT) | (lo & MASK);
+ return value.toString();
+};
+
+/**
+ * Introspects an xdr.ScVal and returns a display-ready representation.
+ * Maps ScVal types to labels, type annotations, and display values
+ * per the spec's type-to-display mapping.
+ *
+ * @param scVal - A Stellar XDR ScVal object
+ * @returns Parsed display data for the ScVal
+ *
+ * @example
+ * const parsed = parseScVal(topic);
+ * // { label: "Symbol", typeAnnotation: "sym", displayValue: '"transfer"', isAddress: false }
+ */
+export const parseScVal = (scVal: xdr.ScVal): ParsedScVal => {
+ const typeName = scVal.switch().name;
+
+ switch (typeName) {
+ case "scvSymbol":
+ return {
+ label: "Symbol",
+ typeAnnotation: "sym",
+ displayValue: `"${scVal.sym().toString()}"`,
+ isAddress: false,
+ };
+
+ case "scvAddress": {
+ const addr = Address.fromScVal(scVal).toString();
+ return {
+ label: "Address",
+ typeAnnotation: "address",
+ displayValue: addr,
+ isAddress: true,
+ };
+ }
+
+ case "scvString":
+ return {
+ label: "string",
+ typeAnnotation: "string",
+ displayValue: `"${scVal.str().toString()}"`,
+ isAddress: false,
+ };
+
+ case "scvI128":
+ return {
+ label: "Data",
+ typeAnnotation: "i128",
+ displayValue: `"${i128ToString(scVal.i128())}"`,
+ isAddress: false,
+ };
+
+ case "scvU128":
+ return {
+ label: "Data",
+ typeAnnotation: "u128",
+ displayValue: `"${u128ToString(scVal.u128())}"`,
+ isAddress: false,
+ };
+
+ case "scvBytes":
+ return {
+ label: "Data",
+ typeAnnotation: "bytes",
+ displayValue: scVal.bytes().toString("hex"),
+ isAddress: false,
+ };
+
+ case "scvBool":
+ return {
+ label: "Data",
+ typeAnnotation: "bool",
+ displayValue: scVal.b().toString(),
+ isAddress: false,
+ };
+
+ default: {
+ // Fallback: JSON-serialize the ScVal
+ let fallback: string;
+ try {
+ fallback = JSON.stringify(scVal.value());
+ } catch {
+ fallback = scVal.toXDR("base64");
+ }
+ return {
+ label: "Data",
+ typeAnnotation: typeName.replace("scv", "").toLowerCase(),
+ displayValue: fallback,
+ isAddress: false,
+ };
+ }
+ }
+};
+
+// =============================================================================
+// humanizeEvents-based parsing
+// =============================================================================
+
+export interface HumanizedEvent {
+ /** Event type: "contract", "system", or "diagnostic" */
+ type: string;
+ /** Contract ID (C... strkey), if present */
+ contractId?: string;
+ /** Topics converted to native JS values via scValToNative */
+ topics: unknown[];
+ /** Event data converted to native JS value via scValToNative */
+ data: unknown;
+}
+
+export interface HumanizedEventWithMeta extends HumanizedEvent {
+ /** Transaction hash */
+ txHash: string;
+ /** Ledger number */
+ ledger: number;
+ /** ISO timestamp of ledger close */
+ ledgerClosedAt: string;
+ /** Original event ID */
+ id: string;
+}
+
+/**
+ * Parses raw RPC event responses using the SDK's `scValToNative` utility.
+ * Converts XDR ScVal topics and data into native JS values (strings, BigInts,
+ * addresses, etc.) while preserving event metadata (txHash, ledger, timestamp).
+ *
+ * This is a higher-level alternative to the manual `parseScVal` approach —
+ * it delegates type conversion to the SDK's `scValToNative`.
+ *
+ * @param events - Array of raw event responses from `getEvents()`
+ * @returns Array of humanized events with metadata attached
+ *
+ * @example
+ * const humanized = humanizeContractEvents(eventsData.events);
+ * // [{ type: "contract", topics: ["transfer", "G...", "G..."], data: 1000n, txHash: "abc...", ... }]
+ */
+export const humanizeContractEvents = (
+ events: StellarRpc.Api.EventResponse[],
+): HumanizedEventWithMeta[] => {
+ return events.map((e) => ({
+ type: e.type,
+ contractId: e.contractId?.toString(),
+ topics: e.topic.map((t: xdr.ScVal) => scValToNative(t)),
+ data: scValToNative(e.value),
+ txHash: e.txHash,
+ ledger: e.ledger,
+ ledgerClosedAt: e.ledgerClosedAt,
+ id: e.id,
+ }));
+};
diff --git a/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/index.tsx b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/index.tsx
new file mode 100644
index 000000000..20bd9d420
--- /dev/null
+++ b/src/app/(sidebar)/smart-contracts/contract-explorer/components/ContractActivity/index.tsx
@@ -0,0 +1,179 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button, Icon, Loader, Text } from "@stellar/design-system";
+
+import { Box } from "@/components/layout/Box";
+import { ErrorText } from "@/components/ErrorText";
+
+import { useGetContractEvents } from "@/query/useGetContractEvents";
+import { NetworkHeaders } from "@/types/types";
+
+import { ContractActivityCard } from "./ContractActivityCard";
+
+import "./styles.scss";
+
+const PAGE_SIZE = 20;
+
+/**
+ * Activity (events) tab content for the contract explorer.
+ * Fetches and displays recent contract events with 5-second polling.
+ * Includes a pause/resume button so users can freeze the feed to inspect events.
+ * Paginated at 20 events per page.
+ *
+ * @example
+ *
+ */
+export const ContractActivity = ({
+ isActive,
+ contractId,
+ rpcUrl,
+ headers,
+}: {
+ isActive: boolean;
+ contractId: string;
+ rpcUrl: string;
+ headers?: NetworkHeaders;
+}) => {
+ const [isPolling, setIsPolling] = useState(true);
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const {
+ data: eventsData,
+ error: eventsError,
+ isLoading: isEventsLoading,
+ isFetching: isEventsFetching,
+ refetch,
+ } = useGetContractEvents({
+ contractId,
+ rpcUrl,
+ headers,
+ isActive,
+ isPolling,
+ });
+
+ const events = eventsData?.events ?? [];
+ const totalPages = Math.max(1, Math.ceil(events.length / PAGE_SIZE));
+
+ // Reset to page 1 when data changes (new events come in)
+ useEffect(() => {
+ if (currentPage > totalPages) {
+ setCurrentPage(1);
+ }
+ }, [totalPages, currentPage]);
+
+ const paginatedEvents = events.slice(
+ (currentPage - 1) * PAGE_SIZE,
+ currentPage * PAGE_SIZE,
+ );
+
+ const handleTogglePolling = () => {
+ if (isPolling) {
+ setIsPolling(false);
+ } else {
+ refetch();
+ setIsPolling(true);
+ }
+ };
+
+ // Only show loader on initial load, not on refetches
+ if (isEventsLoading || (!eventsData && isEventsFetching)) {
+ return (
+
+
+
+ );
+ }
+
+ if (eventsError) {
+ return ;
+ }
+
+ if (events.length === 0) {
+ return (
+
+ No recent events found for this contract.
+
+ );
+ }
+
+ return (
+
+
+ : }
+ onClick={handleTogglePolling}
+ >
+ {isPolling ? "Pause" : "Fetch & Resume"}
+
+
+ {isPolling ? (
+
+ Auto-refreshing every 5s
+
+ ) : null}
+
+
+
+ {paginatedEvents.map((event) => (
+
+ ))}
+
+
+ {/* Pagination — matches DataTable's pagination pattern */}
+ {totalPages > 1 ? (
+
+
+ {events.length} events
+
+
+
+
+
+ }
+ onClick={() => setCurrentPage(currentPage - 1)}
+ disabled={currentPage === 1}
+ />
+
+
+ {`Page ${currentPage} of ${totalPages}`}
+
+
+ }
+ onClick={() => setCurrentPage(currentPage + 1)}
+ disabled={currentPage === totalPages}
+ />
+
+
+
+
+ ) : null}
+