Yarn & Node.js upgrade (#420)

.github/workflows/E2E.yml

@@ -15,8 +15,8 @@ jobs:
       - name: Setup Node.js for use with actions
         uses: actions/[email protected]
         with:
-          node-version: 20
-      - run: yarn install --frozen-lockfile
+          node-version: 22
+      - run: yarn install --immutable
       - name: Download Polkadot and parachain binaries
         run: |
           wget --no-verbose https://github.com/paritytech/polkadot-sdk/releases/download/polkadot-v1.8.0/polkadot
@@ -28,17 +28,13 @@ jobs:
       - name: Run a local relaychain with a parachain using zombienet
         run: |
           export PATH=$(pwd):$PATH
-          npx --yes @zombienet/[email protected] \
-            --provider native \
-            --dir zombienet_logs \
-            spawn zombienet.native.toml \
-            > polkadot.txt 2>&1 &
+          yarn e2e:zombienet > polkadot.txt 2>&1 &
           source wait_until.sh 'curl -s "127.0.0.1:9933"'
           source wait_until.sh 'curl -s "127.0.0.1:9934"'
         working-directory: e2e
-      - name: Generate PAPI types
-        run: yarn generate:papi
-      - name: Build faucet
+      - name: Compile typescript
+        run: yarn build
+      - name: Build faucet docker image
         run: yarn build:docker
       - name: Run the E2E tests
         run: yarn test:e2e

.github/workflows/deploy-site.yml

@@ -22,10 +22,10 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v4
         id: yarn-cache
@@ -34,7 +34,7 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      - run: yarn install --frozen-lockfile
+      - run: yarn install --immutable
       - run: yarn run check
       - name: Install Playwright
         run: npx playwright install

.github/workflows/test.yml

@@ -17,10 +17,10 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
@@ -30,10 +30,10 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: Install deps in root
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - run: yarn generate:papi
       - name: Install deps in client
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
         working-directory: client
       - run: yarn typecheck
       - run: yarn format
@@ -46,10 +46,10 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v4
         id: yarn-cache
@@ -59,6 +59,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
       - name: Install deps in root
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - run: yarn generate:papi
       - run: yarn test

.gitignore

@@ -12,4 +12,6 @@ env.*.config.json.d.ts
 !.env.example
 
 /data
-/src/codegen
+/.yarn/install-state.gz
+/client/.yarn/install-state.gz
+/papi-debug.log

.gitlab-ci.yml

@@ -18,7 +18,7 @@ variables:
   KUBE_NAMESPACE:                  "faucetbots"
   CI_REGISTRY:                     "docker.io/paritytech"
   GIT_STRATEGY:                    fetch
-  CI_IMAGE:                        node:20.14-alpine
+  CI_IMAGE:                        "docker.io/paritytech/eng-automation-ci:latest"
   # BUILDAH_IMAGE is defined in group variables
   BUILDAH_COMMAND:                 "buildah --storage-driver overlay2"
   ARGOCD_IMAGE:                    argoproj/argocd:v2.5.5

.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-4.3.0.cjs
+nodeLinker: node-modules

Dockerfile

@@ -1,4 +1,4 @@
-FROM docker.io/library/node:20.14-alpine
+FROM docker.io/library/node:22-alpine3.20
 
 RUN apk add --no-cache python3 make g++
 
@@ -18,8 +18,10 @@ LABEL io.parity.image.authors="[email protected]" \
 
 WORKDIR /faucet
 
-COPY ./package.json ./yarn.lock ./polkadot-api.json ./
-RUN yarn --frozen-lockfile
+COPY .yarn/ ./.yarn/
+COPY src/papi/chains/data ./src/papi/chains/data
+COPY package.json env.faucet.config.json yarn.lock polkadot-api.json .yarnrc.yml ./
+RUN yarn --immutable
 
 COPY . .
 RUN yarn build

README.md

@@ -19,6 +19,7 @@ yarn dev:db
 
 #### run migrations:
 ```bash
+yarn build
 yarn migrations:run
 ```
 

client/.yarnrc.yml

@@ -0,0 +1,2 @@
+yarnPath: .yarn/releases/yarn-4.3.0.cjs
+nodeLinker: node-modules

client/Dockerfile

@@ -1,21 +1,23 @@
-FROM node:18 AS build
+FROM node:22 AS build
 
 WORKDIR /app
 
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
+COPY package.json yarn.lock .yarnrc.yml ./
+COPY .yarn/ ./.yarn/
+RUN yarn install --immutable
 COPY . ./
 
 RUN yarn run check
 RUN yarn build
 
-FROM node:18-slim
+FROM node:22-slim
 
 WORKDIR /app
 
-COPY --from=build /app/package.json /app/yarn.lock ./
+COPY --from=build /app/package.json /app/yarn.lock /app/.yarnrc.yml ./
+COPY --from=build /app/.yarn/ ./.yarn/
 
-RUN yarn --prod
+RUN yarn workspaces focus --production
 
 COPY --from=build /app/build .
 

client/package.json

@@ -29,5 +29,6 @@
     "typescript": "^5.3.2",
     "vite": "^5.0.13"
   },
