refactor: consolidate Home page into single hook-based component#44293
Merged
Conversation
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Home page to a single hook-based component, removing the previous container/presentational split while keeping redirect behavior encapsulated in useHomeRedirects.
Changes:
- Consolidates Home into
ui/pages/home/home.tsx, wiring Redux/router behavior directly via hooks. - Updates routing to lazy-load the new Home entrypoint and removes the old
index.tsre-export. - Refreshes unit tests and Storybook stories to target the new component.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| ui/pages/routes/routes.component.tsx | Updates lazy import to point at the new Home component module. |
| ui/pages/home/index.ts | Removes the old default export re-export (container-based entrypoint). |
| ui/pages/home/home.tsx | Adds the consolidated, hook-based Home component implementation. |
| ui/pages/home/home.test.tsx | Updates tests to render the new hook-based Home with Redux/router providers. |
| ui/pages/home/home.stories.tsx | Adds updated Storybook stories backed by Redux state overrides. |
| ui/pages/home/home.container.tsx | Removes the old container component implementation. |
| ui/pages/home/home.container.test.tsx | Removes tests for the deleted container layer. |
| ui/pages/home/home.component.tsx | Removes the old presentational Home component. |
| ui/pages/home/home.component.stories.tsx | Removes the old stories for the presentational Home component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/core-extension-ux (9 files, +644 -692)
|
DDDDDanica
force-pushed
the
perf/home-refactor
branch
from
July 9, 2026 01:34
70372ea to
fcdb5ae
Compare
Contributor
Builds ready [fcdb5ae]
⚡ Performance Benchmarks (Total: 🟢 18 pass · 🟡 7 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
reviewed
Jul 9, 2026
| import('../../components/multichain/pages/gator-permissions/review-permissions/review-gator-permissions-page.tsx'), | ||
| ); | ||
| const Home = mmLazy(() => import('../home/index.ts')); | ||
| const Home = mmLazy(() => import('../home/home.tsx')); |
Contributor
There was a problem hiding this comment.
does home component need to be lazy loaded?
Contributor
There was a problem hiding this comment.
I guess we always load the home page? so it's probably faster to load it eagerly
| export default function Home() { | ||
| const navigate = useNavigate(); | ||
| const location = useLocation(); | ||
| const { trackEvent } = useContext(MetaMetricsContext); |
Contributor
Builds ready [f81d1f4]
⚡ Performance Benchmarks (Total: 🟢 11 pass · 🟡 10 warn · 🔴 0 fail)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Builds ready [db07078]
⚡ Performance Benchmarks (Total: 🟢 15 pass · 🟡 8 warn · 🔴 1 fail)
Bundle sizes
|
DDDDDanica
force-pushed
the
perf/home-refactor
branch
from
July 9, 2026 23:24
db07078 to
626b299
Compare
|
Contributor
Builds ready [626b299]
⚡ Performance Benchmarks (Total: 🟢 16 pass · 🟡 8 warn · 🔴 0 fail)
Bundle sizes
|
itsyoboieltr
approved these changes
Jul 10, 2026
n3ps
approved these changes
Jul 10, 2026
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
Jul 10, 2026
metamaskbot
added
release-13.41.0
Contributor
|
Missing release label release-13.40.0 on PR. Adding release label release-13.40.0 on PR and removing other release labels(release-13.41.0), as PR was added to branch 13.40.0 when release was cut. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Consolidates the
Homepage from three files (home.component.tsx,home.container.tsx,index.ts) into a single[ui/pages/home/home.tsx](ui/pages/home/home.tsx).The new
Homecomponent uses hooks directly (useSelector,useDispatch,useNavigate,useLocation) instead of the old container/presentational split. Redirect logic remains in[useHomeRedirects.ts](ui/pages/home/useHomeRedirects.ts).Changelog
CHANGELOG entry: null
Related issues
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6632
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Home is the default wallet landing page with redirects, notification-popup closing, and many modals; behavior should be equivalent but the structural change warrants manual smoke testing.
Overview
Collapses the Home page from
home.component.tsx,home.container.tsx, andindex.tsinto onehome.tsxthat reads Redux and router state via hooks (useSelector,useDispatch,useNavigate,useLocation) and local helpersuseHomeState/useHomeActions.AppHeaderandDappConnectionControlBarmove intoHome(including connected-sites / connected-accounts branches) instead of wrapping the presentational component in the container.Routing stops lazy-loading Home through
index.tsand imports../home/home.tsxdirectly on the default route. Storybook is rewritten to drive scenarios through Redux (createHomeStoryStore,.storybook/test-data) rather than long prop lists; tests merge intohome.test.tsxtargeting the unified export.Jest console baselines are updated (more Reselect input-stability warnings in confirmation integration tests; removal of
home.container.test.tsxentry). Minor whitespace-only change inunlock-page.container.ts.Reviewed by Cursor Bugbot for commit 626b299. Bugbot is set up for automated code reviews on this repo. Configure here.