Update inspector inputs

[ngundotra]

Description

Adds instructions for serializing VersionedTransactions in old web3.js, and support for serializing transactions in new web3.js

Type of change

• Bug fix
• New feature
• Protocol integration
• Documentation update
• Other (please describe):

Screenshots

Testing

Related Issues

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

Additional Notes

---

Important

Enhances RawInputCard.tsx with a tabbed interface for transaction serialization instructions, supporting various methods including web3.js versions.

• UI Update:
  • Replaces list of instructions with a tabbed interface in RawInputCard.tsx.
  • Adds TabInstructions component to handle tabbed instruction display.
• Instructions:
  • Provides serialization instructions for @solana/web3.js versions <2.0.0 and >=2.0.0.
  • Includes instructions for CLI, Rust, TypeScript, and Squads.
• Misc:
  • Updates RawInput component to use TabInstructions for displaying instructions.

^{This description was created by for 72c9777. It will automatically update as commits are pushed.}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 4, 2025 9:12pm

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 4fd5d96 in 1 minute and 59 seconds

More details

• Looked at 133 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. app/components/inspector/RawInputCard.tsx:148

• Draft comment:
  Consider adding ARIA attributes and keyboard navigation support to the TabInstructions component for better accessibility.
• Reason this comment was not posted:
  Marked as duplicate.

2. app/components/inspector/RawInputCard.tsx:315

• Draft comment:
  The PR description mentions fixing transaction history for deleted accounts, but the changes appear to only update the inspector UI instructions. Please confirm that this change actually addresses issue #123.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to confirm if the change addresses a specific issue, which violates the rule against asking for confirmation of intentions. It does not provide a specific code suggestion or ask for a test to be written. Therefore, it should be removed.

3. app/components/inspector/RawInputCard.tsx:315

• Draft comment:
  PR description mentions resolving transaction history for deleted accounts, but this diff only updates inspector instructions. Confirm that changes addressing the deleted account history are included.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the PR author to confirm if changes related to transaction history for deleted accounts are included, which violates the rule against asking for confirmation or ensuring behavior is intended. The comment does not provide a specific code suggestion or ask for a specific test to be written.

4. app/components/inspector/RawInputCard.tsx:87

• Draft comment:
  Consider moving the TabInstructions component to a separate file for better separation of concerns if it grows in complexity.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

5. app/components/inspector/RawInputCard.tsx:129

• Draft comment:
  Ensure that 'getBase64EncodedWireTransaction' is defined or imported, as it is referenced in the TypeScript instructions for @solana/web3.js >= 2.0.0.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50%
  The comment is asking the author to ensure that a function is defined or imported, which is similar to asking them to double-check something. This violates the rule against asking the author to confirm or ensure things. The comment does not provide a specific suggestion or point out a clear issue with the code.

Workflow ID: wflow_gxH0b9iHxd571lRZ

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

Consider adding appropriate ARIA roles (e.g. role='tablist' on the container and role='tab' on each button) to improve accessibility for the TabInstructions component.

Suggested change

	<div className="nav nav-tabs">
	<div className="nav nav-tabs" role="tablist">

[ellipsis-dev]

👍 Looks good to me! Incremental review on 72c9777 in 54 seconds

More details

• Looked at 13 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. app/components/inspector/RawInputCard.tsx:150

• Draft comment:
  Good accessibility improvement adding role="tablist". Consider ensuring that each interactive tab button also has an appropriate role (e.g., role="tab") and necessary ARIA attributes to fully comply with WAI-ARIA guidelines.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

2. app/components/inspector/RawInputCard.tsx:150

• Draft comment:
  Good accessibility improvement by adding role="tablist". For full ARIA compliance, consider adding appropriate roles (e.g., role="tab") and state attributes such as aria-selected on the individual tab buttons.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50%
  None

Workflow ID: wflow_ee1cxMdxzTj6a2Vv

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.