Skip to content

Commit

Permalink
Merge pull request #506 from ethereum/dev
Browse files Browse the repository at this point in the history
Release dev -> master
  • Loading branch information
wackerow authored Jun 13, 2022
2 parents 24a99ba + ef472f1 commit 00d849b
Show file tree
Hide file tree
Showing 40 changed files with 3,552 additions and 550 deletions.
6 changes: 0 additions & 6 deletions .env.pyrmont

This file was deleted.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"grommet-controls": "^2.0.4",
"grommet-icons": "^4.4.0",
"history": "^4.10.1",
"lodash": "^4.17.15",
"lodash": "^4.17.21",
"numeral": "^2.0.6",
"react": "^16.12.0",
"react-animate-on-scroll": "^2.1.5",
Expand Down
51 changes: 43 additions & 8 deletions src/Routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,17 @@ import {
TermsOfService,
Languages,
TopUpPage,
MergeReadiness,
} from './pages';
import ScrollToTop from './utils/ScrollToTop';
import { Prysm } from './pages/Clients/Consensus/Prysm';
import { Teku } from './pages/Clients/Consensus/Teku';
import { Nimbus } from './pages/Clients/Consensus/Nimbus';
import { Lighthouse } from './pages/Clients/Consensus/Lighthouse';
import { Besu } from './pages/Clients/Execution/Besu';
import { Nethermind } from './pages/Clients/Execution/Nethermind';
import { Erigon } from './pages/Clients/Execution/Erigon';
import { Geth } from './pages/Clients/Execution/Geth';

