Add testnet name as prefix for native currency of preloaded testnets (#14454)

* add testnet name as prefix for native currency of preloaded testnets

app/scripts/controllers/network/network.js

@@ -18,6 +18,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   INFURA_BLOCKED_KEY,
+  TEST_NETWORK_TICKER_MAP,
 } from '../../../../shared/constants/network';
 import { SECOND } from '../../../../shared/constants/time';
 import {
@@ -41,7 +42,11 @@ if (process.env.IN_TEST) {
     nickname: 'Localhost 8545',
   };
 } else if (process.env.METAMASK_DEBUG || env === 'test') {
-  defaultProviderConfigOpts = { type: RINKEBY, chainId: RINKEBY_CHAIN_ID };
+  defaultProviderConfigOpts = {
+    type: RINKEBY,
+    chainId: RINKEBY_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP.rinkeby,
+  };
 } else {
   defaultProviderConfigOpts = { type: MAINNET, chainId: MAINNET_CHAIN_ID };
 }
@@ -296,12 +301,12 @@ export default class NetworkController extends EventEmitter {
       INFURA_PROVIDER_TYPES.includes(type),
       `Unknown Infura provider type "${type}".`,
     );
-    const { chainId } = NETWORK_TYPE_TO_ID_MAP[type];
+    const { chainId, ticker } = NETWORK_TYPE_TO_ID_MAP[type];
     this.setProviderConfig({
       type,
       rpcUrl: '',
       chainId,
-      ticker: 'ETH',
+      ticker: ticker ?? 'ETH',
       nickname: '',
     });
   }

app/scripts/metamask-controller.js

@@ -396,7 +396,10 @@ export default class MetamaskController extends EventEmitter {
     this.currencyRateController = new CurrencyRateController({
       includeUSDRate: true,
       messenger: currencyRateMessenger,
-      state: initState.CurrencyController,
+      state: {
+        ...initState.CurrencyController,
+        nativeCurrency: this.networkController.providerStore.getState().ticker,
+      },
     });
 
     const tokenListMessenger = this.controllerMessenger.getRestricted({

shared/constants/network.js

@@ -1,3 +1,5 @@
+import { capitalize } from 'lodash';
+
 export const ROPSTEN = 'ropsten';
 export const RINKEBY = 'rinkeby';
 export const KOVAN = 'kovan';
@@ -79,16 +81,45 @@ export const TEST_CHAINS = [
   LOCALHOST_CHAIN_ID,
 ];
 
+export const TEST_NETWORK_TICKER_MAP = {
+  [ROPSTEN]: `${capitalize(ROPSTEN)}${ETH_SYMBOL}`,
+  [RINKEBY]: `${capitalize(RINKEBY)}${ETH_SYMBOL}`,
+  [KOVAN]: `${capitalize(KOVAN)}${ETH_SYMBOL}`,
+  [GOERLI]: `${capitalize(GOERLI)}${ETH_SYMBOL}`,
+};
+
 /**
- * Map of all build-in Infura networks to their network and chain IDs.
+ * Map of all build-in Infura networks to their network, ticker and chain IDs.
  */
 export const NETWORK_TYPE_TO_ID_MAP = {
-  [ROPSTEN]: { networkId: ROPSTEN_NETWORK_ID, chainId: ROPSTEN_CHAIN_ID },
-  [RINKEBY]: { networkId: RINKEBY_NETWORK_ID, chainId: RINKEBY_CHAIN_ID },
-  [KOVAN]: { networkId: KOVAN_NETWORK_ID, chainId: KOVAN_CHAIN_ID },
-  [GOERLI]: { networkId: GOERLI_NETWORK_ID, chainId: GOERLI_CHAIN_ID },
-  [MAINNET]: { networkId: MAINNET_NETWORK_ID, chainId: MAINNET_CHAIN_ID },
-  [LOCALHOST]: { networkId: LOCALHOST_NETWORK_ID, chainId: LOCALHOST_CHAIN_ID },
+  [ROPSTEN]: {
+    networkId: ROPSTEN_NETWORK_ID,
+    chainId: ROPSTEN_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[ROPSTEN],
+  },
+  [RINKEBY]: {
+    networkId: RINKEBY_NETWORK_ID,
+    chainId: RINKEBY_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[RINKEBY],
+  },
+  [KOVAN]: {
+    networkId: KOVAN_NETWORK_ID,
+    chainId: KOVAN_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[KOVAN],
+  },
+  [GOERLI]: {
+    networkId: GOERLI_NETWORK_ID,
+    chainId: GOERLI_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[GOERLI],
+  },
+  [MAINNET]: {
+    networkId: MAINNET_NETWORK_ID,
+    chainId: MAINNET_CHAIN_ID,
+  },
+  [LOCALHOST]: {
+    networkId: LOCALHOST_NETWORK_ID,
+    chainId: LOCALHOST_CHAIN_ID,
+  },
 };
 
 export const NETWORK_TO_NAME_MAP = {
@@ -207,19 +238,19 @@ export const BUYABLE_CHAINS_MAP = {
     },
   },
   [ROPSTEN_CHAIN_ID]: {
-    nativeCurrency: ETH_SYMBOL,
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[ROPSTEN],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
   [RINKEBY_CHAIN_ID]: {
-    nativeCurrency: ETH_SYMBOL,
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[RINKEBY],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
   [GOERLI_CHAIN_ID]: {
-    nativeCurrency: ETH_SYMBOL,
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[GOERLI],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
   [KOVAN_CHAIN_ID]: {
-    nativeCurrency: ETH_SYMBOL,
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[KOVAN],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
   [BSC_CHAIN_ID]: {

ui/components/ui/currency-display/index.scss

@@ -1,6 +1,7 @@
 .currency-display-component {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 
   &__text {
     /*rtl:ignore*/

ui/hooks/useCurrencyDisplay.js

@@ -11,6 +11,7 @@ import {
 } from '../ducks/metamask/metamask';
 
 import { conversionUtil } from '../../shared/modules/conversion.utils';
+import { TEST_NETWORK_TICKER_MAP } from '../../shared/constants/network';
 
 /**
  * Defines the shape of the options parameter for useCurrencyDisplay
@@ -95,7 +96,15 @@ export function useCurrencyDisplay(
   let suffix;
 
   if (!opts.hideLabel) {
-    suffix = opts.suffix || currency?.toUpperCase();
+    // if the currency we are displaying is the native currency of one of our preloaded test-nets (rinkeby, ropsten etc.)
+    // then we allow lowercase characters, otherwise we force to uppercase any suffix passed as a currency
+    const currencyTickerSymbol = Object.values(
+      TEST_NETWORK_TICKER_MAP,
+    ).includes(currency)
+      ? currency
+      : currency?.toUpperCase();
+
+    suffix = opts.suffix || currencyTickerSymbol;
   }
 
   return [

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

@@ -10,6 +10,8 @@ import {
   ROPSTEN,
   ROPSTEN_CHAIN_ID,
   getRpcUrl,
+  ETH_SYMBOL,
+  TEST_NETWORK_TICKER_MAP,
 } from '../../../../shared/constants/network';
 
 const defaultNetworksData = [
@@ -19,7 +21,7 @@ const defaultNetworksData = [
     providerType: MAINNET,
     rpcUrl: getRpcUrl({ network: MAINNET, excludeProjectId: true }),
     chainId: MAINNET_CHAIN_ID,
-    ticker: 'ETH',
+    ticker: ETH_SYMBOL,
     blockExplorerUrl: 'https://etherscan.io',
   },
   {
@@ -28,7 +30,7 @@ const defaultNetworksData = [
     providerType: ROPSTEN,
     rpcUrl: getRpcUrl({ network: ROPSTEN, excludeProjectId: true }),
     chainId: ROPSTEN_CHAIN_ID,
-    ticker: 'ETH',
+    ticker: TEST_NETWORK_TICKER_MAP[ROPSTEN],
     blockExplorerUrl: 'https://ropsten.etherscan.io',
   },
   {
@@ -37,7 +39,7 @@ const defaultNetworksData = [
     providerType: RINKEBY,
     rpcUrl: getRpcUrl({ network: RINKEBY, excludeProjectId: true }),
     chainId: RINKEBY_CHAIN_ID,
-    ticker: 'ETH',
+    ticker: TEST_NETWORK_TICKER_MAP[RINKEBY],
     blockExplorerUrl: 'https://rinkeby.etherscan.io',
   },
   {
@@ -46,7 +48,7 @@ const defaultNetworksData = [
     providerType: GOERLI,
     rpcUrl: getRpcUrl({ network: GOERLI, excludeProjectId: true }),
     chainId: GOERLI_CHAIN_ID,
-    ticker: 'ETH',
+    ticker: TEST_NETWORK_TICKER_MAP[GOERLI],
     blockExplorerUrl: 'https://goerli.etherscan.io',
   },
   {
@@ -55,7 +57,7 @@ const defaultNetworksData = [
     providerType: KOVAN,
     rpcUrl: getRpcUrl({ network: KOVAN, excludeProjectId: true }),
     chainId: KOVAN_CHAIN_ID,
-    ticker: 'ETH',
+    ticker: TEST_NETWORK_TICKER_MAP[KOVAN],
     blockExplorerUrl: 'https://kovan.etherscan.io',
   },
 ];