[pull] main from MetaMask:main

app/components/UI/Bridge/Views/BridgeView/BridgeView.styles.ts

@@ -56,14 +56,6 @@ export const createStyles = (params: { theme: Theme }) => {
       flex: 1,
       justifyContent: 'flex-end',
     },
-    keypadContainer: {
-      flex: 1,
-      justifyContent: 'flex-end',
-      paddingBottom: 8,
-    },
-    keypad: {
-      paddingHorizontal: 24,
-    },
     destinationAccountSelectorContainer: {
       paddingBottom: 12,
     },

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

@@ -443,7 +443,7 @@ describe('BridgeView', () => {
       },
     };
 
-    const { queryByText } = renderScreen(
+    const { queryByTestId } = renderScreen(
       BridgeView,
       {
         name: Routes.BRIDGE.ROOT,
@@ -452,7 +452,7 @@ describe('BridgeView', () => {
     );
 
     // Verify max button is not present for native token
-    expect(queryByText('Max')).toBeNull();
+    expect(queryByTestId('token-input-area-max-button')).toBeNull();
   });
 
   it('should display max button when source token is not native token', () => {
@@ -472,7 +472,7 @@ describe('BridgeView', () => {
       },
     };
 
-    const { queryByText } = renderScreen(
+    const { queryByTestId } = renderScreen(
       BridgeView,
       {
         name: Routes.BRIDGE.ROOT,
@@ -481,7 +481,7 @@ describe('BridgeView', () => {
     );
 
     // Verify max button is present for ERC-20 token
-    expect(queryByText('Max')).toBeTruthy();
+    expect(queryByTestId('token-input-area-max-button')).toBeTruthy();
   });
 
   it('should set source amount to maximum balance when max button is pressed', async () => {
@@ -501,7 +501,7 @@ describe('BridgeView', () => {
       },
     };
 
-    const { getByText, getByTestId } = renderScreen(
+    const { getByTestId } = renderScreen(
       BridgeView,
       {
         name: Routes.BRIDGE.ROOT,
@@ -510,7 +510,7 @@ describe('BridgeView', () => {
     );
 
     // Find and press the max button
-    const maxButton = getByText('Max');
+    const maxButton = getByTestId('token-input-area-max-button');
     expect(maxButton).toBeTruthy();
     fireEvent.press(maxButton);
 

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import ScreenView from '../../../../Base/ScreenView';
-import Keypad from '../../../../Base/Keypad';
 import {
   MAX_INPUT_LENGTH,
   TokenInputArea,
@@ -85,6 +84,7 @@ import { RootState } from '../../../../../reducers/index.ts';
 import { BRIDGE_MM_FEE_RATE } from '@metamask/bridge-controller';
 import { isNullOrUndefined } from '@metamask/utils';
 import { useBridgeQuoteEvents } from '../../hooks/useBridgeQuoteEvents/index.ts';
+import { SwapsKeypad } from '../../components/SwapsKeypad/index.tsx';
 import { useGasIncluded } from '../../hooks/useGasIncluded';
 
 export interface BridgeRouteParams {
@@ -335,6 +335,12 @@ const BridgeView = () => {
     }
   };
 
+  const handleSourceMaxPress = () => {
+    if (latestSourceBalance?.displayBalance) {
+      dispatch(setSourceAmountAsMax(latestSourceBalance.displayBalance));
+    }
+  };
+
   const handleSourceTokenPress = () =>
     navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
       screen: Routes.BRIDGE.MODALS.SOURCE_TOKEN_SELECTOR,
@@ -499,13 +505,7 @@ const BridgeView = () => {
             onFocus={() => setIsInputFocused(true)}
             onBlur={() => setIsInputFocused(false)}
             onInputPress={() => setIsInputFocused(true)}
-            onMaxPress={() => {
-              if (latestSourceBalance?.displayBalance) {
-                dispatch(
-                  setSourceAmountAsMax(latestSourceBalance.displayBalance),
-                );
-              }
-            }}
+            onMaxPress={handleSourceMaxPress}
             latestAtomicBalance={latestSourceBalance?.atomicBalance}
             isSourceToken
           />
@@ -549,15 +549,15 @@ const BridgeView = () => {
                 <QuoteDetailsCard />
               </Box>
             ) : shouldDisplayKeypad ? (
-              <Box style={styles.keypadContainer}>
-                <Keypad
-                  style={styles.keypad}
-                  value={sourceAmount || '0'}
-                  onChange={handleKeypadChange}
-                  currency={sourceToken?.symbol || 'ETH'}
-                  decimals={sourceToken?.decimals || 18}
-                />
-              </Box>
+              <SwapsKeypad
+                value={sourceAmount || '0'}
+                onChange={handleKeypadChange}
+                currency={sourceToken?.symbol || 'ETH'}
+                decimals={sourceToken?.decimals || 18}
+                token={sourceToken}
+                tokenBalance={latestSourceBalance}
+                onMaxPress={handleSourceMaxPress}
+              />
             ) : null}
           </Box>
         </ScrollView>