Merge branch 'nft-3-preview-hardening' into nft-4-ipfs-gateway

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017NXWAjaHb9SFafLeguTHd8

Author: jlobue10

packages/gui/src/components/nfts/NFTPreview.tsx

@@ -23,6 +23,7 @@ import VideoSmallIcon from '../../assets/img/video-small.svg';
 import VideoPngIcon from '../../assets/img/video.png';
 import VideoPngDarkIcon from '../../assets/img/video_dark.png';
 import FileType from '../../constants/FileType';
+import { isSettledHashMismatch } from '../../hooks/selectNFTPreviewState';
 import useCache from '../../hooks/useCache';
 import useFileType from '../../hooks/useFileType';
 import useHideObjectionableContent from '../../hooks/useHideObjectionableContent';
@@ -201,7 +202,11 @@ export default function NFTPreview(props: NFTPreviewProps) {
 
   const previewExtension = useMemo(() => getFileExtension(preview?.uri), [preview]);
 
-  const previewUri = preview?.uri;
+  // The cached bytes of a settled mismatch must never reach the iframe, even
+  // though the state still carries the uri so the hash badge can report it.
+  const isHashMismatch = isSettledHashMismatch(preview);
+
+  const previewUri = isHashMismatch ? undefined : preview?.uri;
 
   const preparePreview = useCallback(
     async (signal: AbortSignal) => {
@@ -520,6 +525,12 @@ export default function NFTPreview(props: NFTPreviewProps) {
             <Trans>No file available</Trans>
           </IconMessage>
         </Background>
+      ) : isHashMismatch ? (
+        <Background>
+          <IconMessage icon={<NotInterested fontSize="large" />}>
+            <Trans>File does not match the expected hash</Trans>
+          </IconMessage>
+        </Background>
       ) : usesIframe && prepareError ? (
         <Background>
           <IconMessage icon={<NotInterested fontSize="large" />}>

packages/gui/src/hooks/selectNFTPreviewState.test.ts

@@ -1,4 +1,4 @@
-import selectNFTPreviewState, { type NFTPreviewState } from './selectNFTPreviewState';
+import selectNFTPreviewState, { isSettledHashMismatch, type NFTPreviewState } from './selectNFTPreviewState';
 
 const fetchFailure: NFTPreviewState = {
   isVerified: false,
@@ -102,3 +102,18 @@ describe('selectNFTPreviewState', () => {
     ).toBe(verifiedVideo);
   });
 });
+
+describe('isSettledHashMismatch', () => {
+  it('flags a settled mismatch so its bytes are never rendered', () => {
+    expect(isSettledHashMismatch(hashMismatch)).toBe(true);
+  });
+
+  it('does not flag verified, optimistic, failed-fetch, or missing states', () => {
+    expect(isSettledHashMismatch(undefined)).toBe(false);
+    expect(isSettledHashMismatch({ isVerified: true, uri: 'https://example.com/ok.png' })).toBe(false);
+    expect(
+      isSettledHashMismatch({ isVerified: false, isVerifying: true, uri: 'https://example.com/pending.png' }),
+    ).toBe(false);
+    expect(isSettledHashMismatch(fetchFailure)).toBe(false);
+  });
+});

packages/gui/src/hooks/selectNFTPreviewState.ts

@@ -23,6 +23,15 @@ export type SelectNFTPreviewStateOptions = {
   previewImageCandidate?: PreviewCandidate;
 };
 
+// A settled checksum mismatch: verification ran to completion and the bytes
+// do not match the on-chain hash. The state still carries the uri so status
+// badges can report which file failed, but consumers must never render that
+// uri as media content — the cached bytes are by definition not the content
+// the hash commits to.
+export function isSettledHashMismatch(state: NFTPreviewState | undefined): boolean {
+  return !!state && !state.isVerified && !state.isVerifying && state.failedFetch === false;
+}
+
 function asCandidate(candidate: PreviewCandidate | undefined): NFTPreviewState | undefined {
   const uri = candidate?.uris?.[0];
 

packages/gui/src/hooks/useNFTVerifyHash.ts

@@ -35,7 +35,23 @@ export default function useNFTVerifyHash(nftId?: string, options: UseNFTVerifyHa
   const dataGeneration = useRef(0);
   const previewGeneration = useRef(0);
 
-  const isVerifying = isVerifyingData || isVerifyingPreview;
+  // The inputs the preview effect last picked up. `isVerifyingPreview` is set
+  // inside that effect, which runs only after the render has painted, so on
+  // the frame where the metadata first arrives it still reads false — and an
+  // already-verified data file would win the preview slot for that one frame
+  // before the swap. Comparing the current inputs against this ref makes that
+  // frame count as verifying synchronously.
+  const previewInputs = useRef<{ nft?: NFTInfo; metadata?: Metadata }>({});
+
+  const settledMetadata = isLoadingMetadata ? undefined : metadata;
+  const isPreviewPassPending =
+    preview &&
+    !!nft &&
+    !isLoadingNFT &&
+    !!settledMetadata &&
+    (previewInputs.current.nft !== nft || previewInputs.current.metadata !== settledMetadata);
+
+  const isVerifying = isVerifyingData || isVerifyingPreview || isPreviewPassPending;
 
   // A pending metadata download only blocks the result while there is no
   // data verification outcome yet: `isVerified` is derived from the data
@@ -182,6 +198,7 @@ export default function useNFTVerifyHash(nftId?: string, options: UseNFTVerifyHa
     // verifies the data file right away, and this effect picks up the preview
     // URIs once the metadata fetch settles, instead of blocking on it.
     const nftMetadata = isLoadingMetadata ? undefined : metadata;
+    previewInputs.current = { nft: !isLoadingNFT ? nft : undefined, metadata: nftMetadata };
     if (!preview || !nft || isLoadingNFT || !nftMetadata) {
       setIsVerifyingPreview(false);
     } else {