diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index dd48c13bb21..00000000000 --- a/.prettierrc +++ /dev/null @@ -1,10 +0,0 @@ -{ - "endOfLine": "lf", - "semi": false, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "es5", - "plugins": [ - "prettier-plugin-tailwindcss" - ] -} \ No newline at end of file diff --git a/public/content/developers/docs/nodes-and-clients/client-diversity/index.md b/public/content/developers/docs/nodes-and-clients/client-diversity/index.md index 4e234ecca24..c0710dc3960 100644 --- a/public/content/developers/docs/nodes-and-clients/client-diversity/index.md +++ b/public/content/developers/docs/nodes-and-clients/client-diversity/index.md @@ -39,20 +39,52 @@ Although these are unlikely scenarios, the Ethereum eco-system can mitigate thei There is also a human cost to having majority clients. It puts excess strain and responsibility on a small development team. The lesser the client diversity, the greater the burden of responsibility for the developers maintaining the majority client. Spreading this responsibility across multiple teams is good for both the health of Ethereum's network of nodes and its network of people. -## Current client diversity {#current-client-diversity} - -![Pie chart showing client diversity](./client-diversity.png) -_Diagram data from [ethernodes.org](https://ethernodes.org) and [clientdiversity.org](https://clientdiversity.org/)_ - -The two pie charts above show snapshots of the current client diversity for the execution and consensus layers (at time of writing in January 2022). The execution layer is overwhelmingly dominated by [Geth](https://geth.ethereum.org/), with [Open Ethereum](https://openethereum.github.io/) a distant second, [Erigon](https://github.com/ledgerwatch/erigon) third and [Nethermind](https://nethermind.io/) fourth, with other clients comprising less than 1 % of the network. The most commonly used client on the consensus layer - [Prysm](https://prysmaticlabs.com/#projects) - is not as dominant as Geth but still represents over 60% of the network. [Lighthouse](https://lighthouse.sigmaprime.io/) and [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) make up ~20% and ~14% respectively, and other clients are rarely used. - -The execution layer data were obtained from [Ethernodes](https://ethernodes.org) on 23-Jan-2022. Data for consensus clients was obtained from [Michael Sproul](https://github.com/sigp/blockprint). Consensus client data is more difficult to obtain because the consensus layer clients do not always have unambiguous traces that can be used to identify them. The data was generated using a classification algorithm that sometimes confuses some of the minority clients (see [here](https://twitter.com/sproulM_/status/1440512518242197516) for more details). In the diagram above, these ambiguous classifications are treated with an either/or label (e.g. Nimbus/Teku). Nevertheless, it is clear that the majority of the network is running Prysm. The data is a snapshot over a fixed set of blocks (in this case Beacon blocks in slots 2048001 to 2164916) and Prysm's dominance has sometimes been higher, exceeding 68%. Despite only being snapshots, the values in the diagram provide a good general sense of the current state of client diversity. +### Current client diversity {#current-client-diversity} + +
+
+ +
+
+ +
+
+ +
+ _This diagram may be outdated — go to [ethernodes.org](https://ethernodes.org) and [clientdiversity.org](https://clientdiversity.org/) for up‑to‑date information._ +
+ + +The two pie charts above show snapshots of the current client diversity for the execution and consensus layers (at time of writing in April 2025). Client diversity has improved over the years, and the execution layer has seen a reduction in the domination by [Geth](https://geth.ethereum.org/), with [Nethermind](https://www.nethermind.io/nethermind-client) a close second, [Besu](https://besu.hyperledger.org/) third and [Erigon](https://github.com/ledgerwatch/erigon) fourth, with other clients comprising less than 3 % of the network. The most commonly used client on the consensus layer - [Prysm](https://prysmaticlabs.com/#projects) - is quite close with the second most used. [Lighthouse](https://lighthouse.sigmaprime.io/) and [Teku](https://consensys.net/knowledge-base/ethereum-2/teku/) make up ~34% and ~21% respectively, and other clients are rarely used. + +The execution layer data were obtained from [supermajority.info](https://supermajority.info/) on 18-Apr-2025. Data for consensus clients was obtained from [Michael Sproul](https://github.com/sigp/blockprint). Consensus client data is more difficult to obtain because the consensus layer clients do not always have unambiguous traces that can be used to identify them. The data was generated using a classification algorithm that sometimes confuses some of the minority clients (see [here](https://twitter.com/sproulM_/status/1440512518242197516) for more details). In the diagram above, these ambiguous classifications are treated with an either/or label (e.g. Nimbus/Teku). Nevertheless, it is clear that the majority of the network is running Prysm. Despite only being snapshots, the values in the diagram provide a good general sense of the current state of client diversity. Up to date client diversity data for the consensus layer is now available at [clientdiversity.org](https://clientdiversity.org/). ## Execution layer {#execution-layer} -Until now, the conversation around client diversity has focused mainly on the consensus layer. However, the execution client [Geth](https://geth.ethereum.org) currently accounts for around 85% of all nodes. This percentage is problematic for the same reasons as for consensus clients. For example, a bug in Geth affecting transaction handling or constructing execution payloads could lead to consensus clients finalizing problematic or bugged transactions. Therefore, Ethereum would be healthier with a more even distribution of execution clients, ideally with no client representing more than 33% of the network. +Until now, the conversation around client diversity has focused mainly on the consensus layer. However, the execution client [Geth](https://geth.ethereum.org) currently accounts for around 41% of all nodes. This percentage is problematic for the same reasons as for consensus clients. For example, a bug in Geth affecting transaction handling or constructing execution payloads could lead to consensus clients finalizing problematic or bugged transactions. Therefore, Ethereum would be healthier with a more even distribution of execution clients, ideally with no client representing more than 33% of the network. ## Use a minority client {#use-minority-client} @@ -66,6 +98,8 @@ Addressing client diversity requires more than individual users to choose minori [Erigon](https://github.com/ledgerwatch/erigon) +[Reth](https://github.com/paradigmxyz/reth) + [Go-Ethereum](https://geth.ethereum.org/) ### Consensus clients {#consensus-clients} diff --git a/src/components/MdComponents/index.tsx b/src/components/MdComponents/index.tsx index b4aaa04c867..902efb73f3b 100644 --- a/src/components/MdComponents/index.tsx +++ b/src/components/MdComponents/index.tsx @@ -4,6 +4,7 @@ import type { ChildOnlyProp } from "@/lib/types" import Contributors from "@/components/Contributors" import MarkdownImage from "@/components/MarkdownImage" +import { PieChart } from "@/components/PieChart" import TooltipLink from "@/components/TooltipLink" import YouTube from "@/components/YouTube" @@ -166,6 +167,7 @@ export const reactComponents = { GlossaryTooltip, InfoBanner, Page, + PieChart, QuizWidget: StandaloneQuizWidget, IssuesList, Tag, diff --git a/src/components/PieChart/index.tsx b/src/components/PieChart/index.tsx new file mode 100644 index 00000000000..c48ebdf633a --- /dev/null +++ b/src/components/PieChart/index.tsx @@ -0,0 +1,150 @@ +"use client"; + +import { FaArrowTrendUp } from "react-icons/fa6"; +import { + Cell, + Legend, + Pie, + PieChart as RechartsPieChart, + ResponsiveContainer, +} from "recharts"; + +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { + ChartConfig, + ChartContainer, + ChartTooltip, + ChartTooltipContent, +} from "@/components/ui/chart"; + +type PieChartDataPoint = { name: string; value: number }; + +/** + * PieChartProps defines the properties for the PieChart component. + * + * @property {PieChartDataPoint[]} data - The data to be displayed in the chart. Each object should have a `name` and `value` property. + * @property {string} [title] - The title of the chart. + * @property {string} [description] - The description of the chart. + * @property {string} [footerText] - The footer text of the chart. + * @property {string} [footerSubText] - The footer subtext of the chart. + */ +type PieChartProps = { + data: PieChartDataPoint[]; + title?: string; + description?: string; + footerText?: string; + footerSubText?: string; +}; + +const defaultChartConfig = { + value: { + label: "Value", + color: "hsl(var(--accent-a))", + }, +} satisfies ChartConfig; + +const COLORS = [ + "hsla(var(--accent-a))", + "hsla(var(--accent-b))", + "hsla(var(--accent-c))", +]; +/* +PieChart component renders a pie chart with the provided data, utilizing accent colors, +and a vertical legend positioned to the right. +*/ + +export function PieChart({ + data, + title, + description, + footerText, + footerSubText, +}: PieChartProps) { + return ( + + + {title && {title}} + {description && {description}} + + + +
+ + + } + /> + { + const payload = + entry.payload as unknown as PieChartDataPoint; + // Format to 2 decimal places if needed + const formattedValue = Number.isInteger(payload.value) + ? payload.value + : payload.value.toFixed(2); + return `${value} (${formattedValue}%)`; + }} + /> + + {data.map((_, index) => ( + + ))} + + + +
+ + + {(footerText || footerSubText) && ( + +
+
+ {footerText && ( +
+ {footerText} +
+ )} + {footerSubText && ( +
+ {footerSubText} +
+ )} +
+
+ + )} + + ); +}