feat: Improvements for InteractiveIDL UI #759

askov · 2025-11-21T15:09:59Z

Description

Rework the existing IDL tab components for consistency according to the design.

⚠️ Stories review

Reviewing the stories is optional. This code does not affect production and is intended for developers only.

Type of change

Screenshots

Before	After

Testing

Visit an IDL page, e.g. http://localhost:3000/address/ProgM6JCCvbYkfKqJYHePx4xxSUSqJp7rh8Lyv7nk7S/idl

Related Issues

N/A

Checklist

My code follows the project's style guidelines
I have added tests that prove my fix/feature works
All tests pass locally and in CI
I have updated documentation as needed
CI/CD checks pass
I have included screenshots for protocol screens (if applicable)
For security-related features, I have included links to related information

Important

Enhance InteractiveIDL UI by refactoring IDL components, adding structured rendering, and improving styling and testing.

UI Enhancements:
- Refactor IdlCard in IdlCard.tsx to use tabs for program-metadata and anchor IDLs.
- Add IdlSection in IdlSection.tsx for rendering IDL with search and download features.
- Introduce BaseFormattedIdl and related components for structured IDL rendering.
Components:
- Add BaseIdlAccounts, BaseIdlConstants, BaseIdlErrors, BaseIdlEvents, BaseIdlFields, BaseIdlInstructions, BaseIdlPdas, BaseIdlTypes for detailed IDL sections.
- Implement AnchorFormattedIdl and CodamaFormattedIdl for specific IDL formats.
Utilities:
- Add triggerDownload in triggerDownload.ts for downloading IDL files.
- Update tailwind.config.ts and styles.css for styling consistency.
Testing:
- Add tests for IdlCard in IdlCard.spec.tsx to verify rendering logic.
- Add Storybook stories for new components to demonstrate usage and appearance.

^{This description was created by}^{for f155048. You can customize this summary. It will automatically update as commits are pushed.}

vercel · 2025-11-21T15:10:05Z

@askov is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2025-11-21T15:11:55Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
explorer	Ready	Preview	Comment	Dec 1, 2025 0:33am

ellipsis-dev

Caution

Changes requested ❌

Reviewed everything up to f155048 in 4 minutes and 24 seconds. Click for details.

Reviewed 5181 lines of code in 82 files
Skipped 2 files when reviewing.
Skipped posting 8 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. app/features/idl/ui/IdlCard.tsx:50

Draft comment:
Consider checking for 'null' explicitly in activeTabIndex to ensure robust tab selection.
Reason this comment was not posted:
Confidence changes required: 50% <= threshold 50% None

2. app/features/idl/model/use-tabs.tsx:26

Draft comment:
Ensure that the useTabs hook properly handles cases when idl is null, so the returned tabs array is non-empty before render.
Reason this comment was not posted:
Confidence changes required: 50% <= threshold 50% None

3. app/shared/lib/triggerDownload.ts:2

Draft comment:
Verify Buffer.from usage is safe in the browser – ensure polyfills are configured via Vite if needed.
Reason this comment was not posted:
Confidence changes required: 50% <= threshold 50% None

4. app/components/shared/ui/input.stories.tsx:6

Draft comment:
Typographical error: the type declaration for 'InputVariant' is missing a closing '>' for the NonNullable generic. It should be: type InputVariant = NonNullable<React.ComponentProps['variant']>;
Reason this comment was not posted:
Comment looked like it was already resolved.

5. app/entities/idl/formatters/formatted-idl.d.ts:58

Draft comment:
Typo: In the comment, there's inconsistent capitalization: you've written TypeField for one seed and Typefield for another. Consider using consistent capitalization (e.g., always TypeField).
Reason this comment was not posted:
Comment was on unchanged code.

6. app/features/idl/formatted-idl/ui/stories/AnchorFormattedIdl.stories.tsx:27

