fix: nft responsiveness

.changeset/clever-days-compete.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**fix**: Update `NFTCard` and `NFTMintCard` to be more responsive. By @alessey #1590

src/nft/components/view/NFTImage.test.tsx

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { act } from 'react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { useNFTContext } from '../NFTProvider';
 import { NFTImage } from './NFTImage';
@@ -88,18 +87,6 @@ describe('NFTImage', () => {
     );
   });
 
-  it('should hide the svg on transition end', async () => {
-    (useNFTContext as Mock).mockReturnValue({
-      imageUrl: 'transitionend',
-      description: 'Test NFT Image',
-    });
-    const { getByTestId, queryByTestId } = render(<NFTImage />);
-    await act(async () => {
-      fireEvent.transitionEnd(getByTestId('ockNFTImage'));
-    });
-    expect(queryByTestId('ock-defaultNFTSvg')).toBeNull();
-  });
-
   it('should retry loading the image when retry button is clicked', async () => {
     (useNFTContext as Mock).mockReturnValue({
       imageUrl: 'error',

src/nft/components/view/NFTImage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { type MouseEvent, useCallback, useEffect, useState } from 'react';
 import { defaultNFTSvg } from '../../../internal/svg/defaultNFTSvg';
 import { cn } from '../../../styles/theme';
 import type { NFTError } from '../../types';
@@ -22,7 +22,6 @@ export function NFTImage({
   const { imageUrl, description } = useNFTContext();
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);
-  const [transitionEnded, setTransitionEnded] = useState(false);
 
   const loadImage = useCallback(() => {
     if (imageUrl) {
@@ -50,48 +49,49 @@ export function NFTImage({
     loadImage();
   }, [loadImage]);
 
-  const handleRetry = useCallback(async () => {
-    setError(false);
-    loadImage();
-  }, [loadImage]);
-
-  const handleTransitionEnd = useCallback(() => {
-    setTransitionEnded(true);
-  }, []);
+  const handleRetry = useCallback(
+    async (e: MouseEvent) => {
+      e.stopPropagation();
+      setError(false);
+      loadImage();
+    },
+    [loadImage],
+  );
 
   return (
     <div
       className={cn(
-        'relative flex h-[450px] max-h-screen items-center justify-center',
+        'grid aspect-square w-full',
+        '[&>*]:col-start-1 [&>*]:col-end-1 [&>*]:row-start-1 [&>*]:row-end-1',
         className,
       )}
     >
+      <div className="flex items-center justify-center">{defaultNFTSvg}</div>
+      <div
+        className={cn(
+          'grid h-full w-full content-center justify-center overflow-hidden',
+          { 'aspect-square': square },
+        )}
+      >
+        <img
+          data-testid="ockNFTImage"
+          src={imageUrl}
+          alt={description}
+          decoding="async"
+          className={cn(
+            'transition-opacity duration-500 ease-in-out',
+            loaded ? 'opacity-100' : 'opacity-0',
+            { 'h-full w-full object-cover': square },
+          )}
+        />
+      </div>
       {error && (
-        <div className="absolute top-[60%] z-10">
-          <button type="button" onClick={handleRetry}>
+        <div className="flex items-center justify-center">
+          <button type="button" onClick={handleRetry} className="z-10 mt-[60%]">
             retry
           </button>
         </div>
       )}
-      {!transitionEnded && (
-        <div
-          className={`absolute inset-0 ${loaded ? 'opacity-0' : 'opacity-100'} transition-[opacity] duration-500 ease-in-out`}
-        >
-          {defaultNFTSvg}
-        </div>
-      )}
-      <img
-        data-testid="ockNFTImage"
-        src={imageUrl}
-        alt={description}
-        decoding="async"
-        className={cn(
-          'max-h-[450px] transition-[opacity] duration-500 ease-in-out',
-          `${loaded ? 'opacity-100' : 'opacity-0'}`,
-          { 'h-full w-full object-cover': square },
-        )}
-        onTransitionEnd={handleTransitionEnd}
-      />
     </div>
   );
 }

src/nft/components/view/NFTVideo.tsx

@@ -49,7 +49,9 @@ export function NFTVideo({
   return (
     <div
       className={cn(
-        'relative flex h-[450px] max-h-screen items-center justify-center',
+        'grid aspect-square w-full',
+        '[&>*]:col-start-1 [&>*]:col-end-1 [&>*]:row-start-1 [&>*]:row-end-1',
+        { 'content-center justify-center': !square },
         className,
       )}
     >

src/styles/theme.ts

@@ -13,7 +13,7 @@ export const text = {
   label1: 'ock-font-family font-semibold text-sm leading-5',
   label2: 'ock-font-family text-sm leading-5',
   legal: 'ock-font-family text-xs leading-4',
-  title1: 'ock-font-family font-semibold text-[1.75rem] leading-9',
+  title1: 'ock-font-family font-semibold text-2xl leading-9',
   title3: 'ock-font-family font-semibold text-xl leading-7',
 } as const;