Skip to content

Commit a3f001d

Browse files
pettinarippettinarip
committed
refactor the staking page to reuse already existing components from the use-case template
1 parent f769845 commit a3f001d

File tree

3 files changed

+82
-173
lines changed

3 files changed

+82
-173
lines changed

‎src/pages/staking/index.tsx

Lines changed: 49 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React, { ReactNode } from "react"
22
import { graphql, PageProps } from "gatsby"
33
import { useTranslation } from "gatsby-plugin-react-i18next"
4-
import { Box, Flex, Grid, Heading, useToken } from "@chakra-ui/react"
4+
import { Box, Flex, Grid, Heading, Show, useToken } from "@chakra-ui/react"
55

6-
import ButtonDropdown, {
7-
List as ButtonDropdownList,
8-
} from "../../components/ButtonDropdown"
6+
import { List as ButtonDropdownList } from "../../components/ButtonDropdown"
97
import ButtonLink from "../../components/ButtonLink"
108
import Card from "../../components/Card"
119
import Link from "../../components/Link"
@@ -20,12 +18,19 @@ import StakingCommunityCallout from "../../components/Staking/StakingCommunityCa
2018
import UpgradeTableOfContents from "../../components/UpgradeTableOfContents"
2119

2220
import { getImage } from "../../utils/image"
23-
21+
import type { TranslationKey } from "../../utils/translations"
2422
import type { ChildOnlyProp, Context } from "../../types"
2523

26-
const Content = (props: ChildOnlyProp) => (
27-
<Box p="1rem 2rem" w="full" {...props} />
28-
)
24+
// TODO: move these components to a new folder under /components
25+
import {
26+
ContentContainer,
27+
InfoColumn,
28+
InfoTitle,
29+
MobileButton,
30+
MobileButtonDropdown,
31+
Page,
32+
StyledButtonDropdown,
33+
} from "../../templates/use-cases"
2934

