feat: Integrate Rewards with Predict

[andrepimenta]

Predict Buy: Rewards Display and Fee Consolidation

Overview

This PR adds rewards point estimation and consolidates fee display in the Predict Buy confirmation screen. Users can now see estimated MetaMask Rewards points they'll earn from their transaction, and view detailed fee breakdowns through an intuitive bottom sheet.

CHANGELOG entry: null

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-12.at.12.52.06.mov

Changes

🎁 Rewards Integration

• Added "Est. points" row to the Predict Buy confirmation screen
  • Displays estimated rewards points based on MetaMask fee
  • Calculation: Math.round(metamaskFee * 100) (1 point per cent spent on MM fee)
  • Position: Last row after "Total"
  • White text with gray info icon for consistency
  • Reuses RewardsAnimations component from Swap/Bridge features
  • Conditional display based on rewardsEnabled feature flag and transaction amount

💰 Fee Display Consolidation

• Consolidated two fee rows into single "Fees" row

  • Previously: Separate "Provider fee" and "MetaMask fee" rows
  • Now: Single "Fees" row showing sum of both fees
  • Added gray info icon that opens detailed breakdown

• New Fee Breakdown Bottom Sheet (PredictFeeBreakdownSheet)

  • Displays individual fee breakdown:
    • Polymarket fee (provider fee)
    • MetaMask fee
  • Opens when user taps info icon next to "Fees"
  • Closes without navigating back (uses shouldNavigateBack={false})

🎨 UI/UX Improvements

• Fee Summary Row Order:

  1. Fees (consolidated, with info icon)
  2. Total
  3. Est. points (when rewards enabled)

• Styling:

  • Est. points text: White (TextColor.Default)
  • Info icons: Gray (IconColor.Alternative)
  • Consistent with design system

Technical Details

Files Modified

Components

• PredictBuyPreview.tsx

  • Import selectRewardsEnabledFlag selector
  • Calculate estimatedPoints from metamaskFee
  • Add isFeeBreakdownVisible state
  • Add handleFeesInfoPress and handleFeeBreakdownClose callbacks
  • Pass rewards props to PredictFeeSummary
  • Conditionally render PredictFeeBreakdownSheet

• PredictFeeSummary.tsx

  • Remove individual fee rows
  • Add consolidated "Fees" row with ButtonIcon
  • Calculate totalFees = providerFee + metamaskFee
  • Move rewards row to last position (after Total)
  • Update text colors (white for Est. points label)
  • Add onFeesInfoPress callback prop

New Files

• PredictFeeBreakdownSheet.tsx

  • Bottom sheet component for fee breakdown
  • Displays provider and MetaMask fees separately
  • Uses shouldNavigateBack={false} to prevent parent modal closure
  • Accepts onClose callback

• PredictFeeBreakdownSheet/index.ts

  • Export file for new component

Localization

• locales/languages/en.json

  {
    "predict.fee_summary.fees": "Fees",
    "predict.fee_summary.provider_fee_label": "Polymarket fee",
    "predict.fee_summary.estimated_points": "Est. points",
    "predict.fee_summary.points_tooltip": "Points",
    "predict.fee_summary.points_tooltip_content_1": "Points are how you earn MetaMask Rewards for completing transactions, like when you swap, bridge, or predict.",
    "predict.fee_summary.points_tooltip_content_2": "Keep in mind this value is an estimate and will be finalized once the transaction is complete. Points can take up to 1 hour to be confirmed in your Rewards balance."
  }

Tests

New Tests (22 total)

• PredictFeeSummary.test.tsx (12 tests)

  • Consolidated fees display and calculation
  • Fees info icon callback handling
  • Rewards row conditional rendering
  • Rewards row positioning
  • Edge cases (zero fees, missing callbacks)

• PredictFeeBreakdownSheet.test.tsx (10 tests - New file)

  • Bottom sheet rendering
  • Fee display (Polymarket and MetaMask)
  • shouldNavigateBack behavior
  • Close callback handling
  • Ref methods exposure

• PredictBuyPreview.test.tsx (10 new tests)

  • Rewards calculation formula
  • Rewards point rounding
  • Feature flag conditional display
  • Fee breakdown sheet visibility
  • Loading state propagation

Updated Tests (1)

• Fixed existing test to expect "Fees" instead of "Provider fee"

Total Test Results: 2,038 tests passing ✅

Rewards Calculation Logic

// Formula: 1 point per cent spent on MetaMask fee
const estimatedPoints = useMemo(
  () => Math.round(metamaskFee * 100),
  [metamaskFee],
);

// Display conditions
const shouldShowRewards = rewardsEnabled && currentValue > 0;

Examples:

• MetaMask fee: $0.50 → 50 points
• MetaMask fee: $1.23 → 123 points
• MetaMask fee: $0.00 → 0 points

Component Reusability

This implementation reuses existing components:

