feat: build vote cards and stylings

Author: kemuru

web/src/components/DisputeView/PeriodBanner.tsx

@@ -58,13 +58,14 @@ const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard
  `
  : null}
 `;
+
 export interface IPeriodBanner {
  id: number;
  period: Periods;
  isCard?: boolean;
 }
 
-const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
+export const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
  switch (period) {
  case Periods.appeal:
  return [theme.tint, theme.tintMedium];

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

@@ -19,29 +19,33 @@ const Container = styled.div`
 
 const NoCurrentStakesLabel = styled.label`
  font-size: ${responsiveSize(14, 16)};
- margin-bottom: 12px;
 `;
 
 interface ICurrentStakes {
  totalStake: string;
  lockedStake: string;
  currentStakeData: JurorStakeDetailsQuery | undefined;
- isLoading: boolean;
+ isCurrentStakeLoading: boolean;
 }
 
-const CurrentStakes: React.FC<ICurrentStakes> = ({ totalStake, lockedStake, currentStakeData, isLoading }) => {
+const CurrentStakes: React.FC<ICurrentStakes> = ({
+ totalStake,
+ lockedStake,
+ currentStakeData,
+ isCurrentStakeLoading,
+}) => {
  const stakedCourts = currentStakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
  const isStaked = stakedCourts && stakedCourts.length > 0;
 
  return (
  <Container>
  <Header {...{ totalStake, lockedStake }} />
- {!isStaked && !isLoading ? (
+ {!isStaked && !isCurrentStakeLoading ? (
  <NoCurrentStakesLabel>No stakes found</NoCurrentStakesLabel>
- ) : isLoading ? (
+ ) : isCurrentStakeLoading ? (
  <Skeleton />
  ) : null}
- {isStaked && !isLoading ? (
+ {isStaked && !isCurrentStakeLoading ? (
  <CourtCardsContainer>
  {currentStakeData?.jurorTokensPerCourts
  ?.filter(({ staked }) => staked > 0)

web/src/pages/Profile/Stakes/StakingHistory.tsx

@@ -27,6 +27,10 @@ const StyledTitle = styled.h1`
  margin-bottom: 20px;
 `;
 
+const NoHistoryLabel = styled.label`
+ font-size: ${responsiveSize(14, 16)};
+`;
+
 interface IStakingHistory {
  searchParamAddress: `0x${string}`;
  totalNumberStakingEvents: number;
@@ -38,7 +42,6 @@ const StakingHistory: React.FC<IStakingHistory> = ({ searchParamAddress, totalNu
  const eventsPerPage = 10;
  const currentPage = parseInt(page ?? "1");
  const skip = (currentPage - 1) * eventsPerPage;
-
  const { data: stakingHistoryData, isLoading: isLoadingStakingHistory } = useStakingHistory(eventsPerPage, skip);
  const { data: courtTreeData, isLoading: isLoadingCourtTree } = useCourtTree();
  const stakingEvents = stakingHistoryData?.data?.userStakingEvents?.edges ?? [];
@@ -52,7 +55,9 @@ const StakingHistory: React.FC<IStakingHistory> = ({ searchParamAddress, totalNu
  <Container>
  <StyledTitle>Staking History</StyledTitle>
  <CourtCardsContainer>
- {isLoadingStakingHistory || isLoadingCourtTree ? (
+ {!isLoadingStakingHistory && totalNumberStakingEvents === 0 ? (
+ <NoHistoryLabel>No history found</NoHistoryLabel>
+ ) : isLoadingStakingHistory || isLoadingCourtTree ? (
  Array.from({ length: 10 }).map((_, index) => <Skeleton height={64} key={index} />)
  ) : (
  <>

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

@@ -36,15 +36,15 @@ interface IStakes {
 }
 
 const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => {
- const { data: currentStakeData, isLoading } = useJurorStakeDetailsQuery(searchParamAddress);
+ const { data: currentStakeData, isLoading: isCurrentStakeLoading } = useJurorStakeDetailsQuery(searchParamAddress);
  const { data: stakingHistoryData } = useStakingHistory(1, 0);
  const totalStake = currentStakeData?.jurorTokensPerCourts?.[0]?.effectiveStake ?? "0";
  const lockedStake = currentStakeData?.jurorTokensPerCourts?.[0]?.locked ?? "0";
  const totalNumberStakingEvents = stakingHistoryData?.data?.userStakingEvents?.count ?? 0;
 
  return (
  <Container>
- <CurrentStakes {...{ totalStake, lockedStake, currentStakeData, isLoading }} />
+ <CurrentStakes {...{ totalStake, lockedStake, currentStakeData, isCurrentStakeLoading }} />
  <StakingHistory {...{ searchParamAddress, totalNumberStakingEvents }} />
  </Container>
  );

web/src/pages/Profile/Votes/StatsAndFilters/index.tsx

@@ -10,7 +10,7 @@ const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
- margin-bottom: ${responsiveSize(16, 32)};
+ margin-bottom: ${responsiveSize(4, 12)};
  justify-content: space-between;
 `;
 

web/src/pages/Profile/Votes/VoteCard/CaseNumber.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { InternalLink } from "components/InternalLink";
+
+const Container = styled.div`
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ gap: 8px 16px;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ small {
+ height: 100%;
+ font-weight: 600;
+ }
+
+ ${landscapeStyle(
+ () => css`
+ justify-content: flex-start;
+ width: auto;
+ `
+ )}
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+ font-weight: 600;
+`;
+
+interface ICaseNumber {
+ id: string;
+}
+
+const CaseNumber: React.FC<ICaseNumber> = ({ id }) => {
+ return (
+ <Container>
+ <StyledInternalLink to={`/cases/${id?.toString()}`}>Case {id}</StyledInternalLink>
+ </Container>
+ );
+};
+export default CaseNumber;

web/src/pages/Profile/Votes/VoteCard/CaseStatus.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import styled, { css, useTheme } from "styled-components";
+
+import { Periods } from "consts/periods";
+
+import { getPeriodColors } from "components/DisputeView/PeriodBanner";
+
+interface ICaseStatus {}
+
+const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean }>`
+ display: flex;
+ align-items: center;
+ width: auto;
+ color: ${({ frontColor }) => frontColor};
+ ${({ withDot, frontColor }) =>
+ withDot
+ ? css`
+ ::before {
+ content: "";
+ display: inline-block;
+ height: 8px;
+ width: 8px;
+ border-radius: 50%;
+ margin-right: 8px;
+ background-color: ${frontColor};
+ flex-shrink: 0;
+ }
+ `
+ : null}
+`;
+
+const getPeriodLabel = (period: Periods): string => {
+ switch (period) {
+ case Periods.evidence:
+ return "In Progress";
+ case Periods.commit:
+ return "In Progress";
+ case Periods.vote:
+ return "Voting";
+ case Periods.appeal:
+ return "Crowdfunding Appeal";
+ case Periods.execution:
+ return "Closed";
+ default:
+ return "In Progress";
+ }
+};
+
+const CaseStatus: React.FC<ICaseStatus> = ({}) => {
+ const theme = useTheme();
+ const [frontColor, backgroundColor] = useMemo(
+ () => getPeriodColors(Periods.evidence, theme),
+ [theme, Periods.evidence]
+ );
+
+ return (
+ <StyledLabel frontColor={frontColor} withDot>
+ {getPeriodLabel(Periods.evidence)}
+ </StyledLabel>
+ );
+};
+export default CaseStatus;

