Epic: Merge prep [#480]

src/Routes.tsx

@@ -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;
@@ -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[] = [
   {
@@ -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,
@@ -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 },

src/components/AppBar.tsx

@@ -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';
@@ -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})`};
@@ -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>
           }
         />
@@ -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 && (
@@ -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" />

src/components/ClientMergeNotification.tsx

@@ -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>
+  );
+};

src/components/MergeNotification.tsx

@@ -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>
+  );
+};

src/components/PageTemplate.tsx

@@ -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%;
@@ -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>
@@ -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">