chore: replace deprecated identicon (#40687)

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

Replace the token avatar component in the add suggested token screen

(Part of cleaning up usages of the deprecated identicon component)

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

## **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: chore: replace deprecated identicon

## **Related issues**

Fixes:

## **Manual testing steps**

1. Trigger `wallet_watchAsset`

## **Screenshots/Recordings**

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

### **Before**

<img width="202" height="116" alt="image"
src="https://github.com/user-attachments/assets/ca5668af-a439-462f-97da-e6f8b1915859"
/>


### **After**

<img width="223" height="120" alt="image"
src="https://github.com/user-attachments/assets/7bbb0da6-b279-4720-a1b0-9024b524d04c"
/>


## **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/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-extension/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]
> **Low Risk**
> Low risk UI-only change that swaps the token avatar component and
tweaks layout spacing; no changes to token add/cancel logic or data
handling.
> 
> **Overview**
> Updates the `confirm-add-suggested-token` page to **stop using the
deprecated `Identicon`** and instead render token images via the
design-system `AvatarToken` (`AvatarTokenSize.Xl`).
> 
> Also adjusts the token row layout by adding a `gap-2` spacing class
around the avatar/name block.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e7bf871. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: n3ps

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js

@@ -4,6 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import classnames from 'clsx';
 import { providerErrors, serializeError } from '@metamask/rpc-errors';
 import { ERC20 } from '@metamask/controller-utils';
+import { AvatarToken, AvatarTokenSize } from '@metamask/design-system-react';
 import {
   BannerAlert,
   Button,
@@ -16,7 +17,6 @@ import {
   TextAlign,
   Severity,
 } from '../../helpers/constants/design-system';
-import Identicon from '../../components/ui/identicon';
 import TokenBalance from '../../components/ui/token-balance';
 import { PageContainerFooter } from '../../components/ui/page-container';
 import { I18nContext } from '../../contexts/i18n';
@@ -207,12 +207,11 @@ const ConfirmAddSuggestedToken = () => {
                 className="confirm-add-suggested-token__token-list-item"
                 key={asset.address}
               >
-                <div className="confirm-add-suggested-token__token confirm-add-suggested-token__data">
-                  <Identicon
-                    className="confirm-add-suggested-token__token-icon"
-                    diameter={48}
-                    address={asset.address}
-                    image={asset.image}
+                <div className="confirm-add-suggested-token__token confirm-add-suggested-token__data gap-2">
+                  <AvatarToken
+                    size={AvatarTokenSize.Xl}
+                    src={asset.image}
+                    name={getTokenName(asset.name, asset.symbol)}
                   />
                   <div className="confirm-add-suggested-token__name">
                     {getTokenName(asset.name, asset.symbol)}