feat: enable raw data for all account headers by askov · Pull Request #884 · solana-foundation/explorer

askov · 2026-03-18T13:44:12Z

Description

Extracts a reusable AccountCard component (@features/account) that encapsulates the card shell (header, Raw/Refresh buttons, raw account data view), eliminating duplicated card markup across 13 account section files
Every account detail card now gets a "Raw" toggle showing address, balance, owner, data size, executable flag, and hex-encoded account data

Type of change

New feature

Screenshots

localhost_3000_address_EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

Testing

Visit any account page, e.g. http://localhost:3000/address/EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

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 run build:info script to update build information
CI/CD checks pass
I have included screenshots for protocol screens (if applicable)

vercel · 2026-03-18T13:44:17Z

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

A member of the Team first needs to authorize it.

greptile-apps · 2026-03-18T13:48:44Z

Greptile Summary

This PR extracts a reusable AccountCard component that encapsulates the card shell (header, Raw/Refresh buttons, raw account data table) and migrates 13 account-section files to use it. Every card now gets a "Raw" toggle that shows address, balance, owner, data size, executable flag, and hex-encoded account data via a new useRawAccountDataOnMount hook backed by useSWRImmutable.

Key changes:

New AccountCard / BaseAccountCard (app/features/account/ui/): thin compositional wrapper; RawAccountRows is only mounted when showRaw is true, so the network fetch is lazy and correctly gated on user interaction.
New BaseRawAccountRows: properly distinguishes three data states — in-flight spinner (isLoading=true), not-found ("Account data unavailable", rawData=undefined), and empty/populated data — addressing the concern raised in a prior review cycle.
Refactored shared/HexData: the existing common/HexData is deprecated to a re-export; the new implementation adds truncate, inverted, and align props plus pure utility functions (splitHexPairs, truncateHexPairs, formatHexSpans, groupHexRows) that are covered by unit tests.

One P1 concern: AccountDownloadDropdown was previously rendered in UnknownAccountCard and FungibleTokenMintAccountCard and has been removed during the migration without any replacement. The Raw inline view and the file-download capability are distinct features, so this is a functional regression rather than an intentional trade-off (the PR description does not mention retiring the download button).

Confidence Score: 4/5

Safe to merge once the AccountDownloadDropdown removal is confirmed intentional or reinstated.

One P1 finding: the download-to-disk feature previously available on UnknownAccountCard and FungibleTokenMintAccountCard has been silently dropped. All other changes are clean refactors with good test coverage; the prior loading-vs-not-found concern is now correctly resolved.

app/components/account/UnknownAccountCard.tsx and app/components/account/TokenAccountSection.tsx — both lost AccountDownloadDropdown without replacement.

Important Files Changed

Filename	Overview
app/components/account/UnknownAccountCard.tsx	Migrated to AccountCard, but AccountDownloadDropdown was removed without replacement — download-to-disk functionality is silently lost (P1).
app/components/account/TokenAccountSection.tsx	FungibleTokenMintAccountCard migrated to AccountCard, but AccountDownloadDropdown removed without replacement — same download regression as UnknownAccountCard.
app/features/account/ui/AccountCard.tsx	New thin wrapper composing BaseAccountCard with RawAccountRows; hook fires only on mount of RawAccountRows (when Raw is clicked), so no eager fetch occurs.
app/features/account/ui/BaseAccountCard.tsx	New reusable card shell with Raw/Refresh buttons; showRaw state controls which content is rendered, correctly preventing RawAccountRows from mounting until Raw is clicked.
app/features/account/ui/BaseRawAccountRows.tsx	Correctly distinguishes loading, not-found, empty, and data-present states.
app/entities/account/model/use-raw-account-data.ts	Adds useRawAccountDataOnMount using useSWRImmutable; new Connection per call flagged in prior thread; returns correct undefined/Uint8Array distinction.
app/components/shared/HexData.tsx	Expanded HexData with truncation, alignment, and inverted colour options; utility functions are well-tested.
app/components/common/HexData.tsx	Correctly deprecated to a re-export from @shared/HexData for backward compatibility.

_{Reviews (2): Last reviewed commit: "fix: memoize conn to not recreate it mul..." | Re-trigger Greptile}

greptile-apps · 2026-03-18T13:48:48Z

app/entities/account/model/use-raw-account-data.ts

+async function fetchRawAccountData([, url, address]: [string, string, string]): Promise<Uint8Array | null> {
+    const connection = new Connection(url, 'confirmed');
+    const info = await connection.getAccountInfo(new PublicKey(address));
+    return info ? Uint8Array.from(info.data) : null;
+}


New Connection instantiated on every fetch

A brand-new Connection object is created inside the SWR fetcher on every invocation. While useSWRImmutable prevents redundant calls for the same cache key, this still creates an extra connection object every time the cache key changes (different cluster or account). The existing cluster providers already manage a shared Connection instance.

