fix(tv): resolve droposal video via resilient IPFS gateway chain (#278)

Droposal videos stopped playing on the homepage TV. Zora serves the
media as raw ipfs:// URIs, and the client pointed them at ipfs.io /
dweb.link — both now return 403/301 for Zora-hosted CIDs. Thumbnails
still worked because Zora's feed pre-hosts images on its own CDN.

Centralize IPFS resolution in @/lib/ipfs behind an ordered gateway
chain — Zora content gateway (where droposal media is pinned) → Pinata
→ SkateHive — and add fallback-on-error in both the <video> feed player
and the 3D TV WebGL texture, so a dead/blocked gateway advances to the
next instead of failing. Route every ipfs:// conversion (TV, auctions,
feed, swap token logos) through the helper. Both leading gateways send
CORS + Accept-Ranges, required by the WebGL texture and range seeking.

Author: sktbrd

src/app/[locale]/swap/SwapWidget.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { ipfsToHttp } from "@/lib/ipfs";
 import { useTranslations } from "next-intl";
 import { useQuery } from "@tanstack/react-query";
 import { getCoin, setApiKey } from "@zoralabs/coins-sdk";
@@ -60,7 +61,7 @@ function useZoraLogo(address: string, chainId: number, skip: boolean): string |
             : (preview as string | undefined);
         if (!raw) return null;
         // Convert IPFS URIs to an HTTP gateway URL.
-        return raw.startsWith("ipfs://") ? raw.replace("ipfs://", "https://dweb.link/ipfs/") : raw;
+        return ipfsToHttp(raw);
       },
     }).data ?? null
   );

src/app/[locale]/tv/[coinAddress]/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from "react";
+import { ipfsToHttp } from "@/lib/ipfs";
 import { Metadata } from "next";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import { getCoin, setApiKey } from "@zoralabs/coins-sdk";
@@ -71,10 +72,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     };
   }
 
-  // Convert IPFS to HTTP
-  const imageUrl = metadata.imageUrl?.startsWith("ipfs://")
-    ? metadata.imageUrl.replace("ipfs://", "https://ipfs.io/ipfs/")
-    : metadata.imageUrl;
+  // Convert IPFS to HTTP (resilient gateway chain — see @/lib/ipfs)
+  const imageUrl = metadata.imageUrl ? ipfsToHttp(metadata.imageUrl) : undefined;
 
   const miniappEmbed = {
     ...TV_MINIAPP_EMBED_CONFIG,

src/app/api/wallet/token-lookup/route.ts

@@ -1,4 +1,5 @@
 import { NextResponse, type NextRequest } from "next/server";
+import { ipfsToHttp } from "@/lib/ipfs";
 import { getCoin, setApiKey } from "@zoralabs/coins-sdk";
 import { getAddress, isAddress } from "viem";
 
@@ -100,7 +101,7 @@ export async function GET(req: NextRequest) {
           (preview as Record<string, string>)?.small)
         : (preview as string | undefined);
     if (raw) {
-      logoUrl = raw.startsWith("ipfs://") ? raw.replace("ipfs://", "https://dweb.link/ipfs/") : raw;
+      logoUrl = ipfsToHttp(raw);
     }
   }
 

src/components/hero/AuctionSpotlight.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ipfsToHttp } from "@/lib/ipfs";
 import { useTranslations } from "next-intl";
 import { useDaoAuction } from "@buildeross/hooks";
 import { toast } from "sonner";
@@ -89,11 +90,7 @@ export function AuctionSpotlight() {
 
   // Derived state
   const tokenName = tokenUri?.name;
-  const imageUrl = tokenUri?.image
-    ? tokenUri.image.startsWith("ipfs://")
-      ? tokenUri.image.replace("ipfs://", "https://ipfs.io/ipfs/")
-      : tokenUri.image
-    : undefined;
+  const imageUrl = tokenUri?.image ? ipfsToHttp(tokenUri.image) : undefined;
 
   const isWinner =
     address && displayBidder && address.toLowerCase() === displayBidder.toLowerCase();

src/components/newhome/AuctionPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { ipfsToHttp } from "@/lib/ipfs";
 import { useTranslations } from "next-intl";
 import { useDaoAuction } from "@buildeross/hooks";
 import { formatEther } from "viem";
@@ -109,9 +110,7 @@ export function AuctionPanel() {
     return () => clearInterval(id);
   }, [startTime, displayEndTime]);
 