Draft comment:
Typographical note: The export name DisplayLegacyShankIdl seems inconsistent with the file/component name AnchorFormattedIdl. If this is an oversight, consider renaming it to DisplayLegacyAnchorIdl for consistency.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% The comment is about a change in the diff (renaming "Primary" to "DisplayLegacyShankIdl"). It's pointing out a potential naming inconsistency - the file and component are about "Anchor" IDL, but the story is named with "Shank". This could be either: (1) an intentional name because the mock data is actually a Shank IDL being displayed by the Anchor formatter, or (2) a typo/mistake. Without seeing the actual mock data or understanding the domain better, I can't be 100% certain. However, the comment is speculative ("seems inconsistent", "If this is an oversight") and asks the author to "consider" renaming - it's not definitively stating there's a problem. This violates the rule about not making speculative comments. The comment might be correct if "Shank" is indeed a mistake and should be "Anchor". However, it's also possible that the naming is intentional - perhaps the mock data represents a legacy Shank IDL that's being formatted using the Anchor formatter. The comment is phrased speculatively ("seems inconsistent", "If this is an oversight"), which suggests uncertainty. While there might be a legitimate naming issue, the speculative nature of the comment ("seems", "if this is an oversight", "consider") means it doesn't meet the bar of STRONG EVIDENCE that there's a problem. The rules explicitly state not to make speculative comments. If the author named it "DisplayLegacyShankIdl", they likely had a reason, and without definitive proof it's wrong, this comment should be removed. This comment should be deleted because it's speculative and doesn't provide strong evidence of an actual problem. The author may have intentionally named it "DisplayLegacyShankIdl" for a valid reason (e.g., the mock represents a Shank IDL being formatted by the Anchor formatter).

7. app/features/idl/ui/IdlCard.tsx:65

Draft comment:
Typographical note: The class name 'e-border-0' on line 65 might be a typo. It’s worth confirming if this was intended or if it should be 'border-0'.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% This comment is speculative ("might be a typo", "worth confirming") rather than definitively identifying an issue. The rules explicitly state "Do NOT make speculative comments" and "Do NOT ask the PR author to confirm their intention, to explain, to double-check things". The comment is asking the author to confirm if something was intended, which violates the rules. Additionally, this is a UI/styling change (CSS class names), and the rules say to assume UI changes were done correctly. Without access to the CSS files or styling system, there's no strong evidence that e-border-0 is wrong - it could be a legitimate custom class in their design system. Could e-border-0 actually be a legitimate custom CSS class in this project's styling system? Without seeing the CSS files or knowing the project's conventions, I can't be certain this is a typo. Exactly - this comment is speculative and asks for confirmation, which violates the rules. There's no strong evidence that this is actually wrong, and it could very well be an intentional custom class name in their styling system. This comment should be deleted because it's speculative ("might be a typo"), asks the author to confirm their intention ("worth confirming"), and relates to styling/UI where we should assume the author made the correct choice. There's no strong evidence this is actually wrong.

8. app/styles.css:4

Draft comment:
Typo: The CSS pseudo-class for the root element should be written as ':root', not '::root'.
Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 0% vs. threshold = 50% The comment appears to be incorrect. The diff shows :root { with a single colon on line 4, which is the correct CSS syntax. The full file context confirms this at L4. The comment claims there's a typo and suggests changing ::root to :root, but the code already has :root (single colon). This suggests the automated tool misread the code or made an error. The comment is factually wrong because it's identifying a problem that doesn't exist. Could the diff or file display be misleading me? Is there any scenario where the comment could be correct despite what I'm seeing? The diff clearly shows +:root { with a single colon (the correct syntax), and the full file context at L4 confirms :root with a single colon. There's no ambiguity here - the comment is simply incorrect. The comment should be deleted because it incorrectly identifies a typo that doesn't exist. The code already uses the correct :root syntax with a single colon, not ::root as the comment claims.

Workflow ID: wflow_zhbEVDqdhbVjErvQ

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

app/shared/lib/triggerDownload.ts

app/components/shared/ui/badge.tsx

notEduardo

LGTM but small updates needed. Also this PR conflicts with this PR @jacobcreech @Woody4618

notEduardo · 2025-11-27T17:45:57Z

app/shared/lib/triggerDownload.ts

+export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {
+    const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});


I'm not familiar with the type of data being downloaded, but is it possible that the data or filename could be malicious? if so, we could update this method with some validations

Suggested change

export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {

const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});

