diff --git a/ui/hooks/useFiatFormatter.test.ts b/ui/hooks/useFiatFormatter.test.ts index d54ccbb9b5ba..eb4522e6a142 100644 --- a/ui/hooks/useFiatFormatter.test.ts +++ b/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'); diff --git a/ui/hooks/useFiatFormatter.ts b/ui/hooks/useFiatFormatter.ts index 4fd2ee36d040..45be75b6329b 100644 --- a/ui/hooks/useFiatFormatter.ts +++ b/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; diff --git a/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.test.tsx b/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.test.tsx index 832bf04fbd0d..7c2d4b584e4f 100644 --- a/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.test.tsx +++ b/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(); diff --git a/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx b/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx index 0cfa29fc819c..da01485d5fa2 100644 --- a/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx +++ b/ui/pages/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx @@ -122,6 +122,7 @@ export const MusdConversionInfo = () => { return ( { 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( + , + mockStore(state), + ); + + expect(getByTestId('transaction-fee-value')).toHaveTextContent('$1.23'); + }); + it('renders fee value with ConfirmInfoRowText for Default variant', () => { const { getByTestId } = render(); diff --git a/ui/pages/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx b/ui/pages/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx index b8a52104327b..27817b80687d 100644 --- a/ui/pages/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx +++ b/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(); diff --git a/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx b/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx index 3c03223be8d1..8f09de316262 100644 --- a/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx +++ b/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( + , + store, + ); + + expect(useFiatFormatterMock).toHaveBeenCalledWith({ + overrideCurrency: 'usd', + }); + }); + it('renders balance display', () => { const store = mockStore(getMockState()); renderWithProvider( diff --git a/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.tsx b/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.tsx index a42f521feef1..056123d7ac67 100644 --- a/ui/pages/confirmations/components/rows/pay-with-row/pay-with-row.tsx +++ b/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(); const from = currentConfirmation?.txParams?.from; diff --git a/ui/pages/confirmations/components/rows/total-row/total-row.test.tsx b/ui/pages/confirmations/components/rows/total-row/total-row.test.tsx index cd46fca7cc41..4b716ba3cb8d 100644 --- a/ui/pages/confirmations/components/rows/total-row/total-row.test.tsx +++ b/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( + , + mockStore(state), + ); + + expect(getByTestId('total-value')).toHaveTextContent('$123.46'); + }); + it('renders total value with ConfirmInfoRowText for Default variant', () => { const { getByTestId } = render(); diff --git a/ui/pages/confirmations/components/rows/total-row/total-row.tsx b/ui/pages/confirmations/components/rows/total-row/total-row.tsx index f0f4c51f79d0..c4c2ebe53470 100644 --- a/ui/pages/confirmations/components/rows/total-row/total-row.tsx +++ b/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();