diff --git a/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx b/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx
index 785f490a69..f754afcaec 100644
--- a/__tests__/components/waves/drop/WaveDropAdditionalInfo.test.tsx
+++ b/__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) =>
,
}));
+jest.mock("@/components/common/FallbackImage", () => ({
+ FallbackImage: jest.fn((props: any) => (
+
+ )),
+}));
+
+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(
@@ -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(
+
+ );
+
+ const previewImageCall = fallbackImageMock.mock.calls.find(
+ ([props]) => props.alt === "Preview image"
+ );
+
+ expect(previewImageCall?.[0]).toEqual(
+ expect.objectContaining({
+ fallbackSrc: resolvedPreviewImage,
+ })
+ );
+ });
});
diff --git a/__tests__/helpers/waves/drop.helpers.test.ts b/__tests__/helpers/waves/drop.helpers.test.ts
index 0bc14893d9..695d2b8525 100644
--- a/__tests__/helpers/waves/drop.helpers.test.ts
+++ b/__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", () => {
diff --git a/components/waves/drop/WaveDropAdditionalInfo.tsx b/components/waves/drop/WaveDropAdditionalInfo.tsx
index 4444116efc..323a3fca7d 100644
--- a/components/waves/drop/WaveDropAdditionalInfo.tsx
+++ b/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,11 +87,11 @@ 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
@@ -99,7 +99,7 @@ export const WaveDropAdditionalInfo = ({
(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 = ({