Merge branch 'dev' into string-finalization

Author: wackerow

.env.example

@@ -35,9 +35,5 @@ BUILD_LOCALES=
 # fixed number of CPUs (e.g. 2) to limit the demand during build time
 LIMIT_CPUS=
 
-# Sentry auth token required for error tracking
-SENTRY_AUTH_TOKEN=
-NEXT_PUBLIC_SENTRY_DSN=
-
 # Enables the bundle analyzer
 ANALYZE=false

instrumentation.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")
-const { withSentryConfig } = require("@sentry/nextjs")
 
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
@@ -27,7 +26,7 @@ module.exports = (phase, { defaultConfig }) => {
   let nextConfig = {
     ...defaultConfig,
     reactStrictMode: true,
-    webpack: (config, { webpack }) => {
+    webpack: (config) => {
       config.module.rules.push({
         test: /\.ya?ml$/,
         use: "yaml-loader",
@@ -58,30 +57,13 @@ module.exports = (phase, { defaultConfig }) => {
       // Modify the file loader rule to ignore *.svg, since we have it handled now.
       fileLoaderRule.exclude = /\.svg$/i
 
-      // Tree shake Sentry debug code
-      // ref. https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
-      config.plugins.push(
-        new webpack.DefinePlugin({
-          __SENTRY_DEBUG__: false,
-          __RRWEB_EXCLUDE_IFRAME__: true,
-          __RRWEB_EXCLUDE_SHADOW_DOM__: true,
-          __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
-        })
-      )
-
       return config
     },
     i18n,
     trailingSlash: true,
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },
-    env: {
-      NEXT_PUBLIC_CONTEXT: process.env.CONTEXT,
-    },
-    experimental: {
-      instrumentationHook: true,
-    },
   }
 
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
@@ -110,15 +92,5 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return withBundleAnalyzer(
-    withSentryConfig(nextConfig, {
-      // TODO: temp config, update this to the correct org & project
-      org: "ethereumorg-ow",
-      project: "javascript-nextjs",
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      release: `${process.env.BUILD_ID}_${process.env.REVIEW_ID}`,
-      disableLogger: true,
-      silent: true,
-    })
-  )
+  return withBundleAnalyzer(nextConfig)
 }

next.config.js

@@ -48,7 +48,6 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@sentry/nextjs": "^8.19.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",

package.json

@@ -1,5 +1,5 @@
 ---
-title: Ethereum gas and fees: technical overview
+title: "Ethereum gas and fees: technical overview"
 description:
 lang: en
 ---

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

@@ -7,9 +7,9 @@ image: /images/heroes/roadmap-hub-hero.jpg
 alt: "Ethereum roadmap"
 summaryPoints:
 buttons:
-  - label: Further upgrades
+  - content: Further upgrades
     toId: what-changes-are-coming
-  - label: Past upgrades
+  - content: Past upgrades
     href: /history/
     variant: outline
 ---

public/content/roadmap/index.md

@@ -1,5 +1,5 @@
 ---
-title: Smart contracts: What are they and benefits
+title: "Smart contracts: What are they and benefits"
 description: A non-technical introduction to smart contracts
 lang: en
 ---

public/content/smart-contracts/index.md

@@ -1,33 +1,36 @@
-import type { ReactNode } from "react"
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  useColorModeValue,
-} from "@chakra-ui/react"
+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 { useClipboard } from "@/hooks/useClipboard"
 
 type CodeModalProps = {
   title: string
-  children: ReactNode
+  children?: ReactElement
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
 }
 
 const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
-  const bgColor = useColorModeValue("rgb(247, 247, 247)", "rgb(25, 25, 25)")
-  const borderColor = useColorModeValue("rgb(51, 51, 51)", "rgb(242, 242, 242)")
+  const { t } = useTranslation()
+  const codeSnippet = (Children.toArray(children)[0] as ReactElement).props
+    .children.props.children
+
+  const { onCopy, hasCopied } = useClipboard()
 
   return (
     <Modal
       isOpen={isOpen}
       scrollBehavior="inside"
       onClose={() => setIsOpen(false)}
     >
-      <ModalOverlay />
+      <ModalOverlay hideBelow="md" />
       <ModalContent
+        hideBelow="md"
         maxW="100vw"
         marginTop="auto"
         marginBottom="0"
@@ -36,35 +39,34 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         p={{ base: "0", md: "0" }}
         gap="0"
       >
-        <ModalHeader
-          bg={bgColor}
-          borderColor={borderColor}
-          borderTop="1px solid"
-          borderBottom="1px solid"
-          textTransform="uppercase"
-          fontWeight="normal"
-          fontSize="md"
-          fontFamily="monospace"
-          px="6"
-          py="4"
-          me="0"
-        >
-          {title}
-        </ModalHeader>
-        <ModalCloseButton
-          position="absolute"
-          padding="0"
-          width="24px"
-          height="24px"
-          borderRadius="0"
-          color="rgb(178, 178, 178)"
-          fontSize="sm"
-          margin="0"
-          top="4"
-          insetInlineEnd="4"
-          bottom="4"
-        />
+        <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>
+        <Button
+          variant="outline"
+          onClick={() => onCopy(codeSnippet)}
+          className="absolute end-4 top-20"
+        >
+          {hasCopied ? (
+            <>
+              <MdCheck /> {t("copied")}
+            </>
+          ) : (
+            <>
+              <IoMdCopy /> {t("copy")}
+            </>
+          )}
+        </Button>
       </ModalContent>
     </Modal>
   )

sentry.client.config.ts

@@ -202,18 +202,18 @@ const getValidChildrenForCodeblock = (child) => {
   }
 }
 
-export type CodeblockProps = {
+export type CodeblockProps = React.HTMLAttributes<HTMLDivElement> & {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
-  children: React.ReactNode
 }
 
 const Codeblock = ({
   children,
   allowCollapse = true,
   codeLanguage,
   fromHomepage = false,
+  className,
 }: CodeblockProps) => {
   const { t } = useTranslation("common")
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
@@ -227,14 +227,14 @@ const Codeblock = ({
 
   const [isCollapsed, setIsCollapsed] = useState(allowCollapse)
 
-  let className: string
+  let langClass: string
   if (React.isValidElement(children)) {
-    className = children?.props?.className
+    langClass = children?.props?.className
   } else {
-    className = codeLanguage || ""
+    langClass = codeLanguage || ""
   }
 
-  const matches = className?.match(/language-(.*)/)
+  const matches = langClass?.match(/language-(.*)/)
   const language = matches?.[1] || ""
 
   const shouldShowCopyWidget = ["js", "json", "python", "solidity"].includes(
@@ -249,12 +249,9 @@ const Codeblock = ({
   return (
     /* Overwrites codeblocks inheriting RTL styling in Right-To-Left script languages (e.g. Arabic) */
     /* Context: https://github.com/ethereum/ethereum-org-website/issues/6202 */
-    <div className="relative" dir="ltr">
+    <div className={cn("relative", className)} dir="ltr">
       <div
-        className={cn(
-          "mb-4 overflow-scroll rounded",
-          fromHomepage && "mb-0 border"
-        )}
+        className="overflow-scroll rounded"
         style={{
           maxHeight: isCollapsed
             ? `calc((1.2rem * ${LINES_BEFORE_COLLAPSABLE}) + 4.185rem)`