feat: test in staging atlas, votes tab setup, pagination setup, stylings, staking history

Author: kemuru

web/src/components/EvidenceCard.tsx

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

web/src/components/JurorLink.tsx

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

web/src/hooks/queries/useStakingHistory.ts

@@ -0,0 +1,62 @@
+import { useQuery } from "@tanstack/react-query";
+
+// dynamic atlasUri would go here
+const atlasUri = "https://url.example/graphql";
+
+const AUTH_TOKEN = "Bearer tokenExampleGoesHere";
+
+export const useStakingHistory = (take: number, lastCursorId?: number) => {
+  const variables = {
+    pagination: { take, lastCursorId: lastCursorId ?? null },
+  };
+
+  return useQuery({
+    queryKey: ["stakingHistoryQuery", take, lastCursorId],
+    enabled: true,
+    staleTime: 60000,
+    queryFn: async () => {
+      console.log("Fetching with variables:", variables);
+
+      try {
+        const response = await fetch(atlasUri, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: AUTH_TOKEN,
+          },
+          body: JSON.stringify({
+            query: `
+              query GetStakingEvents($pagination: PaginationArgs) {
+                userStakingEvents(pagination: $pagination) {
+                  edges {
+                    node {
+                      name
+                      args
+                      blockTimestamp
+                      transactionHash
+                    }
+                    cursor
+                  }
+                  count
+                  hasNextPage
+                }
+              }
+            `,
+            variables,
+          }),
+        });
+
+        const result = await response.json();
+
+        if (!response.ok) {
+          throw new Error(`GraphQL error: ${JSON.stringify(result)}`);
+        }
+
+        return result;
+      } catch (error) {
+        console.error("GraphQL Fetch Error:", error);
+        throw error;
+      }
+    },
+  });
+};

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

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

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

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

web/src/pages/Jurors/index.tsx

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

web/src/pages/Profile/Stakes/CourtCard/CourtName.tsx

@@ -3,10 +3,6 @@ import styled, { css } from "styled-components";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import ArrowIcon from "svgs/icons/arrow.svg";
-
-import { StyledArrowLink } from "components/StyledArrowLink";
-
 const Container = styled.div`
   display: flex;
   width: 100%;
@@ -29,15 +25,6 @@ const Container = styled.div`
   )}
 `;
 
-const ReStyledArrowLink = styled(StyledArrowLink)`
-  font-size: 14px;
-
-  > svg {
-    height: 15px;
-    width: 15px;
-  }
-`;
-
 interface ICourtName {
   name: string;
   id: string;
@@ -47,9 +34,6 @@ const CourtName: React.FC<ICourtName> = ({ name, id }) => {
   return (
     <Container>
       <small>{name}</small>
-      <ReStyledArrowLink to={`/courts/${id?.toString()}`}>
-        Open Court <ArrowIcon />
-      </ReStyledArrowLink>
     </Container>
   );
 };

web/src/pages/Profile/Stakes/CourtCard/Stake.tsx

@@ -1,30 +1,10 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import { formatUnits } from "viem";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 import NumberDisplay from "components/NumberDisplay";
 
-import PnkIcon from "svgs/icons/pnk.svg";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  width: 100%;
-  justify-content: flex-start;
-  align-items: center;
-
-  ${landscapeStyle(
-    () => css`
-      width: auto;
-      gap: 12px;
-    `
-  )}
-`;
-
 const StyledLabel = styled.label`
   display: flex;
   font-weight: 600;
@@ -34,13 +14,6 @@ const StyledLabel = styled.label`
   gap: 4px;
 `;
 
-const StyledPnkIcon = styled(PnkIcon)`
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  fill: ${({ theme }) => theme.secondaryPurple};
-`;
-
 interface IStake {
   stake: string;
 }
@@ -49,12 +22,9 @@ const Stake: React.FC<IStake> = ({ stake }) => {
   const formattedStake = formatUnits(stake, 18);
 
   return (
-    <Container>
-      <StyledPnkIcon />
-      <StyledLabel>
-        <NumberDisplay value={formattedStake} unit="PNK" />
-      </StyledLabel>
-    </Container>
+    <StyledLabel>
+      <NumberDisplay value={formattedStake} unit="PNK" />
+    </StyledLabel>
   );
 };
 export default Stake;

web/src/pages/Profile/Stakes/CourtCard/index.tsx

@@ -1,22 +1,30 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+
 import { Card as _Card } from "@kleros/ui-components-library";
 
-import { landscapeStyle } from "styles/landscapeStyle";
+import ArrowIcon from "svgs/icons/arrow.svg";
+import NewTabIcon from "svgs/icons/new-tab.svg";
 
+import { formatDate } from "utils/date";
+import { getTxnExplorerLink } from "utils/index";
+
+import { StyledArrowLink } from "components/StyledArrowLink";
 import CourtName from "./CourtName";
 import Stake from "./Stake";
 
-const Container = styled(_Card)`
+const Container = styled(_Card)<{ isCurrentStakeCard?: boolean }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   height: auto;
   width: 100%;
   padding: 20px 16px 24px;
