Merge pull request #1754 from kleros/feat(web)/ux-ui-impros-in-evidence-cards-and-case-overview

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

Author: alcercu

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

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

@@ -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/DisputePreview/Policies.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/DisputeView/DisputeInfo/DisputeInfoCard.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/components/EvidenceCard.tsx

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