Merge remote-tracking branch 'upstream/dev' into migrate/gas

Author: Baystef

docs/applying-storybook.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-StorybookJS is a UI tool for isolating UI components to visually test their styles and states.
+StorybookJS is a UI tool for isolating UI components to visually test its styles and states.
 
 This is great for checking the various iterations of a component in a sandbox versus scouring all the pages in a large scale project it is used to verify that the component is rendering properly.
 
@@ -22,7 +22,7 @@ It's as easy as running `yarn storybook` to boot up a dedicated localhost to see
 
 A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
 
-There may be some exceptions, but generally each component should have only on story file.
+There may be some exceptions, but generally each component should have only one story file.
 
 The stories file will reside with each component. So the base folder structure in `src` will look like this:
 
@@ -134,7 +134,7 @@ export const Button: StoryObj<typeof meta> = {
 }
 ```
 
-As you go and make adjustments to the component itself or it's variant styles, Storybook will hot reload and those changes will appear in the stories that emphasize them.
+As you go and make adjustments to the component itself or its variant styles, Storybook will hot reload and those changes will appear in the stories that emphasize them.
 
 ## Storybook Dashboard
 

public/content/contributing/translation-program/translatathon/details/index.md

@@ -66,7 +66,7 @@ Bonus points breakdown:
 
 1) ETHglossary translators
 [ETHglossary](https://ethglossaryproject.vercel.app/) is an open-source glossary of key Ethereum terms, and an initiative to create and maintain a glossary of Ethereum terms and their translations in 60+ languages that anyone can use and contribute to.
-Translatathon participants can suggest translations for these terms and vote or discuss existing translations to earn bonus points in the Translathon.
+Translatathon participants can suggest translations for these terms and vote or discuss existing translations to earn bonus points in the Translatathon.
 Each 10 translated terms will earn you 100 bonus points, with a bonus for completing all 70 terms currently available in the glossary app. The bonus points will be automatically added to your final score once the Translatathon ends and the final scores are calculated.
 
 Participants can earn a maximum of 1,000 bonus points by translating all of the terms in their native language, but translating multiple languages will not result in any additional points!

public/content/contributing/translation-program/translatathon/index.md

@@ -86,9 +86,9 @@ For more details, [see the full Terms & conditions](/contributing/translation-pr
 ## Stay up to date
 
 <TranslationHubCallout>
-  <h3 style={{margin:0}}>Translataton hubs</h3>
+  <h3 style={{margin:0}}>Translatathon hubs</h3>
 
-  This year we bring IRL community hugs to join local communities and help translate. These hubs are located all over the world, find out if there is one close to you and join the community!
+  This year we bring IRL community hubs to join local communities and help translate. These hubs are located all over the world, find out if there is one close to you and join the community!
 </TranslationHubCallout>
 
 <TranslatathonCalendar />

public/content/contributing/translation-program/translatathon/terms-and-conditions/index.md

@@ -40,4 +40,4 @@ Participants agree that the Ethereum Foundation, its affiliates, and all of thei
 
 ## Governing Law
 
-Any dispute or claim arising out of or relating to the Translatathon (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the laws of Switzerland without giving effect to any choice or conflict of law provision or rule (whether of Switzerland or any other jurisdiction).
+Any dispute or claim arising out of or relating to the Translatathon (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the laws of Switzerland without giving effect to any choice or conflict of law provision or rule (whether of Switzerland or any other jurisdiction).

public/content/developers/docs/oracles/index.md

@@ -388,6 +388,8 @@ There are multiple oracle applications you can integrate into your Ethereum dapp
 
 **[Chainlink](https://chain.link/)** - _Chainlink decentralized oracle networks provide tamper-proof inputs, outputs, and computations to support advanced smart contracts on any blockchain._
 
+**[RedStone Oracles](https://redstone.finance/)** - _RedStone is a decentralized modular oracle that provides gas-optimized data feeds. It specializes in offering price feeds for emerging assets, such as liquid staking tokens (LSTs), liquid restaking tokens (LRTs), and Bitcoin staking derivatives._
+
 **[Chronicle](https://chroniclelabs.org/)** - _Chronicle overcomes the current limitations of transferring data on-chain by developing truly scalable, cost-efficient, decentralized, and verifiable oracles._
 
 **[Witnet](https://witnet.io/)** - _Witnet is a permissionless, decentralized, and censorship-resistant oracle helping smart contracts to react to real world events with strong crypto-economic guarantees._

public/content/translations/zh/roadmap/index.md

@@ -61,7 +61,7 @@ buttons:
 
 <RoadmapImageContent title="路线图是如何制定的？">
 
-因为协议的技术性很强，所以路线图主要是研究人员和开发者多年来工作的结果，但任何有意向的人都可以参与进来。 想法通常都始于论坛上的讨论，比如[ethresear.ch] (https://ethresear.ch/)、[以太坊魔术师] (https://ethereum-magicians.org/) 或者以太坊研发 discord 服务器。 它们可能是对新发现的漏洞的响应、来自从事于应用程序层的组织（例如[去中心化应用程序] (/glossary/#dapp) 和交易所）的建议或终端用户面临的已知问题（例如费用或交易速度）。 这些想法一旦成熟，就可以作为 [以太坊改进建议](https://eips.ethereum.org/) 提出。 整个过程都是公开进行的，社区的任何人可以随时发表意见。
+因为协议的技术性很强，所以路线图主要是研究人员和开发者多年来工作的结果，但任何有意向的人都可以参与进来。 想法通常都始于论坛上的讨论，比如 [ethresear.ch](https://ethresear.ch/)、[以太坊魔术师](https://ethereum-magicians.org/) 或者以太坊研发 discord 服务器。 它们可能是对新发现的漏洞的响应、来自从事于应用程序层的组织（例如[去中心化应用程序] (/glossary/#dapp) 和交易所）的建议或终端用户面临的已知问题（例如费用或交易速度）。 这些想法一旦成熟，就可以作为 [以太坊改进建议](https://eips.ethereum.org/) 提出。 整个过程都是公开进行的，社区的任何人可以随时发表意见。
 
 [更多关于以太坊治理的信息](/governance/)
 

public/images/dapps/crackandstack.png

@@ -2,9 +2,15 @@ import { Children, type ReactElement } from "react"
 import { useTranslation } from "next-i18next"
 import { IoMdCopy } from "react-icons/io"
 import { MdCheck } from "react-icons/md"
-import { Modal, ModalBody, ModalContent, ModalOverlay } from "@chakra-ui/react"
 
 import { Button } from "./ui/buttons/Button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog-modal"
 
 import { useClipboard } from "@/hooks/useClipboard"
 
@@ -23,39 +29,18 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
   const { onCopy, hasCopied } = useClipboard()
 
   return (
-    <Modal
-      isOpen={isOpen}
-      scrollBehavior="inside"
-      onClose={() => setIsOpen(false)}
-    >
-      <ModalOverlay hideBelow="md" />
-      <ModalContent
-        hideBelow="md"
-        maxW="100vw"
-        marginTop="auto"
-        marginBottom="0"
-        maxHeight="50%"
-        borderRadius="0"
-        p={{ base: "0", md: "0" }}
-        gap="0"
-      >
-        <div className="flex items-center border-y bg-background px-6 py-3 font-monospace uppercase">
-          <h2 className="text-md font-normal">{title}</h2>
-          <Button
-            variant="ghost"
-            className="ms-auto text-sm"
-            size="sm"
-            isSecondary
-            onClick={() => setIsOpen(false)}
-          >
-            {t("close")}
-          </Button>
-        </div>
-        <ModalBody p="0">{children}</ModalBody>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="absolute inset-0 mb-0 mt-auto max-h-[50%] max-w-[100vw]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogDescription asChild>
+          <div className="overflow-y-auto">{children}</div>
+        </DialogDescription>
         <Button
           variant="outline"
           onClick={() => onCopy(codeSnippet)}
-          className="absolute right-4 top-20" // Force right, code always LTR
+          className="absolute right-19 top-24" // Force right, code always LTR
         >
           {hasCopied ? (
             <>
@@ -67,8 +52,8 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
             </>
           )}
         </Button>
-      </ModalContent>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 

src/components/CodeModal.tsx

@@ -236,7 +236,7 @@ const NetworkSubComponent = ({ network }) => {
             <div className="flex flex-col gap-0.5">
               <div>
                 <InlineLink
-                  href={network.growThePieLink}
+                  href={network.growthepieLink}
                   customEventOptions={{
                     eventCategory: "l2_networks",
                     eventAction: "analytics_profiles",

src/components/Layer2NetworksTable/NetworksSubComponent.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from "next-i18next"
-import { useColorModeValue } from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import { TwImage as Image } from "@/components/Image"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
 import darkImage from "@/public/images/ef-logo.png"
 import lightImage from "@/public/images/ef-logo-white.png"
 
@@ -11,7 +11,11 @@ const Logo = () => {
   const image = useColorModeValue(darkImage, lightImage)
 
   return (
-    <Image src={image} h={100} w="auto" alt={t("ethereum-foundation-logo")} />
+    <Image
+      src={image}
+      className="h-[100px] w-auto"
+      alt={t("ethereum-foundation-logo")}
+    />
   )
 }