Merge pull request #1754 from kleros/feat(web)/ux-ui-impros-in-eviden…

…ce-cards-and-case-overview

feat: UX & UI impros in various places (evidence cards, voting cards, case overview, top jurors)

subgraph/core/schema.graphql

@@ -56,6 +56,7 @@ interface Evidence {
   sender: User!
   senderAddress: String!
   timestamp: BigInt!
+  transactionHash: Bytes!
   name: String
   description: String
   fileURI: String
@@ -318,6 +319,7 @@ type ClassicEvidence implements Evidence @entity(immutable: true) {
   sender: User!
   senderAddress: String!
   timestamp: BigInt!
+  transactionHash: Bytes!
   name: String
   description: String
   fileURI: String

subgraph/core/src/EvidenceModule.ts

@@ -17,6 +17,7 @@ export function handleEvidenceEvent(event: EvidenceEvent): void {
   evidence.evidenceIndex = evidenceIndex.plus(ONE).toString();
   const userId = event.params._party.toHexString();
   evidence.timestamp = event.block.timestamp;
+  evidence.transactionHash = event.transaction.hash;
   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.9.0",
+  "version": "0.9.1",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/components/DisputePreview/Policies.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { Link } from "react-router-dom";
+
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
@@ -59,6 +61,12 @@ const LinkContainer = styled.div`
   display: flex;
   gap: ${responsiveSize(16, 24)};
   flex-wrap: wrap;
+  align-items: center;
+`;
+
+const StyledLink = styled(Link)`
+  display: flex;
+  gap: 4px;
 `;
 
 type Attachment = {
@@ -83,10 +91,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
           </StyledA>
         ) : null}
         {isUndefined(disputePolicyURI) ? null : (
-          <StyledA href={getIpfsUrl(disputePolicyURI)} target="_blank" rel="noreferrer">
+          <StyledLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
             <StyledPolicyIcon />
             Dispute Policy
-          </StyledA>
+          </StyledLink>
         )}
         {isUndefined(courtId) ? null : (
           <StyledA href={`#/courts/${courtId}/purpose?section=description`}>

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -12,7 +12,7 @@ import { getCourtsPath } from "pages/Courts/CourtDetails";
 
 import CardLabel from "../CardLabels";
 
-import { FieldItem, IDisputeInfo } from ".";
+import { FieldItem, IDisputeInfo } from "./index";
 
 const Container = styled.div`
   display: flex;
@@ -59,6 +59,7 @@ const StyledField = styled(Field)`
       margin-left: 8px;
       overflow: hidden;
       text-overflow: ellipsis;
+      text-wrap: auto;
     }
   }
 `;
@@ -86,7 +87,13 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          <StyledField
+            link={`/courts/${courtId}`}
+            icon={LawBalanceIcon}
+            name="Court Branch"
+            value={courtBranchValue}
+            {...{ isOverview }}
+          />
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>

web/src/components/EvidenceCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
@@ -9,6 +9,7 @@ import { Card } from "@kleros/ui-components-library";
 
 import AttachmentIcon from "svgs/icons/attachment.svg";
 
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { formatDate } from "utils/date";
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { shortenAddress } from "utils/shortenAddress";
@@ -116,6 +117,19 @@ const StyledLink = styled(Link)`
   )}
 `;
 
+const StyledA = styled.a`
+  :hover {
+    text-decoration: underline;
+    p {
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+`;
+
 const AttachedFileText: React.FC = () => (
   <>
     <DesktopText>View attached file</DesktopText>
@@ -126,9 +140,27 @@ const AttachedFileText: React.FC = () => (
 interface IEvidenceCard extends Pick<Evidence, "evidence" | "timestamp" | "name" | "description" | "fileURI"> {
   sender: string;
   index: number;
+  transactionHash: string;
 }
 
-const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timestamp, name, description, fileURI }) => {
+const EvidenceCard: React.FC<IEvidenceCard> = ({
+  evidence,
+  sender,
+  index,
+  timestamp,
+  transactionHash,
+  name,
+  description,
+  fileURI,
+}) => {
+  const addressExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${sender}`;
+  }, [sender]);
+
+  const transactionExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${transactionHash}`;
+  }, [transactionHash]);
+
   return (
     <StyledCard>
       <TextContainer>
@@ -145,15 +177,19 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index, timest
       <BottomShade>
         <AccountContainer>
           <Identicon size="24" string={sender} />
-          <p>{shortenAddress(sender)}</p>
+          <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+            <p>{shortenAddress(sender)}</p>
+          </StyledA>
         </AccountContainer>
-        <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
-        {fileURI && (
+        <StyledA href={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+          <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
+        </StyledA>
+        {fileURI && fileURI !== "-" ? (
           <StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
             <AttachmentIcon />
             <AttachedFileText />
           </StyledLink>
-        )}
+        ) : null}
       </BottomShade>
     </StyledCard>
   );

web/src/components/Field.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link } from "react-router-dom";
 
-import { landscapeStyle } from "styles/landscapeStyle";
+import { useScrollTop } from "hooks/useScrollTop";
 
 const FieldContainer = styled.div<FieldContainerProps>`
   display: flex;
