feat: Show network badge in detected tokens modal (#28231)

## **Description**

Adds the network badge to the listing of tokens detected

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28231?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Import an SRP that ERC20s
2. Click "Import tokens" in the banner
3. See network icons in the asset badge

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

<img width="356" alt="SCR-20241031-ovkc"
src="https://github.com/user-attachments/assets/ba934bad-8e7d-4c46-b47b-273030e81ae2">



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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: Salim TOUBAL <[email protected]>

ui/components/app/detected-token/detected-token-details/detected-token-details.js

@@ -1,14 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-
-import { Box } from '../../../component-library';
-import Identicon from '../../../ui/identicon';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  AvatarToken,
+  AvatarTokenSize,
+  BadgeWrapper,
+  Box,
+} from '../../../component-library';
 import DetectedTokenValues from '../detected-token-values/detected-token-values';
 import DetectedTokenAddress from '../detected-token-address/detected-token-address';
 import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators';
 import { Display } from '../../../../helpers/constants/design-system';
-import { getTokenList } from '../../../../selectors';
+import {
+  getCurrentNetwork,
+  getTestNetworkBackgroundColor,
+  getTokenList,
+} from '../../../../selectors';
 
 const DetectedTokenDetails = ({
   token,
@@ -17,18 +26,34 @@ const DetectedTokenDetails = ({
 }) => {
   const tokenList = useSelector(getTokenList);
   const tokenData = tokenList[token.address?.toLowerCase()];
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+  const currentNetwork = useSelector(getCurrentNetwork);
 
   return (
     <Box
       display={Display.Flex}
       className="detected-token-details"
       marginBottom={4}
     >
-      <Identicon
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            size={AvatarNetworkSize.Xs}
+            name={currentNetwork?.nickname || ''}
+            src={currentNetwork?.rpcPrefs?.imageUrl}
+            backgroundColor={testNetworkBackgroundColor}
+          />
+        }
+        marginRight={2}
         className="detected-token-details__identicon"
-        address={token.address}
-        diameter={40}
-      />
+      >
+        <AvatarToken
+          name={token.symbol}
+          src={token.image}
+          size={AvatarTokenSize.Md}
+        />
+      </BadgeWrapper>
+
       <Box
         display={Display.Grid}
         marginLeft={2}
@@ -55,6 +80,7 @@ DetectedTokenDetails.propTypes = {
     symbol: PropTypes.string,
     iconUrl: PropTypes.string,
     aggregators: PropTypes.array,
+    image: PropTypes.string,
   }),
   handleTokenSelection: PropTypes.func.isRequired,
   tokensListDetected: PropTypes.object,