Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit ab392c8

Browse files
jaybuidljaybuidl
authoredDec 13, 2024··
Merge branch 'dev' into feat/chainlink-vrf-as-rng2
2 parents e317649 + 69ff44d commit ab392c8

File tree

28 files changed

+157
-117
lines changed

28 files changed

+157
-117
lines changed
 

‎web/src/assets/svgs/icons/ethereum-vote.svg

+3
Loading

‎web/src/assets/svgs/icons/law-balance-hourglass.svg

+3
Loading

‎web/src/components/DisputePreview/DisputeContext.tsx

+17-31
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,20 @@ import { StyledSkeleton } from "components/StyledSkeleton";
1414

1515
import AliasDisplay from "./Alias";
1616
import { Divider } from "../Divider";
17+
import { ExternalLink } from "../ExternalLink";
1718

1819
const StyledH1 = styled.h1`
1920
margin: 0;
2021
word-wrap: break-word;
2122
`;
2223

23-
const QuestionAndDescription = styled.div`
24-
display: flex;
25-
flex-direction: column;
26-
word-wrap: break-word;
27-
div:first-child p:first-of-type {
28-
font-size: 16px;
29-
font-weight: 400;
24+
const ReactMarkdownWrapper = styled.div`
25+
& p:first-of-type {
3026
margin: 0;
3127
}
3228
`;
3329

34-
const VotingOptions = styled(QuestionAndDescription)`
30+
const VotingOptions = styled.div`
3531
display: flex;
3632
flex-direction: column;
3733
gap: 8px;
@@ -51,19 +47,6 @@ const Answer = styled.div`
5147
display: flex;
5248
flex-wrap: wrap;
5349
gap: 6px;
54-
> label {
55-
max-width: 100%;
56-
}
57-
`;
58-
59-
const StyledSmall = styled.small`
60-
color: ${({ theme }) => theme.secondaryText};
61-
font-weight: 400;
62-
`;
63-
64-
const StyledLabel = styled.label`
65-
color: ${({ theme }) => theme.primaryText};
66-
font-weight: 600;
6750
`;
6851

6952
const AliasesContainer = styled.div`
@@ -83,26 +66,29 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
8366
<>
8467
<StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
8568
{!isUndefined(disputeDetails) && (
86-
<QuestionAndDescription>
87-
<ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
88-
<ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
89-
</QuestionAndDescription>
69+
<>
70+
<ReactMarkdownWrapper>
71+
<ReactMarkdown>{disputeDetails?.question}</ReactMarkdown>
72+
</ReactMarkdownWrapper>
73+
<ReactMarkdownWrapper>
74+
<ReactMarkdown>{disputeDetails?.description}</ReactMarkdown>
75+
</ReactMarkdownWrapper>
76+
</>
9077
)}
9178
{isUndefined(disputeDetails?.frontendUrl) ? null : (
92-
<a href={disputeDetails?.frontendUrl} target="_blank" rel="noreferrer">
79+
<ExternalLink href={disputeDetails?.frontendUrl} target="_blank" rel="noreferrer">
9380
Go to arbitrable
94-
</a>
81+
</ExternalLink>
9582
)}
9683
<VotingOptions>
9784
{isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
9885
<AnswersContainer>
9986
{disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
10087
<Answer key={answer.title}>
101-
<StyledSmall>{i + 1 + `.`}</StyledSmall>
102-
<StyledLabel>
103-
{answer.title}
88+
<small>
89+
<label>{i + 1}.</label> {answer.title}
10490
{answer.description.trim() ? ` - ${answer.description}` : null}
105-
</StyledLabel>
91+
</small>
10692
</Answer>
10793
))}
10894
</AnswersContainer>

‎web/src/components/ErrorFallback.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
33

4+
import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
5+
import { responsiveSize } from "styles/responsiveSize";
6+
47
import { FallbackProps } from "react-error-boundary";
58

69
import { Button } from "@kleros/ui-components-library";
710

811
import ErrorIcon from "svgs/icons/warning-outline.svg";
912

10-
import { landscapeStyle } from "styles/landscapeStyle";
11-
import { responsiveSize } from "styles/responsiveSize";
12-
1313
import HeroImage from "./HeroImage";
1414

1515
const Container = styled.div`
1616
width: 100%;
1717
height: 100vh;
1818
background-color: ${({ theme }) => theme.lightBackground};
1919
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
20-
max-width: 1780px;
20+
max-width: ${MAX_WIDTH_LANDSCAPE};
2121
margin: 0 auto;
2222
`;
2323

‎web/src/components/ExtraStatsDisplay.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from "styled-components";
33

44
import { StyledSkeleton } from "components/StyledSkeleton";
55
import { isUndefined } from "utils/index";
6+
import { InternalLink } from "./InternalLink";
67

78
const Container = styled.div`
89
display: flex;
@@ -30,10 +31,8 @@ const TextContainer = styled.div`
3031
justify-content: center;
3132
`;
3233

33-
const StyledP = styled.p`
34-
font-size: 14px;
34+
const StyledInternalLink = styled(InternalLink)`
3535
font-weight: 600;
36-
margin: 0;
3736
`;
3837

3938
const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
@@ -42,18 +41,25 @@ const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
4241

4342
export interface IExtraStatsDisplay {
4443
title: string;
44+
courtId?: string;
4545
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
4646
content?: React.ReactNode;
4747
text?: string;
4848
}
4949

50-
const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, content, icon: Icon, ...props }) => {
50+
const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, courtId, text, content, icon: Icon, ...props }) => {
5151
return (
5252
<Container {...props}>
5353
<SVGContainer>{<Icon />}</SVGContainer>
5454
<TextContainer>
5555
<label>{title}:</label>
56-
{content ? content : <StyledP>{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}</StyledP>}
56+
{content ? (
57+
content
58+
) : (
59+
<StyledInternalLink to={`/courts/${courtId?.toString()}`}>
60+
{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}
61+
</StyledInternalLink>
62+
)}
5763
</TextContainer>
5864
</Container>
5965
);

‎web/src/components/StyledIcons/ClosedCircleIcon.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import styled from "styled-components";
33
import ClosedCircle from "svgs/icons/close-circle.svg";
44

5-
const StyledClosedCircle = styled(ClosedCircle)`
5+
export const StyledClosedCircle = styled(ClosedCircle)`
66
path {
77
fill: ${({ theme }) => theme.error};
88
}
@@ -11,4 +11,5 @@ const StyledClosedCircle = styled(ClosedCircle)`
1111
const ClosedCircleIcon: React.FC = () => {
1212
return <StyledClosedCircle />;
1313
};
14+
1415
export default ClosedCircleIcon;

‎web/src/components/Verdict/DisputeTimeline.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { useMemo } from "react";
22
import styled, { useTheme } from "styled-components";
33

4+
import { responsiveSize } from "styles/responsiveSize";
5+
46
import { useParams } from "react-router-dom";
57

68
import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
79

810
import CalendarIcon from "svgs/icons/calendar.svg";
911
import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg";
10-
import AppealedCaseIcon from "svgs/icons/close-circle.svg";
1112

1213
import { Periods } from "consts/periods";
1314
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
@@ -19,7 +20,7 @@ import { useVotingHistory } from "queries/useVotingHistory";
1920

2021
import { ClassicRound } from "src/graphql/graphql";
2122

22-
import { responsiveSize } from "styles/responsiveSize";
23+
import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon";
2324

2425
const Container = styled.div`
2526
display: flex;
@@ -101,7 +102,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
101102
party: "",
102103
subtitle: formatDate(roundTimeline?.[Periods.appeal]),
103104
rightSided: true,
104-
Icon: AppealedCaseIcon,
105+
Icon: StyledClosedCircle,
105106
});
106107
} else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
107108
acc.push({

‎web/src/hooks/queries/usePopulatedDisputeData.ts

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disput
66
import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
77

88
import { useGraphqlBatcher } from "context/GraphqlBatcher";
9+
import { DEFAULT_CHAIN } from "consts/chains";
910
import { debounceErrorToast } from "utils/debounceErrorToast";
1011
import { isUndefined } from "utils/index";
1112

@@ -47,6 +48,7 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
4748
document: disputeTemplateQuery,
4849
variables: { id: disputeData.dispute?.templateId.toString() },
4950
isDisputeTemplate: true,
51+
chainId: DEFAULT_CHAIN,
5052
});
5153

5254
const templateData = disputeTemplate?.templateData;

‎web/src/layout/Header/DesktopHeader.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import Settings from "./navbar/Menu/Settings";
3434
const Container = styled.div`
3535
display: none;
3636
position: absolute;
37+
height: 64px;
3738
3839
${landscapeStyle(
3940
() => css`

‎web/src/layout/Header/Logo.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,19 @@ import styled, { Theme } from "styled-components";
33

44
import { Link } from "react-router-dom";
55

6-
import KlerosCourtLogo from "svgs/header/kleros-court.svg";
7-
86
import { ArbitratorTypes, getArbitratorType } from "consts/index";
7+
98
import { isUndefined } from "utils/index";
109

10+
import KlerosCourtLogo from "svgs/header/kleros-court.svg";
11+
1112
const Container = styled.div`
1213
display: flex;
1314
flex-direction: row;
1415
align-items: center;
1516
gap: 16px;
1617
`;
1718

18-
const StyledLink = styled(Link)`
19-
min-height: 48px;
20-
`;
21-
2219
const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>`
2320
transform: skewX(-15deg);
2421
background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]};
@@ -32,6 +29,9 @@ const BadgeText = styled.label`
3229
`;
3330

3431
const StyledKlerosCourtLogo = styled(KlerosCourtLogo)`
32+
max-height: 40px;
33+
width: auto;
34+
3535
&:hover {
3636
path {
3737
fill: ${({ theme }) => theme.white}BF;
@@ -61,9 +61,9 @@ const CourtBadge: React.FC = () => {
6161
const Logo: React.FC = () => (
6262
<Container>
6363
{" "}
64-
<StyledLink to={"/"}>
64+
<Link to={"/"}>
6565
<StyledKlerosCourtLogo />
66-
</StyledLink>
66+
</Link>
6767
<CourtBadge />
6868
</Container>
6969
);

‎web/src/layout/Header/MobileHeader.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Container = styled.div`
1717
align-items: center;
1818
justify-content: space-between;
1919
width: 100%;
20+
height: 64px;
2021
2122
${landscapeStyle(
2223
() => css`

‎web/src/layout/Header/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Container = styled.div`
1717

1818
const HeaderContainer = styled.div`
1919
width: 100%;
20-
padding: 8px 24px;
20+
padding: 0 24px;
2121
`;
2222

2323
const Header: React.FC = () => {

‎web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const EvidenceSearch: React.FC<IEvidenceSearch> = ({ search, setSearch, evidence
4848

4949
<SearchContainer>
5050
<StyledSearchBar
51-
placeholder="Search evidence by number, word, or submitter."
51+
placeholder="Search evidence by number, word, or submitter"
5252
onChange={(e) => setSearch(e.target.value)}
5353
value={search}
5454
/>

‎web/src/pages/Cases/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
34

45
import { Routes, Route } from "react-router-dom";
56

@@ -13,7 +14,7 @@ const Container = styled.div`
1314
width: 100%;
1415
background-color: ${({ theme }) => theme.lightBackground};
1516
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
16-
max-width: 1780px;
17+
max-width: ${MAX_WIDTH_LANDSCAPE};
1718
margin: 0 auto;
1819
`;
1920

‎web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Container = styled.div`
1414

1515
const PNKLogoAndTitle = styled.div`
1616
display: flex;
17-
gap: 0 16px;
17+
gap: 0 12px;
1818
align-items: center;
1919
`;
2020

‎web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

+19-16
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
useWritePnkIncreaseAllowance,
1717
} from "hooks/contracts/generated";
1818
import { useCourtDetails } from "hooks/queries/useCourtDetails";
19+
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
1920
import { usePnkData } from "hooks/usePNKData";
2021
import { formatETH } from "utils/format";
2122
import { isUndefined } from "utils/index";
@@ -55,6 +56,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
5556
const [isSuccess, setIsSuccess] = useState(false);
5657
const [popupStepsState, setPopupStepsState] = useState<Steps>();
5758
const controllerRef = useRef<AbortController | null>(null);
59+
useLockOverlayScroll(isPopupOpen);
5860

5961
const { data: courtDetails } = useCourtDetails(id);
6062
const { balance, jurorBalance, allowance, refetchAllowance } = usePnkData({ courtId: id });
@@ -83,7 +85,12 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
8385
error: allowanceError,
8486
} = useSimulatePnkIncreaseAllowance({
8587
query: {
86-
enabled: isAllowance && !isUndefined(targetStake) && !isUndefined(allowance) && !isUndefined(balance),
88+
enabled:
89+
isAllowance &&
90+
!isUndefined(targetStake) &&
91+
!isUndefined(allowance) &&
92+
!isUndefined(balance) &&
93+
parsedAmount <= balance,
8794
},
8895
args: [klerosCoreAddress[DEFAULT_CHAIN], BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)],
8996
});
@@ -103,7 +110,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
103110
parsedAmount !== 0n &&
104111
targetStake >= 0n &&
105112
!isAllowance &&
106-
(isStaking ? true : jurorBalance && parsedAmount <= jurorBalance[2]),
113+
Boolean(isStaking ? balance && parsedAmount <= balance : jurorBalance && parsedAmount <= jurorBalance[2]),
107114
},
108115
args: [BigInt(id ?? 0), targetStake],
109116
});
@@ -231,30 +238,26 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
231238

232239
useEffect(() => {
233240
if (isPopupOpen) return;
234-
if (setStakeError || allowanceError) {
235-
setErrorMsg(parseWagmiError(setStakeError || allowanceError));
236-
} else if (targetStake !== 0n && courtDetails && targetStake < BigInt(courtDetails.court?.minStake)) {
241+
if (
242+
action === ActionType.stake &&
243+
targetStake !== 0n &&
244+
courtDetails &&
245+
targetStake < BigInt(courtDetails.court?.minStake)
246+
) {
237247
setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`);
248+
} else if (setStakeError || allowanceError) {
249+
setErrorMsg(parseWagmiError(setStakeError || allowanceError));
238250
}
239-
}, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen]);
251+
}, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen, action]);
240252

241253
const isDisabled = useMemo(() => {
242-
if (
243-
parsedAmount == 0n ||
244-
isUndefined(targetStake) ||
245-
isUndefined(courtDetails) ||
246-
(targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake))
247-
)
248-
return true;
254+
if (parsedAmount == 0n) return true;
249255
if (isAllowance) {
250256
return isUndefined(increaseAllowanceConfig) || isSimulatingAllowance || !isUndefined(allowanceError);
251257
}
252-
253258
return isUndefined(setStakeConfig) || isSimulatingSetStake || !isUndefined(setStakeError);
254259
}, [
255260
parsedAmount,
256-
targetStake,
257-
courtDetails,
258261
increaseAllowanceConfig,
259262
isSimulatingAllowance,
260263
setStakeConfig,

‎web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
55

66
import Close from "svgs/icons/close.svg";
77

8-
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
98
import { useSortitionModulePhase } from "hooks/useSortitionModule";
109

1110
import { landscapeStyle } from "styles/landscapeStyle";
@@ -112,7 +111,6 @@ interface IStakeWithdrawPopup {
112111
}
113112

114113
const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup, steps, isSuccess, action }) => {
115-
useLockOverlayScroll(true);
116114
const { data: phase } = useSortitionModulePhase();
117115

118116
return (

‎web/src/pages/Courts/CourtDetails/StakePanel/index.tsx

+14-13
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,35 @@ const Container = styled.div`
1515
position: relative;
1616
display: flex;
1717
flex-direction: column;
18-
gap: 28px;
18+
gap: 16px;
1919
2020
${landscapeStyle(
2121
() => css`
22+
gap: 24px;
2223
flex-direction: column;
2324
`
2425
)};
2526
`;
2627

27-
const LeftArea = styled.div`
28+
const StakingArea = styled.div`
2829
display: flex;
2930
flex-direction: column;
31+
gap: 24px;
3032
`;
3133

3234
const TagArea = styled.div`
3335
display: flex;
3436
gap: 10px;
3537
`;
3638

37-
const StakeArea = styled(TagArea)`
38-
margin-top: 28px;
39-
flex-direction: column;
40-
`;
41-
4239
const TextArea = styled.div`
43-
margin-top: 32px;
4440
color: ${({ theme }) => theme.primaryText};
4541
`;
4642

43+
const InputArea = styled(TagArea)`
44+
flex-direction: column;
45+
`;
46+
4747
const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Court" }) => {
4848
const [amount, setAmount] = useState("");
4949
const [isActive, setIsActive] = useState<boolean>(true);
@@ -57,19 +57,20 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour
5757
const isStaking = action === ActionType.stake;
5858
return (
5959
<Container>
60-
<LeftArea>
60+
<StakingArea>
6161
<TagArea>
6262
<Tag text="Stake" active={isActive} onClick={() => handleClick(ActionType.stake)} />
6363
<Tag text="Withdraw" active={!isActive} onClick={() => handleClick(ActionType.withdraw)} />
6464
</TagArea>
6565
<TextArea>
6666
<strong>{`${isStaking ? "Stake" : "Withdraw"} PNK`}</strong> {`${isStaking ? "to join the" : "from"}`}{" "}
67-
{courtName} court
67+
{courtName}
68+
{courtName.toLowerCase().endsWith("court") || courtName.toLowerCase().startsWith("corte") ? null : " Court"}
6869
</TextArea>
69-
<StakeArea>
70+
<InputArea>
7071
<InputDisplay {...{ action, amount, setAmount }} />
71-
</StakeArea>
72-
</LeftArea>
72+
</InputArea>
73+
</StakingArea>
7374
<Simulator amountToStake={amount ? Number(uncommify(amount)) : 0} {...{ isStaking }} />
7475
</Container>
7576
);

‎web/src/pages/Courts/CourtDetails/Stats.tsx

+30-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
33
import { responsiveSize } from "styles/responsiveSize";
4+
import { landscapeStyle } from "styles/landscapeStyle";
45

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

89
import EthereumIcon from "svgs/icons/ethereum.svg";
10+
import EthereumVoteIcon from "svgs/icons/ethereum-vote.svg";
911
import BalanceIcon from "svgs/icons/law-balance.svg";
12+
import BalanceWithHourglassIcon from "svgs/icons/law-balance-hourglass.svg";
13+
import JurorIcon from "svgs/icons/user.svg";
1014
import MinStake from "svgs/icons/min-stake.svg";
1115
import PNKIcon from "svgs/icons/pnk.svg";
1216
import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
@@ -39,11 +43,19 @@ const StyledAccordion = styled(Accordion)`
3943
}
4044
//adds padding to body container
4145
> * > div > div {
42-
padding: 0 24px;
46+
padding: 0;
4347
}
4448
[class*="accordion-item"] {
4549
margin: 0;
4650
}
51+
52+
${landscapeStyle(
53+
() => css`
54+
> * > div > div {
55+
padding: 0 24px;
56+
}
57+
`
58+
)}
4759
`;
4860

4961
const TimeDisplayContainer = styled.div`
@@ -61,7 +73,6 @@ const StyledAllTimeText = styled.p`
6173
color: ${({ theme }) => theme.primaryText};
6274
margin: 0;
6375
font-size: 14px;
64-
font-weight: 600;
6576
`;
6677

6778
const StyledChartIcon = styled(ChartIcon)`
@@ -70,6 +81,18 @@ const StyledChartIcon = styled(ChartIcon)`
7081
}
7182
`;
7283

84+
const StyledEthereumVoteIcon = styled(EthereumVoteIcon)`
85+
height: 32px !important;
86+
`;
87+
88+
const StyledJurorIcon = styled(JurorIcon)`
89+
height: 15px !important;
90+
`;
91+
92+
const StyledBalanceWithHourglassIcon = styled(BalanceWithHourglassIcon)`
93+
height: 32px !important;
94+
`;
95+
7396
const AccordionContainer = styled.div`
7497
display: flex;
7598
flex-direction: column;
@@ -123,7 +146,7 @@ const stats: IStat[] = [
123146
},
124147
getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.feeForJuror)) * (coinPrice ?? 0)),
125148
color: "blue",
126-
icon: EthereumIcon,
149+
icon: StyledEthereumVoteIcon,
127150
},
128151
{
129152
title: "PNK Staked",
@@ -137,7 +160,7 @@ const stats: IStat[] = [
137160
title: "Active Jurors",
138161
getText: (data) => data?.numberStakedJurors,
139162
color: "green",
140-
icon: PNKRedistributedIcon,
163+
icon: StyledJurorIcon,
141164
},
142165
{
143166
title: "Cases",
@@ -149,10 +172,10 @@ const stats: IStat[] = [
149172
title: "In Progress",
150173
getText: (data) => data?.numberDisputes - data?.numberClosedDisputes,
151174
color: "green",
152-
icon: BalanceIcon,
175+
icon: StyledBalanceWithHourglassIcon,
153176
},
154177
{
155-
title: "Total ETH paid",
178+
title: "ETH paid",
156179
coinId: 1,
157180
getText: (data) => `${formatETH(data?.paidETH)} ETH`,
158181
getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)),

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const CourtHeader = styled.h1`
3232
display: flex;
3333
flex-direction: row;
3434
justify-content: space-between;
35-
gap: 24px;
35+
gap: 8px;
3636
flex-wrap: wrap;
3737
margin-bottom: 16px;
3838
`;
@@ -77,14 +77,13 @@ const StakePanelAndStats = styled.div`
7777
flex-direction: row;
7878
justify-content: space-between;
7979
margin-top: 24px;
80-
gap: 20px;
80+
gap: 16px;
8181
flex-wrap: wrap;
8282
8383
${landscapeStyle(
8484
() => css`
8585
& > * {
86-
flex: 1 1 calc(50% - 10px);
87-
max-width: calc(50% - 10px);
86+
flex: 1 1 calc(50% - 8px);
8887
}
8988
`
9089
)}

‎web/src/pages/Courts/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
import { Routes, Route, Navigate } from "react-router-dom";
5-
64
import { responsiveSize } from "styles/responsiveSize";
5+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
6+
7+
import { Routes, Route, Navigate } from "react-router-dom";
78

89
import CourtDetails from "./CourtDetails";
910
import TopSearch from "./TopSearch";
@@ -12,7 +13,7 @@ const Container = styled.div`
1213
width: 100%;
1314
background-color: ${({ theme }) => theme.lightBackground};
1415
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
15-
max-width: 1780px;
16+
max-width: ${MAX_WIDTH_LANDSCAPE};
1617
margin: 0 auto;
1718
`;
1819

‎web/src/pages/Dashboard/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { useMemo } from "react";
22
import styled from "styled-components";
33

4+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
5+
import { responsiveSize } from "styles/responsiveSize";
6+
47
import { useNavigate, useParams } from "react-router-dom";
58
import { useAccount } from "wagmi";
69

@@ -12,8 +15,6 @@ import { useUserQuery } from "queries/useUser";
1215

1316
import { OrderDirection } from "src/graphql/graphql";
1417

15-
import { responsiveSize } from "styles/responsiveSize";
16-
1718
import CasesDisplay from "components/CasesDisplay";
1819
import ConnectWallet from "components/ConnectWallet";
1920
import ScrollTop from "components/ScrollTop";
@@ -25,7 +26,7 @@ const Container = styled.div`
2526
width: 100%;
2627
background-color: ${({ theme }) => theme.lightBackground};
2728
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
28-
max-width: 1780px;
29+
max-width: ${MAX_WIDTH_LANDSCAPE};
2930
margin: 0 auto;
3031
`;
3132

‎web/src/pages/GetPnk/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
import { isProductionDeployment } from "consts/index";
5-
4+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
65
import { responsiveSize } from "styles/responsiveSize";
76

7+
import { isProductionDeployment } from "consts/index";
8+
89
import ClaimPnkButton from "components/ClaimPnkButton";
910
import HeroImage from "components/HeroImage";
1011
import ScrollTop from "components/ScrollTop";
@@ -19,7 +20,7 @@ const Container = styled.div`
1920
width: 100%;
2021
background-color: ${({ theme }) => theme.lightBackground};
2122
padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
22-
max-width: 1780px;
23+
max-width: ${MAX_WIDTH_LANDSCAPE};
2324
margin: 0 auto;
2425
display: flex;
2526
flex-direction: column;

‎web/src/pages/Home/CourtOverview/ExtraStats.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,27 @@ const StyledLabel = styled.label`
2626
interface IStat {
2727
title: string;
2828
getText: (data) => string;
29+
getCourtId: (data) => string;
2930
icon: React.FC<React.SVGAttributes<SVGElement>>;
3031
}
3132

3233
const stats: IStat[] = [
3334
{
3435
title: "Most Cases",
3536
getText: ({ data }) => data?.mostDisputedCourt?.name,
37+
getCourtId: ({ data }) => data?.mostDisputedCourt?.id,
3638
icon: LongArrowUp,
3739
},
3840
{
3941
title: "Highest drawing chance",
4042
getText: ({ data }) => data?.bestDrawingChancesCourt?.name,
43+
getCourtId: ({ data }) => data?.bestDrawingChancesCourt?.id,
4144
icon: LongArrowUp,
4245
},
4346
{
4447
title: "Highest rewards chance",
4548
getText: ({ data }) => data?.bestExpectedRewardCourt?.name,
49+
getCourtId: ({ data }) => data?.bestExpectedRewardCourt?.id,
4650
icon: LongArrowUp,
4751
},
4852
];
@@ -83,8 +87,8 @@ const ExtraStats = () => {
8387
{data.data?.mostDisputedCourt?.numberDisputes === 0 ? (
8488
<StyledLabel>No activity in this period</StyledLabel>
8589
) : (
86-
stats.map(({ title, getText, icon }) => (
87-
<ExtraStatsDisplay key={title} {...{ title, icon }} text={getText(data)} />
90+
stats.map(({ title, getCourtId, getText, icon }) => (
91+
<ExtraStatsDisplay key={title} courtId={getCourtId(data)} {...{ title, icon }} text={getText(data)} />
8892
))
8993
)}
9094
</StyledCard>

‎web/src/pages/Home/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from "react";
22
import styled from "styled-components";
33

4+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
5+
import { responsiveSize } from "styles/responsiveSize";
6+
47
import { HomePageProvider } from "hooks/useHomePageContext";
58
import { getOneYearAgoTimestamp } from "utils/date";
69

7-
import { responsiveSize } from "styles/responsiveSize";
8-
910
import HeroImage from "components/HeroImage";
1011
import LatestCases from "components/LatestCases";
1112
import ScrollTop from "components/ScrollTop";
@@ -22,7 +23,7 @@ const Container = styled.div`
2223
width: 100%;
2324
background-color: ${({ theme }) => theme.lightBackground};
2425
padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
25-
max-width: 1780px;
26+
max-width: ${MAX_WIDTH_LANDSCAPE};
2627
margin: 0 auto;
2728
`;
2829

‎web/src/pages/Resolver/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
55
import { useToggle } from "react-use";
66
import { useAccount } from "wagmi";
77

8-
import { landscapeStyle } from "styles/landscapeStyle";
8+
import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
99
import { responsiveSize } from "styles/responsiveSize";
1010

1111
import ConnectWallet from "components/ConnectWallet";
@@ -38,7 +38,7 @@ const Container = styled.div`
3838
padding: ${responsiveSize(24, 32)};
3939
padding-top: ${responsiveSize(24, 28)};
4040
padding-bottom: ${responsiveSize(76, 96)};
41-
max-width: 1780px;
41+
max-width: ${MAX_WIDTH_LANDSCAPE};
4242
margin: 0 auto;
4343
`;
4444

‎web/src/pages/Settings/index.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React from "react";
22
import styled from "styled-components";
33

4-
import { Route, Routes } from "react-router-dom";
5-
4+
import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
65
import { responsiveSize } from "styles/responsiveSize";
76

7+
import { Route, Routes } from "react-router-dom";
8+
89
import EmailConfirmation from "./EmailConfirmation";
910

1011
const Container = styled.div`
1112
width: 100%;
1213
background-color: ${({ theme }) => theme.lightBackground};
1314
padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
14-
max-width: 1780px;
15+
max-width: ${MAX_WIDTH_LANDSCAPE};
1516
margin: 0 auto;
1617
`;
1718

‎web/src/styles/landscapeStyle.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
22

3+
export const MAX_WIDTH_LANDSCAPE = "1400px";
4+
35
export const BREAKPOINT_LANDSCAPE = 900;
46

57
export const landscapeStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`

0 commit comments

Comments
 (0)
Please sign in to comment.