fix: hide broken nfts by bohdan-struk-avalabs · Pull Request #897 · ava-labs/core-extension

bohdan-struk-avalabs · 2026-04-17T17:30:11Z

Description

Jira ticket:
https://ava-labs.atlassian.net/browse/CP-13883

Changes

Testing

Screenshots:

Checklist for the author

Tick each of them when done or if not applicable.

I've covered new/modified business logic with Jest test cases.
I've tested the changes myself before sending it to code review and QA.

Copilot

Pull request overview

This PR adds a user-controlled option to hide “broken” collectibles in the Portfolio → Collectibles view by tracking media load failures and filtering affected NFTs from the rendered grid.

Changes:

Add persisted “hide broken images” setting to the collectibles toolbar state and manage popup.
Track per-NFT media load failures and use that state to filter collectibles from the list.
Improve MediaRenderer error propagation so parents are notified even when media elements never mount (e.g., no source / error UI paths).

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/hooks/useCollectiblesToolbar.ts	Adds persisted hide-broken setting and filters collectibles based on missing media and tracked failures.
apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/components/MediaRenderer.tsx	Ensures `onError` is fired for “error UI without media element” cases; prevents double notification.
apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/components/CollectiblesManagePopup.tsx	Adds a switch to toggle hiding broken/missing-media NFTs.
apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/components/CollectibleCard.tsx	Wires media load/error callbacks from `MediaRenderer` up to the tab state.
apps/next/src/pages/Portfolio/components/PortfolioHome/components/PortolioDetails/components/CollectiblesTab/CollectiblesTab.tsx	Tracks failed media IDs and passes them into toolbar filtering; updates failed set on load/error events.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-17T17:34:56Z

+      // When the error state is active and not just a refresh animation, the <img> may never
+      // render (hasNoSource, showError, mimeTypeIsError), so browser onerror never fires.
+      // Notify the parent here instead.
+      // The hasNotifiedErrorRef guard prevents double-firing when handleError already notified.
+      const isRealError = !isRefreshingLocally && !isLoading && isError;
+      useEffect(() => {
+        if (
+          isRealError &&
+          !sourceIsBase64Image &&
+          !hasNotifiedErrorRef.current
+        ) {
+          hasNotifiedErrorRef.current = true;
+          onErrorRef.current?.();
+        }
+      }, [isRealError, sourceIsBase64Image]);


The new error-notification effect can fire when isError is true due to hasNoSource (e.g., when logoUri is missing). In this component, currentSource is derived from logoUri unless useFallback is already true, so NFTs that do have logoSmall/tokenUri can still end up with hasNoSource, triggering onError and causing the parent to mark them as failed/hidden. Consider selecting srcRaw as the initial source when logoUri is absent (or gating this effect so it only notifies after an actual media load attempt), to avoid hiding valid NFTs.

Suggested change

// When the error state is active and not just a refresh animation, the <img> may never

// render (hasNoSource, showError, mimeTypeIsError), so browser onerror never fires.

// Notify the parent here instead.

// The hasNotifiedErrorRef guard prevents double-firing when handleError already notified.

const isRealError = !isRefreshingLocally && !isLoading && isError;

useEffect(() => {

if (

isRealError &&

!sourceIsBase64Image &&

!hasNotifiedErrorRef.current

) {

hasNotifiedErrorRef.current = true;

onErrorRef.current?.();

}

}, [isRealError, sourceIsBase64Image]);

// If the current source is empty but a raw source still exists and fallback has not been

// attempted yet, avoid notifying the parent as a terminal failure. This prevents valid NFTs

// from being hidden before an actual media load attempt can happen.

const isAwaitingFallbackSource = hasNoSource && !!srcRaw && !useFallback;

// When the error state is active and not just a refresh animation, the <img> may never

// render (hasNoSource, showError, mimeTypeIsError), so browser onerror never fires.

// Notify the parent here instead, but only once we know there is no remaining fallback

// source to try.

// The hasNotifiedErrorRef guard prevents double-firing when handleError already notified.

const isRealError = !isRefreshingLocally && !isLoading && isError;

useEffect(() => {

if (

isRealError &&

!isAwaitingFallbackSource &&

!sourceIsBase64Image &&

!hasNotifiedErrorRef.current

) {

hasNotifiedErrorRef.current = true;

onErrorRef.current?.();

}

}, [isAwaitingFallbackSource, isRealError, sourceIsBase64Image]);

Copilot · 2026-04-17T17:34:57Z

+              <Typography variant="body2">
+                {t('Hide NFTs without media')}
+              </Typography>
+              <Switch
+                checked={hideBrokenImages}
+                onChange={() => setHideBrokenImages(!hideBrokenImages)}
+                size="small"


The toggle label says "Hide NFTs without media", but enabling it also hides NFTs whose media fails to load (via failedCollectibleIds). Please update the copy to reflect the actual behavior (e.g., missing or broken media) so users understand what will be hidden.

I think we are ok with that

Copilot · 2026-04-17T17:34:57Z

@@ -83,7 +89,26 @@ export function CollectiblesTab() {
    networkFilters,
    toggleNetworkFilter,
    clearNetworkFilter,
-  } = useCollectiblesToolbar({ collectibles: formattedCollectibles });
+  } = useCollectiblesToolbar({
+    collectibles: formattedCollectibles,
+    failedCollectibleIds,
+  });


failedCollectibleIds is never cleared when the underlying collectibles list changes (account/network switch, refetch, etc.). Once an ID is marked failed it can stay hidden for the rest of the session even if the media becomes reachable again. Consider resetting this set when collectibles (or formattedCollectibles) changes, and/or when the user toggles the "hide broken" setting.

I think we are ok with that, this causes unnecessary re-renders

Copilot · 2026-04-17T17:34:57Z

+  const handleMediaError = useCallback((id: string) => {
+    setFailedCollectibleIds((prev) => {
+      if (prev.has(id)) return prev;
+      return new Set([...prev, id]);


handleMediaError builds a new Set via new Set([...prev, id]), which copies the entire set into an array on every new failure. Using const next = new Set(prev); next.add(id); return next; avoids the intermediate array and is cheaper for large NFT lists.

Suggested change

return new Set([...prev, id]);

const next = new Set(prev);

next.add(id);

return next;

bohdan-struk-avalabs added 2 commits April 17, 2026 20:31

fix: hide broken nfts

b83e33f

fix: clean code

5f3cc64

Copilot AI review requested due to automatic review settings April 17, 2026 17:30

bohdan-struk-avalabs temporarily deployed to alpha April 17, 2026 17:30 — with GitHub Actions Inactive

bohdan-struk-avalabs had a problem deploying to alpha April 17, 2026 17:30 — with GitHub Actions Failure

Copilot started reviewing on behalf of bohdan-struk-avalabs April 17, 2026 17:30 View session

bohdan-struk-avalabs temporarily deployed to e2e April 17, 2026 17:32 — with GitHub Actions Inactive

bohdan-struk-avalabs changed the title ~~Fix/hide broken nfts~~ fix: hide broken nfts Apr 17, 2026

bohdan-struk-avalabs temporarily deployed to e2e April 17, 2026 17:34 — with GitHub Actions Inactive

Copilot AI reviewed Apr 17, 2026

View reviewed changes

fix: update localization

4477c17

bohdan-struk-avalabs temporarily deployed to alpha April 17, 2026 17:38 — with GitHub Actions Inactive

bohdan-struk-avalabs temporarily deployed to e2e April 17, 2026 17:40 — with GitHub Actions Inactive

bohdan-struk-avalabs temporarily deployed to e2e April 17, 2026 17:42 — with GitHub Actions Inactive

fix: comments

784b89b

bohdan-struk-avalabs temporarily deployed to alpha April 20, 2026 12:21 — with GitHub Actions Inactive

bohdan-struk-avalabs temporarily deployed to e2e April 20, 2026 12:23 — with GitHub Actions Inactive

bohdan-struk-avalabs temporarily deployed to e2e April 20, 2026 12:26 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: hide broken nfts#897

fix: hide broken nfts#897
bohdan-struk-avalabs wants to merge 4 commits intomainfrom
fix/hide-broken-nfts

bohdan-struk-avalabs commented Apr 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 17, 2026

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Uh oh!

Copilot AI Apr 17, 2026

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Uh oh!

Copilot AI Apr 17, 2026

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Uh oh!

Copilot AI Apr 17, 2026

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-      return new Set([...prev, id]);
+      const next = new Set(prev);
+      next.add(id);
+      return next;

Conversation

bohdan-struk-avalabs commented Apr 17, 2026

Description

Changes

Testing

Screenshots:

Checklist for the author

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

bohdan-struk-avalabs Apr 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants