feat: add Crypto Movers Quick Buy and search keyboard coordination (#32273)

Wire Quick Buy on Crypto Movers full view with explore_now analytics,
dismiss keyboard when Quick Buy opens on search surfaces, and map
explore sources to QUICK_BUY_EXPLORE for feature tracking.

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->
<!--
mms-check directive vocabulary — read by
.github/scripts/shared/pr-template-checks.ts
at module load to build the validation plan. Directives are invisible in
rendered
markdown and must NOT be removed or edited without updating the
validator registry.

  type=text           Section must contain non-placeholder prose.
  type=changelog      Section must have a valid CHANGELOG entry: line.
type=issue-link Section must have a Fixes:/Closes:/Refs: line with a
value.
type=manual-testing Section must have real testing steps or an explicit
N/A.
type=screenshot Section must have evidence (image/URL) or an explicit
N/A.
type=checklist Section must have all checkboxes consciously checked.
required=true|false Whether a missing/invalid section runs the validator
at all.
blocking=true|false Whether a failure of this check fails the CI
workflow.
Default: false — failures are shown as warnings in the sticky
                      comment but do not block the PR.

Sections without a directive are checked for structural presence only.
-->

## **Description**

<!-- mms-check: type=text required=true -->

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

## **Changelog**

<!-- mms-check: type=changelog required=true blocking=true -->

<!--
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: add Crypto Movers Quick Buy and search keyboard
coordination

## **Related issues**

<!-- mms-check: type=issue-link required=true -->

Fixes:

## **Manual testing steps**

<!-- mms-check: type=manual-testing required=true -->

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

<!-- mms-check: type=screenshot required=true -->

<!-- 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/72e5032d-1d19-4cf3-bbb4-9219e4c2c8cf


## **Pre-merge author checklist**

<!-- mms-check: type=checklist required=true -->

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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).
- [ ] 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
- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> UI coordination and navigation/analytics params only; no auth,
payments, or data-layer changes. Covered by new hook unit tests and an
entry-point title test.
> 
> **Overview**
> Adds **`useQuickBuySearchKeyboard`** so Explore screens that mix
inline search and Quick Buy keep the keyboard and bottom sheet from
competing: opening Quick Buy dismisses the keyboard, and bringing the
search keyboard back closes an open Quick Buy sheet. The hook is wired
into **trending/stocks full views**, **explore search**
(`ExploreSearchScreen`, `ExploreSearchResults`), with a shared
**`closeQuickBuy`** callback.
> 
> **Crypto Movers “View all”** from the Now tab now navigates to the
trending tokens full view with **`entryPoint: 'crypto_movers'`** and
**`quickBuySource: 'explore_now'`**, which drives the **Crypto Movers**
header title and Quick Buy analytics source (default remains
**`explore_trending`** for other entry paths).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9d2f1fc. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: salimtb

app/components/UI/Trending/Views/RWATokensFullView/RWATokensFullView.tsx

@@ -16,6 +16,7 @@ import {
   EXPLORE_QUICK_BUY_VARIANTS,
   EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
 } from '../../../../Views/TrendingView/search/abTestConfig';
+import { useQuickBuySearchKeyboard } from '../../hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard';
 
 const RWATokensFullView = () => {
   const [quickTradeToken, setQuickTradeToken] = useState<TrendingAsset | null>(
@@ -57,6 +58,15 @@ const RWATokensFullView = () => {
     }
   }, [refetchStocks, filters]);
 
