Deploy v10.20.1

.all-contributorsrc

@@ -13961,6 +13961,15 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "madisoncarter1234",
+      "name": "Madison carter",
+      "avatar_url": "https://avatars.githubusercontent.com/u/184700418?v=4",
+      "profile": "https://github.com/madisoncarter1234",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: E2E tests
+name: Playwright Tests
 on:
   workflow_dispatch: # Can be dispatched manually
 jobs:
@@ -31,16 +31,16 @@ jobs:
       - name: Install Playwright with all browsers
         run: npx playwright install --with-deps
 
-      - name: Run E2E Tests on Netlify URL
-        run: pnpm test:e2e
+      - name: Run All Tests (Unit + E2E)
+        run: pnpm test
         env:
           PLAYWRIGHT_TEST_BASE_URL: ${{ steps.netlify_deploy.outputs.url }}
 
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
-          path: ./tests/e2e/__results__
+          path: ./tests/__results__
           retention-days: 7
 
   chromatic:
@@ -64,7 +64,7 @@ jobs:
         uses: actions/download-artifact@v6
         with:
           name: playwright-report
-          path: ./tests/e2e/__results__
+          path: ./tests/__results__
 
       - name: Run Chromatic
         uses: chromaui/action@latest
@@ -74,4 +74,4 @@ jobs:
           exitZeroOnChanges: true
           storybookBaseDir: .
         env:
-          CHROMATIC_ARCHIVE_LOCATION: ./tests/e2e/__results__
+          CHROMATIC_ARCHIVE_LOCATION: ./tests/__results__

.gitignore

@@ -8,6 +8,8 @@
 
 # testing
 /coverage
+tests/__results__/
+tests/__report__/
 
 # next.js
 /.next/
@@ -65,3 +67,6 @@ src/data/crowdin/bucketsAwaitingReviewReport.csv
 build-storybook.log
 build-archive.log
 storybook-static
+
+# Trigger
+.trigger

README.md

@@ -2160,6 +2160,7 @@ 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/Sshadow84"><img src="https://avatars.githubusercontent.com/u/96975661?v=4?s=100" width="100px;" alt="shadow"/><br /><sub><b>shadow</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3ASshadow84" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/madisoncarter1234"><img src="https://avatars.githubusercontent.com/u/184700418?v=4?s=100" width="100px;" alt="Madison carter"/><br /><sub><b>Madison carter</b></sub></a><br /><a href="#content-madisoncarter1234" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

app/[locale]/layer-2/networks/page.tsx

@@ -10,51 +10,56 @@ import type { CommitHistory, Lang, PageParams } from "@/lib/types"
 import I18nProvider from "@/components/I18nProvider"
 
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 import { networkMaturity } from "@/lib/utils/networkMaturity"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { ethereumNetworkData, layer2Data } from "@/data/networks/networks"
 import { walletsData } from "@/data/wallets/wallet-data"
 
-import { BASE_TIME_UNIT } from "@/lib/constants"
-
 import Layer2Networks from "./_components/networks"
 import Layer2NetworksPageJsonLD from "./page-jsonld"
 
