Merge pull request #10200 from ethereum/dev

Deploy v7.12.0

Author: nhsz

package.json

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

src/components/EnergyConsumptionChart.tsx

@@ -55,20 +55,25 @@ const EnergyConsumptionChart: React.FC = () => {
   const data = useBreakpointValue<Data>({
     base: [
       {
-        name: t("energy-consumption-chart-youtube-label"),
-        amount: 244,
+        name: t("energy-consumption-chart-global-data-centers-label"),
+        amount: 200,
         color: "#FF0000",
       },
       {
         name: t("energy-consumption-chart-btc-pow-label"),
-        amount: 100,
+        amount: 131,
         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-pos-label"),
         amount: 0.0026,
@@ -77,29 +82,29 @@ const EnergyConsumptionChart: React.FC = () => {
     ],
     sm: [
       {
-        name: t("energy-consumption-chart-youtube-label"),
-        amount: 244,
+        name: t("energy-consumption-chart-global-data-centers-label"),
+        amount: 200,
         color: "#FF0000",
       },
       {
-        name: t("energy-consumption-chart-btc-pow-label"),
-        amount: 100,
+        name: t("energy-consumption-gold-mining-cbeci-label"),
+        amount: 131,
         color: "#F2A900",
       },
       {
-        name: t("energy-consumption-chart-netflix-label"),
-        amount: 94,
-        color: "#E50914",
+        name: t("energy-consumption-chart-btc-pow-label"),
+        amount: 131,
+        color: "#D7B14A",
       },
       {
         name: t("energy-consumption-chart-eth-pow-label"),
         amount: 78,
         color: "#C1B6F5",
       },
       {
-        name: t("energy-consumption-chart-paypal-label"),
-        amount: 0.26,
-        color: "#C1B6F5",
+        name: t("energy-consumption-chart-netflix-label"),
+        amount: 0.451,
+        color: "#E50914",
       },
       {
         name: t("energy-consumption-chart-eth-pos-label"),
@@ -108,35 +113,20 @@ const EnergyConsumptionChart: React.FC = () => {
       },
     ],
     md: [
-      {
-        name: t("energy-consumption-chart-youtube-label"),
-        amount: 244,
-        color: "#FF0000",
-      },
-      {
-        name: t("energy-consumption-chart-gold-mining-galaxy-label"),
-        amount: 240,
-        color: "#D7B14A",
-      },
       {
         name: t("energy-consumption-chart-global-data-centers-label"),
         amount: 200,
-        color: "#D7B14A",
+        color: "#FF0000",
       },
       {
-        name: t("energy-consumption-chart-gold-mining-cbeci-label"),
-        amount: 130,
+        name: t("energy-consumption-gold-mining-cbeci-label"),
+        amount: 131,
         color: "#D7B14A",
       },
       {
         name: t("energy-consumption-chart-btc-pow-label"),
-        amount: 100,
-        color: "#F2A900",
-      },
-      {
-        name: t("energy-consumption-chart-netflix-label"),
-        amount: 94,
-        color: "#E50914",
+        amount: 131,
+        color: "#D7B14A",
       },
       {
         name: t("energy-consumption-chart-eth-pow-label"),
@@ -148,11 +138,21 @@ const EnergyConsumptionChart: React.FC = () => {
         amount: 34,
         color: "#71BB8A",
       },
+      {
+        name: t("energy-consumption-chart-netflix-label"),
+        amount: 0.451,
+        color: "#E50914",
+      },
       {
         name: t("energy-consumption-chart-paypal-label"),
         amount: 0.26,
         color: "#C1B6F5",
       },
+      {
+        name: "AirBnB",
+        amount: 0.02,
+        color: "#E50914",
+      },
       {
         name: t("energy-consumption-chart-eth-pos-label"),
         amount: 0.0026,

src/components/Footer.tsx

@@ -98,6 +98,10 @@ const Footer: React.FC<IProps> = () => {
     {
       title: t("learn"),
       links: [
+        {
+          to: `/learn/`,
+          text: t("learn-hub"),
+        },
         {
           to: `/what-is-ethereum/`,
           text: t("what-is-ethereum"),
@@ -111,24 +115,32 @@ const Footer: React.FC<IProps> = () => {
           text: t("ethereum-wallets"),
         },
         {
-          to: `/learn/`,
-          text: t("guides-and-resources"),
+          text: t("ethereum-security"),
+          to: "/security/",
         },
         {
-          to: "/history/",
-          text: t("history-of-ethereum"),
+          text: t("web3"),
+          to: "/web3/",
         },
         {
-          to: "/whitepaper/",
-          text: t("ethereum-whitepaper"),
+          text: t("energy-consumption"),
+          to: "/energy-consumption/",
         },
         {
           text: t("ethereum-roadmap"),
           to: "/roadmap/",
         },
         {
-          text: t("ethereum-security"),
-          to: "/security/",
+          to: "/eips/",
+          text: t("eips"),
+        },
+        {
+          to: "/history/",
+          text: t("history-of-ethereum"),
+        },
+        {
+          to: "/whitepaper/",
+          text: t("ethereum-whitepaper"),
         },
         {
           to: `/glossary/`,
@@ -146,18 +158,6 @@ const Footer: React.FC<IProps> = () => {
           text: t("zero-knowledge-proofs"),
           to: "/zero-knowledge-proofs/",
         },
-        {
-          text: t("energy-consumption"),
-          to: "/energy-consumption/",
-        },
-        {
-          text: t("web3"),
-          to: "/web3/",
-        },
-        {
-          to: "/eips/",
-          text: t("eips"),
-        },
       ],
     },
     {

src/components/MarkdownTable.tsx

@@ -6,7 +6,7 @@ export interface IProps {
 }
 
 const MarkdownTable: React.FC<IProps> = ({ children }) => (
-  <Box my={8} overflowX="auto">
+  <Box position="relative" my={8} overflowX="auto">
     <Table
       sx={{
         th: {

src/components/OrderedList.tsx

@@ -18,12 +18,11 @@ export interface IProps {
 const liCustomType: SystemStyleObject = {
   content: `counter(li-counter)`,
   position: "absolute",
-  top: "-2px", // adjusts circle + number up and down
+  top: "-3px", // adjusts circle + number up and down
   left: "-3rem",
-  width: "35px",
-  aspectRatio: "1",
-  height: "2rem",
-  pt: "7px", // adjusts number up and down,
+  width: "34px",
+  height: "1.6rem",
+  pt: "9px", // adjusts number up and down,
   lineHeight: "100%",
   borderRadius: "50%",
   background: "grayBackground",

src/content/developers/docs/consensus-mechanisms/pos/attestations/index.md

@@ -62,7 +62,7 @@ The base reward is calculated according to the number of attesting validators an
 
 #### Inclusion delay {#inclusion-delay}
 
-At the time when the validators voted on the head of the chain (`block n`), `block n+1` was not proposed yet. Therefore attestations naturally get included **one block later** so all attestations who voted on `block n` being the chain head got included in `block n+1` and, the **inclusion delay** is 1. If the inclusion delay doubles to two slots, the attestation reward halves, because to calculate the attestation reward the the base reward is multiplied by the reciprocal of the inclusion delay.
+At the time when the validators voted on the head of the chain (`block n`), `block n+1` was not proposed yet. Therefore attestations naturally get included **one block later** so all attestations who voted on `block n` being the chain head got included in `block n+1` and, the **inclusion delay** is 1. If the inclusion delay doubles to two slots, the attestation reward halves, because to calculate the attestation reward the base reward is multiplied by the reciprocal of the inclusion delay.
 
 ### Attestation scenarios {#attestation-scenarios}
 

src/content/developers/docs/data-structures-and-encoding/ssz/index.md

@@ -109,7 +109,7 @@ This SSZ serialized object can then be merkleized - that is transformed into a M
 
 There are also cases where the leaves of the tree do not naturally evenly distribute in the way they do in the example above. For example, leaf 4 could be a container with multiple elements that require additional "depth" to be added to the Merkle tree, creating an uneven tree.
 
-Instead of referring to these tree elements as leaf X, node X etc, we can give them generalized indices, starting with root = 1 and counting from left to right along each level. This is the generalized index explained above. Each element in the serialized list has a generalized index equal to `2**depth + idx` where idx is its zero-indexed position in the serialized object and the depth is the number of levels in the Merkle tree, which can be determined as the square root of the number of elements (leaves).
+Instead of referring to these tree elements as leaf X, node X etc, we can give them generalized indices, starting with root = 1 and counting from left to right along each level. This is the generalized index explained above. Each element in the serialized list has a generalized index equal to `2**depth + idx` where idx is its zero-indexed position in the serialized object and the depth is the number of levels in the Merkle tree, which can be determined as the base-two logarithm of the number of elements (leaves).
 
 ## Generalized indices {#generalized-indices}
 

src/content/developers/docs/design-and-ux/index.md

@@ -0,0 +1,74 @@
+---
+title: Design and UX in web3
+description: Introduction to UX design an research in web3 space and Ethereum
+lang: en
+---
+
+Are you new to designing with Ethereum? This is the right place for you. The Ethereum community has written resources to introduce you to web3 design and research basics. You'll learn about core concepts that may differ from other app designs you're familiar with.
+
+Need a more basic understanding of web3 first? Check out [**Learn hub**](/learn/).
+
+## Start with user research {#Start-with-user-research}
+
+Effective design goes beyond creating visually appealing user interfaces. It involves gaining a deep understanding of the user's needs, objectives, and driving factors. Therefore, we highly recommend that all designers adopt a design process, such as the [**double diamond process**](<https://en.wikipedia.org/wiki/Double_Diamond_(design_process_model)>), to ensure that their work is deliberate and intentional.
+
+- [Web3 needs more UX Researchers and Designers](https://akasha.org/blog/2022/10/11/akasha-conversation-09-web3-ux-researchers-and-designers) - An overview of current design maturity
+- [A simple guide to UX Research in web3](https://uxplanet.org/a-complete-guide-to-ux-research-for-web-3-0-products-d6bead20ebb1) - Simple guide how to do research
+- [How to Approach UX Decisions in Web3](https://archive.devcon.org/archive/watch/6/data-empathy-how-to-approach-ux-decisions-in-web3/) - A brief overview of quantitative and qualitative research and the differences between the two (video, 6 min)
+- [Being a ux researcher in web3](https://medium.com/@georgia.rakusen/what-its-like-being-a-user-researcher-in-web3-6a4bcc096849) - A personal view on what it is like being a UX researcher in web3
+
+## Research studies in web3 {#Research-in-web3}
+
+This is a curated list of user research done in web3 that may help with design and product decisions or work as an inspiration to conduct own study.
+
+- [CRADL: Crypto Research and Design Lab](https://project-cradl.notion.site/Crypto-Research-and-Design-Lab-50a7127f34ed4c88ad95c7cedf7fbe36)
+- [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing)
+- [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing)
+- [Staking survey: Key trends, takeaways, and predictions - Eth Staker](https://lookerstudio.google.com/u/0/reporting/cafcee00-e1af-4148-bae8-442a88ac75fa/page/p_ja2srdhh2c?s=hmbTWDh9hJo)
+- [Usability and user satisfaction survey - Ethereum.org](https://lookerstudio.google.com/reporting/0a189a7c-a890-40db-a5c6-009db52c81c9)
+- [Usability study: Coverage pools](https://github.com/threshold-network/UX-User-Research/tree/main/Keep%20Coverage%20Pool)
+- [Usability study: Multi App Staking](<https://github.com/threshold-network/UX-User-Research/blob/main/Multi-App%20Staking%20(MAS)/iterative-user-study/MAS%20Iterative%20User%20Study.pdf>)
+- [2022 DAO Research Update: What do DAO Builders Need?](https://blog.aragon.org/2022-dao-research-update/)
+- [ConSensys: DeFi User Research Report 2022](https://cdn2.hubspot.net/hubfs/4795067/ConsenSys%20Codefi-Defi%20User%20ResearchReport.pdf)
+- [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md)
+- [Going on Safari: Researching Users in the Metaverse](https://archive.devcon.org/archive/watch/6/going-on-safari-researching-users-in-the-metaverse/?tab=YouTube) (video, 27 min)
+
+## Design for web3 {#Design-for-web3}
+
+- [Web3 Design Principles](https://medium.com/@lyricalpolymath/web3-design-principles-f21db2f240c1) - A framework of UX rules for blockchain based dapps
+- [Blockchain Design Principles](https://medium.com/design-ibm/blockchain-design-principles-599c5c067b6e) - Lessons learned by the blockchain design team at IBM
+- [Dimensions of web3 UX](https://uxdesign.cc/the-levels-of-web3-user-experience-4f2ad113e37d) - An analysis of different layers of web3 UX and its challenges
+- [Web3 Design Patterns](https://www.web3designpatterns.io/)- A curated library of design patterns from real Web3 products
+- [W3design.io](https://w3design.io/) - A curated library of UI flows of different projects in the ecosystem
+
+## Web3 Design Case Studies {#Design-case-studies}
+
+- [How to write better web3 error messages](https://medium.com/@JonCrabb/how-to-design-better-web3-error-messages-bd96e12fa582)
+- [Defi design tips](https://medium.com/@JonCrabb/defi-design-tips-vol-12-8600f4374714)
+- [Deep Work Studio](https://deepwork.studio/case-studies/)
+- [Crypto UX Handbook](https://www.cryptouxhandbook.com/)
+
+## Design Bounties {#Bounties}
+
+- [Dework](https://app.dework.xyz/bounties)
+- [Gitcoin](https://bounties.gitcoin.co/explorer)
+- [Buildbox hackathons](https://gitcoin.co/hackathons)
+- [ETHGlobal](https://ethglobal.com/)
+
+## Design DAOs and communities {#Design-DAOs-and-communities}
+
+Get involved in professional community-driven organizations or join design groups to discuss design and research related topics and trends with other members.
+
+- [Vectordao.com](https://vectordao.com/)
+- [Deepwork.studio](https://www.deepwork.studio/)
+- [Designer-dao.xyz](https://www.designer-dao.xyz/)
+- [We3.co](https://we3.co/)
+- [Openux.xyz](https://openux.xyz/about)
+- [web3trends.org/](https://web3trends.org/)
+
+## Design Systems {#Design-systems}
+
+- [Optimism Design](https://www.figma.com/@oplabs) (Figma)
+- [Ethereum.org Design system](https://www.figma.com/@ethdotorg) (Figma)
+- [Finity, a design system for Web3 by Polygon](https://finity.polygon.technology/) (Figma)
+- [ENS Design system](https://thorin.ens.domains/)

src/content/developers/docs/scaling/optimistic-rollups/index.md

@@ -198,7 +198,7 @@ Optimistic rollups use a gas fee scheme, much like Ethereum, to denote how much
 
 2. **`calldata`**: Beyond the base transaction fee, the cost of each state write depends on the size of `calldata` posted to L1. `calldata` costs are currently governed by [EIP-1559](https://eips.ethereum.org/EIPS/eip-1559), which stipulates a cost of 16 gas for non-zero bytes and 4 gas for zero bytes of `calldata`, respectively. To reduce user fees, rollup operators compress transactions to reduce the number of `calldata` bytes published on Ethereum.
 
-3. **L2 operator fees**: This is the amount paid to the rollup nodes as compensation for computational costs incurred in processing transactions, much like miner fees on Ethereum. Rollup nodes charge lower transaction fees since L2s have higher processing capacities and aren't faced with the network congestions that force miners on Ethereum to prioritize transactions with higher fees.
+3. **L2 operator fees**: This is the amount paid to the rollup nodes as compensation for computational costs incurred in processing transactions, much like gas fees on Ethereum. Rollup nodes charge lower transaction fees since L2s have higher processing capacities and aren't faced with the network congestions that force validators on Ethereum to prioritize transactions with higher fees.
 
 Optimistic rollups apply several mechanisms to reducing fees for users, including batching transactions and compressing `calldata` to reduce data publication costs. You can check the [L2 fee tracker](https://l2fees.info/) for a real-time overview of how much it costs to use Ethereum-based optimistic rollups.
 

src/content/developers/docs/standards/tokens/erc-4626/index.md

@@ -142,7 +142,7 @@ This function returns the maximum amount of shares that can be redeemed from the
 function previewRedeem(uint256 shares) public view returns (uint256)
 ```
 
-This function allows users to simulate the effects of their redeemption at the current block.
+This function allows users to simulate the effects of their redemption at the current block.
 
 #### redeem {#redeem}