Skip to content

Commit

Permalink
Merge pull request #10203 from TylerAPfledderer/refactor/staking-cons…
Browse files Browse the repository at this point in the history 
…iderations-to-chakra

refactor(StakingConsiderations): migrate to Chakra
  • Loading branch information
@pettinarip
pettinarip committed May 17, 2023
2 parents d94d2f3 + f4f855a commit e93a499
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 166 deletions.
176 changes: 176 additions & 0 deletions src/components/Staking/StakingConsiderations/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import React from "react"
import {
Box,
chakra,
Flex,
Heading,
List,
ListItem,
Text,
VStack,
} from "@chakra-ui/react"

// SVG imports
import {
CautionProductGlyphIcon,
GreenCheckProductGlyphIcon,
WarningProductGlyphIcon,
} from "../../icons/staking"

// Component imports
import ButtonDropdown from "../../ButtonDropdown"
import Translation from "../../Translation"
import { trackCustomEvent } from "../../../utils/matomo"
import { useStakingConsiderations } from "./use-staking-considerations"

const ChakraButtonDropdown = chakra(ButtonDropdown, {
baseStyle: {
hideFrom: "md",
},
})

const IndicatorGroup = ({
label,
styleObj,
indicatorType,
}: {
label: string
styleObj: object
indicatorType?: "valid" | "caution"
}) => {
const IndicatorIcon = ({ style }) => {
if (indicatorType === "valid") {
return <GreenCheckProductGlyphIcon style={style} />
}

if (indicatorType === "caution") {
return <CautionProductGlyphIcon style={style} />
}

return <WarningProductGlyphIcon style={style} />
}
return (
<VStack
spacing={2}
flex={1}
width={{ base: "fit-content", sm: "max-content" }}
>
<IndicatorIcon style={styleObj} />
<Text
fontSize="xs"
textAlign="center"
width={{ base: "fit-content", sm: "max-content" }}
>
<Translation id={label} />
</Text>
</VStack>
)
}

export interface IProps {
page: "solo" | "saas" | "pools"
}

const StakingConsiderations: React.FC<IProps> = ({ page }) => {
const {
StyledSvg,
caution,
description,
dropdownLinks,
handleSelection,
indicatorSvgStyle,
selectionSvgStyle,
title,
valid,
warning,
pageData,
activeIndex,
} = useStakingConsiderations({ page })

return (
<Flex flexDir={{ base: "column", md: "row" }} gap={8}>
<ChakraButtonDropdown list={dropdownLinks} />
{/* TODO: Improve a11y */}
<Box flex={1} hideBelow="md">
{!!pageData && (
<List m={0}>
{/* TODO: Make mobile responsive */}
{pageData.map(({ title, matomo }, idx) => (
<ListItem
key={idx}
onClick={(e) => {
handleSelection(idx)
trackCustomEvent(matomo)
}}
py={1}
px={2}
cursor="pointer"
h={8}
position="relative"
{...(idx === activeIndex
? {
bg: "primary",
color: "background",
_after: {
content: `''`,
position: "absolute",
height: 0,
width: 0,
top: 0,
left: "100%",
border: "1rem solid transparent",
borderLeftColor: "primary",
},
}
: { color: "primary" })}
>
{title}
</ListItem>
))}
</List>
)}
</Box>
<Flex
alignItems="center"
flexDir="column"
bg="offBackground"
flex={2}
minH="410px"
p={6}
>
<StyledSvg style={selectionSvgStyle} />
<Heading
as="h3"
fontWeight={700}
fontSize="27px"
lineHeight={1.4}
mt={10}
>
{title}
</Heading>
<Text>{description}</Text>
<Flex gap={8} justifyContent="center" mt="auto">
{!!valid && (
<IndicatorGroup
label={valid}
styleObj={indicatorSvgStyle}
indicatorType="valid"
/>
)}
{!!caution && (
<IndicatorGroup
label={caution}
styleObj={indicatorSvgStyle}
indicatorType="caution"
/>
)}
{!!warning && (
<IndicatorGroup label={warning} styleObj={indicatorSvgStyle} />
)}
</Flex>
</Flex>
</Flex>
)
}

