feat: display Hyperliquid perp positions in Social Leaderboard (TSA-628)

[joaosantos15]

Description

Adds Hyperliquid (perps) support to the Social Leaderboard UI — the second step of the perps work, consuming the perp fields now exposed by @metamask/social-controllers and the social API.

What changed

• New shared primitives: a PerpBadges component (leverage pill + LONG/SHORT pill) and utils/perp.ts helpers (isPerpPosition/isPerpTrade + long/short direction resolution), so perp classification lives in one place.
• getPositionNetworkBadge resolves the Hyperliquid network logo (HyperEVM image source) for the token avatar badge, without adding hyperliquid to chainNameToId (so the spot price/QuickBuy paths still treat it as unsupported).
• Trader profile position rows show the HL network badge + leverage + long/short for perps; spot rows are unchanged.
• Position detail header shows the same badges; trade rows read "opened/closed" with leverage + direction for perp fills.
• The position detail footer swaps the single Buy CTA for Long/Short buttons on perps (intentional placeholders — not wired to a trade flow yet). The chart shows its existing no-data placeholder since perp pricing isn't available yet.
• Pins @metamask/social-controllers to the perps preview build so the new Position/Trade perp fields are typed/available.

Motivation: unblock the mobile Perps leaderboard/position UX (perp metadata was being dropped because the client types/UI didn't model it).

Changelog

CHANGELOG entry: Added Hyperliquid perpetuals to the Social Leaderboard — trader profiles and position details now show leverage, long/short direction, and the Hyperliquid network badge.

Related issues

Fixes: TSA-628

Depends on:

• feat(social-controllers): expose perp metadata on Position and Trade types core#9094 (@metamask/social-controllers perp fields — pinned here as a preview build until released)
• consensys-vertical-apps/va-mmcx-social-api#86 (perp DTO passthrough + chains=all + gated perp notifications)

Manual testing steps

Feature: Hyperliquid perps in the Social Leaderboard

  Scenario: viewing a trader's perp positions
    Given a trader has open Hyperliquid perp positions
    When I open their profile in the Social Leaderboard
    Then each perp position shows the Hyperliquid network badge, its leverage (e.g. 5x), and LONG/SHORT
    And spot positions render unchanged

  Scenario: opening a perp position detail
    Given I am on a trader profile with a perp position
    When I tap that position
    Then the header shows the token with its leverage and long/short badges
    And the trades list shows "opened"/"closed" rows with leverage + direction
    And the footer shows Long and Short buttons (placeholders) instead of Buy
    And the chart shows the no-data placeholder

Local setup: point SOCIAL_API_URL at a social-api running the perps branch (va-mmcx-social-api#86), which serves Hyperliquid positions via chains=all.

Screenshots/Recordings

Before

Spot-only positions; no leverage/direction/HL badge.

After

To be captured on-device before marking Ready for review — matches the approved designs (profile list with 5x LONG / 8x SHORT rows + HL badge, and the position detail with leverage/direction badges and Long/Short footer).

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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[mm-token-exchange-service]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• PR body does not match pull-request-template.md (one or more section headings are missing). See https://github.com/MetaMask/metamask-mobile/blob/main/.github/scripts/shared/pr-template-checks.ts#L15-L23.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask/​social-controllers@​2.2.0 ⏵ 2.2.1-preview-a3e0ef7eb

View full report

[bengotow]

hmm afaik there shouldn't be perp-classified fills that don't have a perpPositionType - if you saw some in the API responses let's sync up about it! There are a lot of event types on HL because the chain natively implements several forms of liquidation but I think we assign a perpPositionType to all of those.

[bengotow]

hmm I think this could work but I generally worry that the multiple paths in the data => display mapping here could make things hard to debug. Maybe we can do some data integrity checks on the clicker side and/or add stronger perp data types so that this isn't necessary.

This defensiveness may be here because perpPositionType is nullable in Clicker API schema, but it'd really be better expressed as a union type - for the perps side of the union, it is always populated.