fix: token import flow is broken (#21911)

<!--
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**
After the merge of
[this](https://github.com/MetaMask/metamask-mobile/pull/21628/files) PR,
the navigation broke and now we are not able to import tokens.

@brianacnguyen I have not tested `TokensFullView` for this since I am
not 100% sure on how to enable this and we need to fix this import issue
ASAP

<!--
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: fix broken token import flow

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-1557

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


https://github.com/user-attachments/assets/148686bf-e8f0-4482-b2c3-5be815eac073

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

### **After**

https://github.com/user-attachments/assets/eed8825a-7a8e-414d-a69c-0d430b40b3ae

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



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Registers `ConfirmAddAsset` in the main stack (header shown) and
updates the confirm screen to use `SafeAreaView` with styling tweaks;
updates snapshots.
> 
> - **Navigation**:
> - Registers `ConfirmAddAsset` in the root `MainNavigator` stack with
`headerShown: true` (moved from wallet tab stack).
> - **UI**:
> - `app/components/UI/ConfirmAddAsset/ConfirmAddAsset.tsx`: Wraps
content with `SafeAreaView` and adjusts layout.
> - `app/components/UI/ConfirmAddAsset/styles.ts`: Adds `flex: 1` and
background color to `rowWrapper`; minor style tweaks.
> - **Tests**:
> - Updates snapshots for `MainNavigator` and `ConfirmAddAsset` to
reflect route registration and SafeAreaView/layout changes.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
42d26de. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Brian Nguyen <brianacnguyen@gmail.com>

Author: juanmigdr

app/components/Nav/Main/MainNavigator.js

@@ -203,11 +203,6 @@ const WalletTabStackFlow = () => (
       component={Collectible}
       options={Collectible.navigationOptions}
     />
-    <Stack.Screen
-      name="ConfirmAddAsset"
-      component={ConfirmAddAsset}
-      options={ConfirmAddAsset.navigationOptions}
-    />
     <Stack.Screen
       name={Routes.SETTINGS.REVEAL_PRIVATE_CREDENTIAL}
       component={RevealPrivateCredential}
@@ -945,6 +940,11 @@ const MainNavigator = () => {
         component={AddAsset}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="ConfirmAddAsset"
+        component={ConfirmAddAsset}
+        options={{ headerShown: true }}
+      />
       {isRewardsEnabled && (
         <Stack.Screen
           name={Routes.SETTINGS_VIEW}

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -56,6 +56,15 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
       }
     }
   />
+  <Screen
+    component={[Function]}
+    name="ConfirmAddAsset"
+    options={
+      {
+        "headerShown": true,
+      }
+    }
+  />
   <Screen
     component={[Function]}
     name="Asset"

app/components/UI/ConfirmAddAsset/ConfirmAddAsset.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { View } from 'react-native';
+import { View, SafeAreaView } from 'react-native';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -157,7 +157,7 @@ const ConfirmAddAsset = () => {
   );
 
   return (
-    <View
+    <SafeAreaView
       style={styles.rowWrapper}
       testID={ImportTokenViewSelectorsIDs.ADD_CONFIRM_CUSTOM_ASSET}
     >
@@ -233,7 +233,7 @@ const ConfirmAddAsset = () => {
         />
       </View>
       {renderImportModal()}
-    </View>
+    </SafeAreaView>
   );
 };
 export default ConfirmAddAsset;

app/components/UI/ConfirmAddAsset/__snapshots__/ConfirmAddAsset.test.tsx.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
-<View
+<RCTSafeAreaView
   style={
     {
+      "backgroundColor": "#ffffff",
+      "flex": 1,
       "paddingVertical": 16,
     }
   }
@@ -375,5 +377,5 @@ exports[`ConfirmAddAsset render matches previous snapshot 1`] = `
     </View>
   </View>
   <View />
-</View>
+</RCTSafeAreaView>
 `;

app/components/UI/ConfirmAddAsset/styles.ts

@@ -5,7 +5,9 @@ import { Colors } from 'app/util/theme/models';
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
     rowWrapper: {
+      flex: 1,
       paddingVertical: 16,
+      backgroundColor: colors.background.default,
     },
     root: {
       backgroundColor: colors.background.default,