From 15497de7a1684e04305517217f408be59bac40cb Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 03:42:30 +0100
Subject: [PATCH 1/9] feat: make addresses clickable in evidence, hide button
 if no file attached, transaction hash

---
 subgraph/core/schema.graphql                  |  1 +
 subgraph/core/src/EvidenceModule.ts           |  1 +
 web/src/components/EvidenceCard.tsx           | 47 ++++++++++++++++---
 web/src/hooks/queries/useEvidences.ts         |  1 +
 .../Cases/CaseDetails/Evidence/index.tsx      | 22 +++++----
 5 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/subgraph/core/schema.graphql b/subgraph/core/schema.graphql
index d75c3b101..953a36270 100644
--- a/subgraph/core/schema.graphql
+++ b/subgraph/core/schema.graphql
@@ -318,6 +318,7 @@ type ClassicEvidence implements Evidence @entity(immutable: true) {
   sender: User!
   senderAddress: String!
   timestamp: BigInt!
+  transactionHash: Bytes!
   name: String
   description: String
   fileURI: String
diff --git a/subgraph/core/src/EvidenceModule.ts b/subgraph/core/src/EvidenceModule.ts
index a4dfd8e70..03a15c3b4 100644
--- a/subgraph/core/src/EvidenceModule.ts
+++ b/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;
diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index cf30bb0bc..bd5a2ad4c 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/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>
@@ -128,7 +142,24 @@ interface IEvidenceCard extends Pick<Evidence, "evidence" | "timestamp" | "name"
   index: number;
 }
 
-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 +176,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="noreferrer" target="_blank">
+            <p>{shortenAddress(sender)}</p>
+          </StyledA>
         </AccountContainer>
-        <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
-        {fileURI && (
+        <StyledA href={transactionExplorerLink} rel="noreferrer" target="_blank">
+          <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
+        </StyledA>
+        {fileURI && fileURI !== "-" ? (
           <StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
             <AttachmentIcon />
             <AttachedFileText />
           </StyledLink>
-        )}
+        ) : null}
       </BottomShade>
     </StyledCard>
   );
diff --git a/web/src/hooks/queries/useEvidences.ts b/web/src/hooks/queries/useEvidences.ts
index ae4bc00a4..743869619 100644
--- a/web/src/hooks/queries/useEvidences.ts
+++ b/web/src/hooks/queries/useEvidences.ts
@@ -15,6 +15,7 @@ export const evidenceFragment = graphql(`
       id
     }
     timestamp
+    transactionHash
     name
     description
     fileURI
diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx
index f4fc1955a..488893801 100644
--- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx
+++ b/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 }}
                 />
               )
             )

From 837797a054cd1a3689303397058a27517c876627 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:27:27 +0100
Subject: [PATCH 2/9] feat: make court branch look good in mobile, redirect to
 its corresponding court when clicking on it

---
 .../DisputeInfo/DisputeInfoCard.tsx           | 23 +++++++++++++++++--
 web/src/hooks/useScrollTop.ts                 | 12 ++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 web/src/hooks/useScrollTop.ts

diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
index 5e300c4b8..82133ec62 100644
--- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
+++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
@@ -1,8 +1,11 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
+import { Link } from "react-router-dom";
+
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 
+import { useScrollTop } from "hooks/useScrollTop";
 import { useCourtTree } from "hooks/queries/useCourtTree";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -12,7 +15,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 +62,19 @@ const StyledField = styled(Field)`
       margin-left: 8px;
       overflow: hidden;
       text-overflow: ellipsis;
+      text-wrap: auto;
+    }
+  }
+`;
+
+const StyledLink = styled(Link)`
+  :hover {
+    label {
+      &.value {
+        cursor: pointer;
+        color: ${({ theme }) => theme.primaryBlue};
+        text-decoration: underline;
+      }
     }
   }
 `;
@@ -74,6 +90,7 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
   disputeID,
   round,
 }) => {
+  const scrollTop = useScrollTop();
   const { data } = useCourtTree();
   const courtPath = getCourtsPath(data?.court, courtId);
   const items = useMemo(
@@ -86,7 +103,9 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          <StyledLink to={`/courts/${courtId}`} onClick={() => scrollTop()}>
+            <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          </StyledLink>
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>
diff --git a/web/src/hooks/useScrollTop.ts b/web/src/hooks/useScrollTop.ts
new file mode 100644
index 000000000..216a42901
--- /dev/null
+++ b/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;
+};

From 7d7f562dc0bccfa6570f78ba8e08dd9bf4bbec7a Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:08:00 +0100
Subject: [PATCH 3/9] feat: add juror links in evidence voting history, top
 jurors leaderboard

---
 web/src/components/EvidenceCard.tsx           |  4 ++--
 .../Voting/VotesDetails/AccordionTitle.tsx    | 23 +++++++++++++++++--
 .../Home/TopJurors/JurorCard/JurorTitle.tsx   | 21 +++++++++++++++--
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index bd5a2ad4c..a887ca208 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/web/src/components/EvidenceCard.tsx
@@ -176,11 +176,11 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
       <BottomShade>
         <AccountContainer>
           <Identicon size="24" string={sender} />
-          <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
+          <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
             <p>{shortenAddress(sender)}</p>
           </StyledA>
         </AccountContainer>
-        <StyledA href={transactionExplorerLink} rel="noreferrer" target="_blank">
+        <StyledA href={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
           <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
         </StyledA>
         {fileURI && fileURI !== "-" ? (
diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
index b10866975..4eaed0799 100644
--- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
+++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 
 import { Answer } from "context/NewDisputeContext";
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 import { getVoteChoice } from "utils/getVoteChoice";
 import { isUndefined } from "utils/index";
 import { shortenAddress } from "utils/shortenAddress";
@@ -24,11 +25,13 @@ const TitleContainer = styled.div`
     `
   )}
 `;
