refactor: switch to Yarn v4 (#4686)

* refactor: switch to use yarn v4
fix: github action crashing
fix: failing yarn v4 install due to incorrect 3rd party dependency
fix: remove Keystone pckg causing yarn v4 failure
fix: resolutions
fix: failing tests
fix: github acitons not working with new yarn v4
fix: update readme

Update .github/actions/cache-deps/action.yml

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

---------

Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>

.github/workflows/build/action.yml → .github/actions/build/action.yml

@@ -5,6 +5,7 @@ description: 'Build the app'
 inputs:
   secrets:
     required: true
+    description: 'GitHub secrets as JSON'
 
   prod: # id of input
     description: 'Production build flag'
@@ -18,6 +19,12 @@ runs:
   using: 'composite'
 
   steps:
+    - name: Restore Next.js Build Cache & Cypress cache
+      id: restore-nc
+      uses: ./.github/actions/cache-deps
+      with:
+        mode: restore-nc
+
     - name: Set environment variables
       shell: bash
       run: |
@@ -60,3 +67,10 @@ runs:
         NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING }}
         NEXT_PUBLIC_SPINDL_SDK_KEY: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SPINDL_SDK_KEY }}
         NEXT_PUBLIC_ECOSYSTEM_ID_ADDRESS: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_ECOSYSTEM_ID_ADDRESS }}
+
+    - name: Save Next.js Build Cache & Cypress cache
+      if: steps.restore-nc.outputs.cache-hit-nc != 'true'
+      uses: ./.github/actions/cache-deps
+      with:
+        mode: save-nc
+        key: ${{ steps.restore-nc.outputs.computed-cache-key-nc }}

.github/actions/cache-deps/action.yml

@@ -0,0 +1,85 @@
+name: "Cache Yarn Dependencies"
+description: "Restore or save yarn dependencies"
+inputs:
+  mode:
+    description: "restore-yarn | save-yarn | restore-nc | safe-nc"
+    required: true
+  key:
+    description: "The cache key to use to safe. Attention! Make sure to use the correct computed cache key depending on the mode"
+    required: false
+
+outputs:
+  cache-hit-yarn:
+    value: ${{ steps.restore.outputs.cache-hit }}
+    description: "Whether the cache was hit or not"
+  computed-cache-key-yarn:
+    value: ${{ steps.restore.outputs.cache-primary-key }}
+    description: "The computed cache key for yarn"
+  cache-hit-nc:
+    value: ${{ steps.restore-nc.outputs.cache-hit }}
+    description: "Whether the cache was hit or not"
+  computed-cache-key-nc:
+    value: ${{ steps.restore-nc.outputs.cache-primary-key }}
+    description: "The computed cache key for nextjs/cypress"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Restore Yarn Cache
+      if: ${{ inputs.mode == 'restore-yarn' }}
+      id: restore
+      uses: actions/cache/restore@v4
+      with:
+        path: |
+          **/node_modules
+          /home/runner/.cache/Cypress
+          ${{ github.workspace }}/.yarn/install-state.gz
+          ${{ github.workspace }}/src/types
+        key: ${{ runner.os }}-web-core-modules-${{ hashFiles('**/package.json','**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-web-core-modules-
+
+    - name: Set composite outputs yarn
+      if: ${{ inputs.mode == 'restore-yarn' }}
+      shell: bash
+      run: | 
+        echo "cache-hit-yarn=${{ steps.restore.outputs.cache-hit }}" >> $GITHUB_OUTPUT
+        echo "computed-cache-key-yarn=${{ steps.restore.outputs.cache-primary-key }}" >> $GITHUB_OUTPUT
+
+    - name: Save Yarn Cache
+      if: ${{ inputs.mode == 'save-yarn' }}
+      uses: actions/cache/save@v4
+      with:
+        path: |
+          **/node_modules
+          /home/runner/.cache/Cypress
+          ${{ github.workspace }}/.yarn/install-state.gz
+          ${{ github.workspace }}/src/types
+        key: ${{inputs.key}}
+
+    - name: Restore Next.js
+      if: ${{ inputs.mode == 'restore-nc' }}
+      id: restore-nc
+      uses: actions/cache/restore@v4
+      with:
+        path: |
+          ${{ github.workspace }}/.next/cache
+        key: ${{ runner.os }}-nextjs-cypress-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+        restore-keys: |
+          ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
+
+    - name: Set composite outputs nc
+      if: ${{ inputs.mode == 'restore-nc' }}
+      shell: bash
+      run: | 
+        echo "cache-hit-nc=${{ steps.restore-nc.outputs.cache-hit }}" >> $GITHUB_OUTPUT
+        echo "computed-cache-key-nc=${{ steps.restore-nc.outputs.cache-primary-key }}" >> $GITHUB_OUTPUT
+
+
+    - name: Save Next.js
+      if: ${{ inputs.mode == 'save-nc' }}
+      uses: actions/cache/save@v4
+      with:
+        path: |
+          ${{ github.workspace }}/.next/cache
+        key: ${{inputs.key}}

.github/actions/corepack/action.yml

@@ -0,0 +1,8 @@
+name: "Enable corepack"
+
+runs:
+  using: "composite"
+  steps:
+    - name: "Enable Corepack"
+      shell: bash
+      run: corepack enable

.github/workflows/cypress/action.yml → .github/actions/cypress/action.yml

@@ -30,27 +30,19 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: ./.github/workflows/yarn
+    - uses: ./.github/actions/yarn
 
     - name: Install Latest stable Chrome Version
       shell: bash
       run: |
         curl -O 'https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb'
         sudo apt-get install ./google-chrome-stable_current_amd64.deb
 
-    - name: Install Cypress 13.15.2
-      shell: bash
-      run: yarn add -D cypress@13.15.2
-
-    - uses: ./.github/workflows/build
+    - uses: ./.github/actions/build
       with:
         secrets: ${{ inputs.secrets }}
         e2e_mnemonic: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_CYPRESS_MNEMONIC }}
 
-    - name: Serve
-      shell: bash
-      run: yarn serve &
-
     - uses: cypress-io/github-action@v6
       with:
         spec: ${{ inputs.spec }}
@@ -60,6 +52,8 @@ runs:
         record: true
         tag: ${{ inputs.tag }}
         config: baseUrl=http://localhost:8080
+        install: false
+        start: yarn serve
       env:
         CYPRESS_RECORD_KEY: ${{ inputs.record_key || fromJSON(inputs.secrets).CYPRESS_RECORD_KEY }}
         GITHUB_TOKEN: ${{ fromJSON(inputs.secrets).GITHUB_TOKEN }}

.github/actions/yarn/action.yml

@@ -0,0 +1,36 @@
+name: 'Yarn'
+
+description: 'Install the dependencies'
+
+runs:
+  using: 'composite'
+  steps:
+    # We require yarn v4 and installing through corepack is the easiest way to get it
+    - uses: actions/checkout@v4
+
+    - uses: ./.github/actions/corepack
+
+    - name: Restore Yarn Cache & Types
+      id: restore-yarn-types
+      uses: ./.github/actions/cache-deps
+      with:
+        mode: restore-yarn
+
+    - name: Echo cache hit
+      shell: bash
+      run: |
+        echo "Yarn cache hit: ${{ steps.restore-yarn-types.outputs.cache-hit-yarn }}"
+
+    - name: Yarn install & after-install generate types
+      if: steps.restore-yarn-types.outputs.cache-hit-yarn != 'true'
+      shell: bash
+      run: |
+        yarn install --immutable
+        yarn after-install
+
+    - name: Save Yarn Cache & Types
+      if: steps.restore-yarn-types.outputs.cache-hit-yarn != 'true'
+      uses: ./.github/actions/cache-deps
+      with:
+        mode: save-yarn
+        key: ${{ steps.restore-yarn-types.outputs.computed-cache-key-yarn }}

.github/workflows/deploy-dev.yml

@@ -36,12 +36,12 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/yarn
+      - uses: ./.github/actions/yarn
 
-      - uses: ./.github/workflows/build
+      - uses: ./.github/actions/build
         with:
           secrets: ${{ toJSON(secrets) }}
-          if: startsWith(github.ref, 'refs/heads/main')
+         # if: startsWith(github.ref, 'refs/heads/main')
 
       #- uses: ./.github/workflows/build-storybook
 

.github/workflows/deploy-production.yml

@@ -19,9 +19,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/yarn
+      - uses: ./.github/actions/yarn
 
-      - uses: ./.github/workflows/build
+      - uses: ./.github/actions/build
         with:
           secrets: ${{ toJSON(secrets) }}
           prod: ${{ true }}

.github/workflows/e2e-full-ondemand.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: |

.github/workflows/e2e-hp-ondemand.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: |

.github/workflows/e2e-ondemand.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: |

.github/workflows/e2e-prod-ondemand.yml

@@ -20,7 +20,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: |

.github/workflows/e2e-safe-apps.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: cypress/e2e/safe-apps/*.cy.js

.github/workflows/e2e-smoke.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/cypress
+      - uses: ./.github/actions/cypress
         with:
           secrets: ${{ toJSON(secrets) }}
           spec: cypress/e2e/smoke/*.cy.js

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/yarn
+      - uses: ./.github/actions/yarn
 
       - uses: CatChen/eslint-suggestion-action@v4.1.7
         with:

.github/workflows/nextjs-bundle-analysis.yml

@@ -21,10 +21,10 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install dependencies
-        uses: ./.github/workflows/yarn
+        uses: ./.github/actions/yarn
 
       - name: Build next.js app
-        uses: ./.github/workflows/build
+        uses: ./.github/actions/build
         with:
           secrets: ${{ toJSON(secrets) }}
 

.github/workflows/unit-tests.yml

@@ -21,7 +21,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: ./.github/workflows/yarn
+      - uses: ./.github/actions/yarn
 
       - name: Annotations and coverage report
         uses: ArtiomTr/jest-coverage-report-action@v2.3.1

.gitignore

@@ -56,3 +56,6 @@ yalc.lock
 /public/*.js.LICENSE.txt
 certificates
 *storybook.log
+
+# Yarn v4
+.yarn/*

.yarnrc.yml

@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: true
+
+nodeLinker: node-modules

README.md

@@ -51,6 +51,25 @@ If you don't provide some of the variables, the corresponding features will be d
 
 ### Running the app locally
 
+#### Prerequisites
+
+- **Node.js**: Install the latest stable version from [Node.js](https://nodejs.org/).
+
+We use Yarn v4 for package management. If you are running on Node.js v16 or later, you can run:
+
+```bash
+corepack enable
+```
+
+and then when you run `yarn` in the repository root, it will install the required version of yarn and resolve all
+dependencies.
+
+> [!INFO]
+>
+> Corepack is a tool to help with managing versions of your package managers. It exposes binary proxies for each
+> supported package manager that, when called, will identify whatever package manager is
+> configured for the current project, download it if needed, and finally run it.
+
 Install the dependencies:
 
 ```bash

jest.setup.js

@@ -6,7 +6,6 @@ import { Request } from 'node-fetch'
 
 jest.mock('@web3-onboard/coinbase', () => jest.fn())
 jest.mock('@web3-onboard/injected-wallets', () => ({ ProviderLabel: { MetaMask: 'MetaMask' } }))
-jest.mock('@web3-onboard/keystone/dist/index', () => jest.fn())
 jest.mock('@web3-onboard/ledger/dist/index', () => jest.fn())
 jest.mock('@web3-onboard/trezor', () => jest.fn())
 jest.mock('@web3-onboard/walletconnect', () => jest.fn())