Use network provider state, instead of CurrencyRateController state, to select 'nativeCurrency' (#17450)

* Use network provider state, instead of CurrencyRateController state, select 'nativeCurrency'

* Fix unit tests

* Lint fix

* Only use the network provider ticket for the native currency when useCurrencyRateCheck is false

* Fix unit test

* Fix tests for real

test/data/mock-state.json

@@ -74,7 +74,8 @@
     "network": "5",
     "provider": {
       "type": "rpc",
-      "chainId": "0x5"
+      "chainId": "0x5",
+      "ticker": "ETH"
     },
     "keyrings": [
       {

ui/components/app/transaction-activity-log/transaction-activity-log.container.test.js

@@ -18,6 +18,9 @@ describe('TransactionActivityLog container', () => {
           conversionRate: 280.45,
           nativeCurrency: 'ETH',
           frequentRpcListDetail: [],
+          provider: {
+            ticker: 'ETH',
+          },
         },
       };
 
@@ -43,6 +46,7 @@ describe('TransactionActivityLog container', () => {
           ],
           provider: {
             rpcUrl: 'https://customnetwork.com/',
+            ticker: 'ETH',
           },
         },
       };

ui/ducks/confirm-transaction/confirm-transaction.duck.test.js

@@ -290,6 +290,9 @@ describe('Confirm Transaction Duck', () => {
         metamask: {
           conversionRate: 468.58,
           currentCurrency: 'usd',
+          provider: {
+            ticker: 'ETH',
+          },
         },
         confirmTransaction: {
           ethTransactionAmount: '1',

ui/ducks/metamask/metamask.js

@@ -10,6 +10,7 @@ import {
   accountsWithSendEtherInfoSelector,
   checkNetworkAndAccountSupports1559,
   getAddressBook,
+  getUseCurrencyRateCheck,
 } from '../../selectors';
 import { updateTransactionGasFees } from '../../store/actions';
 import { setCustomGasLimit, setCustomGasPrice } from '../gas/gas.duck';
@@ -307,7 +308,10 @@ export function getConversionRate(state) {
 }
 
 export function getNativeCurrency(state) {
-  return state.metamask.nativeCurrency;
+  const useCurrencyRateCheck = getUseCurrencyRateCheck(state);
+  return useCurrencyRateCheck
+    ? state.metamask.nativeCurrency
+    : state.metamask.provider.ticker;
 }
 
 export function getSendHexDataFeatureFlagState(state) {

ui/ducks/metamask/metamask.test.js

@@ -40,10 +40,12 @@ describe('MetaMask Reducers', () => {
         currentBlockGasLimit: '0x4c1878',
         conversionRate: 1200.88200327,
         nativeCurrency: 'ETH',
+        useCurrencyRateCheck: true,
         network: '5',
         provider: {
           type: 'testnet',
           chainId: '0x5',
+          ticker: 'TestETH',
         },
         accounts: {
           '0xfdea65c8e26263f6d9a1b5de9555d2931a33b825': {
@@ -308,9 +310,21 @@ describe('MetaMask Reducers', () => {
     });
 
     describe('getNativeCurrency()', () => {
-      it('should return the ticker symbol of the selected network', () => {
+      it('should return nativeCurrency when useCurrencyRateCheck is true', () => {
         expect(getNativeCurrency(mockState)).toStrictEqual('ETH');
       });
+
+      it('should return the ticker symbol of the selected network when useCurrencyRateCheck is false', () => {
+        expect(
+          getNativeCurrency({
+            ...mockState,
+            metamask: {
+              ...mockState.metamask,
+              useCurrencyRateCheck: false,
+            },
+          }),
+        ).toStrictEqual('TestETH');
+      });
     });
 
     describe('getSendHexDataFeatureFlagState()', () => {

ui/pages/send/gas-display/gas-display.js

@@ -60,9 +60,8 @@ export default function GasDisplay({ gasError }) {
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
   const { showFiatInTestnets, useNativeCurrencyAsPrimaryCurrency } =
     useSelector(getPreferences);
-  const { nativeCurrency, provider, unapprovedTxs } = useSelector(
+  const { provider, unapprovedTxs } = useSelector((state) => state.metamask);
-    (state) => state.metamask,
+  const nativeCurrency = provider.ticker;
-  );
   const { chainId } = provider;
   const networkName = NETWORK_TO_NAME_MAP[chainId];
   const isInsufficientTokenError =

ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap

@@ -31,10 +31,8 @@ exports[`SendContent Component render should match snapshot 1`] = `
                 <div
                   class="send-v2__asset-dropdown__asset-icon"
                 >
-                  <img
+                  <div
-                    alt=""
+                    class="identicon__image-border"
-                    class="identicon"
-                    src="./images/eth_logo.svg"
                     style="height: 36px; width: 36px; border-radius: 18px;"
                   />
                 </div>
@@ -43,9 +41,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                 >
                   <div
                     class="send-v2__asset-dropdown__symbol"
-                  >
+                  />
-                    ETH
-                  </div>
                   <div
                     class="send-v2__asset-dropdown__name"
                   >