Merge (#632) (#634)

.changeset/nasty-schools-camp.md

@@ -0,0 +1,9 @@
+---
+'@status-im/eslint-config': patch
+'@status-im/components': patch
+'@status-im/js': patch
+'@status-im/colors': patch
+'@status-im/icons': patch
+---
+
+use pnpm and update node

.github/workflows/ci.yml

@@ -24,23 +24,28 @@ jobs:
         with:
           fetch-depth: 2
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
         with:
-          node-version: 18
-          cache: 'yarn'
+          version: 9.12.3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.18.0
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: yarn build
+        run: pnpm build
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm typecheck
 
       - name: Lint
-        run: yarn lint && yarn format --check
+        run: pnpm lint && pnpm format --check
 
       - name: Test
-        run: yarn test
+        run: pnpm test

.github/workflows/release.yml

@@ -21,18 +21,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: pnpm/action-setup@v4
         with:
-          node-version: 18
-      - run: yarn install --frozen-lockfile
-      - run: yarn build
+          version: 9.12.3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.18.0
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
       - uses: changesets/action@v1
         id: changesets
         with:
           title: Release
           commit: Release
-          version: yarn changeset version
-          publish: yarn changeset publish
+          version: pnpm changeset version
+          publish: pnpm changeset publish
           createGithubReleases: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx lint-staged
+pnpm lint-staged

.node-version

@@ -0,0 +1 @@
+20.18.0

.npmignore

@@ -0,0 +1,2 @@
+!.npmrc
+#!pnpm-lock.yaml

.npmrc

@@ -0,0 +1,11 @@
+; https://pnpm.io/cli/run#enable-pre-post-scripts
+enable-pre-post-scripts=true
+; https://pnpm.io/npmrc#node-linker
+; node-linker=hoisted
+; https://pnpm.io/npmrc#shamefully-hoist
+;shamefully-hoist=true
+;auto-install-peers=true
+; https://pnpm.io/npmrc#node-version
+node-version=20.18.0
+; https://pnpm.io/npmrc#engine-strict
+engine-strict=true

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "npm.packageManager": "yarn",
+  "npm.packageManager": "pnpm",
   "eslint.workingDirectories": [
     {
       "mode": "auto",

README.md

@@ -24,8 +24,8 @@ This monorepo contains packages for building web applications in the Status ecos
 
 Required:
 
-- **[Node.js](https://nodejs.org/)** v18.x
-- **[Yarn](https://yarnpkg.com/)** v1.22.x
+- **[Node.js](https://nodejs.org/)** v20.x
+- **[pnpm](https://pnpm.io)** v9.12.x
 
 Recommended:
 
@@ -57,24 +57,24 @@ Recommended:
 2. Install dependencies:
 
    ```
-   yarn install
+   pnpm install
    ```
 
 3. Build all packages:
 
    ```
-   yarn build
+   pnpm build
    ```
 
 4. Run tests:
 
    ```
-   yarn test
+   pnpm test
    ```
 
 5. Start development mode:
    ```
-   yarn dev
+   pnpm dev
    ```
 
 ## Storybook
@@ -82,7 +82,7 @@ Recommended:
 To view and interact with the components, you can run Storybook:
 
 ```
-yarn storybook
+pnpm storybook
 ```
 
 This will start the Storybook server, allowing you to browse and test components in isolation.

apps/connector/Jenkinsfile

@@ -48,7 +48,7 @@ pipeline {
           dir("${env.WORKSPACE}/apps/connector") {
             script {
               nix.shell(
-                'yarn install --frozen-lockfile',
+                'pnpm install --frozen-lockfile',
                 pure: false,
                 entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
               )
@@ -65,7 +65,7 @@ pipeline {
           dir("${env.WORKSPACE}/apps/connector") {
             script {
               nix.shell(
-                'yarn build:chrome',
+                'pnpm build:chrome',
                 pure: false,
                 entryPoint: "${env.WORKSPACE}/apps/connector/shell.nix"
               )
@@ -121,15 +121,15 @@ pipeline {
     success {
       script {
         if(changesDetected) {
-          github.notifyPR(true) 
-        } 
+          github.notifyPR(true)
+        }
       }
     }
     failure {
       script {
         if(changesDetected) {
-          github.notifyPR(false) 
-        } 
+          github.notifyPR(false)
+        }
       }
     }
     cleanup { cleanWs() }

apps/connector/README.md

@@ -20,13 +20,13 @@ Tested with these browsers:
 #### Develop
 
 ```bash
-yarn dev:chrome
+pnpm dev:chrome
 ```
 
 #### Build
 
 ```bash
-yarn build:chrome
+pnpm build:chrome
 ```
 
 #### Load
@@ -42,7 +42,7 @@ Google Chrome > Window > Extensions > Load unpacked > select build (build/chrome
 #### Develop
 
 ```bash
-yarn dev:safari
+pnpm dev:safari
 ```
 
 #### Convert
@@ -70,13 +70,13 @@ Safari > Settings... > Extensions > check Status
 #### Develop
 
 ```bash
-yarn dev:firefox
+pnpm dev:firefox
 ```
 
 #### Build
 
 ```bash
-yarn build:firefox
+pnpm build:firefox
 ```
 
 #### Load

apps/connector/package.json

@@ -9,6 +9,7 @@
     "directory": "apps/connector"
   },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "dev:chrome": "plasmo dev --target=chrome-mv3",
     "dev:safari": "plasmo dev --target=safari-mv3",
     "dev:firefox": "plasmo dev --target=firefox-mv3",

apps/connector/shell.nix

@@ -1,7 +1,7 @@
 {
   source ? builtins.fetchTarball {
-    url = "https://github.com/NixOS/nixpkgs/archive/614b4613980a522ba49f0d194531beddbb7220d3.tar.gz";
-    sha256 = "sha256:1kipdjdjcd1brm5a9lzlhffrgyid0byaqwfnpzlmw3q825z7nj6w";
+    url = "https://github.com/NixOS/nixpkgs/archive/df27247e6f3e636c119e2610bf12d38b5e98cc79.tar.gz";
+    sha256 = "sha256:0bbvimk7xb7akrx106mmsiwf9nzxnssisqmqffla03zz51d0kz2n";
   },
   pkgs ? import (source) {}
 }:
@@ -11,6 +11,6 @@ pkgs.mkShell {
 
   buildInputs = with pkgs; [
     nodejs_20
-    yarn
+    pnpm
   ];
 }

package.json

@@ -12,16 +12,16 @@
   },
   "keywords": [],
   "scripts": {
-    "postinstall": "patch-package",
+    "preinstall": "npx only-allow pnpm",
     "prepare": "husky install",
     "test": "turbo run test --filter=@status-im/* -- --run",
     "dev": "turbo run dev --filter=@status-im/* --parallel",
-    "build": "turbo run build --filter=@status-im/*",
+    "build": "turbo run build --filter=@status-im/* && node --version",
     "lint": "turbo run lint --filter=@status-im/* --filter=web",
     "typecheck": "turbo run typecheck",
-    "format": "prettier --ignore-path .gitignore --write .",
+    "format": "prettier --write .",
     "clean": "turbo run clean && rimraf node_modules",
-    "storybook": "yarn workspace @status-im/components storybook"
+    "storybook": "pnpm --filter @status-im/components storybook"
   },
   "resolutions": {
     "@types/react": "18.0.33",
@@ -29,14 +29,17 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
-    "@status-im/eslint-config": "*",
+    "@status-im/eslint-config": "workspace:*",
     "@tsconfig/strictest": "^2.0.0",
     "@types/prettier": "^2.7.2",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
-    "patch-package": "^6.5.1",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^4.4.1",
     "turbo": "^1.8.8",
     "typescript": "^5.6.2",
@@ -44,10 +47,17 @@
     "vite-node": "^0.29.8",
     "vitest": "^0.29.8"
   },
-  "packageManager": "yarn@1.22.17",
+  "packageManager": "pnpm@9.12.3",
   "lint-staged": {
     "*.{md,mdx,yml,yaml,json}": [
       "prettier --write"
     ]
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@achingbrain/ssdp@4.0.1": "patches/@achingbrain__ssdp@4.0.1.patch",
+      "@libp2p/bootstrap@9.0.10": "patches/@libp2p__bootstrap@9.0.10.patch",
+      "it-length-prefixed@9.0.3": "patches/it-length-prefixed@9.0.3.patch"
+    }
   }
 }

packages/colors/package.json

@@ -19,25 +19,29 @@
     },
     "./package.json": "./package.json"
   },
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "sync": "rimraf src && vite-node scripts/sync.ts",
     "dev": "vite build --watch --mode development",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "build": "vite build",
-    "postbuild": "yarn build:types",
+    "postbuild": "pnpm build:types",
     "#test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint src",
-    "lint:fix": "yarn lint --fix",
+    "lint:fix": "pnpm lint --fix",
     "format": "prettier --write src",
     "clean": "rimraf dist node_modules .turbo",
-    "prepack": "yarn build"
+    "prepack": "pnpm build"
   },
   "peerDependencies": {},
   "devDependencies": {
     "@clack/prompts": "^0.6.3",
     "colorjs.io": "^0.4.3",
-    "@status-im/eslint-config": "*",
+    "@status-im/eslint-config": "workspace:*",
     "figma-api": "^1.11.0",
     "fs-extra": "^11.1.1",
     "vite": "^5.4.3",

packages/components/package.json

@@ -24,10 +24,14 @@
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
-    "postbuild": "yarn build:types",
+    "postbuild": "pnpm build:types && node --version",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "typecheck": "tsc",
     "lint": "eslint src",
@@ -36,7 +40,7 @@
     "storybook:dev": "storybook dev -p 3001",
     "storybook:build": "storybook build",
     "clean": "rimraf node_modules dist .turbo storybook-static",
-    "prepack": "yarn build"
+    "prepack": "pnpm build"
   },
   "peerDependencies": {
     "react": "^18.2.0"
@@ -52,8 +56,8 @@
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@status-im/colors": "*",
-    "@status-im/icons": "*",
+    "@status-im/colors": "workspace:*",
+    "@status-im/icons": "workspace:*",
     "cva": "^1.0.0-beta.1",
     "date-fns": "^2.30.0",
     "react-aria-components": "^1.3.3",
@@ -62,7 +66,8 @@
     "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@status-im/eslint-config": "*",
+    "@status-im/eslint-config": "workspace:*",
+    "@storybook/addon-actions": "^8.3.0",
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",
@@ -72,6 +77,8 @@
     "@storybook/react": "^8.3.0",
     "@storybook/react-vite": "^8.3.0",
     "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.16",
     "eslint-plugin-tailwindcss": "^3.17.4",

packages/components/scripts/storybook.js

@@ -7,7 +7,7 @@
 const child_process = require('node:child_process')
 const process = require('node:process')
 
-const subprocess = child_process.spawn('yarn', ['storybook:dev', '--no-open'], {
+const subprocess = child_process.spawn('pnpm', ['storybook:dev', '--no-open'], {
   detached: true,
   stdio: 'inherit',
 })

packages/components/src/toast/toast.stories.tsx

@@ -26,7 +26,11 @@ const Actions = () => {
   )
 }
 
-const meta = {
+/**
+ * > error TS2742: The inferred type of 'meta' cannot be named without a reference to '.pnpm/@storybook+csf@0.1.11/node_modules/@storybook/csf'. This is likely not portable. A type annotation is necessary.
+ * > – @see https://github.com/storybookjs/storybook/issues/24656
+ */
+const meta: Meta<typeof Toast> = {
   component: Toast,
   title: 'Components/Toast',
   parameters: {
@@ -75,7 +79,7 @@ const meta = {
       </>
     ),
   ],
-} satisfies Meta<typeof Toast>
+}
 
 type Story = StoryObj<typeof Toast>
 

packages/components/vercel.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://openapi.vercel.sh/vercel.json",
   "ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,icons} ./",
-  "installCommand": "yarn install --cwd ../../ --frozen-lockfile",
-  "buildCommand": "turbo run build --cwd ../../ --filter=components... && yarn storybook:build"
+  "installCommand": "pnpm install --dir ../../ --frozen-lockfile",
+  "buildCommand": "turbo run build --cwd ../../ --filter=components... && pnpm storybook:build"
 }

packages/eslint-config/package.json

@@ -10,7 +10,11 @@
     },
     "./package.json": "./package.json"
   },
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "clean": "rimraf node_modules"
   },
   "dependencies": {

packages/icons/package.json

@@ -53,20 +53,24 @@
       "import": "./svg/reactions/*.svg"
     }
   },
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "sync": "vite-node scripts/sync.ts && prettier --parser=html --write 'svg/**/*.svg'",
-    "generate": "rimraf src && svgr svg --out-dir src && yarn lint:fix && yarn format",
+    "generate": "rimraf src && svgr svg --out-dir src && pnpm lint:fix && pnpm format",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
-    "postbuild": "yarn build:types",
+    "postbuild": "pnpm build:types && node --version",
     "build:types": "tsc src/**/index.ts --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
     "#test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
-    "lint:fix": "yarn lint --fix",
+    "lint:fix": "pnpm lint --fix",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "clean": "rimraf dist node_modules .turbo",
-    "prepack": "yarn build"
+    "prepack": "pnpm build"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",
@@ -74,7 +78,7 @@
   },
   "devDependencies": {
     "@clack/prompts": "^0.7.0",
-    "@status-im/eslint-config": "*",
+    "@status-im/eslint-config": "workspace:*",
     "@svgr/cli": "^8.1.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-prettier": "^8.1.0",

packages/status-js/package.json

@@ -33,11 +33,15 @@
   "bugs": {
     "url": "https://github.com/status-im/status-web/issues"
   },
+  "engines": {
+    "node": ">=18.18.0"
+  },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "test": "vitest",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
-    "postbuild": "yarn build:types",
+    "postbuild": "pnpm build:types",
     "build:types": "tsc --noEmit false --emitDeclarationOnly || true",
     "lint": "eslint src",
     "typecheck": "tsc",
@@ -60,7 +64,7 @@
   },
   "devDependencies": {
     "@bufbuild/protoc-gen-es": "1.4.2",
-    "@status-im/eslint-config": "*",
+    "@status-im/eslint-config": "workspace:*",
     "@waku/interfaces": "^0.0.21",
     "happy-dom": "^9.1.7"
   },

patches/@achingbrain__ssdp@4.0.1.patch

@@ -1,7 +1,7 @@
-diff --git a/node_modules/@achingbrain/ssdp/dist/src/default-ssdp-options.js b/node_modules/@achingbrain/ssdp/dist/src/default-ssdp-options.js
-index bcce6af..f687757 100644
---- a/node_modules/@achingbrain/ssdp/dist/src/default-ssdp-options.js
-+++ b/node_modules/@achingbrain/ssdp/dist/src/default-ssdp-options.js
+diff --git a/dist/src/default-ssdp-options.js b/dist/src/default-ssdp-options.js
+index bcce6af79fa2f406a428501b098c3a4b26bb72d4..f687757d3d852eda3229487ca43ba0fd70a2ab78 100644
+--- a/dist/src/default-ssdp-options.js
++++ b/dist/src/default-ssdp-options.js
 @@ -1,11 +1,8 @@
  import { v4 } from 'uuid';
  import { defaultSocketOptions } from './default-socket-options.js';

patches/@libp2p+bootstrap+9.0.10.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@libp2p/bootstrap/package.json b/node_modules/@libp2p/bootstrap/package.json
-index 11a2f41..d8ae3f8 100644
---- a/node_modules/@libp2p/bootstrap/package.json
-+++ b/node_modules/@libp2p/bootstrap/package.json
-@@ -24,7 +24,7 @@
-   ],
-   "exports": {
-     ".": {
--      "types": "./src/index.d.ts",
-+      "types": "./dist/src/index.d.ts",
-       "import": "./dist/src/index.js"
-     }
-   },

patches/@libp2p__bootstrap@9.0.10.patch

@@ -0,0 +1,13 @@
+diff --git a/package.json b/package.json
+index 11a2f4140081ebc25b840e544b2d005124d27e0e..d8ae3f86d2bee2e8838979e04c76e1f37256da3f 100644
+--- a/package.json
++++ b/package.json
+@@ -24,7 +24,7 @@
+   ],
+   "exports": {
+     ".": {
+-      "types": "./src/index.d.ts",
++      "types": "./dist/src/index.d.ts",
+       "import": "./dist/src/index.js"
+     }
+   },

patches/it-length-prefixed@9.0.3.patch

@@ -1,7 +1,7 @@
-diff --git a/node_modules/it-length-prefixed/dist/src/decode.js b/node_modules/it-length-prefixed/dist/src/decode.js
-index 313fdff..9f2a618 100644
---- a/node_modules/it-length-prefixed/dist/src/decode.js
-+++ b/node_modules/it-length-prefixed/dist/src/decode.js
+diff --git a/dist/src/decode.js b/dist/src/decode.js
+index 313fdff5f4bbac228bd6e6e4954bce89ea341cab..d15be8a606b81987f16bd932a7836186d9419b09 100644
+--- a/dist/src/decode.js
++++ b/dist/src/decode.js
 @@ -6,7 +6,9 @@ import { isAsyncIterable } from './utils.js';
  // Maximum length of the length section of the message
  export const MAX_LENGTH_LENGTH = 8; // Varint.encode(Number.MAX_SAFE_INTEGER).length

pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+packages:
+  - 'packages/eslint-config'
+  - 'packages/status-js'
+  - 'packages/colors'
+  - 'packages/icons'
+  - 'packages/components'
+  - 'apps/*'