fix: suggested symbol is duplicated (#23169)

## **Description**

When you go to the popular network list, on an already existing network,
the "Suggested ticker symbol: [symbol name]" appears. This should only
appear with new added custom networks.

The suggestion is also duplicating the exact symbol that's been already
added.


## **Related issues**

Fixes: #22491 

## **Manual testing steps**

1. Go to popular network
2. Try to add one of them 
3. go to edit network form
4. the Symbol will be suggested

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->
<img width="1100" alt="Screenshot 2024-02-26 at 13 41 19"
src="https://github.com/MetaMask/metamask-extension/assets/26223211/0c8b2ad2-5415-4b2c-b529-574947a56146">


### **After**

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

<img width="1124" alt="Screenshot 2024-02-26 at 13 39 55"
src="https://github.com/MetaMask/metamask-extension/assets/26223211/8cf1ce5f-a955-474a-9951-0a55946209b2">

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -751,11 +751,12 @@ const NetworksForm = ({
         <FormTextField
           data-testid="network-form-ticker"
           helpText={
-            suggestedTicker ? (
+            suggestedTicker && suggestedTicker !== ticker ? (
               <Text
                 as="span"
                 variant={TextVariant.bodySm}
                 color={TextColor.textDefault}
+                data-testid="network-form-ticker-suggestion"
               >
                 {t('suggestedTokenSymbol')}
                 <ButtonLink

ui/pages/settings/networks-tab/networks-form/networks-form.test.js

@@ -8,6 +8,7 @@ import {
   NETWORK_TYPES,
   getRpcUrl,
 } from '../../../../../shared/constants/network';
+import * as fetchWithCacheModule from '../../../../../shared/lib/fetch-with-cache';
 import NetworksForm from '.';
 
 const renderComponent = (props) => {
@@ -292,4 +293,48 @@ describe('NetworkForm Component', () => {
       ),
     ).toBeInTheDocument();
   });
+
+  it('should not show suggested ticker and duplicating the exact symbol', async () => {
+    const safeChainsList = [
+      {
+        chainId: 42161,
+        nativeCurrency: {
+          symbol: 'ETH',
+        },
+      },
+    ];
+
+    // Mock the fetchWithCache function to return the safeChainsList
+    jest
+      .spyOn(fetchWithCacheModule, 'default')
+      .mockResolvedValue(safeChainsList);
+
+    renderComponent(propNewNetwork);
+
+    const chainIdField = screen.getByRole('textbox', { name: 'Chain ID' });
+    const currencySymbolField = screen.getByTestId('network-form-ticker-input');
+
+    fireEvent.change(chainIdField, {
+      target: { value: '42161' },
+    });
+
+    fireEvent.change(currencySymbolField, {
+      target: { value: 'abcd' },
+    });
+
+    const expectedSymbolWarning = 'Suggested ticker symbol:';
+    expect(await screen.findByText(expectedSymbolWarning)).toBeInTheDocument();
+
+    expect(
+      await screen.findByTestId('network-form-ticker-warning'),
+    ).toBeInTheDocument();
+
+    fireEvent.change(currencySymbolField, {
+      target: { value: 'ETH' },
+    });
+
+    expect(
+      await screen.findByTestId('network-form-ticker-warning'),
+    ).not.toBeInTheDocument();
+  });
 });