From ff7ea2b2e268674e2cbb9c7ed698efe9caaacee5 Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:35:44 +0200
Subject: [PATCH 1/7] HTML Arweave rendering

Signed-off-by: prxt6529 <prxt@6529.io>
---
 .../nft-image/utils/animation-source.test.ts  | 14 ++++
 components/nft-image/NFTModel.tsx             |  2 +
 .../nft-image/renderers/NFTHTMLRenderer.tsx   | 56 +++++++++++++-
 .../nft-image/utils/animation-source.ts       | 13 ++--
 .../nft-image/utils/arweave-fallback.ts       | 77 +++++++++++++++----
 .../waves/memes/MemesArtSubmissionFile.tsx    |  4 +-
 .../memes/submission/constants/security.ts    | 18 ++---
 .../hooks/useArtworkSubmissionForm.ts         |  3 +-
 config/nextConfig.ts                          |  7 +-
 config/securityHeaders.ts                     |  6 +-
 lib/media/arweave-gateways.ts                 | 70 +++++++++++++++++
 11 files changed, 229 insertions(+), 41 deletions(-)
 create mode 100644 lib/media/arweave-gateways.ts

diff --git a/__tests__/components/nft-image/utils/animation-source.test.ts b/__tests__/components/nft-image/utils/animation-source.test.ts
index 499f2f26be..a3da47512d 100644
--- a/__tests__/components/nft-image/utils/animation-source.test.ts
+++ b/__tests__/components/nft-image/utils/animation-source.test.ts
@@ -88,6 +88,20 @@ describe("getResolvedAnimationSrc", () => {
     );
   });
 
