Skip to content

Commit 696cb76

Browse files
pettinarippettinarip
authored
Merge pull request #174 from ethereum/staking-pages
Add Staking pages
2 parents e5f2bcd + 9048fe0 commit 696cb76

File tree

12 files changed

+1416
-284
lines changed

12 files changed

+1416
-284
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@emotion/react": "^11.11.1",
2323
"@emotion/styled": "^11.11.0",
2424
"clipboard": "^2.0.11",
25+
"ethereum-blockies-base64": "^1.0.2",
2526
"focus-trap-react": "^10.2.3",
2627
"framer-motion": "^10.13.0",
2728
"gray-matter": "^4.0.3",

‎src/components/LeftNavBar/index.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import React from "react"
2-
import { calc, Flex, FlexProps, HeadingProps } from "@chakra-ui/react"
1+
import { calc, Flex, type FlexProps, type HeadingProps } from "@chakra-ui/react"
2+
3+
import type { ToCItem } from "@/lib/types"
34

45
import ButtonDropdown, {
56
IProps as ButtonDropdownProps,
67
List as ButtonDropdownList,
7-
} from "../ButtonDropdown"
8-
import OldHeading from "../OldHeading"
9-
import Translation from "../Translation"
10-
import UpgradeTableOfContents from "../UpgradeTableOfContents"
8+
} from "@/components/ButtonDropdown"
9+
import OldHeading from "@/components/OldHeading"
10+
import Translation from "@/components/Translation"
11+
import UpgradeTableOfContents from "@/components/UpgradeTableOfContents"
1112

