fix: provide better native token names when bridging and swapping on networks removed

Author: Prithpal-Sooriya

ui/selectors/selectors.js

@@ -67,6 +67,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,
@@ -797,11 +799,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;
@@ -814,6 +817,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;
@@ -827,6 +831,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

@@ -2396,3 +2396,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',
+    });
+  });
+});