export default StakingConsiderations
186 changes: 20 additions & 166 deletions ...ponents/Staking/StakingConsiderations.tsx → ...iderations/use-staking-considerations.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,23 @@
import React, { useState } from "react"
import { useState } from "react"
import styled from "@emotion/styled"
import { useTranslation } from "gatsby-plugin-react-i18next"
// SVG imports
import {
AuditedIcon,
BattleTestedIcon,
BugBountyIcon,
CautionProductGlyphIcon,
EconomicalIcon,
GreenCheckProductGlyphIcon,
LiquidityTokenIcon,
MultiClientIcon,
OpenSourceStakingIcon,
PermissionlessIcon,
SelfCustodyIcon,
TrustlessIcon,
WarningProductGlyphIcon,
} from "../icons/staking"
} from "../../icons/staking"
// Component imports
import ButtonDropdown, { List as ButtonDropdownList } from "../ButtonDropdown"
import Translation from "../Translation"
import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"

const Container = styled.div`
display: flex;
gap: 2rem;
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
flex-direction: column;
}
`

const List = styled.div`
flex: 1;
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
display: none;
}
`

// TODO: Make mobile responsive

const ListItem = styled.li<{ active: boolean }>`
padding: 0.125rem 0.5rem;
cursor: pointer;
box-sizing: border-box;
position: relative;
height: 2rem;
${({ theme, active }) =>
active
? `
background: ${theme.colors.primary};
color: ${theme.colors.background};
&::after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border: 1rem solid transparent;
border-left: 1rem solid ${theme.colors.primary};
}`
: `
color: ${theme.colors.primary};
`};
`

const StyledButtonDropdown = styled(ButtonDropdown)`
display: none;
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
display: inline-block;
}
`

const Content = styled.div`
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
min-height: 410px;
background: ${({ theme }) => theme.colors.offBackground};
padding: 1.5rem;
h3 {
font-weight: 700;
font-size: 27px;
}
`

const IndicatorRow = styled.div`
display: flex;
gap: 2rem;
justify-content: center;
margin-top: auto;
`

const Indicator = styled.div`
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: max-content;
@media (max-width: ${({ theme }) => theme.breakpoints.s}) {
width: fit-content;
}
p {
font-size: 0.75rem;
padding: 0;
text-align: center;
width: max-content;
@media (max-width: ${({ theme }) => theme.breakpoints.s}) {
width: fit-content;
}
}
`
import { List as ButtonDropdownList } from "../../ButtonDropdown"
import { MatomoEventOptions } from "../../../utils/matomo"
import { IProps } from "."

type DataType = {
title: string
Expand All @@ -129,11 +29,7 @@ type DataType = {
matomo: MatomoEventOptions
}

export interface IProps {
page: "solo" | "saas" | "pools"
}

const StakingConsiderations: React.FC<IProps> = ({ page }) => {
export const useStakingConsiderations = ({ page }: IProps) => {
const { t } = useTranslation()
const [activeIndex, setActiveIndex] = useState(0)

Expand Down Expand Up @@ -488,60 +384,18 @@ const StakingConsiderations: React.FC<IProps> = ({ page }) => {
display: none;
`

return (
<Container>
<StyledButtonDropdown list={dropdownLinks} />
<List>
{!!pageData && (
<ul>
{pageData.map(({ title, matomo }, idx) => (
<ListItem
key={idx}
onClick={(e) => {
handleSelection(idx)
trackCustomEvent(matomo)
}}
active={idx === activeIndex}
>
{title}
</ListItem>
))}
</ul>
)}
</List>
<Content>
<StyledSvg style={selectionSvgStyle} />
<h3>{title}</h3>
<p>{description}</p>
<IndicatorRow>
{!!valid && (
<Indicator>
<GreenCheckProductGlyphIcon style={indicatorSvgStyle} />
<p>
<Translation id={valid} />
</p>
</Indicator>
)}
{!!caution && (
<Indicator>
<CautionProductGlyphIcon style={indicatorSvgStyle} />
<p>
<Translation id={caution} />
</p>
</Indicator>
)}
{!!warning && (
<Indicator>
<WarningProductGlyphIcon style={indicatorSvgStyle} />
<p>
<Translation id={warning} />
</p>
</Indicator>
)}
</IndicatorRow>
</Content>
</Container>
)
return {
title,
description,
valid,
caution,
warning,
dropdownLinks,
handleSelection,
selectionSvgStyle,
indicatorSvgStyle,
StyledSvg,
pageData,
activeIndex,
}
}

export default StakingConsiderations

0 comments on commit e93a499

Please sign in to comment.