Feat/file viewer

web/package.json

@@ -72,6 +72,7 @@
     "vite-tsconfig-paths": "^5.0.1"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.17.0",
     "@filebase/client": "^0.0.5",
     "@kleros/curate-v2-templates": "workspace:^",
     "@kleros/ui-components-library": "^2.13.1",

web/src/app.tsx

@@ -16,6 +16,7 @@ import SubmitItem from "./pages/SubmitItem";
 import SubmitList from "./pages/SubmitList";
 import { RegistryDetailsProvider } from "context/RegistryDetailsContext";
 import { SubmitListProvider } from "./context/SubmitListContext";
+import AttachmentDisplay from "./pages/AttachmentDisplay";
 
 const App: React.FC = () => {
   return (
@@ -39,6 +40,7 @@ const App: React.FC = () => {
                         }
                       />
                       <Route path="submit-list/*" element={<SubmitList />} />
+                      <Route path="attachment/*" element={<AttachmentDisplay />} />
                       <Route path="*" element={<h1>404 not found</h1>} />
                     </Route>
                   </SentryRoutes>

web/src/components/FileViewer/Viewers/MarkdownViewer.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+import { type DocRenderer } from "@cyntler/react-doc-viewer";
+import ReactMarkdown from "react-markdown";
+
+const Container = styled.div`
+  padding: 16px;
+`;
+
+const StyledMarkdown = styled(ReactMarkdown)`
+  background-color: ${({ theme }) => theme.whiteBackground};
+  a {
+    font-size: 16px;
+  }
+  code {
+    color: ${({ theme }) => theme.secondaryText};
+  }
+`;
+
+const MarkdownRenderer: DocRenderer = ({ mainState: { currentDocument } }) => {
+  if (!currentDocument) return null;
+  const base64String = (currentDocument.fileData as string).split(",")[1];
+
+  // Decode the base64 string
+  const decodedData = atob(base64String);
+
+  return (
+    <Container id="md-renderer">
+      <StyledMarkdown>{decodedData}</StyledMarkdown>
+    </Container>
+  );
+};
+
+MarkdownRenderer.fileTypes = ["md", "text/plain"];
+MarkdownRenderer.weight = 1;
+
+export default MarkdownRenderer;

web/src/components/FileViewer/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import styled from "styled-components";
+
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
+
+import "@cyntler/react-doc-viewer/dist/index.css";
+
+import MarkdownRenderer from "./Viewers/MarkdownViewer";
+import { customScrollbar } from "styles/customScrollbar";
+
+const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border-radius: 3px;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06);
+  max-height: 1050px;
+  overflow: scroll;
+
+  ${customScrollbar}
+`;
+
+const StyledDocViewer = styled(DocViewer)`
+  background-color: ${({ theme }) => theme.whiteBackground} !important;
+`;
+
+/**
+ * @description this viewer supports loading multiple files, it can load urls, local files, etc
+ * @param url The url of the file to be displayed
+ * @returns renders the file
+ */
+const FileViewer: React.FC<{ url: string }> = ({ url }) => {
+  const docs = [{ uri: url }];
+  return (
+    <Wrapper className="file-viewer-wrapper">
+      <StyledDocViewer
+        documents={docs}
+        pluginRenderers={[...DocViewerRenderers, MarkdownRenderer]}
+        config={{
+          header: {
+            disableHeader: true,
+            disableFileName: true,
+          },
+          pdfZoom: {
+            defaultZoom: 0.8,
+            zoomJump: 0.1,
+          },
+          pdfVerticalScrollByDefault: true, // false as default
+        }}
+      />
+    </Wrapper>
+  );
+};
+
+export default FileViewer;

web/src/components/HistoryDisplay/Party/JustificationDetails.tsx

@@ -5,6 +5,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import AttachmentIcon from "svgs/icons/attachment.svg";
 import { customScrollbar } from "styles/customScrollbar";
 import { Evidence } from "src/graphql/graphql";
+import { Link } from "react-router-dom";
 
 const Container = styled.div`
   width: 100%;
@@ -24,7 +25,7 @@ const DescriptionContainer = styled.div`
   ${customScrollbar}
 `;
 
-const StyledA = styled.a`
+const StyledA = styled(Link)`
   display: flex;
   gap: 6px;
   > svg {
@@ -43,7 +44,7 @@ const JustificationDetails: React.FC<{ justification: Justification }> = ({ just
         <ReactMarkdown>{justification.description ?? "Unable to determine description"}</ReactMarkdown>
       </DescriptionContainer>
       {justification?.fileURI && (
-        <StyledA href={getIpfsUrl(justification.fileURI)}>
+        <StyledA to={`/attachment/?url=${getIpfsUrl(justification.fileURI)}`}>
           <AttachmentIcon />
           View attached file
         </StyledA>

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

@@ -7,6 +7,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
+import { Link } from "react-router-dom";
 
 const ShadeArea = styled.div`
   display: flex;
@@ -37,7 +38,7 @@ const StyledP = styled.p`
   )};
 `;
 
-const StyledA = styled.a`
+const StyledA = styled(Link)`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -69,11 +70,7 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
         {!isItem ? (
           <>
             {parentRegistryDetails ? (
-              <StyledA
-                href={getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}
-                target="_blank"
-                rel="noreferrer"
-              >
+              <StyledA to={`/attachment/?url=${getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}`}>
                 <StyledPolicyIcon />
                 Curation Policy
               </StyledA>
@@ -83,7 +80,7 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
           </>
         ) : null}
         {policyURI ? (
-          <StyledA href={getIpfsUrl(policyURI)} target="_blank" rel="noreferrer">
+          <StyledA to={`/attachment/?url=${getIpfsUrl(policyURI)}`}>
             <StyledPolicyIcon />
             List Policy
           </StyledA>

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;

web/src/components/Loader.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import styled, { type CSSProperties, keyframes } from "styled-components";
+
+import KlerosIcon from "svgs/icons/kleros.svg";
+
+type Width = CSSProperties["width"];
+type Height = CSSProperties["height"];
+
+const breathing = keyframes`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`;
+
+const StyledKlerosIcon = styled(KlerosIcon)`
+  path {
+    fill: ${({ theme }) => theme.klerosUIComponentsStroke};
+  }
+  animation: ${breathing} 2s ease-out infinite normal;
+`;
+
+const Container = styled.div<{ width?: Width; height?: Height }>`
+  width: ${({ width }) => width ?? "100%"};
+  height: ${({ height }) => height ?? "100%"};
+`;
+
+interface ILoader {
+  width?: Width;
+  height?: Height;
+  className?: string;
+}
+
+const Loader: React.FC<ILoader> = ({ width, height, className }) => {
+  return (
+    <Container {...{ width, height, className }}>
+      <StyledKlerosIcon />
+    </Container>
+  );
+};
+
+export default Loader;

web/src/layout/Header/navbar/Explore.tsx

@@ -3,9 +3,10 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Link, useLocation } from "react-router-dom";
 import { useOpenContext } from "../MobileHeader";
-import { IPFS_GATEWAY, MAIN_CURATE_ADDRESS } from "consts/index";
+import { MAIN_CURATE_ADDRESS } from "consts/index";
 import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 import { isUndefined } from "utils/index";
+import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const Container = styled.div`
   display: flex;
@@ -57,9 +58,10 @@ const Explore: React.FC = () => {
 
   const links = useMemo(
     () => [
-      { to: "/", text: "Home" },
+      { identifier: "/", to: "/", text: "Home" },
       {
-        to: isUndefined(mainCurate) ? "/" : `${IPFS_GATEWAY}${mainCurate.registry.policyURI}`,
+        identifier: "/attachment/",
+        to: isUndefined(mainCurate) ? "/" : `/attachment/?url=${getIpfsUrl(mainCurate.registry.policyURI ?? "")}`,
         text: "Curation Policy",
       },
     ],
@@ -69,9 +71,13 @@ const Explore: React.FC = () => {
   return (
     <Container>
       <Title>Explore</Title>
-      {links.map(({ to, text }) => (
+      {links.map(({ to, text, identifier }) => (
         <LinkContainer key={text}>
-          <StyledLink to={to} onClick={toggleIsOpen} isActive={location.pathname.startsWith(to)}>
+          <StyledLink
+            to={to}
+            onClick={toggleIsOpen}
+            isActive={identifier === "/" ? location.pathname === "/" : location.pathname.startsWith(identifier)}
+          >
             {text}
           </StyledLink>
         </LinkContainer>