web/src/pages/Profile/Votes/VoteCard/CourtName.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+const Container = styled.div`
+ display: flex;
+ width: 100%;
+ flex-direction: row;
+ gap: 8px 16px;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ small {
+ height: 100%;
+ font-weight: 400;
+ }
+
+ ${landscapeStyle(
+ () => css`
+ justify-content: flex-start;
+ width: auto;
+ `
+ )}
+`;
+
+interface ICourtName {
+ name: string;
+}
+
+const CourtName: React.FC<ICourtName> = ({ name }) => {
+ return (
+ <Container>
+ <small>{name}</small>
+ </Container>
+ );
+};
+export default CourtName;

web/src/pages/Profile/Votes/VoteCard/Round.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+
+import RoundIcon from "svgs/icons/round.svg";
+
+const Container = styled.div`
+ display: flex;
+ gap: 8px;
+
+ small {
+ font-weight: 400;
+ }
+`;
+
+interface IRound {
+ number: string;
+}
+
+const Round: React.FC<IRound> = ({ number }) => {
+ return (
+ <Container>
+ <RoundIcon />
+ <small>Round {number}</small>
+ </Container>
+ );
+};
+export default Round;

web/src/pages/Profile/Votes/VoteCard/Vote.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+
+import VotedIcon from "svgs/icons/voted-ballot.svg";
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+
+ small {
+ font-weight: 400;
+ }
+`;
+
+const StyledVotedIcon = styled(VotedIcon)`
+ path {
+ fill: ${({ theme }) => theme.primaryBlue};
+ }
+`;
+
+const BlueSmall = styled.small`
+ color: ${({ theme }) => theme.primaryBlue};
+`;
+
+interface IVote {
+ choice: string;
+}
+
+const Vote: React.FC<IVote> = ({ choice }) => {
+ return (
+ <Container>
+ <StyledVotedIcon />
+ <BlueSmall>Vote: </BlueSmall>
+ <small>{choice}</small>
+ </Container>
+ );
+};
+export default Vote;