fix(ui): fall back when token/chain logo image fails to load

[0xkeccak]

Problem

In the swap/bridge UI, ChainTokenIcon and ChainIcon render a raw <img> with no error handling. They only guard against the literal missing.png URL, so a token or chain logo whose URL looks valid but fails to load at runtime (404, dead CDN, or CORS-blocked) renders the browser's broken-image placeholder.

ChainTokenIcon already has a perfectly good fallback right below the image — the token-symbol letter avatar — but it never triggers on a load failure, only when the URL is absent or equals missing.png.

Fix

Track an image load error per component via onError:

• ChainTokenIcon — on image error, fall back to the existing token-symbol avatar instead of a broken image.
• ChainIcon — on image error, render nothing instead of a broken-image box.

Minimal change, no API surface change.

Testing

• pnpm --filter @relayprotocol/relay-kit-ui typecheck ✅
• pnpm --filter @relayprotocol/relay-kit-ui lint ✅
• pnpm run build:ui ✅
• Changeset included (@relayprotocol/relay-kit-ui patch).

[vercel]

@0xkeccak is attempting to deploy a commit to the Uneven Labs Team on Vercel.

A member of the Team first needs to authorize it.

[pedromcunha]

I think the only additional thing is to make sure it resets when the icon url changes right? Did you test that scenario?

[0xkeccak]

Good catch. Switched from a boolean flag to tracking the errored src URL, so the guard is now erroredSrc !== tokenlogoURI (and !== iconUrl in ChainIcon). When the URL changes the old errored value no longer matches, so the fallback clears and the new image is retried — resets automatically, no useEffect. Pushed as a follow-up commit.

On testing: I didn't find a component test setup in relay-kit-ui, so I verified with typecheck + lint + build:ui and by reasoning through the URL-change path. Happy to add a regression test if you point me at the preferred setup.

[pedromcunha]

One last request that was flagged from the AI code review:

ChainIcon returning null breaks row alignment in lists (the one change I'd request)

ChainIcon is used in list rows like ChainFilterRow.tsx:115 (<ChainIcon ... width={24} height={24} /> followed by the chain name) and in ChainShortcuts, ChainFilterSidebar, etc. On error the component now renders nothing, so that one row's label shifts left relative to its siblings — a new misalignment the old broken-image at least didn't cause (it still occupied the 24px box).

Minimal fix: keep the outer sized div and hide only the — i.e. leave the return condition as iconUrl ? and change the inner ternary to iconUrl && erroredSrc !== iconUrl ?. Layout stays stable everywhere, including the ChainTokenIcon overlay (though there you'd get an empty bordered chip — if you prefer the overlay to vanish entirely, a neutral placeholder background on the wrapper is the compromise).