Consider consuming the Connection from the cluster context, or at minimum memoizing it at module level keyed by URL, rather than constructing one inside the fetcher.

Fixed. Allowed to reuse the connection and not to recreate it

greptile-apps · 2026-03-18T13:48:49Z

app/features/account/ui/AccountCardBase.tsx

+                )}
+            </div>
+
+            <TableCardBody {...tableProps}>{showRaw ? rawContent : children}</TableCardBody>


rawContent is always mounted despite showRaw being false at start

AccountCardBase passes rawContent as a prop to AccountCard which immediately evaluates the JSX expression <RawAccountRows account={account} /> and creates the React element. However, since rawContent is only rendered in the tree when showRaw is true (via the ternary), RawAccountRows itself isn't mounted until the button is clicked — so the hook fires correctly on demand.

This is fine as-is, but it's worth noting that passing rawContent as a render prop () => <RawAccountRows /> instead of a pre-evaluated element would make the lazy-mounting intent more explicit and guard against future accidental eager rendering.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Not an issue

greptile-apps · 2026-03-18T13:48:50Z

app/entities/account/model/use-raw-account-data.ts

+export function useRawAccountDataOnMount(pubkey: PublicKey): Uint8Array | null {
+    const { url } = useCluster();
+
+    const { data } = useSWRImmutable(getRawAccountDataKey(url, pubkey), fetchRawAccountData);
+
+    return data ?? null;
+}


Indistinguishable loading vs. not-found state

useRawAccountDataOnMount returns null for both the initial loading state (SWR data is undefined, and undefined ?? null evaluates to null) and the case where fetchRawAccountData itself returns null (i.e., getAccountInfo found no account on chain).

BaseRawAccountRows treats any falsy rawData as "still loading" and shows a spinning indicator indefinitely. If a user visits a closed or non-existent account and clicks "Raw", the spinner will never resolve — there is no terminal state for "account not found".

The fix is to remove the ?? null coercion from the return value so that SWR's initial undefined (in-flight) remains distinct from the null that signals "account not found". The BaseRawAccountRowsProps type already allows rawData to be undefined, so the rendering logic just needs a third branch:

undefined → loading spinner

null → "Account data unavailable" message

Uint8Array → render HexData

vercel · 2026-03-28T00:07:01Z

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

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Mar 28, 2026 0:25am

rogaldh · 2026-03-28T00:07:17Z

@greptile-apps check again

rogaldh

LGTM

askov marked this pull request as draft March 18, 2026 13:44

greptile-apps bot reviewed Mar 18, 2026

View reviewed changes

refactor: extract AccountCard component with raw data toggle

6d15487

rogaldh force-pushed the refactor/extract-account-card-component branch from b41693c to 6d15487 Compare March 27, 2026 17:59

rogaldh added 8 commits March 27, 2026 18:06

fix: codestyle

f985ba3

fix: improve direct node access

9c99841

fix: add classes to make buttons smaller on mobile

84ec7c2

improve RAW button for mobile

62b978a

fix: import HexData changes

27a7789

fix: improve account card

5653aef

fix a11y issue with balance inside the card

50a49a8

fix: codestyle

b5d877e

vercel bot deployed to Preview March 28, 2026 00:12 View deployment

fix: memoize conn to not recreate it multiple times

796cd90

vercel bot deployed to Preview March 28, 2026 00:17 View deployment

fix: codestyle

d9fae1f

rogaldh approved these changes Mar 28, 2026

View reviewed changes

vercel bot deployed to Preview March 28, 2026 00:22 View deployment

fix: recover account download

0eb6c26

vercel bot deployed to Preview March 28, 2026 00:25 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: enable raw data for all account headers#884

feat: enable raw data for all account headers#884
askov wants to merge 12 commits intosolana-foundation:masterfrom
hoodieshq:refactor/extract-account-card-component

askov commented Mar 18, 2026

Uh oh!

vercel bot commented Mar 18, 2026

Uh oh!

greptile-apps bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

greptile-apps bot Mar 18, 2026

Uh oh!

rogaldh Mar 28, 2026

Uh oh!

greptile-apps bot Mar 18, 2026

Uh oh!

rogaldh Mar 28, 2026

Uh oh!

greptile-apps bot Mar 18, 2026

Uh oh!

rogaldh Mar 28, 2026

Uh oh!

vercel bot commented Mar 28, 2026 •

edited

Loading

Uh oh!

rogaldh commented Mar 28, 2026

Uh oh!

rogaldh left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

askov commented Mar 18, 2026

Description

Type of change

Screenshots

Testing

Related Issues

Checklist

Uh oh!

vercel bot commented Mar 18, 2026

Uh oh!

greptile-apps bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Uh oh!

greptile-apps bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

rogaldh Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

rogaldh Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

rogaldh Mar 28, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rogaldh commented Mar 28, 2026

Uh oh!

rogaldh left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

greptile-apps bot commented Mar 18, 2026 •

edited

Loading

vercel bot commented Mar 28, 2026 •

edited

Loading