refactor(ramps): organize folder structure separating Views from components (#25791)

## **Description**

Reorganizes the Ramp code domain (`app/components/UI/Ramp/`) to clearly
separate Views (screens/modals) from reusable components, and moves
`RegionSelector` from the Settings domain into Ramp ownership.

**Problem:**
1. `RegionSelector` lived in `app/components/Views/Settings/` which is
owned by `@MetaMask/mobile-core-ux` in CODEOWNERS. Any Ramp changes to
it triggered cross-team reviews.
2. `app/components/UI/Ramp/components/` mixed navigable Views
(screens/modals) with pure reusable components, making the codebase
harder to navigate and understand.

**Solution:**
- Created `app/components/UI/Ramp/Views/` directory for all navigable
screens and modals
- Moved `RegionSelector` from
`app/components/Views/Settings/RegionSelector/` to
`app/components/UI/Ramp/Views/Settings/RegionSelector/`
- Moved all screen-like components from `components/` to `Views/`:
  - `BuildQuote` → `Views/BuildQuote/`
  - `TokenSelection` → `Views/TokenSelection/`
  - `PaymentSelectionModal` → `Views/Modals/PaymentSelectionModal/`
  - `SettingsModal` → `Views/Modals/SettingsModal/`
  - `UnsupportedTokenModal` → `Views/Modals/UnsupportedTokenModal/`
- Updated all import paths across the codebase
- Regenerated snapshots for moved test files

**New structure:**
```
app/components/UI/Ramp/
├── Views/                          # Screens & modals (navigated to)
│   ├── BuildQuote/
│   ├── TokenSelection/
│   ├── Settings/
│   │   └── RegionSelector/         # ← moved from Views/Settings/
│   └── Modals/
│       ├── PaymentSelectionModal/
│       ├── SettingsModal/
│       └── UnsupportedTokenModal/
└── components/                     # Pure reusable components only
    ├── PaymentMethodPill/
    ├── QuickAmounts/
    ├── TokenListItem/
    └── ...
```

This follows the same pattern already established by `Aggregator/Views/`
and `Deposit/Views/`.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Refs: #25615 (the PR that introduced `RegionSelector` usage in Ramp,
which highlighted the cross-team ownership issue)

## **Manual testing steps**

```gherkin
Feature: Ramp folder reorganization

  Scenario: User navigates through token selection flow
    Given the app is running on the BuildQuote screen (post-merge of #25615)

    When user taps back to go to token selection
    Then the token list should load and display correctly
    And user can search for tokens
    And tapping an unsupported token's info icon shows the modal

  Scenario: User selects payment method
    Given user is on the BuildQuote screen with an amount entered

    When user taps the payment method pill
    Then the payment selection modal should open
    And payment methods should display correctly
    And tapping "change provider" should slide to provider selection
    And selecting a provider should return to payment methods

  Scenario: User opens build quote settings
    Given user is on the BuildQuote screen

    When user taps the settings gear icon
    Then the settings modal should open with order history option
    And contact support option should be visible if provider has support URL

  Scenario: User changes region in settings
    Given user navigates to Settings > Region

    When user opens the region selector
    Then countries should load and display with flags
    And user can search for countries
    And tapping USA should show states view
    And selecting California should save and navigate back
    And the back button in states view should return to countries

  Scenario: Cold start verification
    Given the app is freshly started

    When user navigates through the complete Buy flow
    Then no blank screens or navigation crashes occur
    And all screens render correctly
```

**Video recording is attached showing all scenarios working correctly.**

## **Screenshots/Recordings**

### **Before**
N/A - Internal refactor only, no UI changes

### **After**
Video recording demonstrating all manual testing scenarios:


