Description

Adds a Quick Buy entry point to the Token (Asset) Details screen as a third icon button (a filled lightning bolt) in the sticky footer, next to the existing Buy/Sell and Swap actions. Tapping it opens the existing Quick Buy bottom sheet — the same UX that Top Traders positions launch today — pre-targeted at the token currently being viewed.

To make this reuse clean, the Quick Buy module is generalized so its core no longer depends on Social-API position shapes. Each host (Top Traders, Asset Details) becomes responsible for normalizing its chain id into a canonical CaipChainId at the adapter layer.

Why

• Reach: Quick Buy was reachable only from Top Traders positions. Surfacing it on Token Details gives every supported asset a one-tap purchase path.
• Reuse: same bottom sheet, same internal flow, same analytics funnel — only the entry point and the target token change.
• Architecture: pushes host-specific concerns (chain string → CAIP normalization, feature set, analytics source) out of the Quick Buy core and into per-host adapters. The Quick Buy core now consumes a single canonical QuickBuyTarget shape regardless of where it was invoked from.

What changed

Quick Buy core (generalization, no behavior change)

• QuickBuyTarget.chain is now CaipChainId (was a Social-API chain name string).
• useQuickBuyController and useQuickBuySetup consume target.chain as CAIP directly — no more internal chainNameToId lookup.
• TraderPositionQuickBuy (the existing host adapter) does the position-name → CAIP conversion locally via positionToQuickBuyTarget, which now returns QuickBuyTarget | null when a chain name can't be mapped.
• Tests updated to match the new contract (helper createTarget to keep type-safety around the new nullable mapper).

New Asset Details entry point

• TokenDetailsStickyFooter gains an optional third button rendered only when onQuickBuyPress is provided. Styled as a 48×48 circular icon-only button with the success-accent color, matching the Figma spec for Swap-Next.
• AssetDetailsQuickBuy adapter maps TokenDetailsRouteParams (TokenI-shaped) → QuickBuyTarget, normalizing chainId to CAIP via formatChainIdToCaip with a safe null fallback when the chain can't be parsed.
• TokenDetails.tsx wires the visibility state and renders the adapter as an overlay.
• Analytics source 'asset_details' added to QuickBuySheetSource; sticky footer tracking gains a 'quick_buy' CTA type.

Icon (temporary)

• Ships a local flash-filled.svg rendered through ButtonAnimated because the Design System doesn't yet expose IconName.FlashFilled.
• Companion upstream PR opened against MetaMask/metamask-design-system: feat(shared,react,react-native): add FlashFilled icon metamask-design-system#1191. Once that lands and @metamask/design-system-react-native publishes a new minor, a follow-up PR will replace the local SVG with IconName.FlashFilled.

Out of scope

• The Quick Buy module is kept in its current location under Views/SocialLeaderboard/TraderPositionView/components/QuickBuy. Relocating it to a feature-neutral folder is a separate refactor.
• Asset-Details-specific token gating (e.g. unsupported chains, native asset edge cases) — the adapter falls back to a null target, which keeps the sheet inert; finer gating to be added if the analytics flag a problem post-launch.

Changelog

CHANGELOG entry: Added a Quick Buy lightning-bolt button to the Asset Details screen for one-tap token purchases.

Related issues

Fixes:

Manual testing steps

Feature: Asset Details Quick Buy entry point

  Scenario: User opens Quick Buy from Token Details
    Given the user has a wallet imported
    And the user is on the Token Details screen for a supported token (e.g. ETH on Mainnet)

    When the user taps the lightning-bolt button in the sticky footer
    Then the Quick Buy bottom sheet opens
    And the destination token is pre-filled with the asset being viewed
    And haptic feedback fires on press

  Scenario: User dismisses the Quick Buy sheet
    Given the Quick Buy sheet is open from Token Details

    When the user dismisses the sheet (backdrop tap or swipe down)
    Then the Token Details screen is visible again
    And the sticky footer remains interactive

  Scenario: Token has an unsupported chain
    Given the user is on Token Details for a token whose chain can't be CAIP-normalized

    When the user taps the lightning-bolt button
    Then the sheet stays inert (no crash, no broken state)

  Scenario: Regression — Top Traders Quick Buy still works
    Given the user has a Top Traders profile open
    And the user is viewing a trader's position

    When the user taps the Quick Buy CTA on that position
    Then the Quick Buy sheet opens with the position's token pre-targeted
    And the existing flow behaves identically to before this PR

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

Made with Cursor