[pull] main from MetaMask:main

app/component-library/components-temp/MultichainAccounts/MultichainAddressRow/MultichainAddressRow.constants.ts

@@ -1,14 +1,8 @@
 import { MultichainAddressRowProps } from './MultichainAddressRow.types';
-import { ProviderConfig } from '../../../../selectors/networkController';
 
 export const SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS: MultichainAddressRowProps = {
-  network: {
-    nickname: 'Ethereum Mainnet',
-    chainId: '0x1',
-    ticker: 'ETH',
-    type: 'mainnet',
-    rpcPrefs: {},
-  } as ProviderConfig,
+  chainId: 'eip155:1',
+  networkName: 'Ethereum Mainnet',
   address: '0x1234567890123456789012345678901234567890',
 };
 

app/component-library/components-temp/MultichainAccounts/MultichainAddressRow/MultichainAddressRow.stories.tsx

@@ -1,18 +1,22 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import { View } from 'react-native';
+import { CaipChainId } from '@metamask/utils';
 import { mockTheme } from '../../../../util/theme';
 import { default as MultichainAddressRowComponent } from './MultichainAddressRow';
-import { ProviderConfig } from '../../../../selectors/networkController';
 import { SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS } from './MultichainAddressRow.constants';
 
 const MultichainAddressRowMeta = {
   title: 'Component Library / MultichainAccounts',
   component: MultichainAddressRowComponent,
   argTypes: {
+    chainId: {
+      control: { type: 'text' },
+      defaultValue: SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.chainId,
+    },
     networkName: {
       control: { type: 'text' },
-      defaultValue: SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.network.nickname,
+      defaultValue: SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.networkName,
     },
     address: {
       control: { type: 'text' },
@@ -23,7 +27,11 @@ const MultichainAddressRowMeta = {
 export default MultichainAddressRowMeta;
 
 export const MultichainAddressRow = {
-  render: (args: { networkName: string; address: string }) => (
+  render: (args: {
+    chainId: CaipChainId;
+    networkName: string;
+    address: string;
+  }) => (
     <View
       style={{
         alignItems: 'center',
@@ -33,18 +41,16 @@ export const MultichainAddressRow = {
       }}
     >
       <MultichainAddressRowComponent
-        network={{
-          ...SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.network,
-          nickname: args.networkName,
-        }}
+        chainId={args.chainId}
+        networkName={args.networkName}
         address={args.address}
       />
     </View>
   ),
 };
 
 export const WithLongNetworkName = {
-  render: (args: { address: string }) => (
+  render: (args: { chainId: CaipChainId; address: string }) => (
     <View
       style={{
         alignItems: 'center',
@@ -54,10 +60,8 @@ export const WithLongNetworkName = {
       }}
     >
       <MultichainAddressRowComponent
-        network={{
-          ...SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.network,
-          nickname: 'Very Long Network Name That Might Wrap',
-        }}
+        chainId={args.chainId || '0x1'}
+        networkName="Very Long Network Name That Might Wrap"
         address={args.address}
       />
     </View>
@@ -75,15 +79,8 @@ export const WithCustomNetwork = {
       }}
     >
       <MultichainAddressRowComponent
-        network={
-          {
-            nickname: 'Polygon Mainnet',
-            chainId: '0x89',
-            ticker: 'MATIC',
-            type: 'rpc',
-            rpcPrefs: {},
-          } as ProviderConfig
-        }
+        chainId="eip155:137"
+        networkName="Polygon Mainnet"
         address="0xabcdefabcdefabcdefabcdefabcdefabcdefabcd"
       />
     </View>

app/component-library/components-temp/MultichainAccounts/MultichainAddressRow/MultichainAddressRow.test.tsx

@@ -81,17 +81,15 @@ describe('MultichainAddressRow', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should handle network without rpcPrefs', () => {
-    const propsWithoutRpcPrefs = {
+  it('should handle unknown chainId', () => {
+    const propsWithUnknownChainId = {
       ...SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS,
-      network: {
-        ...SAMPLE_MULTICHAIN_ADDRESS_ROW_PROPS.network,
-        rpcPrefs: {},
-      },
+      chainId: 'eip155:999999' as const,
+      networkName: 'Unknown Network',
     };
 
     const { getByTestId } = render(
-      <MultichainAddressRow {...propsWithoutRpcPrefs} />,
+      <MultichainAddressRow {...propsWithUnknownChainId} />,
     );
     const networkIcon = getByTestId(
       MULTICHAIN_ADDRESS_ROW_NETWORK_ICON_TEST_ID,

app/component-library/components-temp/MultichainAccounts/MultichainAddressRow/MultichainAddressRow.tsx

@@ -27,7 +27,8 @@ import {
 import useCopyClipboard from '../../../../components/Views/Notifications/Details/hooks/useCopyClipboard';
 
 const MultichainAddressRow = ({
-  network,
+  chainId,
+  networkName,
   address,
   style,
   testID = MULTICHAIN_ADDRESS_ROW_TEST_ID,
@@ -36,10 +37,7 @@ const MultichainAddressRow = ({
   const { styles } = useStyles(styleSheet, { style });
   const copyToClipboard = useCopyClipboard();
 
-  const networkImageSource = getNetworkImageSource({
-    chainId: network.chainId,
-    networkType: network.type,
-  });
+  const networkImageSource = getNetworkImageSource({ chainId });
   const truncatedAddress = formatAddress(address, 'short');
 
   const handleCopyClick = useCallback(() => {
@@ -56,7 +54,7 @@ const MultichainAddressRow = ({
       <Avatar
         variant={AvatarVariant.Network}
         size={AvatarSize.Md}
-        name={network.nickname}
+        name={networkName}
         imageSource={networkImageSource}
         testID={MULTICHAIN_ADDRESS_ROW_NETWORK_ICON_TEST_ID}
       />
@@ -67,7 +65,7 @@ const MultichainAddressRow = ({
           color={TextColor.Default}
           testID={MULTICHAIN_ADDRESS_ROW_NETWORK_NAME_TEST_ID}
         >
-          {network.nickname}
+          {networkName}
         </Text>
         <Text
           variant={TextVariant.BodySM}

app/component-library/components-temp/MultichainAccounts/MultichainAddressRow/MultichainAddressRow.types.ts

@@ -1,11 +1,15 @@
 import { StyleProp, ViewStyle } from 'react-native';
-import { ProviderConfig } from '../../../../selectors/networkController';
+import { CaipChainId } from '@metamask/utils';
 
 export interface MultichainAddressRowProps {
   /**
-   * Network provider configuration containing nickname, chainId, and other network details
+   * Chain ID to identify the network
    */
-  network: ProviderConfig;
+  chainId: CaipChainId;
+  /**
+   * Network name to display
+   */
+  networkName: string;
   /**
    * Address string to display (will be truncated)
    */

app/component-library/components-temp/MultichainAccounts/MultichainAddressRowsList/MultichainAddressRowsList.constants.ts

@@ -0,0 +1,7 @@
+// Test IDs
+export const MULTICHAIN_ADDRESS_ROWS_LIST_TEST_ID =
+  'multichain-address-rows-list';
+export const MULTICHAIN_ADDRESS_ROWS_LIST_SEARCH_TEST_ID =
+  'multichain-address-rows-list-search';
+export const MULTICHAIN_ADDRESS_ROWS_LIST_EMPTY_MESSAGE_TEST_ID =
+  'multichain-address-rows-list-empty-message';