Merge pull request #24076 from MetaMask/Version-v11.14.1

Version-v11.14.1

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [11.14.1]
+### Fixed
+- Fix crashes on transaction screens for some users with es_419, pt_BR, pt_PT, zh_CN, zh_TW locales ([#24068](https://github.com/MetaMask/metamask-extension/pull/24068))
+
 ## [11.14.0]
 ### Added
 - Transaction Simulations
@@ -4606,7 +4610,8 @@ Update styles and spacing on the critical error page  ([#20350](https://github.c
 - Added the ability to restore accounts from seed words.
 
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.14.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v11.14.1...HEAD
+[11.14.1]: https://github.com/MetaMask/metamask-extension/compare/v11.14.0...v11.14.1
 [11.14.0]: https://github.com/MetaMask/metamask-extension/compare/v11.13.3...v11.14.0
 [11.13.3]: https://github.com/MetaMask/metamask-extension/compare/v11.13.2...v11.13.3
 [11.13.2]: https://github.com/MetaMask/metamask-extension/compare/v11.13.1...v11.13.2

app/scripts/metamask-controller.js

@@ -3502,14 +3502,6 @@ export default class MetamaskController extends EventEmitter {
       gasFeeStopPollingByPollingToken:
         gasFeeController.stopPollingByPollingToken.bind(gasFeeController),
 
-      getGasFeeEstimatesAndStartPolling:
-        gasFeeController.getGasFeeEstimatesAndStartPolling.bind(
-          gasFeeController,
-        ),
-
-      disconnectGasFeeEstimatePoller:
-        gasFeeController.disconnectPoller.bind(gasFeeController),
-
       getGasFeeTimeEstimate:
         gasFeeController.getTimeEstimate.bind(gasFeeController),
 
@@ -5665,7 +5657,6 @@ export default class MetamaskController extends EventEmitter {
    */
   onClientClosed() {
     try {
-      this.gasFeeController.stopPolling();
       this.gasFeeController.stopAllPolling();
       this.appStateController.clearPollingTokens();
     } catch (error) {
@@ -5685,7 +5676,6 @@ export default class MetamaskController extends EventEmitter {
     const pollingTokensToDisconnect =
       this.appStateController.store.getState()[appStatePollingTokenType];
     pollingTokensToDisconnect.forEach((pollingToken) => {
-      this.gasFeeController.disconnectPoller(pollingToken);
       this.gasFeeController.stopPollingByPollingToken(pollingToken);
       this.appStateController.removePollingToken(
         pollingToken,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "11.14.0",
+  "version": "11.14.1",
   "private": true,
   "repository": {
     "type": "git",

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js

@@ -57,11 +57,7 @@ jest.mock('../../../store/actions', () => ({
       chainId: '0x5',
     }),
   ),
-  disconnectGasFeeEstimatePoller: jest.fn(),
   getGasFeeTimeEstimate: jest.fn().mockImplementation(() => Promise.resolve()),
-  getGasFeeEstimatesAndStartPolling: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve()),
   addPollingTokenToAppState: jest.fn(),
   removePollingTokenFromAppState: jest.fn(),
   updateTransactionGasFees: () => ({ type: 'UPDATE_TRANSACTION_PARAMS' }),

ui/components/app/transaction-list-item/transaction-list-item.component.test.js

@@ -68,7 +68,6 @@ jest.mock('../../../hooks/useGasFeeEstimates', () => ({
 
 setBackgroundConnection({
   getGasFeeTimeEstimate: jest.fn(),
-  getGasFeeEstimatesAndStartPolling: jest.fn(),
 });
 
 jest.mock('react', () => {

ui/ducks/locale/locale.js

@@ -1,3 +1,4 @@
+import { createSelector } from 'reselect';
 import * as actionConstants from '../../store/actionConstants';
 
 export default function reduceLocaleMessages(state = {}, { type, payload }) {
@@ -13,8 +14,29 @@ export default function reduceLocaleMessages(state = {}, { type, payload }) {
   }
 }
 
+/**
+ * This selector returns a code from file://./../../../app/_locales/index.json.
+ *
+ * NOT SAFE FOR INTL API USE. Use getIntlLocale instead for that.
+ *
+ * @param state
+ * @returns {string} the user's selected locale.
+ * These codes are not safe to use with the Intl API.
+ */
 export const getCurrentLocale = (state) => state.localeMessages.currentLocale;
 
+/**
+ * This selector returns a
+ * [BCP 47 Language Tag](https://en.wikipedia.org/wiki/IETF_language_tag)
+ * for use with the Intl API.
+ *
+ * @returns {Intl.UnicodeBCP47LocaleIdentifier} the user's selected locale.
+ */
+export const getIntlLocale = createSelector(
+  getCurrentLocale,
+  (locale) => Intl.getCanonicalLocales(locale.replace(/_/gu, '-'))[0],
+);
+
 export const getCurrentLocaleMessages = (state) => state.localeMessages.current;
 
 export const getEnLocaleMessages = (state) => state.localeMessages.en;

ui/ducks/locale/locale.test.ts

@@ -0,0 +1,26 @@
+import locales from '../../../app/_locales/index.json';
+import { getIntlLocale } from './locale';
+
+const createMockStateWithLocale = (locale: string) => ({
+  localeMessages: { currentLocale: locale },
+});
+
+describe('getIntlLocale', () => {
+  it('returns the canonical BCP 47 language tag for the currently selected locale', () => {
+    const mockState = createMockStateWithLocale('ab-cd');
+
+    expect(getIntlLocale(mockState)).toBe('ab-CD');
+  });
+
+  it('throws an error if locale cannot be made into BCP 47 language tag', () => {
+    const mockState = createMockStateWithLocale('xxxinvalid-locale');
+
+    expect(() => getIntlLocale(mockState)).toThrow();
+  });
+
+  it.each(locales)('handles all supported locales – "%s"', (locale) => {
+    const mockState = createMockStateWithLocale(locale.code);
+
+    expect(() => getIntlLocale(mockState)).not.toThrow();
+  });
+});

ui/ducks/send/send.js

@@ -46,11 +46,10 @@ import {
   getSelectedInternalAccount,
   getSelectedInternalAccountWithBalance,
   getUnapprovedTransactions,
+  getSelectedNetworkClientId,
 } from '../../selectors';
 import {
-  disconnectGasFeeEstimatePoller,
   displayWarning,
-  getGasFeeEstimatesAndStartPolling,
   hideLoadingIndication,
   showLoadingIndication,
   updateEditableParams,
@@ -63,6 +62,8 @@ import {
   addTransactionAndRouteToConfirmationPage,
   updateTransactionSendFlowHistory,
   getCurrentNetworkEIP1559Compatibility,
+  gasFeeStopPollingByPollingToken,
+  gasFeeStartPollingByNetworkClientId,
 } from '../../store/actions';
 import { setCustomGasLimit } from '../gas/gas.duck';
 import {
@@ -598,6 +599,7 @@ export const initializeSendState = createAsyncThunk(
      */
     const state = thunkApi.getState();
     const isNonStandardEthChain = getIsNonStandardEthChain(state);
+    const selectedNetworkClientId = getSelectedNetworkClientId(state);
     const chainId = getCurrentChainId(state);
     let eip1559support = checkNetworkAndAccountSupports1559(state);
     if (eip1559support === undefined) {
@@ -629,7 +631,9 @@ export const initializeSendState = createAsyncThunk(
     let gasEstimatePollToken = null;
 
     // Instruct the background process that polling for gas prices should begin
-    gasEstimatePollToken = await getGasFeeEstimatesAndStartPolling();
+    gasEstimatePollToken = await gasFeeStartPollingByNetworkClientId(
+      selectedNetworkClientId,
+    );
 
     addPollingTokenToAppState(gasEstimatePollToken);
 
@@ -2281,7 +2285,7 @@ export function resetSendState() {
     dispatch(actions.resetSendState());
 
     if (state[name].gasEstimatePollToken) {
-      await disconnectGasFeeEstimatePoller(state[name].gasEstimatePollToken);
+      await gasFeeStopPollingByPollingToken(state[name].gasEstimatePollToken);
       removePollingTokenFromAppState(state[name].gasEstimatePollToken);
     }
   };

ui/ducks/send/send.test.js

@@ -130,8 +130,8 @@ describe('Send Slice', () => {
       .spyOn(Actions, 'estimateGas')
       .mockImplementation(() => Promise.resolve('0x0'));
     jest
-      .spyOn(Actions, 'getGasFeeEstimatesAndStartPolling')
-      .mockImplementation(() => Promise.resolve());
+      .spyOn(Actions, 'gasFeeStartPollingByNetworkClientId')
+      .mockImplementation(() => Promise.resolve('pollToken'));
     jest
       .spyOn(Actions, 'updateTokenType')
       .mockImplementation(() => Promise.resolve({ isERC721: false }));

ui/hooks/useFiatFormatter.test.ts

@@ -1,34 +1,30 @@
 import { renderHook } from '@testing-library/react-hooks';
-import { getCurrentLocale } from '../ducks/locale/locale';
+import { getIntlLocale } from '../ducks/locale/locale';
 import { getCurrentCurrency } from '../selectors';
 import { useFiatFormatter } from './useFiatFormatter';
 
-// Mock the getCurrentLocale and getCurrentCurrency functions
 jest.mock('react-redux', () => ({
   useSelector: jest.fn((selector) => selector()),
 }));
 
 jest.mock('../ducks/locale/locale', () => ({
-  getCurrentLocale: jest.fn(),
+  getIntlLocale: jest.fn(),
 }));
 
 jest.mock('../selectors', () => ({
   getCurrentCurrency: jest.fn(),
 }));
 
-const mockGetCurrentLocale = getCurrentLocale as jest.Mock;
+const mockGetIntlLocale = getIntlLocale as unknown as jest.Mock;
 const mockGetCurrentCurrency = getCurrentCurrency as jest.Mock;
 
 describe('useFiatFormatter', () => {
   beforeEach(() => {
-    // Clear the mock implementations before each test
-    mockGetCurrentLocale.mockClear();
-    mockGetCurrentCurrency.mockClear();
+    jest.clearAllMocks();
   });
 
   it('should return a function that formats fiat amount correctly', () => {
-    // Mock the getCurrentLocale and getCurrentCurrency functions
-    mockGetCurrentLocale.mockReturnValue('en-US');
+    mockGetIntlLocale.mockReturnValue('en-US');
     mockGetCurrentCurrency.mockReturnValue('USD');
 
     const { result } = renderHook(() => useFiatFormatter());
@@ -40,13 +36,12 @@ describe('useFiatFormatter', () => {
   });
 
   it('should use the current locale and currency from the mocked functions', () => {
-    // Mock the getCurrentLocale and getCurrentCurrency functions
-    mockGetCurrentLocale.mockReturnValue('fr-FR');
+    mockGetIntlLocale.mockReturnValue('fr-FR');
     mockGetCurrentCurrency.mockReturnValue('EUR');
 
     renderHook(() => useFiatFormatter());
 
-    expect(getCurrentLocale).toHaveBeenCalledTimes(1);
+    expect(getIntlLocale).toHaveBeenCalledTimes(1);
     expect(getCurrentCurrency).toHaveBeenCalledTimes(1);
   });
 });

ui/hooks/useFiatFormatter.ts

@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux';
-import { getCurrentLocale } from '../ducks/locale/locale';
+import { getIntlLocale } from '../ducks/locale/locale';
 import { getCurrentCurrency } from '../selectors';
 
 /**
@@ -18,7 +18,7 @@ import { getCurrentCurrency } from '../selectors';
 type FiatFormatter = (fiatAmount: number) => string;
 
 export const useFiatFormatter = (): FiatFormatter => {
-  const locale = useSelector(getCurrentLocale);
+  const locale = useSelector(getIntlLocale);
   const fiatCurrency = useSelector(getCurrentCurrency);
 
   return (fiatAmount: number) => {

ui/pages/confirmations/components/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.test.js

@@ -14,8 +14,6 @@ jest.mock('../../../../../store/actions', () => ({
       chainId: '0x5',
     }),
   ),
-  disconnectGasFeeEstimatePoller: jest.fn(),
-  getGasFeeEstimatesAndStartPolling: jest.fn().mockResolvedValue(null),
   addPollingTokenToAppState: jest.fn(),
   removePollingTokenFromAppState: jest.fn(),
 }));

ui/pages/confirmations/components/confirm-page-container/confirm-page-container-container.test.js

@@ -159,10 +159,6 @@ const props = {
 };
 
 jest.mock('../../../../store/actions', () => ({
-  disconnectGasFeeEstimatePoller: jest.fn(),
-  getGasFeeEstimatesAndStartPolling: jest
-    .fn()
-    .mockImplementation(() => Promise.resolve()),
   getNetworkConfigurationByNetworkClientId: jest.fn().mockImplementation(() => {
     return Promise.resolve({ chainId: '0x5' });
   }),