Merge pull request #512 from ethereum/client-diversity-warning

Extract and re-use ClientDiversityWarning [Fixes #508]
ethereum · Jun 27, 2022 · 0a46a2e · 0a46a2e
2 parents 45ff870 + 95ad0b0
commit 0a46a2e
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 37 deletions.
diff --git a/src/components/ClientDiversityWarning.tsx b/src/components/ClientDiversityWarning.tsx
@@ -0,0 +1,54 @@
+// Libary imports
+import React from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+// Component imports
+import { Text } from './Text';
+import { Link } from './Link';
+
+const Container = styled(Text as any)`
+  background: #ffdeb32e;
+  border: 1px solid burlywood;
+  padding: 30px;
+  border-radius: 4px;
+`;
+
+export interface ClientDiversityWarningProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const ClientDiversityWarning = (props: ClientDiversityWarningProps) => {
+  const { children, className } = props;
+  return (
+    <Container className={className}>
+      {!!children && <p>{children}</p>}
+      <p>
+        <FormattedMessage
+          defaultMessage="Client diversity is extremely important for the network health of Ethereum:
+            A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has
+            a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to
+            slashing."
+        />
+      </p>
+      <p>
+        <FormattedMessage defaultMessage="If at all possible, consider running another client at this time to help protect yourself and the network." />
+      </p>
+      <ul>
+        <li>
+          <Link
+            to="https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/"
+            primary
+          >
+            <FormattedMessage defaultMessage="More on client diversity" />
+          </Link>
+        </li>
+        <li>
+          <Link to="https://clientdiversity.org/" primary>
+            <FormattedMessage defaultMessage="Latest data on network client usage" />
+          </Link>
+        </li>
+      </ul>
+    </Container>
+  );
+};
diff --git a/src/intl/compiled/en.json b/src/intl/compiled/en.json
@@ -485,6 +485,12 @@
       "value": "Nimbus key management documentation"
     }
   ],
+  "2rflCq": [
+    {
+      "type": 0,
+      "value": "Client diversity is extremely important for the network health of Ethereum: A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to slashing."
+    }
+  ],
   "2s0gAx": [
     {
       "type": 0,
@@ -1823,6 +1829,12 @@
       "value": "Try again"
     }
   ],
+  "FcCHp4": [
+    {
+      "type": 0,
+      "value": "Latest data on network client usage"
+    }
+  ],
   "Felr8P": [
     {
       "type": 0,
@@ -4403,6 +4415,12 @@
       "value": "How much will I be penalized for acting maliciously?"
     }
   ],
+  "cnQKC2": [
+    {
+      "type": 0,
+      "value": "Currently Geth is used by >66% of the network."
+    }
+  ],
   "cpxfOR": [
     {
       "type": 0,
@@ -5663,6 +5681,12 @@
       "value": "Before you start"
     }
   ],
+  "oF4os+": [
+    {
+      "type": 0,
+      "value": "Currently Prysm is used by >33% of the network."
+    }
+  ],
   "oLxfO1": [
     {
       "type": 0,
@@ -6611,12 +6635,6 @@
       "value": "We strongly recommended you complete these steps on the current testnet before Mainnet."
     }
   ],
