feat(deposit): webview modal component (#17036)

<!--
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**
This adds a WebView component inside a bottom sheet, so it slides up
from the bottom for a more native feel in the deposit flow.

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

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


https://github.com/user-attachments/assets/209724cf-fc58-4650-8cf5-036803a45073

## **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: Pedro Pablo Aste Kompen <wachunei@gmail.com>

Author: AxelGes

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

@@ -90,12 +90,10 @@ const BuildQuote = () => {
     useState<DepositFiatCurrency>(USD_CURRENCY);
   const [amount, setAmount] = useState<string>('0');
   const [amountAsNumber, setAmountAsNumber] = useState<number>(0);
-  const { isAuthenticated, selectedWalletAddress, selectedRegion } =
-    useDepositSDK();
+  const { isAuthenticated, selectedRegion } = useDepositSDK();
   const [error, setError] = useState<string | null>();
 
   const { routeAfterAuthentication } = useDepositRouting({
-    selectedWalletAddress,
     cryptoCurrencyChainId: cryptoCurrency.chainId,
     paymentMethodId: paymentMethod.id,
   });
@@ -124,7 +122,11 @@ const BuildQuote = () => {
 
   useEffect(() => {
     navigation.setOptions(
-      getDepositNavbarOptions(navigation, { title: 'Build Quote' }, theme),
+      getDepositNavbarOptions(
+        navigation,
+        { title: strings('deposit.buildQuote.title') },
+        theme,
+      ),
     );
   }, [navigation, theme]);
 

app/components/UI/Ramp/Deposit/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap

@@ -174,7 +174,7 @@ exports[`BuildQuote Component Continue button functionality displays error when
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -1986,7 +1986,7 @@ exports[`BuildQuote Component Continue button functionality displays error when
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -3798,7 +3798,7 @@ exports[`BuildQuote Component Continue button functionality displays error when
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -5610,7 +5610,7 @@ exports[`BuildQuote Component Keypad Functionality displays converted token amou
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -7403,7 +7403,7 @@ exports[`BuildQuote Component Keypad Functionality updates amount when keypad is
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -9195,7 +9195,7 @@ exports[`BuildQuote Component Region Selection displays EUR currency when select
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -10988,7 +10988,7 @@ exports[`BuildQuote Component Region Selection displays default US region on ini
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>
@@ -12781,7 +12781,7 @@ exports[`BuildQuote Component render matches snapshot 1`] = `
                     }
                   }
                 >
-                  Build Quote
+                  Deposit
                 </Text>
               </TouchableOpacity>
             </View>

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

@@ -18,7 +18,6 @@ import DepositProgressBar from '../../components/DepositProgressBar';
 import { BasicInfoFormData } from '../BasicInfo/BasicInfo';
 import { useDepositSdkMethod } from '../../hooks/useDepositSdkMethod';
 import { createKycProcessingNavDetails } from '../KycProcessing/KycProcessing';
-import { createKycWebviewNavDetails } from '../KycWebview/KycWebview';
 import { BuyQuote } from '@consensys/native-ramps-sdk';
 import PoweredByTransak from '../../components/PoweredByTransak';
 import Button, {
@@ -27,6 +26,8 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../../../component-library/components/Buttons/Button';
 import PrivacySection from '../../components/PrivacySection';
+import { useDepositRouting } from '../../hooks/useDepositRouting';
+import { getCryptoCurrencyFromTransakId } from '../../utils';
 
 export interface EnterAddressParams {
   formData: BasicInfoFormData;
@@ -55,6 +56,13 @@ const EnterAddress = (): JSX.Element => {
     kycUrl,
   } = useParams<EnterAddressParams>();
 
+  const cryptoCurrency = getCryptoCurrencyFromTransakId(quote.cryptoCurrency);
+
+  const { navigateToKycWebview } = useDepositRouting({
+    cryptoCurrencyChainId: cryptoCurrency?.chainId || '',
+    paymentMethodId: quote.paymentMethod,
+  });
+
   const initialFormData: AddressFormData = {
     addressLine1: '',
     addressLine2: '',
@@ -165,7 +173,7 @@ const EnterAddress = (): JSX.Element => {
       }
 
       if (kycUrl) {
-        navigation.navigate(...createKycWebviewNavDetails({ quote, kycUrl }));
+        navigateToKycWebview(quote, kycUrl);
       } else {
         navigation.navigate(...createKycProcessingNavDetails({ quote }));
       }
@@ -180,9 +188,10 @@ const EnterAddress = (): JSX.Element => {
     kycError,
     submitPurpose,
     purposeError,
-    navigation,
-    quote,
     kycUrl,
+    navigateToKycWebview,
+    quote,
+    navigation,
     submitSsnDetails,
     ssnError,
   ]);

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

@@ -1,15 +1,16 @@
 import React from 'react';
-import { screen } from '@testing-library/react-native';
+import { screen, fireEvent, waitFor } from '@testing-library/react-native';
 import KycProcessing from './KycProcessing';
 import Routes from '../../../../../../constants/navigation/Routes';
 import renderDepositTestComponent from '../../utils/renderDepositTestComponent';
-import { KycStatus } from '../../hooks/useUserDetailsPolling';
+import { KycStatus } from '../../constants';
 
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
 const mockSetNavigationOptions = jest.fn();
 const mockStopPolling = jest.fn();
 const mockStartPolling = jest.fn();
+const mockHandleApprovedKycFlow = jest.fn();
 
 const mockKycForms = { forms: [] };
 const mockQuote = {
@@ -71,6 +72,12 @@ jest.mock('../../../../../UI/Navbar', () => ({
   }),
 }));
 
+jest.mock('../../hooks/useDepositRouting', () => ({
+  useDepositRouting: jest.fn(() => ({
+    handleApprovedKycFlow: mockHandleApprovedKycFlow,
+  })),
+}));
+
 function render(Component: React.ComponentType) {
   return renderDepositTestComponent(Component, Routes.DEPOSIT.KYC_PROCESSING);
 }
@@ -84,6 +91,7 @@ describe('KycProcessing Component', () => {
     mockUseUserDetailsPolling.userDetails = null;
     mockUseUserDetailsPolling.loading = false;
     mockUseUserDetailsPolling.error = null;
+    mockHandleApprovedKycFlow.mockClear();
   });
 
   it('render matches snapshot', () => {
@@ -135,4 +143,24 @@ describe('KycProcessing Component', () => {
     render(KycProcessing);
     expect(screen.toJSON()).toMatchSnapshot();
   });
+
+  describe('handleContinue button behavior', () => {
+    beforeEach(() => {
+      mockUseUserDetailsPolling.userDetails = {
+        kyc: { l1: { status: KycStatus.APPROVED } },
+      };
+    });
+
+    it('calls handleApprovedKycFlow when continue button is pressed', async () => {
+      mockHandleApprovedKycFlow.mockResolvedValueOnce(undefined);
+      render(KycProcessing);
+
+      const continueButton = screen.getByText('Complete your order');
+      fireEvent.press(continueButton);
+
+      await waitFor(() => {
+        expect(mockHandleApprovedKycFlow).toHaveBeenCalledWith(mockQuote);
+      });
+    });
+  });
 });

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

@@ -3,9 +3,7 @@ import { ActivityIndicator, View } from 'react-native';
 import styleSheet from './KycProcessing.styles';
 import { useNavigation } from '@react-navigation/native';
 import DepositProgressBar from '../../components/DepositProgressBar';
-import useUserDetailsPolling, {
-  KycStatus,
-} from '../../hooks/useUserDetailsPolling';
+import useUserDetailsPolling from '../../hooks/useUserDetailsPolling';
 import {
   createNavigationDetails,
   useParams,
@@ -24,7 +22,6 @@ import Icon, {
   IconColor,
 } from '../../../../../../component-library/components/Icons/Icon';
 import { createVerifyIdentityNavDetails } from '../VerifyIdentity/VerifyIdentity';
-import { createProviderWebviewNavDetails } from '../ProviderWebview/ProviderWebview';
 import { BuyQuote } from '@consensys/native-ramps-sdk';
 import { useDepositSdkMethod } from '../../hooks/useDepositSdkMethod';
 import Button, {
@@ -33,6 +30,10 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../../../component-library/components/Buttons/Button';
 import PoweredByTransak from '../../components/PoweredByTransak';
+import { useDepositRouting } from '../../hooks/useDepositRouting';
+import { getCryptoCurrencyFromTransakId } from '../../utils';
+import { KycStatus } from '../../constants';
+import Logger from '../../../../../../util/Logger';
 
 export interface KycProcessingParams {
   quote: BuyQuote;
@@ -46,6 +47,13 @@ const KycProcessing = () => {
   const { styles, theme } = useStyles(styleSheet, {});
   const { quote } = useParams<KycProcessingParams>();
 
+  const cryptoCurrency = getCryptoCurrencyFromTransakId(quote.cryptoCurrency);
+
+  const { handleApprovedKycFlow } = useDepositRouting({
+    cryptoCurrencyChainId: cryptoCurrency?.chainId || '',
+    paymentMethodId: quote.paymentMethod,
+  });
+
   const [{ data: kycForms, error: kycFormsError }] = useDepositSdkMethod(
     {
       method: 'getKYCForms',
@@ -83,9 +91,16 @@ const KycProcessing = () => {
     navigation.navigate(...createVerifyIdentityNavDetails({ quote }));
   }, [navigation, quote]);
 
-  const handleContinue = useCallback(() => {
-    navigation.navigate(...createProviderWebviewNavDetails({ quote }));
-  }, [navigation, quote]);
+  const handleContinue = useCallback(async () => {
+    try {
+      await handleApprovedKycFlow(quote);
+    } catch (error) {
+      Logger.error(error as Error, {
+        message: 'KycProcessing::handleContinue error',
+        quote,
+      });
+    }
+  }, [handleApprovedKycFlow, quote]);
 
   const error = userDetailsError || kycFormsError;
   const hasPendingForms = kycForms && kycForms.forms.length > 0;