1213
export const H2 = (props: HeadingProps) => (
1314
<OldHeading
@@ -29,13 +30,13 @@ export const StyledButtonDropdown = ({
2930
</Flex>
3031
)
3132

32-
interface IProps extends FlexProps {
33+
type LeftNavBarProps = FlexProps & {
3334
dropdownLinks?: ButtonDropdownList
3435
maxDepth?: number
35-
tocItems: any[]
36+
tocItems: ToCItem[]
3637
}
3738

38-
const LeftNavBar: React.FC<IProps> = ({
39+
const LeftNavBar: React.FC<LeftNavBarProps> = ({
3940
dropdownLinks,
4041
maxDepth = 1,
4142
tocItems,

‎src/components/Staking/StakingHierarchy.tsx

Lines changed: 48 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { ReactNode } from "react"
2+
import { useTranslation } from "next-i18next"
23
import {
34
Box,
45
calc,
@@ -12,7 +13,8 @@ import {
1213
VStack,
1314
} from "@chakra-ui/react"
1415

15-
import { trackCustomEvent } from "../../utils/matomo"
16+
import { trackCustomEvent } from "@/lib/utils/matomo"
17+
1618
import { ButtonLink } from "../Buttons"
1719
import {
1820
StakingGlyphCentralizedIcon,
@@ -209,18 +211,17 @@ const Pills = ({ children }: ChildOnlyType) => (
209211
</Flex>
210212
)
211213

212-
const Glyph = ({ glyphIcon }: { glyphIcon: typeof Icon }) => {
213-
const Icon = glyphIcon
214-
return (
215-
<Center gridArea={{ base: "content", md: "glyph" }}>
216-
<Icon
217-
boxSize={{ base: "50%", md: "50px" }}
218-
color={$colorVar.reference}
219-
opacity={{ base: 0.1, md: "initial" }}
220-
/>
221-
</Center>
222-
)
223-
}
214+
type GlyphProps = { glyphIcon: typeof Icon }
215+
const Glyph = ({ glyphIcon }: GlyphProps) => (
216+
<Center gridArea={{ base: "content", md: "glyph" }}>
217+
<Icon
218+
as={glyphIcon}
219+
boxSize={{ base: "50%", md: "50px" }}
220+
color={$colorVar.reference}
221+
opacity={{ base: 0.1, md: "initial" }}
222+
/>
223+
</Center>
224+
)
224225

225226
const Content = ({ children }: ChildOnlyType) => (
226227
<Box
@@ -239,9 +240,8 @@ const Content = ({ children }: ChildOnlyType) => (
239240
</Box>
240241
)
241242

242-
export interface IProps {}
243-
244-
const StakingHierarchy: React.FC<IProps> = () => {
243+
const StakingHierarchy = () => {
244+
const { t } = useTranslation("page-staking")
245245
const [stakingGold, stakingGreen, stakingBlue, stakingRed] = useToken(
246246
"colors",
247247
["stakingGold", "stakingGreen", "stakingBlue", "stakingRed"]
@@ -263,34 +263,22 @@ const StakingHierarchy: React.FC<IProps> = () => {
263263
<StyledEtherSvg size="100%" />
264264
<Line />
265265
<Header>
266-
<HeadingEl>
267-
<Translation id="page-staking-hierarchy-solo-h2" />
268-
</HeadingEl>
266+
<HeadingEl>{t("page-staking-hierarchy-solo-h2")}</HeadingEl>
269267
<Pills>
270268
<p>
271-
<em>
272-
<Translation id="page-staking-hierarchy-solo-pill-1" />
273-
</em>
274-
</p>
275-
<p>
276-
<Translation id="page-staking-hierarchy-solo-pill-2" />
277-
</p>
278-
<p>
279-
<Translation id="page-staking-hierarchy-solo-pill-3" />
280-
</p>
281-
<p>
282-
<Translation id="page-staking-hierarchy-solo-pill-4" />
269+
<em>{t("page-staking-hierarchy-solo-pill-1")}</em>
283270
</p>
271+
<p>{t("page-staking-hierarchy-solo-pill-2")}</p>
272+
<p>{t("page-staking-hierarchy-solo-pill-3")}</p>
273+
<p>{t("page-staking-hierarchy-solo-pill-4")}</p>
284274
</Pills>
285275
</Header>
286276
<Glyph glyphIcon={StakingGlyphCPUIcon} />
287277
<Content>
288278
<p>
289-
<Translation id="page-staking-hierarchy-solo-p1" />
290-
</p>
291-
<p>
292-
<Translation id="page-staking-hierarchy-solo-p2" />
279+
<Translation id="page-staking:page-staking-hierarchy-solo-p1" />
293280
</p>
281+
<p>{t("page-staking-hierarchy-solo-p2")}</p>
294282
<ButtonLink
295283
to="/staking/solo/"
296284
onClick={() => {
@@ -302,40 +290,26 @@ const StakingHierarchy: React.FC<IProps> = () => {
302290
}}
303291
width={{ base: "100%", md: "auto" }}
304292
>
305-
<Translation id="page-staking-more-on-solo" />
293+
{t("page-staking-more-on-solo")}
306294
</ButtonLink>
307295
</Content>
308296
</SectionGrid>
309297
<SectionGrid number={2}>
310298
<StyledEtherSvg size="90%" />
311299
<Line />
312300
<Header>
313-
<HeadingEl>
314-
<Translation id="page-staking-dropdown-saas" />
315-
</HeadingEl>
301+
<HeadingEl>{t("page-staking-dropdown-saas")}</HeadingEl>
316302
<Pills>
317-
<p>
318-
<Translation id="page-staking-hierarchy-saas-pill-1"></Translation>
319-
</p>
320-
<p>
321-
<Translation id="page-staking-hierarchy-saas-pill-2"></Translation>
322-
</p>
323-
<p>
324-
<Translation id="page-staking-hierarchy-saas-pill-3"></Translation>
325-
</p>
303+
<p>{t("page-staking-hierarchy-saas-pill-1")}</p>
304+
<p>{t("page-staking-hierarchy-saas-pill-2")}</p>
305+
<p>{t("page-staking-hierarchy-saas-pill-3")}</p>
326306
</Pills>
327307
</Header>
328308
<Glyph glyphIcon={StakingGlyphCloudIcon} />
329309
<Content>
330-
<p>
331-
<Translation id="page-staking-hierarchy-saas-p1" />
332-
</p>
333-
<p>
334-
<Translation id="page-staking-hierarchy-saas-p2" />
335-
</p>
336-
<p>
337-
<Translation id="page-staking-hierarchy-saas-p3" />
338-
</p>
310+
<p>{t("page-staking-hierarchy-saas-p1")}</p>
311+
<p>{t("page-staking-hierarchy-saas-p2")}</p>
312+
<p>{t("page-staking-hierarchy-saas-p3")}</p>
339313
<ButtonLink
340314
to="/staking/saas/"
341315
onClick={() => {
@@ -347,48 +321,30 @@ const StakingHierarchy: React.FC<IProps> = () => {
347321
}}
348322
width={{ base: "100%", md: "auto" }}
349323
>
350-
<Translation id="page-staking-more-on-saas" />
324+
{t("page-staking-more-on-saas")}
351325
</ButtonLink>
352326
</Content>
353327
</SectionGrid>
354328
<SectionGrid number={3}>
355329
<StyledEtherSvg size="80%" />
356330
<Line />
357331
<Header>
358-
<HeadingEl>
359-
<Translation id="page-staking-dropdown-pools" />
360-
</HeadingEl>
332+
<HeadingEl>{t("page-staking-dropdown-pools")}</HeadingEl>
361333
<Pills>
334+
<p>{t("page-staking-hierarchy-pools-pill-1")}</p>
335+
<p>{t("page-staking-hierarchy-pools-pill-2")}</p>
336+
<p>{t("page-staking-hierarchy-pools-pill-3")}</p>
362337
<p>
363-
<Translation id="page-staking-hierarchy-pools-pill-1" />
364-
</p>
365-
<p>
366-
<Translation id="page-staking-hierarchy-pools-pill-2" />
367-
</p>
368-
<p>
369-
<Translation id="page-staking-hierarchy-pools-pill-3" />
370-
</p>
371-
<p>
372-
<em>
373-
<Translation id="page-staking-hierarchy-pools-pill-4" />
374-
</em>
338+
<em>{t("page-staking-hierarchy-pools-pill-4")}</em>
375339
</p>
376340
</Pills>
377341
</Header>
378342
<Glyph glyphIcon={StakingGlyphTokenWalletIcon} />
379343
<Content>
380-
<p>
381-
<Translation id="page-staking-hierarchy-pools-p1" />
382-
</p>
383-
<p>
384-
<Translation id="page-staking-hierarchy-pools-p2" />
385-
</p>
386-
<p>
387-
<Translation id="page-staking-hierarchy-pools-p3" />
388-
</p>
389-
<p>
390-
<Translation id="page-staking-hierarchy-pools-p4" />
391-
</p>
344+
<p>{t("page-staking-hierarchy-pools-p1")}</p>
345+
<p>{t("page-staking-hierarchy-pools-p2")}</p>
346+
<p>{t("page-staking-hierarchy-pools-p3")}</p>
347+
<p>{t("page-staking-hierarchy-pools-p4")}</p>
392348
<ButtonLink
393349
to="/staking/pools/"
394350
onClick={() => {
@@ -400,38 +356,28 @@ const StakingHierarchy: React.FC<IProps> = () => {
400356
}}
401357
width={{ base: "100%", md: "auto" }}
402358
>
403-
<Translation id="page-staking-more-on-pools" />
359+
{t("page-staking-more-on-pools")}
404360
</ButtonLink>
405361
</Content>
406362
</SectionGrid>
407363
<SectionGrid number={4}>
408364
<StyledEtherSvg size="70%" />
409365
<Line />
410366
<Header>
411-
<HeadingEl>
412-
<Translation id="page-staking-hierarchy-cex-h2" />
413-
</HeadingEl>
367+
<HeadingEl>{t("page-staking-hierarchy-cex-h2")}</HeadingEl>
414368
<Pills>
415369
<p>
416-
<em>
417-
<Translation id="page-staking-hierarchy-cex-pill-1" />
418-
</em>
419-
</p>
420-
<p>
421-
<Translation id="page-staking-hierarchy-cex-pill-2" />
370+
<em>{t("page-staking-hierarchy-cex-pill-1")}</em>
422371
</p>
372+
<p>{t("page-staking-hierarchy-cex-pill-2")}</p>
423373
</Pills>
424374
</Header>
425375
<Glyph glyphIcon={StakingGlyphCentralizedIcon} />
426376
<Content>
377+
<p>{t("page-staking-hierarchy-cex-p1")}</p>
378+
<p>{t("page-staking-hierarchy-cex-p2")}</p>
427379
<p>
428-
<Translation id="page-staking-hierarchy-cex-p1" />
429-
</p>
430-
<p>
431-
<Translation id="page-staking-hierarchy-cex-p2" />
432-
</p>
433-
<p>
434-
<Translation id="page-staking-hierarchy-cex-p3" />
380+
<Translation id="page-staking:page-staking-hierarchy-cex-p3" />
435381
</p>
436382
</Content>
437383
</SectionGrid>

0 commit comments

Comments
 (0)