Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: upgrade to Next 15 #4485

Merged
merged 11 commits into from
Nov 19, 2024
Merged

Refactor: upgrade to Next 15 #4485

merged 11 commits into from
Nov 19, 2024

Conversation

compojoom
Copy link
Contributor

@compojoom compojoom commented Nov 5, 2024

What it solves

This resolves #3765
Sadly turbo doesn't work right now due to this bug: vercel/next.js#71819

Resolves #

  • updates nextjs to v15
  • updates react to v19rc...
  • @testing-library to v16
  • jest v9 (and all other jest related packages to latest version)

How this PR fixes it

This PR updates a lot of dependencies. I tried to make it easy to review by going commit by commit.

How to test it

Screenshots

Checklist

  • I've tested the branch on mobile 📱
  • I've documented how it affects the analytics (if at all) 📊
  • I've written a unit/e2e test for it (if applicable) 🧑‍💻

Copy link

github-actions bot commented Nov 5, 2024

Copy link

github-actions bot commented Nov 5, 2024

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page Size (compressed)
global 1.01 MB (🟡 +15.28 KB)
Details

The 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 <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Forty-four Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/ 512 B (🟡 +1 B) 1.01 MB
/403 593 B (🟡 +16 B) 1.01 MB
/404 702 B (🟡 +4 B) 1.01 MB
/_error 238 B (🟡 +10 B) 1.01 MB
/_offline 1.06 KB (🟢 -32 B) 1.01 MB
/addOwner 553 B (🟡 +19 B) 1.01 MB
/address-book 25.93 KB (🟢 -165 B) 1.03 MB
/apps 47.73 KB (🟢 -711 B) 1.05 MB
/apps/bookmarked 462 B (🟡 +17 B) 1.01 MB
/apps/custom 39.3 KB (🟢 -772 B) 1.04 MB
/apps/open 55.28 KB (🟢 -80 B) 1.06 MB
/balances 37.56 KB (🟢 -724 B) 1.04 MB
/balances/nfts 18.77 KB (🟢 -446 B) 1.02 MB
/cookie 8.75 KB (🟡 +7 B) 1.01 MB
/home 59.25 KB (🟢 -275 B) 1.06 MB
/imprint 1.39 KB (🟡 +28 B) 1.01 MB
/licenses 4.95 KB (🟢 -25 B) 1.01 MB
/new-safe/advanced-create 34.86 KB (🟢 -173 B) 1.04 MB
/new-safe/create 34.11 KB (🟢 -189 B) 1.04 MB
/new-safe/load 14.5 KB (🟢 -278 B) 1.02 MB
/privacy 14.03 KB (🟡 +14 B) 1.02 MB
/settings 465 B (🟡 +14 B) 1.01 MB
/settings/appearance 7.71 KB (🟢 -354 B) 1.01 MB
/settings/cookies 7.33 KB (🟢 -362 B) 1.01 MB
/settings/data 7.22 KB (🟢 -365 B) 1.01 MB
/settings/environment-variables 8.78 KB (🟢 -396 B) 1.01 MB
/settings/modules 9.47 KB (🟢 -376 B) 1.01 MB
/settings/notifications 26.82 KB (🟢 -236 B) 1.03 MB
/settings/safe-apps 23.51 KB (🟢 -444 B) 1.03 MB
/settings/security 7.75 KB (🟢 -367 B) 1.01 MB
/settings/setup 46.22 KB (🟢 -810 B) 1.05 MB
/share/safe-app 9.33 KB (🟢 -409 B) 1.01 MB
/stake 622 B (🟡 +26 B) 1.01 MB
/swap 754 B (🟡 +21 B) 1.01 MB
/terms 578 B (🟡 +19 B) 1.01 MB
/transactions 87.54 KB (🟡 +13.66 KB) 1.09 MB
/transactions/history 87.49 KB (🟡 +13.65 KB) 1.09 MB
/transactions/messages 39.05 KB (🟢 -336 B) 1.04 MB
/transactions/msg 29.74 KB (🟡 +25 B) 1.03 MB
/transactions/queue 31.14 KB (🟢 -351 B) 1.04 MB
/transactions/tx 21.3 KB (🟡 +34 B) 1.03 MB
/wc 702 B (🟡 +15 B) 1.01 MB
/welcome 6.81 KB (🟡 +12 B) 1.01 MB
/welcome/accounts 398 B (🟡 +19 B) 1.01 MB
Details

Only 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 next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

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.

Copy link

github-actions bot commented Nov 5, 2024

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements
74.29% (+0.03% 🔼)
14068/18937
🔴 Branches
52.64% (+0.07% 🔼)
3488/6626
🔴 Functions
58.13% (+0.08% 🔼)
2056/3537
🟡 Lines
75.91% (+0.03% 🔼)
12779/16834
Show new covered files 🐣
St.
File Statements Branches Functions Lines
🟢
... / types.ts
100% 100% 100% 100%
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🟢
... / index.tsx
100%
50% (-50% 🔻)
100% 100%
🟢
... / ExecuteForm.tsx
95.83%
84.62% (-1.87% 🔻)
100% 95.65%
🟢
... / index.tsx
82.35% (-0.5% 🔻)
80.95% 40%
87.5% (-0.38% 🔻)
🟢
... / index.tsx
94.12% (-0.33% 🔻)
87.5% 100%
93.75% (-0.37% 🔻)
🔴
... / index.tsx
38.18% (-1.1% 🔻)
0% 0%
38.89% (-1.11% 🔻)

Test suite run success

1619 tests passing in 217 suites.

Report generated by 🧪jest coverage report action from c9ded60

@francovenica
Copy link
Contributor

The same issue reported in the mui-6 ticket about the font being different is present here as well.
image

@francovenica
Copy link
Contributor

francovenica commented Nov 12, 2024

NOTE: at the time of making this comment the ticket has not been peer reviewed. I've been asked to QA it anyways.

The rest of the ticket looks fine. I didn't found any other issues.
I run full regression on this branch just in case as well. Only 1 failed case that I've checked manually and it works fine

@katspaugh katspaugh changed the title Update next 15 Refactor: upgrade to Next 15 Nov 18, 2024
compojoom and others added 11 commits November 18, 2024 15:49
* chore: update cypress to v13.15.2

* chore: update cypress github action to use v13.15.2
* chore: update mui to v6

Applied codemons to update the code

* refactor: fix DatePicker with mui v6

fix: failing Date test

* refactor: use ListItemButton instead of ListItem

the selected and disabled props on ListItem have been removed in v6, but
are available on the ListItemButton

* chore: update snapshots

* refactor: recoveryModal tests use snapshots

* fix: failing bookmarks test with mui v6

* fix: missing DM-Sans font

* fix: drawer was stealing clicks from rest of page

* fix: failing tests

* fix: fonts fail to load

Read the comment in the file and have fun!
Copy link
Member

@katspaugh katspaugh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

As clarified with @compojoom, the many changes in JSX formatting (sx objects instead of inline props) stem from MUI v6 where these inline props have been deprecated.

@compojoom compojoom merged commit bd3060d into dev Nov 19, 2024
15 checks passed
@compojoom compojoom deleted the update-next-15 branch November 19, 2024 06:49
@github-actions github-actions bot locked and limited conversation to collaborators Nov 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update to nextjs 15
3 participants