fix: cp-7.55.0 amount input related fixes (MetaMask#19380)

<!--
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**

PR addressed different amount display related issues.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: MetaMask#18976
Fixes: MetaMask#19004
Fixes: MetaMask#19005
Fixes: MetaMask#19006
Fixes: MetaMask#18963

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/8393d736-d310-46d0-9378-57dac788fd21

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/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.

Author: jpuri

app/components/Views/confirmations/components/edit-amount-keyboard/edit-amount-keyboard.test.tsx

@@ -129,4 +129,42 @@ describe('EditAmountKeyboard', () => {
 
     expect(getByText('Additional Row')).toBeDefined();
   });
+
+  it('calls onchange with "0 if enableEmptyValueString is false and back button is pressed to make value empty', () => {
+    const onChangeMock = jest.fn();
+
+    const { getByTestId } = render(
+      <EditAmountKeyboard
+        enableEmptyValueString
+        onChange={onChangeMock}
+        onDonePress={noop}
+        onPercentagePress={noop}
+        value={'0'}
+      />,
+    );
+
+    const backButton = getByTestId('keypad-delete-button');
+    fireEvent.press(backButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith('');
+  });
+
+  it('calls onchange with empty string if enableEmptyValueString is true and back button is pressed to make value empty', () => {
+    const onChangeMock = jest.fn();
+
+    const { getByTestId } = render(
+      <EditAmountKeyboard
+        enableEmptyValueString
+        onChange={onChangeMock}
+        onDonePress={noop}
+        onPercentagePress={noop}
+        value={'0'}
+      />,
+    );
+
+    const backButton = getByTestId('keypad-delete-button');
+    fireEvent.press(backButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith('');
+  });
 });

app/components/Views/confirmations/components/edit-amount-keyboard/edit-amount-keyboard.tsx

@@ -1,7 +1,10 @@
 import React, { ReactNode, useCallback } from 'react';
 import { View } from 'react-native';
 
-import KeypadComponent, { KeypadChangeData } from '../../../../Base/Keypad';
+import KeypadComponent, {
+  KeypadChangeData,
+  Keys,
+} from '../../../../Base/Keypad';
 import { useStyles } from '../../../../hooks/useStyles';
 import styleSheet from './edit-amount-keyboard.styles';
 import Button, {
@@ -26,6 +29,7 @@ export interface EditAmountKeyboardProps {
   hideDoneButton?: boolean;
   showAdditionalKeyboard?: boolean;
   additionalRow?: ReactNode;
+  enableEmptyValueString?: boolean;
 }
 
 export function EditAmountKeyboard({
@@ -37,14 +41,20 @@ export function EditAmountKeyboard({
   hideDoneButton = false,
   showAdditionalKeyboard = true,
   additionalRow,
+  enableEmptyValueString = false,
 }: Readonly<EditAmountKeyboardProps>) {
   const { styles } = useStyles(styleSheet, {});
 
   const handleChange = useCallback(
     (data: KeypadChangeData) => {
-      onChange(data.value);
+      const { pressedKey, value } = data;
+      if (pressedKey === Keys.Back && value === '0' && enableEmptyValueString) {
+        onChange('');
+        return;
+      }
+      onChange(value);
     },
-    [onChange],
+    [enableEmptyValueString, onChange],
   );
 
   return (

app/components/Views/confirmations/components/send/amount/amount-keyboard/amount-keyboard.tsx

@@ -108,6 +108,7 @@ export const AmountKeyboard = ({
           />
         ) : undefined
       }
+      enableEmptyValueString
       hideDoneButton
       onChange={updateToNewAmount}
       onPercentagePress={updateToPercentageAmount}

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

@@ -7,25 +7,32 @@ import {
   JustifyContent,
 } from '../../../../../UI/Box/box.types';
 
-export const getFontSizeForInputLength = (contentLength: number) => {
-  if (contentLength < 10) {
+export const getFontSizeForInputLength = (
+  inputLength: number,
+  symbolLength: number,
+) => {
+  if (inputLength < 5 && symbolLength < 6) {
     return 60;
   }
-  if (contentLength < 12) {
+  if (inputLength < 6 && symbolLength < 7) {
     return 48;
   }
-  if (contentLength < 18) {
+  if (inputLength < 9 && symbolLength < 9) {
     return 32;
   }
-  if (contentLength < 24) {
+  if (inputLength < 12 && symbolLength < 12) {
     return 24;
   }
-  return 18;
+  if (inputLength < 16 && symbolLength < 16) {
+    return 18;
+  }
+  return 12;
 };
 
 export const styleSheet = (params: {
   theme: Theme;
   vars: {
+    fiatMode: boolean;
     inputError: boolean;
     inputLength: number;
     isNFT: boolean;
@@ -34,7 +41,7 @@ export const styleSheet = (params: {
 }) => {
   const {
     theme,
-    vars: { inputError, inputLength, isNFT, symbolLength },
+    vars: { fiatMode, inputError, inputLength, isNFT, symbolLength },
   } = params;
   return StyleSheet.create({
     balanceSection: {
@@ -62,42 +69,48 @@ export const styleSheet = (params: {
       color: inputError
         ? theme.colors.error.default
         : theme.colors.text.default,
-      fontSize: getFontSizeForInputLength(inputLength + symbolLength),
-      minWidth: '30%',
+      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,
+        getFontSizeForInputLength(inputLength, symbolLength) + 10,
       ),
     },
     inputSection: {
       flexDirection: FlexDirection.Row,
-      justifyContent:
-        inputLength < 5 ? JustifyContent.center : JustifyContent.flexEnd,
+      justifyContent: JustifyContent.center,
       marginTop: isNFT ? 0 : 80,
       width: '100%',
     },
     inputWrapper: {
       alignItems: AlignItems.center,
       flexDirection: FlexDirection.Row,
-      justifyContent: JustifyContent.flexEnd,
+      justifyContent: fiatMode
+        ? JustifyContent.flexStart
+        : JustifyContent.flexEnd,
+      width: '50%',
     },
     nftImage: { alignSelf: 'center', height: 100, width: 100 },
     nftImageWrapper: {
       alignItems: AlignItems.center,
       marginTop: 32,
       width: '100%',
     },
+    tokenSymbolWrapper: {
+      justifyContent: fiatMode
+        ? JustifyContent.flexEnd
+        : JustifyContent.flexStart,
+      width: '50%',
+    },
     tokenSymbol: {
       alignItems: AlignItems.center,
-      alignSelf: 'flex-end',
-      fontSize: getFontSizeForInputLength(inputLength + symbolLength),
+      alignSelf: fiatMode ? AlignItems.flexEnd : AlignItems.flexStart,
+      fontSize: getFontSizeForInputLength(inputLength, symbolLength),
       lineHeight: 75,
       paddingLeft: 2,
-      textAlign: 'left',
     },
     topSection: {
       paddingHorizontal: 8,

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

@@ -71,6 +71,7 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 import { useAmountSelectionMetrics } from '../../../hooks/send/metrics/useAmountSelectionMetrics';
+import { getFontSizeForInputLength } from './amount.styles';
 const mockedUseAmountSelectionMetrics = jest.mocked(useAmountSelectionMetrics);
 
 const renderComponent = (mockState?: ProviderValues['state']) => {
@@ -146,7 +147,7 @@ describe('Amount', () => {
     act(() => {
       fireEvent.changeText(getByTestId('send_amount'), '1');
     });
-    expect(getByText('$ 3890.00')).toBeTruthy();
+    expect(getByText('$ 3890')).toBeTruthy();
   });
 
   it('display fiat conversion of amount entered for solana asset', () => {
@@ -160,7 +161,7 @@ describe('Amount', () => {
     act(() => {
       fireEvent.changeText(getByTestId('send_amount'), '1');
     });
-    expect(getByText('$ 175.00')).toBeTruthy();
+    expect(getByText('$ 175')).toBeTruthy();
   });
 
   it('if fiatmode is enabled display native conversion of amount entered', () => {
@@ -212,11 +213,11 @@ describe('Amount', () => {
     act(() => {
       fireEvent.press(getByTestId('fiat_toggle'));
     });
-    expect(mockSetAmountInputTypeToken).toHaveBeenCalled();
+    expect(mockSetAmountInputTypeFiat).toHaveBeenCalled();
     act(() => {
       fireEvent.press(getByTestId('fiat_toggle'));
     });
-    expect(mockSetAmountInputTypeFiat).toHaveBeenCalled();
+    expect(mockSetAmountInputTypeToken).toHaveBeenCalled();
   });
 
   it('fiatmode is not avaialble for NFT', () => {
@@ -526,3 +527,25 @@ describe('Amount', () => {
   //   expect(mockCaptureAmountSelected).toHaveBeenCalled();
   // });
 });
+
+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);
+  });
+});

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

@@ -39,16 +39,18 @@ export const Amount = () => {
   const [fiatMode, setFiatMode] = useState(primaryCurrency === 'Fiat');
   const {
     fiatCurrencySymbol,
+    getFiatValue,
     getFiatDisplayValue,
-    getNativeDisplayValue,
     getNativeValue,
+    getNativeDisplayValue,
   } = useCurrencyConversions();
   const isNFT = asset?.standard === TokenStandard.ERC1155;
   const assetSymbol = isNFT
     ? undefined
     : (asset as AssetType)?.ticker ?? (asset as AssetType)?.symbol;
   const assetDisplaySymbol = assetSymbol ?? (isNFT ? 'NFT' : '');
   const { styles, theme } = useStyles(styleSheet, {
+    fiatMode,
     inputError: Boolean(amountError),
     inputLength: amount.length,
     isNFT,
@@ -87,21 +89,25 @@ export const Amount = () => {
   );
 
   const toggleFiatMode = useCallback(() => {
-    if (!fiatMode) {
-      setAmountInputTypeToken();
-    } else {
+    const newFiatMode = !fiatMode;
+    if (newFiatMode) {
       setAmountInputTypeFiat();
+    } else {
+      setAmountInputTypeToken();
+    }
+    setFiatMode(newFiatMode);
+    if (amount !== undefined) {
+      setAmount(newFiatMode ? getFiatValue(amount) : getNativeValue(amount));
     }
-    setFiatMode(!fiatMode);
-    setAmount('');
-    updateValue('');
   }, [
+    amount,
     fiatMode,
+    getFiatValue,
+    getNativeValue,
     setAmount,
     setAmountInputTypeFiat,
     setAmountInputTypeToken,
     setFiatMode,
-    updateValue,
   ]);
 
   const balanceUnit =
@@ -128,26 +134,42 @@ export const Amount = () => {
           </View>
         )}
         <View style={styles.inputSection}>
+          {fiatMode && (
+            <View style={styles.tokenSymbolWrapper}>
+              <Text
+                color={amountError ? TextColor.Error : TextColor.Alternative}
+                numberOfLines={1}
+                style={styles.tokenSymbol}
+                variant={TextVariant.DisplayLG}
+              >
+                {fiatCurrencySymbol}
+              </Text>
+            </View>
+          )}
           <View style={styles.inputWrapper}>
             <Input
               cursorColor={theme.colors.primary.default}
               onChangeText={updateToNewAmount}
               style={styles.input}
               testID="send_amount"
-              textAlign="right"
+              textAlign={fiatMode ? 'left' : 'right'}
               textVariant={TextVariant.DisplayLG}
               value={amount}
               showSoftInputOnFocus={false}
             />
           </View>
-          <Text
-            color={amountError ? TextColor.Error : TextColor.Alternative}
-            numberOfLines={1}
-            style={styles.tokenSymbol}
-            variant={TextVariant.DisplayLG}
-          >
-            {fiatMode ? fiatCurrencySymbol : assetDisplaySymbol}
-          </Text>
+          {!fiatMode && (
+            <View style={styles.tokenSymbolWrapper}>
+              <Text
+                color={amountError ? TextColor.Error : TextColor.Alternative}
+                numberOfLines={1}
+                style={styles.tokenSymbol}
+                variant={TextVariant.DisplayLG}
+              >
+                {assetDisplaySymbol}
+              </Text>
+            </View>
+          )}
         </View>
         {!isNFT && (
           <TagBase shape={TagShape.Pill} style={styles.currencyTag}>

app/components/Views/confirmations/hooks/send/useCurrencyConversions.test.ts

@@ -31,7 +31,7 @@ describe('getFiatValueFn', () => {
         amount: '10',
         decimals: 2,
       }),
-    ).toStrictEqual(38905.56);
+    ).toStrictEqual('38905.56');
   });
 
   it('return 0 if input is empty string', () => {
@@ -42,7 +42,7 @@ describe('getFiatValueFn', () => {
         amount: '',
         decimals: 2,
       }),
-    ).toStrictEqual(0);
+    ).toStrictEqual('0');
   });
 
   it('use conversionRate 1 if conversionRate is not passed', () => {
@@ -53,7 +53,7 @@ describe('getFiatValueFn', () => {
         amount: '10',
         decimals: 2,
       }),
-    ).toStrictEqual(38905.56);
+    ).toStrictEqual('38905.56');
   });
 });