feat: multichain manual import (#14400)

<!--
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**
the goal of this PR is to make the manual import token multichain
design:

https://www.figma.com/design/CvBEDNwQqfW4Wbil40Bhr1/Substitute-Global-Network-selector?t=7VlJYKwbd0ONMpnl-0

<!--
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 import token
2. Import token using search
3. Import token using contract address

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

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

### **After**



https://github.com/user-attachments/assets/1e5f9b29-b0a3-4730-a005-552c1fea3aae




https://github.com/user-attachments/assets/2d18b0e3-71b2-45b6-9ffc-1bbf49587a13


<!-- [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: Nick Gambino <[email protected]>
Co-authored-by: Nicholas Gambino <[email protected]>

Author: salimtb

app/components/UI/AddCustomToken/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AddCustomToken render matches previous snapshot 1`] = `
+exports[`AddCustomToken render correctly 1`] = `
 <View
   style={
     {
@@ -141,6 +141,80 @@ exports[`AddCustomToken render matches previous snapshot 1`] = `
           }
         }
       >
+        <TouchableOpacity
+          onLongPress={[Function]}
+          onPress={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "borderColor": "#b7bbc8",
+              "borderRadius": 2,
+              "borderWidth": 1,
+              "flexDirection": "row",
+              "marginBottom": 16,
+              "marginTop": 4,
+              "padding": 16,
+            }
+          }
+        >
+          <Text
+            style={
+              {
+                "color": "#121314",
+                "fontFamily": "CentraNo1-Book",
+                "fontSize": 16,
+                "fontWeight": "400",
+              }
+            }
+          >
+            Select a network
+          </Text>
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "paddingHorizontal": 16,
+                "position": "absolute",
+                "right": 0,
+              }
+            }
+          >
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessible={true}
+              activeOpacity={1}
+              disabled={false}
+              onPress={[Function]}
+              onPressIn={[Function]}
+              onPressOut={[Function]}
+              style={
+                {
+                  "alignItems": "center",
+                  "borderRadius": 8,
+                  "height": 24,
+                  "justifyContent": "center",
+                  "opacity": 1,
+                  "width": 24,
+                }
+              }
+              testID="select-network-button"
+            >
+              <SvgMock
+                color="#121314"
+                height={16}
+                name="ArrowDown"
+                style={
+                  {
+                    "height": 16,
+                    "width": 16,
+                  }
+                }
+                width={16}
+              />
+            </TouchableOpacity>
+          </View>
+        </TouchableOpacity>
         <Text
           style={
             {

app/components/UI/AddCustomToken/index.js

@@ -5,8 +5,8 @@ import {
   View,
   StyleSheet,
   InteractionManager,
-  Platform,
   ScrollView,
+  TouchableOpacity,
 } from 'react-native';
 import { fontStyles } from '../../../styles/common';
 import Engine from '../../../core/Engine';
@@ -26,6 +26,7 @@ import { regex } from '../../../../app/util/regex';
 import {
   getBlockExplorerAddressUrl,
   getDecimalChainId,
+  getNetworkImageSource,
 } from '../../../util/networks';
 import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import { formatIconUrlWithProxy } from '@metamask/assets-controllers';
@@ -34,6 +35,7 @@ import Button, {
   ButtonVariants,
 } from '../../../component-library/components/Buttons/Button';
 import Icon, {
+  IconColor,
   IconName,
   IconSize,
 } from '../../../component-library/components/Icons/Icon';
@@ -43,13 +45,25 @@ import Banner, {
 } from '../../../component-library/components/Banners/Banner';
 import CLText from '../../../component-library/components/Texts/Text/Text';
 import Logger from '../../../util/Logger';
+import Avatar, {
+  AvatarSize,
+  AvatarVariant,
+} from '../../../component-library/components/Avatars/Avatar';
+import ButtonIcon from '../../../component-library/components/Buttons/ButtonIcon';
 
 const createStyles = (colors) =>
   StyleSheet.create({
     wrapper: {
       backgroundColor: colors.background.default,
       flex: 1,
     },
+    overlappingAvatarsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      position: 'absolute',
+      paddingHorizontal: 16,
+      right: 0,
+    },
     addressWrapper: {
       paddingHorizontal: 16,
       paddingTop: 16,
@@ -116,6 +130,21 @@ const createStyles = (colors) =>
     textWrapper: {
       padding: 0,
     },
+    networkSelectorContainer: {
+      borderWidth: 1,
+      marginBottom: 16,
+      marginTop: 4,
+      borderColor: colors.border.default,
+      borderRadius: 2,
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 16,
+    },
+    networkSelectorText: {
+      ...fontStyles.normal,
+      color: colors.text.default,
+      fontSize: 16,
+    },
   });
 
 /**
@@ -164,6 +193,21 @@ class AddCustomToken extends PureComponent {
      * Metrics injected by withMetricsAwareness HOC
      */
     metrics: PropTypes.object,
+
+    /**
+     * Function to set the open network selector
+     */
+    setOpenNetworkSelector: PropTypes.func,
+
+    /**
+     * The selected network
+     */
+    selectedNetwork: PropTypes.string,
+
+    /**
+     * The network client ID
+     */
+    networkClientId: PropTypes.string,
   };
 
   getTokenAddedAnalyticsParams = () => {
@@ -186,7 +230,16 @@ class AddCustomToken extends PureComponent {
     if (!(await this.validateCustomToken())) return;
     const { TokensController } = Engine.context;
     const { address, symbol, decimals, name } = this.state;
-    await TokensController.addToken({ address, symbol, decimals, name });
+    const { chainId } = this.props;
+    const networkClientId = this.props.networkClientId;
+    await TokensController.addToken({
+      address,
+      symbol,
+      decimals,
+      name,
+      chainId,
+      networkClientId,
+    });
 
     const analyticsParams = this.getTokenAddedAnalyticsParams();
 
@@ -228,6 +281,18 @@ class AddCustomToken extends PureComponent {
     this.props.navigation.goBack();
   };
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.networkClientId !== this.props.networkClientId) {
+      this.setState({
+        address: '',
+        symbol: '',
+        decimals: '',
+        name: '',
+        warningAddress: '',
+      });
+    }
+  }
+
   onAddressChange = async (address) => {
     this.setState({ address });
     if (address.length === 42) {
@@ -239,9 +304,18 @@ class AddCustomToken extends PureComponent {
         if (validated) {
           const { AssetsContractController } = Engine.context;
           const [decimals, symbol, name] = await Promise.all([
-            AssetsContractController.getERC20TokenDecimals(address),
-            AssetsContractController.getERC721AssetSymbol(address),
-            AssetsContractController.getERC20TokenName(address),
+            AssetsContractController.getERC20TokenDecimals(
+              address,
+              this.props.networkClientId,
+            ),
+            AssetsContractController.getERC721AssetSymbol(
+              address,
+              this.props.networkClientId,
+            ),
+            AssetsContractController.getERC20TokenName(
+              address,
+              this.props.networkClientId,
+            ),
           ]);
 
           this.setState({
@@ -463,6 +537,7 @@ class AddCustomToken extends PureComponent {
         }),
         name,
         decimals,
+        chainId,
       },
     ];
 
@@ -494,7 +569,7 @@ class AddCustomToken extends PureComponent {
     const colors = this.context.colors || mockTheme.colors;
     const themeAppearance = this.context.themeAppearance || 'light';
     const styles = createStyles(colors);
-    const isDisabled = !symbol || !decimals;
+    const isDisabled = !symbol || !decimals || !this.props.selectedNetwork;
 
     const addressInputStyle = onFocusAddress
       ? { ...styles.textInput, ...styles.textInputFocus }
@@ -524,6 +599,39 @@ class AddCustomToken extends PureComponent {
         <ScrollView>
           {this.renderBanner()}
           <View style={styles.addressWrapper}>
+            <TouchableOpacity
+              style={styles.networkSelectorContainer}
+              onPress={() => this.props.setOpenNetworkSelector(true)}
+              onLongPress={() => this.props.setOpenNetworkSelector(true)}
+            >
+              <Text style={styles.networkSelectorText}>
+                {this.props.selectedNetwork ||
+                  strings('networks.select_network')}
+              </Text>
+              <View style={styles.overlappingAvatarsContainer}>
+                {this.props.selectedNetwork ? (
+                  <Avatar
+                    variant={AvatarVariant.Network}
+                    size={AvatarSize.Sm}
+                    name={this.props.selectedNetwork}
+                    imageSource={getNetworkImageSource({
+                      networkType: 'evm',
+                      chainId: this.props.chainId,
+                    })}
+                    testID={ImportTokenViewSelectorsIDs.SELECT_NETWORK_BUTTON}
+                  />
+                ) : null}
+
+                <ButtonIcon
+                  iconName={IconName.ArrowDown}
+                  iconColor={IconColor.Default}
+                  testID={ImportTokenViewSelectorsIDs.SELECT_NETWORK_BUTTON}
+                  onPress={() => this.props.setOpenNetworkSelector(true)}
+                  accessibilityRole="button"
+                  style={styles.buttonIcon}
+                />
+              </View>
+            </TouchableOpacity>
             <Text style={styles.inputLabel}>
               {strings('asset_details.address')}
             </Text>