Skip to content

Commit 8919535

Browse files
pettinarippettinarip
authored
Merge pull request #144 from ethereum/bug-bounty-page
Implement Bug Bounty page
2 parents 5b69794 + 25a64cd commit 8919535

19 files changed

+1414
-260
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
* @wackerow @corwintines @pettinarip @minimalsm @nhsz
99

1010
# Owners of specific files
11-
/src/data/consensus-bounty-hunters.csv @djrtwo @asanso @fredriksvantes
11+
/src/data/consensus-bounty-hunters.json @djrtwo @asanso @fredriksvantes

‎src/components/Breadcrumbs/Breadcrumbs.stories.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import * as React from "react"
21
import { Stack } from "@chakra-ui/react"
32
import { Meta, StoryObj } from "@storybook/react"
43

54
import BreadcrumbsComponent from "."
65

7-
type BreadcumbsType = typeof BreadcrumbsComponent
6+
type BreadcrumbsType = typeof BreadcrumbsComponent
87

9-
const meta: Meta<BreadcumbsType> = {
8+
const meta: Meta<BreadcrumbsType> = {
109
title: "Molecules / Navigation / Breadcrumbs",
1110
component: BreadcrumbsComponent,
1211
}

‎src/components/Breadcrumbs/index.tsx

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
1-
import React from "react"
21
import { useRouter } from "next/router"
32
import { useTranslation } from "next-i18next"
43
import {
54
Breadcrumb,
65
BreadcrumbItem,
76
BreadcrumbLink,
8-
BreadcrumbProps,
7+
type BreadcrumbProps as ChakraBreadcrumbProps,
98
} from "@chakra-ui/react"
109

11-
import { BaseLink } from "../Link"
10+
import { BaseLink } from "@/components/Link"
1211

13-
export interface IProps extends BreadcrumbProps {
12+
export type BreadcrumbsProps = ChakraBreadcrumbProps & {
1413
slug: string
1514
startDepth?: number
1615
}
1716

18-
interface Crumb {
17+
type Crumb = {
1918
fullPath: string
2019
text: string
2120
}
@@ -33,12 +32,12 @@ interface Crumb {
3332
// { fullPath: "/en/eth2/", text: "ETH2" },
3433
// { fullPath: "/en/eth2/proof-of-stake/", text: "PROOF OF STAKE" },
3534
// ]
36-
const Breadcrumbs: React.FC<IProps> = ({
35+
const Breadcrumbs = ({
3736
slug: originalSlug,
3837
startDepth = 0,
39-
...restProps
40-
}) => {
41-
const { t } = useTranslation()
38+
...props
39+
}: BreadcrumbsProps) => {
40+
const { t } = useTranslation(["common", "page-index"])
4241
const { locale, asPath } = useRouter()
4342

4443
const hasHome = asPath !== "/"
@@ -57,28 +56,27 @@ const Breadcrumbs: React.FC<IProps> = ({
5756
]
5857
: []),
5958
,
60-
...sliced.map((path, idx) => {
61-
return {
62-
fullPath: slugChunk.slice(0, idx + 2).join("/") + "/",
63-
text: t(path),
64-
}
65-
}),
59+
...sliced.map((path, idx) => ({
60+
fullPath: slugChunk.slice(0, idx + 2).join("/") + "/",
61+
text: t(path),
62+
})),
6663
]
6764
.filter((item): item is Crumb => !!item)
6865
.slice(startDepth)
6966

7067
return (
71-
<Breadcrumb {...restProps}>
72-
{crumbs.map((crumb, idx) => {
73-
const isCurrentPage = slug === crumb.fullPath
68+
<Breadcrumb dir="auto" {...props}>
69+
{crumbs.map(({ fullPath, text }) => {
70+
const isCurrentPage = slug === fullPath
7471
return (
75-
<BreadcrumbItem key={idx} isCurrentPage={isCurrentPage}>
72+
<BreadcrumbItem key={fullPath} isCurrentPage={isCurrentPage}>
7673
<BreadcrumbLink
7774
as={BaseLink}
78-
to={crumb.fullPath}
75+
to={fullPath}
7976
isPartiallyActive={isCurrentPage}
77+
textTransform="uppercase"
8078
>
81-
{crumb.text.toUpperCase()}
79+
{text}
8280
</BreadcrumbLink>
8381
</BreadcrumbItem>
8482
)

‎src/components/BugBountyCards.tsx

Lines changed: 104 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
1-
import React from "react"
1+
import { useTranslation } from "next-i18next"
22
import {
33
Box,
4-
BoxProps,
4+
type BoxProps,
55
Center,
6-
CenterProps,
6+
type CenterProps,
77
Divider,
88
Flex,
9-
FlexProps,
9+
type FlexProps,
1010
Heading,
11-
HeadingProps,
12-
TextProps,
11+
type HeadingProps,
12+
type TextProps,
1313
useToken,
1414
} from "@chakra-ui/react"
1515

16-
import { TranslationKey } from "../utils/translations"
16+
import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
1717

18-
import { ButtonLink } from "./Buttons"
19-
import Text from "./OldText"
20-
import Translation from "./Translation"
18+
import { ButtonLink, type ButtonLinkProps } from "@/components/Buttons"
19+
import Text from "@/components/OldText"
2120

22-
const CardRow = ({ children }) => (
23-
<Flex justifyContent="space-between" my={16} mx={4} flexWrap="wrap">
21+
const CardRow = ({ children }: ChildOnlyProp) => (
22+
<Flex justifyContent="space-between" my="16" mx="4" flexWrap="wrap">
2423
{children}
2524
</Flex>
2625
)
2726

28-
const SubmitBugBountyButton = ({ children, ...props }) => (
29-
<ButtonLink m={4} to="https://forms.gle/Gnh4gzGh66Yc3V7G8" {...props}>
27+
const SubmitBugBountyButton = ({ children, ...props }: ButtonLinkProps) => (
28+
<ButtonLink m="4" to="https://forms.gle/Gnh4gzGh66Yc3V7G8" {...props}>
3029
{children}
3130
</ButtonLink>
3231
)
@@ -45,7 +44,7 @@ const Card = ({ children, ...props }: FlexProps) => {
4544
boxShadow={tableBoxShadow}
4645
border="1px solid"
4746
borderColor="border"
48-
m={4}
47+
m="4"
4948
_hover={{
5049
borderRadius: "base",
5150
boxShadow: "tableBoxHover",
@@ -97,8 +96,8 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
9796
borderBottom="1px solid"
9897
borderColor="border"
9998
fontSize="sm"
100-
px={0}
101-
py={1}
99+
px="0"
100+
py="1"
102101
textTransform="uppercase"
103102
{...variantStyleProps}
104103
{...props}
@@ -108,57 +107,49 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
108107
)
109108
}
110109

111-
const H2 = ({ children, ...props }: HeadingProps) => {
112-
return (
113-
<Heading
114-
fontSize="2xl"
115-
fontStyle="normal"
116-
fontWeight="bold"
117-
lineHeight="22px"
118-
letterSpacing={0}
119-
p={4}
120-
textAlign="start"
121-
mb={-2}
122-
mt={2}
123-
{...props}
124-
>
125-
{children}
126-
</Heading>
127-
)
128-
}
110+
const H2 = ({ children, ...props }: HeadingProps) => (
111+
<Heading
112+
fontSize="2xl"
113+
fontStyle="normal"
114+
fontWeight="bold"
115+
lineHeight="22px"
116+
letterSpacing="normal"
117+
p="4"
118+
textAlign="start"
119+
mb="-2"
120+
mt="2"
121+
{...props}
122+
>
123+
{children}
124+
</Heading>
125+
)
129126

130-
const Description = ({ children, ...props }: TextProps) => {
131-
return (
132-
<Text as="p" fontSize="xl" px={4} py={0} opacity="0.6" {...props}>
133-
{children}
134-
</Text>
135-
)
136-
}
127+
const Description = ({ children, ...props }: TextProps) => (
128+
<Text as="p" fontSize="xl" px="4" py="0" opacity="0.6" {...props}>
129+
{children}
130+
</Text>
131+
)
137132

138-
const SubHeader = ({ children, ...props }: TextProps) => {
139-
return (
140-
<Text
141-
as="p"
142-
textTransform="uppercase"
143-
fontSize="sm"
144-
ms={4}
145-
mt={4}
146-
mb={2}
147-
opacity="0.6"
148-
{...props}
149-
>
150-
{children}
151-
</Text>
152-
)
153-
}
133+
const SubHeader = ({ children, ...props }: TextProps) => (
134+
<Text
135+
as="p"
136+
textTransform="uppercase"
137+
fontSize="sm"
138+
ms="4"
139+
mt="4"
140+
mb="2"
141+
opacity="0.6"
142+
{...props}
143+
>
144+
{children}
145+
</Text>
146+
)
154147

155-
const TextBox = ({ children, ...props }: BoxProps) => {
156-
return (
157-
<Box m={4} mt={2} {...props}>
158-
{children}
159-
</Box>
160-
)
161-
}
148+
const TextBox = ({ children, ...props }: BoxProps) => (
149+
<Box m="4" mt="2" {...props}>
150+
{children}
151+
</Box>
152+
)
162153

163154
export interface BugBountyCardInfo {
164155
lowLabelTranslationId?: TranslationKey
@@ -169,13 +160,13 @@ export interface BugBountyCardInfo {
169160
descriptionTranslationId: TranslationKey
170161
subDescriptionTranslationId: TranslationKey
171162
subHeader1TranslationId: TranslationKey
172-
severityList: Array<TranslationKey>
163+
severityList: TranslationKey[]
173164
subHeader2TranslationId: TranslationKey
174165
textTranslationId: TranslationKey
175166
styledButtonTranslationId: TranslationKey
176167
}
177168

178-
const bugBountyCardsInfo: Array<BugBountyCardInfo> = [
169+
const bugBountyCardsInfo: BugBountyCardInfo[] = [
179170
{
180171
lowLabelTranslationId: "page-upgrades-bug-bounty-card-label-2",
181172
h2TranslationId: "page-upgrades-bug-bounty-card-low",
@@ -232,67 +223,51 @@ const bugBountyCardsInfo: Array<BugBountyCardInfo> = [
232223
},
233224
]
234225

235-
export interface IProps {}
236-
237-
const BugBountyCards: React.FC<IProps> = () => (
238-
<CardRow>
239-
{bugBountyCardsInfo.map((card, idx) => (
240-
<Card key={`bug-bounty-card-${idx}`}>
241-
{card.lowLabelTranslationId && (
242-
<Label variant="low">
243-
<Translation id={card.lowLabelTranslationId} />
244-
</Label>
245-
)}
246-
{card.mediumLabelTranslationId && (
247-
<Label variant="medium">
248-
<Translation id={card.mediumLabelTranslationId} />
249-
</Label>
250-
)}
251-
{card.highLabelTranslationId && (
252-
<Label variant="high">
253-
<Translation id={card.highLabelTranslationId} />
254-
</Label>
255-
)}
256-
{card.criticalLabelTranslationId && (
257-
<Label variant="critical">
258-
<Translation id={card.criticalLabelTranslationId} />
259-
</Label>
260-
)}
261-
<H2>
262-
<Translation id={card.h2TranslationId} />
263-
</H2>
264-
<Description>
265-
<Translation id={card.descriptionTranslationId} />
266-
</Description>
267-
<SubHeader>
268-
<Translation id={card.subDescriptionTranslationId} />
269-
</SubHeader>
270-
<Divider opacity="1" />
271-
<SubHeader>
272-
<Translation id={card.subHeader1TranslationId} />
273-
</SubHeader>
274-
<TextBox>
275-
<ul>
276-
{card.severityList.map((listItemId) => (
277-
<li key={`${listItemId}`}>
278-
<Translation id={listItemId} />
279-
</li>
280-
))}
281-
</ul>
282-
</TextBox>
283-
<Divider opacity="1" />
284-
<SubHeader>
285-
<Translation id={card.subHeader2TranslationId} />
286-
</SubHeader>
287-
<TextBox>
288-
<Translation id={card.textTranslationId} />
289-
</TextBox>
290-
<SubmitBugBountyButton>
291-
<Translation id={card.styledButtonTranslationId} />
292-
</SubmitBugBountyButton>
293-
</Card>
294-
))}
295-
</CardRow>
296-
)
226+
const BugBountyCards = () => {
227+
const { t } = useTranslation("page-bug-bounty")
228+
return (
229+
<CardRow>
230+
{bugBountyCardsInfo.map((card, idx) => (
231+
<Card key={`bug-bounty-card-${idx}`}>
232+
{card.lowLabelTranslationId && (
233+
<Label variant="low">{t(card.lowLabelTranslationId)}</Label>
234+
)}
235+
{card.mediumLabelTranslationId && (
236+
<Label variant="medium">{t(card.mediumLabelTranslationId)}</Label>
237+
)}
238+
{card.highLabelTranslationId && (
239+
<Label variant="high">{t(card.highLabelTranslationId)}</Label>
240+
)}
241+
{card.criticalLabelTranslationId && (
242+
<Label variant="critical">
243+
{t(card.criticalLabelTranslationId)}
244+
</Label>
245+
)}
246+
<H2>{t(card.h2TranslationId)}</H2>
247+
<Description>{t(card.descriptionTranslationId)}</Description>
248+
<SubHeader>{t(card.subDescriptionTranslationId)}</SubHeader>
249+
<Divider opacity="1" />
250+
<SubHeader>{t(card.subHeader1TranslationId)}</SubHeader>
251+
<TextBox>
252+
<ul>
253+
{card.severityList.map((listItemId) => (
254+
<li key={listItemId}>
255+
{t(listItemId)}
256+
{/* <Translation id={listItemId} /> */}
257+
</li>
258+
))}
259+
</ul>
260+
</TextBox>
261+
<Divider opacity="1" />
262+
<SubHeader>{t(card.subHeader2TranslationId)}</SubHeader>
263+
<TextBox>{t(card.textTranslationId)}</TextBox>
264+
<SubmitBugBountyButton>
265+
{t(card.styledButtonTranslationId)}
266+
</SubmitBugBountyButton>
267+
</Card>
268+
))}
269+
</CardRow>
270+
)
271+
}
297272

298273
export default BugBountyCards

0 commit comments

Comments
 (0)