Skip to content

Commit e93a499

Browse files
pettinarippettinarip
authored
Merge pull request #10203 from TylerAPfledderer/refactor/staking-considerations-to-chakra
refactor(StakingConsiderations): migrate to Chakra
2 parents d94d2f3 + f4f855a commit e93a499

File tree

2 files changed

+196
-166
lines changed

2 files changed

+196
-166
lines changed

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

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