UX Multichain: Replace badge icon with current network image (#19964)

* updated network with current network

* Update snapshot

* fixed stories

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>

ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap

@@ -26,7 +26,7 @@ exports[`Token Cell should match snapshot 1`] = `
             class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
           >
             <img
-              alt="TEST logo"
+              alt="Ethereum Mainnet logo"
               class="mm-avatar-network__network-image"
               src="./images/eth_logo.png"
             />

ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap

@@ -26,7 +26,7 @@ exports[`TokenListItem should render correctly 1`] = `
             class="box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-border-muted box--border-style-solid box--border-width-1"
           >
             <img
-              alt="undefined logo"
+              alt="Ethereum Mainnet logo"
               class="mm-avatar-network__network-image"
               src="./images/eth_logo.png"
             />

ui/components/multichain/token-list-item/token-list-item.js

@@ -21,7 +21,11 @@ import {
   Text,
   Box,
 } from '../../component-library';
-import { getCurrentChainId, getNativeCurrencyImage } from '../../../selectors';
+import {
+  getCurrentChainId,
+  getCurrentNetwork,
+  getNativeCurrencyImage,
+} from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -29,7 +33,6 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
-import { LINEA_GOERLI_TOKEN_IMAGE_URL } from '../../../../shared/constants/network';
 
 export const TokenListItem = ({
   className,
@@ -44,11 +47,9 @@ export const TokenListItem = ({
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
   const trackEvent = useContext(MetaMetricsContext);
   const chainId = useSelector(getCurrentChainId);
-  const badgeWrapperImage =
-    title === 'LineaETH' ? LINEA_GOERLI_TOKEN_IMAGE_URL : primaryTokenImage;
-  const badgeTokenImage =
-    title === 'LineaETH' ? LINEA_GOERLI_TOKEN_IMAGE_URL : tokenImage;
 
+  // Used for badge icon
+  const currentNetwork = useSelector(getCurrentNetwork);
   return (
     <Box
       className={classnames('multichain-token-list-item', className)}
@@ -83,10 +84,10 @@ export const TokenListItem = ({
           badge={
             <AvatarNetwork
               size={Size.XS}
-              name={tokenSymbol}
+              name={currentNetwork?.nickname}
-              src={badgeWrapperImage}
+              src={currentNetwork?.rpcPrefs?.imageUrl}
               borderColor={
-                badgeWrapperImage
+                primaryTokenImage
                   ? BorderColor.borderMuted
                   : BorderColor.borderDefault
               }
@@ -96,12 +97,10 @@ export const TokenListItem = ({
         >
           <AvatarToken
             name={tokenSymbol}
-            src={badgeTokenImage}
+            src={tokenImage}
             showHalo
             borderColor={
-              badgeTokenImage
+              tokenImage ? BorderColor.transparent : BorderColor.borderDefault
-                ? BorderColor.transparent
-                : BorderColor.borderDefault
             }
           />
         </BadgeWrapper>

ui/components/multichain/token-list-item/token-list-item.stories.js

@@ -38,7 +38,12 @@ export default {
 
 const customNetworkData = {
   ...testData,
-  metamask: { ...testData.metamask, nativeCurrency: '' },
+  metamask: {
+    ...testData.metamask,
+    providerConfig: {
+      chainId: '0x1',
+    },
+  },
 };
 const customNetworkStore = configureStore(customNetworkData);
 
@@ -47,6 +52,13 @@ const Template = (args) => {
 };
 
 export const DefaultStory = Template.bind({});
+DefaultStory.decorators = [
+  (Story) => (
+    <Provider store={customNetworkStore}>
+      <Story />
+    </Provider>
+  ),
+];
 
 export const ChaosStory = (args) => (
   <div
@@ -55,7 +67,13 @@ export const ChaosStory = (args) => (
     <TokenListItem {...args} />
   </div>
 );
-ChaosStory.storyName = 'ChaosStory';
+ChaosStory.decorators = [
+  (Story) => (
+    <Provider store={customNetworkStore}>
+      <Story />
+    </Provider>
+  ),
+];
 
 ChaosStory.args = {
   title: 'Really long, long name',
@@ -65,14 +83,6 @@ ChaosStory.args = {
 
 export const NoImagesStory = Template.bind({});
 
-NoImagesStory.decorators = [
-  (Story) => (
-    <Provider store={customNetworkStore}>
-      <Story />
-    </Provider>
-  ),
-];
-
 NoImagesStory.args = {
   tokenImage: '',
 };