Skip to content

Commit f69d4bb

Browse files
tractorsstractorss
committed
feat(web): update-creation-page-ui
1 parent 74acb03 commit f69d4bb

File tree

5 files changed

+203
-37
lines changed

5 files changed

+203
-37
lines changed

‎web/src/assets/svgs/icons/caseFromScratch.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎web/src/assets/svgs/icons/duplicateCase.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎web/src/pages/Resolver/Landing/CreationCard.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import { Card, Radio } from "@kleros/ui-components-library";
5+
6+
import CaseFromScratchIcon from "svgs/icons/caseFromScratch.svg";
7+
import DuplicateCaseIcon from "svgs/icons/duplicateCase.svg";
8+
9+
import { responsiveSize } from "styles/responsiveSize";
10+
11+
import { Divider } from "components/Divider";
12+
import { NumberInputField } from "components/NumberInputField";
13+
import WithHelpTooltip from "components/WithHelpTooltip";
14+
15+
export enum CreationMethod {
16+
Scratch,
17+
Duplicate,
18+
}
19+
20+
const StyledCard = styled(Card)<{ selected?: boolean }>`
21+
height: fit-content;
22+
width: 100%;
23+
background: ${({ theme, selected }) => (selected ? theme.whiteBackground : theme.lightBackground)};
24+
`;
25+
26+
const CardTopContent = styled.div`
27+
width: 100%;
28+
padding: 8px ${responsiveSize(16, 24)};
29+
display: flex;
30+
align-items: center;
31+
gap: ${responsiveSize(8, 16)};
32+
`;
33+
34+
const CardBottomContent = styled.div`
35+
width: 100%;
36+
padding: 16px ${responsiveSize(16, 24)};
37+
display: flex;
38+
align-items: center;
39+
flex-wrap: wrap;
40+
gap: ${responsiveSize(8, 16)};
41+
`;
42+
43+
const Icon = styled.svg`
44+
width: 48px;
45+
height: 48px;
46+
circle {
47+
fill: ${({ theme }) => theme.lightBlue};
48+
stroke: ${({ theme }) => theme.primaryBlue};
49+
}
50+
path {
51+
fill: ${({ theme }) => theme.primaryBlue};
52+
}
53+
`;
54+
55+
const StyledP = styled.p`
56+
padding: 0;
57+
font-size: 16px;
58+
flex: 1;
59+
color: ${({ theme }) => theme.primaryText};
60+
`;
61+
62+
const StyledRadio = styled(Radio)`
63+
align-self: center;
64+
padding-left: 16px;
65+
> input {
66+
display: none;
67+
}
68+
> span {
69+
transform: translateY(-50%);
70+
}
71+
`;
72+
73+
const Label = styled.label`
74+
font-size: 14px;
75+
color: ${({ theme }) => theme.primaryText};
76+
`;
77+
78+
const StyledNumberField = styled(NumberInputField)`
79+
max-width: 128px;
80+
input {
81+
border: 1px solid ${({ theme, variant }) => (variant === "error" ? theme.error : theme.stroke)};
82+
}
83+
`;
84+
85+
const ErrorMsg = styled.small`
86+
font-size: 16px;
87+
font-weight: 400;
88+
color: ${({ theme }) => theme.error};
89+
`;
90+
91+
interface ICreationCard {
92+
cardMethod: CreationMethod;
93+
selectedMethod: CreationMethod;
94+
setCreationMethod: (method: CreationMethod) => void;
95+
disputeID?: string;
96+
setDisputeID?: (id?: string) => void;
97+
isInvalidDispute?: boolean;
98+
}
99+
100+
const CreationCard: React.FC<ICreationCard> = ({
101+
cardMethod,
102+
selectedMethod,
103+
setCreationMethod,
104+
disputeID,
105+
setDisputeID,
106+
isInvalidDispute,
107+
}) => {
108+
return (
109+
<StyledCard hover onClick={() => setCreationMethod(cardMethod)} selected={cardMethod === selectedMethod}>
110+
<CardTopContent>
111+
<Icon as={cardMethod === CreationMethod.Scratch ? CaseFromScratchIcon : DuplicateCaseIcon} />
112+
<StyledP>
113+
{cardMethod === CreationMethod.Scratch ? "Create a case from scratch" : "Duplicate an existing case"}
114+
</StyledP>
115+
<StyledRadio label="" checked={cardMethod === selectedMethod} onChange={() => setCreationMethod(cardMethod)} />
116+
</CardTopContent>
117+
{cardMethod === CreationMethod.Duplicate && selectedMethod === CreationMethod.Duplicate ? (
118+
<>
119+
<Divider />
120+
<CardBottomContent>
121+
<WithHelpTooltip tooltipMsg={'The case ID can be found on the top left of the Case page. eg. "Case #300".'}>
122+
<Label>{"Enter the cases's ID"}</Label>
123+
</WithHelpTooltip>
124+
<StyledNumberField
125+
placeholder="eg. 45"
126+
value={disputeID}
127+
onChange={(val) => {
128+
if (setDisputeID) setDisputeID(val.trim() !== "" ? val : undefined);
129+
}}
130+
variant={isInvalidDispute ? "error" : undefined}
131+
/>
132+
{isInvalidDispute ? <ErrorMsg>Invalid dispute</ErrorMsg> : null}
133+
</CardBottomContent>
134+
</>
135+
) : null}
136+
</StyledCard>
137+
);
138+
};
139+
140+
export default CreationCard;

