feat: add new section latest stakes in this court, substitute the profile page too

Author: kemuru

web/src/hooks/useStakingEventsByCourt.ts

@@ -0,0 +1,74 @@
+import { useQuery } from "@tanstack/react-query";
+import { request } from "graphql-request";
+
+import { isUndefined } from "src/utils";
+
+export type StakingEventItem = {
+  id: string;
+  blockHash: string;
+  transactionHash: string;
+  blockTimestamp: string;
+  network: {
+    chainId: number;
+  };
+  args: {
+    _address: string;
+    _courtID: string;
+    _amount: string;
+  };
+};
+
+type StakingEventsResponse = {
+  userStakingEvents: {
+    items: Array<{ item: StakingEventItem }>;
+    count: number;
+  };
+};
+
+const atlasUri = import.meta.env.REACT_APP_ATLAS_URI;
+
+export const useStakingEventsByCourt = (courtIds: number[], skip: number, take: number, partialAddress?: string) => {
+  const addressParam = partialAddress ?? "";
+  // Allow empty courtIds array for "all courts" query
+  const isEnabled = !isUndefined(atlasUri);
+
+  const query = `
+    query GetStakingEvents($partialAddress: String!, $courtIDs: [Int!], $pagination: PaginationArgs) {
+      userStakingEvents(partialAddress: $partialAddress, courtIDs: $courtIDs, pagination: $pagination) {
+        items {
+          item {
+            id
+            blockHash
+            transactionHash
+            blockTimestamp
+            network {
+              chainId
+            }
+            args {
+              _address
+              _courtID
+              _amount
+            }
+          }
+        }
+        count
+      }
+    }
+  `;
+
+  const variables = {
+    partialAddress: addressParam,
+    // If courtIds is empty, pass null to query all courts
+    courtIDs: courtIds.length > 0 ? courtIds : null,
+    pagination: { skip, take },
+  };
+
+  return useQuery<StakingEventsResponse>({
+    queryKey: ["stakingEventsByCourt", courtIds, skip, take, partialAddress],
+    enabled: isEnabled,
+    staleTime: 60000,
+    queryFn: async () => {
+      return await request<StakingEventsResponse>(`${atlasUri}/graphql`, query, variables);
+    },
+  });
+};

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/DisplayJurors/Header.tsx

@@ -10,7 +10,7 @@ const Container = styled.div`
   border: 1px solid ${({ theme }) => theme.stroke};
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  padding: 18px 24px;
+  padding: 16px 20px;
   justify-content: space-between;
   margin-top: ${responsiveSize(12, 16)};
 `;

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/DisplayJurors/JurorCard.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
   border: 1px solid ${({ theme }) => theme.stroke};
   border-top: none;
   align-items: center;
-  padding: 18px 24px;
+  padding: 16px 20px;
 
   :hover {
     background-color: ${({ theme }) => theme.lightGrey}BB;

web/src/pages/Courts/CourtDetails/JurorsStakedByCourt/index.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import styled from "styled-components";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { getDescriptiveCourtName } from "utils/getDescriptiveCourtName";
 
-import Search from "./Search";
+import { responsiveSize } from "styles/responsiveSize";
+
 import DisplayJurors from "./DisplayJurors";
+import Search from "./Search";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(28, 48)};
   max-width: 578px;
 `;
 

web/src/pages/Courts/CourtDetails/LatestStakesByCourt/DisplayStakes/Header.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { DesktopHeader } from "./Header/DesktopHeader";
+
+const Header: React.FC = () => {
+  return <DesktopHeader />;
+};
+
+export default Header;

web/src/pages/Courts/CourtDetails/LatestStakesByCourt/DisplayStakes/Header/DesktopHeader.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled.div`
+  display: none;
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBlue};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 16px 20px;
+  margin-top: ${responsiveSize(12, 16)};
+  gap: 12px;
+
+  ${landscapeStyle(
+    () => css`
+      display: flex;
+    `
+  )}
+`;
+
+const StyledLabel = styled.label`
+  font-size: 14px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+const JurorLabel = styled(StyledLabel)`
+  flex: 1;
+  min-width: 150px;
+  text-align: left;
+`;
+
+const StakeLabel = styled(StyledLabel)`
+  width: 90px;
+  text-align: right;
+  flex-shrink: 0;
+`;
+
+const CourtLabelContainer = styled.div`
+  width: 110px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+const CourtLabel = styled(StyledLabel)`
+  text-align: right;
+`;
+
+const DateLabel = styled(StyledLabel)`
+  width: 120px;
+  text-align: right;
+  flex-shrink: 0;
+`;
+
+const courtTooltipMsg =
+  "When you are staked in a subcourt you are staked in its parent courts too. eg. Staking in the Non Technical court automatically stake in its parents: Blockchain, and General Court.";
+
+export const DesktopHeader: React.FC = () => {
+  return (
+    <Container>
+      <JurorLabel>Juror</JurorLabel>
+      <StakeLabel>PNK Staked</StakeLabel>
+      <CourtLabelContainer>
+        <WithHelpTooltip place="top" tooltipMsg={courtTooltipMsg}>
+          <CourtLabel>Court</CourtLabel>
+        </WithHelpTooltip>
+      </CourtLabelContainer>
+      <DateLabel>Date</DateLabel>
+    </Container>
+  );
+};

web/src/pages/Courts/CourtDetails/LatestStakesByCourt/DisplayStakes/Header/MobileHeader.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBlue};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 16px;
+  margin-top: ${responsiveSize(12, 16)};
+
+  ${landscapeStyle(
+    () => css`
+      display: none;
+    `
+  )}
+`;
+
+const StyledLabel = styled.label`
+  font-size: 14px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+export const MobileHeader: React.FC = () => {
+  return (
+    <Container>
+      <StyledLabel>Latest Stakes</StyledLabel>
+    </Container>
+  );
+};

web/src/pages/Courts/CourtDetails/LatestStakesByCourt/DisplayStakes/StakeEventCard.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import DesktopCard from "./StakeEventCard/DesktopCard";
+import MobileCard from "./StakeEventCard/MobileCard";
+
+interface IStakeEventCard {
+  address: string;
+  stake: string;
+  timestamp: string;
+  transactionHash: string;
+  courtName: string;
+  courtId: number;
+  currentCourtId?: number;
+}
+
+const StakeEventCard: React.FC<IStakeEventCard> = ({
+  address,
+  stake,
+  timestamp,
+  transactionHash,
+  courtName,
+  courtId,
+  currentCourtId,
+}) => {
+  const allProps = { address, stake, timestamp, transactionHash, courtName, courtId, currentCourtId };
+
+  return (
+    <>
+      <MobileCard {...allProps} />
+      <DesktopCard {...allProps} />
+    </>
+  );
+};
+
+export default StakeEventCard;