-  "type": "module"
+  "type": "module",
+  "packageManager": "[email protected]"
 }

client/src/lib/components/CaptchaV2.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
+
   import Cross from "./icons/Cross.svelte";
 
   export let captchaKey: string;

client/src/lib/components/Faucet.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import Card from "$lib/components/Card.svelte";
   import Form from "$lib/components/Form.svelte";
-  import SocialTags from "$lib/components/SocialTags.svelte";
   import Error from "$lib/components/screens/Error.svelte";
   import FrequentlyAskedQuestions from "$lib/components/screens/FrequentlyAskedQuestions.svelte";
   import Success from "$lib/components/screens/Success.svelte";
+  import SocialTags from "$lib/components/SocialTags.svelte";
   import type { NetworkData } from "$lib/utils/networkData";
   import { operation, testnet } from "$lib/utils/stores";
   import { onMount } from "svelte";
   import { fly } from "svelte/transition";
+
   import MarkUp from "./MarkUp.svelte";
 
   export let faq: string;

client/src/lib/components/Form.svelte

@@ -2,6 +2,7 @@
   import { PUBLIC_CAPTCHA_KEY } from "$env/static/public";
   import type { NetworkData } from "$lib/utils/networkData";
   import { operation, testnet } from "$lib/utils/stores";
+
   import { request as faucetRequest } from "../utils";
   import CaptchaV2 from "./CaptchaV2.svelte";
   import NetworkDropdown from "./NetworkDropdown.svelte";

client/src/lib/components/NetworkDropdown.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Networks, type NetworkData } from "$lib/utils/networkData";
+  import { type NetworkData, Networks } from "$lib/utils/networkData";
 
   import Chevron from "./icons/Chevron.svelte";
 

client/src/lib/components/NetworkInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { testnet } from "$lib/utils/stores";
-  import { Rococo, getChainName } from "../utils/networkData";
+
+  import { getChainName, Rococo } from "../utils/networkData";
   import Chevron from "./icons/Chevron.svelte";
 
   export let network: number = -1;

client/src/lib/components/SocialTags.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { MetaTags } from "svelte-meta-tags";
   import socialImage from "$lib/assets/polkadot.png";
+  import { MetaTags } from "svelte-meta-tags";
 </script>
 
 <MetaTags

client/src/lib/components/screens/Success.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { testnet } from "$lib/utils/stores";
+
   import CheckCircle from "../icons/CheckCircle.svelte";
 
   export let hash: string;

client/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
+  import "../app.css";
   import Footer from "$lib/components/Footer.svelte";
   import NavBar from "$lib/components/NavBar.svelte";
-  import "../app.css";
 </script>
 
 <div class="w-full">

client/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Faucet from "$lib/components/Faucet.svelte";
-  import { Rococo, type NetworkData } from "$lib/utils/networkData";
   import faqMd from "$lib/assets/FAQ.md?raw";
+  import Faucet from "$lib/components/Faucet.svelte";
+  import { type NetworkData, Rococo } from "$lib/utils/networkData";
 
   let network: NetworkData = Rococo;
   let faq: string = faqMd

client/src/routes/paseo/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Faucet from "$lib/components/Faucet.svelte";
-  import { Paseo, type NetworkData } from "$lib/utils/networkData";
   import faqMd from "$lib/assets/FAQ.md?raw";
+  import Faucet from "$lib/components/Faucet.svelte";
+  import { type NetworkData, Paseo } from "$lib/utils/networkData";
 
   let network: NetworkData = Paseo;
   let faq: string = faqMd

client/src/routes/westend/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Faucet from "$lib/components/Faucet.svelte";
-  import { Westend, type NetworkData } from "$lib/utils/networkData";
   import faqMd from "$lib/assets/FAQ.md?raw";
+  import Faucet from "$lib/components/Faucet.svelte";
+  import { type NetworkData, Westend } from "$lib/utils/networkData";
 
   let network: NetworkData = Westend;
   let faq: string = faqMd

client/tests/faucet.ts

@@ -1,4 +1,4 @@
-import { type Frame, type FullConfig, type Locator, type Page, expect, test } from "@playwright/test";
+import { expect, type Frame, type FullConfig, type Locator, type Page, test } from "@playwright/test";
 
 type FormSubmit = {
   address: string;