-  "x8+8fi": [
-    {
-      "type": 0,
-      "value": "Currently the majority of validators run Prysm as their consensus client. Client diversity is extremely important for the network health of Ethereum: A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to slashing."
-    }
-  ],
   "xDyl3T": [
     {
       "type": 0,

diff --git a/src/intl/en.json b/src/intl/en.json
@@ -191,6 +191,9 @@
   "2iH8Zc": {
     "message": "Nimbus key management documentation"
   },
+  "2rflCq": {
+    "message": "Client diversity is extremely important for the network health of Ethereum: A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to slashing."
+  },
   "2s0gAx": {
     "message": "Configuring a Fee Recipient Address"
   },
@@ -692,6 +695,9 @@
   "FazwRl": {
     "message": "Try again"
   },
+  "FcCHp4": {
+    "message": "Latest data on network client usage"
+  },
   "Felr8P": {
     "message": "A {validatorClient} is the software that acts on behalf of the validator by holding and using its private key to make attestations about the state of the chain. A single validator client can hold many key pairs, controlling many validators."
   },
@@ -1683,6 +1689,9 @@
   "clxIWO": {
     "message": "How much will I be penalized for acting maliciously?"
   },
+  "cnQKC2": {
+    "message": "Currently Geth is used by >66% of the network."
+  },
   "cpxfOR": {
     "message": "What are withdrawal credentials?"
   },
@@ -2169,6 +2178,9 @@
   "o9QvTP": {
     "message": "Before you start"
   },
+  "oF4os+": {
+    "message": "Currently Prysm is used by >33% of the network."
+  },
   "oLxfO1": {
     "message": "Now that the keys are imported, all that is left to do (assuming your beacon node is already running) is to run the validator client."
   },
@@ -2544,9 +2556,6 @@
   "x4/9vY": {
     "message": "We strongly recommended you complete these steps on the current testnet before Mainnet."
   },
-  "x8+8fi": {
-    "message": "Currently the majority of validators run Prysm as their consensus client. Client diversity is extremely important for the network health of Ethereum: A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to slashing."
-  },
   "xDyl3T": {
     "description": "{ethereumorg} is a link to deposit contract page on ethereum.org",
     "message": "Cross check the deposit contract address against other websites – for example: Reddit, Twitter, and GitHub. There's also a list of trusted sources on {ethereumorg}"

diff --git a/src/pages/Clients/Consensus/Prysm.tsx b/src/pages/Clients/Consensus/Prysm.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import styled from 'styled-components';
 import prysmBg from '../../../static/prysmatic-bg.png';
 import {
   Hero,
@@ -11,39 +10,14 @@ import { PageTemplate } from '../../../components/PageTemplate';
 import { Text } from '../../../components/Text';
 import { Link } from '../../../components/Link';
 import { ClientMergeNotification } from '../../../components/ClientMergeNotification';
+import { ClientDiversityWarning } from '../../../components/ClientDiversityWarning';
 import { PRYSM_INSTALLATION_URL } from '../../../utils/envVars';
 
-const ClientDiversityWarning = styled(Text as any)`
-  background: #ffdeb32e;
-  border: 1px solid burlywood;
-  padding: 30px;
-  border-radius: 4px;
-`;
-
 // eslint-disable-next-line no-unused-vars
 export const PrysmDetails = ({ shortened }: { shortened?: boolean }) => (
   <>
     <ClientDiversityWarning>
-      <p>
-        <FormattedMessage
-          defaultMessage="Currently the majority of validators run Prysm as their consensus client.
-            Client diversity is extremely important for the network health of Ethereum:
-            A bug in a client with a share of over 33% can cause Ethereum to go offline. If the client has
-            a supermajority (>66%), a bug could cause the chain to incorrectly split, potentially leading to
-            slashing."
-        />
-      </p>
-      <p>
-        <FormattedMessage defaultMessage="If at all possible, consider running another client at this time to help protect yourself and the network." />
-      </p>
-      <p>
-        <Link
-          to="https://ethereum.org/en/developers/docs/nodes-and-clients/client-diversity/"
-          primary
-        >
-          <FormattedMessage defaultMessage="More on client diversity" />
-        </Link>
-      </p>
+      <FormattedMessage defaultMessage="Currently Prysm is used by >33% of the network." />
     </ClientDiversityWarning>
     <SectionTitle level={2} className="mb5">
       Prysm

diff --git a/src/pages/Clients/Execution/Geth.tsx b/src/pages/Clients/Execution/Geth.tsx
@@ -13,11 +13,16 @@ import { Code } from '../../../components/Code';
 import { Heading } from '../../../components/Heading';
 import { ClientMergeNotification } from '../../../components/ClientMergeNotification';
 import { IS_GOERLI } from '../../ConnectWallet/web3Utils';
+import { ClientDiversityWarning } from '../../../components/ClientDiversityWarning';
+
 import { IS_MAINNET } from '../../../utils/envVars';
 
 // eslint-disable-next-line no-unused-vars
 export const GethDetails = () => (
   <>
+    <ClientDiversityWarning>
+      <FormattedMessage defaultMessage="Currently Geth is used by >66% of the network." />
+    </ClientDiversityWarning>
     <SectionTitle level={2} className="mb5">
       Geth
     </SectionTitle>