Merge pull request #13596 from ethereum/staging

Deploy v8.9.0

Author: corwintines

.all-contributorsrc

@@ -12260,7 +12260,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/112751524?v=4",
       "profile": "https://github.com/Shiva-Sai-ssb",
       "contributions": [
-        "bug"
+        "bug",
+        "maintenance"
       ]
     },
     {
@@ -12343,6 +12344,51 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "0xV4L3NT1N3",
+      "name": "0xV4L3NT1N3",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33112835?v=4",
+      "profile": "https://github.com/0xV4L3NT1N3",
+      "contributions": [
+        "tool"
+      ]
+    },
+    {
+      "login": "JoshDavisLight",
+      "name": "Josh Davis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/82784104?v=4",
+      "profile": "https://github.com/JoshDavisLight",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "tr1sm0s1n",
+      "name": "Mobin Mohanan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/47410557?v=4",
+      "profile": "https://github.com/tr1sm0s1n",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Baystef",
+      "name": "Adebayo Steve",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36106823?v=4",
+      "profile": "https://github.com/Baystef",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sanjanaynvsdl",
+      "name": "Sanjana",
+      "avatar_url": "https://avatars.githubusercontent.com/u/142678317?v=4",
+      "profile": "https://github.com/sanjanaynvsdl",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.env.example

@@ -33,4 +33,11 @@ BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time
-LIMIT_CPUS=
+LIMIT_CPUS=
+
+# Sentry auth token required for error tracking
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Enables the bundle analyzer
+ANALYZE=false

.github/ISSUE_TEMPLATE/suggest_wallet.yaml

@@ -264,7 +264,7 @@ body:
   - type: input
     id: wallet_l2_support
     attributes:
-      label: Does the wallet support Ethereum layer 2 networks?
+      label: Which Ethereum Layer 2 networks does the wallet support?
       description: Please provide documentation on Ethereum layer 2 networks this wallet supports.
     validations:
       required: true

.storybook/i18next.ts

@@ -21,6 +21,7 @@ export const ns = [
   "page-upgrades",
   "page-developers-index",
   "page-what-is-ethereum",
+  "page-upgrades-index",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

.storybook/main.ts

@@ -47,6 +47,9 @@ const config: StorybookConfig = {
     },
   },
   webpackFinal: async (config) => {
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+
     if (config.resolve) {
       config.resolve.plugins = [
         ...(config.resolve.plugins || []),
@@ -55,6 +58,22 @@ const config: StorybookConfig = {
         }),
       ]
     }
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.["test"]?.test(".svg")
+    )
+    if (imageRule) {
+      imageRule["exclude"] = /\.svg$/
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    })
+
     return config
   },
   typescript: {

README.md

@@ -96,6 +96,8 @@ yarn dev
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
   - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
+  - To build the site in other selected languages too, you need to set them in `BUILD_LOCALES`, eg: `BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
+  - To build all languages, simply comment this line out with a hash mark, eg: `# BUILD_LOCALES=`
 
 By default the script will build all the languages (complete list in `i18n.config.json`).
 
@@ -1873,7 +1875,7 @@ 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/abonnaudet-ledger"><img src="https://avatars.githubusercontent.com/u/71646516?v=4?s=100" width="100px;" alt="abonnaudet-ledger"/><br /><sub><b>abonnaudet-ledger</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aabonnaudet-ledger" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/JacobSharples"><img src="https://avatars.githubusercontent.com/u/45126111?v=4?s=100" width="100px;" alt="Jacob Sharples"/><br /><sub><b>Jacob Sharples</b></sub></a><br /><a href="#content-JacobSharples" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/omahs"><img src="https://avatars.githubusercontent.com/u/73983677?v=4?s=100" width="100px;" alt="omahs"/><br /><sub><b>omahs</b></sub></a><br /><a href="#translation-omahs" title="Translation">🌍</a> <a href="#maintenance-omahs" title="Maintenance">🚧</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Shiva-Sai-ssb"><img src="https://avatars.githubusercontent.com/u/112751524?v=4?s=100" width="100px;" alt="Shiva Sai"/><br /><sub><b>Shiva Sai</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AShiva-Sai-ssb" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Shiva-Sai-ssb"><img src="https://avatars.githubusercontent.com/u/112751524?v=4?s=100" width="100px;" alt="Shiva Sai"/><br /><sub><b>Shiva Sai</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AShiva-Sai-ssb" title="Bug reports">🐛</a> <a href="#maintenance-Shiva-Sai-ssb" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://bsaurabh.xyz/"><img src="https://avatars.githubusercontent.com/u/39492927?v=4?s=100" width="100px;" alt="Saurabh Burade"/><br /><sub><b>Saurabh Burade</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=saurabhburade" title="Code">💻</a></td>
     </tr>
     <tr>
@@ -1887,6 +1889,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/krishchvn"><img src="https://avatars.githubusercontent.com/u/58606754?v=4?s=100" width="100px;" alt="Krishnakumar Chavan"/><br /><sub><b>Krishnakumar Chavan</b></sub></a><br /><a href="#content-krishchvn" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xV4L3NT1N3"><img src="https://avatars.githubusercontent.com/u/33112835?v=4?s=100" width="100px;" alt="0xV4L3NT1N3"/><br /><sub><b>0xV4L3NT1N3</b></sub></a><br /><a href="#tool-0xV4L3NT1N3" title="Tools">🔧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoshDavisLight"><img src="https://avatars.githubusercontent.com/u/82784104?v=4?s=100" width="100px;" alt="Josh Davis"/><br /><sub><b>Josh Davis</b></sub></a><br /><a href="#content-JoshDavisLight" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tr1sm0s1n"><img src="https://avatars.githubusercontent.com/u/47410557?v=4?s=100" width="100px;" alt="Mobin Mohanan"/><br /><sub><b>Mobin Mohanan</b></sub></a><br /><a href="#content-tr1sm0s1n" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Baystef"><img src="https://avatars.githubusercontent.com/u/36106823?v=4?s=100" width="100px;" alt="Adebayo Steve"/><br /><sub><b>Adebayo Steve</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Baystef" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sanjanaynvsdl"><img src="https://avatars.githubusercontent.com/u/142678317?v=4?s=100" width="100px;" alt="Sanjana"/><br /><sub><b>Sanjana</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asanjanaynvsdl" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

chromatic.config.json

@@ -1,5 +1,6 @@
 {
   "projectId": "Project:6629cd26b1440f2cc20b94c0",
   "zip": true,
-  "buildScriptName": "build-storybook:chromatic"
+  "buildScriptName": "build-storybook:chromatic",
+  "onlyChanged": true
 }

instrumentation.ts

@@ -0,0 +1,28 @@
+import * as Sentry from "@sentry/nextjs"
+
+export async function register() {
+  const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+  if (!dsn) {
+    console.warn("Sentry DSN not found, skipping")
+    return
+  }
+
+  const commonSentryOptions = {
+    dsn,
+    enabled: process.env.NODE_ENV === "production",
+    tracesSampleRate: 1.0,
+  }
+
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+}

next.config.js

@@ -1,5 +1,10 @@
 /* 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",
+})
 
 const { i18n } = require("./next-i18next.config")
 
@@ -22,15 +27,47 @@ module.exports = (phase, { defaultConfig }) => {
   let nextConfig = {
     ...defaultConfig,
     reactStrictMode: true,
-    webpack: (config) => {
+    webpack: (config, { webpack }) => {
       config.module.rules.push({
         test: /\.ya?ml$/,
         use: "yaml-loader",
       })
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: "@svgr/webpack",
-      })
+
+      // SVG loader
+      // Grab the existing rule that handles SVG imports
+      const fileLoaderRule = config.module.rules.find((rule) =>
+        rule.test?.test?.(".svg")
+      )
+
+      config.module.rules.push(
+        // Reapply the existing rule, but only for svg imports ending in ?url
+        {
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          resourceQuery: /url/, // *.svg?url
+        },
+        // Convert all other *.svg imports to React components
+        {
+          test: /\.svg$/i,
+          issuer: fileLoaderRule.issuer,
+          resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+          use: ["@svgr/webpack"],
+        }
+      )
+
+      // 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
     },
@@ -39,6 +76,12 @@ module.exports = (phase, { defaultConfig }) => {
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },
+    env: {
+      NEXT_PUBLIC_CONTEXT: process.env.CONTEXT,
+    },
+    experimental: {
+      instrumentationHook: true,
+    },
   }
 
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
@@ -67,5 +110,15 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return nextConfig
+  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,
+    })
+  )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -34,9 +34,16 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
+    "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@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",
@@ -72,12 +79,13 @@
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
     "@chromatic-com/storybook": "1.5.0",
-    "@netlify/plugin-nextjs": "^5.0.0",
+    "@netlify/plugin-nextjs": "^5.5.1",
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/addon-interactions": "8.1.10",
     "@storybook/addon-links": "8.1.10",