Enhance React Hooks Example Components#13
Merged
GuiBibeau merged 3 commits intosolana-foundation:mainfrom Nov 21, 2025
Merged
Conversation
…ove the pre-check and instead wrapped the airdrop call in a try-catch block.
GuiBibeau
reviewed
Nov 21, 2025
Collaborator
GuiBibeau
left a comment
GuiBibeau
left a comment
There was a problem hiding this comment.
just moving a bit of stuff around will help future reusability
Comment on lines
23
to
40
| if (account?.data instanceof Uint8Array) { | ||
| return `Uint8Array(${account?.data?.length} bytes):\n${Array.from(account?.data?.slice(0, 100)) | ||
| .map((byte) => byte.toString(16).padStart(2, '0')) | ||
| .join(' ')}${account?.data?.length > 100 ? '\n... (truncated)' : ''}`; | ||
| } | ||
| return JSON.stringify( | ||
| account?.data, | ||
| (_, value) => { | ||
| if (typeof value === 'bigint') { | ||
| return value.toString(); | ||
| } | ||
| if (value instanceof Uint8Array) { | ||
| return `Uint8Array(${value.length})`; | ||
| } | ||
| return value; | ||
| }, | ||
| 2, | ||
| ); |
Collaborator
There was a problem hiding this comment.
Can we move this whole formatter into a util in the example app? I think this might become handy into a formatter package eventually so we should extract it for future use
Contributor
Author
There was a problem hiding this comment.
Done, I added it in utils.ts
| <br /> | ||
| Need test USDC?{' '} | ||
| <a | ||
| href="https://faucet.circle.com/" |
Collaborator
There was a problem hiding this comment.
Let's make it a reusable component for the devnet USDC faucet. I think we'll likely want to showcase that in future places as the demo grows.
Contributor
Author
There was a problem hiding this comment.
Done, I put more love into the USDC button.
…r improved account data display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR improves the developer experience in the React hooks examples by enhancing error handling, data formatting, and providing better guidance for users working with the demo application.
Changes
1. AccountInspectorCard Improvements (
03c2b91)Enhanced the account data display and error handling in the Account Inspector component:
Better data formatting: Added smart handling for different data types
Uint8Arraydata now displays as formatted hex bytes (first 100 bytes with truncation indicator)BigIntvalues are properly converted to strings in JSON outputImproved error handling: Added optional chaining (
?.) for safer property access to prevent runtime errors when account data is undefined or nullEnhanced readability: Account data is now formatted with proper indentation and type-specific rendering for better debugging experience
2. SplTokenPanel UX Enhancement (
bee1dc2)Improved user experience and error handling for SPL token operations:
Added faucet link: Included a prominent link to Circle's USDC faucet (https://faucet.circle.com/) to help developers easily obtain test USDC for devnet testing
Better error handling: Wrapped the airdrop request in a try-catch block with proper error logging instead of pre-checking RPC capabilities, providing more helpful error messages when operations fail
Testing
Impact
These changes make the example application more user-friendly and robust, helping developers understand the framework better through improved error messages and clearer data visualization.
Before
After