feat: url path tab logic, refactors, add voted ballot svg, add icons to tabs

Author: kemuru

web/src/app.tsx

@@ -73,7 +73,7 @@ const App: React.FC = () => {
  }
  />
  <Route
- path="profile/:page/:order/:filter"
+ path="profile/*"
  element={
  <Suspense fallback={<Loader width={"48px"} height={"48px"} />}>
  <Profile />

web/src/assets/svgs/icons/voted-ballot.svg

@@ -223,7 +223,7 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
  description,
  fileURI,
 }) => {
- const profileLink = `/profile/1/desc/all?address=${sender}`;
+ const profileLink = `/profile/stakes?address=${sender}`;
 
  const transactionExplorerLink = useMemo(() => {
  return getTxnExplorerLink(transactionHash ?? "");

web/src/components/EvidenceCard.tsx

@@ -49,8 +49,8 @@ const JurorLink: React.FC<IJurorLink> = ({ address, isInternalLink = true }) =>
  const { isConnected, address: connectedAddress } = useAccount();
  const profileLink =
  isConnected && connectedAddress?.toLowerCase() === address.toLowerCase()
- ? "/profile/1/desc/all"
- : `/profile/1/desc/all?address=${address}`;
+ ? "/profile"
+ : `/profile/stakes?address=${address}`;
  const addressExplorerLink = useMemo(() => {
  return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/address/${address}`;
  }, [address]);

web/src/components/JurorLink.tsx

@@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import Coherence from "pages/Profile/JurorInfo/BottomContent/Coherence";
-import PixelArt from "pages/Profile/JurorInfo/BottomContent/PixelArt";
+import Coherence from "pages/Profile/JurorCard/BottomContent/Coherence";
+import PixelArt from "pages/Profile/JurorCard/BottomContent/PixelArt";
 
 import Template from "./MainStructureTemplate";
 import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";

web/src/components/Popup/MiniGuides/JurorLevels.tsx

@@ -52,7 +52,7 @@ const WalletAndProfile: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
  <IdenticonOrAvatar />
  <AddressOrName />
  </AvatarAndAddressContainer>
- <ReStyledArrowLink to={"/profile/1/desc/all"} onClick={toggleIsSettingsOpen}>
+ <ReStyledArrowLink to={"/profile"} onClick={toggleIsSettingsOpen}>
  My Profile <ArrowIcon />
  </ReStyledArrowLink>
  </Container>

web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx

@@ -86,7 +86,7 @@ const AccordionTitle: React.FC<{
  commited: boolean;
  hiddenVotes: boolean;
 }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
- const profileLink = `/profile/1/desc/all?address=${juror}`;
+ const profileLink = `/profile/stakes?address=${juror}`;
 
  return (
  <TitleContainer>

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -6,7 +6,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { getUserLevelData } from "utils/userLevelCalculation";
 import { getCoherencePercent } from "utils/getCoherencePercent";
 
-import PixelArt from "pages/Profile/JurorInfo/BottomContent/PixelArt";
+import PixelArt from "pages/Profile/JurorCard/BottomContent/PixelArt";
 
 const Container = styled.div`
  display: flex;

web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -55,7 +55,7 @@ const Jurors: React.FC = () => {
  <Header>
  <StyledTitle>Jurors Leaderboard</StyledTitle>
  {isConnected ? (
- <StyledArrowLink to="/profile/1/desc/all">
+ <StyledArrowLink to="/profile">
  My Profile <ArrowIcon />
  </StyledArrowLink>
  ) : null}

web/src/pages/Jurors/index.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+
+import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
+
+import { isUndefined } from "utils/index";
+import { decodeURIFilter, useRootPath } from "utils/uri";
+
+import { DisputeDetailsFragment, OrderDirection } from "src/graphql/graphql";
+import { useMyCasesQuery } from "queries/useCasesQuery";
+import { useUserQuery } from "queries/useUser";
+import CasesDisplay from "components/CasesDisplay";
+
+const StyledCasesDisplay = styled(CasesDisplay)`
+ margin-top: ${responsiveSize(24, 32)};
+
+ .title {
+ margin-bottom: ${responsiveSize(12, 24)};
+ }
+`;
+
+interface ICases {
+ addressToQuery: `0x${string}`;
+}
+
+const Cases: React.FC<ICases> = ({ addressToQuery }) => {
+ const { page, order, filter } = useParams();
+ const [searchParams] = useSearchParams();
+ const location = useRootPath();
+ const navigate = useNavigate();
+
+ const casesPerPage = 3;
+ const pageNumber = parseInt(page ?? "1");
+ const disputeSkip = casesPerPage * (pageNumber - 1);
+ const decodedFilter = decodeURIFilter(filter ?? "all");
+ const { data: disputesData } = useMyCasesQuery(
+ addressToQuery,
+ disputeSkip,
+ decodedFilter,
+ order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
+ );
+
+ const { data: userData } = useUserQuery(addressToQuery, decodedFilter);
+ const totalCases = userData?.user?.disputes.length;
+ const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes);
+ const totalPages = useMemo(
+ () => (!isUndefined(totalCases) ? Math.ceil(totalCases / casesPerPage) : 1),
+ [totalCases, casesPerPage]
+ );
+
+ return (
+ <StyledCasesDisplay
+ title="Cases Drawn"
+ disputes={userData?.user !== null ? (disputesData?.user?.disputes as DisputeDetailsFragment[]) : []}
+ numberDisputes={totalCases}
+ numberClosedDisputes={totalResolvedCases}
+ totalPages={totalPages}
+ currentPage={pageNumber}
+ setCurrentPage={(newPage: number) =>
+ navigate(`${location}/${newPage}/${order}/${filter}?${searchParams.toString()}`)
+ }
+ {...{ casesPerPage }}
+ />
+ );
+};
+
+export default Cases;