Release candidate v7.24.2

.all-contributorsrc

@@ -10830,6 +10830,42 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "Erlangshen219",
+      "name": "Erlangshen219",
+      "avatar_url": "https://avatars.githubusercontent.com/u/104747507?v=4",
+      "profile": "https://github.com/Erlangshen219",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "AyDeveloper",
+      "name": "AyDeveloper",
+      "avatar_url": "https://avatars.githubusercontent.com/u/72970379?v=4",
+      "profile": "https://oxpampam.netlify.app/",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "jeremyfritzen",
+      "name": "jeremyfritzen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26802442?v=4",
+      "profile": "https://github.com/jeremyfritzen",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "fuzheng1998",
+      "name": "Zheng Fu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/24203166?v=4",
+      "profile": "https://github.com/fuzheng1998",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -122,7 +122,7 @@ To use an existing function locally you don't need to do anything. Just check th
 To create a new function, you will need to create two files:
 
 - One in `src/lambda` where the logic will live. These are the ones that will be deployed to Netlify. These functions follow [this format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format).
-- One in `src/api` that will be just a wrapper around the previous one in order to be compatible with Gatsby functions. More on the [Gatbsy docs](https://www.gatsbyjs.com/docs/reference/functions/getting-started/) for the format they follow.
+- One in `src/api` that will be just a wrapper around the previous one in order to be compatible with Gatsby functions. More on the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/functions/getting-started/) for the format they follow.
 
 Typically, you will develop and test functions in the Gatsby context, by running `yarn start`.
 
@@ -1692,6 +1692,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/konstantinzolotarev"><img src="https://avatars.githubusercontent.com/u/286431?v=4?s=100" width="100px;" alt="Konstantin Zolotarev"/><br /><sub><b>Konstantin Zolotarev</b></sub></a><br /><a href="#content-konstantinzolotarev" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/vuittont60"><img src="https://avatars.githubusercontent.com/u/81072379?v=4?s=100" width="100px;" alt="vuittont60"/><br /><sub><b>vuittont60</b></sub></a><br /><a href="#content-vuittont60" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://goldnite.github.io"><img src="https://avatars.githubusercontent.com/u/114434414?v=4?s=100" width="100px;" alt="Golden Ite"/><br /><sub><b>Golden Ite</b></sub></a><br /><a href="#content-goldnite" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Erlangshen219"><img src="https://avatars.githubusercontent.com/u/104747507?v=4?s=100" width="100px;" alt="Erlangshen219"/><br /><sub><b>Erlangshen219</b></sub></a><br /><a href="#content-Erlangshen219" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://oxpampam.netlify.app/"><img src="https://avatars.githubusercontent.com/u/72970379?v=4?s=100" width="100px;" alt="AyDeveloper"/><br /><sub><b>AyDeveloper</b></sub></a><br /><a href="#content-AyDeveloper" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jeremyfritzen"><img src="https://avatars.githubusercontent.com/u/26802442?v=4?s=100" width="100px;" alt="jeremyfritzen"/><br /><sub><b>jeremyfritzen</b></sub></a><br /><a href="#content-jeremyfritzen" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/fuzheng1998"><img src="https://avatars.githubusercontent.com/u/24203166?v=4?s=100" width="100px;" alt="Zheng Fu"/><br /><sub><b>Zheng Fu</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=fuzheng1998" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

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

@@ -92,6 +92,10 @@ const semanticTokens = {
       _dark: "whiteAlpha.400",
     },
     switchBackground: { _light: "gray.300", _dark: "whiteAlpha.400" },
