Skip to content

Commit cc83560

Browse files
kemurukemuru
committed
feat(web): add modals/popups for removing lists and items and challenging
1 parent e1a97c7 commit cc83560

File tree

7 files changed

+235
-29
lines changed

7 files changed

+235
-29
lines changed

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

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from "react";
2-
import { Button, Card } from "@kleros/ui-components-library";
32
import styled from "styled-components";
43
import { responsiveSize } from "styles/responsiveSize";
4+
import { useToggle } from "react-use";
5+
import { Button, Card } from "@kleros/ui-components-library";
56
import { getChainIcon, getChainName } from "components/ChainIcon";
67
import { getStatusColor, getStatusLabel } from "components/RegistryCard/StatusBanner";
78
import AliasDisplay from "components/RegistryInfo/AliasDisplay";
89
import { Policies } from "./Policies";
910
import EtherscanIcon from "svgs/icons/etherscan.svg";
1011
import { Status } from "consts/status";
12+
import RemoveModal from "../Modal/RemoveModal";
1113

1214
const StyledCard = styled(Card)`
1315
display: flex;
@@ -118,7 +120,7 @@ interface IInformationCard {
118120
chainId: number;
119121
status: string;
120122
isItem?: boolean;
121-
// itemParams?: Object : item will haev dynamic params
123+
// itemParams?: Object : item will have dynamic params
122124
}
123125

124126
const InformationCard: React.FC<IInformationCard> = ({
@@ -129,34 +131,45 @@ const InformationCard: React.FC<IInformationCard> = ({
129131
status = Status.Included,
130132
isItem = false,
131133
}) => {
134+
const [isRemoveListModalOpen, toggleRemoveListModal] = useToggle(false);
135+
const [isRemoveItemModalOpen, toggleRemoveItemModal] = useToggle(false);
136+
132137
return (
133-
<StyledCard>
134-
<TopInfo>
135-
<TopLeftInfo>
136-
<LogoAndTitle>
137-
{!isItem && <StyledLogo src={logoURI} alt="List Img" isList={false} />}
138-
<h1>{title}</h1>
139-
</LogoAndTitle>
140-
<StyledP>{description}</StyledP>
141-
</TopLeftInfo>
142-
<TopRightInfo>
143-
<ChainContainer>
144-
<p>{getChainIcon(chainId)}</p>
145-
<p>{getChainName(chainId)}</p>
146-
</ChainContainer>
147-
<StyledEtherscanIcon />
148-
<StatusContainer {...{ status, isList: false }}>
149-
<label className="front-color dot">{getStatusLabel(status)}</label>
150-
</StatusContainer>
151-
</TopRightInfo>
152-
</TopInfo>
153-
<Divider />
154-
<BottomInfo>
155-
<AliasDisplay address="0x95222290DD7278Aa3Ddd389Cc1E1d165CC4BAfe5" />
156-
<Button variant="secondary" text={isItem ? "Remove Item" : "Remove List"} />
157-
</BottomInfo>
158-
<Policies />
159-
</StyledCard>
138+
<>
139+
<StyledCard>
140+
<TopInfo>
141+
<TopLeftInfo>
142+
<LogoAndTitle>
143+
{!isItem && <StyledLogo src={logoURI} alt="List Img" isList={false} />}
144+
<h1>{title}</h1>
145+
</LogoAndTitle>
146+
<StyledP>{description}</StyledP>
147+
</TopLeftInfo>
148+
<TopRightInfo>
149+
<ChainContainer>
150+
<p>{getChainIcon(chainId)}</p>
151+
<p>{getChainName(chainId)}</p>
152+
</ChainContainer>
153+
<StyledEtherscanIcon />
154+
<StatusContainer {...{ status, isList: false }}>
155+
<label className="front-color dot">{getStatusLabel(status)}</label>
156+
</StatusContainer>
157+
</TopRightInfo>
158+
</TopInfo>
159+
<Divider />
160+
<BottomInfo>
161+
<AliasDisplay address="0x95222290DD7278Aa3Ddd389Cc1E1d165CC4BAfe5" />
162+
<Button
163+
variant="secondary"
164+
text={isItem ? "Remove Item" : "Remove List"}
165+
onClick={isItem ? toggleRemoveItemModal : toggleRemoveListModal}
166+
/>
167+
</BottomInfo>
168+
<Policies />
169+
</StyledCard>
170+
{isRemoveItemModalOpen ? <RemoveModal isItem={isItem} toggleModal={toggleRemoveItemModal} /> : null}
171+
{isRemoveListModalOpen ? <RemoveModal isItem={isItem} toggleModal={toggleRemoveListModal} /> : null}
172+
</>
160173
);
161174
};
162175
export default InformationCard;

‎web/src/components/Modal/Buttons/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { Button } from "@kleros/ui-components-library";
4+
// import ChallengeButton from "components/ChallengeButton";
5+
// import RemoveButton from "components/RemoveButton";
6+
7+
const Container = styled.div`
8+
display: flex;
9+
width: 100%;
10+
justify-content: space-between;
11+
flex-wrap: wrap;
12+
gap: 16px;
13+
`;
14+
15+
interface IButtons {
16+
toggleModal: () => void;
17+
buttonText: string;
18+
}
19+
20+
const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText }) => {
21+
return (
22+
<Container>
23+
<Button variant="secondary" text="Return" onClick={toggleModal} />
24+
<Button text={buttonText} toggleModal={toggleModal} />
25+
{/* <ChallengeButton buttonText={buttonText} toggleModal={toggleModal} /> */}
26+
{/* <RemoveButton buttonText={buttonText} toggleModal={toggleModal} /> */}
27+
</Container>
28+
);
29+
};
30+
export default Buttons;

‎web/src/components/Modal/ChallengeItemModal.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useRef } from "react";
2+
import styled from "styled-components";
3+
import { useClickAway } from "react-use";
4+
import { Overlay } from "components/Overlay";
5+
import Header from "./Header";
6+
import Buttons from "./Buttons";
7+
import DepositRequired from "./DepositRequired";
8+
import { StyledModal } from "./StyledModal";
9+
import Info from "./Info";
10+
11+
const ReStyledModal = styled(StyledModal)`
12+
gap: 32px;
13+
`;
14+
15+
interface IChallengeItemModal {
16+
toggleModal: () => void;
17+
}
18+
19+
const alertMessage =
20+
"When you challenge an item a dispute starts. Random jurors are selected to decide if" +
21+
" the item should be removed or included. In case the challenger wins the deposit is" +
22+
" reimbursed, in case the challenger loses the deposit is lost. Make sure you read" +
23+
" and understand the Policy before proceeding.";
24+
25+
const ChallengeItemModal: React.FC<IChallengeItemModal> = ({ toggleModal }) => {
26+
const containerRef = useRef(null);
27+
useClickAway(containerRef, () => toggleModal());
28+
29+
return (
30+
<>
31+
<Overlay />
32+
<ReStyledModal ref={containerRef}>
33+
<Header text="Challenge Item" />
34+
<DepositRequired />
35+
<Info alertMessage={alertMessage} />
36+
<Buttons buttonText="Challenge" toggleModal={toggleModal} />
37+
</ReStyledModal>
38+
</>
39+
);
40+
};
41+
42+
export default ChallengeItemModal;

‎web/src/components/Modal/DepositRequired.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import { Card } from "@kleros/ui-components-library";
3+
import styled from "styled-components";
4+
5+
const StyledCard = styled(Card)`
6+
display: flex;
7+
flex-direction: column;
8+
background-color: ${({ theme }) => theme.mediumBlue};
9+
height: 87px;
10+
width: 100%;
11+
border: none;
12+
justify-content: center;
13+
align-items: center;
14+
padding: 15px;
15+
gap: 5px;
16+
`;
17+
18+
const StyledHeader = styled.p`
19+
font-size: 14px;
20+
margin: 0;
21+
color: ${({ theme }) => theme.primaryBlue};
22+
`;
23+
24+
const StyledQuantity = styled.p`
25+
font-size: 24px;
26+
margin: 0;
27+
color: ${({ theme }) => theme.primaryBlue};
28+
font-weight: 600;
29+
`;
30+
31+
const FeeRequired: React.FC = () => {
32+
return (
33+
<StyledCard>
34+
<StyledHeader>Deposit required</StyledHeader>
35+
<StyledQuantity>0.00003 ETH</StyledQuantity>
36+
</StyledCard>
37+
);
38+
};
39+
40+
export default FeeRequired;

‎web/src/components/Modal/Header.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
const StyledHeader = styled.h1`
5+
margin: 0;
6+
`;
7+
8+
interface IHeader {
9+
text: string;
10+
}
11+
12+
const Header: React.FC<IHeader> = ({ text }) => {
13+
return <StyledHeader>{text}</StyledHeader>;
14+
};
15+
16+
export default Header;

‎web/src/components/Modal/Info.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { AlertMessage } from "@kleros/ui-components-library";
4+
5+
const Container = styled.div`
6+
display: flex;
7+
width: 100%;
8+
`;
9+
10+
interface IInfo {
11+
alertMessage: string;
12+
}
13+
14+
const Info: React.FC<IInfo> = ({ alertMessage }) => {
15+
return (
16+
<Container>
17+
<AlertMessage variant="info" title="Important" msg={alertMessage} />
18+
</Container>
19+
);
20+
};
21+
22+
export default Info;

‎web/src/components/Modal/RemoveModal.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useRef } from "react";
2+
import styled from "styled-components";
3+
import { useClickAway } from "react-use";
4+
import { Overlay } from "components/Overlay";
5+
import Header from "./Header";
6+
import Buttons from "./Buttons";
7+
import DepositRequired from "./DepositRequired";
8+
import { StyledModal } from "./StyledModal";
9+
import Info from "./Info";
10+
11+
const ReStyledModal = styled(StyledModal)`
12+
gap: 32px;
13+
`;
14+
15+
interface IRemoveModal {
16+
toggleModal: () => void;
17+
isItem: boolean;
18+
}
19+
20+
const alertMessage = (isItem: boolean) =>
21+
`When you request ${isItem ? "an item" : "a list"} to be removed it goes to the Pending state for a while.` +
22+
` During that time the removal can be challenged starting a dispute. If the ${isItem ? "item" : "list"} is` +
23+
` removed the deposit is reimbursed, in case the ${isItem ? "item" : "list"} is not removed the deposit is lost.` +
24+
` Make sure you read and understand the Policy before proceeding.`;
25+
26+
const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem }) => {
27+
const containerRef = useRef(null);
28+
useClickAway(containerRef, () => toggleModal());
29+
30+
return (
31+
<>
32+
<Overlay />
33+
<ReStyledModal ref={containerRef}>
34+
<Header text={`Remove ${isItem ? "Item" : "List"}`} />
35+
<DepositRequired />
36+
<Info alertMessage={alertMessage(isItem)} />
37+
<Buttons buttonText="Remove" toggleModal={toggleModal} />
38+
</ReStyledModal>
39+
</>
40+
);
41+
};
42+
43+
export default RemoveModal;

0 commit comments

Comments
 (0)