fix: cp-7.55.0 currency conversion and display on amount page

app/components/Views/confirmations/components/send/amount/amount.styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { Theme } from '../../../../../../util/theme/models';
 import {
@@ -7,23 +7,20 @@ import {
   JustifyContent,
 } from '../../../../../UI/Box/box.types';
 
-export const getFontSizeForInputLength = (
-  inputLength: number,
-  symbolLength: number,
-) => {
-  if (inputLength < 5 && symbolLength < 6) {
+export const getFontSizeForInputLength = (contentLength: number) => {
+  if (contentLength <= 10) {
     return 60;
   }
-  if (inputLength < 6 && symbolLength < 7) {
+  if (contentLength <= 12) {
     return 48;
   }
-  if (inputLength < 9 && symbolLength < 9) {
+  if (contentLength <= 18) {
     return 32;
   }
-  if (inputLength < 12 && symbolLength < 12) {
+  if (contentLength <= 24) {
     return 24;
   }
-  if (inputLength < 16 && symbolLength < 16) {
+  if (contentLength <= 32) {
     return 18;
   }
   return 12;
@@ -32,16 +29,13 @@ export const getFontSizeForInputLength = (
 export const styleSheet = (params: {
   theme: Theme;
   vars: {
-    fiatMode: boolean;
-    inputError: boolean;
-    inputLength: number;
+    contentLength: number;
     isNFT: boolean;
-    symbolLength: number;
   };
 }) => {
   const {
     theme,
-    vars: { fiatMode, inputError, inputLength, isNFT, symbolLength },
+    vars: { contentLength, isNFT },
   } = params;
   return StyleSheet.create({
     balanceSection: {
@@ -63,36 +57,21 @@ export const styleSheet = (params: {
       marginTop: 8,
       minWidth: 100,
     },
-    input: {
-      alignItems: AlignItems.center,
-      borderWidth: 0,
-      color: inputError
-        ? theme.colors.error.default
-        : theme.colors.text.default,
-      fontSize: getFontSizeForInputLength(inputLength, symbolLength),
-      includeFontPadding: false,
-      textAlignVertical: 'center',
-      paddingTop: Platform.OS === 'ios' ? 0 : 2,
-      // Dynamic height for large fonts:
-      height: Math.max(
-        50,
-        getFontSizeForInputLength(inputLength, symbolLength) + 10,
-      ),
-      width: '100%',
-    },
     inputSection: {
       flexDirection: FlexDirection.Row,
       justifyContent: JustifyContent.center,
       marginTop: isNFT ? 0 : 80,
       width: '100%',
     },
+    inputText: {
+      fontSize: getFontSizeForInputLength(contentLength),
+      lineHeight: 75,
+      fontWeight: '500',
+    },
     inputWrapper: {
-      alignItems: AlignItems.center,
-      flexDirection: FlexDirection.Row,
-      justifyContent: fiatMode
-        ? JustifyContent.flexStart
-        : JustifyContent.flexEnd,
-      width: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
     },
     nftImage: { alignSelf: 'center', height: 100, width: 100 },
     nftImageWrapper: {
@@ -101,18 +80,9 @@ export const styleSheet = (params: {
       width: '100%',
     },
     tokenSymbolWrapper: {
-      justifyContent: fiatMode
-        ? JustifyContent.flexEnd
-        : JustifyContent.flexStart,
+      justifyContent: JustifyContent.flexStart,
       width: '50%',
     },
-    tokenSymbol: {
-      alignItems: AlignItems.center,
-      alignSelf: fiatMode ? AlignItems.flexEnd : AlignItems.flexStart,
-      fontSize: getFontSizeForInputLength(inputLength, symbolLength),
-      lineHeight: 75,
-      paddingLeft: 2,
-    },
     topSection: {
       paddingHorizontal: 8,
       paddingVertical: 32,

app/components/Views/confirmations/components/send/amount/amount.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ParamListBase, RouteProp, useRoute } from '@react-navigation/native';
-import { act, fireEvent } from '@testing-library/react-native';
+import { fireEvent } from '@testing-library/react-native';
 import { merge } from 'lodash';
 
 import renderWithProvider, {
@@ -14,8 +14,13 @@ import {
   evmSendStateMock,
   solanaSendStateMock,
 } from '../../../__mocks__/send.mock';
+import { useAmountSelectionMetrics } from '../../../hooks/send/metrics/useAmountSelectionMetrics';
+import { useCurrencyConversions } from '../../../hooks/send/useCurrencyConversions';
 import { SendContextProvider } from '../../../context/send-context';
 import { Amount } from './amount';
+import { getFontSizeForInputLength } from './amount.styles';
+
+jest.mock('../../../hooks/send/useCurrencyConversions');
 
 jest.mock('../../../../../../core/Engine', () => ({
   context: {
@@ -25,6 +30,15 @@ jest.mock('../../../../../../core/Engine', () => ({
     AssetsContractController: {
       getERC721AssetSymbol: () => Promise.resolve(undefined),
     },
+    CurrencyRateController: {
+      currentCurrency: 'usd',
+      currencyRates: {
+        ETH: {
+          conversionRate: 2000,
+          conversionDate: Date.now(),
+        },
+      },
+    },
   },
 }));
 
@@ -70,9 +84,8 @@ jest.mock('@react-navigation/native', () => ({
   useRoute: jest.fn(),
 }));
 
-import { useAmountSelectionMetrics } from '../../../hooks/send/metrics/useAmountSelectionMetrics';
-import { getFontSizeForInputLength } from './amount.styles';
 const mockedUseAmountSelectionMetrics = jest.mocked(useAmountSelectionMetrics);
+const mockUseCurrencyConversion = jest.mocked(useCurrencyConversions);
 
 const renderComponent = (mockState?: ProviderValues['state']) => {
   const state = mockState
@@ -104,6 +117,13 @@ describe('Amount', () => {
         },
       },
     } as RouteProp<ParamListBase, string>);
+    mockUseCurrencyConversion.mockReturnValue({
+      conversionSupportedForAsset: true,
+      fiatCurrencySymbol: 'USD',
+      getFiatValue: '4500',
+      getFiatDisplayValue: () => '$ 4500.00',
+      getNativeValue: () => '1',
+    } as unknown as ReturnType<typeof useCurrencyConversions>);
   });
 
   afterEach(() => {
@@ -115,6 +135,13 @@ describe('Amount', () => {
     expect(getByTestId('send_amount')).toBeTruthy();
   });
 
+  it('display default value of amount as placeholder', () => {
+    const { getByTestId } = renderComponent();
+    expect(getByTestId('send_amount').children[0]).toEqual('0');
+    fireEvent.press(getByTestId('fiat_toggle'));
+    expect(getByTestId('send_amount').children[0]).toEqual('0.00');
+  });
+
   it('asset passed in nav params should be used if present', () => {
     mockUseRoute.mockReturnValue({
       params: {
@@ -143,25 +170,30 @@ describe('Amount', () => {
       },
     } as RouteProp<ParamListBase, string>);
 
-    const { getByText, getByTestId } = renderComponent();
-    act(() => {
-      fireEvent.changeText(getByTestId('send_amount'), '1');
-    });
-    expect(getByText('$ 3890')).toBeTruthy();
+    const { getByRole, getByText } = renderComponent();
+    fireEvent.press(getByRole('button', { name: '1' }));
+    expect(getByText('$ 4500.00')).toBeTruthy();
   });
 
   it('display fiat conversion of amount entered for solana asset', () => {
+    mockUseCurrencyConversion.mockReturnValue({
+      conversionSupportedForAsset: true,
+      fiatConversionRate: 10,
+      fiatCurrencySymbol: 'USD',
+      getFiatValue: '250',
+      getFiatDisplayValue: () => '$ 250.00',
+      getNativeValue: () => '1',
+    } as unknown as ReturnType<typeof useCurrencyConversions>);
+
     mockUseRoute.mockReturnValue({
       params: {
         asset: SOLANA_ASSET,
       },
     } as RouteProp<ParamListBase, string>);
 
-    const { getByText, getByTestId } = renderComponent(solanaSendStateMock);
-    act(() => {
-      fireEvent.changeText(getByTestId('send_amount'), '1');
-    });
-    expect(getByText('$ 175')).toBeTruthy();
+    const { getByRole, getByText } = renderComponent();
+    fireEvent.press(getByRole('button', { name: '1' }));
+    expect(getByText('$ 250.00')).toBeTruthy();
   });
 
   it('if fiatmode is enabled display native conversion of amount entered', () => {
@@ -178,12 +210,10 @@ describe('Amount', () => {
       },
     } as RouteProp<ParamListBase, string>);
 
-    const { getByText, getByTestId } = renderComponent();
-    act(() => {
-      fireEvent.press(getByTestId('fiat_toggle'));
-      fireEvent.changeText(getByTestId('send_amount'), '7780');
-    });
-    expect(getByText('ETH 2')).toBeTruthy();
+    const { getByRole, getByText, getByTestId } = renderComponent();
+    fireEvent.press(getByTestId('fiat_toggle'));
+    fireEvent.press(getByRole('button', { name: '5' }));
+    expect(getByText('1 ETH')).toBeTruthy();
   });
 
   it('calls metrics methods on changing fiat mode', () => {
@@ -210,17 +240,21 @@ describe('Amount', () => {
     } as RouteProp<ParamListBase, string>);
 
     const { getByTestId } = renderComponent();
-    act(() => {
-      fireEvent.press(getByTestId('fiat_toggle'));
-    });
+    fireEvent.press(getByTestId('fiat_toggle'));
     expect(mockSetAmountInputTypeFiat).toHaveBeenCalled();
-    act(() => {
-      fireEvent.press(getByTestId('fiat_toggle'));
-    });
+    fireEvent.press(getByTestId('fiat_toggle'));
     expect(mockSetAmountInputTypeToken).toHaveBeenCalled();
   });
 
-  it('fiatmode is not avaialble for NFT', () => {
+  it('fiatmode toggling is not avaialble is conversion rate is not available for asset', () => {
+    mockUseCurrencyConversion.mockReturnValue({
+      conversionSupportedForAsset: false,
+      fiatCurrencySymbol: 'USD',
+      getFiatValue: '4500',
+      getFiatDisplayValue: () => '$ 4500.00',
+      getNativeValue: () => '1',
+    } as unknown as ReturnType<typeof useCurrencyConversions>);
+
     mockUseRoute.mockReturnValue({
       params: {
         asset: MOCK_NFT1155,
@@ -295,10 +329,8 @@ describe('Amount', () => {
       },
     } as RouteProp<ParamListBase, string>);
 
-    const { getByTestId, queryByText } = renderComponent(solanaSendStateMock);
-    act(() => {
-      fireEvent.changeText(getByTestId('send_amount'), '1');
-    });
+    const { getByRole, queryByText } = renderComponent();
+    fireEvent.press(getByRole('button', { name: '1' }));
     expect(queryByText('25%')).toBeNull();
     expect(queryByText('50%')).toBeNull();
     expect(queryByText('75%')).toBeNull();
@@ -341,10 +373,8 @@ describe('Amount', () => {
       },
     } as RouteProp<ParamListBase, string>);
 
-    const { getByText, getByTestId } = renderComponent();
-    act(() => {
-      fireEvent.changeText(getByTestId('send_amount'), '100');
-    });
+    const { getByRole, getByText } = renderComponent();
+    fireEvent.press(getByRole('button', { name: '9' }));
     expect(getByText('Insufficient funds')).toBeTruthy();
   });
 
@@ -530,22 +560,12 @@ describe('Amount', () => {
 
 describe('getFontSizeForInputLength', () => {
   it('renders correct font size using input and symbol length', () => {
-    expect(getFontSizeForInputLength(1, 1)).toEqual(60);
-    expect(getFontSizeForInputLength(5, 1)).toEqual(48);
-    expect(getFontSizeForInputLength(1, 6)).toEqual(48);
-    expect(getFontSizeForInputLength(5, 6)).toEqual(48);
-    expect(getFontSizeForInputLength(6, 6)).toEqual(32);
-    expect(getFontSizeForInputLength(5, 7)).toEqual(32);
-    expect(getFontSizeForInputLength(6, 7)).toEqual(32);
-    expect(getFontSizeForInputLength(9, 7)).toEqual(24);
-    expect(getFontSizeForInputLength(6, 9)).toEqual(24);
-    expect(getFontSizeForInputLength(9, 9)).toEqual(24);
-    expect(getFontSizeForInputLength(12, 9)).toEqual(18);
-    expect(getFontSizeForInputLength(9, 12)).toEqual(18);
-    expect(getFontSizeForInputLength(12, 12)).toEqual(18);
-    expect(getFontSizeForInputLength(16, 12)).toEqual(12);
-    expect(getFontSizeForInputLength(12, 16)).toEqual(12);
-    expect(getFontSizeForInputLength(16, 16)).toEqual(12);
-    expect(getFontSizeForInputLength(18, 18)).toEqual(12);
+    expect(getFontSizeForInputLength(1)).toEqual(60);
+    expect(getFontSizeForInputLength(10)).toEqual(60);
+    expect(getFontSizeForInputLength(12)).toEqual(48);
+    expect(getFontSizeForInputLength(18)).toEqual(32);
+    expect(getFontSizeForInputLength(24)).toEqual(24);
+    expect(getFontSizeForInputLength(32)).toEqual(18);
+    expect(getFontSizeForInputLength(40)).toEqual(12);
   });
 });