fix: use intl locale for compatibility with Intl.NumberFormat (#30113)

<!--
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**
The locale used in the bridge experience is not compatible with the
`Intl.NumberFormat` library, which causes the page to crash for certain
languages. We need to use the `getIntlLocale` selector instead

<!--
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/30113?quickstart=1)

## **Related issues**

Fixes:
https://app.intercom.com/a/inbox/txttgas6/inbox/conversation/833280?view=Table

## **Manual testing steps**

1. Select Portuguese (Brazilian) language
2. Request bridge quotes
3. Page should not crash

## **Screenshots/Recordings**

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

### **Before**


![image](https://github.com/user-attachments/assets/045c74fc-d939-4f85-8cb3-27298f91bcd9)

### **After**

![Screenshot 2025-02-04 at 10 07
05 AM](https://github.com/user-attachments/assets/0c665074-936d-4837-acce-8a3729b901c7)


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

test/jest/mock-store.js

@@ -736,6 +736,7 @@ export const createBridgeMockStore = (
       sortOrder: 'cost_ascending',
       ...bridgeSliceOverrides,
     },
+    localeMessages: { currentLocale: 'es_419' },
     metamask: {
       ...swapsStore.metamask,
       ...mockNetworkState(

ui/pages/bridge/prepare/bridge-input-group.tsx

@@ -13,7 +13,6 @@ import {
 import { AssetPicker } from '../../../components/multichain/asset-picker-amount/asset-picker';
 import { TabName } from '../../../components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-tabs';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { getLocale } from '../../../selectors';
 import { getCurrentCurrency } from '../../../ducks/metamask/metamask';
 import {
   formatCurrencyAmount,
@@ -40,6 +39,7 @@ import type { BridgeToken } from '../../../../shared/types/bridge';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { MINUTE } from '../../../../shared/constants/time';
 import { getMultichainIsSolana } from '../../../selectors/multichain';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 import { BridgeAssetPickerButton } from './components/bridge-asset-picker-button';
 
 export const BridgeInputGroup = ({
@@ -78,7 +78,7 @@ export const BridgeInputGroup = ({
   const { isInsufficientBalance, isEstimatedReturnLow } =
     useSelector(getValidationErrors);
   const currency = useSelector(getCurrentCurrency);
-  const locale = useSelector(getLocale);
+  const locale = useSelector(getIntlLocale);
 
   const selectedChainId = networkProps?.network?.chainId;
   const { balanceAmount } = useLatestBalance(token, selectedChainId);

ui/pages/bridge/prepare/prepare-bridge-page.tsx

@@ -87,11 +87,12 @@ import useRamps from '../../../hooks/ramps/useRamps/useRamps';
 import { getNativeCurrency } from '../../../ducks/metamask/metamask';
 import useLatestBalance from '../../../hooks/bridge/useLatestBalance';
 import { useCountdownTimer } from '../../../hooks/bridge/useCountdownTimer';
-import { getCurrentKeyring, getLocale, getTokenList } from '../../../selectors';
+import { getCurrentKeyring, getTokenList } from '../../../selectors';
 import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import { SECOND } from '../../../../shared/constants/time';
 import { BRIDGE_QUOTE_MAX_RETURN_DIFFERENCE_PERCENTAGE } from '../../../../shared/constants/bridge';
 import { getMultichainIsSolana } from '../../../selectors/multichain';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 import { BridgeInputGroup } from './bridge-input-group';
 import { BridgeCTAButton } from './bridge-cta-button';
 
@@ -143,7 +144,7 @@ const PrepareBridgePage = () => {
   const keyring = useSelector(getCurrentKeyring);
   // @ts-expect-error keyring type is wrong maybe?
   const isUsingHardwareWallet = isHardwareKeyring(keyring.type);
-  const locale = useSelector(getLocale);
+  const locale = useSelector(getIntlLocale);
 
   const ticker = useSelector(getNativeCurrency);
   const {

ui/pages/bridge/quotes/bridge-quote-card.tsx

@@ -48,7 +48,7 @@ import {
 import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
 import { decimalToPrefixedHex } from '../../../../shared/modules/conversion.utils';
 import { TERMS_OF_USE_LINK } from '../../../../shared/constants/terms';
-import { getLocale } from '../../../selectors';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 import { BridgeQuotesModal } from './bridge-quotes-modal';
 
 export const BridgeQuoteCard = () => {
@@ -65,7 +65,7 @@ export const BridgeQuoteCard = () => {
 
   const fromChain = useSelector(getFromChain);
   const toChain = useSelector(getToChain);
-  const locale = useSelector(getLocale);
+  const locale = useSelector(getIntlLocale);
 
   const [showAllQuotes, setShowAllQuotes] = useState(false);
   const [shouldShowNetworkFeesInGasToken, setShouldShowNetworkFeesInGasToken] =

ui/pages/bridge/quotes/bridge-quotes-modal.tsx

@@ -24,7 +24,6 @@ import {
   formatTokenAmount,
 } from '../utils/quote';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { getLocale } from '../../../selectors';
 import { setSelectedQuote, setSortOrder } from '../../../ducks/bridge/actions';
 import {
   type QuoteMetadata,
@@ -46,6 +45,7 @@ import { useRequestProperties } from '../../../hooks/bridge/events/useRequestPro
 import { useCrossChainSwapsEventTracker } from '../../../hooks/bridge/useCrossChainSwapsEventTracker';
 import { MetaMetricsEventName } from '../../../../shared/constants/metametrics';
 import { useTradeProperties } from '../../../hooks/bridge/events/useTradeProperties';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 
 export const BridgeQuotesModal = ({
   onClose,
@@ -59,7 +59,7 @@ export const BridgeQuotesModal = ({
   const sortOrder = useSelector(getBridgeSortOrder);
   const currency = useSelector(getCurrentCurrency);
   const nativeCurrency = useSelector(getNativeCurrency);
-  const locale = useSelector(getLocale);
+  const locale = useSelector(getIntlLocale);
 
   const trackCrossChainSwapsEvent = useCrossChainSwapsEventTracker();
   const { quoteRequestProperties } = useRequestProperties();