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

chore: update mui to v6 #4499

Merged
merged 10 commits into from
Nov 12, 2024
Merged

chore: update mui to v6 #4499

merged 10 commits into from
Nov 12, 2024

Conversation

compojoom
Copy link
Collaborator

@compojoom compojoom commented Nov 7, 2024

What it solves

The nextjs v15 update (#4485) builds on top of react 19. There was a concern raised that mui v5 is not compatible with react 19.

How this PR fixes it

Updates to mui v6 and applies codemons and manual changes to make the old v5 code compatible.

How to test it

This updates touches nearly every UI file. The app should continue to look as before.

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 7, 2024

Copy link

github-actions bot commented Nov 7, 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 MB (🟡 +12.82 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 MB
/403 593 B (🟡 +16 B) 1 MB
/404 702 B (🟡 +4 B) 1 MB
/_error 238 B (🟡 +10 B) 1 MB
/_offline 1.06 KB (🟢 -32 B) 1 MB
/addOwner 553 B (🟡 +19 B) 1 MB
/address-book 25.93 KB (🟢 -165 B) 1.03 MB
/apps 47.73 KB (🟢 -707 B) 1.05 MB
/apps/bookmarked 462 B (🟡 +17 B) 1 MB
/apps/custom 39.31 KB (🟢 -768 B) 1.04 MB
/apps/open 55.11 KB (🟢 -256 B) 1.06 MB
/balances 37.56 KB (🟢 -720 B) 1.04 MB
/balances/nfts 18.77 KB (🟢 -445 B) 1.02 MB
/cookie 8.75 KB (🟡 +7 B) 1.01 MB
/home 59.25 KB (🟢 -273 B) 1.06 MB
/imprint 1.39 KB (🟡 +28 B) 1 MB
/licenses 4.95 KB (🟢 -25 B) 1.01 MB
/new-safe/advanced-create 34.8 KB (🟢 -179 B) 1.04 MB
/new-safe/create 34.04 KB (🟢 -195 B) 1.04 MB
/new-safe/load 14.5 KB (🟢 -278 B) 1.02 MB
/privacy 15.88 KB (🟡 +12 B) 1.02 MB
/settings 469 B (🟡 +18 B) 1 MB
/settings/appearance 7.71 KB (🟢 -353 B) 1.01 MB
/settings/cookies 7.33 KB (🟢 -361 B) 1.01 MB
/settings/data 7.22 KB (🟢 -364 B) 1.01 MB
/settings/environment-variables 8.79 KB (🟢 -394 B) 1.01 MB
/settings/modules 9.48 KB (🟢 -373 B) 1.01 MB
/settings/notifications 26.82 KB (🟢 -237 B) 1.03 MB
/settings/safe-apps 23.51 KB (🟢 -441 B) 1.03 MB
/settings/security 7.75 KB (🟢 -366 B) 1.01 MB
/settings/setup 35.42 KB (🟢 -11.59 KB) 1.04 MB
/share/safe-app 9.33 KB (🟢 -409 B) 1.01 MB
/stake 622 B (🟡 +26 B) 1 MB
/swap 754 B (🟡 +21 B) 1 MB
/terms 560 B (🟡 +16 B) 1 MB
/transactions 87.36 KB (🟡 +13.49 KB) 1.09 MB
/transactions/history 87.32 KB (🟡 +13.48 KB) 1.09 MB
/transactions/messages 38.88 KB (🟢 -514 B) 1.04 MB
/transactions/msg 29.56 KB (🟢 -154 B) 1.03 MB
/transactions/queue 30.97 KB (🟢 -526 B) 1.03 MB
/transactions/tx 21.13 KB (🟢 -144 B) 1.02 MB
/wc 702 B (🟡 +15 B) 1 MB
/welcome 6.81 KB (🟡 +12 B) 1.01 MB
/welcome/accounts 398 B (🟡 +19 B) 1 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 7, 2024

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements
74.11% (+0% 🔼)
13906/18764
🔴 Branches
52.78% (-0% 🔻)
3434/6506
🔴 Functions 58.01% 2032/3503
🟡 Lines
75.78% (+0% 🔼)
12634/16671
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🟢
... / index.tsx
100%
50% (-50% 🔻)
100% 100%
🟢
... / 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

1593 tests passing in 215 suites.

Report generated by 🧪jest coverage report action from 7363df9

Applied codemons to update the code
the selected and disabled props on ListItem have been removed in v6, but
are available on the ListItemButton
@usame-algan
Copy link
Member

The font looks different now. Seems like DM Sans is not loaded anymore?
Screenshot 2024-11-07 at 16 18 52

Not sure if critical for production but when I change the viewport it seems there is a presentation layer which prevents almost anything in the UI from being clicked.
Screenshot 2024-11-07 at 16 19 37

Read the comment in the file and have fun!
@francovenica
Copy link
Contributor

LGTM.
I compared this with current prod and I don't see any differences.

I've check the font change that was reported and looks good

@compojoom compojoom merged commit 825ff61 into update-next-15 Nov 12, 2024
13 checks passed
@compojoom compojoom deleted the update-mui-6 branch November 12, 2024 07:21
@github-actions github-actions bot locked and limited conversation to collaborators Nov 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants