Merge branch 'dev' into feat/evidence-attachment-display

Author: tractorss

subgraph/core/schema.graphql

@@ -53,6 +53,7 @@ interface Evidence {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 ############
@@ -296,6 +297,7 @@ type ClassicEvidence implements Evidence @entity {
   evidence: String!
   evidenceGroup: EvidenceGroup!
   sender: User!
+  timestamp: BigInt!
 }
 
 type ClassicContribution implements Contribution @entity {

subgraph/core/src/EvidenceModule.ts

@@ -12,6 +12,7 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
   evidenceGroup.save();
   const evidence = new ClassicEvidence(`${evidenceGroupID}-${evidenceIndex.toString()}`);
   const userId = event.params._party.toHexString();
+  evidence.timestamp = event.block.timestamp;
   evidence.evidence = event.params._evidence;
   evidence.evidenceGroup = evidenceGroupID.toString();
   evidence.sender = userId;

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/components/EvidenceCard.tsx

@@ -2,13 +2,15 @@ import React from "react";
 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";
 
@@ -36,9 +38,19 @@ const Index = styled.p`
   display: inline-block;
 `;
 
+const StyledReactMarkdown = styled(ReactMarkdown)`
+  a {
+    font-size: 16px;
+  }
+  code {
+    color: ${({ theme }) => theme.secondaryText};
+  }
+`;
+
 const BottomShade = styled.div`
   background-color: ${({ theme }) => theme.lightBlue};
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 16px;
   padding: 12px ${responsiveSize(8, 24)};
@@ -90,6 +102,10 @@ const DesktopText = styled.span`
   )}
 `;
 
+const Timestamp = styled.p`
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
 const MobileText = styled.span`
   ${landscapeStyle(
     () => css`
@@ -124,9 +140,10 @@ interface IEvidenceCard {
   evidence: string;
   sender: string;
   index: number;
+  timestamp: string;
 }
 
-const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
+const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp }) => {
   const { data } = useIPFSQuery(evidence);
 
   return (
@@ -136,7 +153,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
         {data ? (
           <>
             <h3>{data.name}</h3>
-            <p>{data.description}</p>
+            <StyledReactMarkdown>{data.description}</StyledReactMarkdown>
           </>
         ) : (
           <p>{evidence}</p>
@@ -147,6 +164,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
           <Identicon size="24" string={sender} />
           <p>{shortenAddress(sender)}</p>
         </AccountContainer>
+        <Timestamp>{formatDate(Number(timestamp))}</Timestamp>
         {data && typeof data.fileURI !== "undefined" && (
           <StyledLink to={`attachment/?url=${getIpfsUrl(data.fileURI)}`}>
             <AttachmentIcon />

web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx

@@ -1,6 +1,7 @@
-import React, { Dispatch, SetStateAction, useRef } from "react";
+import React, { Dispatch, SetStateAction, useCallback, useRef } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 import BookOpenIcon from "svgs/icons/book-open.svg";
 
@@ -164,9 +165,16 @@ const Template: React.FC<ITemplate> = ({
   isVisible,
 }) => {
   const containerRef = useRef(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const removeOnboardingHashPath = useCallback(() => {
+    if (isOnboarding && location.hash.includes("#onboarding")) navigate("#", { replace: true });
+  }, [location.hash, navigate, isOnboarding]);
+
   useClickAway(containerRef, () => {
     if (canClose) {
       onClose();
+      removeOnboardingHashPath();
     }
   });
 
@@ -196,7 +204,14 @@ const Template: React.FC<ITemplate> = ({
           />
         </LeftContainer>
         <RightContainer>
-          <Close onClick={onClose}>Close</Close>
+          <Close
+            onClick={() => {
+              onClose();
+              removeOnboardingHashPath();
+            }}
+          >
+            Close
+          </Close>
           {RightContent}
         </RightContainer>
       </Container>

web/src/hooks/queries/useEvidences.ts

@@ -14,6 +14,7 @@ const evidencesQuery = graphql(`
       sender {
         id
       }
+      timestamp
     }
   }
 `);

web/src/layout/Header/DesktopHeader.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 
 import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
@@ -13,6 +14,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import ConnectWallet from "components/ConnectWallet";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
+import Onboarding from "components/Popup/MiniGuides/Onboarding";
 
 import Logo from "./Logo";
 import DappList from "./navbar/DappList";
@@ -86,10 +88,25 @@ const PopupContainer = styled.div`
   z-index: 30;
 `;
 
-const DesktopHeader = () => {
+const DesktopHeader: React.FC = () => {
   const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
   const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
   const [isSettingsOpen, toggleIsSettingsOpen] = useToggle(false);
+  const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false);
+  const [initialTab, setInitialTab] = useState<number>(0);
+  const location = useLocation();
+
+  const initializeFragmentURL = useCallback(() => {
+    const hash = location.hash;
+    const hasOnboardingPath = hash.includes("#onboarding");
+    const hasNotificationsPath = hash.includes("#notifications");
+    toggleIsOnboardingMiniGuidesOpen(hasOnboardingPath);
+    toggleIsSettingsOpen(hasNotificationsPath);
+    setInitialTab(hasNotificationsPath ? 1 : 0);
+  }, [location.hash, toggleIsSettingsOpen, toggleIsOnboardingMiniGuidesOpen]);
+
+  useEffect(initializeFragmentURL, [initializeFragmentURL]);
+
   useLockOverlayScroll(isDappListOpen || isHelpOpen || isSettingsOpen);
 
   return (
@@ -124,9 +141,10 @@ const DesktopHeader = () => {
           <Overlay />
           {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
           {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen }} />}
+          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
         </PopupContainer>
       )}
+      {isOnboardingMiniGuidesOpen && <Onboarding toggleMiniGuide={toggleIsOnboardingMiniGuidesOpen} />}
     </>
   );
 };

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import styled, { css } from "styled-components";
 
+import { useLocation, useNavigate } from "react-router-dom";
 import { useClickAway } from "react-use";
 
 import { Tabs } from "@kleros/ui-components-library";
@@ -73,10 +74,15 @@ const TABS = [
   },
 ];
 
-const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
-  const [currentTab, setCurrentTab] = useState<number>(0);
+const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) => {
+  const [currentTab, setCurrentTab] = useState<number>(initialTab || 0);
   const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleIsSettingsOpen());
+  const location = useLocation();
+  const navigate = useNavigate();
+  useClickAway(containerRef, () => {
+    toggleIsSettingsOpen();
+    if (location.hash.includes("#notifications")) navigate("#", { replace: true });
+  });
 
   return (
     <>

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

@@ -82,6 +82,7 @@ const PopupContainer = styled.div`
 
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
+  initialTab?: number;
 }
 
 export interface IHelp {

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -62,8 +62,8 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
         />
       </EnsureChain>
       {data ? (
-        data.evidences.map(({ key, evidence, sender }, i) => (
-          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence }} />
+        data.evidences.map(({ key, evidence, sender, timestamp }, i) => (
+          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence, timestamp }} />
         ))
       ) : (
         <SkeletonEvidenceCard />