+  const closeQuickBuy = useCallback(() => {
+    setQuickTradeToken(null);
+  }, []);
+
+  useQuickBuySearchKeyboard(
+    quickBuyVariant.showQuickTradeButton ? quickTradeToken : null,
+    closeQuickBuy,
+  );
+
   return (
     <TokenListPageLayout
       title={strings('trending.stocks')}
@@ -75,7 +85,7 @@ const RWATokensFullView = () => {
       quickBuyNode={
         <TrendingQuickBuy
           token={quickTradeToken}
-          onClose={() => setQuickTradeToken(null)}
+          onClose={closeQuickBuy}
           source="explore_stocks"
         />
       }

app/components/UI/Trending/Views/TrendingTokensFullView/TrendingTokensFullView.test.tsx

@@ -263,6 +263,19 @@ describe('TrendingTokensFullView', () => {
     expect(getByTestId('trending-tokens-header-back-button')).toBeOnTheScreen();
   });
 
+  it('shows Crypto movers title when opened from the Now tab entry point', () => {
+    mockUseRoute.mockReturnValue({
+      params: {
+        entryPoint: 'crypto_movers',
+        quickBuySource: 'explore_now',
+      },
+    });
+
+    const { getByText } = renderTrendingFullView();
+
+    expect(getByText(strings('trending.crypto_movers'))).toBeOnTheScreen();
+  });
+
   it('navigates back when back button is pressed', async () => {
     const mocks = arrangeMocks();
     const { getByTestId } = renderTrendingFullView();

app/components/UI/Trending/Views/TrendingTokensFullView/TrendingTokensFullView.tsx

@@ -35,9 +35,19 @@ import {
   EXPLORE_QUICK_BUY_VARIANTS,
   EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
 } from '../../../../Views/TrendingView/search/abTestConfig';
+import type { QuickBuySheetSource } from '../../../../Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/analytics';
+import { useQuickBuySearchKeyboard } from '../../hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard';
+
+export type TrendingTokensFullViewEntryPoint =
+  | 'crypto_movers'
+  | 'trending_tokens';
 
 export interface TrendingTokensFullViewParams {
   initialTimeOption?: TimeOption;
+  /** Quick Buy analytics source. Defaults to `explore_trending`. */
+  quickBuySource?: QuickBuySheetSource;
+  /** Entry surface for title and analytics context. */
+  entryPoint?: TrendingTokensFullViewEntryPoint;
 }
 
 export interface TrendingTokensDataProps {
@@ -133,6 +143,11 @@ const TrendingTokensFullView = () => {
       RouteProp<{ TrendingTokensFullView: TrendingTokensFullViewParams }>
     >();
   const initialTimeOption = params?.initialTimeOption;
+  const quickBuySource = params?.quickBuySource ?? 'explore_trending';
+  const pageTitle =
+    params?.entryPoint === 'crypto_movers'
+      ? strings('trending.crypto_movers')
+      : strings('trending.trending_tokens');
   const filters = useTokenListFilters({ timeOption: initialTimeOption });
 
   const [sortBy, setSortBy] = useState<SortTrendingBy | undefined>(
@@ -247,6 +262,15 @@ const TrendingTokensFullView = () => {
     }
   }, [refetchTokensSection, setRefreshing]);
 
+  const closeQuickBuy = useCallback(() => {
+    setQuickTradeToken(null);
+  }, []);
+
+  useQuickBuySearchKeyboard(
+    quickBuyVariant.showQuickTradeButton ? quickTradeToken : null,
+    closeQuickBuy,
+  );
+
   const timeFilterButton = (
     <FilterButton
       testID="24h-button"
@@ -258,7 +282,7 @@ const TrendingTokensFullView = () => {
 
   return (
     <TokenListPageLayout
-      title={strings('trending.trending_tokens')}
+      title={pageTitle}
       testID="trending-tokens-header"
       filters={filters}
       tokens={trendingTokens}
@@ -283,8 +307,8 @@ const TrendingTokensFullView = () => {
       quickBuyNode={
         <TrendingQuickBuy
           token={quickTradeToken}
-          onClose={() => setQuickTradeToken(null)}
-          source="explore_trending"
+          onClose={closeQuickBuy}
+          source={quickBuySource}
         />
       }
     />

app/components/UI/Trending/hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard.test.ts

@@ -0,0 +1,82 @@
+import { renderHook, act } from '@testing-library/react-native';
+import type { TrendingAsset } from '@metamask/assets-controllers';
+import { Keyboard, Platform } from 'react-native';
+import { useQuickBuySearchKeyboard } from './useQuickBuySearchKeyboard';
+
+const mockToken: TrendingAsset = {
+  assetId: 'eip155:1/slip44:60',
+  symbol: 'ETH',
+  name: 'Ethereum',
+  decimals: 18,
+  price: '2000',
+  aggregatedUsdVolume: 1_000_000,
+  marketCap: 100_000_000,
+};
+
+describe('useQuickBuySearchKeyboard', () => {
+  let keyboardShowCallback: (() => void) | undefined;
+
+  beforeEach(() => {
+    keyboardShowCallback = undefined;
+    jest.spyOn(Keyboard, 'dismiss').mockImplementation(() => undefined);
+    jest
+      .spyOn(Keyboard, 'addListener')
+      .mockImplementation(
+        (event, callback: Parameters<typeof Keyboard.addListener>[1]) => {
+          if (
+            event ===
+            (Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow')
+          ) {
+            keyboardShowCallback = callback as () => void;
+          }
+          return { remove: jest.fn() } as unknown as ReturnType<
+            typeof Keyboard.addListener
+          >;
+        },
+      );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('dismisses the keyboard when Quick Buy opens', () => {
+    const closeQuickBuy = jest.fn();
+
+    const { rerender } = renderHook(
+      (props: { token: TrendingAsset | null }) =>
+        useQuickBuySearchKeyboard(props.token, closeQuickBuy),
+      { initialProps: { token: null as TrendingAsset | null } },
+    );
+
+    expect(Keyboard.dismiss).not.toHaveBeenCalled();
+
+    rerender({ token: mockToken });
+
+    expect(Keyboard.dismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it('closes Quick Buy when the search keyboard appears', () => {
+    const closeQuickBuy = jest.fn();
+
+    renderHook(() => useQuickBuySearchKeyboard(mockToken, closeQuickBuy));
+
+    act(() => {
+      keyboardShowCallback?.();
+    });
+
+    expect(closeQuickBuy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not close Quick Buy when the keyboard appears and the sheet is closed', () => {
+    const closeQuickBuy = jest.fn();
+
+    renderHook(() => useQuickBuySearchKeyboard(null, closeQuickBuy));
+
+    act(() => {
+      keyboardShowCallback?.();
+    });
+
+    expect(closeQuickBuy).not.toHaveBeenCalled();
+  });
+});

app/components/UI/Trending/hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard.ts

@@ -0,0 +1,39 @@
+import type { TrendingAsset } from '@metamask/assets-controllers';
+import { useEffect, useRef } from 'react';
+import { Keyboard, Platform } from 'react-native';
+
+/**
+ * Explore surfaces that combine inline search with the Quick Buy sheet —
+ * keeps the search keyboard and bottom sheet mutually exclusive:
+ * - opening Quick Buy dismisses the search keyboard
+ * - showing the search keyboard closes Quick Buy
+ */
+export function useQuickBuySearchKeyboard(
+  quickTradeToken: TrendingAsset | null,
+  closeQuickBuy: () => void,
+): void {
+  const quickTradeTokenRef = useRef(quickTradeToken);
+  quickTradeTokenRef.current = quickTradeToken;
+
+  const closeQuickBuyRef = useRef(closeQuickBuy);
+  closeQuickBuyRef.current = closeQuickBuy;
+
+  useEffect(() => {
+    if (quickTradeToken) {
+      Keyboard.dismiss();
+    }
+  }, [quickTradeToken]);
+
+  useEffect(() => {
+    const showEvent =
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+
+    const subscription = Keyboard.addListener(showEvent, () => {
+      if (quickTradeTokenRef.current) {
+        closeQuickBuyRef.current();
+      }
+    });
+
+    return () => subscription.remove();
+  }, []);
+}

app/components/Views/TrendingView/Views/ExploreSearchScreen/ExploreSearchScreen.tsx

@@ -14,6 +14,7 @@ import {
   EXPLORE_QUICK_BUY_VARIANTS,
   EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
 } from '../../search/abTestConfig';
+import { useQuickBuySearchKeyboard } from '../../../../UI/Trending/hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
@@ -82,6 +83,12 @@ const FullFeedList: React.FC<FullFeedListProps> = ({
     EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
   );
 
+  const closeQuickBuy = useCallback(() => {
+    setQuickTradeToken(null);
+  }, []);
+
+  useQuickBuySearchKeyboard(quickTradeToken, closeQuickBuy);
+
   useEffect(() => {
     flashListRef.current?.scrollToOffset({ offset: 0, animated: false });
   }, [searchQuery]);
@@ -173,10 +180,7 @@ const FullFeedList: React.FC<FullFeedListProps> = ({
         onEndReachedThreshold={0.3}
         ListFooterComponent={footer}
       />
-      <TrendingQuickBuy
-        token={quickTradeToken}
-        onClose={() => setQuickTradeToken(null)}
-      />
+      <TrendingQuickBuy token={quickTradeToken} onClose={closeQuickBuy} />
     </>
   );
 };

app/components/Views/TrendingView/search/ExploreSearchResults.tsx

@@ -49,6 +49,7 @@ import {
   EXPLORE_QUICK_BUY_VARIANTS,
   EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
 } from './abTestConfig';
+import { useQuickBuySearchKeyboard } from '../../../UI/Trending/hooks/useQuickBuySearchKeyboard/useQuickBuySearchKeyboard';
 
 const POPULAR_ASSETS: TrendingAsset[] = [
   {
@@ -119,6 +120,12 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
     EXPLORE_QUICK_BUY_EXPOSURE_METADATA,
   );
 
+  const closeQuickBuy = useCallback(() => {
+    setQuickTradeToken(null);
+  }, []);
+
+  useQuickBuySearchKeyboard(quickTradeToken, closeQuickBuy);
+
   const { onScrollBeginDrag, resetScrollTracking } = useScrollTracking(
     'scrolled',
     searchQuery,
@@ -383,10 +390,7 @@ const ExploreSearchResults: React.FC<ExploreSearchResultsProps> = ({
         ListFooterComponent={renderFooter}
         onScrollBeginDrag={onScrollBeginDrag}
       />
-      <TrendingQuickBuy
-        token={quickTradeToken}
-        onClose={() => setQuickTradeToken(null)}
-      />
+      <TrendingQuickBuy token={quickTradeToken} onClose={closeQuickBuy} />
     </Box>
   );
 };

app/components/Views/TrendingView/tabs/NowTab.test.tsx

@@ -714,7 +714,11 @@ describe('NowTab — Crypto Movers', () => {
 
     expect(mockNavigate).toHaveBeenCalledWith(
       Routes.WALLET.TRENDING_TOKENS_FULL_VIEW,
-      { initialTimeOption: '1h' },
+      {
+        initialTimeOption: '1h',
+        entryPoint: 'crypto_movers',
+        quickBuySource: 'explore_now',
+      },
     );
   });
 

app/components/Views/TrendingView/tabs/NowTab.tsx

@@ -316,6 +316,8 @@ const NowTabContent: React.FC<TabProps> = ({
               onViewAll={() =>
                 navigation.navigate(Routes.WALLET.TRENDING_TOKENS_FULL_VIEW, {
                   initialTimeOption: CRYPTO_MOVERS_TIME_OPTION,
+                  entryPoint: 'crypto_movers',
+                  quickBuySource: 'explore_now',
                 })
               }
               testID="section-header-view-all-crypto_movers"