feat(deposit): pass email to OTP view (#16113)

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

Small data refactor for the deposit flow. Email has been moved from the
deposit context into local state and is passed now as a route param to
the OTP view.




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

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

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

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

---------

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

Author: georgeweiler

app/components/UI/Ramp/Deposit/Views/EnterEmail/EnterEmail.test.tsx

@@ -105,6 +105,7 @@ describe('EnterEmail Component', () => {
     fireEvent.press(screen.getByRole('button', { name: 'Send email' }));
     await waitFor(() => {
       expect(mockNavigate).toHaveBeenCalledWith(Routes.DEPOSIT.OTP_CODE, {
+        email: '[email protected]',
         quote: mockQuote,
       });
     });

app/components/UI/Ramp/Deposit/Views/EnterEmail/EnterEmail.tsx

@@ -23,7 +23,6 @@ import { getDepositNavbarOptions } from '../../../../Navbar';
 import { useDepositSdkMethod } from '../../hooks/useDepositSdkMethod';
 import { createOtpCodeNavDetails } from '../OtpCode/OtpCode';
 import { validateEmail } from '../../utils';
-import { useDepositSDK } from '../../sdk';
 import DepositProgressBar from '../../components/DepositProgressBar/DepositProgressBar';
 import { BuyQuote } from '@consensys/native-ramps-sdk';
 
@@ -36,7 +35,7 @@ export const createEnterEmailNavDetails =
 
 const EnterEmail = () => {
   const navigation = useNavigation();
-  const { email, setEmail } = useDepositSDK();
+  const [email, setEmail] = useState('');
   const [validationError, setValidationError] = useState(false);
   const { quote } = useParams<EnterEmailParams>();
 
@@ -66,7 +65,7 @@ const EnterEmail = () => {
         await submitEmail();
 
         if (!error) {
-          navigation.navigate(...createOtpCodeNavDetails({ quote }));
+          navigation.navigate(...createOtpCodeNavDetails({ quote, email }));
         }
       } else {
         setValidationError(true);

app/components/UI/Ramp/Deposit/Views/OtpCode/OtpCode.test.tsx

@@ -27,8 +27,6 @@ const mockQuote: MockQuote = {
 jest.mock('../../sdk', () => ({
   ...jest.requireActual('../../sdk'),
   useDepositSDK: jest.fn().mockReturnValue({
-    email: EMAIL,
-    setEmail: jest.fn(),
     sdk: {},
     sdkError: null,
     providerApiKey: 'mock-api-key',
@@ -70,7 +68,7 @@ jest.mock('@react-navigation/native', () => {
       ),
     }),
     useRoute: () => ({
-      params: { quote: mockQuote },
+      params: { email: EMAIL, quote: mockQuote },
     }),
   };
 });
@@ -123,17 +121,16 @@ describe('OtpCode Component', () => {
       ttl: 1000,
       userId: 'mock-user-id',
     } as NativeTransakAccessToken;
+
     const mockSubmitCode = jest.fn().mockResolvedValue(mockResponse);
     const mockSetAuthToken = jest.fn().mockResolvedValue(undefined);
 
     mockUseDepositSdkMethodValues = [
-      { ...mockUseDepositSdkMethodInitialState, data: mockResponse },
+      { ...mockUseDepositSdkMethodInitialState, data: null },
       mockSubmitCode,
     ];
 
     jest.mocked(useDepositSDK).mockReturnValue({
-      email: EMAIL,
-      setEmail: jest.fn(),
       sdk: {
         setAccessToken: jest.fn(),
         getAccessToken: jest.fn(),
@@ -154,7 +151,6 @@ describe('OtpCode Component', () => {
     const { getByTestId } = render(OtpCode);
 
     const codeInput = getByTestId('otp-code-input');
-
     fireEvent.changeText(codeInput, '123456');
 
     fireEvent.press(
@@ -163,8 +159,16 @@ describe('OtpCode Component', () => {
       }),
     );
 
+    expect(mockSubmitCode).toHaveBeenCalled();
+
+    mockUseDepositSdkMethodValues[0] = {
+      ...mockUseDepositSdkMethodValues[0],
+      data: mockResponse,
+    };
+
+    render(OtpCode);
+
     await waitFor(() => {
-      expect(mockSubmitCode).toHaveBeenCalled();
       expect(mockSetAuthToken).toHaveBeenCalledWith(mockResponse);
       expect(mockNavigate).toHaveBeenCalledWith(
         Routes.DEPOSIT.VERIFY_IDENTITY,

app/components/UI/Ramp/Deposit/Views/OtpCode/OtpCode.tsx

@@ -27,6 +27,7 @@ import { BuyQuote } from '@consensys/native-ramps-sdk';
 
 export interface OtpCodeParams {
   quote: BuyQuote;
+  email: string;
 }
 
 export const createOtpCodeNavDetails = createNavigationDetails<OtpCodeParams>(
@@ -38,8 +39,8 @@ const CELL_COUNT = 6;
 const OtpCode = () => {
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
-  const { email, setAuthToken } = useDepositSDK();
-  const { quote } = useParams<OtpCodeParams>();
+  const { setAuthToken } = useDepositSDK();
+  const { quote, email } = useParams<OtpCodeParams>();
 
   useEffect(() => {
     navigation.setOptions(

app/components/UI/Ramp/Deposit/hooks/useKycPolling.test.ts

@@ -48,8 +48,6 @@ describe('useKycPolling', () => {
       sdkError: undefined,
       providerApiKey: 'test-key',
       providerFrontendAuth: 'test-auth',
-      email: '[email protected]',
-      setEmail: jest.fn(),
       isAuthenticated: true,
       authToken: { id: 'test-token' } as NativeTransakAccessToken,
       setAuthToken: jest.fn(),

app/components/UI/Ramp/Deposit/sdk/index.test.tsx

@@ -274,28 +274,7 @@ describe('Deposit SDK Context', () => {
     });
   });
 
-  describe('Email and Authentication', () => {
-    it('manages email state correctly', () => {
-      let contextValue: ReturnType<typeof useDepositSDK> | undefined;
-      const TestComponent = () => {
-        contextValue = useDepositSDK();
-        return null;
-      };
-
-      renderWithProvider(
-        <DepositSDKProvider>
-          <TestComponent />
-        </DepositSDKProvider>,
-        { state: mockedState },
-      );
-
-      act(() => {
-        contextValue?.setEmail('[email protected]');
-      });
-
-      expect(contextValue?.email).toBe('[email protected]');
-    });
-
+  describe('Authentication', () => {
     it('handles authentication state correctly', async () => {
       let contextValue: ReturnType<typeof useDepositSDK> | undefined;
       const TestComponent = () => {

app/components/UI/Ramp/Deposit/sdk/index.tsx

@@ -28,8 +28,6 @@ export interface DepositSDK {
   sdkError?: Error;
   providerApiKey: string | null;
   providerFrontendAuth: string | null;
-  email: string;
-  setEmail: (email: string) => void;
   isAuthenticated: boolean;
   authToken?: NativeTransakAccessToken;
   setAuthToken: (token: NativeTransakAccessToken) => Promise<boolean>;
@@ -60,7 +58,6 @@ export const DepositSDKProvider = ({
   const providerFrontendAuth = useSelector(selectDepositProviderFrontendAuth);
   const [sdk, setSdk] = useState<NativeRampsSdk>();
   const [sdkError, setSdkError] = useState<Error>();
-  const [email, setEmail] = useState<string>('');
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
   const [authToken, setAuthToken] = useState<NativeTransakAccessToken>();
 
@@ -141,8 +138,6 @@ export const DepositSDKProvider = ({
       sdkError,
       providerApiKey,
       providerFrontendAuth,
-      email,
-      setEmail,
       isAuthenticated,
       authToken,
       setAuthToken: setAuthTokenCallback,
@@ -154,7 +149,6 @@ export const DepositSDKProvider = ({
       sdkError,
       providerApiKey,
       providerFrontendAuth,
-      email,
       isAuthenticated,
       authToken,
       setAuthTokenCallback,