Merge pull request #1613 from kleros/feat/evidence-attachment-display

Feat/evidence attachment display

Author: jaybuidl

web/package.json

@@ -74,6 +74,7 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
+    "@cyntler/react-doc-viewer": "^1.16.3",
     "@filebase/client": "^0.0.5",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/ui-components-library": "^2.12.0",

web/src/assets/svgs/icons/arrow-left.svg

@@ -3,15 +3,16 @@ import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
+import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
 import { useIPFSQuery } from "hooks/useIPFSQuery";
+import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
-import { formatDate } from "utils/date";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
@@ -65,13 +66,13 @@ const StyledA = styled.a`
   margin-left: auto;
   gap: ${responsiveSize(5, 6)};
   ${landscapeStyle(
-  () => css`
+    () => css`
       > svg {
         width: 16px;
         fill: ${({ theme }) => theme.primaryBlue};
       }
     `
-)}
+  )}
 `;
 
 const AccountContainer = styled.div`
@@ -95,22 +96,37 @@ const AccountContainer = styled.div`
 const DesktopText = styled.span`
   display: none;
   ${landscapeStyle(
-  () => css`
+    () => css`
       display: inline;
     `
-)}
+  )}
 `;
 
 const Timestamp = styled.p`
-color: ${({ theme }) => theme.secondaryText};
+  color: ${({ theme }) => theme.secondaryText};
 `;
 
 const MobileText = styled.span`
   ${landscapeStyle(
-  () => css`
+    () => css`
       display: none;
     `
-)}
+  )}
+`;
+
+const StyledLink = styled(Link)`
+  height: fit-content;
+  display: flex;
+  margin-left: auto;
+  gap: ${responsiveSize(5, 6)};
+  ${landscapeStyle(
+    () => css`
+      > svg {
+        width: 16px;
+        fill: ${({ theme }) => theme.primaryBlue};
+      }
+    `
+  )}
 `;
 
 const AttachedFileText: React.FC = () => (
@@ -129,6 +145,7 @@ interface IEvidenceCard {
 
 const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp }) => {
   const { data } = useIPFSQuery(evidence);
+
   return (
     <StyledCard>
       <TextContainer>
@@ -149,10 +166,10 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timest
         </AccountContainer>
         <Timestamp>{formatDate(Number(timestamp))}</Timestamp>
         {data && typeof data.fileURI !== "undefined" && (
-          <StyledA href={getIpfsUrl(data.fileURI)} target="_blank" rel="noreferrer">
+          <StyledLink to={`attachment/?url=${getIpfsUrl(data.fileURI)}`}>
             <AttachmentIcon />
             <AttachedFileText />
-          </StyledA>
+          </StyledLink>
         )}
       </BottomShade>
     </StyledCard>

web/src/assets/svgs/icons/new-tab.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/components/EvidenceCard.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 { customScrollbar } from "styles/customScrollbar";
+
+import MarkdownRenderer from "./Viewers/MarkdownViewer";
+
+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: 750px;
+  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/FileViewer/Viewers/MarkdownViewer.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/components/FileViewer/index.tsx

@@ -8,7 +8,7 @@ export type { EvidencesQuery };
 
 const evidencesQuery = graphql(`
   query Evidences($evidenceGroupID: String) {
-    evidences(where: { evidenceGroup: $evidenceGroupID }, orderBy: id, orderDirection: asc) {
+    evidences(where: { evidenceGroup: $evidenceGroupID }, orderBy: timestamp, orderDirection: desc) {
       id
       evidence
       sender {

web/src/components/Loader.tsx

@@ -9,7 +9,7 @@ import { TestnetBanner } from "./TestnetBanner";
 
 const Container = styled.div`
   position: sticky;
-  z-index: 1;
+  z-index: 10;
   top: 0;
   width: 100%;
   background-color: ${({ theme }) => theme.primaryPurple};

web/src/hooks/queries/useEvidences.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useNavigate, useParams } from "react-router-dom";
+
+import { Button } from "@kleros/ui-components-library";
+
+import Arrow from "svgs/icons/arrow-left.svg";
+import PaperClip from "svgs/icons/paperclip.svg";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 38px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Title = styled.h1`
+  margin: 0px;
+  font-size: ${responsiveSize(16, 24)};
+`;
+
+const StyledPaperClip = styled(PaperClip)`
+  width: ${responsiveSize(16, 24)};
+  height: ${responsiveSize(16, 24)};
+  path {
+    fill: ${({ theme }) => theme.primaryPurple};
+  }
+`;
+
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  padding: 0;
+  .button-text {
+    color: ${({ theme }) => theme.primaryBlue};
+    font-weight: 400;
+  }
+  .button-svg {
+    path {
+      fill: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+  :focus,
+  :hover {
+    background-color: transparent;
+  }
+`;
+
+const Header: React.FC = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <Container>
+      <TitleContainer>
+        <StyledPaperClip />
+        <Title>Attachment File</Title>{" "}
+      </TitleContainer>
+      <StyledButton text="Return" Icon={Arrow} onClick={() => navigate(`/cases/${id}/evidence`)} />
+    </Container>
+  );
+};
+
+export default Header;