refactor: switch to Yarn v4 #4686
Conversation
fix: github action crashing . fix: failing yarn v4 install due to incorrect 3rd party dependency fix: remove Keystone pckg causing yarn v4 failure fix: resolve merge conflict fix: resolutions fix: failing tests
Branch preview✅ Deploy successful! Website: Storybook: |
📦 Next.js Bundle Analysis for safe-wallet-webThis analysis was generated by the Next.js Bundle Analysis action. 🤖 🎉 Global Bundle Size Decreased
DetailsThe global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! Eleven Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. |
Coverage report
Show files with reduced coverage 🔻
Test suite run success1712 tests passing in 232 suites. Report generated by 🧪jest coverage report action from bdd5c7c |
| @@ -26,21 +26,21 @@ | |||
| "cypress:canary": "cross-env TZ=UTC cypress open --e2e -b chrome:canary", | |||
| "cypress:run": "cypress run", | |||
| "cypress:ci": "yarn cypress:run --config baseUrl=http://localhost:8080 --spec cypress/e2e/smoke/*.cy.js", | |||
| "serve": "npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}", | |||
| "serve": "sh -c 'npx -y serve out -p ${REVERSE_PROXY_UI_PORT:=8080}'", | |||
There was a problem hiding this comment.
Because it was choking on the curly brackets. It seem that they are invalide in their Posix-like interpreter 🤷
https://yarnpkg.com/features/scripting#script-arguments
that's why I'm starting a shell and passign the command to it.
| @@ -70,7 +70,6 @@ | |||
| "@web3-onboard/coinbase": "^2.4.1", | |||
| "@web3-onboard/core": "^2.21.4", | |||
| "@web3-onboard/injected-wallets": "^2.11.2", | |||
| "@web3-onboard/keystone": "^2.3.7", | |||
There was a problem hiding this comment.
Looks like we won't be migrating to AppKit until after Q1 2025, so we'll eventually have to find a way to restore this package.
Co-authored-by: Usame Algan <5880855+usame-algan@users.noreply.github.com>
What it solves
The first step to switching to a monorepo structure is to update yarn as newer versions offer:
We were stuck with yarn classic (which is deprecated for more than a couple of years now). Yarn 4 feels significantly faster and will lead to a better developer experience
How this PR fixes it
I've added a packagerManager field to the yarn.lock file. Had to dedupe some dependencies as they were wrong in yarn v1 and also had to remove
@web3-onboard/keystoneas it has one incorrectly defined dependency (the dependency version is not following semantic versioning and I couldn't find a way for yarn to ignore this). I have created a fix for it blocknative/web3-onboard#2322, but I doubt that it will be merged any time soon.About github actions.
Our github actions were incorrectly placed in the workflows folder. I moved them to a separate github actions folder. This also made it possible to use tools such as act https://github.com/nektos/act to tests the flows locally.
The caching dependency action is a bit weird, but I had my reasons :). Using the
actions/cache@v4directly turned out to be very slow. I think that the main issue is the use of hashFiles in the key. For example restoring next.js build cache the key there is composed ofhashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx')- we are dealing with a lot of files here and that apparently takes a lot of time. That's why I'm caching the key once it is generated by the restore action and then using it for the save action.How to test it
Checkout the branch, make sure that you have run
corepack enableand then just runyarnin the terminal. This should install the latest yarn v4 version and all necessary project dependencies.Screenshots
Checklist