feat: MUSD-741, MUSD-743, MUSD-744 — Money Home header polish + tab bar#29645
Conversation
|
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. |
Kureev
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
MUSD-743: drop the back button from Money Home header — the screen is a top-level tab destination, so the back chevron was misleading. MUSD-741: migrate the APY pill from a hand-rolled Box+Text to the MMDS Tag component and bump text to BodyMd (16px) for stronger emphasis.
Wire Money Tab.Screen to MoneyScreenStack (was WalletTabModalFlow stub) and update TabBar tap handler to navigate to the tab instead of pushing Routes.MONEY.ROOT, so the tab bar stays visible on Money Home and the back-button removal in MUSD-743 doesn't dead-end the screen.
… visible Switch the wallet-home Cash section from pushing the outer Routes.MONEY.ROOT stack to navigating directly to the Money tab. Without this, MoneyScreenStack mounted above HomeTabs and the global tab bar disappeared, leaving Money Home as a dead-end after MUSD-743 dropped the back button.
… tab bar With the global tab bar now visible on Money Home, the always-on MoneyFooter Add money button stacked on top of it. Drop the render here; the design intent is for the Add money CTA to live inside the "Fund your account" card in the empty state, not as a sticky footer. MUSD-747 will reintroduce the footer conditionally with peek-and-hide behaviour.
The always-on MoneyFooter rendered as a sticky overlay at the bottom of Money Home, which now stacks on top of the new global tab bar. Move the footer button into the ScrollView's content container as the last child and strip the safe-area / absolute positioning that pinned it. The button stays visible at the bottom of the scrollable list; it just no longer overlays the tab bar. MUSD-747 will reintroduce sticky behaviour with peek-and-hide based on the onboarding stepper's viewport state.
The always-on MoneyFooter sat as a sticky overlay at the bottom of Money Home, which stacked on top of the new global tab bar. Move the footer inside the ScrollView content as the last child, strip the absolute / safe-area positioning, and add vertical margin so the button has space both from the previous section and from the tab bar below. MUSD-747 will reintroduce sticky behaviour with peek-and-hide based on the onboarding stepper's viewport state. Spacing decision: use Divider components above and below MoneyFooter to match the consistent my-5 rhythm used between all other Money Home sections. The footer wrapper uses px-4 py-3 — identical to MoneyEarnings and other section components — so the button is bracketed by dividers exactly like every other section on the page.
The previous commit added a leading Divider before MoneyFooter that caused a double-divider in the isMilestone path (MoneyCondensedInfoCards already had a trailing Divider). Move the leading Divider inside the !isMilestone block so MoneyWhatYouGet gets a trailing Divider, giving both state paths exactly one Divider above and one below MoneyFooter — matching the consistent my-5 rhythm shared by every other section.
…ttom The visible 1px line of the trailing Divider after MoneyFooter was removed in favour of paddingBottom: 40 on the scroll content, which preserves the equivalent vertical spacing (matching the combined my-5 margin of a Divider) without rendering a visible separator at the very bottom of the page. Consistent with MoneyHowItWorksView's pattern of using contentContainerStyle paddingBottom for bottom-of-scroll breathing room.
The Money tab was using IconName.Bank (building icon); the Figma design
shows a $-in-circle ("coin") icon. IconName.Coin already exists in the
icon set and matches the design exactly — both for the inactive (outline)
and active (filled) states, with the standard tab-icon styling.
Reverts all changes to app/component-library/components/Navigation/TabBar/* and to useCashNavigation so this PR no longer triggers @MetaMask/design-system-engineers CODEOWNERS review, and so the CashSection.test.tsx test that asserts the original navigate signature passes again. The tab bar stays visible on Money Home because the Money Tab.Screen is now registered as Routes.MONEY.ROOT (instead of Routes.MONEY.HOME), and the outer Stack.Screen for Routes.MONEY.ROOT is removed. The original TabBar handler navigate(Routes.MONEY.ROOT, { screen: Routes.MONEY.HOME }) resolves to the tab itself with the inner stack's initial screen, so the global tab bar stays mounted. Side effect: the Money tab icon reverts to IconName.Bank. The IconName.Coin swap will land in a separate small DS-owned PR.
After moving MoneyScreenStack from a top-level Stack.Screen into a Tab.Screen inside HomeTabs, the conditional-rendering test could no longer find Routes.MONEY.ROOT among the outer Stack navigator's direct children. Render HomeTabs separately (mirroring the existing getHomeTabsComponent helper) and inspect the TabNavigator's children to assert the Money route is registered when the feature flag is on and absent when it is off.
Kureev
force-pushed
the
kureev/MUSD-741-743-money-home-header
branch
from
81a4b8f to
be2bcf0
Compare
|
|
||
| const MoneyHeader = ({ onBackPress, onMenuPress }: MoneyHeaderProps) => ( | ||
| const MoneyHeader = ({ onMenuPress }: MoneyHeaderProps) => ( | ||
| <HeaderStandard |
There was a problem hiding this comment.
The options menu button is not aligned with the header text.
| {isMoneyHomeScreenEnabled ? ( | ||
| <Tab.Screen | ||
| name={Routes.MONEY.HOME} | ||
| name={Routes.MONEY.ROOT} |
There was a problem hiding this comment.
Let's add initialRouteName={Routes.MONEY.HOME] to the MoneyScreenStack. This way we explicitly navigate to the home screen first. Right now this behaviour is implicit due to the Money Home route being first in the list.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #29645 +/- ##
==========================================
+ Coverage 81.97% 81.98% +0.01%
==========================================
Files 5302 5305 +3
Lines 140763 140978 +215
Branches 32047 32095 +48
==========================================
+ Hits 115391 115586 +195
- Misses 17517 17528 +11
- Partials 7855 7864 +9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
The Compact variant of HeaderStandard centers the title; switch to Display so the "Money" heading sits on the left as in the original design while keeping the kebab menu on the right.
HeaderStandard wraps the title prop in a BoxColumn with alignItems Center, which forces the title to center regardless of the parent HeaderBaseVariant. Switch to HeaderBase directly with the title as a string child; HeaderBaseVariant.Display then renders it left-aligned with HeadingLg. Replaces the previous attempt that only flipped the variant without escaping HeaderStandard's centering wrap.
HeaderBase has no default side padding (HeaderStandard's px-2 wasn't inherited when we switched). Add twClassName="px-4" so the title sits 16px from the left and the kebab 16px from the right, matching the section rhythm of the rest of Money Home.
|
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-merge-queue
Bot
removed this pull request from the merge queue due to a conflict with the base branch
…oney-home-header # Conflicts: # app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.styles.ts # app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx
…placement The peek-and-hide overlay introduced by MUSD-747 (#29736) is no longer desired on Money home. Restores the simpler pre-MUSD-747 layout where MoneyFooter renders as a plain ScrollView sibling that sits at the bottom of the screen. - MoneyHomeView.tsx: remove Animated/reanimated wiring, footer/stepper layout refs, scroll-driven visibility computation, and the Box onLayout wrapper around MoneyOnboardingCard. ScrollView no longer needs onScroll/onLayout/scrollEventThrottle. - MoneyHomeView.styles.ts: drop footerOverlay; restore scrollContent with paddingBottom 0 for the static layout. - Delete utils/computeStepperVisibility.{ts,test.ts} — no longer used. - MoneyHomeView.test.tsx: remove the 11 peek-and-hide tests; drop now unused act and ReactTestInstance imports.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 488d5e6. Configure here.
Move MoneyFooter inside the ScrollView so it scrolls with the rest of the page content rather than sticking at the bottom of the screen. Bumps scrollContent paddingBottom to 40 for breathing room below the button.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
All changes are scoped to the Money/Card feature. The E2E tests for SmokeMoney (card-button.spec.ts, card-home-add-funds.spec.ts) test navigation to the Card home screen and add funds flow - these need to be validated against the navigation restructuring in MainNavigator.js. The No other feature areas are impacted - the changes don't touch shared navigation components, confirmations, accounts, or other wallet features. Performance Test Selection: |
|
metamaskbotv2
Bot
added
the
release-7.77.0
3 participants
Description
Bundle of polish items on the Money Home screen.
Box + Textto the MMDSTagcomponent (severity = success), and bumps the inner text fromBodySm(14px) toBodyMd(16px) so yield reads as a primary value prop.HeaderStandard's built-in layout.Tab.Screenis registered asRoutes.MONEY.ROOT(instead ofRoutes.MONEY.HOME) and wired toMoneyScreenStack. This matches the existingTabBarhandler which navigates toRoutes.MONEY.ROOT, { screen: Routes.MONEY.HOME }— so the tab mounts with its inner stack and the global tab bar stays visible.Stack.ScreenforRoutes.MONEY.ROOT(which was pushing aboveHomeTabsand hiding the tab bar) is removed fromMainNavigator.app/components/Nav/Main/MainNavigator.js— no design-system-owned files are touched.MoneyFooter("Add money" CTA) was unpinned from its sticky-bottom position and now flows inside theScrollViewcontent as a normal section (px-4 py-3), with a single Divider above it (matching the section rhythm) andpaddingBottom: 40on the scroll content. MUSD-747 will reintroduce sticky behaviour with peek-and-hide based on the onboarding stepper's viewport state.No analytics changes, no copy changes, no behavioural changes outside the navigation rewiring described above.
Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Performance checks (if applicable)
Pre-merge reviewer checklist
Note
Medium Risk
Moderate risk due to navigation rewiring (Money tab now routes to
Routes.MONEY.ROOT/MoneyScreenStackand a stack-level screen is removed), which could affect tab routing and back-stack behavior. UI/layout changes are otherwise straightforward and covered by updated tests.Overview
Makes Money a first-class bottom-tab destination by switching the conditional tab registration from
Routes.MONEY.HOMEtoRoutes.MONEY.ROOTand mountingMoneyScreenStackdirectly, while removing the extraRoutes.MONEY.ROOTstack screen that previously sat aboveHomeTabs(keeping the global tab bar visible).Polishes Money Home UI: replaces the APY pill with the design-system
Tag, updates the header to a title+menu-onlyHeaderBase(removing the back button), and simplifies the “Add money” footer from an animated/sticky overlay to a normal scroll section with fixed bottom padding; associated peek/hide stepper logic and its unit tests are deleted and component tests are updated accordingly.Reviewed by Cursor Bugbot for commit a742e0d. Bugbot is set up for automated code reviews on this repo. Configure here.