Merge pull request #57 from kleros/feat/file-viewer

Feat/file viewer

Author: tractorss

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/assets/svgs/icons/arrow-left.svg

@@ -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/assets/svgs/icons/new-tab.svg

@@ -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/assets/svgs/icons/paperclip.svg

@@ -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/FileViewer/Viewers/MarkdownViewer.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/FileViewer/index.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>