web/src/pages/Resolver/Landing.tsx renamed to web/src/pages/Resolver/Landing/index.tsx

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect, useMemo, useState } from "react";
22
import styled, { css } from "styled-components";
33

44
import { useNavigate } from "react-router-dom";
@@ -17,15 +17,13 @@ import { isUndefined } from "src/utils";
1717
import { landscapeStyle } from "styles/landscapeStyle";
1818
import { responsiveSize } from "styles/responsiveSize";
1919

20-
import { Divider } from "components/Divider";
21-
import LabeledInput from "components/LabeledInput";
20+
import Header from "../Header";
2221

23-
import Header from "./Header";
22+
import CreationCard, { CreationMethod } from "./CreationCard";
2423

2524
const Container = styled.div`
2625
display: flex;
2726
flex-direction: column;
28-
gap: 24px;
2927
align-items: center;
3028
width: 84vw;
3129
@@ -34,38 +32,55 @@ const Container = styled.div`
3432
width: ${responsiveSize(442, 700, 900)};
3533
3634
padding-bottom: 240px;
37-
gap: 48px;
3835
`
3936
)}
4037
`;
4138

42-
const ErrorMsg = styled.small`
43-
font-size: 16px;
44-
color: ${({ theme }) => theme.error};
39+
const CardContainer = styled.div`
40+
width: 100%;
41+
max-width: 720px;
42+
display: flex;
43+
flex-direction: column;
44+
gap: 16px;
45+
margin-bottom: 32px;
4546
`;
4647

4748
const Landing: React.FC = () => {
4849
const navigate = useNavigate();
50+
const [creationMethod, setCreationMethod] = useState<CreationMethod>(CreationMethod.Scratch);
4951

5052
const [disputeID, setDisputeID] = useState<string>();
5153
const [debouncedDisputeID, setDebouncedDisputeID] = useState<string>();
5254
const { disputeData, setDisputeData } = useNewDisputeContext();
5355
useDebounce(() => setDebouncedDisputeID(disputeID), 500, [disputeID]);
5456

55-
const { data: dispute } = useDisputeDetailsQuery(debouncedDisputeID);
57+
const { data: dispute, isLoading: isLoadingDispute } = useDisputeDetailsQuery(debouncedDisputeID);
5658
const {
5759
data: populatedDispute,
5860
isError: isErrorPopulatedDisputeQuery,
59-
isLoading,
61+
isLoading: isPopulatingDispute,
6062
} = usePopulatedDisputeData(debouncedDisputeID, dispute?.dispute?.arbitrated.id as `0x${string}`);
6163

6264
// we want the genesis round's court and numberOfJurors
63-
const { data: roundData, isError: isErrorRoundQuery } = useRoundDetailsQuery(debouncedDisputeID, 0);
65+
const {
66+
data: roundData,
67+
isError: isErrorRoundQuery,
68+
isLoading: isLoadingRound,
69+
} = useRoundDetailsQuery(debouncedDisputeID, 0);
70+
71+
const isLoading = useMemo(
72+
() => isLoadingDispute || isPopulatingDispute || isLoadingRound,
73+
[isLoadingDispute, isPopulatingDispute, isLoadingRound]
74+
);
6475

65-
const isInvalidDispute =
66-
!isLoading &&
67-
!isUndefined(populatedDispute) &&
68-
(isErrorRoundQuery || isErrorPopulatedDisputeQuery || Object.keys(populatedDispute).length === 0);
76+
const isInvalidDispute = useMemo(() => {
77+
if (isUndefined(debouncedDisputeID) || isLoading) return false;
78+
if (dispute?.dispute === null) return true;
79+
if (!isUndefined(populatedDispute)) {
80+
return isErrorRoundQuery || isErrorPopulatedDisputeQuery || Object.keys(populatedDispute).length === 0;
81+
}
82+
return false;
83+
}, [debouncedDisputeID, isLoading, populatedDispute, isErrorRoundQuery, isErrorPopulatedDisputeQuery, dispute]);
6984

7085
useEffect(() => {
7186
if (isUndefined(populatedDispute) || isUndefined(roundData) || isInvalidDispute) return;
@@ -96,31 +111,35 @@ const Landing: React.FC = () => {
96111
answers,
97112
aliasesArray,
98113
});
114+
// eslint-disable-next-line react-hooks/exhaustive-deps
99115
}, [populatedDispute, roundData, isInvalidDispute]);
100116

101-
const showContinueButton =
102-
!isUndefined(disputeData) && !isUndefined(populatedDispute) && !isInvalidDispute && !isUndefined(roundData);
103117
return (
104118
<Container>
105119
<Header text="Create a case" />
106-
<Button text="Create from Scratch" onClick={() => navigate("/resolver/title")} />
107-
108-
<Divider />
109-
<LabeledInput
110-
value={disputeID}
111-
onChange={(e) => setDisputeID(e.target.value)}
112-
placeholder="Dispute ID"
113-
label="Duplicate an exiting case."
114-
type="number"
115-
onInput={(e) => {
116-
const value = e.currentTarget.value.replace(/\D/g, "");
117-
118-
e.currentTarget.value = value;
119-
return e;
120-
}}
120+
<CardContainer>
121+
<CreationCard
122+
cardMethod={CreationMethod.Scratch}
123+
selectedMethod={creationMethod}
124+
{...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
125+
/>
126+
<CreationCard
127+
cardMethod={CreationMethod.Duplicate}
128+
selectedMethod={creationMethod}
129+
{...{ disputeID, setDisputeID, setCreationMethod, isInvalidDispute }}
130+
/>
131+
</CardContainer>
132+
133+
<Button
134+
text="Next"
135+
isLoading={isLoading}
136+
disabled={
137+
isLoading ||
138+
isInvalidDispute ||
139+
(creationMethod === CreationMethod.Duplicate && isUndefined(debouncedDisputeID))
140+
}
141+
onClick={() => navigate("/resolver/title")}
121142
/>
122-
{isInvalidDispute ? <ErrorMsg>Error loading dispute data. Please use another dispute.</ErrorMsg> : null}
123-
{showContinueButton ? <Button small text="Continue" onClick={() => navigate("/resolver/title")} /> : null}
124143
</Container>
125144
);
126145
};

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ const DisputeResolver: React.FC = () => {
9999
const { isVerified } = useAtlasProvider();
100100
const { isConnected } = useAccount();
101101
const isPreviewPage = location.pathname.includes("/preview");
102-
const isLandingPage = location.pathname.includes("/create");
103102

104103
return (
105104
<Wrapper>
@@ -114,7 +113,7 @@ const DisputeResolver: React.FC = () => {
114113
{isConnected ? (
115114
<StyledEnsureAuth buttonText="Sign in to start">
116115
<MiddleContentContainer>
117-
{isConnected && !isPreviewPage && !isLandingPage ? (
116+
{isConnected && !isPreviewPage ? (
118117
<HowItWorksAndTimeline>
119118
<HowItWorks
120119
isMiniGuideOpen={isDisputeResolverMiniGuideOpen}

0 commit comments

Comments
 (0)