+  it("uses metadata animation fields for HTML, not top-level animation", () => {
+    const nft = createMockNFT({
+      animation: "https://example.com/processed-or-proxy.html",
+      metadata: {
+        animation_details: { format: "html" },
+        animation_url: "https://example.com/original.html",
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBe(
+      "https://example.com/original.html"
+    );
+  });
+
   it("returns undefined when every candidate is empty or invalid", () => {
     const nft = createMockNFT({
       animation: "   ",
diff --git a/components/nft-image/NFTModel.tsx b/components/nft-image/NFTModel.tsx
index 64d38af947..4dea6fd07e 100644
--- a/components/nft-image/NFTModel.tsx
+++ b/components/nft-image/NFTModel.tsx
@@ -1,6 +1,7 @@
 import "@google/model-viewer";
 import type { BaseNFT } from "@/entities/INFT";
 import { getResolvedAnimationSrc } from "./utils/animation-source";
+import { withArweaveFallback } from "./utils/arweave-fallback";
 
 export default function NFTModel(
   props: Readonly<{ nft: BaseNFT; id?: string | undefined }>
@@ -14,6 +15,7 @@ export default function NFTModel(
       auto-rotate
       camera-controls
       ar
+      onError={withArweaveFallback()}
       // @ts-ignore
       poster={props.nft.scaled}
     ></model-viewer>
diff --git a/components/nft-image/renderers/NFTHTMLRenderer.tsx b/components/nft-image/renderers/NFTHTMLRenderer.tsx
index f01ece3bd6..03cdbaa31d 100644
--- a/components/nft-image/renderers/NFTHTMLRenderer.tsx
+++ b/components/nft-image/renderers/NFTHTMLRenderer.tsx
@@ -1,10 +1,14 @@
 "use client";
 
+import { useEffect, useMemo, useState } from "react";
 import { Col } from "react-bootstrap";
 import styles from "../NFTImage.module.scss";
 import NFTImageBalance from "../NFTImageBalance";
 import type { BaseRendererProps } from "../types/renderer-props";
 import { getResolvedAnimationSrc } from "../utils/animation-source";
+import { getArweaveGatewayFallbackUrls } from "../utils/arweave-fallback";
+
+const IFRAME_FALLBACK_TIMEOUT_MS = 8000;
 
 function getSrc(nft: BaseRendererProps["nft"]): string | undefined {
   return getResolvedAnimationSrc(nft);
@@ -13,6 +17,51 @@ function getSrc(nft: BaseRendererProps["nft"]): string | undefined {
 export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
   const src = getSrc(props.nft);
   const animationClassName = styles["nftAnimation"] ?? "";
+  const urls = useMemo(
+    () => (src ? getArweaveGatewayFallbackUrls(src) : []),
+    [src]
+  );
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [didLoadCurrentUrl, setDidLoadCurrentUrl] = useState(false);
+  const activeUrl = urls[activeIndex];
+
+  useEffect(() => {
+    if (urls.length === 0) {
+      setActiveIndex(0);
+      setDidLoadCurrentUrl(false);
+      return;
+    }
+    setActiveIndex(0);
+    setDidLoadCurrentUrl(false);
+  }, [urls]);
+
+  useEffect(() => {
+    setDidLoadCurrentUrl(false);
+  }, [activeUrl]);
+
+  useEffect(() => {
+    if (!activeUrl || didLoadCurrentUrl || activeIndex + 1 >= urls.length) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setActiveIndex((current) =>
+        current === activeIndex && current + 1 < urls.length
+          ? current + 1
+          : current
+      );
+    }, IFRAME_FALLBACK_TIMEOUT_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, activeUrl, didLoadCurrentUrl, urls.length]);
+
+  const advanceToNextUrl = () => {
+    setActiveIndex((current) =>
+      current + 1 < urls.length ? current + 1 : current
+    );
+  };
 
   return (
     <Col
@@ -27,8 +76,13 @@ export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
       )}
       <iframe
         title={props.id}
-        src={src}
+        src={activeUrl}
         id={props.id ?? `iframe-${props.nft.id}`}
+        key={`${props.nft.contract}-${props.nft.id}-${activeUrl ?? ""}`}
+        onLoad={() => {
+          setDidLoadCurrentUrl(true);
+        }}
+        onError={advanceToNextUrl}
       />
     </Col>
   );
diff --git a/components/nft-image/utils/animation-source.ts b/components/nft-image/utils/animation-source.ts
index 5886171e64..0ebdb243a4 100644
--- a/components/nft-image/utils/animation-source.ts
+++ b/components/nft-image/utils/animation-source.ts
@@ -23,14 +23,17 @@ export function getResolvedAnimationSrc(
       ? (nft.metadata as {
           readonly animation?: unknown;
           readonly animation_url?: unknown;
+          readonly animation_details?: { readonly format?: unknown };
         })
       : undefined;
 
-  const candidates = [
-    nft.animation,
-    metadata?.animation,
-    metadata?.animation_url,
-  ];
+  const format = metadata?.animation_details?.format;
+  const isHtmlAnimation =
+    typeof format === "string" && format.toLowerCase() === "html";
+
+  const candidates = isHtmlAnimation
+    ? [metadata?.animation, metadata?.animation_url]
+    : [nft.animation, metadata?.animation, metadata?.animation_url];
 
   for (const candidate of candidates) {
     const resolved = normalizeNonEmptyString(candidate);
diff --git a/components/nft-image/utils/arweave-fallback.ts b/components/nft-image/utils/arweave-fallback.ts
index c12c3079ac..8932a1dde3 100644
--- a/components/nft-image/utils/arweave-fallback.ts
+++ b/components/nft-image/utils/arweave-fallback.ts
@@ -1,11 +1,9 @@
 import type React from "react";
-
-const ARWEAVE_GATEWAYS: readonly string[] = [
-  "arweave.net",
-  "gateway.arweave.net",
-  "gateway.ar.io",
-  "ar-io.net",
-] as const;
+import {
+  ARWEAVE_FALLBACK_HOSTS,
+  canonicalizeArweaveGatewayHostname,
+  isArweaveGatewayRuntimeHost,
+} from "@/lib/media/arweave-gateways";
 
 function dedupe(list: readonly string[]): string[] {
   return Array.from(new Set(list));
@@ -20,15 +18,11 @@ function safeParseUrl(url: string): URL | null {
 }
 
 function normalizeHost(hostname: string): string {
-  const h = hostname.toLowerCase();
-
-  if (h === "arweave.net" || h.endsWith(".arweave.net")) return "arweave.net";
-
-  return h;
+  return canonicalizeArweaveGatewayHostname(hostname);
 }
 
 function isArweaveGatewayHost(hostname: string): boolean {
-  return ARWEAVE_GATEWAYS.includes(normalizeHost(hostname));
+  return isArweaveGatewayRuntimeHost(hostname);
 }
 
 function isArweaveUrl(url: string): boolean {
@@ -48,13 +42,62 @@ function buildUrlWithGateway(
   return u.toString();
 }
 
-type MediaErrorEvent =
-  | React.SyntheticEvent<HTMLImageElement, Event>
-  | React.SyntheticEvent<HTMLVideoElement, Event>;
+type MediaErrorEvent = React.SyntheticEvent<
+  | HTMLImageElement
+  | HTMLVideoElement
+  | HTMLIFrameElement
+  | (HTMLElement & { src: string }),
+  Event
+>;
 
 const DS_ORIGINAL = "arweaveOriginalSrc";
 const DS_LAST_HOST = "arweaveLastGatewayHost";
 
+export function getArweaveGatewayFallbackUrls(url: string): string[] {
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return [];
+  }
+  if (!isArweaveUrl(trimmed)) {
+    return [trimmed];
+  }
+  return getTryList(trimmed, trimmed);
+}
+
+export async function pickReachableArweaveUrl(
+  urls: readonly string[],
+  signal?: AbortSignal
+): Promise<string> {
+  if (urls.length === 0) {
+    return "";
+  }
+  if (urls.length === 1) {
+    return urls[0] ?? "";
+  }
+  for (const u of urls) {
+    if (signal?.aborted) {
+      return urls[0] ?? "";
+    }
+    try {
+      const init: RequestInit = {
+        method: "HEAD",
+        mode: "cors",
+        cache: "no-store",
+      };
+      if (signal) {
+        init.signal = signal;
+      }
+      const res = await fetch(u, init);
+      if (res.ok) {
+        return u;
+      }
+    } catch {
+      continue;
+    }
+  }
+  return urls[0] ?? "";
+}
+
 function getTryList(currentSrc: string, originalSrc: string): string[] {
   const current = safeParseUrl(currentSrc);
   const orig = safeParseUrl(originalSrc);
@@ -67,7 +110,7 @@ function getTryList(currentSrc: string, originalSrc: string): string[] {
   const origHost = orig ? normalizeHost(orig.hostname) : null;
 
   // Build gateway variants from originalSrc (preserves path/query exactly).
-  const variants = ARWEAVE_GATEWAYS.filter((h) => h !== origHost) // original already first in base
+  const variants = ARWEAVE_FALLBACK_HOSTS.filter((h) => h !== origHost) // original already first in base
     .filter((h) => h !== currentHost) // skip current host too
     .map((h) => buildUrlWithGateway(originalSrc, h))
     .filter((u): u is string => !!u);
diff --git a/components/waves/memes/MemesArtSubmissionFile.tsx b/components/waves/memes/MemesArtSubmissionFile.tsx
index 1b8c44030a..0959022738 100644
--- a/components/waves/memes/MemesArtSubmissionFile.tsx
+++ b/components/waves/memes/MemesArtSubmissionFile.tsx
@@ -251,7 +251,7 @@ const MemesArtSubmissionFile: React.FC<MemesArtSubmissionFileProps> = ({
     if (externalValidationStatus === "invalid" && externalError) {
       return renderPreviewMessage(
         externalError,
-        "Only ipfs.io or arweave.net HTML documents can be embedded."
+        "Only approved IPFS or Arweave gateway HTML documents can be embedded."
       );
     }
 
@@ -429,7 +429,7 @@ const MemesArtSubmissionFile: React.FC<MemesArtSubmissionFileProps> = ({
                     containerClassName="tw-flex-1 tw-flex tw-flex-col"
                     fallback={renderPreviewMessage(
                       "Preview unavailable for unapproved domains or file types.",
-                      "Only ipfs.io or arweave.net HTML documents can be embedded."
+                      "Only approved IPFS or Arweave gateway HTML documents can be embedded."
                     )}
                   />
                 ) : (
diff --git a/components/waves/memes/submission/constants/security.ts b/components/waves/memes/submission/constants/security.ts
index bfd27fdf64..3140a77439 100644
--- a/components/waves/memes/submission/constants/security.ts
+++ b/components/waves/memes/submission/constants/security.ts
@@ -1,11 +1,14 @@
 import type { InteractiveMediaProvider } from "./media";
+import {
+  canonicalizeArweaveGatewayHostname,
+  isArweaveGatewayRuntimeHost,
+} from "@/lib/media/arweave-gateways";
 
 const INTERACTIVE_MEDIA_IPFS_HOSTS = new Set<string>([
   "ipfs.io",
   "www.ipfs.io",
 ]);
 
-const ARWEAVE_ROOT_HOSTS = new Set<string>(["arweave.net", "www.arweave.net"]);
 const ARWEAVE_SUBDOMAIN_PATTERN = /^([a-z0-9_-]{43,87})\.arweave\.net$/;
 
 const CIDV0_PATTERN = /^Qm[1-9A-HJ-NP-Za-km-z]{44}$/;
@@ -19,11 +22,7 @@ const ARWEAVE_PATH_PATTERN = /^\/([^/]+)$/;
 export const canonicalizeInteractiveMediaHostname = (
   hostname: string
 ): string => {
-  let normalized = hostname.toLowerCase();
-  while (normalized.endsWith(".")) {
-    normalized = normalized.slice(0, -1);
-  }
-  return normalized;
+  return canonicalizeArweaveGatewayHostname(hostname);
 };
 
 const isIpfsHost = (hostname: string): boolean =>
@@ -40,12 +39,7 @@ const getArweaveTransactionIdFromSubdomain = (
 };
 
 const isArweaveHost = (hostname: string): boolean => {
-  const normalized = canonicalizeInteractiveMediaHostname(hostname);
-  if (ARWEAVE_ROOT_HOSTS.has(normalized)) {
-    return true;
-  }
-
-  return getArweaveTransactionIdFromSubdomain(hostname) !== null;
+  return isArweaveGatewayRuntimeHost(hostname);
 };
 
 const getInteractiveMediaProviderForHost = (
diff --git a/components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts b/components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts
index a1d27e618a..c972f604db 100644
--- a/components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts
+++ b/components/waves/memes/submission/hooks/useArtworkSubmissionForm.ts
@@ -16,6 +16,7 @@ import {
   INTERACTIVE_MEDIA_GATEWAY_BASE_URL,
   isInteractiveMediaContentIdentifier,
 } from "../constants/security";
+import { stripArweaveGatewayUrlPrefix } from "@/lib/media/arweave-gateways";
 import type {
   AdditionalMedia,
   AirdropEntry,
@@ -99,7 +100,7 @@ const sanitizeInteractiveHash = (
     value = value.replace(/^https?:\/\/[^/]+\/ipfs\//i, "");
     value = value.replace(/^ipfs\//i, "");
   } else {
-    value = value.replace(/^https?:\/\/(?:www\.)?arweave\.net\//i, "");
+    value = stripArweaveGatewayUrlPrefix(value);
   }
 
   value = value.replace(/^\/+/, "");
diff --git a/config/nextConfig.ts b/config/nextConfig.ts
index 624b7c783d..97650d4646 100644
--- a/config/nextConfig.ts
+++ b/config/nextConfig.ts
@@ -1,6 +1,7 @@
 import { createSecurityHeaders } from "./securityHeaders";
 import { PublicEnv } from "./env.schema";
 import { NextConfig } from "next";
+import { ARWEAVE_GATEWAY_REMOTE_PATTERN_HOSTNAMES } from "../lib/media/arweave-gateways";
 
 export function sharedConfig(
   publicEnv: PublicEnv,
@@ -18,8 +19,10 @@ export function sharedConfig(
       remotePatterns: [
         { protocol: "https", hostname: "6529.io" },
         { protocol: "https", hostname: "staging.6529.io" },
-        { protocol: "https", hostname: "arweave.net" },
-        { protocol: "https", hostname: "ar-io.net" },
+        ...ARWEAVE_GATEWAY_REMOTE_PATTERN_HOSTNAMES.map((hostname) => ({
+          protocol: "https" as const,
+          hostname,
+        })),
         { protocol: "http", hostname: "localhost" },
         { protocol: "https", hostname: "media.generator.seize.io" },
         { protocol: "https", hostname: "d3lqz0a4bldqgf.cloudfront.net" },
diff --git a/config/securityHeaders.ts b/config/securityHeaders.ts
index 7b41a5d57a..a3062480ec 100644
--- a/config/securityHeaders.ts
+++ b/config/securityHeaders.ts
@@ -1,4 +1,8 @@
+import { ARWEAVE_GATEWAY_CSP_SOURCES } from "../lib/media/arweave-gateways";
+
 export function createSecurityHeaders(apiEndpoint: string | undefined = "") {
+  const arweaveGatewaySources = ARWEAVE_GATEWAY_CSP_SOURCES.join(" ");
+
   return [
     {
       key: "Strict-Transport-Security",
@@ -6,7 +10,7 @@ export function createSecurityHeaders(apiEndpoint: string | undefined = "") {
     },
     {
       key: "Content-Security-Policy",
-      value: `default-src 'none'; script-src 'self' 'unsafe-inline' https://dnclu2fna0b2b.cloudfront.net https://www.google-analytics.com https://www.googletagmanager.com/ https://dataplane.rum.us-east-1.amazonaws.com 'unsafe-eval'; connect-src * 'self' blob: ${apiEndpoint} https://registry.walletconnect.com/api/v2/wallets wss://*.bridge.walletconnect.org wss://*.walletconnect.com wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com/v3/wallets https://www.googletagmanager.com https://*.google-analytics.com https://cloudflare-eth.com/ https://arweave.net/* https://rpc.walletconnect.com/v1/ https://sts.us-east-1.amazonaws.com https://sts.us-west-2.amazonaws.com; font-src 'self' data: https://fonts.gstatic.com https://fonts.reown.com https://dnclu2fna0b2b.cloudfront.net https://cdnjs.cloudflare.com; img-src 'self' data: blob: ipfs: https://artblocks.io https://*.artblocks.io *; media-src 'self' blob: https://*.cloudfront.net https://videos.files.wordpress.com https://arweave.net https://*.arweave.net https://cf-ipfs.com/ipfs/* https://*.twimg.com https://artblocks.io https://*.artblocks.io; frame-src 'self' https://ipfs.io https://ipfs.io/ipfs/ https://cf-ipfs.com https://cf-ipfs.com/ipfs/ https://media.generator.seize.io https://media.generator.6529.io https://generator.seize.io https://arweave.net https://*.arweave.net https://nftstorage.link https://*.ipfs.nftstorage.link https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://d3lqz0a4bldqgf.cloudfront.net https://www.youtube.com https://www.youtube-nocookie.com https://*.youtube.com https://artblocks.io https://*.artblocks.io https://docs.google.com https://drive.google.com https://*.google.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/css2 https://dnclu2fna0b2b.cloudfront.net https://cdnjs.cloudflare.com http://cdnjs.cloudflare.com https://cdn.jsdelivr.net; object-src data:;`,
+      value: `default-src 'none'; script-src 'self' 'unsafe-inline' https://dnclu2fna0b2b.cloudfront.net https://www.google-analytics.com https://www.googletagmanager.com/ https://dataplane.rum.us-east-1.amazonaws.com 'unsafe-eval'; connect-src * 'self' blob: ${apiEndpoint} https://registry.walletconnect.com/api/v2/wallets wss://*.bridge.walletconnect.org wss://*.walletconnect.com wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com/v3/wallets https://www.googletagmanager.com https://*.google-analytics.com https://cloudflare-eth.com/ ${arweaveGatewaySources} https://rpc.walletconnect.com/v1/ https://sts.us-east-1.amazonaws.com https://sts.us-west-2.amazonaws.com; font-src 'self' data: https://fonts.gstatic.com https://fonts.reown.com https://dnclu2fna0b2b.cloudfront.net https://cdnjs.cloudflare.com; img-src 'self' data: blob: ipfs: https://artblocks.io https://*.artblocks.io *; media-src 'self' blob: https://*.cloudfront.net https://videos.files.wordpress.com ${arweaveGatewaySources} https://cf-ipfs.com/ipfs/* https://*.twimg.com https://artblocks.io https://*.artblocks.io; frame-src 'self' https://ipfs.io https://ipfs.io/ipfs/ https://cf-ipfs.com https://cf-ipfs.com/ipfs/ https://media.generator.seize.io https://media.generator.6529.io https://generator.seize.io ${arweaveGatewaySources} https://nftstorage.link https://*.ipfs.nftstorage.link https://verify.walletconnect.com https://verify.walletconnect.org https://secure.walletconnect.com https://d3lqz0a4bldqgf.cloudfront.net https://www.youtube.com https://www.youtube-nocookie.com https://*.youtube.com https://artblocks.io https://*.artblocks.io https://docs.google.com https://drive.google.com https://*.google.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/css2 https://dnclu2fna0b2b.cloudfront.net https://cdnjs.cloudflare.com http://cdnjs.cloudflare.com https://cdn.jsdelivr.net; object-src data:;`,
     },
     { key: "X-Frame-Options", value: "SAMEORIGIN" },
     { key: "X-Content-Type-Options", value: "nosniff" },
diff --git a/lib/media/arweave-gateways.ts b/lib/media/arweave-gateways.ts
new file mode 100644
index 0000000000..ae5a3db358
--- /dev/null
+++ b/lib/media/arweave-gateways.ts
@@ -0,0 +1,70 @@
+// Ordered list: the array order defines the Arweave fallback retry order.
+export const ARWEAVE_GATEWAY_HOSTS = [
+  "arweave.net",
+  "ardrive.net",
+  "gateway.arweave.net",
+  "gateway.ar.io",
+] as const;
+
+const dedupe = (values: readonly string[]): string[] =>
+  Array.from(new Set(values));
+
+export const canonicalizeArweaveGatewayHostname = (hostname: string): string =>
+  hostname.trim().toLowerCase().replace(/\.+$/, "");
+
+export const ARWEAVE_FALLBACK_HOSTS = [...ARWEAVE_GATEWAY_HOSTS];
+
+export const ARWEAVE_GATEWAY_EXACT_HOSTS = dedupe(
+  ARWEAVE_GATEWAY_HOSTS
+);
+
+export const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(
+  ARWEAVE_GATEWAY_HOSTS
+);
+
+export const ARWEAVE_GATEWAY_CSP_SOURCES = dedupe(
+  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) =>
+    [`https://${hostname}`, `https://*.${hostname}`]
+  )
+);
+
+export const ARWEAVE_GATEWAY_REMOTE_PATTERN_HOSTNAMES = dedupe(
+  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) =>
+    [hostname, `**.${hostname}`]
+  )
+);
+
+export const isArweaveGatewayRuntimeHost = (hostname: string): boolean => {
+  const normalized = canonicalizeArweaveGatewayHostname(hostname);
+  if (!normalized) {
+    return false;
+  }
+
+  if (ARWEAVE_GATEWAY_EXACT_HOSTS.includes(normalized)) {
+    return true;
+  }
+
+  return ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS.some(
+    (baseHost) => normalized === baseHost || normalized.endsWith(`.${baseHost}`)
+  );
+};
+
+export const stripArweaveGatewayUrlPrefix = (value: string): string => {
+  try {
+    const parsed = new URL(value);
+    if (!/^https?:$/i.test(parsed.protocol)) {
+      return value;
+    }
+
+    if (!isArweaveGatewayRuntimeHost(parsed.hostname)) {
+      return value;
+    }
+
+    return `${parsed.pathname}${parsed.search}${parsed.hash}`.replace(
+      /^\/+/,
+      ""
+    );
+  } catch {
+    return value;
+  }
+};

From fb6e7e298dad8ae6b2d505ed33e7bb42dc3aa925 Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:38:00 +0200
Subject: [PATCH 2/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 .../nft-image/utils/arweave-fallback.ts       | 34 -------------------
 .../waves/memes/MemesArtSubmissionFile.tsx    |  2 +-
 lib/media/arweave-gateways.ts                 | 19 +++++------
 3 files changed, 9 insertions(+), 46 deletions(-)

diff --git a/components/nft-image/utils/arweave-fallback.ts b/components/nft-image/utils/arweave-fallback.ts
index 8932a1dde3..7496ffafac 100644
--- a/components/nft-image/utils/arweave-fallback.ts
+++ b/components/nft-image/utils/arweave-fallback.ts
@@ -64,40 +64,6 @@ export function getArweaveGatewayFallbackUrls(url: string): string[] {
   return getTryList(trimmed, trimmed);
 }
 
-export async function pickReachableArweaveUrl(
-  urls: readonly string[],
-  signal?: AbortSignal
-): Promise<string> {
-  if (urls.length === 0) {
-    return "";
-  }
-  if (urls.length === 1) {
-    return urls[0] ?? "";
-  }
-  for (const u of urls) {
-    if (signal?.aborted) {
-      return urls[0] ?? "";
-    }
-    try {
-      const init: RequestInit = {
-        method: "HEAD",
-        mode: "cors",
-        cache: "no-store",
-      };
-      if (signal) {
-        init.signal = signal;
-      }
-      const res = await fetch(u, init);
-      if (res.ok) {
-        return u;
-      }
-    } catch {
-      continue;
-    }
-  }
-  return urls[0] ?? "";
-}
-
 function getTryList(currentSrc: string, originalSrc: string): string[] {
   const current = safeParseUrl(currentSrc);
   const orig = safeParseUrl(originalSrc);
diff --git a/components/waves/memes/MemesArtSubmissionFile.tsx b/components/waves/memes/MemesArtSubmissionFile.tsx
index 0959022738..a76042bdfb 100644
--- a/components/waves/memes/MemesArtSubmissionFile.tsx
+++ b/components/waves/memes/MemesArtSubmissionFile.tsx
@@ -374,7 +374,7 @@ const MemesArtSubmissionFile: React.FC<MemesArtSubmissionFileProps> = ({
                 id="memes-interactive-media-hash"
                 type="text"
                 autoComplete="off"
-                className="tw-form-input tw-w-full tw-cursor-text tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3 tw-py-2.5 tw-text-base sm:tw-text-sm tw-font-normal tw-text-iron-100 tw-outline-none tw-ring-1 tw-ring-iron-700 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650"
+                className="tw-form-input tw-w-full tw-cursor-text tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3 tw-py-2.5 tw-text-base tw-font-normal tw-text-iron-100 tw-outline-none tw-ring-1 tw-ring-iron-700 tw-transition-all tw-duration-500 tw-ease-in-out placeholder:tw-text-iron-500 focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400 focus-visible:hover:tw-ring-primary-400 desktop-hover:hover:tw-ring-iron-650 sm:tw-text-sm"
                 placeholder="bafy.../index.html"
                 value={externalHash}
                 onChange={(event) => onExternalHashChange(event.target.value)}
diff --git a/lib/media/arweave-gateways.ts b/lib/media/arweave-gateways.ts
index ae5a3db358..8cd5d2673a 100644
--- a/lib/media/arweave-gateways.ts
+++ b/lib/media/arweave-gateways.ts
@@ -1,5 +1,5 @@
 // Ordered list: the array order defines the Arweave fallback retry order.
-export const ARWEAVE_GATEWAY_HOSTS = [
+const ARWEAVE_GATEWAY_HOSTS = [
   "arweave.net",
   "ardrive.net",
   "gateway.arweave.net",
@@ -14,24 +14,21 @@ export const canonicalizeArweaveGatewayHostname = (hostname: string): string =>
 
 export const ARWEAVE_FALLBACK_HOSTS = [...ARWEAVE_GATEWAY_HOSTS];
 
-export const ARWEAVE_GATEWAY_EXACT_HOSTS = dedupe(
-  ARWEAVE_GATEWAY_HOSTS
-);
+const ARWEAVE_GATEWAY_EXACT_HOSTS = dedupe(ARWEAVE_GATEWAY_HOSTS);
 
-export const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(
+const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(
   ARWEAVE_GATEWAY_HOSTS
 );
 
 export const ARWEAVE_GATEWAY_CSP_SOURCES = dedupe(
-  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) =>
-    [`https://${hostname}`, `https://*.${hostname}`]
-  )
+  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) => [
+    `https://${hostname}`,
+    `https://*.${hostname}`,
+  ])
 );
 
 export const ARWEAVE_GATEWAY_REMOTE_PATTERN_HOSTNAMES = dedupe(
-  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) =>
-    [hostname, `**.${hostname}`]
-  )
+  ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) => [hostname, `**.${hostname}`])
 );
 
 export const isArweaveGatewayRuntimeHost = (hostname: string): boolean => {

From 51d28a0ed4586e9423f3ad44e8dae5862dcd752c Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:41:08 +0200
Subject: [PATCH 3/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 lib/media/arweave-gateways.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/media/arweave-gateways.ts b/lib/media/arweave-gateways.ts
index 8cd5d2673a..89fdd9392b 100644
--- a/lib/media/arweave-gateways.ts
+++ b/lib/media/arweave-gateways.ts
@@ -16,9 +16,7 @@ export const ARWEAVE_FALLBACK_HOSTS = [...ARWEAVE_GATEWAY_HOSTS];
 
 const ARWEAVE_GATEWAY_EXACT_HOSTS = dedupe(ARWEAVE_GATEWAY_HOSTS);
 
-const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(
-  ARWEAVE_GATEWAY_HOSTS
-);
+const ARWEAVE_GATEWAY_WILDCARD_BASE_HOSTS = dedupe(ARWEAVE_GATEWAY_HOSTS);
 
 export const ARWEAVE_GATEWAY_CSP_SOURCES = dedupe(
   ARWEAVE_GATEWAY_HOSTS.flatMap((hostname) => [

From 101921af46982aa43a3fbadda39a4319ea6e9c64 Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:44:02 +0200
Subject: [PATCH 4/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 components/nft-image/NFTModel.tsx | 35 ++++++++++++++++++++++++++++++-
 lib/media/arweave-gateways.ts     |  8 ++++++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/nft-image/NFTModel.tsx b/components/nft-image/NFTModel.tsx
index 4dea6fd07e..16ff434445 100644
--- a/components/nft-image/NFTModel.tsx
+++ b/components/nft-image/NFTModel.tsx
@@ -1,21 +1,54 @@
 import "@google/model-viewer";
+import { useEffect, useMemo, useRef } from "react";
+import type { SyntheticEvent } from "react";
 import type { BaseNFT } from "@/entities/INFT";
 import { getResolvedAnimationSrc } from "./utils/animation-source";
 import { withArweaveFallback } from "./utils/arweave-fallback";
 
+type ModelViewerElement = HTMLElement & {
+  src: string;
+};
+
 export default function NFTModel(
   props: Readonly<{ nft: BaseNFT; id?: string | undefined }>
 ) {
+  const modelRef = useRef<ModelViewerElement | null>(null);
+  const handleArweaveError = useMemo(() => withArweaveFallback(), []);
+
+  useEffect(() => {
+    const modelElement = modelRef.current;
+    if (!modelElement) {
+      return;
+    }
+
+    const nativeErrorHandler = (event: Event) => {
+      const currentTarget = event.currentTarget as ModelViewerElement | null;
+      if (!currentTarget) {
+        return;
+      }
+
+      handleArweaveError({
+        currentTarget,
+      } as SyntheticEvent<ModelViewerElement, Event>);
+    };
+
+    modelElement.addEventListener("error", nativeErrorHandler);
+
+    return () => {
+      modelElement.removeEventListener("error", nativeErrorHandler);
+    };
+  }, [handleArweaveError]);
+
   return (
     // @ts-ignore
     <model-viewer
+      ref={modelRef}
       id={props.id ?? `iframe-${props.nft.id}`}
       src={getResolvedAnimationSrc(props.nft)}
       alt={props.nft.name}
       auto-rotate
       camera-controls
       ar
-      onError={withArweaveFallback()}
       // @ts-ignore
       poster={props.nft.scaled}
     ></model-viewer>
diff --git a/lib/media/arweave-gateways.ts b/lib/media/arweave-gateways.ts
index 89fdd9392b..ae3084d36a 100644
--- a/lib/media/arweave-gateways.ts
+++ b/lib/media/arweave-gateways.ts
@@ -55,10 +55,16 @@ export const stripArweaveGatewayUrlPrefix = (value: string): string => {
       return value;
     }
 
-    return `${parsed.pathname}${parsed.search}${parsed.hash}`.replace(
+    const strippedValue = `${parsed.pathname}${parsed.search}${parsed.hash}`.replace(
       /^\/+/,
       ""
     );
+
+    if (!strippedValue) {
+      return value;
+    }
+
+    return strippedValue;
   } catch {
     return value;
   }

From ccb2db626674e7449d14f4699eaef3223b7d0240 Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:48:09 +0200
Subject: [PATCH 5/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 lib/media/arweave-gateways.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/media/arweave-gateways.ts b/lib/media/arweave-gateways.ts
index ae3084d36a..83989253c8 100644
--- a/lib/media/arweave-gateways.ts
+++ b/lib/media/arweave-gateways.ts
@@ -9,8 +9,15 @@ const ARWEAVE_GATEWAY_HOSTS = [
 const dedupe = (values: readonly string[]): string[] =>
   Array.from(new Set(values));
 
-export const canonicalizeArweaveGatewayHostname = (hostname: string): string =>
-  hostname.trim().toLowerCase().replace(/\.+$/, "");
+export const canonicalizeArweaveGatewayHostname = (
+  hostname: string
+): string => {
+  let normalized = hostname.trim().toLowerCase();
+  while (normalized.endsWith(".")) {
+    normalized = normalized.slice(0, -1);
+  }
+  return normalized;
+};
 
 export const ARWEAVE_FALLBACK_HOSTS = [...ARWEAVE_GATEWAY_HOSTS];
 

From da82beec15e6bf8f3b0ef061f92514fc7a4e48be Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:51:56 +0200
Subject: [PATCH 6/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 components/nft-image/renderers/NFTHTMLRenderer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/nft-image/renderers/NFTHTMLRenderer.tsx b/components/nft-image/renderers/NFTHTMLRenderer.tsx
index 03cdbaa31d..62454a76a8 100644
--- a/components/nft-image/renderers/NFTHTMLRenderer.tsx
+++ b/components/nft-image/renderers/NFTHTMLRenderer.tsx
@@ -44,7 +44,7 @@ export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
       return;
     }
 
-    const timeoutId = window.setTimeout(() => {
+    const timeoutId = globalThis.setTimeout(() => {
       setActiveIndex((current) =>
         current === activeIndex && current + 1 < urls.length
           ? current + 1
@@ -53,7 +53,7 @@ export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
     }, IFRAME_FALLBACK_TIMEOUT_MS);
 
     return () => {
-      window.clearTimeout(timeoutId);
+      globalThis.clearTimeout(timeoutId);
     };
   }, [activeIndex, activeUrl, didLoadCurrentUrl, urls.length]);
 

From dc7f1a150d9a6cdded1ec6e4690149de48c6caf3 Mon Sep 17 00:00:00 2001
From: prxt6529 <prxt@6529.io>
Date: Mon, 23 Mar 2026 12:54:44 +0200
Subject: [PATCH 7/7] WIP

Signed-off-by: prxt6529 <prxt@6529.io>
---
 .../nft-image/utils/animation-source.test.ts  | 13 +++++++++++
 .../nft-image/renderers/NFTHTMLRenderer.tsx   | 22 ++++++++++---------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/__tests__/components/nft-image/utils/animation-source.test.ts b/__tests__/components/nft-image/utils/animation-source.test.ts
index a3da47512d..f5f4292ab8 100644
--- a/__tests__/components/nft-image/utils/animation-source.test.ts
+++ b/__tests__/components/nft-image/utils/animation-source.test.ts
@@ -102,6 +102,19 @@ describe("getResolvedAnimationSrc", () => {
     );
   });
 
+  it("returns undefined for HTML format when metadata animation fields are empty", () => {
+    const nft = createMockNFT({
+      animation: "https://example.com/processed-or-proxy.html",
+      metadata: {
+        animation_details: { format: "html" },
+        animation: "",
+        animation_url: undefined,
+      },
+    });
+
+    expect(getResolvedAnimationSrc(nft)).toBeUndefined();
+  });
+
   it("returns undefined when every candidate is empty or invalid", () => {
     const nft = createMockNFT({
       animation: "   ",
diff --git a/components/nft-image/renderers/NFTHTMLRenderer.tsx b/components/nft-image/renderers/NFTHTMLRenderer.tsx
index 62454a76a8..d4b8fd2a0e 100644
--- a/components/nft-image/renderers/NFTHTMLRenderer.tsx
+++ b/components/nft-image/renderers/NFTHTMLRenderer.tsx
@@ -74,16 +74,18 @@ export default function NFTHTMLRenderer(props: Readonly<BaseRendererProps>) {
           height={props.height}
         />
       )}
-      <iframe
-        title={props.id}
-        src={activeUrl}
-        id={props.id ?? `iframe-${props.nft.id}`}
-        key={`${props.nft.contract}-${props.nft.id}-${activeUrl ?? ""}`}
-        onLoad={() => {
-          setDidLoadCurrentUrl(true);
-        }}
-        onError={advanceToNextUrl}
-      />
+      {activeUrl ? (
+        <iframe
+          title={props.id}
+          src={activeUrl}
+          id={props.id ?? `iframe-${props.nft.id}`}
+          key={`${props.nft.contract}-${props.nft.id}-${activeUrl}`}
+          onLoad={() => {
+            setDidLoadCurrentUrl(true);
+          }}
+          onError={advanceToNextUrl}
+        />
+      ) : null}
     </Col>
   );
 }