chore(runway): cherry-pick fix: cp-7.47.0 bridge input field behaving erratically (#15622)

- fix: cp-7.47.0 bridge input field behaving erratically (#15524)

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

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR:
- Fixes an issue where the source token input would jump around
erratically when inputting an amount.
- Limits the max length to 18
- Scales the font size of the input field with the length of the input

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to Bridge
2. Enter in many digits for source token
3. Observe that it's limited to 18 digits and 5 decimals, and the size
changes with the length

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->




https://github.com/user-attachments/assets/eb1b8e33-66e4-474c-a80b-fd5b4be97140




## **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
- [ ] I’ve included tests if applicable
- [ ] 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.
[ca71397](ca71397)

Author: sethkfman

app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap

@@ -399,12 +399,6 @@ exports[`BridgeView Bottom Content blurs input when opening QuoteExpiredModal 1`
                                         onBlur={[Function]}
                                         onFocus={[Function]}
                                         placeholder="0"
-                                        selection={
-                                          {
-                                            "end": 0,
-                                            "start": 0,
-                                          }
-                                        }
                                         showSoftInputOnFocus={false}
                                         style={
                                           {
@@ -1365,12 +1359,6 @@ exports[`BridgeView renders 1`] = `
                                         onBlur={[Function]}
                                         onFocus={[Function]}
                                         placeholder="0"
-                                        selection={
-                                          {
-                                            "end": 0,
-                                            "start": 0,
-                                          }
-                                        }
                                         showSoftInputOnFocus={false}
                                         style={
                                           {

app/components/UI/Bridge/Views/BridgeView/index.tsx

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import ScreenView from '../../../../Base/ScreenView';
 import Keypad from '../../../../Base/Keypad';
 import {
+  MAX_INPUT_LENGTH,
   TokenInputArea,
   TokenInputAreaType,
 } from '../../components/TokenInputArea';
@@ -267,6 +268,9 @@ const BridgeView = () => {
     valueAsNumber: number;
     pressedKey: string;
   }) => {
+    if (value.length >= MAX_INPUT_LENGTH) {
+      return;
+    }
     dispatch(setSourceAmount(value || undefined));
   };
 

app/components/UI/Bridge/components/TokenInputArea/TokenInputArea.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { renderScreen } from '../../../../../util/test/renderWithProvider';
+import { TokenInputArea, TokenInputAreaType, calculateFontSize, getDisplayAmount } from '.';
+import { initialState } from '../../_mocks_/initialState';
+
+const mockOnTokenPress = jest.fn();
+const mockOnFocus = jest.fn();
+const mockOnBlur = jest.fn();
+const mockOnInputPress = jest.fn();
+
+describe('TokenInputArea', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with initial state', () => {
+    const { getByTestId } = renderScreen(
+      () => (
+        <TokenInputArea
+          testID="token-input"
+          tokenType={TokenInputAreaType.Source}
+          onTokenPress={mockOnTokenPress}
+          onFocus={mockOnFocus}
+          onBlur={mockOnBlur}
+          onInputPress={mockOnInputPress}
+        />
+      ),
+      {
+        name: 'TokenInputArea',
+      },
+      { state: initialState },
+    );
+
+    expect(getByTestId('token-input-input')).toBeTruthy();
+  });
+
+  it('handles input focus and blur correctly', () => {
+    const { getByTestId } = renderScreen(
+      () => (
+        <TokenInputArea
+          testID="token-input"
+          tokenType={TokenInputAreaType.Source}
+          onFocus={mockOnFocus}
+          onBlur={mockOnBlur}
+        />
+      ),
+      {
+        name: 'TokenInputArea',
+      },
+      { state: initialState },
+    );
+
+    const input = getByTestId('token-input-input');
+    fireEvent(input, 'focus');
+    expect(mockOnFocus).toHaveBeenCalled();
+
+    fireEvent(input, 'blur');
+    expect(mockOnBlur).toHaveBeenCalled();
+  });
+});
+
+describe('calculateFontSize', () => {
+  it('returns 40 for lengths up to 10', () => {
+    expect(calculateFontSize(5)).toBe(40);
+    expect(calculateFontSize(10)).toBe(40);
+  });
+
+  it('returns 35 for lengths between 11 and 15', () => {
+    expect(calculateFontSize(11)).toBe(35);
+    expect(calculateFontSize(15)).toBe(35);
+  });
+
+  it('returns 30 for lengths between 16 and 20', () => {
+    expect(calculateFontSize(16)).toBe(30);
+    expect(calculateFontSize(20)).toBe(30);
+  });
+
+  it('returns 25 for lengths between 21 and 25', () => {
+    expect(calculateFontSize(21)).toBe(25);
+    expect(calculateFontSize(25)).toBe(25);
+  });
+
+  it('returns 20 for lengths greater than 25', () => {
+    expect(calculateFontSize(26)).toBe(20);
+    expect(calculateFontSize(100)).toBe(20);
+  });
+});
+
+describe('getDisplayAmount', () => {
+  it('returns undefined for undefined input', () => {
+    expect(getDisplayAmount(undefined)).toBeUndefined();
+  });
+
+  it('returns full amount for source type when under max length', () => {
+    const amount = '123456789012345678';
+    expect(getDisplayAmount(amount, TokenInputAreaType.Source)).toBe(amount);
+  });
+
+  it('returns full amount for source type when over max length', () => {
+    const amount = '1234567890123456789';
+    expect(getDisplayAmount(amount, TokenInputAreaType.Source)).toBe(amount);
+  });
+
+  it('parses amount for destination type', () => {
+    const amount = '1234567890123456789.12345';
+    expect(getDisplayAmount(amount, TokenInputAreaType.Destination)).toBe('1234567890123456789.12345');
+  });
+});

app/components/UI/Bridge/components/TokenInputArea/index.tsx

@@ -38,8 +38,20 @@ import parseAmount from '../../../Ramp/utils/parseAmount';
 import useIsInsufficientBalance from '../../hooks/useInsufficientBalance';
 
 const MAX_DECIMALS = 5;
+export const MAX_INPUT_LENGTH = 18;
 
-const createStyles = () =>
+/**
+ * Calculates font size based on input length
+ */
+export const calculateFontSize = (length: number): number => {
+  if (length <= 10) return 40;
+  if (length <= 15) return 35;
+  if (length <= 20) return 30;
+  if (length <= 25) return 25;
+  return 20;
+};
+
+const createStyles = ({ vars }: { vars: { fontSize: number } }) =>
   StyleSheet.create({
     content: {
       paddingVertical: 16,
@@ -53,21 +65,34 @@ const createStyles = () =>
       flex: 1,
     },
     input: {
-      fontSize: 40,
       borderWidth: 0,
       lineHeight: 50,
       height: 50,
+      fontSize: vars.fontSize,
     },
   });
 
-const formatAddress = (address?: string) =>
-  address ? `${address.slice(0, 6)}...${address.slice(-4)}` : undefined;
-
 export enum TokenInputAreaType {
   Source = 'source',
   Destination = 'destination',
 }
 
+const formatAddress = (address?: string) =>
+  address ? `${address.slice(0, 6)}...${address.slice(-4)}` : undefined;
+
+export const getDisplayAmount = (
+  amount?: string,
+  tokenType?: TokenInputAreaType,
+) => {
+  if (amount === undefined) return amount;
+
+  const displayAmount = tokenType === TokenInputAreaType.Source
+    ? amount
+    : parseAmount(amount, MAX_DECIMALS);
+
+  return displayAmount;
+};
+
 export interface TokenInputAreaRef {
   blur: () => void;
 }
@@ -130,7 +155,6 @@ export const TokenInputArea = forwardRef<
       },
     }));
 
-    const { styles } = useStyles(createStyles, {});
     const navigation = useNavigation();
 
     const navigateToDestNetworkSelector = () => {
@@ -181,6 +205,10 @@ export const TokenInputArea = forwardRef<
         ? formattedBalance
         : formattedAddress;
 
+    const displayedAmount = getDisplayAmount(amount, tokenType);
+    const fontSize = calculateFontSize(displayedAmount?.length ?? 0);
+    const { styles } = useStyles(createStyles, { fontSize });
+
     return (
       <Box>
         <Box style={styles.content} gap={4}>
@@ -191,7 +219,7 @@ export const TokenInputArea = forwardRef<
               ) : (
                 <Input
                   ref={inputRef}
-                  value={amount ? parseAmount(amount, MAX_DECIMALS) : amount}
+                  value={displayedAmount}
                   style={styles.input}
                   isDisabled={false}
                   isReadonly={tokenType === TokenInputAreaType.Destination}
@@ -209,7 +237,11 @@ export const TokenInputArea = forwardRef<
                   }}
                   // Android only issue, for long numbers, the input field will focus on the right hand side
                   // Force it to focus on the left hand side
-                  selection={{ start: 0, end: 0 }}
+                  selection={
+                    tokenType === TokenInputAreaType.Destination
+                      ? { start: 0, end: 0 }
+                      : undefined
+                  }
                 />
               )}
             </Box>