+
 const AddressContainer = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
 `;
+
 const StyledLabel = styled.label<{ variant?: string }>`
   color: ${({ theme, variant }) => (variant ? theme[variant] : theme.primaryText)};
   font-size: 16px;
@@ -38,6 +41,16 @@ const StyledSmall = styled.small`
   font-size: 16px;
 `;
 
+const StyledA = styled.a`
+  :hover {
+    text-decoration: underline;
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+`;
+
 const VoteStatus: React.FC<{
   choice?: string;
   period: string;
@@ -75,11 +88,17 @@ const AccordionTitle: React.FC<{
   commited: boolean;
   hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
+  const addressExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${juror}`;
+  }, [juror]);
+
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
-        <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
+        <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+          <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
+        </StyledA>
       </AddressContainer>
       <VoteStatus {...{ choice, period, answers, isActiveRound, commited, hiddenVotes }} />
       <StyledLabel variant="secondaryPurple">
diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx
index e4b52af2b..6d2c68963 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay";
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
 
 const Container = styled.div`
   display: flex;
@@ -19,15 +20,31 @@ const Container = styled.div`
   }
 `;
 
+const StyledA = styled.a`
+  :hover {
+    text-decoration: underline;
+    label {
+      cursor: pointer;
+      color: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+`;
+
 interface IJurorTitle {
   address: string;
 }
 
 const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
+  const addressExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`;
+  }, [address]);
+
   return (
     <Container>
       <IdenticonOrAvatar address={address} />
-      <AddressOrName address={address} />
+      <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+        <AddressOrName address={address} />
+      </StyledA>
     </Container>
   );
 };

From de706d349f82ec7f25c7db557c21b5b9ad0efae2 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:52:42 +0100
Subject: [PATCH 4/9] fix: add field to interfaces, bump subgraph version in
 package json

---
 subgraph/core/schema.graphql        | 1 +
 subgraph/package.json               | 2 +-
 web/src/components/EvidenceCard.tsx | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/subgraph/core/schema.graphql b/subgraph/core/schema.graphql
index 953a36270..e2700a5f3 100644
--- a/subgraph/core/schema.graphql
+++ b/subgraph/core/schema.graphql
@@ -56,6 +56,7 @@ interface Evidence {
   sender: User!
   senderAddress: String!
   timestamp: BigInt!
+  transactionHash: Bytes!
   name: String
   description: String
   fileURI: String
diff --git a/subgraph/package.json b/subgraph/package.json
index 1ffe01673..44f07b9a4 100644
--- a/subgraph/package.json
+++ b/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",
diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
index a887ca208..75eb614d8 100644
--- a/web/src/components/EvidenceCard.tsx
+++ b/web/src/components/EvidenceCard.tsx
@@ -140,6 +140,7 @@ 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> = ({

From 52a129b241123b369936ba1076c12a984968c06a Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 21:34:32 +0100
Subject: [PATCH 5/9] fix: switch poh v1 to poh v2

---
 web/src/layout/Header/navbar/DappList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/layout/Header/navbar/DappList.tsx b/web/src/layout/Header/navbar/DappList.tsx
index 84c3a4267..9c1db313d 100644
--- a/web/src/layout/Header/navbar/DappList.tsx
+++ b/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",

From db475c39be49e0d75ce069751ecc189b48e90952 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:52:08 +0100
Subject: [PATCH 6/9] fix: adjust law balance svg height

---
 web/src/assets/svgs/icons/law-balance.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/assets/svgs/icons/law-balance.svg b/web/src/assets/svgs/icons/law-balance.svg
index 696375f30..c8a97deec 100644
--- a/web/src/assets/svgs/icons/law-balance.svg
+++ b/web/src/assets/svgs/icons/law-balance.svg
@@ -1,4 +1,4 @@
-<svg height="32" width="32" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
+<svg height="24" width="32" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_12054_167323)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.79156 3.15129C7.79156 3.52555 7.70712 3.74087 7.57048 3.86274L11.3474 4.98979C11.4509 4.90059 11.5856 4.84623 11.7332 4.84623C12.0592 4.84623 12.3235 5.10951 12.3235 5.43429C12.3235 5.67037 12.1835 5.87337 11.982 5.96696L13.3039 9.76961C13.723 9.83625 14 9.93458 14 10.0646C14 10.5981 12.9553 11.0306 11.6667 11.0306C10.378 11.0306 9.33337 10.5981 9.33337 10.0646C9.33337 9.92642 9.64629 9.82404 10.1101 9.75743L11.4363 5.94197C11.3146 5.8712 11.2207 5.75845 11.1747 5.62343C11.1301 5.43834 11.0265 5.32151 10.8637 5.27295C10.6692 5.2149 10.4786 5.20833 10.2659 5.201C9.99706 5.19174 9.6928 5.18126 9.30029 5.06414L7.38131 4.49154V8.40273C7.53077 8.5094 7.62846 8.68344 7.62846 8.88059C7.62846 9.01134 7.58514 9.13172 7.51265 9.22937C7.70758 9.37395 7.83439 9.60457 7.83439 9.86526C7.83439 10.1808 7.64906 10.4524 7.38131 10.5802V11.3968C8.25276 11.4422 8.91665 11.6771 8.91665 11.9601C8.91665 11.9649 8.91645 11.9697 8.91607 11.9744C10.3227 12.0957 11.2938 12.3539 11.2938 12.6529L11.3007 13.07C11.3007 13.4854 9.42951 13.8188 7.11703 13.8188C4.80456 13.8188 2.93338 13.4786 2.93338 13.0632L2.91966 12.6529C2.91966 12.3587 3.86005 12.104 5.2303 11.9804C5.22955 11.9736 5.22916 11.9669 5.22916 11.9601C5.22916 11.6817 5.87174 11.4498 6.72236 11.3991V10.5934C6.43979 10.4715 6.2419 10.1916 6.2419 9.86531C6.2419 9.60465 6.36871 9.37399 6.56364 9.22941C6.49119 9.13176 6.44782 9.01142 6.44782 8.88063C6.44782 8.67167 6.55754 8.48864 6.72236 8.38435V4.29493L4.53389 3.64186C4.38825 3.5984 4.17506 3.48298 3.94728 3.35966L3.94727 3.35966L3.94727 3.35966L3.94726 3.35966L3.94726 3.35966C3.68597 3.2182 3.40547 3.06634 3.18566 3.00075C3.03336 2.9553 2.87703 2.98824 2.71666 3.09957C2.68578 3.12472 2.65221 3.14659 2.61659 3.16518L3.93556 6.95973C4.37412 7.02642 4.66664 7.12656 4.66664 7.26014C4.66664 7.79367 3.62198 8.22618 2.33332 8.22618C1.04466 8.22618 0 7.79367 0 7.26014C0 7.13055 0.275299 7.03244 0.692166 6.9658L2.02279 3.13777C1.86048 3.03298 1.75282 2.85131 1.75282 2.64428C1.75282 2.3195 2.0171 2.05622 2.34312 2.05622C2.60872 2.05622 2.83322 2.23096 2.90739 2.47131L6.29933 3.48345C6.2807 3.38972 6.27073 3.27989 6.27073 3.15129C6.27073 2.65026 6.5242 2.05816 7.03114 1.375C7.53808 2.05816 7.79156 2.65026 7.79156 3.15129ZM11.8653 6.00696L13.1662 9.74952C12.3453 9.63958 11.0947 9.63618 10.2472 9.73929L11.5495 5.99285C11.6073 6.01172 11.669 6.02227 11.7332 6.02227C11.7787 6.02227 11.8228 6.01665 11.8653 6.00696ZM0.829894 6.94559L2.13407 3.19369C2.19914 3.21827 2.2694 3.23234 2.34312 3.23234C2.39802 3.23234 2.45094 3.2243 2.50135 3.21035L3.79797 6.9405C2.9489 6.83147 1.66543 6.83317 0.829894 6.94559Z" />
 </g>

From 1fa8d3e0bd7ae0dadbd3a3e8281d34b96a768f5a Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:13:14 +0100
Subject: [PATCH 7/9] fix: style issues

---
 web/src/assets/svgs/icons/calendar.svg                         | 2 +-
 web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/assets/svgs/icons/calendar.svg b/web/src/assets/svgs/icons/calendar.svg
index a17a2d98e..7f8393539 100644
--- a/web/src/assets/svgs/icons/calendar.svg
+++ b/web/src/assets/svgs/icons/calendar.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
+<svg height="24" width="32" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_11557_149808)">
 <path d="M4.92188 8.375H3.82812C3.64766 8.375 3.5 8.22734 3.5 8.04688V6.95312C3.5 6.77266 3.64766 6.625 3.82812 6.625H4.92188C5.10234 6.625 5.25 6.77266 5.25 6.95312V8.04688C5.25 8.22734 5.10234 8.375 4.92188 8.375ZM7.875 8.04688V6.95312C7.875 6.77266 7.72734 6.625 7.54688 6.625H6.45312C6.27266 6.625 6.125 6.77266 6.125 6.95312V8.04688C6.125 8.22734 6.27266 8.375 6.45312 8.375H7.54688C7.72734 8.375 7.875 8.22734 7.875 8.04688ZM10.5 8.04688V6.95312C10.5 6.77266 10.3523 6.625 10.1719 6.625H9.07812C8.89766 6.625 8.75 6.77266 8.75 6.95312V8.04688C8.75 8.22734 8.89766 8.375 9.07812 8.375H10.1719C10.3523 8.375 10.5 8.22734 10.5 8.04688ZM7.875 10.6719V9.57812C7.875 9.39766 7.72734 9.25 7.54688 9.25H6.45312C6.27266 9.25 6.125 9.39766 6.125 9.57812V10.6719C6.125 10.8523 6.27266 11 6.45312 11H7.54688C7.72734 11 7.875 10.8523 7.875 10.6719ZM5.25 10.6719V9.57812C5.25 9.39766 5.10234 9.25 4.92188 9.25H3.82812C3.64766 9.25 3.5 9.39766 3.5 9.57812V10.6719C3.5 10.8523 3.64766 11 3.82812 11H4.92188C5.10234 11 5.25 10.8523 5.25 10.6719ZM10.5 10.6719V9.57812C10.5 9.39766 10.3523 9.25 10.1719 9.25H9.07812C8.89766 9.25 8.75 9.39766 8.75 9.57812V10.6719C8.75 10.8523 8.89766 11 9.07812 11H10.1719C10.3523 11 10.5 10.8523 10.5 10.6719ZM13.125 3.5625V13.1875C13.125 13.9121 12.5371 14.5 11.8125 14.5H2.1875C1.46289 14.5 0.875 13.9121 0.875 13.1875V3.5625C0.875 2.83789 1.46289 2.25 2.1875 2.25H3.5V0.828125C3.5 0.647656 3.64766 0.5 3.82812 0.5H4.92188C5.10234 0.5 5.25 0.647656 5.25 0.828125V2.25H8.75V0.828125C8.75 0.647656 8.89766 0.5 9.07812 0.5H10.1719C10.3523 0.5 10.5 0.647656 10.5 0.828125V2.25H11.8125C12.5371 2.25 13.125 2.83789 13.125 3.5625ZM11.8125 13.0234V4.875H2.1875V13.0234C2.1875 13.1137 2.26133 13.1875 2.35156 13.1875H11.6484C11.7387 13.1875 11.8125 13.1137 11.8125 13.0234Z" />
 </g>
diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
index 82133ec62..2e2e0079d 100644
--- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
+++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
@@ -68,6 +68,7 @@ const StyledField = styled(Field)`
 `;
 
 const StyledLink = styled(Link)`
+  width: 100%;
   :hover {
     label {
       &.value {

From 0dded809c22b6fc9b0c62493bf3b2fd6120fb8c7 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:37:11 +0100
Subject: [PATCH 8/9] fix: code improvement in court branch section and field
 component

---
 .../DisputeInfo/DisputeInfoCard.tsx           | 27 +++++--------------
 web/src/components/Field.tsx                  |  8 +++++-
 2 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
index 2e2e0079d..2985fa3f2 100644
--- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
+++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
@@ -1,11 +1,8 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
-import { Link } from "react-router-dom";
-
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 
-import { useScrollTop } from "hooks/useScrollTop";
 import { useCourtTree } from "hooks/queries/useCourtTree";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -67,19 +64,6 @@ const StyledField = styled(Field)`
   }
 `;
 
-const StyledLink = styled(Link)`
-  width: 100%;
-  :hover {
-    label {
-      &.value {
-        cursor: pointer;
-        color: ${({ theme }) => theme.primaryBlue};
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
 type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
 
 const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
@@ -91,7 +75,6 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
   disputeID,
   round,
 }) => {
-  const scrollTop = useScrollTop();
   const { data } = useCourtTree();
   const courtPath = getCourtsPath(data?.court, courtId);
   const items = useMemo(
@@ -104,9 +87,13 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledLink to={`/courts/${courtId}`} onClick={() => scrollTop()}>
-            <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
-          </StyledLink>
+          <StyledField
+            link={`/courts/${courtId}`}
+            icon={LawBalanceIcon}
+            name="Court Branch"
+            value={courtBranchValue}
+            {...{ isOverview }}
+          />
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>
diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
index 8f785e221..d3abd80e9 100644
--- a/web/src/components/Field.tsx
+++ b/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}

From fd6a186e5f78022e86b1c8211405373415c390d4 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 21 Nov 2024 20:43:08 +0100
Subject: [PATCH 9/9] feat: add policy file to the file viewer

---
 web/src/components/DisputePreview/Policies.tsx   | 12 ++++++++++--
 web/src/pages/Cases/AttachmentDisplay/Header.tsx | 15 +++++++++++----
 web/src/pages/Cases/AttachmentDisplay/index.tsx  |  4 ++--
 web/src/pages/Cases/index.tsx                    |  5 +++--
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx
index 080e7d304..f30bce9ef 100644
--- a/web/src/components/DisputePreview/Policies.tsx
+++ b/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`}>
diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx
index 270d8fa43..98faa738b 100644
--- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx
+++ b/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>
   );
 };
diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx
index 3838e701e..6aa74f19a 100644
--- a/web/src/pages/Cases/AttachmentDisplay/index.tsx
+++ b/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;
diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx
index 44ce69e09..555724987 100644
--- a/web/src/pages/Cases/index.tsx
+++ b/web/src/pages/Cases/index.tsx
@@ -5,7 +5,7 @@ import { Routes, Route } from "react-router-dom";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import EvidenceAttachmentDisplay from "./AttachmentDisplay";
+import AttachmentDisplay from "./AttachmentDisplay";
 import CaseDetails from "./CaseDetails";
 import CasesFetcher from "./CasesFetcher";
 
@@ -21,7 +21,8 @@ const Cases: React.FC = () => (
   <Container>
     <Routes>
       <Route path="/display/:page/:order/:filter" element={<CasesFetcher />} />
-      <Route path="/:id/evidence/attachment/*" element={<EvidenceAttachmentDisplay />} />
+      <Route path="/:id/evidence/attachment/*" element={<AttachmentDisplay />} />
+      <Route path="/:id/overview/policy/attachment/*" element={<AttachmentDisplay />} />
       <Route path="/:id/*" element={<CaseDetails />} />
     </Routes>
   </Container>