feat: scroll top improvements

Author: kemuru

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}

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 />

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[]}

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>

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>
   );
 };

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 ? (

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 />

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>

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 />

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;