type RouteType = {
path: string;
Expand All @@ -44,16 +49,21 @@ export enum routesEnum {
uploadValidatorPage = '/upload-deposit-data',
transactionsPage = '/transactions',
FaqPage = '/faq',
prysm = '/prysm',
nimbus = '/nimbus',
besu = '/besu',
erigon = '/erigon',
geth = '/geth',
lighthouse = '/lighthouse',
nethermind = '/nethermind',
nimbus = '/nimbus',
prysm = '/prysm',
teku = '/teku',
phishingPage = '/phishing',
checklistPage = '/checklist',
topUpPage = '/top-up',
landingPage = '/',
notFoundPage = '/*',
languagesPage = '/languages',
mergeReadiness = '/merge-readiness',
}
const routes: RouteType[] = [
{
Expand Down Expand Up @@ -103,25 +113,45 @@ const routes: RouteType[] = [
component: FAQ,
},
{
path: routesEnum.teku,
path: routesEnum.besu,
exact: true,
component: Teku,
component: Besu,
},
{
path: routesEnum.prysm,
path: routesEnum.erigon,
exact: true,
component: Prysm,
component: Erigon,
},
{
path: routesEnum.nimbus,
path: routesEnum.geth,
exact: true,
component: Nimbus,
component: Geth,
},
{
path: routesEnum.lighthouse,
exact: true,
component: Lighthouse,
},
{
path: routesEnum.nethermind,
exact: true,
component: Nethermind,
},
{
path: routesEnum.nimbus,
exact: true,
component: Nimbus,
},
{
path: routesEnum.prysm,
exact: true,
component: Prysm,
},
{
path: routesEnum.teku,
exact: true,
component: Teku,
},
{
path: routesEnum.phishingPage,
exact: true,
Expand All @@ -142,6 +172,11 @@ const routes: RouteType[] = [
exact: true,
component: TopUpPage,
},
{
path: routesEnum.mergeReadiness,
exact: true,
component: MergeReadiness,
},
{ path: routesEnum.landingPage, exact: true, component: LandingPage },
// NOTE: this wildcard route must be the last index of the routes array
{ path: routesEnum.notFoundPage, component: NotFoundPage },
Expand Down
51 changes: 45 additions & 6 deletions src/components/AppBar.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { Box, DropButton } from 'grommet';
import { Menu, Language, FormDown } from 'grommet-icons';
Expand All @@ -26,7 +27,6 @@ import {
EL_TESTNET_NAME,
} from '../utils/envVars';
import useMobileCheck from '../hooks/useMobileCheck';
import { FormattedMessage } from 'react-intl';

const RainbowBackground = styled(Box)`
background-image: ${p => `linear-gradient(to right, ${p.theme.rainbow})`};
Expand Down Expand Up @@ -212,11 +212,29 @@ const _AppBar = ({ location }: RouteComponentProps) => {
}
dropAlign={{ top: 'bottom', right: 'right' }}
dropContent={
<Box pad="small">
<DropdownLink to={routesEnum.lighthouse}>Lighthouse</DropdownLink>
<DropdownLink to={routesEnum.nimbus}>Nimbus</DropdownLink>
<DropdownLink to={routesEnum.prysm}>Prysm</DropdownLink>
<DropdownLink to={routesEnum.teku}>Teku</DropdownLink>
<Box pad="medium">
<Text className="my10">
<b>Execution clients</b>
</Text>
<Box pad="small">
<DropdownLink to={routesEnum.besu}>Besu</DropdownLink>
<DropdownLink to={routesEnum.erigon}>Erigon</DropdownLink>
<DropdownLink to={routesEnum.geth}>Geth</DropdownLink>
<DropdownLink to={routesEnum.nethermind}>
Nethermind
</DropdownLink>
</Box>
<Text className="my10">
<b>Consensus clients</b>
</Text>
<Box pad="small">
<DropdownLink to={routesEnum.lighthouse}>
Lighthouse
</DropdownLink>
<DropdownLink to={routesEnum.nimbus}>Nimbus</DropdownLink>
<DropdownLink to={routesEnum.prysm}>Prysm</DropdownLink>
<DropdownLink to={routesEnum.teku}>Teku</DropdownLink>
</Box>
</Box>
}
/>
Expand Down Expand Up @@ -250,6 +268,16 @@ const _AppBar = ({ location }: RouteComponentProps) => {
<FormattedMessage defaultMessage="Top Up" />
</BarLinkText>
</Link>
<Link to={routesEnum.mergeReadiness} className="mx10 secondary-link">
<BarLinkText
level={4}
margin="none"
className="bar-link-text"
active={pathname === routesEnum.mergeReadiness}
>
<FormattedMessage defaultMessage="The Merge" />
</BarLinkText>
</Link>
</NavBarLinks>
<NavLinksRight>
{!mobile && (
Expand Down Expand Up @@ -321,6 +349,17 @@ const _AppBar = ({ location }: RouteComponentProps) => {
<DropdownLink to={routesEnum.languagesPage}>
<FormattedMessage defaultMessage="Languages" />
</DropdownLink>
<Text className="my20">
<b>
<FormattedMessage defaultMessage="Execution clients" />
</b>
</Text>
<DropdownLink to={routesEnum.besu}>Besu</DropdownLink>
<DropdownLink to={routesEnum.erigon}>Erigon</DropdownLink>
<DropdownLink to={routesEnum.geth}>Geth</DropdownLink>
<DropdownLink to={routesEnum.nethermind}>
Nethermind
</DropdownLink>
<Text className="my20">
<b>
<FormattedMessage defaultMessage="Consensus clients" />
Expand Down
61 changes: 61 additions & 0 deletions src/components/ClientMergeNotification.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from './Link';
import { Alert } from './Alert';
import { Text } from './Text';

export const ClientMergeNotification = (props: {
client: string;
isConsensus?: boolean;
}): JSX.Element => {
const { client, isConsensus = false } = props;
return (
<Alert variant="warning" className="my40">
<Text>
<FormattedMessage
defaultMessage="{client} is a {layerType}."
values={{
client,
layerType: (
<em>
{isConsensus ? (
<FormattedMessage defaultMessage="consensus client" />
) : (
<FormattedMessage defaultMessage="execution client" />
)}
</em>
),
}}
/>
</Text>
<Text className="my10">
{isConsensus ? (
<FormattedMessage
defaultMessage="Merge Readiness: In addition to a consensus client, after the Merge node operators must also run an {alternateClient} to remain active."
values={{
alternateClient: (
<Link primary inline to="/checklist/#el-client">
<FormattedMessage defaultMessage="execution client" />
</Link>
),
}}
/>
) : (
<FormattedMessage
defaultMessage="Merge Readiness: In addition to an execution client, after the Merge node operators must also run an {alternateClient} to remain active."
values={{
alternateClient: (
<Link primary inline to="/checklist/#cl-client">
<FormattedMessage defaultMessage="consensus client" />
</Link>
),
}}
/>
)}
</Text>
<Link primary inline to="/merge-readiness">
<FormattedMessage defaultMessage="Merge readiness checklist" />
</Link>
</Alert>
);
};
3 changes: 2 additions & 1 deletion src/components/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ const styles = `
color:inherit;
display: inherit;
text-decoration: none;
font-weight: 400;
&:hover {
font-weight: 400;
opacity: 0.8;
};
&:focus,
&:visited,
Expand Down
26 changes: 26 additions & 0 deletions src/components/MergeNotification.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { Link } from './Link';
import { Alert } from './Alert';

const StyledAlert = styled(Alert)`
text-align: center;
`;

export const MergeNotification = (): JSX.Element => {
return (
<StyledAlert variant="warning" round="none" pad="small">
<FormattedMessage
defaultMessage="Attention stakers: The Merge is approaching! Review the {mergeReadinessChecklist} to make sure you're ready."
values={{
mergeReadinessChecklist: (
<Link primary inline to="/merge-readiness">
<FormattedMessage defaultMessage="Merge readiness checklist" />
</Link>
),
}}
/>
</StyledAlert>
);
};
12 changes: 12 additions & 0 deletions src/components/NakedButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import styled from 'styled-components';

export const NakedButton = styled.button`
appearance: none;
background: none;
border: none;
color: inherit;
display: inline-block;
font: inherit;
padding: initial;
cursor: pointer;
`;
10 changes: 8 additions & 2 deletions src/components/PageTemplate.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import styled from 'styled-components';
import { Helmet } from 'react-helmet';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { AppBar } from './AppBar';
import { Heading } from './Heading';
import { Helmet } from 'react-helmet';
import { MergeNotification } from './MergeNotification';
import { routesEnum } from '../Routes';

const Content = styled.div`
width: 100%;
Expand Down Expand Up @@ -39,6 +41,9 @@ const _PageTemplate = ({
title,
header = title,
}: Props): JSX.Element => {
const isMergeReadinessPage = window.location.pathname
.substring(3)
.includes(routesEnum.mergeReadiness);
return (
<RainbowBackground>
<Helmet>
Expand All @@ -50,6 +55,7 @@ const _PageTemplate = ({
<meta property="twitter:description" content={description} />
</Helmet>
<AppBar />
{!isMergeReadinessPage && <MergeNotification />}
<Gutter>
<Content>
<Heading level={2} size="medium" color="blueDark" className="mb40">
Expand Down
20 changes: 20 additions & 0 deletions src/hooks/useKeyPress.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { useEffect } from 'react';

export const useKeyPress = (
targetKey: string,
handler: (event: KeyboardEvent) => void
) => {
const downHandler = (event: KeyboardEvent) => {
if (event.key === targetKey) {
handler(event);
}
};

useEffect(() => {
window.addEventListener('keydown', downHandler);
// Remove event listeners on cleanup
return () => {
window.removeEventListener('keydown', downHandler);
};
});
};
Loading

0 comments on commit 00d849b

Please sign in to comment.