[pull] main from MetaMask:main#444
Merged
Merged
Conversation
…24337) ## **Description** This PR refactors the PredictFeed component to fix critical UX issues and align with design system standards. **Why:** 1. **Broken Android animations**: The scroll-based header animation was extremely jittery on Android, making the feature unusable 2. **Wrong tab bar component**: We were using a custom tab bar instead of the design system `TabsBar` component **What changed:** 1. **Fixed jittery Android animations**: Replaced continuous scroll-tracking animation with a threshold-based binary show/hide animation that works smoothly on both platforms 2. **Improved header reveal UX**: Users can now reveal the header (balance card) at any scroll position by scrolling up. Previously, users had to scroll ALL THE WAY back to the top before the header would reappear - frustrating when deep in the feed 3. **Correct design system tab bar**: Migrated from custom tab implementation to the `TabsBar` component from `component-library/components-temp/Tabs` 4. **Fixed search overlay state preservation**: When users close the search overlay, the feed now returns to its previous state instead of re-rendering from scratch. This preserves scroll position and loaded content ## **Changelog** CHANGELOG entry: Fix Predict feed animations, tab bar UI and search overlay ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/PRED-203 ## **Manual testing steps** ```gherkin Feature: PredictFeed navigation and animations Scenario: user scrolls through prediction markets (Android animation fix) Given user is on the Predictions screen with markets loaded When user scrolls down past the threshold Then the header should animate out smoothly (no jitter) When user scrolls up from ANY position in the feed Then the header should animate back into view immediately And user should NOT need to scroll all the way to the top Scenario: user switches between category tabs Given user is on the Predictions screen When user swipes left/right or taps a category tab Then the tab content should switch smoothly And the tab bar should match design system styling Scenario: user searches and closes search (state preservation) Given user is on the Predictions screen And user has scrolled down and loaded more markets When user taps the search icon Then a full-screen search overlay should appear When user taps Cancel Then the overlay should close And the feed should be in the SAME state as before (not re-rendered) And scroll position should be preserved ``` ## **Screenshots/Recordings** ### **Before** <!-- Will add recordings showing jittery Android animation and scroll-to-top requirement --> ### **After** <!-- Will add recordings showing smooth animation and reveal-from-anywhere behavior --> https://github.com/user-attachments/assets/fe6a06de-5c93-4f04-a8b0-45b131463405 ## **Pre-merge author checklist** - [x] 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). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. ## **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. --- ### Technical Details **Files Changed:** | Action | Files | |--------|-------| | Created | `hooks/useFeedScrollManager.ts` - New scroll hook with threshold-based animation | | Rewritten | `views/PredictFeed/PredictFeed.tsx` - PagerView + inline components + design system TabsBar | | Rewritten | `views/PredictFeed/PredictFeed.test.tsx` - Updated tests | | Updated | `routes/index.tsx` - Import path change | | Deleted | `components/PredictMarketList/`, `components/MarketListContent/`, `components/SearchBox/`, `components/PredictFeedHeader/`, `hooks/useSharedScrollCoordinator.ts`, `types/scrollCoordinator.ts` | **Net change: -1,865 lines** (deleted fragmented components, consolidated into single file) <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Modernizes the predictions feed and removes legacy components. > > - Implements new `useFeedScrollManager` with threshold-based, binary header show/hide animation; adds comprehensive tests > - Rewrites `views/PredictFeed/PredictFeed.tsx` to use `TabsBar` + `PagerView` tabs, per-tab `FlashList`, and an inline full-screen search overlay > - Preserves feed state across search, and handles loading/error/empty states within the new feed > - Removes old `PredictMarketList`, `MarketListContent`, `PredictFeedHeader`, `SearchBox`, and `useSharedScrollCoordinator` (and related tests/types) > - Updates `routes/index.tsx` import path > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit d67e199. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
## **Description**
This PR introduces Fastlane integration to automate iOS TestFlight
deployments in the Bitrise CI/CD pipeline. Fastlane provides a robust,
maintainable solution for uploading builds to App Store Connect and
distributing them to TestFlight external testing groups.
**Reason for change:**
Previously, iOS builds were uploaded to TestFlight manually or through
less maintainable methods. Fastlane provides a standardized,
well-documented approach to automate TestFlight deployments with proper
error handling, API key authentication, and changelog management.
**Improvement/solution:**
- **Fastlane configuration**: Added Fastlane gem to `ios/Gemfile` and
created `Fastfile` with `upload_to_testflight_only` lane for uploading
pre-built IPA files
- **App Store Connect API authentication**: Implemented App Store
Connect API key authentication (no Apple ID required) with proper
validation and error handling
- **Reusable scripts**: Created
`scripts/setup-app-store-connect-api-key.sh` and
`scripts/find-ipa-file.sh` for reusable API key setup and IPA file
discovery across CI/CD platforms
- **Bitrise integration**: Added `upload_ios_main_to_testflight`
workflow that automatically uploads builds to TestFlight after iOS
builds complete
- **Changelog generation**: Implemented automatic changelog generation
from workflow name, branch, and commit hash, with proper shell variable
expansion to ensure changelogs appear in TestFlight builds
- **Pipeline configuration**: Added
`nightly_rc_builds_to_testflight_pipeline` and
`nightly_exp_builds_to_testflight_pipeline` to chain builds with
TestFlight uploads
The Fastlane setup uses App Store Connect API keys for authentication,
supports external testing group distribution, and automatically
generates changelogs with build metadata.
## **Changelog**
CHANGELOG entry: null
## **Related issues**
Fixes:
## **Manual testing steps**
```gherkin
Feature: Fastlane TestFlight deployment
Scenario: iOS build is automatically uploaded to TestFlight
Given a Bitrise workflow that builds iOS main app
When the build completes successfully
Then the upload_ios_main_to_testflight workflow should run automatically
And the IPA should be uploaded to App Store Connect via Fastlane
And the build should be distributed to "MetaMask Fastlane Test" external testing group
And the changelog should include workflow name, branch, and commit hash
And the changelog should appear in the TestFlight build details
```
## **Screenshots/Recordings**
### **Before**
iOS builds required manual upload to TestFlight or used less
maintainable automation methods.
### **After**
iOS builds are automatically uploaded to TestFlight via Fastlane with:
- Automatic changelog generation (format: "Workflow: {workflow_name} |
Branch: {branch} | Commit: {commit_hash}")
- App Store Connect API key authentication
- Distribution to external testing groups
- Proper error handling and validation
## **Pre-merge author checklist**
- [x] 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).
- [x] 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.
## **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.
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Automates iOS TestFlight distribution via Fastlane and wires it into
Bitrise pipelines.
>
> - Adds `ios/fastlane/` (Appfile, Fastfile, README, .gitignore) and
includes `fastlane` gem in `ios/Gemfile` (lockfile updated)
> - New CI scripts: `scripts/setup-app-store-connect-api-key.sh`,
`scripts/find-ipa-file.sh`, `scripts/upload-to-testflight.sh`
> - Bitrise: introduces `exp_builds_to_testflight_pipeline` and
`rc_builds_to_testflight_pipeline`; new `upload_ios_main_to_testflight`
workflow that pulls artifacts, sets up App Store Connect API key, and
uploads IPA via Fastlane; persists IPA path; minor env additions
> - Bumps build numbers to `3418`: Android `versionCode` in
`android/app/build.gradle`, iOS `CURRENT_PROJECT_VERSION` across Xcode
configs, and Bitrise `VERSION_NUMBER`/`FLASK_VERSION_NUMBER`
> - Updates `.github/CODEOWNERS` to include `ios/fastlane/` and new
scripts under mobile-admins
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
f069853. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---------
Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com>
Co-authored-by: sethkfman <10342624+sethkfman@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )