Merge branch 'main' into test/temp-nightly

Author: tommasini

.github/scripts/collect-qa-stats.mjs

@@ -23,9 +23,17 @@ import {
 } from './ButtonLink.constants';
 
 /**
- * @deprecated Please update your code to use `TextButton` from `@metamask/design-system-react-native`.
- * The API may have changed — compare props before migrating.
- * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TextButton/README.md}
+ * @deprecated ButtonLink has been replaced by design-system components.
+ *
+ * - Use `TextButton` for inline links within text flows.
+ * - Use `Button` with `variant={ButtonVariant.Tertiary}` for standalone link‑style buttons (e.g., CTAs, headers, separators).
+ *
+ * Examples:
+ * Inline: <Text>Forgot your password? <TextButton onPress={...}>Reset</TextButton></Text>
+ * Standalone: <Button variant={ButtonVariant.Tertiary} onPress={...}>Forgot password?</Button>
+ *
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TextButton/README.md | TextButton}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Button/README.md | Button}
  */
 const ButtonLink: React.FC<ButtonLinkProps> = ({
   style,

app/component-library/components/Buttons/Button/variants/ButtonLink/ButtonLink.tsx

@@ -7,6 +7,7 @@ import renderWithProvider from '../../../util/test/renderWithProvider';
 
 // Internal dependencies
 import ThemeProvider from './ThemeProvider';
+import { brandColor } from '@metamask/design-tokens';
 
 describe('ThemeProvider', () => {
   it('renders children correctly', () => {
@@ -36,6 +37,6 @@ describe('ThemeProvider', () => {
       </ThemeProvider>,
     );
 
-    expect(themeValue.brandColors.black).toStrictEqual('#000000');
+    expect(themeValue.brandColors.black).toStrictEqual(brandColor.black);
   });
 });

app/component-library/providers/ThemeProvider/ThemeProvider.test.tsx

@@ -12,7 +12,7 @@ export const createStyles = (params: { theme: Theme }) => {
     },
     inputsContainer: {
       paddingVertical: 12,
-      paddingHorizontal: 24,
+      paddingHorizontal: 16,
     },
     buttonContainer: {
       width: '100%',

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

@@ -98,11 +98,6 @@ jest.mock('../../../../../core/Engine', () => {
       unsubscribe: jest.fn(),
     },
     context: {
-      SwapsController: {
-        fetchAggregatorMetadataWithCache: jest.fn(),
-        fetchTopAssetsWithCache: jest.fn(),
-        fetchTokenWithCache: jest.fn(),
-      },
       KeyringController: {
         state: {
           keyrings: [
@@ -158,6 +153,7 @@ jest.mock('../../../../../core/Engine', () => {
         resetState: jest.fn(),
         setBridgeFeatureFlags: jest.fn().mockResolvedValue(undefined),
         updateBridgeQuoteRequestParams: jest.fn(),
+        trackUnifiedSwapBridgeEvent: jest.fn(),
       },
     },
     getTotalEvmFiatAccountBalance: jest.fn().mockReturnValue({
@@ -491,6 +487,43 @@ describe('BridgeView', () => {
     expect(getByText('$19,000.00')).toBeTruthy();
   });
 
+  it('should update source token amount when selecting a quick-pick preset', async () => {
+    jest
+      .mocked(useBridgeQuoteData as unknown as jest.Mock)
+      .mockImplementation(() => ({
+        ...mockUseBridgeQuoteData,
+        activeQuote: null,
+        bestQuote: null,
+        sourceAmount: undefined,
+        isLoading: false,
+        destTokenAmount: undefined,
+        formattedQuoteData: undefined,
+      }));
+
+    const { getByTestId, getByText } = renderScreen(
+      BridgeView,
+      {
+        name: Routes.BRIDGE.ROOT,
+      },
+      { state: mockState },
+    );
+
+    const sourceInput = getByTestId('source-token-area-input');
+    await act(async () => {
+      sourceInput.props.onPressIn();
+    });
+
+    await waitFor(() => {
+      expect(getByText('25%')).toBeTruthy();
+    });
+
+    fireEvent.press(getByText('25%'));
+
+    await waitFor(() => {
+      expect(getByTestId('source-token-area-input').props.value).toBe('0.5');
+    });
+  });
+
   it('should display source token symbol and balance', async () => {
     const stateWithAmount = {
       ...mockState,

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

@@ -74,7 +74,7 @@ import { Hex } from '@metamask/utils';
 import { useBridgeQuoteEvents } from '../../hooks/useBridgeQuoteEvents/index.ts';
 import { SwapsKeypad } from '../../components/SwapsKeypad/index.tsx';
 import { getGasFeesSponsoredNetworkEnabled } from '../../../../../selectors/featureFlagController/gasFeesSponsored';
-import { trimTrailingZeros } from '../../utils/trimTrailingZeros.ts';
+import { normalizeSourceAmountToMaxLength } from '../../utils/normalizeSourceAmountToMaxLength.ts';
 import { FLipQuoteButton } from '../../components/FlipQuoteButton/index.tsx';
 import { useIsGasIncludedSTXSendBundleSupported } from '../../hooks/useIsGasIncludedSTXSendBundleSupported/index.ts';
 import { useIsGasIncluded7702Supported } from '../../hooks/useIsGasIncluded7702Supported/index.ts';
@@ -89,10 +89,12 @@ import { type BridgeRouteParams } from '../../hooks/useSwapBridgeNavigation/inde
 import BridgeTrendingTokensSection from '../../components/BridgeTrendingTokensSection/BridgeTrendingTokensSection';
 import { selectRemoteFeatureFlags } from '../../../../../selectors/featureFlagController';
 import type { RootState } from '../../../../../reducers';
-const SCROLL_NEAR_BOTTOM_PX = 160;
 import { useTrackSwapPageViewed } from '../../hooks/useTrackSwapPageViewed/index.ts';
+import { useSourceAmountCursor } from '../../hooks/useSourceAmountCursor.ts';
 import { BridgeViewFooter } from './BridgeViewFooter.tsx';
 
+const SCROLL_NEAR_BOTTOM_PX = 160;
+
 const BridgeView = () => {
   const [isErrorBannerVisible, setIsErrorBannerVisible] = useState(true);
   const [isNearBottom, setIsNearBottom] = useState(false);
@@ -137,6 +139,23 @@ const BridgeView = () => {
   const isNonEvmNonEvmBridge = useSelector(selectIsNonEvmNonEvmBridge);
   const isSolanaSourced = useSelector(selectIsSolanaSourced);
   const isDestNetworkEnabled = useIsNetworkEnabled(destToken?.chainId);
+  const handleSourceAmountChange = useCallback(
+    (value: string | undefined) => {
+      dispatch(setSourceAmount(value));
+    },
+    [dispatch],
+  );
+  const {
+    sourceSelection,
+    handleSourceSelectionChange,
+    handleKeypadChange,
+    resetSourceAmountCursorPosition,
+  } = useSourceAmountCursor({
+    sourceAmount,
+    sourceTokenDecimals: sourceToken?.decimals,
+    maxInputLength: MAX_INPUT_LENGTH,
+    onSourceAmountChange: handleSourceAmountChange,
+  });
 
   /** The entry point location for analytics (e.g. Main View, Token View, Trending Explore) */
   const location = route.params?.location;
@@ -299,33 +318,43 @@ const BridgeView = () => {
     }
   }, [isError]);
 
-  // Keypad already handles max token decimals, so we don't need to check here
-  const handleKeypadChange = ({
-    value,
-  }: {
-    value: string;
-    valueAsNumber: number;
-    pressedKey: string;
-  }) => {
-    if (value.length >= MAX_INPUT_LENGTH) {
-      return;
-    }
-    dispatch(setSourceAmount(value || undefined));
-  };
-
   const handleSourceMaxPress = () => {
     if (latestSourceBalance?.displayBalance) {
       const balance = latestSourceBalance.displayBalance;
-      const cleaned = trimTrailingZeros(balance);
+      const cleaned = normalizeSourceAmountToMaxLength(
+        balance,
+        MAX_INPUT_LENGTH,
+      );
+      resetSourceAmountCursorPosition();
       dispatch(setSourceAmountAsMax(cleaned));
     }
   };
 
+  const handleSourcePresetAmountSelect = useCallback(
+    (value: string) => {
+      // Quick-pick presets replace the full amount rather than editing at the
+      // current cursor position, so clear the cursor state before updating.
+      resetSourceAmountCursorPosition();
+      dispatch(
+        setSourceAmount(
+          normalizeSourceAmountToMaxLength(value, MAX_INPUT_LENGTH) ||
+            undefined,
+        ),
+      );
+    },
+    [dispatch, resetSourceAmountCursorPosition],
+  );
+
   const handleSourceTokenPress = () =>
     navigation.navigate(Routes.BRIDGE.TOKEN_SELECTOR, {
       type: 'source',
     });
 
+  const handleFlipTokensPress = useCallback(() => {
+    resetSourceAmountCursorPosition();
+    void handleSwitchTokens(destTokenAmount)();
+  }, [destTokenAmount, handleSwitchTokens, resetSourceAmountCursorPosition]);
+
   const handleDestTokenPress = () =>
     navigation.navigate(Routes.BRIDGE.TOKEN_SELECTOR, {
       type: 'dest',
@@ -385,6 +414,7 @@ const BridgeView = () => {
             <TokenInputArea
               ref={inputRef}
               amount={sourceAmount}
+              selection={sourceSelection}
               token={sourceToken}
               tokenBalance={latestSourceBalance?.displayBalance}
               networkImageSource={
@@ -397,14 +427,15 @@ const BridgeView = () => {
               testID={BridgeViewSelectorsIDs.SOURCE_TOKEN_AREA}
               tokenType={TokenInputAreaType.Source}
               onInputPress={() => keypadRef.current?.open()}
+              onSelectionChange={handleSourceSelectionChange}
               onTokenPress={handleSourceTokenPress}
               onMaxPress={handleSourceMaxPress}
               latestAtomicBalance={latestSourceBalance?.atomicBalance}
               isSourceToken
               isQuoteSponsored={isQuoteSponsored}
             />
             <FLipQuoteButton
-              onPress={handleSwitchTokens(destTokenAmount)}
+              onPress={handleFlipTokensPress}
               disabled={
                 !destChainId ||
                 !destToken ||
@@ -484,9 +515,10 @@ const BridgeView = () => {
           ) : (
             <GaslessQuickPickOptions
               token={sourceToken}
+              tokenBalance={latestSourceBalance?.displayBalance}
               onMaxPress={handleSourceMaxPress}
               isQuoteSponsored={isQuoteSponsored}
-              onChange={handleKeypadChange}
+              onAmountSelect={handleSourcePresetAmountSelect}
             />
           )}
         </SwapsKeypad>

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

@@ -609,35 +609,6 @@ export const initialState = {
           },
         },
       },
-      SwapsController: {
-        chainCache: {
-          [ethChainId]: {
-            aggregatorMetadata: null,
-            tokens: null,
-            topAssets: [
-              {
-                address: ethToken1Address,
-                symbol: 'TOKEN1',
-              },
-              {
-                address: ethToken2Address,
-                symbol: 'HELLO',
-              },
-            ],
-            aggregatorMetadataLastFetched: 0,
-            topAssetsLastFetched: 0,
-            tokensLastFetched: 0,
-          },
-          [optimismChainId]: {
-            aggregatorMetadata: null,
-            tokens: null,
-            topAssets: null,
-            aggregatorMetadataLastFetched: 0,
-            topAssetsLastFetched: 0,
-            tokensLastFetched: 0,
-          },
-        },
-      },
       KeyringController: {
         vault: '',
         isUnlocked: true,