+    hubHeroContentBg: {
+      _light: "rgba(255, 255, 255, 0.80)",
+      _dark: "rgba(34, 34, 34, 0.80)",
+    },
   },
   gradients: {
     bgMainGradient: {

src/components/Buttons/Button.tsx

@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react"
 
 import { scrollIntoView } from "../../utils/scrollIntoView"
+import { type MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
 
 export const checkIsSecondary = (props: {
   variant?: string
@@ -33,15 +34,15 @@ export interface IProps extends ButtonProps {
    * `NOTE`: Does not apply to the `Solid` or `Link` variants
    */
   isSecondary?: boolean
+  customEventOptions?: MatomoEventOptions
 }
 
 const Button = forwardRef<IProps, "button">((props, ref) => {
-  const { toId, onClick, isSecondary, ...rest } = props
+  const { toId, onClick, isSecondary, customEventOptions, ...rest } = props
 
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (toId) {
-      scrollIntoView(toId)
-    }
+    toId && scrollIntoView(toId)
+    customEventOptions && trackCustomEvent(customEventOptions)
 
     onClick?.(e)
   }

src/components/FindWallet/WalletTable/index.tsx

@@ -427,11 +427,13 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
             <Wallet
               onClick={() => {
                 updateMoreInfo(wallet.key)
-                trackCustomEvent({
-                  eventCategory: "WalletMoreInfo",
-                  eventAction: `More info wallet`,
-                  eventName: `More info ${wallet.name} ${wallet.moreInfo}`,
-                })
+                // Log "more info" event only on expanding
+                wallet.moreInfo &&
+                  trackCustomEvent({
+                    eventCategory: "WalletMoreInfo",
+                    eventAction: `More info wallet`,
+                    eventName: `More info ${wallet.name}`,
+                  })
               }}
             >
               <Td lineHeight="revert">
@@ -473,7 +475,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                           customEventOptions={{
                             eventCategory: "WalletExternalLinkList",
                             eventAction: `Go to wallet`,
-                            eventName: `${wallet.name} ${idx}`,
+                            eventName: `Website: ${wallet.name} ${idx}`,
                             eventValue: JSON.stringify(filters),
                           }}
                         >
@@ -486,7 +488,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Twitter: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >
@@ -504,7 +506,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Discord: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >

src/components/Hero/HubHero/index.tsx

@@ -1,12 +1,5 @@
 import * as React from "react"
-import {
-  Box,
-  Heading,
-  HStack,
-  Stack,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { Box, Heading, HStack, Stack, Text } from "@chakra-ui/react"
 import GatsbyImage from "../../GatsbyImage"
 import { CallToAction } from "../CallToAction"
 import { CommonHeroProps } from "../utils"
@@ -22,11 +15,6 @@ const HubHero = (props: HubHeroProps) => {
     )
   }
 
-  const largeContentBg = useColorModeValue(
-    "rgba(255, 255, 255, 0.80)",
-    "rgba(34, 34, 34, 0.80)"
-  )
-
   return (
     <Box position="relative">
       <GatsbyImage
@@ -47,7 +35,7 @@ const HubHero = (props: HubHeroProps) => {
         p={{ base: "4", lg: "8" }}
         textAlign={{ base: "center", xl: "start" }}
         borderRadius={{ xl: "base" }}
-        bg={{ xl: largeContentBg }}
+        bg={{ xl: "hubHeroContentBg" }}
         position={{ xl: "absolute" }}
         insetStart={{ xl: "8" }}
         maxW={{ xl: "sm" }}

src/components/LeftNavBar/index.tsx

@@ -51,6 +51,7 @@ const LeftNavBar: React.FC<IProps> = ({
       position="sticky"
       top="6.25rem"
       height={calc("100vh").subtract("80px").toString()}
+      zIndex="dropdown"
       {...props}
     >
       {dropdownLinks && <StyledButtonDropdown list={dropdownLinks} />}

src/components/TranslationLeaderboard.tsx

@@ -84,6 +84,36 @@ const RadioCard = (props) => {
   )
 }
 
+const filterLeaderboardUsers = (item) => {
+  const username = item.user.username.toLowerCase()
+  const fullName = item.user.fullName?.toLowerCase() || ""
+
+  const excludedUsernames = new Set([
+    "ethdotorg",
+    "finnish_sandberg",
+    "norwegian_sandberg",
+    "swedish_sandberg",
+  ])
+
+  return (
+    !excludedUsernames.has(username) &&
+    !username.includes("lqs_") &&
+    !username.includes("removed_user") &&
+    !username.includes("aco_") &&
+    !fullName.includes("aco_") &&
+    !username.includes("aco-") &&
+    !fullName.includes("aco-") &&
+    !username.includes("acc_") &&
+    !fullName.includes("acc_")
+  )
+}
+
+const sortAndFilterData = (data) => {
+  return reverse(sortBy(data, ({ user }) => user.totalCosts)).filter(
+    filterLeaderboardUsers
+  )
+}
+
 const TranslationLeaderboard: React.FC<IProps> = ({
   monthData,
   quarterData,
@@ -94,15 +124,13 @@ const TranslationLeaderboard: React.FC<IProps> = ({
     "tableItemBox.light",
     "tableItemBox.dark"
   )
+
   const leaderboardData = {
-    monthData: reverse(sortBy(monthData.data, ({ user }) => user.totalCosts)),
-    quarterData: reverse(
-      sortBy(quarterData.data, ({ user }) => user.totalCosts)
-    ),
-    allTimeData: reverse(
-      sortBy(allTimeData.data, ({ user }) => user.totalCosts)
-    ),
+    monthData: sortAndFilterData(monthData.data),
+    quarterData: sortAndFilterData(quarterData.data),
+    allTimeData: sortAndFilterData(allTimeData.data),
   }
+
   const [filterAmount, updateFilterAmount] = useState(10)
   const [dateRangeType, updateDateRangeType] = useState("monthData")
 
@@ -174,22 +202,8 @@ const TranslationLeaderboard: React.FC<IProps> = ({
             <Translation id="page-contributing-translation-program-acknowledgements-total-words" />
           </Flex>
         </Flex>
-        {/* // TODO: Remove specific user checks once Acolad has updated their usernames */}
         {leaderboardData[dateRangeType]
-          .filter(
-            (item) =>
-              item.user.username !== "ethdotorg" &&
-              !item.user.username.includes("LQS_") &&
-              !item.user.username.includes("REMOVED_USER") &&
-              !item.user.username.includes("Aco_") &&
-              !item.user.fullName.includes("Aco_") &&
-              !item.user.username.includes("Acc_") &&
-              !item.user.fullName.includes("Acc_") &&
-              item.user.username !== "Finnish_Sandberg" &&
-              item.user.username !== "Norwegian_Sandberg" &&
-              item.user.username !== "Swedish_Sandberg"
-          )
-          .filter((item, idx) => idx < filterAmount)
+          .slice(0, filterAmount)
           .map((item, idx) => {
             const { user, languages } = item
             const sortedLanguages = reverse(

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

@@ -296,7 +296,7 @@ Below is a breakdown of the website pages each content bucket contains.
 - [Interact with other contracts from Solidity](/developers/tutorials/interact-with-other-contracts-from-solidity/)
 - [NFT Minter tutorial](/developers/tutorials/nft-minter/)
 - [Reverse engineering a contract](/developers/tutorials/reverse-engineering-a-contract/)
-- [Sending tokens using ethers.js](/developers/tutorials/send-token-etherjs/)
+- [Sending tokens using ethers.js](/developers/tutorials/send-token-ethersjs/)
 - [The Graph: Fixing Web3 data querying](/developers/tutorials/the-graph-fixing-web3-data-querying/)
 - [Transfers and approval of ERC-20 tokens from a Solidity smart contract](/developers/tutorials/transfers-and-approval-of-erc-20-tokens-from-a-solidity-smart-contract/)
 
@@ -308,7 +308,7 @@ Below is a breakdown of the website pages each content bucket contains.
 - [ERC-20 with safety rails](/developers/tutorials/erc20-with-safety-rails/)
 - [Getting Started with Ethereum Development](/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/)
 - [How to mock Solidity smart contracts for testing](/developers/tutorials/how-to-mock-solidity-contracts-for-testing/)
-- [Kickstart your dapp frontend development with create-eth-app](/developers/tutorials/kickstart-your-dapp-frontend-development-wth-create-eth-app/)
+- [Kickstart your dapp frontend development with create-eth-app](/developers/tutorials/kickstart-your-dapp-frontend-development-with-create-eth-app/)
 - [Logging data from smart contracts with events](/developers/tutorials/logging-events-smart-contracts/)
 - [Merkle proofs for offline data integrity](/developers/tutorials/merkle-proofs-for-offline-data-integrity/)
 - [Sending transactions using Web3](/developers/tutorials/sending-transactions-using-web3-and-alchemy/)

src/content/developers/docs/apis/json-rpc/index.md

@@ -926,7 +926,8 @@ params: [
     gas: "0x76c0", // 30400
     gasPrice: "0x9184e72a000", // 10000000000000
     value: "0x9184e72a", // 2441406250
-    input: "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
+    input:
+      "0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675",
   },
 ]
 ```

src/content/developers/docs/networks/index.md

@@ -57,7 +57,6 @@ The Sepolia network uses a permissioned validator set. It's fairly new, meaning
 - [QuickNode Sepolia Faucet](https://faucet.quicknode.com/drip)
 - [Grabteeth](https://grabteeth.xyz/)
 - [PoW faucet](https://sepolia-faucet.pk910.de/)
-- [FaucETH](https://fauceth.komputing.org)
 - [Coinbase Wallet Faucet | Sepolia](https://coinbase.com/faucets/ethereum-sepolia-faucet)
 - [Alchemy Sepolia faucet](https://sepoliafaucet.com/)
 - [Infura Sepolia faucet](https://www.infura.io/faucet)

src/content/developers/docs/programming-languages/rust/index.md

@@ -35,7 +35,6 @@ Need a more basic primer first? Check out [ethereum.org/learn](/learn/) or [ethe
 - [Build A Decentralized Chat Using JavaScript and Rust](https://medium.com/perlin-network/build-a-decentralized-chat-using-javascript-rust-webassembly-c775f8484b52)
 - [Build a Decentralized Todo App Using Vue.js & Rust](https://medium.com/@jjmace01/build-a-decentralized-todo-app-using-vue-js-rust-webassembly-5381a1895beb)
 
-- [An Intro to Secret Contracts](https://blog.enigma.co/getting-started-with-enigma-an-intro-to-secret-contracts-cdba4fe501c2)
 - [Build a blockchain in Rust](https://blog.logrocket.com/how-to-build-a-blockchain-in-rust/)
 
 ## Rust projects and tools {#rust-projects-and-tools}

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

@@ -117,7 +117,7 @@ Before accepting transactions, the operator will perform the usual checks. This
 
 Once the ZK-rollup node has enough transactions, it aggregates them into a batch and compiles inputs for the proving circuit to compile into a succinct ZK-proof. This includes:
 
-- A Merkle tree comprising all the transactions in the batch.
+- A Merkle tree root comprising all the transactions in the batch.
 - Merkle proofs for transactions to prove inclusion in the batch.
 - Merkle proofs for each sender-receiver pair in transactions to prove those accounts are part of the rollup's state tree.
 - A set of intermediate state roots, derived from updating the state root after applying state updates for each transaction (i.e., decreasing sender accounts and increasing receiver accounts).
@@ -240,7 +240,9 @@ Projects working on zkEVMs include:
 
 - **[Taiko](https://taiko.xyz)** - _Taiko is a decentralized, Ethereum-equivalent ZK-rollup (a [Type 1 ZK-EVM](https://vitalik.ca/general/2022/08/04/zkevm.html))._
 
-- **[ZKSync](https://docs.zksync.io/zkevm/)** - _ZkSync 2.0 is an EVM-compatible ZK Rollup being built by Matter Labs, powered by its own zkEVM._
+- **[ZKSync](https://docs.zksync.io/zkevm/)** - _ZkSync Era is an EVM-compatible ZK Rollup built by Matter Labs, powered by its own zkEVM._
+
+- **[Starknet](https://starkware.co/starknet/)** - _StarkNet is an EVM-compatible layer 2 scaling solution built by StarkWare._
 
 ## Further reading on ZK-rollups reading {#further-reading-on-zk-rollups}
 

src/content/developers/docs/smart-contracts/composability/index.md

@@ -66,7 +66,7 @@ Instead of building a custom authentication system or relying on centralized pro
 ## Related tutorials {#related-tutorials}
 
 - [Contract Composability: The Building Blocks of Ethereum Smart Contract Development](https://www.decentlabs.io/blog/contract-composability-the-building-blocks-of-ethereum-smart-contract-development)
-- [Kickstart your dapp frontend development with create-eth-app](/developers/tutorials/kickstart-your-dapp-frontend-development-wth-create-eth-app/) _– An overview of how to use create-eth-app to create apps with popular smart contracts out the box._
+- [Kickstart your dapp frontend development with create-eth-app](/developers/tutorials/kickstart-your-dapp-frontend-development-with-create-eth-app/) _– An overview of how to use create-eth-app to create apps with popular smart contracts out the box._
 
 ## Further reading {#further-reading}