-  border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
+  border-left: 5px solid
+    ${({ theme, isCurrentStakeCard }) => (isCurrentStakeCard ? theme.secondaryPurple : theme.secondaryText)};
   flex-wrap: wrap;
   gap: 16px;
 
@@ -28,22 +36,76 @@ const Container = styled(_Card)`
 
   ${landscapeStyle(
     () => css`
-      padding: 21.5px 32px;
+      padding: 21.5px 28px;
     `
   )}
 `;
 
+const LeftContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16px 24px;
+`;
+
+const StakeAndLinkAndDateContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 16px;
+`;
+
+const StakeAndLink = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+
+const ReStyledArrowLink = styled(StyledArrowLink)`
+  font-size: 14px;
+
+  > svg {
+    height: 15px;
+    width: 15px;
+  }
+`;
+
 interface ICourtCard {
   name: string;
   stake: string;
   id: string;
+  timestamp?: number;
+  transactionHash?: string;
+  isCurrentStakeCard?: boolean;
 }
 
-const CourtCard: React.FC<ICourtCard> = ({ name, stake, id }) => {
+const CourtCard: React.FC<ICourtCard> = ({
+  name,
+  stake,
+  id,
+  timestamp,
+  transactionHash,
+  isCurrentStakeCard = true,
+}) => {
   return (
-    <Container hover>
-      <CourtName {...{ name, id }} />
-      <Stake {...{ stake }} />
+    <Container hover {...{ isCurrentStakeCard }}>
+      <LeftContent>
+        <CourtName {...{ name, id }} />
+        <StakeAndLinkAndDateContainer>
+          <StakeAndLink>
+            <Stake {...{ stake }} />
+            {transactionHash ? (
+              <ReStyledArrowLink to={getTxnExplorerLink(transactionHash)} target="_blank" rel="noopener noreferrer">
+                <NewTabIcon />
+              </ReStyledArrowLink>
+            ) : null}
+          </StakeAndLink>
+          {timestamp ? <label>{formatDate(timestamp)}</label> : null}
+        </StakeAndLinkAndDateContainer>
+      </LeftContent>
+      <ReStyledArrowLink to={`/courts/${id?.toString()}`}>
+        Open Court <ArrowIcon />
+      </ReStyledArrowLink>
     </Container>
   );
 };

web/src/pages/Profile/Stakes/Header.tsx renamed to web/src/pages/Profile/Stakes/CurrentStakes/Header.tsx

@@ -20,7 +20,7 @@ const Container = styled.div`
   width: 100%;
   gap: 4px 16px;
   align-items: center;
-  margin-bottom: ${responsiveSize(16, 24)};
+  margin-bottom: 20px;
 
   ${landscapeStyle(
     () => css`
@@ -74,7 +74,7 @@ const Header: React.FC<IHeader> = ({ totalStake, lockedStake }) => {
 
   return (
     <Container>
-      <StyledTitle>Stakes</StyledTitle>
+      <StyledTitle>Current Stakes</StyledTitle>
       <TotalStakeAndLockedPnk>
         {!isUndefined(totalStake) ? (
           <StakedPnk>

web/src/pages/Profile/Stakes/CurrentStakes/index.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import styled from "styled-components";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import Skeleton from "react-loading-skeleton";
+
+import { JurorStakeDetailsQuery } from "src/graphql/graphql";
+
+import Header from "./Header";
+import CourtCard from "../CourtCard";
+import { CourtCardsContainer } from "../index";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+`;
+
+const NoCurrentStakesLabel = styled.label`
+  font-size: ${responsiveSize(14, 16)};
+  margin-bottom: 12px;
+`;
+
+interface ICurrentStakes {
+  totalStake: string;
+  lockedStake: string;
+  currentStakeData: JurorStakeDetailsQuery | undefined;
+  isLoading: boolean;
+}
+
+const CurrentStakes: React.FC<ICurrentStakes> = ({ totalStake, lockedStake, currentStakeData, isLoading }) => {
+  const stakedCourts = currentStakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
+  const isStaked = stakedCourts && stakedCourts.length > 0;
+
+  return (
+    <Container>
+      <Header {...{ totalStake, lockedStake }} />
+      {!isStaked && !isLoading ? (
+        <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel>
+      ) : isLoading ? (
+        <Skeleton />
+      ) : null}
+      {isStaked && !isLoading ? (
+        <CourtCardsContainer>
+          {currentStakeData?.jurorTokensPerCourts
+            ?.filter(({ staked }) => staked > 0)
+            .map(({ court: { id, name }, staked }) => (
+              <CourtCard key={id} name={name ?? ""} stake={staked} {...{ id }} />
+            ))}
+        </CourtCardsContainer>
+      ) : null}
+    </Container>
+  );
+};
+export default CurrentStakes;