Merge pull request #9085 from ethereum/setupEnergyConsumptionChartTranslation

setup energy consumption chart labels for translation

Author: minimalsm

src/components/EnergyConsumptionChart.tsx

@@ -7,13 +7,14 @@ import {
   Cell,
   XAxis,
   Text,
-  CartesianGrid,
   LabelList,
   ResponsiveContainer,
   Legend,
 } from "recharts"
+import { useIntl } from "react-intl"
 import Translation from "./Translation"
 import { useWindowSize } from "../hooks/useWindowSize"
+import { translateMessageId } from "../utils/translations"
 
 interface ITickProps {
   x: number
@@ -43,6 +44,7 @@ const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
 }
 
 const EnergyConsumptionChart: React.FC = () => {
+  const intl = useIntl()
   const theme = useTheme()
   const [width] = useWindowSize()
 
@@ -59,58 +61,70 @@ const EnergyConsumptionChart: React.FC = () => {
   // TODO: Extract translatable strings
   const energyConsumptionChartData: Data = [
     {
-      name: "YouTube",
+      name: translateMessageId("energy-consumption-chart-youtube-label", intl),
       amount: 244,
       color: "#FF0000",
     },
     {
-      name: "Gold mining (Galaxy Digital)",
+      name: translateMessageId(
+        "energy-consumption-chart-gold-mining-galaxy-label",
+        intl
+      ),
       amount: 240,
       color: "#D7B14A",
       breakpoint: mediumBreakpoint,
     },
     {
-      name: "Global data centers",
+      name: translateMessageId(
+        "energy-consumption-chart-global-data-centers-label",
+        intl
+      ),
       amount: 200,
       color: "#D7B14A",
       breakpoint: mediumBreakpoint,
     },
     {
-      name: "Gold mining (CBECI)",
+      name: translateMessageId(
+        "energy-consumption-chart-gold-mining-cbeci-label",
+        intl
+      ),
       amount: 130,
       color: "#D7B14A",
       breakpoint: mediumBreakpoint,
     },
     {
-      name: "BTC PoW",
+      name: translateMessageId("energy-consumption-chart-btc-pow-label", intl),
       amount: 100,
       color: "#F2A900",
     },
     {
-      name: "Netflix",
+      name: translateMessageId("energy-consumption-chart-netflix-label", intl),
       amount: 94,
       color: "#E50914",
       breakpoint: smallBreakpoint,
     },
     {
-      name: "ETH PoW",
+      name: translateMessageId("energy-consumption-chart-eth-pow-label", intl),
       amount: 78,
       color: "#C1B6F5",
     },
     {
-      name: "Gaming in the US",
+      name: translateMessageId(
+        "energy-consumption-chart-gaming-us-label",
+        intl
+      ),
       amount: 34,
       color: "#71BB8A",
       breakpoint: mediumBreakpoint,
     },
     {
-      name: "PayPal",
+      name: translateMessageId("energy-consumption-chart-paypal-label", intl),
       amount: 0.26,
       color: "#C1B6F5",
       breakpoint: smallBreakpoint,
     },
     {
-      name: "ETH PoS",
+      name: translateMessageId("energy-consumption-chart-eth-pos-label", intl),
       amount: 0.0026,
       color: "#C1B6F5",
     },

src/intl/en/page-what-is-ethereum.json

@@ -88,6 +88,16 @@
   "page-what-is-ethereum-energy-desc-2": "The Merge was Ethereum's biggest uprade and reduced the energy consumption required to secure Ethereum by <b>99.95%</b>, creating a <b>more secure network for a much smaller carbon cost</b>. Ethereum is now a low-carbon blockchain while boosting its security and scalability.",
   "page-what-is-ethereum-more-on-energy-consumption": "More on energy consumption",
   "page-what-is-ethereum-energy-consumption-chart-legend": "Annual Energy Consumption in TWh/yr",
+  "energy-consumption-chart-youtube-label": "YouTube",
+  "energy-consumption-chart-gold-mining-galaxy-label": "Gold mining (Galaxy Digital)",
+  "energy-consumption-chart-global-data-centers-label": "Global data centers",
+  "energy-consumption-chart-gold-mining-cbeci-label": "Gold mining (CBECI)",
+  "energy-consumption-chart-btc-pow-label": "BTC PoW",
+  "energy-consumption-chart-netflix-label": "Netflix",
+  "energy-consumption-chart-eth-pow-label": "ETH PoW",
+  "energy-consumption-chart-gaming-us-label": "Gaming in the US",
+  "energy-consumption-chart-paypal-label": "PayPal",
+  "energy-consumption-chart-eth-pos-label": "ETH PoS",
   "page-what-is-ethereum-the-merge-update": "The Merge update",
   "page-what-is-ethereum-additional-reading": "Additional reading",
   "page-what-is-ethereum-week-in-ethereum": "Week in Ethereum News",