fix: provide better native token names when bridging and swapping removed networks (#32293) cp-12.17.0 (#32300)

CP: #32293
<!--
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**

This ensures we handle better native token display names when you bridge
or swap tokens for networks you have removed or not added.

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/32293?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-2293

## **Manual testing steps**

1. Add BASE network (if you have native tokens in base, otherwise use a
different network you have native tokens for)
2. Try to bridge to BASE - you should see the native token
3. Remove BASE
4. Try to bridge to BASE - you should see the correct native token still
displayed

## **Screenshots/Recordings**

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

### **Before**

https://www.loom.com/share/812617be0e6e4101b777ff56c367ce0a

### **After**



https://www.loom.com/share/1df5613c2b274314b2839bc143a3cbad?sid=a7776357-eab8-473d-b2a6-2da71f3c4107

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] 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/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.

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

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

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

---------

Co-authored-by: Prithpal Sooriya <prithpal.sooriya@gmail.com>

Author: DDDDDanica

CHANGELOG.md

@@ -113,6 +113,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix: Removed timeout for messages requiring user actions ([#32046](https://github.com/MetaMask/metamask-extension/pull/32046))
 - Fix: Unable to send transaction low / high nonce transaction on any network when STX is enabled ([#32244](https://github.com/MetaMask/metamask-extension/pull/32244))
 - Fix: Ensure no duplicate accounts are persisted ([#32287](https://github.com/MetaMask/metamask-extension/pull/32287))
+- Fix: provide better native token names when bridging and swapping removed networks([#32293](https://github.com/MetaMask/metamask-extension/pull/32293))
 
 ## [12.16.1]
 ### Added

ui/selectors/selectors.js

@@ -63,6 +63,8 @@ import {
   MOONRIVER_DISPLAY_NAME,
   TEST_NETWORK_IDS,
   FEATURED_NETWORK_CHAIN_IDS,
+  CHAIN_ID_TO_CURRENCY_SYMBOL_MAP,
+  NETWORK_TO_NAME_MAP,
 } from '../../shared/constants/network';
 import {
   WebHIDConnectedStatuses,
@@ -792,11 +794,12 @@ export function getTokensAcrossChainsByAccountAddress(state, selectedAddress) {
  * @param {string} chainId - Chain ID
  * @returns {object} Native token information
  */
-function getNativeTokenInfo(state, chainId) {
+export function getNativeTokenInfo(state, chainId) {
   const { networkConfigurationsByChainId } = state.metamask;
 
   const networkConfig = networkConfigurationsByChainId?.[chainId];
 
+  // Fill native token info by network config (if a user has a network added)
   if (networkConfig) {
     const symbol = networkConfig.nativeCurrency || AssetType.native;
     const decimals = 18;
@@ -809,6 +812,7 @@ function getNativeTokenInfo(state, chainId) {
     };
   }
 
+  // Fill native token info by DApp provider
   const { provider } = state.metamask;
   if (provider?.chainId === chainId) {
     const symbol = provider.ticker || AssetType.native;
@@ -822,6 +826,14 @@ function getNativeTokenInfo(state, chainId) {
     };
   }
 
+  // Attempt to retried native token info from hardcoded known networks
+  const hardcodedSymbol = CHAIN_ID_TO_CURRENCY_SYMBOL_MAP[chainId];
+  const hardcodedName = NETWORK_TO_NAME_MAP[chainId];
+  if (hardcodedSymbol && hardcodedName) {
+    return { symbol: hardcodedSymbol, decimals: 18, name: hardcodedName };
+  }
+
+  // Fallback to "NATIVE" symbol as this is an unknown native token
   return { symbol: AssetType.native, decimals: 18, name: 'Native Token' };
 }
 

ui/selectors/selectors.test.js

@@ -2386,3 +2386,101 @@ describe('#getConnectedSitesList', () => {
     });
   });
 });
+
+describe('getNativeTokenInfo', () => {
+  const arrange = () => {
+    const state = {
+      metamask: {
+        networkConfigurationsByChainId: {},
+        provider: {},
+      },
+    };
+
+    return { state };
+  };
+
+  it('provides native token info from a network a user has added', () => {
+    const mocks = arrange();
+    mocks.state.metamask.networkConfigurationsByChainId['0x1337'] = {
+      nativeCurrency: 'HELLO',
+      name: 'MyToken',
+    };
+
+    const result = selectors.getNativeTokenInfo(mocks.state, '0x1337');
+    expect(result).toStrictEqual({
+      symbol: 'HELLO',
+      decimals: 18,
+      name: 'MyToken',
+    });
+  });
+
+  it('provides native token info from a network added but with fallbacks for missing fields', () => {
+    const mocks = arrange();
+    mocks.state.metamask.networkConfigurationsByChainId['0x1337'] = {
+      nativeCurrency: undefined,
+      name: undefined,
+    };
+
+    const result = selectors.getNativeTokenInfo(mocks.state, '0x1337');
+    expect(result).toStrictEqual({
+      symbol: 'NATIVE',
+      decimals: 18,
+      name: 'Native Token',
+    });
+  });
+
+  it('provides native token from DApp provider', () => {
+    const mocks = arrange();
+    mocks.state.metamask.provider = {
+      chainId: '0x1337',
+      ticker: 'HELLO',
+      nativeCurrency: { decimals: 18 },
+      nickname: 'MyToken',
+    };
+
+    const result = selectors.getNativeTokenInfo(mocks.state, '0x1337');
+    expect(result).toStrictEqual({
+      symbol: 'HELLO',
+      decimals: 18,
+      name: 'MyToken',
+    });
+  });
+
+  it('provides native token from DApp provider but with fallbacks for missing fields', () => {
+    const mocks = arrange();
+    mocks.state.metamask.provider = {
+      chainId: '0x1337',
+      ticker: undefined,
+      nativeCurrency: undefined,
+      nickname: undefined,
+    };
+
+    const result = selectors.getNativeTokenInfo(mocks.state, '0x1337');
+    expect(result).toStrictEqual({
+      symbol: 'NATIVE',
+      decimals: 18,
+      name: 'Native Token',
+    });
+  });
+
+  it('provides native token from known list of hardcoded native tokens', () => {
+    const mocks = arrange();
+
+    const result = selectors.getNativeTokenInfo(mocks.state, '0x89');
+    expect(result).toStrictEqual({
+      symbol: 'POL',
+      decimals: 18,
+      name: 'Polygon',
+    });
+  });
+
+  it('fallbacks for unknown native token info', () => {
+    const mocks = arrange();
+    const result = selectors.getNativeTokenInfo(mocks.state, '0xFakeToken');
+    expect(result).toStrictEqual({
+      symbol: 'NATIVE',
+      decimals: 18,
+      name: 'Native Token',
+    });
+  });
+});