export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {

// Validate base64 format

if (!/^[A-Za-z0-9+/]*={0,2}$/.test(data)) {

throw new Error('Invalid base64 data');

}

// Sanitize filename to prevent directory traversal

const sanitizedFilename = filename.replace(/[^a-z0-9._-]/gi, '_');

// Limit file size to prevent DoS (e.g., 10MB)

const decoded = Buffer.from(data, 'base64');

if (decoded.length > 10 * 1024 * 1024) {

throw new Error('File too large to download');

}

const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});

Good catch! In our case, all these parameters aren't related to user input (we define them with code, and if something bad happens, it occurs before this function call). Moreover, this function is just a copy and paste from the already existing production code (see Downloadable.tsx)

I've improved the function to be more robust and secure.

I haven't included any sanitization because modern browsers already do this job well; see more details in the comments. Also, to prevent memory issues, we should validate the size before decoding, as it creates even more problems (see the comments).

notEduardo · 2025-11-27T17:52:06Z

app/features/idl/ui/IdlCard.tsx

+        }
+    }, [tabs]);
+
+    if ((!idl && !programMetadataIdl) || activeTabIndex == undefined) {


== treats null and undefined as equal, which could hide bugs. Use strict equality for type safety.

Suggested change

if ((!idl && !programMetadataIdl) || activeTabIndex == undefined) {

if ((!idl && !programMetadataIdl) || activeTabIndex === undefined) {

In this case it doesn't matter, but thanks for the suggestion. Maybe we should change eslint rules to forbid this usage?

not sure, up to @Woody4618 @jacobcreech but this would be the line to add. More context

"eqeqeq": ["error", "always"]

yeah im fine with changing the rule.

Co-authored-by: Eduardo Gonzalez <[email protected]>

notEduardo

LGTM @jacobcreech @Woody4618

## Description Implemented highlight search functionality for IDL components, results counter for tabs. ### ⚠️ Important This PR depends on #759, so there is actually only one commit. Should be rebased as soon as the base PR is merged ### ⚠️ Stories review Reviewing the stories is optional. This code does not affect production and is intended for developers only. ## Type of change  - [ ] Bug fix - [x] New feature - [ ] Protocol integration - [ ] Documentation update - [ ] Other (please describe): ## Screenshots <img width="1710" height="1839" alt="localhost_3000_address_waveQX2yP3H1pVU8djGvEHmYg8uamQ84AuyGtpsrXTF_idl" src="https://github.com/user-attachments/assets/5635ccaf-ebb5-4bed-9fb0-b84c649133df" /> https://github.com/user-attachments/assets/357e4d9f-3ad3-4ce2-b5e9-546a15df1c1d ## Testing - Visit http://localhost:3000/address/waveQX2yP3H1pVU8djGvEHmYg8uamQ84AuyGtpsrXTF/idl - Enter some search prompt - See the counters in tabs - See the highlighted results ## Related Issues N/A ## Checklist  - [x] My code follows the project's style guidelines - [x] I have added tests that prove my fix/feature works - [x] All tests pass locally and in CI - [ ] I have updated documentation as needed - [x] CI/CD checks pass - [x] I have included screenshots for protocol screens (if applicable) - [ ] For security-related features, I have included links to related information  ---- > [!IMPORTANT] > Implement highlight search functionality and results counter for IDL components, enhancing the developer interface with search and highlight features. > > - **Behavior**: > - Implement highlight search functionality for IDL components in `features/idl/formatted-idl/ui`. > - Add results counter for tabs in `use-tabs.tsx`. > - Search functionality uses `Fuse.js` for fuzzy searching in `search.ts`. > - **Components**: > - Add `HighlightNode` and `BaseHighlightNode` for text highlighting. > - Update `IdlCard`, `IdlSection`, and `IdlRenderer` to integrate search and highlight features. > - Add `SearchHighlightContext` for managing search state. > - **Testing**: > - Add tests for `HighlightNode` in `HighlightNode.test.tsx`. > - Add stories for various IDL components in `stories` directory. > - **Misc**: > - Update `styles.css` and `tailwind.config.ts` for styling changes. > - Add `triggerDownload` utility in `shared/lib` for downloading IDL data. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=solana-foundation%2Fexplorer&utm_source=github&utm_medium=referral)<sup> for 0b9d1c5. You can [customize](https://app.ellipsis.dev/solana-foundation/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>

ellipsis-dev bot reviewed Nov 21, 2025

View reviewed changes

app/shared/lib/triggerDownload.ts Outdated Show resolved Hide resolved

app/components/shared/ui/badge.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 21, 2025 15:15 View deployment

askov force-pushed the development-feat-interactive-idl-ui-part-2 branch from f155048 to 73ac554 Compare November 21, 2025 15:24

askov mentioned this pull request Nov 25, 2025

feat: Implement highlight search functionality for IDL components #765

Merged

12 tasks

feat: enhance IDL handling with new components and refactor

fb6e635

askov force-pushed the development-feat-interactive-idl-ui-part-2 branch from 73ac554 to fb6e635 Compare November 27, 2025 06:17

askov mentioned this pull request Nov 27, 2025

feat: Integrate new IDL handling core features #768

Merged

12 tasks

notEduardo reviewed Nov 27, 2025

View reviewed changes

askov and others added 2 commits November 28, 2025 12:30

Update app/features/idl/ui/IdlCard.tsx

9a1d60c

Co-authored-by: Eduardo Gonzalez <[email protected]>

feat: Enhance triggerDownload function with validation and options

aea8a3b

notEduardo approved these changes Nov 28, 2025

View reviewed changes

vercel bot deployed to Preview December 1, 2025 12:33 View deployment

Woody4618 approved these changes Dec 1, 2025

View reviewed changes

Woody4618 merged commit 9816261 into solana-foundation:master Dec 1, 2025
4 checks passed

		export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {
		const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});

-export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {
-    const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});
+export const triggerDownload = async (data: string, filename: string, type?: string): Promise<void> => {
+    // Validate base64 format
+    if (!/^[A-Za-z0-9+/]*={0,2}$/.test(data)) {
+        throw new Error('Invalid base64 data');
+    }
+    // Sanitize filename to prevent directory traversal
+    const sanitizedFilename = filename.replace(/[^a-z0-9._-]/gi, '_');
+    // Limit file size to prevent DoS (e.g., 10MB)
+    const decoded = Buffer.from(data, 'base64');
+    if (decoded.length > 10 * 1024 * 1024) {
+        throw new Error('File too large to download');
+    }
+    const blob = new Blob([Buffer.from(data, 'base64')], type ? { type } : {});

	if ((!idl && !programMetadataIdl) \|\| activeTabIndex == undefined) {
	if ((!idl && !programMetadataIdl) \|\| activeTabIndex === undefined) {

feat: Improvements for InteractiveIDL UI #759

feat: Improvements for InteractiveIDL UI #759

Uh oh!

Conversation

askov commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

⚠️ Stories review

Type of change

Screenshots

Testing

Related Issues

Checklist

Uh oh!

vercel bot commented Nov 21, 2025

Uh oh!

vercel bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

notEduardo left a comment

Choose a reason for hiding this comment

Uh oh!

notEduardo Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

askov Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

notEduardo Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

askov Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

notEduardo Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

Woody4618 Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

notEduardo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

askov commented Nov 21, 2025 •

edited

Loading

vercel bot commented Nov 21, 2025 •

edited

Loading

notEduardo Nov 27, 2025 •

edited

Loading