Skip to content

fix: NFT/token/DeFi full view headers and NFT grid layout#31010

Merged
juanmigdr merged 3 commits into
mainfrom
fix/nft-rcperience-issues
Jun 4, 2026
Merged

fix: NFT/token/DeFi full view headers and NFT grid layout#31010
juanmigdr merged 3 commits into
mainfrom
fix/nft-rcperience-issues

Conversation

@juanmigdr

@juanmigdr juanmigdr commented Jun 3, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

Description

  • Fix NftDetails screen having extra padding around the entire screen due to padding: 16 on the SafeAreaView wrapper, and
    reduce excess spacing between the header, image, and title
  • Fix NftFullView header using BottomSheetHeader (a modal-only component) — replace with a standard header row using
    absolute-positioned title and correct safe area handling
  • Fix TokensFullView and DeFiFullView headers using deprecated local HeaderBase + ButtonIcon — align with DS components and
    correct safe area handling
  • Fix header title shifting left mid-animation on TokensFullView, NftFullView, and DeFiFullView by applying top inset via
    useSafeAreaInsets at the container level and using an absolutely-positioned title, which is immune to HeaderBase's
    onLayout-based centering re-render
  • Fix NFT grid items with no image collapsing to zero height (causing the network badge to overflow) by overriding flex: 1
    from textContainer with flex: 0 so aspectRatio can correctly determine the placeholder size
  • Fix NFT detail screen showing a portrait-shaped placeholder instead of a square when there is no image

Changelog

CHANGELOG entry: fix NFT/token/DeFi full view headers and NFT grid layout

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3318

Manual testing steps

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

Before

After

Pre-merge author checklist

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

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.

Note

Low Risk
UI-only layout and header refactors with updated unit tests; no auth, data, or payment logic touched.

Overview
Tokens, NFT, and DeFi full-view screens now share the same header pattern: design-system ButtonIcon + centered Text, top inset from useSafeAreaInsets, and SafeAreaView edges that exclude the top so titles stay centered during navigation animations. NftFullView drops modal-only BottomSheetHeader; Tokens and DeFi drop legacy HeaderBase.

NftDetails loses extra wrapper padding and tightens media section vertical spacing so the header, image, and title sit closer together.

CollectibleMedia applies noFlex (flex: 0) on token-ID fallbacks so grid cells without images keep square dimensions instead of collapsing and overflowing the chain badge.

Reviewed by Cursor Bugbot for commit 6e5d782. Bugbot is set up for automated code reviews on this repo. Configure here.

@juanmigdr juanmigdr requested a review from a team as a code owner June 3, 2026 12:31
@juanmigdr juanmigdr enabled auto-merge June 3, 2026 12:31
@github-actions github-actions Bot added size-XS risk:medium AI analysis: medium risk labels Jun 3, 2026
@codecov-commenter

codecov-commenter commented Jun 3, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.84%. Comparing base (c24bb5f) to head (648cabe).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #31010      +/-   ##
==========================================
- Coverage   82.84%   82.84%   -0.01%     
==========================================
  Files        5574     5574              
  Lines      143873   143873              
  Branches    33409    33409              
==========================================
- Hits       119187   119185       -2     
- Misses      16693    16694       +1     
- Partials     7993     7994       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions github-actions Bot added size-M and removed size-XS labels Jun 3, 2026
@juanmigdr juanmigdr changed the title fix: NFT experience issues fix: NFT/token/DeFi full view headers and NFT grid layout Jun 3, 2026
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeWalletPlatform
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 78%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are UI/styling refactors across four "Full View" screens and NFT media:

  1. CollectibleMedia.tsx/.styles.ts: Added noFlex style (flex: 0) to the text container in NFT media display. Minor layout fix.

  2. NftDetails.styles.ts: Adjusted padding values (paddingTop: 16→4, paddingBottom: 40→16) and removed padding: 16 from wrapper. Cosmetic spacing changes.

  3. NftFullView.tsx: Replaced BottomSheetHeader (component-library) with a custom header using @metamask/design-system-react-native components (Box, ButtonIcon, Text). Added useSafeAreaInsets for proper safe area handling. Functional equivalence maintained.

  4. TokensFullView.tsx: Replaced HeaderBase + old ButtonIcon (component-library) with design-system equivalents. Added useSafeAreaInsets. Same pattern as NftFullView.

  5. DeFiFullView.tsx: Same refactoring pattern as TokensFullView.

  6. Test files: Updated unit tests to match new component structure (testID changes, text-based assertions).

Impact Analysis:

  • No controller, Engine, or navigation structure changes
  • No logic changes — purely UI component library migration and safe area handling
  • TokensFullView is imported by TrendingTokensFullView and TokenListPageLayout (Trending feature), making SmokeWalletPlatform the most relevant tag (Trending tab tests token full views)
  • NFT and DeFi full views are wallet platform features but have no direct E2E test coverage found
  • No E2E test files directly reference these components
  • Risk is low: these are header component swaps with equivalent functionality

SmokeWalletPlatform is selected because TokensFullView is embedded in the Trending tab (TrendingTokensFullView uses TokensFullView as a base), and the tag description explicitly states "changes to Tokens views (headers, lists, full views) that are embedded in Trending affect this tag."

Performance Test Selection:
The changes are header component refactoring (swapping component-library components for design-system equivalents) and minor padding adjustments. These are not expected to impact rendering performance in a measurable way. The core list rendering logic in Tokens, NftGrid, and DeFiPositionsList components is unchanged. No performance-sensitive code paths (data fetching, state management, list virtualization) were modified.

View GitHub Actions results

@juanmigdr juanmigdr added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Jun 4, 2026
@juanmigdr juanmigdr added this pull request to the merge queue Jun 4, 2026
Merged via the queue into main with commit d43711d Jun 4, 2026
403 of 408 checks passed
@juanmigdr juanmigdr deleted the fix/nft-rcperience-issues branch June 4, 2026 05:31
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@Prithpal-Sooriya Prithpal-Sooriya Prithpal-Sooriya approved these changes

@salimtb salimtb salimtb approved these changes

Assignees

No one assigned

Labels

risk:medium AI analysis: medium risk size-M skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. team-assets

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@juanmigdr @codecov-commenter @Prithpal-Sooriya @salimtb