3035
const PageContainer = (props: ChildOnlyProp) => (
3136
<Flex flexDir="column" alignItems="center" w="full" m="0 auto" {...props} />
@@ -46,105 +51,6 @@ const HeroStatsWrapper = (props: ChildOnlyProp) => (
4651
/>
4752
)
4853

49-
const Page = (props: ChildOnlyProp) => (
50-
<Flex
51-
w="full"
52-
justifyContent="space-between"
53-
m="0 auto 4rem"
54-
pt={16}
55-
flexDirection={{ base: "column", lg: "row" }}
56-
{...props}
57-
/>
58-
)
59-
60-
const InfoTitle = (props: ChildOnlyProp) => (
61-
<Heading
62-
fontSize="5xl"
63-
fontWeight="700"
64-
lineHeight={1.4}
65-
textAlign="right"
66-
mt={0}
67-
display={{ base: "none", lg: "block" }}
68-
{...props}
69-
/>
70-
)
71-
72-
// InfoColumn shows above xl
73-
const InfoColumn = (props: ChildOnlyProp) => (
74-
<Flex
75-
flexDir="column"
76-
position="sticky"
77-
top="6.25rem"
78-
height="calc(100vh - 80px)"
79-
flex="0 1 330px"
80-
mx={8}
81-
display={{ base: "none", lg: "initial" }}
82-
{...props}
83-
/>
84-
)
85-
86-
const StyledButtonDropdown = ({
87-
list,
88-
...rest
89-
}: {
90-
list: ButtonDropdownList
91-
}) => (
92-
<Flex
93-
justifyContent="flex-end"
94-
textAlign="center"
95-
alignSelf={{ base: "auto", lg: "flex-end" }}
96-
mb={8}
97-
{...rest}
98-
>
99-
<ButtonDropdown list={list} />
100-
</Flex>
101-
)
102-
103-
// ButtonDropdown for mobile only
104-
const MobileButton = ({ list, ...rest }: { list: ButtonDropdownList }) => {
105-
const borderBoxShadowColor = useToken("colors", "border")
106-
107-
return (
108-
<Box
109-
position="sticky"
110-
bottom="0"
111-
w="full"
112-
bg="background"
113-
boxShadow={`0 -1px 0px ${borderBoxShadowColor}`}
114-
zIndex="99"
115-
p={8}
116-
mb={0}
117-
display={{ base: "block", lg: "none" }}
118-
{...rest}
119-
>
120-
<ButtonDropdown list={list} />
121-
</Box>
122-
)
123-
}
124-
125-
const ContentContainer = (props: { children: ReactNode; id: string }) => {
126-
const [mdBp, lgBp] = useToken("breakpoints", ["md", "lg"])
127-
128-
return (
129-
<Flex
130-
flex={`1 1 ${lgBp}`}
131-
flexBasis={mdBp}
132-
position="relative"
133-
padding={{ base: 0, md: "0 2rem 2rem" }}
134-
gap={8}
135-
direction="column"
136-
alignItems="center"
137-
sx={{
138-
"h2:first-of-type, & > div:first-of-type": {
139-
mt: 0,
140-
pt: 0,
141-
},
142-
}}
143-
{...props}
144-
></Flex>
145-
)
146-
}
147-
14854
const ComparisonGrid = (props: ChildOnlyProp) => {
14955
const gridAreas = {
15056
base: `"solo-title"
@@ -162,7 +68,7 @@ const ComparisonGrid = (props: ChildOnlyProp) => {
16268
"pool-risks"
16369
"pool-reqs"
16470
"pool-cta";`,
165-
lg: `"solo-title saas-title pool-title"
71+
xl: `"solo-title saas-title pool-title"
16672
"solo-rewards saas-rewards pool-rewards"
16773
"solo-risks saas-risks pool-risks"
16874
"solo-reqs saas-reqs pool-reqs"
@@ -172,7 +78,7 @@ const ComparisonGrid = (props: ChildOnlyProp) => {
17278
<Grid
17379
columnGap={12}
17480
gridAutoRows="minmax(64px, auto)"
175-
gridTemplateColumns={{ base: "1fr", lg: "repeat(3, 1fr)" }}
81+
gridTemplateColumns={{ base: "1fr", xl: "repeat(3, 1fr)" }}
17682
gridTemplateAreas={gridAreas}
17783
sx={{
17884
h4: {
@@ -242,6 +148,8 @@ const StakingPage = ({
242148
data,
243149
}: PageProps<Queries.StakingPageIndexQuery, Context>) => {
244150
const { t } = useTranslation()
151+
// TODO: Replace with direct token implementation after UI migration is completed
152+
const lgBp = useToken("breakpoints", "lg")
245153

246154
const heroContent = {
247155
title: t("page-staking-hero-title"),
@@ -368,15 +276,18 @@ const StakingPage = ({
368276
<StakingStatsBox />
369277
</HeroStatsWrapper>
370278
<Page>
371-
<InfoColumn>
372-
<StyledButtonDropdown list={dropdownLinks} />
373-
<InfoTitle>
374-
<Translation id="page-staking-dom-info-title" />
375-
</InfoTitle>
376-
<UpgradeTableOfContents items={tocArray} />
377-
</InfoColumn>
279+
{/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
280+
<Show above={lgBp}>
281+
<InfoColumn>
282+
<StyledButtonDropdown list={dropdownLinks} />
283+
<InfoTitle>
284+
<Translation id="page-staking-dom-info-title" />
285+
</InfoTitle>
286+
<UpgradeTableOfContents items={tocArray} />
287+
</InfoColumn>
288+
</Show>
378289
<ContentContainer id="content">
379-
<Content>
290+
<Box>
380291
<h2 id={tocItems.whatIsStaking.id}>
381292
{tocItems.whatIsStaking.title}
382293
</h2>
@@ -388,8 +299,8 @@ const StakingPage = ({
388299
<Translation id="page-staking-section-what-link" />
389300
</Link>
390301
</p>
391-
</Content>
392-
<Content>
302+
</Box>
303+
<Box>
393304
<h2 id={tocItems.whyStakeYourEth.id}>
394305
{tocItems.whyStakeYourEth.title}
395306
</h2>
@@ -407,8 +318,8 @@ const StakingPage = ({
407318
)
408319
)}
409320
</CardGrid>
410-
</Content>
411-
<Content>
321+
</Box>
322+
<Box>
412323
<h2 id={tocItems.howToStakeYourEth.id}>
413324
{tocItems.howToStakeYourEth.title}
414325
</h2>
@@ -418,15 +329,15 @@ const StakingPage = ({
418329
<p>
419330
<Translation id="page-staking-section-why-p2" />
420331
</p>
421-
</Content>
332+
</Box>
422333
<StakingHierarchy />
423-
<Content>
334+
<Box>
424335
<p style={{ marginTop: "1rem" }}>
425336
<Translation id="page-staking-hierarchy-subtext" />
426337
</p>
427-
</Content>
338+
</Box>
428339
<Divider />
429-
<Content>
340+
<Box>
430341
<h2 id={tocItems.comparisonOfOptions.id}>
431342
{tocItems.comparisonOfOptions.title}
432343
</h2>
@@ -619,10 +530,10 @@ const StakingPage = ({
619530
/>
620531
</div>
621532
</ComparisonGrid>
622-
</Content>
533+
</Box>
623534
<Divider />
624535
<StakingCommunityCallout id={tocItems.joinTheCommunity.id} />
625-
<Content>
536+
<Box>
626537
<h2 id={tocItems.faq.id}>{tocItems.faq.title}</h2>
627538
<ExpandableCard title={t("page-staking-faq-4-question")}>
628539
<p>
@@ -663,8 +574,8 @@ const StakingPage = ({
663574
<Translation id="page-staking-faq-3-answer-p2" />
664575
</p>
665576
</ExpandableCard>
666-
</Content>
667-
<Content>
577+
</Box>
578+
<Box>
668579
<h2 id={tocItems.further.id}>{tocItems.further.title}</h2>
669580
<ul>
670581
<li>
@@ -738,12 +649,17 @@ const StakingPage = ({
738649
</Link>
739650
</li>
740651
</ul>
741-
</Content>
742-
<Content>
652+
</Box>
653+
<Box>
743654
<FeedbackCard />
744-
</Content>
655+
</Box>
745656
</ContentContainer>
746-
<MobileButton list={dropdownLinks} />
657+
{/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
658+
<Show below={lgBp}>
659+
<MobileButton>
660+
<MobileButtonDropdown list={dropdownLinks} />
661+
</MobileButton>
662+
</Show>
747663
</Page>
748664
</PageContainer>
749665
)

‎src/templates/staking.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import { ChildOnlyProp, Context } from "../types"
6363
import {
6464
ContentContainer,
6565
InfoColumn,
66+
InfoTitle,
6667
MobileButton,
6768
MobileButtonDropdown,
6869
Page,
@@ -155,18 +156,6 @@ const Pre = (props: ChildOnlyProp) => (
155156
/>
156157
)
157158

158-
const InfoTitle = (props: ChildOnlyProp) => (
159-
<Heading
160-
fontSize="5xl"
161-
lineHeight={1.4}
162-
fontWeight="bold"
163-
textAlign="right"
164-
mt={0}
165-
hideBelow="lg"
166-
{...props}
167-
/>
168-
)
169-
170159
const H2 = (props: ChildOnlyProp) => (
171160
<Heading
172161
fontSize="2rem"

0 commit comments

Comments
 (0)