chore(runway): cherry-pick c23defd (#21826)

- chore: move user from redux store to card sdk context (#21582)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
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?
-->

## **Changelog**

<!--
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**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [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.

## **Pre-merge reviewer checklist**

- [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]
> Move user management to the Card SDK context, update onboarding
components/hooks and navigator to use it, remove user from the Redux
slice, and adjust tests accordingly.
> 
> - **SDK**:
> - Add `user` and `setUser` to Card SDK context; fetch user on mount
via `getRegistrationStatus(onboardingId)`; clear user on logout.
> - **Onboarding UI**:
> - Switch `ConfirmPhoneNumber`, `PersonalDetails`, `PhysicalAddress`,
and `VerifyIdentity` to use `useCardSDK` (`user`/`setUser`) instead of
Redux.
>   - Update error/navigation handling accordingly.
> - **Navigation**:
> - `OnboardingNavigator` initial route now derived from SDK `user` +
`onboardingId`.
> - **Hooks**:
> - `useUserRegistrationStatus` writes to SDK `user` and no longer uses
Redux `setUser`/`userResponse`.
> - Tests for hooks updated to mock `useCardSDK` with `user`/`setUser`.
> - **Redux**:
> - Remove `onboarding.user`, its selectors/actions; keep
`onboardingId`, `selectedCountry`, `contactVerificationId`.
> - **Tests**:
> - Broad test updates across components/hooks to reflect SDK-based user
state.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3c428bc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[c23defd](c23defd)

Co-authored-by: sophieqgu <[email protected]>

Author: runway-github[bot]

app/components/UI/Card/components/Onboarding/ConfirmPhoneNumber.test.tsx

@@ -273,6 +273,7 @@ jest.mock('../../../../../../locales/i18n', () => ({
 // Mock hooks
 const mockUsePhoneVerificationVerify = jest.fn();
 const mockUsePhoneVerificationSend = jest.fn();
+const mockSetUser = jest.fn();
 
 jest.mock('../../hooks/usePhoneVerificationVerify', () => ({
   __esModule: true,
@@ -284,6 +285,17 @@ jest.mock('../../hooks/usePhoneVerificationSend', () => ({
   default: () => mockUsePhoneVerificationSend(),
 }));
 
+// Mock SDK
+jest.mock('../../sdk', () => ({
+  useCardSDK: jest.fn(() => ({
+    sdk: {},
+    isLoading: false,
+    user: { id: 'user-123', email: '[email protected]' },
+    setUser: mockSetUser,
+    logoutFromProvider: jest.fn(),
+  })),
+}));
+
 // Create test store
 const createTestStore = (initialState = {}) =>
   configureStore({

app/components/UI/Card/components/Onboarding/ConfirmPhoneNumber.tsx

@@ -23,11 +23,11 @@ import usePhoneVerificationVerify from '../../hooks/usePhoneVerificationVerify';
 import {
   selectContactVerificationId,
   selectOnboardingId,
-  setUser,
 } from '../../../../../core/redux/slices/card';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { CardError } from '../../types';
 import usePhoneVerificationSend from '../../hooks/usePhoneVerificationSend';
+import { useCardSDK } from '../../sdk';
 
 const CELL_COUNT = 6;
 
@@ -61,7 +61,7 @@ const createStyles = (params: { theme: Theme }) => {
 
 const ConfirmPhoneNumber = () => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
+  const { setUser } = useCardSDK();
   const { styles } = useStyles(createStyles, {});
   const inputRef = useRef<TextInput>(null);
   const [resendCooldown, setResendCooldown] = useState(0);
@@ -113,7 +113,7 @@ const ConfirmPhoneNumber = () => {
         contactVerificationId,
       });
       if (user) {
-        dispatch(setUser(user));
+        setUser(user);
         navigation.navigate(Routes.CARD.ONBOARDING.VERIFY_IDENTITY);
       }
     } catch (error) {
@@ -139,7 +139,7 @@ const ConfirmPhoneNumber = () => {
     phoneCountryCode,
     contactVerificationId,
     verifyPhoneVerification,
-    dispatch,
+    setUser,
     navigation,
   ]);
 

app/components/UI/Card/components/Onboarding/MailingAddress.test.tsx

@@ -7,6 +7,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import MailingAddress from './MailingAddress';
 import useRegisterMailingAddress from '../../hooks/useRegisterMailingAddress';
 import useRegistrationSettings from '../../hooks/useRegistrationSettings';
+import { useCardSDK } from '../../sdk';
 
 // Mock navigation
 jest.mock('@react-navigation/native', () => ({
@@ -17,6 +18,7 @@ jest.mock('@react-navigation/native', () => ({
 jest.mock('../../hooks/useRegisterMailingAddress');
 jest.mock('../../hooks/useRegisterUserConsent');
 jest.mock('../../hooks/useRegistrationSettings');
+jest.mock('../../sdk');
 
 // Mock OnboardingStep component
 jest.mock('./OnboardingStep', () => {
@@ -358,6 +360,8 @@ const mockUseRegistrationSettings =
   useRegistrationSettings as jest.MockedFunction<
     typeof useRegistrationSettings
   >;
+const mockSetUser = jest.fn();
+const mockUseCardSDK = useCardSDK as jest.MockedFunction<typeof useCardSDK>;
 
 describe('MailingAddress Component', () => {
   let store: ReturnType<typeof createTestStore>;
@@ -441,6 +445,18 @@ describe('MailingAddress Component', () => {
       fetchData: jest.fn(),
     });
 
+    // Mock useCardSDK
+    mockUseCardSDK.mockReturnValue({
+      sdk: null,
+      isLoading: false,
+      user: {
+        id: 'user-id',
+        email: '[email protected]',
+      },
+      setUser: mockSetUser,
+      logoutFromProvider: jest.fn(),
+    });
+
     // Mock useSelector
     const { useSelector } = jest.requireMock('react-redux');
     useSelector.mockImplementation((selector: any) =>

app/components/UI/Card/components/Onboarding/MailingAddress.tsx

@@ -12,16 +12,16 @@ import { AddressFields } from './PhysicalAddress';
 import {
   selectOnboardingId,
   selectSelectedCountry,
-  setUser,
 } from '../../../../../core/redux/slices/card';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import useRegisterMailingAddress from '../../hooks/useRegisterMailingAddress';
 import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
 import { CardError } from '../../types';
+import { useCardSDK } from '../../sdk';
 
 const MailingAddress = () => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
+  const { setUser } = useCardSDK();
   const onboardingId = useSelector(selectOnboardingId);
   const selectedCountry = useSelector(selectSelectedCountry);
 
@@ -122,7 +122,7 @@ const MailingAddress = () => {
       });
 
       if (updatedUser) {
-        dispatch(setUser(updatedUser));
+        setUser(updatedUser);
       }
 
       if (accessToken) {

app/components/UI/Card/components/Onboarding/PersonalDetails.test.tsx

@@ -241,6 +241,10 @@ jest.mock('../../hooks/useRegistrationSettings', () => ({
   default: jest.fn(),
 }));
 
+jest.mock('../../sdk', () => ({
+  useCardSDK: jest.fn(),
+}));
+
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => {
     const mockStrings: Record<string, string> = {
@@ -272,11 +276,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import PersonalDetails from './PersonalDetails';
 import useRegisterPersonalDetails from '../../hooks/useRegisterPersonalDetails';
 import useRegistrationSettings from '../../hooks/useRegistrationSettings';
+import { useCardSDK } from '../../sdk';
 
 // Mock implementations
 const mockNavigate = jest.fn();
 const mockDispatch = jest.fn();
 const mockRegisterPersonalDetails = jest.fn();
+const mockSetUser = jest.fn();
 
 // Mock hooks
 (useNavigation as jest.Mock).mockReturnValue({
@@ -314,6 +320,14 @@ const mockRegisterPersonalDetails = jest.fn();
   },
 });
 
+(useCardSDK as jest.Mock).mockReturnValue({
+  sdk: null,
+  isLoading: false,
+  user: null,
+  setUser: mockSetUser,
+  logoutFromProvider: jest.fn(),
+});
+
 describe('PersonalDetails Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();

app/components/UI/Card/components/Onboarding/PersonalDetails.tsx

@@ -18,9 +18,8 @@ import { useDebouncedValue } from '../../../../hooks/useDebouncedValue';
 import {
   selectOnboardingId,
   selectSelectedCountry,
-  setUser,
 } from '../../../../../core/redux/slices/card';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import SelectComponent from '../../../SelectComponent';
 import useRegisterPersonalDetails from '../../hooks/useRegisterPersonalDetails';
 import useRegistrationSettings from '../../hooks/useRegistrationSettings';
@@ -29,10 +28,11 @@ import {
   validateDateOfBirth,
 } from '../../util/validateDateOfBirth';
 import { CardError } from '../../types';
+import { useCardSDK } from '../../sdk';
 
 const PersonalDetails = () => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
+  const { setUser } = useCardSDK();
   const onboardingId = useSelector(selectOnboardingId);
   const selectedCountry = useSelector(selectSelectedCountry);
 
@@ -152,7 +152,7 @@ const PersonalDetails = () => {
       });
 
       if (user) {
-        dispatch(setUser(user));
+        setUser(user);
         navigation.navigate(Routes.CARD.ONBOARDING.PHYSICAL_ADDRESS);
       }
     } catch (error) {

app/components/UI/Card/components/Onboarding/PhysicalAddress.test.tsx

@@ -9,6 +9,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 import useRegisterPhysicalAddress from '../../hooks/useRegisterPhysicalAddress';
 import useRegisterUserConsent from '../../hooks/useRegisterUserConsent';
 import useRegistrationSettings from '../../hooks/useRegistrationSettings';
+import { useCardSDK } from '../../sdk';
 
 // Mock navigation
 jest.mock('@react-navigation/native', () => ({
@@ -20,6 +21,11 @@ jest.mock('../../hooks/useRegisterPhysicalAddress');
 jest.mock('../../hooks/useRegisterUserConsent');
 jest.mock('../../hooks/useRegistrationSettings');
 
+// Mock SDK
+jest.mock('../../sdk', () => ({
+  useCardSDK: jest.fn(),
+}));
+
 // Mock OnboardingStep component
 jest.mock('./OnboardingStep', () => {
   const React = jest.requireActual('react');
@@ -362,6 +368,7 @@ const mockUseRegistrationSettings =
   useRegistrationSettings as jest.MockedFunction<
     typeof useRegistrationSettings
   >;
+const mockUseCardSDK = useCardSDK as jest.MockedFunction<typeof useCardSDK>;
 
 describe('PhysicalAddress Component', () => {
   let store: ReturnType<typeof createTestStore>;
@@ -457,6 +464,18 @@ describe('PhysicalAddress Component', () => {
       fetchData: jest.fn(),
     });
 
+    // Mock useCardSDK
+    mockUseCardSDK.mockReturnValue({
+      sdk: null,
+      isLoading: false,
+      user: {
+        id: 'user-id',
+        email: '[email protected]',
+      },
+      setUser: jest.fn(),
+      logoutFromProvider: jest.fn(),
+    });
+
     // Mock useSelector
     const { useSelector } = jest.requireMock('react-redux');
     useSelector.mockImplementation((selector: any) =>

app/components/UI/Card/components/Onboarding/PhysicalAddress.tsx

@@ -16,17 +16,16 @@ import OnboardingStep from './OnboardingStep';
 import Checkbox from '../../../../../component-library/components/Checkbox';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import useRegisterPhysicalAddress from '../../hooks/useRegisterPhysicalAddress';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import {
   selectOnboardingId,
   selectSelectedCountry,
-  selectUser,
-  setUser,
 } from '../../../../../core/redux/slices/card';
 import useRegisterUserConsent from '../../hooks/useRegisterUserConsent';
 import { CardError } from '../../types';
 import useRegistrationSettings from '../../hooks/useRegistrationSettings';
 import SelectComponent from '../../../SelectComponent';
+import { useCardSDK } from '../../sdk';
 
 export const AddressFields = ({
   addressLine1,
@@ -182,11 +181,10 @@ export const AddressFields = ({
 
 const PhysicalAddress = () => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
   const tw = useTailwind();
+  const { user, setUser } = useCardSDK();
   const onboardingId = useSelector(selectOnboardingId);
   const selectedCountry = useSelector(selectSelectedCountry);
-  const user = useSelector(selectUser);
 
   const [addressLine1, setAddressLine1] = useState('');
   const [addressLine2, setAddressLine2] = useState('');
@@ -318,7 +316,7 @@ const PhysicalAddress = () => {
       });
 
       if (updatedUser) {
-        dispatch(setUser(updatedUser));
+        setUser(updatedUser);
       }
 
       if (accessToken) {

app/components/UI/Card/components/Onboarding/VerifyIdentity.test.tsx

@@ -6,6 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 import VerifyIdentity from './VerifyIdentity';
 import Routes from '../../../../../constants/navigation/Routes';
 import useStartVerification from '../../hooks/useStartVerification';
+import { useCardSDK } from '../../sdk';
 
 // Mock dependencies
 jest.mock('@react-navigation/native', () => ({
@@ -15,6 +16,11 @@ jest.mock('@react-navigation/native', () => ({
 // Mock useStartVerification hook
 jest.mock('../../hooks/useStartVerification');
 
+// Mock useCardSDK hook
+jest.mock('../../sdk', () => ({
+  useCardSDK: jest.fn(),
+}));
+
 // Mock OnboardingStep component
 jest.mock('./OnboardingStep', () => {
   const React = jest.requireActual('react');
@@ -191,6 +197,14 @@ describe('VerifyIdentity Component', () => {
       error: null,
     });
 
+    (useCardSDK as jest.Mock).mockReturnValue({
+      sdk: null,
+      isLoading: false,
+      user: null,
+      setUser: jest.fn(),
+      logoutFromProvider: jest.fn(),
+    });
+
     store = createTestStore();
   });
 
@@ -351,12 +365,16 @@ describe('VerifyIdentity Component', () => {
 
   describe('User State Testing', () => {
     it('navigates to validating KYC when user verification state is PENDING', async () => {
-      const storeWithPendingUser = createTestStore({
+      (useCardSDK as jest.Mock).mockReturnValue({
+        sdk: null,
+        isLoading: false,
         user: { verificationState: 'PENDING' },
+        setUser: jest.fn(),
+        logoutFromProvider: jest.fn(),
       });
 
       render(
-        <Provider store={storeWithPendingUser}>
+        <Provider store={store}>
           <VerifyIdentity />
         </Provider>,
       );
@@ -369,12 +387,16 @@ describe('VerifyIdentity Component', () => {
     });
 
     it('does not auto-navigate when user verification state is not PENDING', () => {
-      const storeWithNonPendingUser = createTestStore({
+      (useCardSDK as jest.Mock).mockReturnValue({
+        sdk: null,
+        isLoading: false,
         user: { verificationState: 'VERIFIED' },
+        setUser: jest.fn(),
+        logoutFromProvider: jest.fn(),
       });
 
       render(
-        <Provider store={storeWithNonPendingUser}>
+        <Provider store={store}>
           <VerifyIdentity />
         </Provider>,
       );
@@ -383,12 +405,16 @@ describe('VerifyIdentity Component', () => {
     });
 
     it('does not auto-navigate when user is null', () => {
-      const storeWithNullUser = createTestStore({
+      (useCardSDK as jest.Mock).mockReturnValue({
+        sdk: null,
+        isLoading: false,
         user: null,
+        setUser: jest.fn(),
+        logoutFromProvider: jest.fn(),
       });
 
       render(
-        <Provider store={storeWithNullUser}>
+        <Provider store={store}>
           <VerifyIdentity />
         </Provider>,
       );