fix: fix ramp flow (#12796)

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

## **Related issues**

Fixes: #11783 

## **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: Pedro Pablo Aste Kompen <[email protected]>

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.test.tsx

@@ -181,6 +181,7 @@ const mockuseRampSDKInitialValues: Partial<RampSDK> = {
   isBuy: true,
   isSell: false,
   rampType: RampType.BUY,
+  setIntent: jest.fn(),
 };
 
 let mockUseRampSDKValues: Partial<RampSDK> = {
@@ -275,12 +276,12 @@ describe('NetworkSwitcher View', () => {
     expect(cancelButtons3.length).toBe(1);
   });
 
-  it('switches network by calling setProviderType', async () => {
+  it('switches network by calling setActiveNetwork', async () => {
     render(NetworkSwitcher);
     const lineaNetworkText = screen.getByText('Linea Main Network');
     fireEvent.press(lineaNetworkText);
     expect(
-      (Engine.context.NetworkController.setProviderType as jest.Mock).mock
+      (Engine.context.NetworkController.setActiveNetwork as jest.Mock).mock
         .calls,
     ).toMatchInlineSnapshot(`
       [
@@ -290,6 +291,7 @@ describe('NetworkSwitcher View', () => {
       ]
     `);
 
+    jest.clearAllMocks();
     render(NetworkSwitcher);
     const polygonNetworkTest = screen.getByText('Polygon Mainnet');
     fireEvent.press(polygonNetworkTest);

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx

@@ -59,7 +59,7 @@ function NetworkSwitcher() {
   } = useRampNetworksDetail();
   const supportedNetworks = useSelector(getRampNetworks);
   const [isCurrentNetworkRampSupported] = useRampNetwork();
-  const { selectedChainId, isBuy, intent } = useRampSDK();
+  const { selectedChainId, isBuy, intent, setIntent } = useRampSDK();
 
   const networkConfigurations = useSelector(selectNetworkConfigurations);
   const [networkToBeAdded, setNetworkToBeAdded] = useState<Network>();
@@ -145,7 +145,7 @@ function NetworkSwitcher() {
   const switchToMainnet = useCallback(
     (type: 'mainnet' | 'linea-mainnet') => {
       const { NetworkController } = Engine.context;
-      NetworkController.setProviderType(type);
+      NetworkController.setActiveNetwork(type);
       navigateToGetStarted();
     },
     [navigateToGetStarted],
@@ -173,13 +173,23 @@ function NetworkSwitcher() {
 
   const handleNetworkPress = useCallback(
     (networkConfiguration) => {
+      setIntent((prevIntent) => ({
+        ...prevIntent,
+        chainId: networkConfiguration.chainId,
+      }));
+
+      const networkConfigurationWithHexChainId = {
+        ...networkConfiguration,
+        chainId: toHex(networkConfiguration.chainId),
+      };
+
       if (networkConfiguration.isAdded) {
-        switchNetwork(networkConfiguration);
+        switchNetwork(networkConfigurationWithHexChainId);
       } else {
-        setNetworkToBeAdded(networkConfiguration);
+        setNetworkToBeAdded(networkConfigurationWithHexChainId);
       }
     },
-    [switchNetwork],
+    [setIntent, switchNetwork],
   );
 
   const handleIntentChainId = useCallback(
@@ -199,7 +209,8 @@ function NetworkSwitcher() {
         (networkConfiguration) => {
           const isAdded = Object.values(networkConfigurations).some(
             (savedNetwork) =>
-              savedNetwork.chainId === networkConfiguration.chainId,
+              toHex(savedNetwork.chainId) ===
+              toHex(networkConfiguration.chainId),
           );
           return {
             ...networkConfiguration,

app/components/Views/Settings/NetworksSettings/NetworkSettings/CustomNetworkView/CustomNetwork.tsx

@@ -3,6 +3,7 @@ import NetworkModals from '../../../../../UI/NetworkModal';
 import { View, TouchableOpacity } from 'react-native';
 import { useSelector } from 'react-redux';
 import WarningIcon from 'react-native-vector-icons/FontAwesome';
+import { toHex } from '@metamask/controller-utils';
 import CustomText from '../../../../../Base/Text';
 import EmptyPopularList from '../emptyList';
 import { useNavigation } from '@react-navigation/native';
@@ -46,7 +47,7 @@ const CustomNetwork = ({
         // TODO: Replace "any" with type
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (savedNetwork: any) =>
-          savedNetwork.chainId === networkConfiguration.chainId,
+          toHex(savedNetwork.chainId) === toHex(networkConfiguration.chainId),
       );
       return {
         ...networkConfiguration,