feat(web): open-images-and-files-in-info-tabs-in-file-viewer

Author: tractorss

web/src/components/InformationCards/RegistryInformationCard/TopInfo.tsx

@@ -11,6 +11,7 @@ import { isUndefined } from "src/utils";
 import { DEFAULT_LIST_LOGO } from "src/consts";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
+import { Link } from "react-router-dom";
 
 const TopInfoContainer = styled.div`
   display: flex;
@@ -122,12 +123,14 @@ const TopInfo: React.FC<ITopInfo> = ({
           {isUndefined(logoURI) ? (
             <SkeletonLogo />
           ) : (
-            <StyledLogo
-              src={imageSrc}
-              onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
-              alt="List Img"
-              isListView={false}
-            />
+            <Link to={`/attachment/?url=${imageSrc}`}>
+              <StyledLogo
+                src={imageSrc}
+                onError={() => setImageSrc(getIpfsUrl(DEFAULT_LIST_LOGO))}
+                alt="List Img"
+                isListView={false}
+              />
+            </Link>
           )}
           {isUndefined(title) ? <SkeletonTitle /> : <StyledTitle>{title}</StyledTitle>}
         </LogoAndTitle>

web/src/components/ItemCard/ItemField/FileField.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import PDFIcon from "svgs/icons/pdf.svg";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
-const Container = styled.a`
+const Container = styled(Link)`
   display: flex;
   gap: 8px;
 `;
@@ -17,7 +18,7 @@ export interface IFileField {
 const FileField: React.FC<IFileField> = ({ value, label }) => {
   const fileUrl = getIpfsUrl(value);
   return (
-    <Container href={fileUrl} onClick={(event) => event.stopPropagation()} target="blank" rel="noreferrer">
+    <Container to={`/attachment/?url=${fileUrl}`} onClick={(event) => event.stopPropagation()}>
       <PDFIcon />
       {label}
     </Container>

web/src/components/ItemCard/ItemField/ImageField.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 
@@ -15,7 +16,11 @@ export interface IImageField {
 
 const ImageField: React.FC<IImageField> = ({ value, detailed }) => {
   const imgUrl = getIpfsUrl(value);
-  return <StyledImg src={imgUrl} {...{ detailed }} />;
+  return (
+    <Link to={`/attachment/?url=${imgUrl}`}>
+      <StyledImg src={imgUrl} {...{ detailed }} />
+    </Link>
+  );
 };
 
 export default ImageField;