• ✅ RewardsAnimations (from Bridge/Swap)
• ✅ KeyValueRow (component library)
• ✅ ButtonIcon (design system)
• ✅ BottomSheet (design system)
• ✅ Design system tokens (TextColor, IconColor)

Feature Flags

• Rewards display: Controlled by selectRewardsEnabledFlag
• Fee breakdown: Always available

Testing Checklist

• Unit tests for all new components
• Unit tests for modified components
• All existing tests passing (2,038 tests)
• No linter errors
• Tests follow AAA pattern
• Tests follow project guidelines (no "should" in names)
• Edge cases covered (zero values, missing callbacks, etc.)

Manual Testing

Test Scenarios

1. Rewards Display

   • Verify Est. points row appears when rewards enabled
   • Verify points calculation: fee * 100 rounded
   • Verify Est. points row does NOT appear when rewards disabled
   • Verify Est. points row does NOT appear when amount is 0

2. Fee Consolidation

   • Verify single "Fees" row shows sum of provider + MetaMask fees
   • Verify info icon appears next to "Fees" label
   • Verify tapping info icon opens bottom sheet
   • Verify bottom sheet shows individual fee breakdown

3. Bottom Sheet Behavior

   • Verify bottom sheet displays "Polymarket fee" and "MetaMask fee"
   • Verify closing bottom sheet does NOT close parent modal
   • Verify bottom sheet closes on swipe down
   • Verify bottom sheet closes on backdrop tap

4. Visual/Styling

   • Verify Est. points text is white
   • Verify all info icons are gray
   • Verify row order: Fees → Total → Est. points
   • Verify layout on different screen sizes

Before/After

Before

Provider fee     $0.10
MetaMask fee     $0.04
Total            $10.14

After

Fees [i]         $0.14    ← Tappable info icon
Total            $10.14
Est. points [i]  14       ← New rewards row (white text)

Fee Breakdown Sheet (when tapping [i])

╔════════════════════════╗
║ Fees                   ║
╠════════════════════════╣
║ Polymarket fee  $0.10  ║
║ MetaMask fee    $0.04  ║
╚════════════════════════╝

Commit History

1. feat: Add rewards row to Predict Buy confirmation screen - Initial rewards implementation
2. refactor: Consolidate fee rows and add breakdown sheet - Fee consolidation
3. refactor: Move Est. points row to end and use white text - Final positioning and styling
4. test: Add comprehensive tests for rewards and fee breakdown features - Complete test coverage

Related Issues/PRs

• Related to rewards feature integration
• Consistent with Swap/Bridge rewards display patterns

Checklist

• Code follows project coding guidelines
• Code follows React Native UI development guidelines
• Used design system components (@metamask/design-system-react-native)
• Used Tailwind CSS with useTailwind() hook
• No StyleSheet.create() used
• Proper TypeScript types (no any)
• Comprehensive unit tests added
• All tests passing
• No linter errors
• Localization strings added
• Feature flag integrated
• Component reusability maintained
• Follows AAA test pattern
• No breaking changes

---

Note

Adds rewards point estimation and consolidates fee display with a tappable fees breakdown sheet in Predict Buy.

• Predict UI:
  • PredictFeeSummary: Replace separate fee rows with a single "Fees" row (info icon), display total fees, and add "Est. points" row using RewardsAnimations.
  • PredictBuyPreview: Compute estimatedPoints = Math.round(metamaskFee * 100), gate rewards by selectRewardsEnabledFlag, and open fee breakdown via onFeesInfoPress; pass rewards/fees props.
• New Component:
  • PredictFeeBreakdownSheet: Bottom sheet showing per-fee breakdown (Polymarket fee, MetaMask fee), shouldNavigateBack=false, onClose support.
• Localization:
  • Add strings for predict.fee_summary.fees, provider_fee_label, estimated_points, points tooltips/error content.
• Tests:
  • Add tests for PredictFeeBreakdownSheet and rewards/fees behavior; update existing expectations from "Provider fee" to "Fees".

^{Written by Cursor Bugbot for commit 01962c5. This will update automatically on new commits. Configure here.}

[codecov-commenter]

Codecov Report

❌ Patch coverage is 62.96296% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 77.90%. Comparing base (e1acbc5) to head (01962c5).
⚠️ Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
...dict/views/PredictBuyPreview/PredictBuyPreview.tsx	53.33%	3 Missing and 4 partials ⚠️
...components/PredictFeeSummary/PredictFeeSummary.tsx	66.66%	0 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #22546      +/-   ##
==========================================
- Coverage   77.91%   77.90%   -0.02%     
==========================================
  Files        3852     3853       +1     
  Lines       98566    98667     +101     
  Branches    19374    19408      +34     
==========================================
+ Hits        76801    76865      +64     
- Misses      16501    16520      +19     
- Partials     5264     5282      +18     

☔ 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.

[sonarqubecloud]

Quality Gate failed

Failed conditions
78.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud