Skip to content

Commit 0631781

Browse files
jaybuidljaybuidl
committed
Merge branch 'chore(web)/code-maintenance-and-consensus' into dev
2 parents 88d40d2 + 789e4e4 commit 0631781

File tree

26 files changed

+518
-527
lines changed

26 files changed

+518
-527
lines changed

‎web/src/components/CasesDisplay/CasesGrid.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const Container = styled.div`
1111
gap: 8px;
1212
`;
1313

14-
// 24px as margin-top since we already have 8px from the flex gap
1514
const StyledPagination = styled(StandardPagination)`
1615
margin-top: 24px;
1716
margin-left: auto;
@@ -26,13 +25,7 @@ export interface ICasesGrid {
2625
casesPerPage: number;
2726
}
2827

29-
const CasesGrid: React.FC<ICasesGrid> = ({
30-
disputes,
31-
currentPage,
32-
setCurrentPage,
33-
numberDisputes,
34-
casesPerPage,
35-
}) => {
28+
const CasesGrid: React.FC<ICasesGrid> = ({ disputes, currentPage, setCurrentPage, numberDisputes, casesPerPage }) => {
3629
return (
3730
<>
3831
<Container>

‎web/src/components/CasesDisplay/Stats.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ const FieldWrapper = styled.div`
77
gap: 8px;
88
`;
99

10+
const SeparatorLabel = styled.label`
11+
margin-left: 8px;
12+
margin-right: 8px;
13+
`;
14+
1015
const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => (
1116
<FieldWrapper>
1217
<label>{label}</label>
1318
<small>{value}</small>
1419
</FieldWrapper>
1520
);
1621

17-
const SeparatorLabel = styled.label`
18-
margin-left: 8px;
19-
margin-right: 8px;
20-
`;
21-
2222
const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
2323

2424
const Stats: React.FC = () => {

‎web/src/components/DisputeCard/PeriodBanner.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,6 @@ import React from "react";
22
import styled, { Theme } from "styled-components";
33
import { Periods } from "consts/periods";
44

5-
export interface IPeriodBanner {
6-
id: number;
7-
period: Periods;
8-
}
9-
10-
const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
11-
switch (period) {
12-
case Periods.appeal:
13-
return [theme.tint, theme.tintMedium];
14-
case Periods.execution:
15-
return [theme.secondaryPurple, theme.mediumPurple];
16-
default:
17-
return [theme.primaryBlue, theme.mediumBlue];
18-
}
19-
};
20-
215
const Container = styled.div<Omit<IPeriodBanner, "id">>`
226
height: 45px;
237
width: auto;
@@ -54,6 +38,22 @@ const Container = styled.div<Omit<IPeriodBanner, "id">>`
5438
}};
5539
`;
5640

41+
export interface IPeriodBanner {
42+
id: number;
43+
period: Periods;
44+
}
45+
46+
const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
47+
switch (period) {
48+
case Periods.appeal:
49+
return [theme.tint, theme.tintMedium];
50+
case Periods.execution:
51+
return [theme.secondaryPurple, theme.mediumPurple];
52+
default:
53+
return [theme.primaryBlue, theme.mediumBlue];
54+
}
55+
};
56+
5757
const getPeriodLabel = (period: Periods): string => {
5858
switch (period) {
5959
case Periods.appeal:

‎web/src/components/EvidenceCard.tsx

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,6 @@ import { useIPFSQuery } from "hooks/useIPFSQuery";
77
import { shortenAddress } from "utils/shortenAddress";
88
import { IPFS_GATEWAY } from "consts/index";
99

10-
interface IEvidenceCard {
11-
evidence: string;
12-
sender: string;
13-
index: number;
14-
}
15-
16-
const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
17-
const { data } = useIPFSQuery(evidence.at(0) === "/" ? evidence : undefined);
18-
return (
19-
<StyledCard>
20-
<TextContainer>
21-
<Index>#{index}:</Index>
22-
{data ? (
23-
<>
24-
<h3>{data.name}</h3>
25-
<p>{data.description}</p>
26-
</>
27-
) : (
28-
<p>{evidence}</p>
29-
)}
30-
</TextContainer>
31-
<BottomShade>
32-
<Identicon size="24" string={sender} />
33-
<p>{shortenAddress(sender)}</p>
34-
{data && typeof data.fileURI !== "undefined" && (
35-
<StyledA href={`${IPFS_GATEWAY}${data.fileURI}`} target="_blank" rel="noreferrer">
36-
<AttachmentIcon />
37-
</StyledA>
38-
)}
39-
</BottomShade>
40-
</StyledCard>
41-
);
42-
};
43-
4410
const StyledCard = styled(Card)`
4511
width: 100%;
4612
height: auto;
@@ -85,4 +51,38 @@ const StyledA = styled.a`
8551
}
8652
`;
8753

54+
interface IEvidenceCard {
55+
evidence: string;
56+
sender: string;
57+
index: number;
58+
}
59+
60+
const EvidenceCard: React.FC<IEvidenceCard> = ({ evidence, sender, index }) => {
61+
const { data } = useIPFSQuery(evidence.at(0) === "/" ? evidence : undefined);
62+
return (
63+
<StyledCard>
64+
<TextContainer>
65+
<Index>#{index}:</Index>
66+
{data ? (
67+
<>
68+
<h3>{data.name}</h3>
69+
<p>{data.description}</p>
70+
</>
71+
) : (
72+
<p>{evidence}</p>
73+
)}
74+
</TextContainer>
75+
<BottomShade>
76+
<Identicon size="24" string={sender} />
77+
<p>{shortenAddress(sender)}</p>
78+
{data && typeof data.fileURI !== "undefined" && (
79+
<StyledA href={`${IPFS_GATEWAY}${data.fileURI}`} target="_blank" rel="noreferrer">
80+
<AttachmentIcon />
81+
</StyledA>
82+
)}
83+
</BottomShade>
84+
</StyledCard>
85+
);
86+
};
87+
8888
export default EvidenceCard;

‎web/src/components/Field.tsx

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,33 @@ import React from "react";
22
import { Link } from "react-router-dom";
33
import styled from "styled-components";
44

5+
const FieldContainer = styled.div<FieldContainerProps>`
6+
width: ${({ width = "100%" }) => width};
7+
display: flex;
8+
align-items: center;
9+
justify-content: flex-start;
10+
.value {
11+
flex-grow: 1;
12+
text-align: end;
13+
color: ${({ theme }) => theme.primaryText};
14+
}
15+
svg {
16+
fill: ${({ theme }) => theme.secondaryPurple};
17+
margin-right: 8px;
18+
width: 15px;
19+
}
20+
.link {
21+
color: ${({ theme }) => theme.primaryBlue};
22+
:hover {
23+
cursor: pointer;
24+
}
25+
}
26+
`;
27+
28+
type FieldContainerProps = {
29+
width?: string;
30+
};
31+
532
interface IField {
633
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
734
name: string;
@@ -10,10 +37,6 @@ interface IField {
1037
width?: string;
1138
}
1239

13-
type FieldContainerProps = {
14-
width?: string;
15-
};
16-
1740
const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width }) => (
1841
<FieldContainer width={width}>
1942
{<Icon />}
@@ -29,26 +52,3 @@ const Field: React.FC<IField> = ({ icon: Icon, name, value, link, width }) => (
2952
);
3053

3154
export default Field;
32-
33-
const FieldContainer = styled.div<FieldContainerProps>`
34-
width: ${({ width = "100%" }) => width};
35-
display: flex;
36-
align-items: center;
37-
justify-content: flex-start;
38-
.value {
39-
flex-grow: 1;
40-
text-align: end;
41-
color: ${({ theme }) => theme.primaryText};
42-
}
43-
svg {
44-
fill: ${({ theme }) => theme.secondaryPurple};
45-
margin-right: 8px;
46-
width: 15px;
47-
}
48-
.link {
49-
color: ${({ theme }) => theme.primaryBlue};
50-
:hover {
51-
cursor: pointer;
52-
}
53-
}
54-
`;

‎web/src/components/Popup/index.tsx

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,6 @@ import Appeal from "./Description/Appeal";
99
import VoteWithCommitExtraInfo from "./ExtraInfo/VoteWithCommitExtraInfo";
1010
import StakeWithdrawExtraInfo from "./ExtraInfo/StakeWithdrawExtraInfo";
1111

12-
export enum PopupType {
13-
STAKE_WITHDRAW = "STAKE_WITHDRAW",
14-
APPEAL = "APPEAL",
15-
VOTE_WITHOUT_COMMIT = "VOTE_WITHOUT_COMMIT",
16-
VOTE_WITH_COMMIT = "VOTE_WITH_COMMIT",
17-
}
18-
19-
interface IStakeWithdraw {
20-
popupType: PopupType.STAKE_WITHDRAW;
21-
pnkStaked: string;
22-
courtName: string;
23-
isStake: boolean;
24-
courtId: string;
25-
}
26-
27-
interface IVoteWithoutCommit {
28-
popupType: PopupType.VOTE_WITHOUT_COMMIT;
29-
date: string;
30-
}
31-
32-
interface IVoteWithCommit {
33-
popupType: PopupType.VOTE_WITH_COMMIT;
34-
date: string;
35-
}
36-
37-
interface IAppeal {
38-
popupType: PopupType.APPEAL;
39-
amount: string;
40-
option: string;
41-
}
42-
interface IPopup {
43-
title: string;
44-
icon: React.FC<React.SVGAttributes<SVGElement>>;
45-
popupType: PopupType;
46-
setIsOpen: (val: boolean) => void;
47-
setAmount?: (val: string) => void;
48-
isCommit?: boolean;
49-
}
50-
51-
type PopupProps = IStakeWithdraw | IVoteWithoutCommit | IVoteWithCommit | IAppeal;
52-
5312
const Header = styled.h1`
5413
display: flex;
5514
margin-top: calc(12px + (32 - 12) * ((100vw - 375px) / (1250 - 375)));
@@ -120,6 +79,47 @@ export const VoteDescriptionEmphasizedDate = styled.span`
12079
color: ${({ theme }) => theme.primaryText};
12180
`;
12281

82+
export enum PopupType {
83+
STAKE_WITHDRAW = "STAKE_WITHDRAW",
84+
APPEAL = "APPEAL",
85+
VOTE_WITHOUT_COMMIT = "VOTE_WITHOUT_COMMIT",
86+
VOTE_WITH_COMMIT = "VOTE_WITH_COMMIT",
87+
}
88+
89+
interface IStakeWithdraw {
90+
popupType: PopupType.STAKE_WITHDRAW;
91+
pnkStaked: string;
92+
courtName: string;
93+
isStake: boolean;
94+
courtId: string;
95+
}
96+
97+
interface IVoteWithoutCommit {
98+
popupType: PopupType.VOTE_WITHOUT_COMMIT;
99+
date: string;
100+
}
101+
102+
interface IVoteWithCommit {
103+
popupType: PopupType.VOTE_WITH_COMMIT;
104+
date: string;
105+
}
106+
107+
interface IAppeal {
108+
popupType: PopupType.APPEAL;
109+
amount: string;
110+
option: string;
111+
}
112+
interface IPopup {
113+
title: string;
114+
icon: React.FC<React.SVGAttributes<SVGElement>>;
115+
popupType: PopupType;
116+
setIsOpen: (val: boolean) => void;
117+
setAmount?: (val: string) => void;
118+
isCommit?: boolean;
119+
}
120+
121+
type PopupProps = IStakeWithdraw | IVoteWithoutCommit | IVoteWithCommit | IAppeal;
122+
123123
const Popup: React.FC<PopupProps & IPopup> = ({
124124
title,
125125
icon: Icon,

‎web/src/components/StatDisplay.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import React from "react";
22
import styled, { useTheme } from "styled-components";
33

4-
const createPair = (iconColor: string, backgroundColor: string) => ({
5-
iconColor,
6-
backgroundColor,
7-
});
8-
94
const Container = styled.div`
105
display: flex;
116
align-items: center;
@@ -34,6 +29,11 @@ const TextContainer = styled.div`
3429
}
3530
`;
3631

32+
const createPair = (iconColor: string, backgroundColor: string) => ({
33+
iconColor,
34+
backgroundColor,
35+
});
36+
3737
export interface IStatDisplay {
3838
title: string;
3939
text: string;

0 commit comments

Comments
 (0)