Merge pull request ethereum#11378 from ethereum/staging

Staging -> dev

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

@@ -1,8 +1,4 @@
-import {
-  extendBaseTheme,
-  type ThemeConfig,
-  type ThemeOverride,
-} from "@chakra-ui/react"
+import { extendBaseTheme, type ThemeConfig } from "@chakra-ui/react"
 
 // Global style overrides
 import styles from "./styles"
@@ -27,7 +23,7 @@ const config: ThemeConfig = {
  * The complete list of default Chakra styles can be found here:
  * https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme/src
  */
-const theme: ThemeOverride = {
+const theme = {
   config,
   styles,
   ...foundations,

src/components/Banners/Implementations/WritersCohortBanner.tsx

@@ -4,15 +4,20 @@ import { Text } from "@chakra-ui/react"
 import DismissableBanner from "../DismissableBanner"
 import Link from "../../Link"
 
+import { supportedLanguages } from "../../../utils/languages"
+
 interface IProps {
   pathname: string
 }
 
 const WritersCohortBanner: React.FC<IProps> = ({ pathname }) => {
+  const pattern = supportedLanguages.join("|")
+  const strippedPathname = pathname.replace(new RegExp(`^/(${pattern})/`), "/")
+
   if (
     pathname.includes("contributing") ||
     pathname.includes("community") ||
-    pathname === "/"
+    strippedPathname === "/"
   ) {
     return (
       <DismissableBanner storageKey="writersCohort">

src/components/BeaconChainActions.tsx

@@ -118,11 +118,11 @@ const BeaconChainActions: React.FC = () => {
         <Translation id="consensus-explore" />
       </H3>
 
-      <CardList content={datapoints} />
+      <CardList items={datapoints} />
       <H3>
         <Translation id="read-more" />
       </H3>
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }

src/components/CardList.tsx

@@ -26,7 +26,7 @@ export type CardListItem = {
 }
 
 export interface IProps extends BoxProps {
-  content: Array<CardListItem>
+  items: Array<CardListItem>
   clickHandler?: (idx: string | number) => void
 }
 
@@ -92,12 +92,12 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
 }
 
 const CardList: React.FC<IProps> = ({
-  content,
+  items,
   clickHandler = () => null,
   ...rest
 }) => (
   <Box bg="background.base" w="full" {...rest}>
-    {content.map((listItem, idx) => {
+    {items.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link
 

src/components/Codeblock.tsx

@@ -204,7 +204,7 @@ export interface IProps {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
-  children: React.ReactChild
+  children: React.ReactNode
 }
 
 const Codeblock: React.FC<IProps> = ({
@@ -215,13 +215,16 @@ const Codeblock: React.FC<IProps> = ({
 }) => {
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
 
-  const codeText = React.Children.map(children, (child) => {
-    return getValidChildrenForCodeblock(child)
-  }).join("")
+  const codeText = React.Children.toArray(children)
+    .map((child) => {
+      if (!child) return
+      return getValidChildrenForCodeblock(child)
+    })
+    .join("")
 
   const [isCollapsed, setIsCollapsed] = useState(allowCollapse)
 
-  let className
+  let className: string
   if (React.isValidElement(children)) {
     className = children?.props?.className
   } else {

src/components/EnergyConsumptionChart.tsx

@@ -1,9 +1,16 @@
 import React from "react"
-import { Box, Center, useBreakpointValue, useToken } from "@chakra-ui/react"
+import {
+  Box,
+  Center,
+  chakra,
+  useBreakpointValue,
+  useToken,
+} from "@chakra-ui/react"
 import {
   BarChart,
   Bar,
   Cell,
+  Text,
   XAxis,
   LabelList,
   ResponsiveContainer,
@@ -12,7 +19,6 @@ import {
 import { useTranslation } from "gatsby-plugin-react-i18next"
 
 import Translation from "./Translation"
-import Text from "./OldText"
 
 interface ITickProps {
   x: number
@@ -26,23 +32,43 @@ type Data = Array<{
   color: string
 }>
 
-const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
-  const textColor = useToken("colors", "text")
+const RechartText = chakra(Text, {
+  shouldForwardProp: (prop) => {
+    const isValidRechartProp = [
+      "width",
+      "children",
+      "x",
+      "y",
+      "dy",
+      "angle",
+      "scaleToFit",
+      "textAnchor",
+      "verticalAnchor",
+      "breakAll",
+      "maxLines",
+    ].includes(prop)
 
+    if (isValidRechartProp) return true
+
+    return false
+  },
+})
+
+const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
   return (
     <g transform={`translate(${x},${y})`}>
-      <Text
+      <RechartText
         x={0}
         y={0}
         dy={15}
+        fill="text"
         width={50}
-        fill={textColor}
         textAnchor="middle"
         verticalAnchor="middle"
-        fontSize="10px"
+        fontSize="2xs"
       >
         {payload.value}
-      </Text>
+      </RechartText>
     </g>
   )
 }
@@ -175,8 +201,7 @@ const EnergyConsumptionChart: React.FC = () => {
               dataKey="name"
               tickLine={false}
               axisLine={false}
-              // @ts-ignore
-              tick={<CustomTick />}
+              tick={(props) => <CustomTick {...props} />}
               interval={0}
             />
             <Legend

src/components/EthExchanges/index.tsx

@@ -144,7 +144,7 @@ const EthExchanges = () => {
                   <Text>
                     <Translation id="page-get-eth-exchanges-success-exchange" />
                   </Text>
-                  <CardList content={filteredExchanges} />
+                  <CardList items={filteredExchanges} />
                 </SuccessContainer>
               )}
               {!hasExchangeResults && (

src/components/FileContributorsCrowdin.tsx

@@ -18,7 +18,7 @@ interface Data {
   contributors: Contributor[]
 }
 
-interface LangContributor {
+export interface LangContributor {
   lang: string
   data: Data[]
 }

src/components/MergeArticleList.tsx

@@ -53,7 +53,7 @@ const MergeArticleList: React.FC<IProps> = () => {
 
   return (
     <Box mb="4rem">
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }

src/components/Quiz/QuizWidget.tsx

@@ -60,8 +60,8 @@ import questionBank from "../../data/quizzes/questionBank"
 
 interface IProps {
   quizKey?: string
-  currentHandler: (next?: string) => void
-  statusHandler: (status: QuizStatus) => void
+  currentHandler?: (next?: string) => void
+  statusHandler?: (status: QuizStatus) => void
   maxQuestions?: number
   isStandaloneQuiz?: boolean
 }
@@ -112,7 +112,7 @@ const QuizWidget: React.FC<IProps> = ({
     setSelectedAnswer(null)
 
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
 
     const currentQuizKey =
@@ -220,11 +220,11 @@ const QuizWidget: React.FC<IProps> = ({
 
     if (!isStandaloneQuiz) {
       if (currentQuestionAnswerChoice?.isCorrect) {
-        statusHandler("success")
+        statusHandler?.("success")
       }
 
       if (!currentQuestionAnswerChoice?.isCorrect) {
-        statusHandler("error")
+        statusHandler?.("error")
       }
     }
   }
@@ -241,7 +241,7 @@ const QuizWidget: React.FC<IProps> = ({
     setShowAnswer(false)
 
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
   }
 
@@ -274,7 +274,7 @@ const QuizWidget: React.FC<IProps> = ({
 
     // Reset quiz status (modifies bg color for mobile)
     if (!isStandaloneQuiz) {
-      statusHandler("neutral")
+      statusHandler?.("neutral")
     }
 
     if (finishedQuiz) {
@@ -288,7 +288,7 @@ const QuizWidget: React.FC<IProps> = ({
   }
 
   const handleNextQuiz = () => {
-    currentHandler(nextQuiz)
+    currentHandler?.(nextQuiz)
   }
 
   const AnswerIcon = () => {

src/components/ShardChainsList.tsx

@@ -53,7 +53,7 @@ const ShardChainsList: React.FC<IProps> = () => {
 
   return (
     <Box mb="4rem">
-      <CardList content={reads} />
+      <CardList items={reads} />
     </Box>
   )
 }

src/components/StablecoinAccordion/index.tsx

@@ -141,7 +141,7 @@ const StablecoinAccordion: React.FC<IProps> = () => {
               <Translation id="page-stablecoins-accordion-swap-dapp-link" />
             </InlineLink>
           </p>
-          <CardList content={cardListGroups.dapps} />
+          <CardList items={cardListGroups.dapps} />
         </RightColumnPanel>
       </AccordionCustomItem>
       <AccordionCustomItem category="buy">
@@ -167,7 +167,7 @@ const StablecoinAccordion: React.FC<IProps> = () => {
           <SectionTitle>
             <Translation id="page-stablecoins-accordion-buy-exchanges-title" />
           </SectionTitle>
-          <CardList content={cardListGroups.exchanges} />
+          <CardList items={cardListGroups.exchanges} />
         </RightColumnPanel>
       </AccordionCustomItem>
       <AccordionCustomItem category="earn">
@@ -193,7 +193,7 @@ const StablecoinAccordion: React.FC<IProps> = () => {
           <p>
             <Translation id="page-stablecoins-accordion-earn-projects-copy" />
           </p>
-          <CardList content={cardListGroups.earn} />
+          <CardList items={cardListGroups.earn} />
         </RightColumnPanel>
       </AccordionCustomItem>
       <AccordionCustomItem category="generate">
@@ -237,7 +237,7 @@ const StablecoinAccordion: React.FC<IProps> = () => {
             <Translation id="page-stablecoins-accordion-borrow-places-intro" />
           </p>
           <Box mb={8}>
-            <CardList content={cardListGroups.borrow} />
+            <CardList items={cardListGroups.borrow} />
           </Box>
           <SectionTitle>
             <Translation id="page-stablecoins-accordion-borrow-risks-title" />

src/components/Staking/StakingGuides.tsx

@@ -2,15 +2,15 @@
 import React from "react"
 
 // Components
-import CardList from "../CardList"
+import CardList, { CardListItem } from "../CardList"
 import { Stack } from "@chakra-ui/react"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 
 export interface IProps {}
 
 const StakingGuides: React.FC<IProps> = () => {
   const { t } = useTranslation()
-  const guides = [
+  const guides: CardListItem[] = [
     {
       title: t("page-staking-guide-title-coincashew-ethereum"),
       link: "https://www.coincashew.com/coins/overview-eth/guide-or-how-to-setup-a-validator-on-eth2-mainnet",
@@ -28,7 +28,7 @@ const StakingGuides: React.FC<IProps> = () => {
     },
   ]
 
-  return <Stack as={CardList} direction="column" gap={4} content={guides} />
+  return <Stack as={CardList} direction="column" gap={4} items={guides} />
 }
 
 export default StakingGuides

src/content/translations/sl/nft/index.md

@@ -12,7 +12,7 @@ summaryPoint2: NFT-ji dajejo ustvarjalcem vsebin več moči, kot so jo imeli kad
 summaryPoint3: Podprto s pametnimi pogodbami na Ethereumovi verigi blokov.
 ---
 
-## What are NFTs? {#what-are-nfts}
+## Kaj je NFT? {#what-are-nfts}
 
 NFT-ji so žetoni, ki so individualno unikatni. Vsak NFT ima drugačne lastnosti (nezamenljive) in je dokazljivo redek. To je drugače od žetonov, kot so ERC-20, kjer je vsak žeton v setu identičen in ima enake lastnosti (je zamenljiv). Vseeno vam je, kateri specifični bankovec imate v denarnici, zato ker so vsi identični in imajo enako vrednost. Vendar, vam _je_ pomembno, kateri specifični NFT imate, saj imajo vsi svoje individualne lastnosti, s katerimi jih lahko ločite od drugih (so nezamenljivi).
 

src/data/NetworkUpgradeSummaryData.ts

@@ -1,7 +1,7 @@
 interface NetworkUpgradeProps {
-  dateTimeAsString?: string
-  ethPriceInUSD?: number
-  waybackLink?: string
+  dateTimeAsString: string
+  ethPriceInUSD: number
+  waybackLink: string
   blockNumber?: number
   epochNumber?: number
   slotNumber?: number