Use useTokenFiatRates

Author: OGPoyraz

app/components/Views/confirmations/hooks/pay/useAssetFiatFormatter.test.ts

@@ -3,11 +3,7 @@ import { useSelector } from 'react-redux';
 
 import { useAssetFiatFormatter } from './useAssetFiatFormatter';
 import { useTransactionPayCurrency } from './useTransactionPayCurrency';
-import {
-  selectCurrencyRates,
-  selectCurrentCurrency,
-} from '../../../../../selectors/currencyRateController';
-import { selectEvmNetworkConfigurationsByChainId } from '../../../../../selectors/networkController';
+import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
 import { getIntlNumberFormatter } from '../../../../../util/intl';
 
 jest.mock('react-redux', () => ({
@@ -20,11 +16,6 @@ jest.mock('./useTransactionPayCurrency', () => ({
 
 jest.mock('../../../../../selectors/currencyRateController', () => ({
   selectCurrentCurrency: jest.fn(),
-  selectCurrencyRates: jest.fn(),
-}));
-
-jest.mock('../../../../../selectors/networkController', () => ({
-  selectEvmNetworkConfigurationsByChainId: jest.fn(),
 }));
 
 jest.mock('../../../../../util/intl', () => ({
@@ -42,19 +33,9 @@ const mockGetIntlNumberFormatter = jest.mocked(getIntlNumberFormatter);
 
 const mockFormatter = { format: jest.fn() };
 
-function buildState({
-  preferredCurrency = 'usd',
-  currencyRates = {} as Record<
-    string,
-    { conversionRate?: number; usdConversionRate?: number }
-  >,
-  networkConfigs = {} as Record<string, { nativeCurrency: string }>,
-} = {}) {
+function buildState({ preferredCurrency = 'usd' } = {}) {
   mockUseSelector.mockImplementation((selector) => {
     if (selector === selectCurrentCurrency) return preferredCurrency;
-    if (selector === selectCurrencyRates) return currencyRates;
-    if (selector === selectEvmNetworkConfigurationsByChainId)
-      return networkConfigs;
     return undefined;
   });
 }
@@ -69,212 +50,94 @@ describe('useAssetFiatFormatter', () => {
     mockFormatter.format.mockImplementation((n) => `formatted:${String(n)}`);
   });
 
-  describe('outside pay flow', () => {
-    it('formats using the preferred currency', () => {
+  describe('fiatCurrency selection', () => {
+    it('uses the preferred currency outside pay flow', () => {
       buildState({ preferredCurrency: 'eur' });
 
       const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('100', '0x1');
 
-      expect(mockGetIntlNumberFormatter).toHaveBeenCalledWith(
-        'en-US',
-        expect.objectContaining({ style: 'currency', currency: 'eur' }),
-      );
-      expect(mockFormatter.format).toHaveBeenCalledWith('100');
-      expect(output).toBe('formatted:100');
+      expect(result.current.fiatCurrency).toBe('eur');
     });
 
-    it('exposes the fiatCurrency being used', () => {
+    it('uses the pay currency when useTransactionPayCurrency returns a value', () => {
       buildState({ preferredCurrency: 'eur' });
+      mockUseTransactionPayCurrency.mockReturnValue('USD');
 
       const { result } = renderHook(() => useAssetFiatFormatter());
-      expect(result.current.fiatCurrency).toBe('eur');
+
+      expect(result.current.fiatCurrency).toBe('USD');
     });
+  });
 
-    it('uses minimumFractionDigits=0 for integer amounts', () => {
+  describe('format', () => {
+    it('formats a numeric amount using Intl currency', () => {
       buildState({ preferredCurrency: 'eur' });
 
-      renderHook(() => useAssetFiatFormatter()).result.current.format(
-        '100',
-        '0x1',
-      );
+      const { result } = renderHook(() => useAssetFiatFormatter());
+      const output = result.current.format('100');
 
       expect(mockGetIntlNumberFormatter).toHaveBeenCalledWith(
         'en-US',
-        expect.objectContaining({ minimumFractionDigits: 0 }),
+        expect.objectContaining({ style: 'currency', currency: 'eur' }),
       );
+      expect(mockFormatter.format).toHaveBeenCalledWith('100');
+      expect(output).toBe('formatted:100');
     });
 
-    it('uses minimumFractionDigits=2 for non-integer amounts', () => {
+    it('formats with the pay currency when in pay flow', () => {
       buildState({ preferredCurrency: 'eur' });
+      mockUseTransactionPayCurrency.mockReturnValue('USD');
 
-      renderHook(() => useAssetFiatFormatter()).result.current.format(
-        '100.5',
-        '0x1',
-      );
+      const { result } = renderHook(() => useAssetFiatFormatter());
+      result.current.format('110');
 
       expect(mockGetIntlNumberFormatter).toHaveBeenCalledWith(
         'en-US',
-        expect.objectContaining({ minimumFractionDigits: 2 }),
+        expect.objectContaining({ currency: 'USD' }),
       );
+      expect(mockFormatter.format).toHaveBeenCalledWith('110');
     });
 
-    it('treats undefined/null balances as zero', () => {
+    it('uses minimumFractionDigits=0 for integer amounts', () => {
       buildState({ preferredCurrency: 'eur' });
 
-      renderHook(() => useAssetFiatFormatter()).result.current.format(
-        undefined,
-        '0x1',
-      );
-
-      expect(mockFormatter.format).toHaveBeenCalledWith('0');
-    });
-  });
-
-  describe('pay flow (USD forced, preferred is EUR)', () => {
-    const eurUsdRates = {
-      ETH: { conversionRate: 2000, usdConversionRate: 2200 },
-    };
-    const ethChainConfig = { '0x1': { nativeCurrency: 'ETH' } };
-
-    beforeEach(() => {
-      mockUseTransactionPayCurrency.mockReturnValue('USD');
-    });
-
-    it('re-scales the amount by usdRate/preferredRate', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: eurUsdRates,
-        networkConfigs: ethChainConfig,
-      });
-
-      renderHook(() => useAssetFiatFormatter()).result.current.format(
-        '100',
-        '0x1',
-      );
+      renderHook(() => useAssetFiatFormatter()).result.current.format('100');
 
-      // 100 EUR * (2200 USD/ETH / 2000 EUR/ETH) = 110 USD
-      expect(mockFormatter.format).toHaveBeenCalledWith('110');
       expect(mockGetIntlNumberFormatter).toHaveBeenCalledWith(
         'en-US',
-        expect.objectContaining({ currency: 'USD' }),
+        expect.objectContaining({ minimumFractionDigits: 0 }),
       );
     });
 
-    it('exposes fiatCurrency as USD', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: eurUsdRates,
-        networkConfigs: ethChainConfig,
-      });
-
-      const { result } = renderHook(() => useAssetFiatFormatter());
-      expect(result.current.fiatCurrency).toBe('USD');
-    });
-
-    it('returns undefined when usdConversionRate is missing', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: { ETH: { conversionRate: 2000 } },
-        networkConfigs: ethChainConfig,
-      });
-
-      const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('100', '0x1');
-
-      expect(output).toBeUndefined();
-      expect(mockFormatter.format).not.toHaveBeenCalled();
-    });
-
-    it('returns undefined when preferred conversionRate is missing', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: { ETH: { usdConversionRate: 2200 } },
-        networkConfigs: ethChainConfig,
-      });
-
-      const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('100', '0x1');
-
-      expect(output).toBeUndefined();
-      expect(mockFormatter.format).not.toHaveBeenCalled();
-    });
-
-    it('returns undefined when chain has no EVM network config', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: eurUsdRates,
-        networkConfigs: {},
-      });
-
-      const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('100', '0x1');
-
-      expect(output).toBeUndefined();
-      expect(mockFormatter.format).not.toHaveBeenCalled();
-    });
-
-    it('formats zero even when rates or chain config are missing', () => {
-      buildState({
-        preferredCurrency: 'eur',
-        currencyRates: {},
-        networkConfigs: {},
-      });
+    it('uses minimumFractionDigits=2 for non-integer amounts', () => {
+      buildState({ preferredCurrency: 'eur' });
 
-      const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format(0, undefined);
+      renderHook(() => useAssetFiatFormatter()).result.current.format('100.5');
 
-      expect(output).toBe('formatted:0');
       expect(mockGetIntlNumberFormatter).toHaveBeenCalledWith(
         'en-US',
-        expect.objectContaining({ currency: 'USD' }),
-      );
-    });
-  });
-
-  describe('pay flow (USD forced, preferred is already USD)', () => {
-    it('does not re-scale (identity), so numeric value is unchanged', () => {
-      mockUseTransactionPayCurrency.mockReturnValue('USD');
-      buildState({
-        preferredCurrency: 'usd',
-        currencyRates: {
-          ETH: { conversionRate: 2200, usdConversionRate: 2200 },
-        },
-        networkConfigs: { '0x1': { nativeCurrency: 'ETH' } },
-      });
-
-      renderHook(() => useAssetFiatFormatter()).result.current.format(
-        '100',
-        '0x1',
+        expect.objectContaining({ minimumFractionDigits: 2 }),
       );
-
-      expect(mockFormatter.format).toHaveBeenCalledWith('100');
     });
 
-    it('still formats when currency rates are missing (no conversion needed)', () => {
-      mockUseTransactionPayCurrency.mockReturnValue('USD');
-      buildState({
-        preferredCurrency: 'usd',
-        currencyRates: {},
-        networkConfigs: {},
-      });
+    it('returns undefined when input is undefined', () => {
+      buildState({ preferredCurrency: 'eur' });
 
       const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('100', '0x1');
+      const output = result.current.format(undefined);
 
-      expect(output).toBe('formatted:100');
+      expect(output).toBeUndefined();
+      expect(mockFormatter.format).not.toHaveBeenCalled();
     });
-  });
 
-  describe('formatter error fallback', () => {
     it('falls back to `${value} ${currency}` when Intl throws', () => {
       buildState({ preferredCurrency: 'eur' });
       mockGetIntlNumberFormatter.mockImplementation(() => {
         throw new Error('boom');
       });
 
       const { result } = renderHook(() => useAssetFiatFormatter());
-      const output = result.current.format('42', '0x1');
+      const output = result.current.format('42');
 
       expect(output).toBe('42 eur');
     });