Skip to content

Conversation

@glihm
Copy link
Contributor

@glihm glihm commented Oct 22, 2025

WIP on the event details page.

The goal here is to:

  1. Fix the hook for events in order to load the event data.
  2. Fix the Event page to display the raw and decoded event data.

Note

Revamps the Event page with raw/decoded tabs and formatting controls, and refactors the event hook to decode events via ABI with improved validation and types.

  • Event Hook (src/modules/Event/hooks.ts):
    • Refactors to use SuccessfulTransactionReceiptResponse, strict index parsing/validation, and query enabled guard.
    • Builds EmittedEvent locally; parses via events.parseEvents with AbiParser2, sortedAbi, and extracts decoded keys/data.
    • Returns structured decodedEvent (name, qualifiedName, keys, data) plus receipt, block, event.
  • Event Page (src/modules/Event/page.tsx):
    • New layout with tabs: Raw (keys/data) and Decoded (selector, decoded keys/data), with format toggles (FeltDisplayAsToggle).
    • Adds CopyableInteger, improved metadata (transaction, from, block, timestamp, event type), responsive updates, and cleaner rendering.
  • UI Component (src/shared/components/ToggleButton.tsx):
    • Replaces custom Selector with @cartridge/ui Tabs-based toggle; updated styles/behavior.
  • Utils:
    • abi.ts: exports AbiEventMember; uses sortedAbi helper.
    • string.ts: adds stringifyData for human-readable event values.

Written by Cursor Bugbot for commit c8306ab. This will update automatically on new commits. Configure here.

@vercel
Copy link

vercel bot commented Oct 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
explorer-sepolia Ready Ready Preview Oct 23, 2025 8:27am
explorer-starknet Ready Ready Preview Oct 23, 2025 8:27am

Copy link
Contributor Author

@glihm glihm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kariy @nrmnqdds sorry I didn't had that much time to complete, but it is at least functional and respecting a minimum the UI style.

please don't hesitate to push on this PR directly if necessary.

decodedEvent && (hasDecodedKeys || hasDecodedData),
);

useEffect(() => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know enough react to evaluate if this is correct or not. Maybe need some review here @nrmnqdds.

value="decoded"
className="mt-0 flex-1 overflow-auto"
>
{/* TODO: handle the nested events without flat, where the selector could be composed of multiple felts. */}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not critical, but definitely worthy to have a look later. But most of contracts are using flat attribute.

key={type}
value={type}
className={cn(
"data-[state=active]:shadow-none py-[2px] pr-[8px] pl-[10px] rounded-sm data-[state=active]:bg-background-200 data-[state=inactive]:bg-background-100 data-[state=inactive]:text-foreground-400 data-[state=active]:text-foreground-100 box-border border border-background-200 h-[20px] text-[11px]/[16px] font-medium uppercase tracking-[0.24px]",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems a lot, but I can take more time checking in the codebase if this is acceptable or not.

* @param value - The value to stringify. Which usually represents a data fetched from the chain.
* @returns The stringified data.
*/
export function stringifyData(value: unknown): string {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we have a function for that already, I've checked the utils and I've seen some for call data, but maybe it applies also to events.

Feel free to change if necessary.

@glihm glihm marked this pull request as ready for review October 22, 2025 23:02
@glihm glihm requested review from kariy and nrmnqdds October 22, 2025 23:02
cursor[bot]

This comment was marked as outdated.

@nrmnqdds nrmnqdds deleted the fix/event-page branch October 23, 2025 13:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants