Arweave Fallback

[prxt6529]

Summary by CodeRabbit

• Bug Fixes
  • Improved image and video error handling with an additional fallback for assets hosted on Arweave, reducing broken media displays.
  • Updated remote image handling to permit the new fallback host, improving resilience and consistency when loading NFT media across varying network conditions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cff367b and 2a142fc.

📒 Files selected for processing (1)

• components/nft-image/utils/arweave-fallback.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• components/nft-image/utils/arweave-fallback.ts

---

📝 Walkthrough

Walkthrough

Introduces an Arweave fallback mechanism: a new utility rewrites Arweave URLs to ar-io.net on media error, image/video renderers use this wrapper for onError handling, and Next.js image config adds ar-io.net to remotePatterns.

Changes

Cohort / File(s)	Summary
Arweave Fallback Utility components/nft-image/utils/arweave-fallback.ts	New module providing isArweaveUrl(), getArweaveFallbackUrl(), and exported withArweaveFallback() HOF that replaces media src with an ar-io.net fallback on load errors.
NFT Media Renderers components/nft-image/renderers/NFTImageRenderer.tsx, components/nft-image/renderers/NFTVideoRenderer.tsx	Both renderers now import and wrap their onError handlers with withArweaveFallback(). Existing internal fallback sequencing (thumbnail → scaled/image; compressed_animation → animation/metadata) is preserved.
Next.js Configuration config/nextConfig.ts	Added https://ar-io.net to images.remotePatterns to allow the fallback host for Next.js image optimization.

Sequence Diagram

sequenceDiagram
    participant MediaEl as NFT Media Element
    participant Handler as withArweaveFallback Handler
    participant Utils as Arweave Utils
    participant FallbackHost as ar-io.net Fallback

    MediaEl->>MediaEl: Attempt load from arweave.net
    MediaEl-->>Handler: onError event fired
    Handler->>Utils: isArweaveUrl(currentSrc)?
    Utils-->>Handler: true
    Handler->>Utils: getArweaveFallbackUrl(currentSrc)
    Utils-->>Handler: ar-io.net URL
    Handler->>MediaEl: set currentSrc = ar-io.net URL
    MediaEl->>FallbackHost: Retry load from ar-io.net
    FallbackHost-->>MediaEl: Asset loads (or triggers onError again)

Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested Reviewers

• simo6529

Poem

🐰 I nibble bytes and hop on keys,

When arweave stumbles in the breeze.
ar-io.net steps into view,
A tiny hop — the picture's new,
Hooray, no broken frames for me! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Arweave Fallback' directly and clearly describes the main change: implementing a fallback mechanism for Arweave URLs across NFT image/video renderers.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch arweave-fallback-2

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/nft-image/utils/arweave-fallback.ts`:
- Around line 31-41: The error handler returned by the arweave fallback utility
currently replaces target.src immediately which loses the original failing URL;
modify the handler (the returned function that accepts MediaErrorEvent used with
isArweaveUrl and getArweaveFallbackUrl) to first store the original src into a
data attribute (e.g., target.dataset.arweaveOriginalSrc) only if not already
present, then set target.src to the fallback and return; leave onError?.(event)
unchanged for non-arweave or no-fallback cases; downstream handlers can then
read and clear dataset.arweaveOriginalSrc to compare against the true original
failing source.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 46e2cc8 and cff367b.

📒 Files selected for processing (4)

• components/nft-image/renderers/NFTImageRenderer.tsx
• components/nft-image/renderers/NFTVideoRenderer.tsx
• components/nft-image/utils/arweave-fallback.ts
• config/nextConfig.ts

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud