Skip to content

Commit a07529b

Browse files
authored
refactor(Deposit): migrate deposite and reward onboarding to native stack (#32121)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until this PR meets the canonical Definition of Ready For Review in `docs/readme/ready-for-review.md`. In short: the template must be materially complete (not just section titles present), all status checks must be currently passing, and the only expected follow-up commits must be reviewer-driven. --> <!-- mms-check directive vocabulary — read by .github/scripts/shared/pr-template-checks.ts at module load to build the validation plan. Directives are invisible in rendered markdown and must NOT be removed or edited without updating the validator registry. type=text Section must contain non-placeholder prose. type=changelog Section must have a valid CHANGELOG entry: line. type=issue-link Section must have a Fixes:/Closes:/Refs: line with a value. type=manual-testing Section must have real testing steps or an explicit N/A. type=screenshot Section must have evidence (image/URL) or an explicit N/A. type=checklist Section must have all checkboxes consciously checked. required=true|false Whether a missing/invalid section runs the validator at all. blocking=true|false Whether a failure of this check fails the CI workflow. Default: false — failures are shown as warnings in the sticky comment but do not block the PR. Sections without a directive are checked for structural presence only. --> ## **Description** Android build: https://github.com/MetaMask/metamask-mobile/actions/runs/27976533873 <!-- mms-check: type=text required=true --> <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> Migrates the Rewards onboarding navigator from JS stack (@react-navigation/stack) to native stack (@react-navigation/native-stack), following the same pattern used in the codebase. ## **Changelog** <!-- mms-check: type=changelog required=true blocking=true --> <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry:null ## **Related issues** <!-- mms-check: type=issue-link required=true --> Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-586 ## **Manual testing steps** <!-- mms-check: type=manual-testing required=true --> ```gherkin Feature: Rewards onboarding with native stack Scenario: Rewards onboarding loads for new users Given I have not completed Rewards onboarding When I open the Rewards tab Then I should see the Rewards onboarding screen And the screen should render without navigation errors ``` ## **Screenshots/Recordings** <!-- mms-check: type=screenshot required=true --> <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> Android after: https://github.com/user-attachments/assets/2f5d153b-cfbb-458b-abf3-4e463fc7e244 Rewards + Normal Deposit |BEFORE|AFTER| |---|---| |<img width="372" height="774" alt="deposit flow before" src="https://github.com/user-attachments/assets/fce2281d-69c0-41d6-9d1e-d85bac0ca97e" />|<img width="376" height="814" alt="deposit flow after" src="https://github.com/user-attachments/assets/0e8513f0-e8c2-45a0-b70e-4a1778c57daa" />| ## **Pre-merge author checklist** <!-- mms-check: type=checklist required=true --> <!-- Every checklist item must be consciously assessed before marking this PR as "Ready for review". A checked box means you deliberately considered that responsibility, not that you literally performed every action listed. Unchecked boxes are ambiguous: they are not an implicit "N/A" and they are not a silent "skip". See `docs/readme/ready-for-review.md` for the full checklist semantics. --> - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. #### Performance checks (if applicable) - [x] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [x] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [x] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist** <!-- Reviewer checklist items follow the same semantics as the author checklist: an unchecked box is ambiguous, a checked box means the reviewer consciously assessed that responsibility. See `docs/readme/ready-for-review.md`. --> - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Navigation-only swap within Rewards onboarding with no auth or data changes; behavior should match aside from native stack transitions. > > **Overview** > **Rewards onboarding** now uses `@react-navigation/native-stack` instead of `@react-navigation/stack`, aligned with the parent `RewardsNavigator` and other native-stack flows in the app. > > `OnboardingNavigator` switches to `createNativeStackNavigator`, sets **`headerShown: false`** on the navigator via `screenOptions` (removed from the single screen), and **`OnboardingNavigator.test.tsx`** uses the same stack factory in its test wrapper. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit fb5aa4d. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent c5fd381 commit a07529b

2 files changed

Lines changed: 8 additions & 6 deletions

File tree

app/components/UI/Rewards/OnboardingNavigator.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { render, waitFor } from '@testing-library/react-native';
33
import { Provider } from 'react-redux';
44
import { NavigationContainer } from '@react-navigation/native';
5-
import { createStackNavigator } from '@react-navigation/stack';
5+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
66
import { configureStore } from '@reduxjs/toolkit';
77
import OnboardingNavigator from './OnboardingNavigator';
88

@@ -76,7 +76,7 @@ jest.mock('./hooks/useGeoRewardsMetadata', () => ({
7676

7777
describe('OnboardingNavigator', () => {
7878
let store: ReturnType<typeof configureStore>;
79-
const Stack = createStackNavigator();
79+
const Stack = createNativeStackNavigator();
8080

8181
const createMockStore = () =>
8282
configureStore({

app/components/UI/Rewards/OnboardingNavigator.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import React from 'react';
2-
import { createStackNavigator } from '@react-navigation/stack';
2+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
33
import Routes from '../../../constants/navigation/Routes';
44
import OnboardingMainStep from './components/Onboarding/OnboardingMainStep';
55
import UnmountOnBlur from '../../Views/UnmountOnBlur';
66

7-
const Stack = createStackNavigator();
7+
const Stack = createNativeStackNavigator();
88

99
const OnboardingNavigator: React.FC = () => (
1010
<UnmountOnBlur>
11-
<Stack.Navigator initialRouteName={Routes.REWARDS_ONBOARDING_INTRO}>
11+
<Stack.Navigator
12+
initialRouteName={Routes.REWARDS_ONBOARDING_INTRO}
13+
screenOptions={{ headerShown: false }}
14+
>
1215
<Stack.Screen
1316
name={Routes.REWARDS_ONBOARDING_INTRO}
1417
component={OnboardingMainStep}
15-
options={{ headerShown: false }}
1618
/>
1719
</Stack.Navigator>
1820
</UnmountOnBlur>

0 commit comments

Comments
 (0)