fix: display USD only in MM Pay confirmation screens cp-13.28.0

ui/hooks/useFiatFormatter.test.ts

@@ -97,6 +97,19 @@ describe('useFiatFormatter', () => {
     expect(getCurrentCurrency).toHaveBeenCalledTimes(1);
   });
 
+  it('uses overrideCurrency instead of Redux currency when provided', () => {
+    mockGetIntlLocale.mockReturnValue('en-US');
+    mockGetCurrentCurrency.mockReturnValue('EUR');
+
+    const { result } = renderHook(() =>
+      useFiatFormatter({ overrideCurrency: 'usd' }),
+    );
+    const formatFiat = result.current;
+
+    expect(formatFiat(1.23)).toBe('$1.23');
+    expect(formatFiat(0)).toBe('$0.00');
+  });
+
   it('should gracefully handle unknown currencies by returning amount followed by currency code', () => {
     mockGetCurrentCurrency.mockReturnValue('storj');
     mockGetIntlLocale.mockReturnValue('en-US');

ui/hooks/useFiatFormatter.ts

@@ -34,9 +34,16 @@ type FiatFormatter = (
   options?: FiatFormatterOptions,
 ) => string;
 
-export const useFiatFormatter = (): FiatFormatter => {
+type UseFiatFormatterOptions = {
+  overrideCurrency?: string;
+};
+
+export const useFiatFormatter = (
+  hookOptions?: UseFiatFormatterOptions,
+): FiatFormatter => {
   const locale = useSelector(getIntlLocale);
-  const fiatCurrency = useSelector(getCurrentCurrency);
+  const reduxCurrency = useSelector(getCurrentCurrency);
+  const fiatCurrency = hookOptions?.overrideCurrency ?? reduxCurrency;
 
   return (fiatAmount: number, options: FiatFormatterOptions = {}) => {
     const { shorten, truncatedCharLimit, truncatedStartChars } = options;

ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.test.tsx

@@ -245,6 +245,14 @@ describe('MusdConversionInfo', () => {
     );
   });
 
+  it('passes usd as currency to CustomAmountInfo so the hero symbol is always $', () => {
+    render();
+
+    expect(
+      useTransactionCustomAmountModule.useTransactionCustomAmount,
+    ).toHaveBeenCalledWith(expect.objectContaining({ currency: 'usd' }));
+  });
+
   it('renders the custom amount input', () => {
     const { getByTestId } = render();
 

ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx

@@ -122,6 +122,7 @@ export const MusdConversionInfo = () => {
 
   return (
     <CustomAmountInfo
+      currency="usd"
       disableAutomaticToken={true}
       preferredToken={preferredToken}
       hasMax={true}

ui/pages/confirmations/components/rows/bridge-fee-row/bridge-fee-row.test.tsx

@@ -166,6 +166,18 @@ describe('BridgeFeeRow', () => {
     expect(queryByTestId('bridge-fee-row-tooltip')).not.toBeInTheDocument();
   });
 
+  it('always renders fee in USD even when user currency is EUR', () => {
+    const state = getMockPersonalSignConfirmState({
+      metamask: { currentCurrency: 'eur' },
+    });
+    const { getByTestId } = renderWithConfirmContextProvider(
+      <BridgeFeeRow />,
+      mockStore(state),
+    );
+
+    expect(getByTestId('transaction-fee-value')).toHaveTextContent('$1.23');
+  });
+
   it('renders fee value with ConfirmInfoRowText for Default variant', () => {
     const { getByTestId } = render();
 

ui/pages/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx

@@ -35,7 +35,7 @@ export function BridgeFeeRow({
   tooltipDescription,
 }: BridgeFeeRowProps) {
   const t = useI18nContext();
-  const formatFiat = useFiatFormatter();
+  const formatFiat = useFiatFormatter({ overrideCurrency: 'usd' });
   const isLoading = useIsTransactionPayLoading();
   const quotes = useTransactionPayQuotes();
   const totals = useTransactionPayTotals();

ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx

@@ -279,6 +279,18 @@ describe('PayWithRow', () => {
       expect(screen.getByTestId('pay-with-row')).toBeInTheDocument();
     });
 
+    it('formats balance in USD regardless of user currency', () => {
+      const store = mockStore(getMockState());
+      renderWithProvider(
+        <PayWithRow variant={ConfirmInfoRowSize.Small} />,
+        store,
+      );
+
+      expect(useFiatFormatterMock).toHaveBeenCalledWith({
+        overrideCurrency: 'usd',
+      });
+    });
+
     it('renders balance display', () => {
       const store = mockStore(getMockState());
       renderWithProvider(

ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.tsx

@@ -87,7 +87,7 @@ export function PayWithRow({
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { payToken } = useTransactionPayToken();
   const requiredTokens = useTransactionPayRequiredTokens();
-  const fiatFormatter = useFiatFormatter();
+  const fiatFormatter = useFiatFormatter({ overrideCurrency: 'usd' });
 
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
   const from = currentConfirmation?.txParams?.from;

ui/pages/confirmations/components/rows/total-row/total-row.test.tsx

@@ -58,6 +58,18 @@ describe('TotalRow', () => {
     expect(queryByText(messages.total.message)).not.toBeInTheDocument();
   });
 
+  it('always renders total in USD even when user currency is EUR', () => {
+    const state = getMockPersonalSignConfirmState({
+      metamask: { currentCurrency: 'eur' },
+    });
+    const { getByTestId } = renderWithConfirmContextProvider(
+      <TotalRow />,
+      mockStore(state),
+    );
+
+    expect(getByTestId('total-value')).toHaveTextContent('$123.46');
+  });
+
   it('renders total value with ConfirmInfoRowText for Default variant', () => {
     const { getByTestId } = render();
 

ui/pages/confirmations/components/rows/total-row/total-row.tsx

@@ -27,7 +27,7 @@ export function TotalRow({
   variant = ConfirmInfoRowSize.Default,
 }: TotalRowProps) {
   const t = useI18nContext();
-  const formatFiat = useFiatFormatter();
+  const formatFiat = useFiatFormatter({ overrideCurrency: 'usd' });
   const isLoading = useIsTransactionPayLoading();
   const totals = useTransactionPayTotals();