Skip to content

Commit ae0edaa

Browse files
TylerAPfleddererTylerAPfledderer
committed
refactor(StakingConsiderations): migrate to Chakra
1 parent 8e4d5c0 commit ae0edaa

File tree

2 files changed

+194
-166
lines changed

2 files changed

+194
-166
lines changed

‎src/components/Staking/StakingConsiderations/index.tsx

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import React from "react"
2+
// SVG imports
3+
import {
4+
CautionProductGlyphIcon,
5+
GreenCheckProductGlyphIcon,
6+
WarningProductGlyphIcon,
7+
} from "../../icons/staking"
8+
// Component imports
9+
import ButtonDropdown from "../../ButtonDropdown"
10+
import Translation from "../../Translation"
11+
import { trackCustomEvent } from "../../../utils/matomo"
12+
import { useStakingConsiderations } from "./use-staking-considerations"
13+
import {
14+
Box,
15+
chakra,
16+
Flex,
17+
Heading,
18+
List,
19+
ListItem,
20+
Text,
21+
VStack,
22+
} from "@chakra-ui/react"
23+
24+
const ChakraButtonDropdown = chakra(ButtonDropdown, {
25+
baseStyle: {
26+
hideFrom: "md",
27+
},
28+
})
29+
30+
const IndicatorGroup = ({
31+
label,
32+
styleObj,
33+
indicatorType,
34+
}: {
35+
label: string
36+
styleObj: object
37+
indicatorType?: "valid" | "caution"
38+
}) => {
39+
const IndicatorIcon = ({ style }) => {
40+
if (indicatorType === "valid") {
41+
return <GreenCheckProductGlyphIcon style={style} />
42+
}
43+
44+
if (indicatorType === "caution") {
45+
return <CautionProductGlyphIcon style={style} />
46+
}
47+
48+
return <WarningProductGlyphIcon style={style} />
49+
}
50+
return (
51+
<VStack
52+
spacing={2}
53+
flex={1}
54+
width={{ base: "fit-content", sm: "max-content" }}
55+
>
56+
<IndicatorIcon style={styleObj} />
57+
<Text
58+
fontSize="xs"
59+
textAlign="center"
60+
width={{ base: "fit-content", sm: "max-content" }}
61+
>
62+
<Translation id={label} />
63+
</Text>
64+
</VStack>
65+
)
66+
}
67+
68+
export interface IProps {
69+
page: "solo" | "saas" | "pools"
70+
}
71+
72+
const StakingConsiderations: React.FC<IProps> = ({ page }) => {
73+
const {
74+
StyledSvg,
75+
caution,
76+
description,
77+
dropdownLinks,
78+
handleSelection,
79+
indicatorSvgStyle,
80+
selectionSvgStyle,
81+
title,
82+
valid,
83+
warning,
84+
pageData,
85+
activeIndex,
86+
} = useStakingConsiderations({ page })
87+
88+
return (
89+
<Flex flexDir={{ base: "column", md: "row" }} gap={8}>
90+
<ChakraButtonDropdown list={dropdownLinks} />
91+
{/* TODO: Improve a11y */}
92+
<Box flex={1} hideBelow="md">
93+
{!!pageData && (
94+
<List m={0}>
95+
{/* TODO: Make mobile responsive */}
96+
{pageData.map(({ title, matomo }, idx) => (
97+
<ListItem
98+
key={idx}
99+
onClick={(e) => {
100+
handleSelection(idx)
101+
trackCustomEvent(matomo)
102+
}}
103+
py={1}
104+
px={2}
105+
cursor="pointer"
106+
h={8}
107+
position="relative"
108+
{...(idx === activeIndex
109+
? {
110+
bg: "primary",
111+
color: "background",
112+
_after: {
113+
content: `''`,
114+
position: "absolute",
115+
height: 0,
116+
width: 0,
117+
top: 0,
118+
left: "100%",
119+
border: "1rem solid transparent",
120+
borderLeftColor: "primary",
121+
},
122+
}
123+
: { color: "primary" })}
124+
>
125+
{title}
126+
</ListItem>
127+
))}
128+
</List>
129+
)}
130+
</Box>
131+
<Flex
132+
alignItems="center"
133+
flexDir="column"
134+
bg="offBackground"
135+
flex={2}
136+
minH="410px"
137+
p={6}
138+
>
139+
<StyledSvg style={selectionSvgStyle} />
140+
<Heading
141+
as="h3"
142+
fontWeight={700}
143+
fontSize="27px"
144+
lineHeight={1.4}
145+
mt={10}
146+
>
147+
{title}
148+
</Heading>
149+
<Text>{description}</Text>
150+
<Flex gap={8} justifyContent="center" mt="auto">
151+
{!!valid && (
152+
<IndicatorGroup
153+
label={valid}
154+
styleObj={indicatorSvgStyle}
155+
indicatorType="valid"
156+
/>
157+
)}
158+
{!!caution && (
159+
<IndicatorGroup
160+
label={caution}
161+
styleObj={indicatorSvgStyle}
162+
indicatorType="caution"
163+
/>
164+
)}
165+
{!!warning && (
166+
<IndicatorGroup label={warning} styleObj={indicatorSvgStyle} />
167+
)}
168+
</Flex>
169+
</Flex>
170+
</Flex>
171+
)
172+
}
173+
174+
export default StakingConsiderations