-import { fetchEthereumMarketcap } from "@/lib/api/fetchEthereumMarketcap"
-import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
-import { fetchGrowThePieBlockspace } from "@/lib/api/fetchGrowThePieBlockspace"
-import { fetchGrowThePieMaster } from "@/lib/api/fetchGrowThePieMaster"
-import { fetchL2beat } from "@/lib/api/fetchL2beat"
-
-// In seconds
-const REVALIDATE_TIME = BASE_TIME_UNIT * 1
-
-const loadData = dataLoader(
-  [
-    ["ethereumMarketcapData", fetchEthereumMarketcap],
-    ["growThePieData", fetchGrowThePie],
-    ["growThePieBlockspaceData", fetchGrowThePieBlockspace],
-    ["growThePieMasterData", fetchGrowThePieMaster],
-    ["l2beatData", fetchL2beat],
-  ],
-  REVALIDATE_TIME * 1000
-)
+import {
+  getEthereumMarketcapData,
+  getGrowThePieBlockspaceData,
+  getGrowThePieData,
+  getGrowThePieMasterData,
+  getL2beatData,
+} from "@/lib/data"
 
 const Page = async ({ params }: { params: PageParams }) => {
   const { locale } = params
 
   setRequestLocale(locale)
 
+  // Fetch data using the new data-layer functions (already cached)
   const [
     ethereumMarketcapData,
     growThePieData,
     growThePieBlockspaceData,
     growThePieMasterData,
     l2beatData,
-  ] = await loadData()
+  ] = await Promise.all([
+    getEthereumMarketcapData(),
+    getGrowThePieData(),
+    getGrowThePieBlockspaceData(),
+    getGrowThePieMasterData(),
+    getL2beatData(),
+  ])
+
+  // Handle null cases - throw error if required data is missing
+  if (!l2beatData) {
+    throw new Error("Failed to fetch L2beat data")
+  }
+
+  if (!growThePieData) {
+    throw new Error("Failed to fetch GrowThePie data")
+  }
+
+  if (!ethereumMarketcapData) {
+    throw new Error("Failed to fetch Ethereum marketcap data")
+  }
 
   const layer2DataCompiled = layer2Data
     .map((network) => {

app/[locale]/layer-2/page.tsx

@@ -10,39 +10,37 @@ import type { CommitHistory, Lang, PageParams } from "@/lib/types"
 import I18nProvider from "@/components/I18nProvider"
 
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { getMetadata } from "@/lib/utils/metadata"
 import { networkMaturity } from "@/lib/utils/networkMaturity"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import { layer2Data } from "@/data/networks/networks"
 
-import { BASE_TIME_UNIT } from "@/lib/constants"
-
 import Layer2Page from "./_components/layer-2"
 import Layer2PageJsonLD from "./page-jsonld"
 
 import { routing } from "@/i18n/routing"
-import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
-import { fetchL2beat } from "@/lib/api/fetchL2beat"
-
-// In seconds
-const REVALIDATE_TIME = BASE_TIME_UNIT * 24
-
-const loadData = dataLoader(
-  [
-    ["growThePieData", fetchGrowThePie],
-    ["l2beatData", fetchL2beat],
-  ],
-  REVALIDATE_TIME * 1000
-)
+import { getGrowThePieData, getL2beatData } from "@/lib/data"
 
 const Page = async ({ params }: { params: PageParams }) => {
   const { locale } = params
 
   setRequestLocale(locale)
 
-  const [growThePieData, l2beatData] = await loadData()
+  // Fetch data using the new data-layer functions (already cached)
+  const [growThePieData, l2beatData] = await Promise.all([
+    getGrowThePieData(),
+    getL2beatData(),
+  ])
+
+  // Handle null cases - throw error if required data is missing
+  if (!l2beatData) {
+    throw new Error("Failed to fetch L2beat data")
+  }
+
+  if (!growThePieData) {
+    throw new Error("Failed to fetch GrowThePie data")
+  }
 
   const getRandomL2s = () => {
     let randomL2s = layer2Data.filter(

netlify.toml

@@ -39,4 +39,4 @@
     path = "en/developers/tutorials/creating-a-wagmi-ui-for-your-contract/"
 
 [functions]
-  included_files = ["i18n.config.json", "src/intl/**/*", "src/data/mocks/**/*"]
+  included_files = ["i18n.config.json", "src/intl/**/*", "src/data/mocks/**/*", "src/data-layer/mocks/**/*"]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "10.20.0",
+  "version": "10.20.1",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -23,16 +23,20 @@
     "crowdin-needs-review": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/reports/generateReviewReport.ts",
     "update-tutorials": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/update-tutorials-list.ts",
     "prepare": "husky",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:report": "playwright show-report tests/e2e/__report__"
+    "test": "pnpm test:unit && pnpm test:e2e",
+    "test:unit": "USE_MOCK_DATA=true playwright test --project=unit",
+    "test:e2e": "playwright test --project=e2e --project=e2e-webkit --project=e2e-mobile-chrome --project=e2e-mobile-safari",
+    "test:e2e:ui": "playwright test --project=e2e --ui",
+    "test:e2e:debug": "playwright test --project=e2e --debug",
+    "test:e2e:report": "playwright show-report tests/__report__",
+    "trigger:dev": "dotenv -e .env -- npx trigger.dev@latest dev"
   },
   "dependencies": {
     "@aws-sdk/client-ses": "^3.859.0",
     "@crowdin/crowdin-api-client": "^1.25.0",
     "@docsearch/react": "^3.5.2",
     "@hookform/resolvers": "^3.8.0",
+    "@netlify/blobs": "^10.4.1",
     "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.2",
@@ -60,6 +64,7 @@
     "@tanstack/react-query": "^5.66.7",
     "@tanstack/react-table": "^8.19.3",
     "@tanstack/react-virtual": "^3.13.12",
+    "@trigger.dev/sdk": "4.3.0",
     "@types/canvas-confetti": "^1.9.0",
     "@types/three": "^0.177.0",
     "@wagmi/core": "^2.17.3",
@@ -136,6 +141,7 @@
     "chromatic": "12.0.0",
     "decompress": "^4.2.1",
     "dotenv": "^16.5.0",
+    "dotenv-cli": "^11.0.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "^9",
@@ -155,7 +161,7 @@
     "raw-loader": "^4.0.2",
     "rehype-slug": "^6.0.0",
     "remark-heading-id": "^1.0.1",
-    "storybook": "8.6.14",
+    "storybook": "8.6.15",
     "storybook-next-intl": "^1.2.5",
     "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.1",

playwright.config.ts

@@ -7,14 +7,14 @@ import { defineConfig, devices } from "@playwright/test"
 dotenv.config({ path: path.resolve(__dirname, ".env.local") })
 
 export default defineConfig<ChromaticConfig>({
-  testDir: "./tests/e2e",
-  outputDir: "./tests/e2e/__results__",
+  testDir: "./tests",
+  outputDir: "./tests/__results__",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : 3,
   reporter: [
-    ["html", { outputFolder: "./tests/e2e/__report__", open: "never" }],
+    ["html", { outputFolder: "./tests/__report__", open: "never" }],
     ["line"],
     process.env.CI ? ["github"] : ["list"],
   ],
@@ -38,24 +38,39 @@ export default defineConfig<ChromaticConfig>({
   expect: {
     timeout: 10000,
   },
+
   projects: [
-    /* Test against desktop browsers */
+    // ─────────────────────────────────────────────────────────────────────────
+    // E2E tests - Visual regression + functional tests across browsers/devices
+    // ─────────────────────────────────────────────────────────────────────────
     {
-      name: "chromium",
+      name: "e2e",
+      testDir: "./tests/e2e",
       use: { ...devices["Desktop Chrome"] },
     },
     {
-      name: "webkit",
+      name: "e2e-webkit",
+      testDir: "./tests/e2e",
       use: { ...devices["Desktop Safari"] },
     },
-    /* Test against mobile viewports. */
     {
-      name: "Mobile Chrome",
+      name: "e2e-mobile-chrome",
+      testDir: "./tests/e2e",
       use: { ...devices["Pixel 5"] },
     },
     {
-      name: "Mobile Safari",
+      name: "e2e-mobile-safari",
+      testDir: "./tests/e2e",
       use: { ...devices["iPhone 12"] },
     },
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // Unit tests
+    // ─────────────────────────────────────────────────────────────────────────
+    {
+      name: "unit",
+      testDir: "./tests/unit",
+      use: {},
+    },
   ],
 })