https://github.com/user-attachments/assets/b73ae1f3-252f-4210-875e-1a222297574f

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

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

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Mostly folder/import re-wiring plus snapshot updates; main risk is a
broken import/navigation route if the moved `RegionSelector` path is
incorrect.
> 
> **Overview**
> Moves the `RegionSelector` screen import used by main navigation from
`Views/Settings` into the Ramp-owned
`UI/Ramp/Views/Settings/RegionSelector` location.
> 
> Updates Ramp Aggregator/Deposit Jest snapshots to match the new UI
rendering for icon buttons (notably smaller icon sizes and reduced
`borderRadius`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5af35f1. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Amitabh Aggarwal <aggarwal.amitabh@gmail.com>

Author: AxelGes

app/components/Nav/Main/MainNavigator.js

@@ -14,7 +14,7 @@ import BackupAndSyncSettings from '../../Views/Settings/Identity/BackupAndSyncSe
 import SecuritySettings from '../../Views/Settings/SecuritySettings';
 import ExperimentalSettings from '../../Views/Settings/ExperimentalSettings';
 import NotificationsSettings from '../../Views/Settings/NotificationsSettings';
-import RegionSelector from '../../Views/Settings/RegionSelector/RegionSelector';
+import RegionSelector from '../../UI/Ramp/Views/Settings/RegionSelector/RegionSelector';
 import NotificationsView from '../../Views/Notifications';
 import NotificationsDetails from '../../Views/Notifications/Details';
 import OptIn from '../../Views/Notifications/OptIn';

…mponents/BuildQuote/BuildQuote.styles.ts …mp/Views/BuildQuote/BuildQuote.styles.tsapp/components/UI/Ramp/components/BuildQuote/BuildQuote.styles.ts renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.styles.ts app/components/UI/Ramp/components/BuildQuote/BuildQuote.styles.ts renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.styles.ts

@@ -5,8 +5,8 @@ import type { CaipChainId } from '@metamask/utils';
 
 import ScreenLayout from '../../Aggregator/components/ScreenLayout';
 import Keypad, { type KeypadChangeData } from '../../../../Base/Keypad';
-import PaymentMethodPill from '../PaymentMethodPill';
-import QuickAmounts from '../QuickAmounts';
+import PaymentMethodPill from '../../components/PaymentMethodPill';
+import QuickAmounts from '../../components/QuickAmounts';
 import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
@@ -28,7 +28,7 @@ import { useRampsController } from '../../hooks/useRampsController';
 import { createSettingsModalNavDetails } from '../Modals/SettingsModal';
 import useRampAccountAddress from '../../hooks/useRampAccountAddress';
 import { useDebouncedValue } from '../../../../hooks/useDebouncedValue';
-import { createPaymentSelectionModalNavigationDetails } from '../PaymentSelectionModal';
+import { createPaymentSelectionModalNavigationDetails } from '../Modals/PaymentSelectionModal';
 
 interface BuildQuoteParams {
   assetId?: string;

…omponents/BuildQuote/BuildQuote.test.tsx …amp/Views/BuildQuote/BuildQuote.test.tsxapp/components/UI/Ramp/components/BuildQuote/BuildQuote.test.tsx renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx app/components/UI/Ramp/components/BuildQuote/BuildQuote.test.tsx renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react-native';
 import PaymentMethodListItem from './PaymentMethodListItem';
-import { ThemeContext, mockTheme } from '../../../../../util/theme';
+import { ThemeContext, mockTheme } from '../../../../../../util/theme';
 import type { PaymentMethod } from '@metamask/ramps-controller';
 
 const renderWithTheme = (component: React.ReactElement) =>

…amp/components/BuildQuote/BuildQuote.tsx …/UI/Ramp/Views/BuildQuote/BuildQuote.tsxapp/components/UI/Ramp/components/BuildQuote/BuildQuote.tsx renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx app/components/UI/Ramp/components/BuildQuote/BuildQuote.tsx renamed to app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import ListItemSelect from '../../../../../component-library/components/List/ListItemSelect';
+import ListItemSelect from '../../../../../../component-library/components/List/ListItemSelect';
 import ListItemColumn, {
   WidthType,
-} from '../../../../../component-library/components/List/ListItemColumn';
+} from '../../../../../../component-library/components/List/ListItemColumn';
 import Text, {
   TextVariant,
   TextColor,
-} from '../../../../../component-library/components/Texts/Text';
+} from '../../../../../../component-library/components/Texts/Text';
 import { PaymentType } from '@consensys/on-ramp-sdk';
-import PaymentMethodIcon from '../../Aggregator/components/PaymentMethodIcon';
+import PaymentMethodIcon from '../../../Aggregator/components/PaymentMethodIcon';
 import PaymentMethodQuote from './PaymentMethodQuote';
-import { formatDelayFromArray } from '../../Aggregator/utils';
-import { useTheme } from '../../../../../util/theme';
-import type { Colors } from '../../../../../util/theme/models';
+import { formatDelayFromArray } from '../../../Aggregator/utils';
+import { useTheme } from '../../../../../../util/theme';
+import type { Colors } from '../../../../../../util/theme/models';
 import type { PaymentMethod } from '@metamask/ramps-controller';
 
 const ICON_CIRCLE_SIZE = 44;

…e/__snapshots__/BuildQuote.test.tsx.snap …e/__snapshots__/BuildQuote.test.tsx.snapapp/components/UI/Ramp/components/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap renamed to app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap app/components/UI/Ramp/components/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap renamed to app/components/UI/Ramp/Views/BuildQuote/__snapshots__/BuildQuote.test.tsx.snap

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import PaymentMethodQuote from './PaymentMethodQuote';
-import { ThemeContext, mockTheme } from '../../../../../util/theme';
+import { ThemeContext, mockTheme } from '../../../../../../util/theme';
 
 const renderWithTheme = (component: React.ReactElement) =>
   render(

…s/UI/Ramp/components/BuildQuote/index.ts …onents/UI/Ramp/Views/BuildQuote/index.tsapp/components/UI/Ramp/components/BuildQuote/index.ts renamed to app/components/UI/Ramp/Views/BuildQuote/index.ts app/components/UI/Ramp/components/BuildQuote/index.ts renamed to app/components/UI/Ramp/Views/BuildQuote/index.ts

@@ -3,7 +3,7 @@ import { Box } from '@metamask/design-system-react-native';
 import Text, {
   TextVariant,
   TextColor,
-} from '../../../../../component-library/components/Texts/Text';
+} from '../../../../../../component-library/components/Texts/Text';
 
 interface PaymentMethodQuoteProps {
   cryptoAmount: string;