Merge pull request #11468 from ethereum/staging

Deploy v7.22.3

.all-contributorsrc

@@ -10591,7 +10591,7 @@
       "login": "natpicone",
       "name": "Natalino Picone",
       "avatar_url": "https://avatars.githubusercontent.com/u/4753402?v=4",
-      "profile": "http://nozominetworks.com",
+      "profile": "https://chainlabo.com",
       "contributions": [
         "content"
       ]
@@ -10640,6 +10640,15 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "MohamedFekryyy",
+      "name": "Fekry Aiad",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36033065?v=4",
+      "profile": "http://www.scienft.com",
+      "contributions": [
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1657,14 +1657,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://taminobaumann.com"><img src="https://avatars.githubusercontent.com/u/48290617?v=4?s=100" width="100px;" alt="Tamino"/><br /><sub><b>Tamino</b></sub></a><br /><a href="#content-taminobaumann" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/keccers"><img src="https://avatars.githubusercontent.com/u/770277?v=4?s=100" width="100px;" alt="Katherine Champagne"/><br /><sub><b>Katherine Champagne</b></sub></a><br /><a href="#content-keccers" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://coderoostr.com"><img src="https://avatars.githubusercontent.com/u/103231131?v=4?s=100" width="100px;" alt="Marcos González"/><br /><sub><b>Marcos González</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Coderoostr" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://nozominetworks.com"><img src="https://avatars.githubusercontent.com/u/4753402?v=4?s=100" width="100px;" alt="Natalino Picone"/><br /><sub><b>Natalino Picone</b></sub></a><br /><a href="#content-natpicone" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://chainlabo.com"><img src="https://avatars.githubusercontent.com/u/4753402?v=4?s=100" width="100px;" alt="Natalino Picone"/><br /><sub><b>Natalino Picone</b></sub></a><br /><a href="#content-natpicone" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/hammadsaedi"><img src="https://avatars.githubusercontent.com/u/71373419?v=4?s=100" width="100px;" alt="Hammad Saaedi"/><br /><sub><b>Hammad Saaedi</b></sub></a><br /><a href="#content-hammadsaedi" title="Content">🖋</a></td>
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/srn08"><img src="https://avatars.githubusercontent.com/u/105499798?v=4?s=100" width="100px;" alt="Shaunak Nagrecha"/><br /><sub><b>Shaunak Nagrecha</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asrn08" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/schwindtkevin"><img src="https://avatars.githubusercontent.com/u/1700789?v=4?s=100" width="100px;" alt="Kevin Schwindt"/><br /><sub><b>Kevin Schwindt</b></sub></a><br /><a href="#content-schwindtkevin" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/robertkodra"><img src="https://avatars.githubusercontent.com/u/36516516?v=4?s=100" width="100px;" alt="Robert"/><br /><sub><b>Robert</b></sub></a><br /><a href="#content-robertkodra" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xObsidian"><img src="https://avatars.githubusercontent.com/u/131651958?v=4?s=100" width="100px;" alt="obsidian"/><br /><sub><b>obsidian</b></sub></a><br /><a href="#content-0xObsidian" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.scienft.com"><img src="https://avatars.githubusercontent.com/u/36033065?v=4?s=100" width="100px;" alt="Fekry Aiad"/><br /><sub><b>Fekry Aiad</b></sub></a><br /><a href="#ideas-MohamedFekryyy" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

docs/ds-implementation.md

@@ -17,10 +17,10 @@ Follow the new component directory structure:
 ```markdown
 src/
 └── components/
-└── ComponentA/
-├── index.tsx
-├── ComponentA.stories.tsx
-└── // Any other files as applicable (utils, child components, useHook, etc.)
+····└── ComponentA/
+··········├── index.tsx
+··········├── ComponentA.stories.tsx
+··········└── // Any other files as applicable (utils, child components, useHook, etc.)
 ```
 
 ## Components creation/modification from the DS

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.22.2",
+  "version": "7.22.3",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

src/@chakra-ui/gatsby-plugin/foundations/colors.ts

@@ -9,6 +9,7 @@ const colors = {
     500: "#646464",
     600: "#333333",
     700: "#222222",
+    800: "#1B1B1B",
     900: "#141414",
   },
   blue: {
@@ -30,6 +31,7 @@ const colors = {
     300: "#FFB185",
     400: "#FF985C",
     500: "#FF7324",
+    550: "#DF5A0E",
     600: "#B84300",
     700: "#7A2D00",
     800: "#521E00",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -39,9 +39,9 @@ const semanticTokens = {
     primary: {
       base: { _light: "blue.500", _dark: "orange.500" },
       highContrast: { _light: "blue.800", _dark: "orange.100" },
-      lowContrast: { _light: "blue.100", _dark: "orange.900" },
+      lowContrast: { _light: "blue.100", _dark: "orange.800" },
       hover: { _light: "blue.400", _dark: "orange.400" },
-      visited: { _light: "blue.700", _dark: "orange.400" },
+      visited: { _light: "blue.700", _dark: "orange.550" },
       // ! Deprecating primary.light
       light: { _light: "blue.100", _dark: "orange.100" },
       // ! Deprecating primary.dark
@@ -50,14 +50,14 @@ const semanticTokens = {
       pressed: { _light: "blue.400", _dark: "orange.800" },
     },
     body: {
-      base: { _light: "gray.700", _dark: "gray.100" },
+      base: { _light: "gray.800", _dark: "gray.100" },
       medium: { _light: "gray.500", _dark: "gray.300" },
       light: { _light: "gray.200", _dark: "gray.600" },
       // ! Deprecating body.inverted
-      inverted: { _light: "gray.100", _dark: "gray.700" },
+      inverted: { _light: "gray.100", _dark: "gray.800" },
     },
     background: {
-      base: { _light: "white", _dark: "gray.700" },
+      base: { _light: "white", _dark: "gray.800" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
     disabled: { _light: "gray.400", _dark: "gray.500" },

src/@chakra-ui/gatsby-plugin/styles.ts

@@ -14,7 +14,7 @@ const styles = {
     body: {
       // TODO: when we have Chakra v2, this should be done by overriding the
       // native Chakra semantic tokens
-      bg: mode("white", "gray.700")(props),
+      bg: mode("white", "gray.800")(props),
       lineHeight: "base",
       fontSize: "md",
     },

src/components/EnergyConsumptionChart.tsx

@@ -82,24 +82,24 @@ const EnergyConsumptionChart: React.FC = () => {
     base: [
       {
         name: t("energy-consumption-chart-global-data-centers-label"),
-        amount: 200,
+        amount: 190,
         color: "#FF0000",
       },
       {
         name: t("energy-consumption-chart-btc-pow-label"),
-        amount: 131,
+        amount: 149,
         color: "#F2A900",
       },
-      {
-        name: t("energy-consumption-chart-eth-pow-label"),
-        amount: 78,
-        color: "#C1B6F5",
-      },
       {
         name: t("energy-consumption-chart-gaming-us-label"),
         amount: 34,
         color: "#71BB8A",
       },
+      {
+        name: t("energy-consumption-chart-eth-pow-label"),
+        amount: 21,
+        color: "#C1B6F5",
+      },
       {
         name: t("energy-consumption-chart-eth-pos-label"),
         amount: 0.0026,
@@ -109,27 +109,27 @@ const EnergyConsumptionChart: React.FC = () => {
     sm: [
       {
         name: t("energy-consumption-chart-global-data-centers-label"),
-        amount: 200,
+        amount: 190,
         color: "#FF0000",
       },
       {
-        name: t("energy-consumption-gold-mining-cbeci-label"),
-        amount: 131,
-        color: "#F2A900",
+        name: t("energy-consumption-chart-btc-pow-label"),
+        amount: 149,
+        color: "#D7B14A",
       },
       {
-        name: t("energy-consumption-chart-btc-pow-label"),
+        name: t("energy-consumption-gold-mining-cbeci-label"),
         amount: 131,
-        color: "#D7B14A",
+        color: "#F2A900",
       },
       {
         name: t("energy-consumption-chart-eth-pow-label"),
-        amount: 78,
+        amount: 21,
         color: "#C1B6F5",
       },
       {
         name: t("energy-consumption-chart-netflix-label"),
-        amount: 0.451,
+        amount: 0.457,
         color: "#E50914",
       },
       {
@@ -141,32 +141,37 @@ const EnergyConsumptionChart: React.FC = () => {
     md: [
       {
         name: t("energy-consumption-chart-global-data-centers-label"),
-        amount: 200,
+        amount: 190,
         color: "#FF0000",
       },
       {
-        name: t("energy-consumption-gold-mining-cbeci-label"),
-        amount: 131,
+        name: t("energy-consumption-chart-btc-pow-label"),
+        amount: 149,
         color: "#D7B14A",
       },
       {
-        name: t("energy-consumption-chart-btc-pow-label"),
+        name: t("energy-consumption-gold-mining-cbeci-label"),
         amount: 131,
         color: "#D7B14A",
       },
+      {
+        name: t("energy-consumption-chart-gaming-us-label"),
+        amount: 34,
+        color: "#71BB8A",
+      },
       {
         name: t("energy-consumption-chart-eth-pow-label"),
-        amount: 78,
+        amount: 21,
         color: "#C1B6F5",
       },
       {
-        name: t("energy-consumption-chart-gaming-us-label"),
-        amount: 34,
-        color: "#71BB8A",
+        name: "Google",
+        amount: 19,
+        color: "#E50914",
       },
       {
         name: t("energy-consumption-chart-netflix-label"),
-        amount: 0.451,
+        amount: 0.457,
         color: "#E50914",
       },
       {

src/components/FindWallet/WalletFilterSidebar/index.tsx

@@ -161,7 +161,7 @@ const WalletFilterSidebar: React.FC<WalletFilterSidebarProps> = ({
         }}
       >
         <Icon as={BsArrowCounterclockwise} aria-hidden="true" fontSize="sm" />
-        {"Reset filters".toUpperCase()}
+        {t("page-find-wallet-reset-filters").toUpperCase()}
       </Center>
       <TabPanels
         m={0}

src/components/Modal.tsx

@@ -5,27 +5,34 @@ import {
   ModalOverlay,
   ModalContent,
   ModalCloseButton,
+  type ModalProps,
+  type ModalContentProps,
 } from "@chakra-ui/react"
 
 export interface IPropsOverlay {
   isActive: boolean
 }
 
-export interface IProps {
+export interface IProps extends ModalContentProps, Pick<ModalProps, "size"> {
   children?: React.ReactNode
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
 }
 
-const Modal: React.FC<IProps> = ({ children, isOpen, setIsOpen, ...props }) => {
+const Modal: React.FC<IProps> = ({
+  children,
+  isOpen,
+  setIsOpen,
+  size,
+  ...restProps
+}) => {
   return (
     <ChakraModal
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
       isCentered
-      size="xl"
+      size={size ?? "xl"}
       scrollBehavior="inside"
-      {...props}
     >
       <ModalOverlay bgColor="blackAlpha.700" />
 
@@ -35,6 +42,7 @@ const Modal: React.FC<IProps> = ({ children, isOpen, setIsOpen, ...props }) => {
         border="1px"
         borderColor="border"
         borderRadius="md"
+        {...restProps}
       >
         <ModalCloseButton />
         {children}

src/components/TableOfContents/utils.ts

@@ -40,8 +40,8 @@ export const outerListProps: ListProps = {
   lineHeight: 1.6,
   fontWeight: 400,
   m: 0,
-  mt: 20,
-  mb: 12,
+  mt: 2,
+  mb: 2,
   ps: 4,
   pe: 1,
   pt: 0,

src/content/community/language-resources/index.md

@@ -72,7 +72,7 @@ If you are bilingual and want to help us reach more people, you can also get inv
 - [Gwei.cz](https://gwei.cz) - local community around Web3, creates educational content, organises online and in-person events
 - [Gwei.cz Příručka](https://prirucka.gwei.cz/) - Ethereum guide for beginners
 - [DAO Příručka](https://dao.gwei.cz/) - beginner's guide to the DAOs
-- [Mastering Ethereum](https://ipfs.infura-ipfs.io/ipfs/bafybeidvuxhnsgfx3tncpfxheqglkjwmdxclknlgd7s7qggd2a6bzgb27m) - Mastering Ethereum in Czech
+- [Mastering Ethereum](https://ipfs.io/ipfs/bafybeidvuxhnsgfx3tncpfxheqglkjwmdxclknlgd7s7qggd2a6bzgb27m) - Mastering Ethereum in Czech
 
 ### French {#fr}
 

src/content/contributing/translation-program/content-buckets/index.md

@@ -91,7 +91,7 @@ Below is a breakdown of the website pages each content bucket contains.
 - [Improving user experience](/roadmap/user-experience/)
 - [Future-proofing Ethereum](/roadmap/future-proofing/)
 - [Danksharding](/roadmap/danksharding/)
-- [Single slot finality](roadmap/single-slot-finality/)
+- [Single slot finality](/roadmap/single-slot-finality/)
 - [Proposer-builder separation](/roadmap/pbs/)
 - [Secret leader election](/roadmap/secret-leader-election/)
 - [Account abstraction](/roadmap/account-abstraction/)