Drop preview image fallback

__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx

@@ -1,16 +1,36 @@
 import { render, screen } from "@testing-library/react";
 import { WaveDropAdditionalInfo } from "@/components/waves/drop/WaveDropAdditionalInfo";
 import { MemesSubmissionAdditionalInfoKey } from "@/components/waves/memes/submission/types/OperationalData";
+import { FallbackImage } from "@/components/common/FallbackImage";
 
 jest.mock("next/image", () => ({
   __esModule: true,
   default: (props: any) => <img {...props} alt={props.alt ?? ""} />,
 }));
 
+jest.mock("@/components/common/FallbackImage", () => ({
+  FallbackImage: jest.fn((props: any) => (
+    <img src={props.primarySrc} alt={props.alt ?? ""} />
+  )),
+}));
+
+jest.mock("@/components/ipfs/IPFSContext", () => ({
+  resolveIpfsUrlSync: (url: string) =>
+    url.startsWith("ipfs://")
+      ? `https://ipfs-gateway.test/ipfs/${url.slice(7)}`
+      : url,
+}));
+
 const buildDrop = (metadata: { data_key: string; data_value: string }[]) =>
-  ({ metadata } as any);
+  ({ metadata }) as any;
+
+const fallbackImageMock = FallbackImage as jest.Mock;
 
 describe("WaveDropAdditionalInfo", () => {
+  beforeEach(() => {
+    fallbackImageMock.mockClear();
+  });
+
   it("does not render when there is no commentary or media", () => {
     const { container } = render(
       <WaveDropAdditionalInfo drop={buildDrop([])} />
@@ -104,4 +124,35 @@ describe("WaveDropAdditionalInfo", () => {
 
     expect(screen.queryByText("Promo Video")).not.toBeInTheDocument();
   });
+
+  it("uses original preview image as fallback", () => {
+    const previewImage = "ipfs://preview-image";
+    const resolvedPreviewImage = "https://ipfs-gateway.test/ipfs/preview-image";
+    const additionalMedia = JSON.stringify({
+      artist_profile_media: [],
+      artwork_commentary_media: [],
+      preview_image: previewImage,
+    });
+
+    render(
+      <WaveDropAdditionalInfo
+        drop={buildDrop([
+          {
+            data_key: MemesSubmissionAdditionalInfoKey.ADDITIONAL_MEDIA,
+            data_value: additionalMedia,
+          },
+        ])}
+      />
+    );
+
+    const previewImageCall = fallbackImageMock.mock.calls.find(
+      ([props]) => props.alt === "Preview image"
+    );
+
+    expect(previewImageCall?.[0]).toEqual(
+      expect.objectContaining({
+        fallbackSrc: resolvedPreviewImage,
+      })
+    );
+  });
 });

__tests__/helpers/waves/drop.helpers.test.ts

@@ -7,6 +7,13 @@ import {
 } from "@/helpers/waves/drop.helpers";
 import { MemesSubmissionAdditionalInfoKey } from "@/components/waves/memes/submission/types/OperationalData";
 
+jest.mock("@/components/ipfs/IPFSContext", () => ({
+  resolveIpfsUrlSync: (url: string) =>
+    url.startsWith("ipfs://")
+      ? `https://ipfs-gateway.test/ipfs/${url.slice(7)}`
+      : url,
+}));
+
 const baseDrop: any = {
   id: "d1",
   serial_no: 1,
@@ -64,7 +71,7 @@ describe("drop.helpers", () => {
         },
       ];
       const result = getDropPreviewImageUrl(metadata as any);
-      expect(result).toContain(ipfsHash);
+      expect(result).toBe(`https://ipfs-gateway.test/ipfs/${ipfsHash}`);
     });
 
     it("returns null when JSON parsing fails", () => {
@@ -111,7 +118,7 @@ describe("drop.helpers", () => {
         },
       ];
       const result = getDropPromoVideoUrl(metadata as any);
-      expect(result).toContain(ipfsHash);
+      expect(result).toBe(`https://ipfs-gateway.test/ipfs/${ipfsHash}`);
     });
 
     it("returns null when JSON parsing fails", () => {

components/waves/drop/WaveDropAdditionalInfo.tsx

@@ -4,11 +4,11 @@ import {
   AdditionalMedia,
   MemesSubmissionAdditionalInfoKey,
 } from "@/components/waves/memes/submission/types/OperationalData";
+import { FallbackImage } from "@/components/common/FallbackImage";
+import { resolveIpfsUrlSync } from "@/components/ipfs/IPFSContext";
 import { getFileInfoFromUrl } from "@/helpers/file.helpers";
-import { parseIpfsUrl } from "@/helpers/Helpers";
 import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
-import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
-import Image from "next/image";
+import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { useMemo } from "react";
 
 const MAX_MEDIA = 4;
@@ -87,19 +87,19 @@ export const WaveDropAdditionalInfo = ({
       );
 
       const previewImageValue = additionalMedia.preview_image
-        ? parseIpfsUrl(additionalMedia.preview_image)
+        ? resolveIpfsUrlSync(additionalMedia.preview_image)
         : "";
 
       const promoVideoValue = additionalMedia.promo_video
-        ? parseIpfsUrl(additionalMedia.promo_video)
+        ? resolveIpfsUrlSync(additionalMedia.promo_video)
         : "";
 
       const mediaItemsValue = additionalMedia.artwork_commentary_media
         .filter(
           (url): url is string =>
             typeof url === "string" && url.trim().length > 0
         )
-        .map((url) => parseIpfsUrl(url))
+        .map((url) => resolveIpfsUrlSync(url))
         .filter((url): url is string => url.length > 0)
         .map((url) => {
           const isVideo = isVideoUrl(url);
@@ -139,8 +139,12 @@ export const WaveDropAdditionalInfo = ({
           </h3>
           <div className="tw-flex tw-justify-center">
             <div className="tw-relative tw-aspect-[4/3] tw-w-full tw-max-w-2xl tw-overflow-hidden tw-bg-white/[0.02]">
-              <Image
-                src={getScaledImageUri(previewImage, ImageScale.AUTOx600)}
+              <FallbackImage
+                primarySrc={getScaledImageUri(
+                  previewImage,
+                  ImageScale.AUTOx600
+                )}
+                fallbackSrc={previewImage}
                 alt="Preview image"
                 fill
                 sizes="(min-width: 768px) 400px, 100vw"
@@ -206,8 +210,9 @@ export const WaveDropAdditionalInfo = ({
                     />
                   </video>
                 ) : (
-                  <Image
-                    src={item.displayUrl}
+                  <FallbackImage
+                    primarySrc={item.displayUrl}
+                    fallbackSrc={item.url}
                     alt={`Additional media ${index + 1}`}
                     fill
                     sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"

helpers/waves/drop.helpers.ts

@@ -1,11 +1,11 @@
 import { MemesSubmissionAdditionalInfoKey } from "@/components/waves/memes/submission/types/OperationalData";
+import { resolveIpfsUrlSync } from "@/components/ipfs/IPFSContext";
 import type { ApiDrop } from "@/generated/models/ApiDrop";
 import type { ApiDropMetadata } from "@/generated/models/ApiDropMetadata";
 import type { ApiLightDrop } from "@/generated/models/ApiLightDrop";
 import { sha256 } from "ethereum-cryptography/sha256.js";
 import { utf8ToBytes } from "ethereum-cryptography/utils.js";
 import { getRandomObjectId } from "../AllowlistToolHelpers";
-import { parseIpfsUrl } from "../Helpers";
 
 export enum DropSize {
   LIGHT = "LIGHT",
@@ -142,7 +142,7 @@ export const getDropPreviewImageUrl = (
       preview_image?: string;
     };
     if (!parsed?.preview_image) return null;
-    return parseIpfsUrl(parsed.preview_image);
+    return resolveIpfsUrlSync(parsed.preview_image);
   } catch {
     return null;
   }
@@ -161,7 +161,7 @@ export const getDropPromoVideoUrl = (
       promo_video?: string;
     };
     if (!parsed?.promo_video) return null;
-    return parseIpfsUrl(parsed.promo_video);
+    return resolveIpfsUrlSync(parsed.promo_video);
   } catch {
     return null;
   }