-  const imageUrl = tokenUri?.image?.startsWith("ipfs://")
-    ? tokenUri.image.replace("ipfs://", "https://ipfs.io/ipfs/")
-    : tokenUri?.image;
+  const imageUrl = tokenUri?.image ? ipfsToHttp(tokenUri.image) : undefined;
 
   const isWinner =
     address && displayBidder && address.toLowerCase() === displayBidder.toLowerCase();

src/components/tv/TV3DModel.tsx

@@ -6,6 +6,7 @@ import { useTexture, useVideoTexture } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
 import type { Group } from "three";
 import * as THREE from "three";
+import { ipfsCandidates, ipfsToHttp } from "@/lib/ipfs";
 import type { PlasticConfig, TVTextureConfig } from "./TVTextureControls";
 
 // Creator coin image type
@@ -861,20 +862,10 @@ const sharedMaterials = {
   }),
 };
 
-// Convert IPFS URIs and gateways to faster gateway
+// Convert IPFS URIs (and re-point any existing gateway URL) to the primary gateway.
 function toFastIPFS(url?: string): string | undefined {
   if (!url) return undefined;
-
-  // First convert ipfs:// protocol to HTTP gateway
-  let httpUrl = url;
-  if (url.startsWith("ipfs://")) {
-    httpUrl = url.replace("ipfs://", "https://dweb.link/ipfs/");
-  }
-
-  // Then convert other gateways to faster one
-  return httpUrl
-    .replace("https://ipfs.io/ipfs/", "https://dweb.link/ipfs/")
-    .replace("https://cloudflare-ipfs.com/ipfs/", "https://dweb.link/ipfs/");
+  return ipfsToHttp(url);
 }
 
 // Vertex shader (shared by all screen effects)
