') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Hide network icons that have no asset by shreyav · Pull Request #796 · lightsparkdev/grid-api · GitHub
Skip to content

Hide network icons that have no asset - #796

Merged
shreyav merged 1 commit into
mainfrom
claude/visualizer-icon-fallback-and-usd-collision
Aug 4, 2026
Merged

Hide network icons that have no asset#796
shreyav merged 1 commit into
mainfrom
claude/visualizer-icon-fallback-and-usd-collision

Conversation

@shreyav

@shreyavshreyav commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Summary

RailDropdown renders /networks/${network.toLowerCase()}.svg for every entry with no error handling, and three of the eight networks in crypto.ts have no asset: ethereum, plasma, tron. Those rows show a broken image next to the network name.

Three lines: an onError that hides the image.

networks referenced: base ethereum lightning plasma polygon solana spark tron
icons present: base bitcoin lightning polygon solana spark
missing: ethereum plasma tron

USDT has carried three broken rows for a while. #792 added Ethereum to USDC, which put the first one on a dropdown that had been clean — that's what surfaced it.

Why hide rather than supply the artwork. An Ethereum or Tron mark is brand material, and inventing one that doesn't match the existing set is worse than a gap. The three assets are still worth adding; this just stops the UI looking broken until they are.

Why visibility rather than display..networkMenuIcon is a fixed 20×20 flex item, so hiding it preserves the slot and the network names stay left-aligned down the list. display: none would make rows ragged depending on which icons happen to exist.

What I did not include, and why

This branch was going to carry the duplicate code: 'USD' fix as well — currencies.ts has two entries with that code (United States Dollar, and US Dollar (El Salvador)), so currencies.find(c => c.code === 'USD') never reaches the El Salvador entry and the picker builds two items with the same id, making it effectively unselectable.

Mapping it out, that is not a small fix. It needs selections re-keyed from code to accountType across roughly ten lookup sites in five files — CurrencyPicker.lookupSelection, getRailsText, three lookups in InputCard, three in useFlowBuilder including getDefaultRail's signature, code-generator, flow-path — plus POPULAR_CODES, which matches item ids. isSameCurrency also needs a decision, since two USD entries are the same currency on different rails.

All of that lands in .tsx files I cannot typecheck in this environment — npm ci fails in components/grid-visualizer because @central-icons-react requires CENTRAL_LICENSE_KEY, so React types are unavailable. Shipping a ten-site refactor unverified seemed like the wrong trade, so it wants its own PR from someone with a working build.

Verification

  • Missing-icon list derived mechanically by diffing public/networks/ against the network values in crypto.ts
  • .networkMenuIcon confirmed to have fixed dimensions, so visibility: hidden is layout-stable
  • Not verified: no build or render check, for the reason above. The Vercel preview is the real check — worth opening the USDC and USDT rail dropdowns to confirm the rows align with the icons absent.

Generated by Claude Code

@claude
Hide network icons that have no asset
eca5244
The rail dropdown renders /networks/<network>.svg for every entry with
no error handling, and three of the eight networks in crypto.ts have no
file: ethereum, plasma and tron. Those rows currently show a broken
image beside the network name. USDT has had three of them for a while;
adding Ethereum to USDC in #792 put the first one on a dropdown that
had been clean.
Hiding on error rather than adding artwork, because an Ethereum or Tron
mark is brand material and an invented one that doesn't match the
existing set is worse than a gap. The assets are still worth adding.
visibility rather than display, so the 20x20 slot is preserved and the
network names stay aligned down the list.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMnjJ8yWJsui7jLqqrDrL4
@vercel

vercelBot commented Aug 4, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
grid-flow-builderReadyReadyPreviewAug 4, 2026 3:56pm
1 Skipped Deployment
ProjectDeploymentActionsUpdated (UTC)
grid-wallet-demoIgnoredIgnoredAug 4, 2026 3:56pm

Request Review

@shreyav
shreyav marked this pull request as ready for review August 4, 2026 16:07
@greptile-apps

greptile-appsBot commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

The PR prevents missing network SVG assets from rendering broken-image glyphs while preserving consistent dropdown alignment.

  • Adds an image error handler that hides unavailable network icons.
  • Retains each icon’s fixed layout slot so network labels remain aligned.

Confidence Score: 5/5

The PR appears safe to merge with no actionable defects identified.

The handler only hides failed decorative network images, and the intentionally retained icon slot preserves alignment without affecting dropdown interaction or application state.

Important Files Changed

FilenameOverview
components/grid-visualizer/src/components/InputCard/InputCard.tsxAdds localized error handling for unavailable network icons without changing dropdown selection behavior or generated flow data.

Reviews (1): Last reviewed commit: "Hide network icons that have no asset" | Re-trigger Greptile

@shreyav
shreyav merged commit dda7e70 into mainAug 4, 2026
9 checks passed
@shreyav
shreyav deleted the claude/visualizer-icon-fallback-and-usd-collision branch August 4, 2026 20:10
@patcapulongpatcapulong mentioned this pull request Aug 5, 2026
Merged
3 tasks
shreyav pushed a commit that referenced this pull request Aug 5, 2026
@patcapulong@cursoragent
Add Ethereum, Plasma, and Tron network icons to the flow builder (#800)
02f7dc4
## Summary
- Adds the three network icons missing from
`components/grid-visualizer/public/networks/`: `ethereum.svg`,
`plasma.svg`, `tron.svg`
- Follows up #796, which hid the broken `<img>` rows in the rail
dropdown — with these assets in place, the `onError` fallback stops
firing and the icons render. No code changes needed.
- Ethereum was already in the house format (128×128 brand tile,
`rx="4"`). Plasma and Tron came in as 20×20 square tiles, so their
headers were normalized to render at 128 with an equivalent scaled
corner radius; the logo paths are untouched.
## Test plan
- [x] On the Vercel preview, open the USDC rail dropdown — Ethereum row
should show its icon, aligned with the others
- [x] Open the USDT rail dropdown — Ethereum, Plasma, and Tron rows
should all show icons
- [x] Check the Ethereum tile legibility: it's the classic gray diamond
on a white tile, and the CSS crops icons into 20px circles, so confirm
it doesn't wash out against the menu background
Made with [Cursor](https://cursor.com)
Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AaryamanBhuteAaryamanBhuteAaryamanBhute approved these changes
@JasonCWangJasonCWangJasonCWang approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@shreyav@AaryamanBhute@JasonCWang@claude