Merge pull request #1562 from blockscout/fe-1559

fix svg fullscreen

ui/shared/nft/NftHtmlFullscreen.tsx

@@ -9,7 +9,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftHtmlFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.iframe
@@ -22,4 +22,4 @@ const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
   );
 };
 
-export default NftHtmlWithFullscreen;
+export default NftHtmlFullscreen;

ui/shared/nft/NftImageFullscreen.tsx

@@ -11,12 +11,29 @@ interface Props {
   onClose: () => void;
 }
 
-const NftImageWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+  const [ hasDimentions, setHasDimentions ] = React.useState<boolean>(true);
+
+  const checkWidth = React.useCallback(() => {
+    if (imgRef.current?.getBoundingClientRect().width === 0) {
+      setHasDimentions(false);
+    }
+  }, [ ]);
+
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-      <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
+      <Image
+        src={ src }
+        alt="Token instance image"
+        maxH="90vh"
+        maxW="90vw"
+        ref={ imgRef }
+        onLoad={ checkWidth }
+        sx={ hasDimentions ? {} : { width: '90vw', height: '90vh' } }
+      />
     </NftMediaFullscreenModal>
   );
 };
 
-export default NftImageWithFullscreen;
+export default NftImageFullscreen;

ui/shared/nft/NftVideoFullscreen.tsx

@@ -10,7 +10,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.video
@@ -23,4 +23,4 @@ const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
   );
 };
 
-export default NftVideoWithFullscreen;
+export default NftVideoFullscreen;