Skip to content

Chore/court stats no accordion #1796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

Chore/court stats no accordion #1796

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6526305
Merge pull request #1422 from kleros/dev
jaybuidl Jan 19, 2024
e9331db
Merge branch 'dev'
jaybuidl Jan 19, 2024
3cbbc40
Merge branch 'dev'
jaybuidl Nov 6, 2024
0b1d63e
Merge branch 'dev'
jaybuidl Nov 6, 2024
ba231ff
Merge branch 'dev'
jaybuidl Nov 7, 2024
fecd72c
Merge branch 'dev'
jaybuidl Nov 7, 2024
87e62e1
Merge remote-tracking branch 'origin/master' into dev
jaybuidl Dec 16, 2024
9a66048
chore: ux experiment, court stats without accordion
jaybuidl Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
203 changes: 95 additions & 108 deletions web/src/pages/Courts/CourtDetails/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,52 @@
import React from "react";
import styled, { css } from "styled-components";
import { responsiveSize } from "styles/responsiveSize";
import { landscapeStyle } from "styles/landscapeStyle";

import { useParams } from "react-router-dom";
import { Accordion } from "@kleros/ui-components-library";

import EthereumIcon from "svgs/icons/ethereum.svg";
import ChartIcon from "svgs/icons/chart.svg";
import EthereumVoteIcon from "svgs/icons/ethereum-vote.svg";
import BalanceIcon from "svgs/icons/law-balance.svg";
import EthereumIcon from "svgs/icons/ethereum.svg";
import BalanceWithHourglassIcon from "svgs/icons/law-balance-hourglass.svg";
import JurorIcon from "svgs/icons/user.svg";
import BalanceIcon from "svgs/icons/law-balance.svg";
import MinStake from "svgs/icons/min-stake.svg";
import PNKIcon from "svgs/icons/pnk.svg";
import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
import JurorIcon from "svgs/icons/user.svg";
import VoteStake from "svgs/icons/vote-stake.svg";
import ChartIcon from "svgs/icons/chart.svg";

import { CoinIds } from "consts/coingecko";

import { useCoinPrice } from "hooks/useCoinPrice";
import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";

import { calculateSubtextRender } from "utils/calculateSubtextRender";
import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format";
import { isUndefined } from "utils/index";

import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";

import { responsiveSize } from "styles/responsiveSize";

import { Divider } from "components/Divider";
import StatDisplay, { IStatDisplay } from "components/StatDisplay";
import { StyledSkeleton } from "components/StyledSkeleton";

const StyledAccordion = styled(Accordion)`
> * > button {
justify-content: unset;
background-color: ${({ theme }) => theme.whiteBackground} !important;
border: 1px solid ${({ theme }) => theme.stroke} !important;
> svg {
fill: ${({ theme }) => theme.primaryText} !important;
}
> p {
color: ${({ theme }) => theme.primaryText};
}
}
//adds padding to body container
> * > div > div {
padding: 0;
}
[class*="accordion-item"] {
margin: 0;
}
const Container = styled.div`
display: flex;
flex-direction: column;
background-color: ${({ theme }) => theme.lightBlue};
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
border: 1px solid ${({ theme }) => theme.mediumBlue};
justify-content: center;
`;

const Title = styled.p`
margin: 0;
font-weight: 600;
`;

${landscapeStyle(
() => css`
> * > div > div {
padding: 0 24px;
}
`
)}
const StyledDivider = styled(Divider)`
background-color: ${({ theme }) => theme.mediumBlue};
margin: 12px 0 8px 0;
`;

const TimeDisplayContainer = styled.div`
Expand Down Expand Up @@ -199,78 +190,74 @@ const Stats = () => {
const { prices: pricesData } = useCoinPrice(coinIds);

return (
<StyledAccordion
defaultExpanded={0}
items={[
{
title: "Statistics",
body: (
<AccordionContainer>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Parameters</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(0, 3).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
</div>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Activity</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(3, 7).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
</div>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Total Rewards</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(7, 9).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
</div>
</AccordionContainer>
),
},
]}
></StyledAccordion>
<Container>
{/* <Title>Statistics</Title>
<StyledDivider /> */}
<AccordionContainer>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Parameters</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(0, 3).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
<StyledDivider />
</div>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Activity</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(3, 7).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
<StyledDivider />
</div>
<div>
<AllTimeContainer>
<StyledChartIcon />
<StyledAllTimeText>Total Rewards</StyledAllTimeText>
</AllTimeContainer>
<StyledCard>
{stats.slice(7, 9).map(({ title, coinId, getText, getSubtext, color, icon }) => {
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
return (
<StatDisplay
key={title}
{...{ title, color, icon }}
text={data ? getText(data.court) : <StyledSkeleton />}
subtext={calculateSubtextRender(data?.court, getSubtext, coinPrice)}
isSmallDisplay={true}
/>
);
})}
</StyledCard>
</div>
</AccordionContainer>
</Container>
);
};

Expand Down
Loading