-
Notifications
You must be signed in to change notification settings - Fork 8
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.
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
[#220] drep list #559
[#220] drep list #559
Changes from 4 commits
7dc893c
d6ff116
fd4e4e5
1ab56a2
7a28c3b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { Chip, ChipProps, styled } from "@mui/material"; | ||
import { cyan, errorRed, successGreen } from "@/consts"; | ||
|
||
type Status = 'Active' | 'Inactive' | 'Retired'; | ||
|
||
interface StatusPillProps { | ||
status: Status; | ||
label?: string; | ||
size?: 'small' | 'medium'; | ||
sx?: ChipProps['sx']; | ||
} | ||
|
||
export const StatusPill = ({ | ||
status, | ||
label = status, | ||
size = 'small', | ||
sx | ||
}: StatusPillProps) => ( | ||
<StyledChip | ||
status={status} | ||
size={size} | ||
label={label} | ||
sx={sx} | ||
/> | ||
); | ||
|
||
const getBgColor = (status: Status): string => { | ||
switch (status) { | ||
case 'Active': | ||
return successGreen.c200; | ||
case 'Inactive': | ||
return cyan.c100; | ||
case 'Retired': | ||
return errorRed.c100; | ||
// no default | ||
} | ||
}; | ||
|
||
const getTextColor = (status: Status): string => { | ||
switch (status) { | ||
case 'Active': | ||
return successGreen.c700; | ||
case 'Inactive': | ||
return cyan.c500; | ||
case 'Retired': | ||
return errorRed.c500; | ||
// no default | ||
} | ||
}; | ||
|
||
const StyledChip = styled(Chip)<{ status: Status }>(({ theme, status }) => ({ | ||
backgroundColor: getBgColor(status), | ||
color: getTextColor(status), | ||
border: `2px solid ${theme.palette.neutralWhite}`, | ||
fontSize: '0.75rem', | ||
textTransform: 'capitalize', | ||
})); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,31 +1,46 @@ | ||
import { Box, Divider } from "@mui/material"; | ||
|
||
import { Button, Spacer, Typography } from "@atoms"; | ||
import { Button, Typography } from "@atoms"; | ||
import { useScreenDimension, useTranslation } from "@hooks"; | ||
import { AutomatedVotingCardProps } from "./types"; | ||
import { Card } from "./Card"; | ||
import { primaryBlue } from "@/consts"; | ||
import { useModal } from "@/context"; | ||
|
||
export const AutomatedVotingCard = ({ | ||
description, | ||
inProgress, | ||
isConnected, | ||
isSelected, | ||
onClickDelegate, | ||
onClickInfo, | ||
title, | ||
votingPower, | ||
}: AutomatedVotingCardProps) => { | ||
const { isMobile, screenWidth } = useScreenDimension(); | ||
const { openModal } = useModal(); | ||
const { t } = useTranslation(); | ||
|
||
return ( | ||
<Box | ||
<Card | ||
{...(inProgress && { | ||
variant: "warning", | ||
label: t("inProgress"), | ||
})} | ||
{...(isSelected && { | ||
variant: "primary", | ||
label: "Selected", | ||
})} | ||
sx={{ | ||
alignItems: "center", | ||
bgcolor: "#FFFFFF4D", | ||
borderRadius: 4, | ||
boxShadow: `0px 4px 15px 0px #DDE3F5`, | ||
bgcolor: (theme) => `${theme.palette.neutralWhite}40`, | ||
boxShadow: `0px 4px 15px 0px ${primaryBlue.c100}`, | ||
display: "flex", | ||
flex: 1, | ||
flexDirection: screenWidth < 1440 ? "column" : "row", | ||
justifyContent: "space-between", | ||
padding: "18px 24px", | ||
mt: inProgress || isSelected ? 2 : 0, | ||
py: 2.25, | ||
}} | ||
> | ||
<Box | ||
|
@@ -74,27 +89,40 @@ export const AutomatedVotingCard = ({ | |
sx={{ | ||
display: "flex", | ||
flexDirection: "row", | ||
gap: 2.5, | ||
mt: screenWidth < 1440 ? 3 : 0, | ||
width: screenWidth < 1440 ? "100%" : "auto", | ||
}} | ||
> | ||
<Button | ||
// TODO handle button click | ||
onClick={onClickInfo} | ||
size={isMobile ? "medium" : "large"} | ||
sx={{ flex: screenWidth < 768 ? 1 : undefined }} | ||
variant="outlined" | ||
> | ||
{t("info")} | ||
</Button> | ||
<Spacer x={2.5} /> | ||
<Button | ||
onClick={onClickDelegate} | ||
size={isMobile ? "medium" : "large"} | ||
sx={{ flex: screenWidth < 768 ? 1 : undefined }} | ||
> | ||
{t("delegate")} | ||
</Button> | ||
{!isConnected | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is it not the same label ?, but just different action ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. left a comment on figma |
||
? ( | ||
<Button | ||
onClick={() => openModal({ type: "chooseWallet" })} | ||
size={isMobile ? "medium" : "large"} | ||
sx={{ flex: screenWidth < 768 ? 1 : undefined }} | ||
> | ||
{t("connectToDelegate")} | ||
</Button> | ||
) | ||
: !isSelected && ( | ||
<Button | ||
onClick={onClickDelegate} | ||
size={isMobile ? "medium" : "large"} | ||
sx={{ flex: screenWidth < 768 ? 1 : undefined }} | ||
> | ||
{t("delegate")} | ||
</Button> | ||
)} | ||
</Box> | ||
</Box> | ||
</Card> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,19 +3,39 @@ import { | |
AccordionDetails, | ||
AccordionSummary, | ||
Box, | ||
Chip, | ||
} from "@mui/material"; | ||
|
||
import { Typography } from "@atoms"; | ||
import { ICONS } from "@consts"; | ||
import { useTranslation } from "@hooks"; | ||
import { AutomatedVotingCard } from "@molecules"; | ||
import { useState } from "react"; | ||
|
||
export const AutomatedVotingOptions = () => { | ||
type AutomatedVotingOptionsProps = { | ||
currentDelegation: string | undefined; | ||
delegate: (delegateTo: string) => void; | ||
delegationInProgress?: string; | ||
isConnected?: boolean; | ||
votingPower: string; | ||
}; | ||
|
||
export const AutomatedVotingOptions = ({ | ||
currentDelegation, | ||
delegate, | ||
delegationInProgress, | ||
isConnected, | ||
votingPower, | ||
}: AutomatedVotingOptionsProps) => { | ||
const { t } = useTranslation(); | ||
|
||
const [isOpen, setIsOpen] = useState<boolean>(false); | ||
|
||
return ( | ||
<Accordion | ||
elevation={3} | ||
expanded={isOpen} | ||
onChange={(_, isExpanded) => setIsOpen(isExpanded)} | ||
sx={(theme) => ({ | ||
bgcolor: `${theme.palette.lightBlue}80`, | ||
border: `1px solid ${theme.palette.neutralWhite}`, | ||
|
@@ -26,6 +46,19 @@ export const AutomatedVotingOptions = () => { | |
sx={{ borderRadius: 3, px: { xxs: 2, md: 3 } }} | ||
> | ||
<Typography>{t("dRepDirectory.automatedVotingOptions")}</Typography> | ||
{currentDelegation && !isOpen && ( | ||
// TODO this Chip is temporary, since there were no design for this case | ||
<Chip | ||
color="primary" | ||
label={currentDelegation === "drep_always_abstain" ? 'Abstain' : 'No confidence'} | ||
sx={{ | ||
backgroundColor: (theme) => theme.palette.neutralWhite, | ||
fontWeight: 400, | ||
ml: 2, | ||
textTransform: 'uppercase', | ||
}} | ||
/> | ||
)} | ||
</AccordionSummary> | ||
<AccordionDetails sx={{ p: { xxs: 2, md: 3 }, pt: { xxs: 0, md: 0 } }}> | ||
<Box | ||
|
@@ -37,17 +70,23 @@ export const AutomatedVotingOptions = () => { | |
> | ||
<AutomatedVotingCard | ||
description={t("dRepDirectory.abstainCardDescription")} | ||
onClickDelegate={() => {}} | ||
onClickInfo={() => {}} | ||
inProgress={delegationInProgress === "abstain"} | ||
isConnected={isConnected} | ||
isSelected={currentDelegation === "drep_always_abstain"} | ||
onClickDelegate={() => delegate("abstain")} | ||
onClickInfo={() => { }} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. what Info should do ?, can you leave commet ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. left a comment on figma |
||
title={t("dRepDirectory.abstainCardTitle")} | ||
votingPower="99,111,111" | ||
votingPower={votingPower} | ||
/> | ||
<AutomatedVotingCard | ||
description={t("dRepDirectory.noConfidenceDescription")} | ||
onClickDelegate={() => {}} | ||
onClickInfo={() => {}} | ||
inProgress={delegationInProgress === "no confidence"} | ||
isConnected={isConnected} | ||
isSelected={currentDelegation === "drep_always_no_confidence"} | ||
onClickDelegate={() => delegate("no confidence")} | ||
onClickInfo={() => { }} | ||
title={t("dRepDirectory.noConfidenceTitle")} | ||
votingPower="99,111,111" | ||
votingPower={votingPower} | ||
/> | ||
</Box> | ||
</AccordionDetails> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Insead of switch
{
Active:successGreen.c200,
Inactive:cyan.c100,
Retired:errorRed.c100
}[status]
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the same for text color