From e255ff2a513901a4976fdbd49453b72e1cfdf264 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 04:03:14 +0100
Subject: [PATCH 1/6] feat: make cases cards links and create new case buttons
 too

---
 web/src/components/CasesDisplay/index.tsx     |  7 +++---
 .../DisputeView/DisputeCardView.tsx           | 19 +++++++--------
 .../DisputeView/DisputeListView.tsx           | 23 ++++++++++---------
 web/src/pages/Home/CourtOverview/Header.tsx   |  7 +++---
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx
index f9dd77b24..5fdf19a3b 100644
--- a/web/src/components/CasesDisplay/index.tsx
+++ b/web/src/components/CasesDisplay/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
@@ -53,14 +53,15 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   className,
   totalPages,
 }) => {
-  const navigate = useNavigate();
   const location = useLocation();
   return (
     <div {...{ className }}>
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
         {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <StyledButton onClick={() => navigate(`/resolver`)} text="Create a case" Icon={ArrowIcon} />
+          <Link to={"/resolver"}>
+            <StyledButton text="Create a case" Icon={ArrowIcon} />
+          </Link>
         ) : null}
       </TitleContainer>
       <Search />
diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx
index ae692da31..1027b0436 100644
--- a/web/src/components/DisputeView/DisputeCardView.tsx
+++ b/web/src/components/DisputeView/DisputeCardView.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
@@ -54,15 +54,16 @@ interface IDisputeCardView {
 }
 
 const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => {
-  const navigate = useNavigate();
   return (
-    <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
-      <CardContainer>
-        {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
-        <DisputeInfo {...props} />
-      </CardContainer>
-    </StyledCard>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledCard hover>
+        <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
+        <CardContainer>
+          {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
+          <DisputeInfo {...props} />
+        </CardContainer>
+      </StyledCard>
+    </Link>
   );
 };
 
diff --git a/web/src/components/DisputeView/DisputeListView.tsx b/web/src/components/DisputeView/DisputeListView.tsx
index 3584ba7c0..cbecdeedb 100644
--- a/web/src/components/DisputeView/DisputeListView.tsx
+++ b/web/src/components/DisputeView/DisputeListView.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useAccount } from "wagmi";
 
 import { Card } from "@kleros/ui-components-library";
@@ -56,17 +56,18 @@ interface IDisputeListView {
 }
 const DisputeListView: React.FC<IDisputeListView> = (props) => {
   const { isDisconnected } = useAccount();
-  const navigate = useNavigate();
   return (
-    <StyledListItem hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
-      <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
-      <ListContainer>
-        <TitleContainer isLabel={!isDisconnected}>
-          <TruncatedTitle text={props?.title} maxLength={50} />
-        </TitleContainer>
-        <DisputeInfo {...props} />
-      </ListContainer>
-    </StyledListItem>
+    <Link to={`/cases/${props?.disputeID?.toString()}`}>
+      <StyledListItem hover>
+        <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
+        <ListContainer>
+          <TitleContainer isLabel={!isDisconnected}>
+            <TruncatedTitle text={props?.title} maxLength={50} />
+          </TitleContainer>
+          <DisputeInfo {...props} />
+        </ListContainer>
+      </StyledListItem>
+    </Link>
   );
 };
 
diff --git a/web/src/pages/Home/CourtOverview/Header.tsx b/web/src/pages/Home/CourtOverview/Header.tsx
index 2f5e4d85f..fa54bf4a2 100644
--- a/web/src/pages/Home/CourtOverview/Header.tsx
+++ b/web/src/pages/Home/CourtOverview/Header.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Button } from "@kleros/ui-components-library";
 
@@ -22,11 +22,12 @@ const StyledH1 = styled.h1`
 `;
 
 const Header: React.FC = () => {
-  const navigate = useNavigate();
   return (
     <StyledHeader>
       <StyledH1>Court Overview</StyledH1>
-      <Button small Icon={Bookmark} text="Create a Case" onClick={() => navigate("/resolver")} />
+      <Link to={"/resolver"}>
+        <Button small Icon={Bookmark} text="Create a Case" />
+      </Link>
     </StyledHeader>
   );
 };

From 317e53bdb6bff4226e29ede44aae8bd30348645a Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 05:50:40 +0100
Subject: [PATCH 2/6] feat: add scroll top for when entering a case in mobile

---
 web/src/pages/Cases/CaseDetails/Overview/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx
index c01d5faea..45a34d93d 100644
--- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -6,6 +6,7 @@ import { formatEther } from "viem";
 
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
+import { useScrollTop } from "hooks/useScrollTop";
 import { getLocalRounds } from "utils/getLocalRounds";
 
 import { useCourtPolicy } from "queries/useCourtPolicy";
@@ -40,12 +41,17 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
   const { data: dispute } = useDisputeDetailsQuery(id);
   const { data: courtPolicy } = useCourtPolicy(courtID);
   const { data: votingHistory } = useVotingHistory(id);
+  const scrollTop = useScrollTop();
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const courtName = courtPolicy?.name;
   const court = dispute?.dispute?.court;
   const rewards = useMemo(() => (court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined), [court]);
   const category = disputeDetails?.category;
 
+  useEffect(() => {
+    scrollTop();
+  }, [scrollTop]);
+
   return (
     <>
       <Container>

From b7b7656b7294cd9b61eded5f339871339df98468 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 05:58:15 +0100
Subject: [PATCH 3/6] feat: scroll top globally on the case, only once

---
 web/src/pages/Cases/CaseDetails/Overview/index.tsx | 8 +-------
 web/src/pages/Cases/CaseDetails/index.tsx          | 8 +++++++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx
index 45a34d93d..c01d5faea 100644
--- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -6,7 +6,6 @@ import { formatEther } from "viem";
 
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
-import { useScrollTop } from "hooks/useScrollTop";
 import { getLocalRounds } from "utils/getLocalRounds";
 
 import { useCourtPolicy } from "queries/useCourtPolicy";
@@ -41,17 +40,12 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
   const { data: dispute } = useDisputeDetailsQuery(id);
   const { data: courtPolicy } = useCourtPolicy(courtID);
   const { data: votingHistory } = useVotingHistory(id);
-  const scrollTop = useScrollTop();
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const courtName = courtPolicy?.name;
   const court = dispute?.dispute?.court;
   const rewards = useMemo(() => (court ? `≥ ${formatEther(court.feeForJuror)} ETH` : undefined), [court]);
   const category = disputeDetails?.category;
 
-  useEffect(() => {
-    scrollTop();
-  }, [scrollTop]);
-
   return (
     <>
       <Container>
diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx
index aa4e54047..8cd1a9125 100644
--- a/web/src/pages/Cases/CaseDetails/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { Route, Routes, useParams, Navigate } from "react-router-dom";
@@ -7,6 +7,7 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 import { VotingContextProvider } from "hooks/useVotingContext";
+import { useScrollTop } from "hooks/useScrollTop";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
@@ -43,10 +44,15 @@ const Header = styled.h1`
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
+  const scrollTop = useScrollTop();
   const dispute = data?.dispute;
   const currentPeriodIndex = (dispute ? Periods[dispute.period] : 0) as number;
   const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <VotingContextProvider>
       <Container>

From 12f13705c1f3487ac66d35f2d716f174d091be88 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 06:46:10 +0100
Subject: [PATCH 4/6] feat: scroll top improvements

---
 web/src/components/Field.tsx                  |  5 ----
 .../pages/Cases/AttachmentDisplay/index.tsx   | 11 ++++++--
 web/src/pages/Cases/CasesFetcher.tsx          |  8 +++++-
 web/src/pages/Courts/CourtDetails/index.tsx   |  9 +++++-
 .../Dashboard/Courts/CourtCard/CourtName.tsx  | 28 ++++++-------------
 web/src/pages/Dashboard/index.tsx             |  9 +++++-
 web/src/pages/GetPnk/index.tsx                | 10 ++++++-
 web/src/pages/Home/index.tsx                  |  9 +++++-
 web/src/pages/Resolver/index.tsx              |  9 +++++-
 .../Settings/EmailConfirmation/index.tsx      |  7 +++++
 10 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/web/src/components/Field.tsx b/web/src/components/Field.tsx
index d3abd80e9..94cc74f9e 100644
--- a/web/src/components/Field.tsx
+++ b/web/src/components/Field.tsx
@@ -4,8 +4,6 @@ import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link } from "react-router-dom";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 const FieldContainer = styled.div<FieldContainerProps>`
   display: flex;
   align-items: center;
@@ -96,8 +94,6 @@ const Field: React.FC<IField> = ({
   isJurorBalance,
   className,
 }) => {
-  const scrollTop = useScrollTop();
-
   return (
     <FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
       <Icon />
@@ -108,7 +104,6 @@ const Field: React.FC<IField> = ({
             to={link}
             onClick={(event) => {
               event.stopPropagation();
-              scrollTop();
             }}
           >
             {value}
diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx
index 6aa74f19a..9276d0f53 100644
--- a/web/src/pages/Cases/AttachmentDisplay/index.tsx
+++ b/web/src/pages/Cases/AttachmentDisplay/index.tsx
@@ -1,8 +1,10 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import styled from "styled-components";
 
 import { useSearchParams } from "react-router-dom";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
@@ -39,8 +41,13 @@ const StyledNewTabIcon = styled(NewTabIcon)`
 
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
-
   const url = searchParams.get("url");
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       <Header />
diff --git a/web/src/pages/Cases/CasesFetcher.tsx b/web/src/pages/Cases/CasesFetcher.tsx
index 83b34cf20..83364fb4d 100644
--- a/web/src/pages/Cases/CasesFetcher.tsx
+++ b/web/src/pages/Cases/CasesFetcher.tsx
@@ -1,8 +1,9 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 
 import { useParams, useNavigate } from "react-router-dom";
 
 import useIsDesktop from "hooks/useIsDesktop";
+import { useScrollTop } from "hooks/useScrollTop";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
@@ -47,6 +48,7 @@ const CasesFetcher: React.FC = () => {
   const location = useRootPath();
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
+  const scrollTop = useScrollTop();
   const casesPerPage = isDesktop ? 9 : 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -69,6 +71,10 @@ const CasesFetcher: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <CasesDisplay
       disputes={data?.disputes as DisputeDetailsFragment[]}
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
index de51a910d..3a8fffa72 100644
--- a/web/src/pages/Courts/CourtDetails/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled, { css } from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -9,6 +9,8 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 import { isProductionDeployment } from "consts/index";
 import { isUndefined } from "utils/index";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
@@ -83,6 +85,7 @@ const CourtDetails: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
+  const scrollTop = useScrollTop();
 
   const courtPath = getCourtsPath(data?.court, id);
 
@@ -94,6 +97,10 @@ const CourtDetails: React.FC = () => {
     })) ?? [])
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       <StyledCard>
diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx
index 6bc7e531c..4ff454167 100644
--- a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx
+++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx
@@ -2,10 +2,9 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { landscapeStyle } from "styles/landscapeStyle";
-import LightButton from "components/LightButton";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
-import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
+import { Link } from "react-router-dom";
 
 const Container = styled.div`
   display: flex;
@@ -29,17 +28,13 @@ const Container = styled.div`
   )}
 `;
 
-const StyledButton = styled(LightButton)`
+const StyledLink = styled(Link)`
   display: flex;
-  flex-direction: row-reverse;
   gap: 8px;
-  padding: 0px;
-  > .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-    font-size: 14px;
-  }
-  > .button-svg {
-    margin-right: 0;
+  align-items: center;
+  > svg {
+    height: 15px;
+    width: 15px;
     path {
       fill: ${({ theme }) => theme.primaryBlue};
     }
@@ -52,17 +47,12 @@ interface ICourtName {
 }
 
 const CourtName: React.FC<ICourtName> = ({ name, id }) => {
-  const navigate = useNavigateAndScrollTop();
-
   return (
     <Container>
       <small>{name}</small>
-      <StyledButton
-        onClick={() => navigate(`/courts/${id?.toString()}`)}
-        text="Open Court"
-        Icon={ArrowIcon}
-        className="reverse-button"
-      />
+      <StyledLink to={`/courts/${id?.toString()}`}>
+        Open Court <ArrowIcon />
+      </StyledLink>
     </Container>
   );
 };
diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
index a526b06d0..6492666ba 100644
--- a/web/src/pages/Dashboard/index.tsx
+++ b/web/src/pages/Dashboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import styled from "styled-components";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -7,6 +7,8 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
 
@@ -49,6 +51,7 @@ const Dashboard: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
   const navigate = useNavigate();
+  const scrollTop = useScrollTop();
   const casesPerPage = 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -68,6 +71,10 @@ const Dashboard: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Container>
       {isConnected ? (
diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx
index 96527d282..12dcb2f12 100644
--- a/web/src/pages/GetPnk/index.tsx
+++ b/web/src/pages/GetPnk/index.tsx
@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { isProductionDeployment } from "consts/index";
 
 import { responsiveSize } from "styles/responsiveSize";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
 
@@ -28,6 +30,12 @@ const Container = styled.div`
 `;
 
 const GetPnk: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Wrapper>
       <HeroImage />
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index 79fbca13b..d3b7ba1ba 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 
 import { HomePageProvider } from "hooks/useHomePageContext";
+import { useScrollTop } from "hooks/useScrollTop";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
@@ -26,6 +27,12 @@ const Container = styled.div`
 `;
 
 const Home: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
       <Wrapper>
diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx
index d370896ac..473c6b54c 100644
--- a/web/src/pages/Resolver/index.tsx
+++ b/web/src/pages/Resolver/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
@@ -8,6 +8,8 @@ import { useAccount } from "wagmi";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import ConnectWallet from "components/ConnectWallet";
 import EnsureAuth from "components/EnsureAuth";
 import HeroImage from "components/HeroImage";
@@ -77,8 +79,13 @@ const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
   const { isConnected } = useAccount();
+  const scrollTop = useScrollTop();
   const isPreviewPage = location.pathname.includes("/preview");
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   return (
     <Wrapper>
       <HeroImage />
diff --git a/web/src/pages/Settings/EmailConfirmation/index.tsx b/web/src/pages/Settings/EmailConfirmation/index.tsx
index 90c3e6faa..3bbb44a49 100644
--- a/web/src/pages/Settings/EmailConfirmation/index.tsx
+++ b/web/src/pages/Settings/EmailConfirmation/index.tsx
@@ -6,6 +6,8 @@ import { isAddress } from "viem";
 
 import { Button } from "@kleros/ui-components-library";
 
+import { useScrollTop } from "hooks/useScrollTop";
+
 import CheckIcon from "svgs/icons/check-circle-outline.svg";
 import WarningIcon from "svgs/icons/warning-outline.svg";
 import InvalidIcon from "svgs/label-icons/minus-circle.svg";
@@ -138,6 +140,7 @@ const EmailConfirmation: React.FC = () => {
   const [isTokenInvalid, setIsTokenInvalid] = useState(false);
   const [isError, setIsError] = useState(false);
   const [searchParams, _] = useSearchParams();
+  const scrollTop = useScrollTop();
   const address = searchParams.get("address");
   const token = searchParams.get("token");
 
@@ -155,6 +158,10 @@ const EmailConfirmation: React.FC = () => {
     }
   }, [address, token, confirmEmail]);
 
+  useEffect(() => {
+    scrollTop();
+  }, []);
+
   const { headerMsg, subtitleMsg, buttonMsg, buttonTo, Icon, color } = useMemo(() => {
     if (!address || !isAddress(address) || !token || isTokenInvalid) return messageConfigs.invalid;
     if (isError) return messageConfigs.error;

From 0596e7f59f00035c80617d69f87ea98a4e9561bf Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:47:35 +0100
Subject: [PATCH 5/6] fix: abstract scroll top component

---
 web/src/components/ScrollTop.tsx              | 14 +++++++
 .../pages/Cases/AttachmentDisplay/index.tsx   | 11 ++----
 web/src/pages/Cases/CaseDetails/index.tsx     | 10 ++---
 web/src/pages/Cases/CasesFetcher.tsx          | 30 +++++++-------
 web/src/pages/Courts/CourtDetails/index.tsx   | 11 ++----
 web/src/pages/Dashboard/index.tsx             | 11 ++----
 web/src/pages/GetPnk/index.tsx                | 33 ++++++----------
 web/src/pages/Home/index.tsx                  | 39 ++++++++-----------
 web/src/pages/Resolver/index.tsx              | 11 ++----
 .../Settings/EmailConfirmation/index.tsx      |  9 +----
 10 files changed, 73 insertions(+), 106 deletions(-)
 create mode 100644 web/src/components/ScrollTop.tsx

diff --git a/web/src/components/ScrollTop.tsx b/web/src/components/ScrollTop.tsx
new file mode 100644
index 000000000..ea7968c0f
--- /dev/null
+++ b/web/src/components/ScrollTop.tsx
@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+
+import { useScrollTop } from "hooks/useScrollTop";
+
+const ScrollTop: React.FC = () => {
+  const scrollTop = useScrollTop();
+
+  useEffect(() => {
+    scrollTop();
+  });
+
+  return <></>;
+};
+export default ScrollTop;
diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx
index 9276d0f53..e844294db 100644
--- a/web/src/pages/Cases/AttachmentDisplay/index.tsx
+++ b/web/src/pages/Cases/AttachmentDisplay/index.tsx
@@ -1,13 +1,12 @@
-import React, { lazy, Suspense, useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 import styled from "styled-components";
 
 import { useSearchParams } from "react-router-dom";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
+import ScrollTop from "components/ScrollTop";
 
 import Header from "./Header";
 
@@ -42,11 +41,6 @@ const StyledNewTabIcon = styled(NewTabIcon)`
 const AttachmentDisplay: React.FC = () => {
   const [searchParams] = useSearchParams();
   const url = searchParams.get("url");
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
 
   return (
     <Container>
@@ -67,6 +61,7 @@ const AttachmentDisplay: React.FC = () => {
           </Suspense>
         </>
       ) : null}
+      <ScrollTop />
     </Container>
   );
 };
diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx
index 8cd1a9125..643eb696d 100644
--- a/web/src/pages/Cases/CaseDetails/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { Route, Routes, useParams, Navigate } from "react-router-dom";
@@ -7,7 +7,6 @@ import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 import { VotingContextProvider } from "hooks/useVotingContext";
-import { useScrollTop } from "hooks/useScrollTop";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
@@ -20,6 +19,7 @@ import Overview from "./Overview";
 import Tabs from "./Tabs";
 import Timeline from "./Timeline";
 import Voting from "./Voting";
+import ScrollTop from "components/ScrollTop";
 
 const Container = styled.div``;
 
@@ -44,15 +44,10 @@ const Header = styled.h1`
 const CaseDetails: React.FC = () => {
   const { id } = useParams();
   const { data } = useDisputeDetailsQuery(id);
-  const scrollTop = useScrollTop();
   const dispute = data?.dispute;
   const currentPeriodIndex = (dispute ? Periods[dispute.period] : 0) as number;
   const arbitrable = dispute?.arbitrated.id as `0x${string}`;
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <VotingContextProvider>
       <Container>
@@ -76,6 +71,7 @@ const CaseDetails: React.FC = () => {
             <Route path="*" element={<Navigate to="overview" replace />} />
           </Routes>
         </StyledCard>
+        <ScrollTop />
       </Container>
     </VotingContextProvider>
   );
diff --git a/web/src/pages/Cases/CasesFetcher.tsx b/web/src/pages/Cases/CasesFetcher.tsx
index 83364fb4d..462674053 100644
--- a/web/src/pages/Cases/CasesFetcher.tsx
+++ b/web/src/pages/Cases/CasesFetcher.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 
 import { useParams, useNavigate } from "react-router-dom";
 
 import useIsDesktop from "hooks/useIsDesktop";
-import { useScrollTop } from "hooks/useScrollTop";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
@@ -14,6 +13,7 @@ import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { DisputeDetailsFragment, Dispute_Filter, OrderDirection } from "src/graphql/graphql";
 
 import CasesDisplay from "components/CasesDisplay";
+import ScrollTop from "components/ScrollTop";
 
 const calculateStats = (
   isCourtFilter: boolean,
@@ -48,7 +48,6 @@ const CasesFetcher: React.FC = () => {
   const location = useRootPath();
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
-  const scrollTop = useScrollTop();
   const casesPerPage = isDesktop ? 9 : 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -71,20 +70,19 @@ const CasesFetcher: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
-    <CasesDisplay
-      disputes={data?.disputes as DisputeDetailsFragment[]}
-      numberDisputes={totalCases}
-      numberClosedDisputes={ruledCases}
-      currentPage={pageNumber}
-      setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
-      totalPages={totalPages}
-      {...{ casesPerPage }}
-    />
+    <>
+      <CasesDisplay
+        disputes={data?.disputes as DisputeDetailsFragment[]}
+        numberDisputes={totalCases}
+        numberClosedDisputes={ruledCases}
+        currentPage={pageNumber}
+        setCurrentPage={(newPage: number) => navigate(`${location}/${newPage}/${order}/${filter}`)}
+        totalPages={totalPages}
+        {...{ casesPerPage }}
+      />
+      <ScrollTop />
+    </>
   );
 };
 
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
index 3a8fffa72..271ea9891 100644
--- a/web/src/pages/Courts/CourtDetails/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -9,8 +9,6 @@ import { Card, Breadcrumb } from "@kleros/ui-components-library";
 import { isProductionDeployment } from "consts/index";
 import { isUndefined } from "utils/index";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
@@ -23,6 +21,7 @@ import LatestCases from "components/LatestCases";
 import Staking from "components/Popup/MiniGuides/Staking";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import { Divider } from "components/Divider";
+import ScrollTop from "components/ScrollTop";
 
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -85,7 +84,6 @@ const CourtDetails: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
-  const scrollTop = useScrollTop();
 
   const courtPath = getCourtsPath(data?.court, id);
 
@@ -97,10 +95,6 @@ const CourtDetails: React.FC = () => {
     })) ?? [])
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <Container>
       <StyledCard>
@@ -126,6 +120,7 @@ const CourtDetails: React.FC = () => {
         <Description />
       </StyledCard>
       <LatestCases filters={{ court: id }} />
+      <ScrollTop />
     </Container>
   );
 };
diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
index 6492666ba..0e8e75649 100644
--- a/web/src/pages/Dashboard/index.tsx
+++ b/web/src/pages/Dashboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useNavigate, useParams } from "react-router-dom";
@@ -7,8 +7,6 @@ import { useAccount } from "wagmi";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, useRootPath } from "utils/uri";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import { DisputeDetailsFragment, useMyCasesQuery } from "queries/useCasesQuery";
 import { useUserQuery } from "queries/useUser";
 
@@ -18,6 +16,7 @@ import { responsiveSize } from "styles/responsiveSize";
 
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
+import ScrollTop from "components/ScrollTop";
 
 import Courts from "./Courts";
 import JurorInfo from "./JurorInfo";
@@ -51,7 +50,6 @@ const Dashboard: React.FC = () => {
   const { page, order, filter } = useParams();
   const location = useRootPath();
   const navigate = useNavigate();
-  const scrollTop = useScrollTop();
   const casesPerPage = 3;
   const pageNumber = parseInt(page ?? "1");
   const disputeSkip = casesPerPage * (pageNumber - 1);
@@ -71,10 +69,6 @@ const Dashboard: React.FC = () => {
     [totalCases, casesPerPage]
   );
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <Container>
       {isConnected ? (
@@ -99,6 +93,7 @@ const Dashboard: React.FC = () => {
           <ConnectWallet />
         </ConnectWalletContainer>
       )}
+      <ScrollTop />
     </Container>
   );
 };
diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx
index 12dcb2f12..5c4b0a574 100644
--- a/web/src/pages/GetPnk/index.tsx
+++ b/web/src/pages/GetPnk/index.tsx
@@ -1,14 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { isProductionDeployment } from "consts/index";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
+import ScrollTop from "components/ScrollTop";
 
 import { Widget } from "./Widget";
 
@@ -29,22 +28,14 @@ const Container = styled.div`
   gap: 24px;
 `;
 
-const GetPnk: React.FC = () => {
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
-  return (
-    <Wrapper>
-      <HeroImage />
-      <Container>
-        {!isProductionDeployment() && <ClaimPnkButton />}
-        <Widget />
-      </Container>
-    </Wrapper>
-  );
-};
-
+const GetPnk: React.FC = () => (
+  <Wrapper>
+    <HeroImage />
+    <Container>
+      {!isProductionDeployment() && <ClaimPnkButton />}
+      <Widget />
+    </Container>
+    <ScrollTop />
+  </Wrapper>
+);
 export default GetPnk;
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
index d3b7ba1ba..699ed8a13 100644
--- a/web/src/pages/Home/index.tsx
+++ b/web/src/pages/Home/index.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { HomePageProvider } from "hooks/useHomePageContext";
-import { useScrollTop } from "hooks/useScrollTop";
 import { getOneYearAgoTimestamp } from "utils/date";
 
 import { responsiveSize } from "styles/responsiveSize";
 
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
+import ScrollTop from "components/ScrollTop";
 
 import Community from "./Community";
 import CourtOverview from "./CourtOverview";
@@ -26,26 +26,19 @@ const Container = styled.div`
   margin: 0 auto;
 `;
 
-const Home: React.FC = () => {
-  const scrollTop = useScrollTop();
-
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
-  return (
-    <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-      <Wrapper>
-        <HeroImage />
-        <Container>
-          <CourtOverview />
-          <LatestCases />
-          <TopJurors />
-          <Community />
-        </Container>
-      </Wrapper>
-    </HomePageProvider>
-  );
-};
+const Home: React.FC = () => (
+  <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+    <Wrapper>
+      <HeroImage />
+      <Container>
+        <CourtOverview />
+        <LatestCases />
+        <TopJurors />
+        <Community />
+      </Container>
+      <ScrollTop />
+    </Wrapper>
+  </HomePageProvider>
+);
 
 export default Home;
diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx
index 473c6b54c..10ab5c242 100644
--- a/web/src/pages/Resolver/index.tsx
+++ b/web/src/pages/Resolver/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
@@ -8,13 +8,12 @@ import { useAccount } from "wagmi";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import ConnectWallet from "components/ConnectWallet";
 import EnsureAuth from "components/EnsureAuth";
 import HeroImage from "components/HeroImage";
 import HowItWorks from "components/HowItWorks";
 import Resolver from "components/Popup/MiniGuides/DisputeResolver";
+import ScrollTop from "components/ScrollTop";
 
 import Description from "./Briefing/Description";
 import Title from "./Briefing/Title";
@@ -79,13 +78,8 @@ const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
   const { isConnected } = useAccount();
-  const scrollTop = useScrollTop();
   const isPreviewPage = location.pathname.includes("/preview");
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   return (
     <Wrapper>
       <HeroImage />
@@ -125,6 +119,7 @@ const DisputeResolver: React.FC = () => {
           </ConnectWalletContainer>
         )}
       </Container>
+      <ScrollTop />
     </Wrapper>
   );
 };
diff --git a/web/src/pages/Settings/EmailConfirmation/index.tsx b/web/src/pages/Settings/EmailConfirmation/index.tsx
index d63eafd48..5b1f9281d 100644
--- a/web/src/pages/Settings/EmailConfirmation/index.tsx
+++ b/web/src/pages/Settings/EmailConfirmation/index.tsx
@@ -6,8 +6,6 @@ import { isAddress } from "viem";
 
 import { Button } from "@kleros/ui-components-library";
 
-import { useScrollTop } from "hooks/useScrollTop";
-
 import CheckIcon from "svgs/icons/check-circle-outline.svg";
 import WarningIcon from "svgs/icons/warning-outline.svg";
 import InvalidIcon from "svgs/label-icons/minus-circle.svg";
@@ -17,6 +15,7 @@ import { useAtlasProvider } from "@kleros/kleros-app";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import Loader from "components/Loader";
+import ScrollTop from "components/ScrollTop";
 
 const Container = styled.div`
   display: flex;
@@ -138,7 +137,6 @@ const EmailConfirmation: React.FC = () => {
   const [isTokenInvalid, setIsTokenInvalid] = useState(false);
   const [isError, setIsError] = useState(false);
   const [searchParams, _] = useSearchParams();
-  const scrollTop = useScrollTop();
   const address = searchParams.get("address");
   const token = searchParams.get("token");
 
@@ -156,10 +154,6 @@ const EmailConfirmation: React.FC = () => {
     }
   }, [address, token, confirmEmail]);
 
-  useEffect(() => {
-    scrollTop();
-  }, []);
-
   const { headerMsg, subtitleMsg, buttonMsg, buttonTo, Icon, color } = useMemo(() => {
     if (!address || !isAddress(address) || !token || isTokenInvalid) return messageConfigs.invalid;
     if (isError) return messageConfigs.error;
@@ -188,6 +182,7 @@ const EmailConfirmation: React.FC = () => {
           </IconContainer>
         </>
       )}
+      <ScrollTop />
     </Container>
   );
 };

From 8437b2e51c17058908a27ca56b19894b777a016e Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:48:20 +0100
Subject: [PATCH 6/6] fix: add empty dependency array to the scrolltop
 useeffect

---
 web/src/components/ScrollTop.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/ScrollTop.tsx b/web/src/components/ScrollTop.tsx
index ea7968c0f..5a1732c72 100644
--- a/web/src/components/ScrollTop.tsx
+++ b/web/src/components/ScrollTop.tsx
@@ -7,7 +7,7 @@ const ScrollTop: React.FC = () => {
 
   useEffect(() => {
     scrollTop();
-  });
+  }, []);
 
   return <></>;
 };