@@ -61,6 +62,8 @@ const LinkContainer = styled.div``;
 
 const StyledLink = styled(Link)`
   color: ${({ theme }) => theme.primaryBlue};
+  text-wrap: auto;
+  justify-content: end;
 `;
 
 type FieldContainerProps = {
@@ -93,6 +96,8 @@ const Field: React.FC<IField> = ({
   isJurorBalance,
   className,
 }) => {
+  const scrollTop = useScrollTop();
+
   return (
     <FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
       <Icon />
@@ -103,6 +108,7 @@ const Field: React.FC<IField> = ({
             to={link}
             onClick={(event) => {
               event.stopPropagation();
+              scrollTop();
             }}
           >
             {value}

web/src/hooks/queries/useEvidences.ts

@@ -15,6 +15,7 @@ export const evidenceFragment = graphql(`
       id
     }
     timestamp
+    transactionHash
     name
     description
     fileURI

web/src/hooks/useScrollTop.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { OverlayScrollContext } from "context/OverlayScrollContext";
+
+export const useScrollTop = () => {
+  const osInstanceRef = useContext(OverlayScrollContext);
+
+  const scrollTop = () => {
+    osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 });
+  };
+
+  return scrollTop;
+};

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

@@ -125,9 +125,9 @@ const ITEMS = [
     url: "https://klerosscout.eth.limo",
   },
   {
-    text: "POH V1",
+    text: "POH V2",
     Icon: POH,
-    url: "https://app.proofofhumanity.id",
+    url: "https://v2.proofofhumanity.id",
   },
   {
     text: "Governor",

web/src/pages/Cases/AttachmentDisplay/Header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -57,16 +57,23 @@ const StyledButton = styled(Button)`
 `;
 
 const Header: React.FC = () => {
-  const { id } = useParams();
   const navigate = useNavigate();
+  const { id } = useParams();
+  const location = useLocation();
+
+  const handleReturn = () => {
+    navigate(-1);
+  };
+
+  const title = location.pathname.includes("policy") ? `Policy File - Case #${id}` : "Attachment File";
 
   return (
     <Container>
       <TitleContainer>
         <StyledPaperClip />
-        <Title>Attachment File</Title>{" "}
+        <Title>{title}</Title>
       </TitleContainer>
-      <StyledButton text="Return" Icon={Arrow} onClick={() => navigate(`/cases/${id}/evidence`)} />
+      <StyledButton text="Return" Icon={Arrow} onClick={handleReturn} />
     </Container>
   );
 };

web/src/pages/Cases/AttachmentDisplay/index.tsx

@@ -37,7 +37,7 @@ const StyledNewTabIcon = styled(NewTabIcon)`
   }
 `;
 
-const EvidenceAttachmentDisplay: React.FC = () => {
+const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
 
   const url = searchParams.get("url");
@@ -64,4 +64,4 @@ const EvidenceAttachmentDisplay: React.FC = () => {
   );
 };
 
-export default EvidenceAttachmentDisplay;
+export default AttachmentDisplay;

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

@@ -95,14 +95,16 @@ const Evidence: React.FC = () => {
       <EvidenceSearch {...{ search, setSearch, evidenceGroup: disputeData?.dispute?.externalDisputeId }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
       {evidences?.realEvidences ? (
-        evidences?.realEvidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (
-          <EvidenceCard
-            key={timestamp}
-            index={parseInt(evidenceIndex)}
-            sender={sender?.id}
-            {...{ evidence, timestamp, name, description, fileURI }}
-          />
-        ))
+        evidences?.realEvidences.map(
+          ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
+            <EvidenceCard
+              key={timestamp}
+              index={parseInt(evidenceIndex)}
+              sender={sender?.id}
+              {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
+            />
+          )
+        )
       ) : (
         <SkeletonEvidenceCard />
       )}
@@ -111,12 +113,12 @@ const Evidence: React.FC = () => {
           <Divider />
           {showSpam ? (
             evidences?.spamEvidences.map(
-              ({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (
+              ({ evidence, sender, timestamp, transactionHash, name, description, fileURI, evidenceIndex }) => (
                 <EvidenceCard
                   key={timestamp}
                   index={parseInt(evidenceIndex)}
                   sender={sender?.id}
-                  {...{ evidence, timestamp, name, description, fileURI }}
+                  {...{ evidence, timestamp, transactionHash, name, description, fileURI }}
                 />
               )
             )