‎src/components/Staking/StakingConsiderations.tsx renamed to ‎src/components/Staking/StakingConsiderations/use-staking-considerations.tsx

Lines changed: 20 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,23 @@
1-
import React, { useState } from "react"
1+
import { useState } from "react"
22
import styled from "@emotion/styled"
33
import { useTranslation } from "gatsby-plugin-react-i18next"
44
// SVG imports
55
import {
66
AuditedIcon,
77
BattleTestedIcon,
88
BugBountyIcon,
9-
CautionProductGlyphIcon,
109
EconomicalIcon,
11-
GreenCheckProductGlyphIcon,
1210
LiquidityTokenIcon,
1311
MultiClientIcon,
1412
OpenSourceStakingIcon,
1513
PermissionlessIcon,
1614
SelfCustodyIcon,
1715
TrustlessIcon,
18-
WarningProductGlyphIcon,
19-
} from "../icons/staking"
16+
} from "../../icons/staking"
2017
// Component imports
21-
import ButtonDropdown, { List as ButtonDropdownList } from "../ButtonDropdown"
22-
import Translation from "../Translation"
23-
import { MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
24-
25-
const Container = styled.div`
26-
display: flex;
27-
gap: 2rem;
28-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
29-
flex-direction: column;
30-
}
31-
`
32-
33-
const List = styled.div`
34-
flex: 1;
35-
ul {
36-
list-style-type: none;
37-
padding: 0;
38-
margin: 0;
39-
}
40-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
41-
display: none;
42-
}
43-
`
44-
45-
// TODO: Make mobile responsive
46-
47-
const ListItem = styled.li<{ active: boolean }>`
48-
padding: 0.125rem 0.5rem;
49-
cursor: pointer;
50-
box-sizing: border-box;
51-
position: relative;
52-
height: 2rem;
53-
${({ theme, active }) =>
54-
active
55-
? `
56-
background: ${theme.colors.primary};
57-
color: ${theme.colors.background};
58-
&::after{
59-
content:"";
60-
position:absolute;
61-
height:0;
62-
width:0;
63-
left:100%;
64-
top:0;
65-
border: 1rem solid transparent;
66-
border-left: 1rem solid ${theme.colors.primary};
67-
}`
68-
: `
69-
color: ${theme.colors.primary};
70-
`};
71-
`
72-
73-
const StyledButtonDropdown = styled(ButtonDropdown)`
74-
display: none;
75-
@media (max-width: ${({ theme }) => theme.breakpoints.m}) {
76-
display: inline-block;
77-
}
78-
`
79-
80-
const Content = styled.div`
81-
flex: 2;
82-
display: flex;
83-
flex-direction: column;
84-
align-items: center;
85-
min-height: 410px;
86-
background: ${({ theme }) => theme.colors.offBackground};
87-
padding: 1.5rem;
88-
h3 {
89-
font-weight: 700;
90-
font-size: 27px;
91-
}
92-
`
93-
94-
const IndicatorRow = styled.div`
95-
display: flex;
96-
gap: 2rem;
97-
justify-content: center;
98-
margin-top: auto;
99-
`
100-
101-
const Indicator = styled.div`
102-
display: flex;
103-
flex: 1;
104-
flex-direction: column;
105-
align-items: center;
106-
gap: 0.5rem;
107-
width: max-content;
108-
@media (max-width: ${({ theme }) => theme.breakpoints.s}) {
109-
width: fit-content;
110-
}
111-
p {
112-
font-size: 0.75rem;
113-
padding: 0;
114-
text-align: center;
115-
width: max-content;
116-
@media (max-width: ${({ theme }) => theme.breakpoints.s}) {
117-
width: fit-content;
118-
}
119-
}
120-
`
18+
import { List as ButtonDropdownList } from "../../ButtonDropdown"
19+
import { MatomoEventOptions } from "../../../utils/matomo"
20+
import { IProps } from "."
12121

12222
type DataType = {
12323
title: string
@@ -129,11 +29,7 @@ type DataType = {
12929
matomo: MatomoEventOptions
13030
}
13131

132-
export interface IProps {
133-
page: "solo" | "saas" | "pools"
134-
}
135-
136-
const StakingConsiderations: React.FC<IProps> = ({ page }) => {
32+
export const useStakingConsiderations = ({ page }: IProps) => {
13733
const { t } = useTranslation()
13834
const [activeIndex, setActiveIndex] = useState(0)
13935

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

491-
return (
492-
<Container>
493-
<StyledButtonDropdown list={dropdownLinks} />
494-
<List>
495-
{!!pageData && (
496-
<ul>
497-
{pageData.map(({ title, matomo }, idx) => (
498-
<ListItem
499-
key={idx}
500-
onClick={(e) => {
501-
handleSelection(idx)
502-
trackCustomEvent(matomo)
503-
}}
504-
active={idx === activeIndex}
505-
>
506-
{title}
507-
</ListItem>
508-
))}
509-
</ul>
510-
)}
511-
</List>
512-
<Content>
513-
<StyledSvg style={selectionSvgStyle} />
514-
<h3>{title}</h3>
515-
<p>{description}</p>
516-
<IndicatorRow>
517-
{!!valid && (
518-
<Indicator>
519-
<GreenCheckProductGlyphIcon style={indicatorSvgStyle} />
520-
<p>
521-
<Translation id={valid} />
522-
</p>
523-
</Indicator>
524-
)}
525-
{!!caution && (
526-
<Indicator>
527-
<CautionProductGlyphIcon style={indicatorSvgStyle} />
528-
<p>
529-
<Translation id={caution} />
530-
</p>
531-
</Indicator>
532-
)}
533-
{!!warning && (
534-
<Indicator>
535-
<WarningProductGlyphIcon style={indicatorSvgStyle} />
536-
<p>
537-
<Translation id={warning} />
538-
</p>
539-
</Indicator>
540-
)}
541-
</IndicatorRow>
542-
</Content>
543-
</Container>
544-
)
387+
return {
388+
title,
389+
description,
390+
valid,
391+
caution,
392+
warning,
393+
dropdownLinks,
394+
handleSelection,
395+
selectionSvgStyle,
396+
indicatorSvgStyle,
397+
StyledSvg,
398+
pageData,
399+
activeIndex,
400+
}
545401
}
546-
547-
export default StakingConsiderations

0 commit comments

Comments
 (0)