@@ -969,7 +960,15 @@ const crtFragmentShader = `
 
 // Video Screen component that uses VideoTexture with CRT effect
 function VideoScreen({ videoUrl, isVisible = true }: { videoUrl: string; isVisible?: boolean }) {
-  const texture = useVideoTexture(videoUrl, {
+  // Fallback chain: if the current gateway errors, advance to the next one.
+  const candidates = useMemo(() => ipfsCandidates(videoUrl), [videoUrl]);
+  const [gwIndex, setGwIndex] = useState(0);
+  useEffect(() => {
+    setGwIndex(0);
+  }, [videoUrl]);
+  const resolvedUrl = candidates[gwIndex] ?? videoUrl;
+
+  const texture = useVideoTexture(resolvedUrl, {
     muted: true,
     loop: true,
     start: isVisible, // Only auto-start if visible
@@ -989,6 +988,17 @@ function VideoScreen({ videoUrl, isVisible = true }: { videoUrl: string; isVisib
     [texture],
   );
 
+  // Advance to the next gateway if the current source fails to load.
+  useEffect(() => {
+    const video = texture.image as HTMLVideoElement;
+    if (!video) return;
+    const onError = () => {
+      setGwIndex((i) => (i < candidates.length - 1 ? i + 1 : i));
+    };
+    video.addEventListener("error", onError);
+    return () => video.removeEventListener("error", onError);
+  }, [texture, candidates.length]);
+
   // Ensure video plays at 2x
   useEffect(() => {
     const video = texture.image as HTMLVideoElement;
@@ -1268,11 +1278,8 @@ function Sticker({
 function proxyImageUrl(url?: string): string | undefined {
   if (!url) return undefined;
 
-  // Convert IPFS URLs first
-  let httpUrl = url;
-  if (url.startsWith("ipfs://")) {
-    httpUrl = url.replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
+  // Convert IPFS URLs first (ipfs:// or a dead gateway → primary gateway)
+  const httpUrl = ipfsToHttp(url);
 
   // Use wsrv.nl as CORS proxy for external images
   // This service adds proper CORS headers

src/components/tv/TVVideoPlayer.tsx

@@ -3,18 +3,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { ipfsCandidates } from "@/lib/ipfs";
 import { usePerformanceTracking } from "./useVideoPreloader";
 
-/**
- * Convert IPFS URIs to HTTP gateway URLs
- */
-function toHttpUrl(url: string): string {
-  if (url.startsWith("ipfs://")) {
-    return url.replace("ipfs://", "https://dweb.link/ipfs/");
-  }
-  return url;
-}
-
 type LoadState = "idle" | "loading" | "canplay" | "playing" | "error" | "waiting";
 
 const IMAGE_DISPLAY_DURATION_MS = 3000;
@@ -54,8 +45,15 @@ export function TVVideoPlayer({
 
   const isImageOnly = !src && !!poster;
 
-  // Convert IPFS URLs to HTTP gateway
-  const videoSrc = useMemo(() => (src ? toHttpUrl(src) : ""), [src]);
+  // Ordered gateway candidates for this source, so a dead/blocked gateway falls
+  // through to the next one instead of failing the video (see @/lib/ipfs).
+  const candidates = useMemo(() => (src ? ipfsCandidates(src) : []), [src]);
+  const [gwIndex, setGwIndex] = useState(0);
+  // Reset to the primary gateway whenever the source changes.
+  useEffect(() => {
+    setGwIndex(0);
+  }, [src]);
+  const videoSrc = candidates[gwIndex] ?? "";
   const [loadProgress, setLoadProgress] = useState(0);
   const [hasFirstFrame, setHasFirstFrame] = useState(false);
   const mountedRef = useRef(true);
@@ -96,8 +94,14 @@ export function TVVideoPlayer({
 
   const handleError = useCallback(() => {
     if (!mountedRef.current) return;
+    // Try the next gateway in the chain before surfacing an error.
+    if (gwIndex < candidates.length - 1) {
+      setGwIndex((i) => i + 1);
+      setLoadState("loading");
+      return;
+    }
     setLoadState("error");
-  }, []);
+  }, [gwIndex, candidates.length]);
 
   const handleLoadStart = useCallback(() => {
     if (!mountedRef.current) return;

src/components/tv/useTVFeed.ts

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getCoin, setApiKey } from "@zoralabs/coins-sdk";
+import { ipfsToHttp } from "@/lib/ipfs";
 import type { CoinNode, TVItem } from "./types";
 import { FALLBACK_ITEMS, mapCoinToTVItem, PRELOAD_THRESHOLD } from "./utils";
 
@@ -10,10 +11,7 @@ import { FALLBACK_ITEMS, mapCoinToTVItem, PRELOAD_THRESHOLD } from "./utils";
  */
 function toHttpUrl(url?: string | null): string | undefined {
   if (!url) return undefined;
-  if (url.startsWith("ipfs://")) {
-    return url.replace("ipfs://", "https://dweb.link/ipfs/");
-  }
-  return url;
+  return ipfsToHttp(url);
 }
 
 /**

src/components/tv/useVideoPreloader.ts

@@ -1,16 +1,14 @@
 "use client";
 
 import { useEffect, useRef, useState, type MutableRefObject } from "react";
+import { ipfsToHttp } from "@/lib/ipfs";
 import type { TVItem } from "./types";
 
 /**
  * Convert IPFS URIs to HTTP gateway URLs
  */
 function toHttpUrl(url: string): string {
-  if (url.startsWith("ipfs://")) {
-    return url.replace("ipfs://", "https://dweb.link/ipfs/");
-  }
-  return url;
+  return ipfsToHttp(url);
 }
 
 /**

src/components/tv/utils.ts

@@ -8,6 +8,7 @@
  */
 
 import { DAO_ADDRESSES, GNARS_CREATOR_COIN } from "@/lib/config";
+import { ipfsToHttp } from "@/lib/ipfs";
 import type { CoinMedia, CoinNode, TVItem } from "./types";
 
 const GNARS_TREASURY = DAO_ADDRESSES.treasury;
@@ -33,10 +34,7 @@ export const FALLBACK_ITEMS: TVItem[] = [
  */
 function toHttpUrl(uri?: string | null): string | undefined {
   if (!uri) return undefined;
-  if (uri.startsWith("ipfs://")) {
-    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
-  return uri;
+  return ipfsToHttp(uri);
 }
 
 /**