Skip to content

feat(card): show compact spending limit on Card Home for Solana limited tokens#29662

Merged
Brunonascdev merged 2 commits into
mainfrom
fix/mm-card-solana-spending-limit
May 4, 2026
Merged

feat(card): show compact spending limit on Card Home for Solana limited tokens#29662
Brunonascdev merged 2 commits into
mainfrom
fix/mm-card-solana-spending-limit

Conversation

@Brunonascdev

@Brunonascdev Brunonascdev commented May 4, 2026

Copy link
Copy Markdown
Contributor

Description

Card Home only showed the spending limit progress bar for EVM chains (isEvmChain), because the original cap is resolved from on-chain Approval logs in BaanxProvider. Solana funding tokens in Limited status therefore showed nothing, even though the Baanx API already returns the remaining allowance as spendingCap.

This change:

  1. Removes the EVM-only gate on showSpendingLimitProgress in CardHome.tsx, while keeping isSpendingLimitSupportedToken so AUSDC / AMUSD stay excluded.
  2. Adds hasOriginalAllowance to SpendingLimitProgressBar: when originalSpendingCap is absent (typical for Solana; also possible for EVM if log fetch fails), the component renders a compact row: same divider and “Spending Limit” label, then <remaining> <symbol> <localized “available”> with no progress bar (we cannot show consumed vs total without the original cap).
  3. Internationalizes the trailing word via card.card_home.spending_limit_available in locales/languages/en.json.
  4. Updates tests: SpendingLimitProgressBar compact-mode coverage; CardHome Solana limited case and the EVM “undefined allowance” case now expect the compact string instead of a misleading 0/0 full-bar display.

Trade-off: Solana (and any asset without originalSpendingCap) does not get a progress bar until a backend field or on-chain read path exists; users still see that spending is limited and how much remains.

Changelog

CHANGELOG entry: Added a compact spending limit indicator on Card Home for limited Solana card funding tokens, showing remaining allowance when the original cap is not available.

Related issues

Fixes: #29550

Manual testing steps

Feature: Card Home spending limit for Solana limited tokens

  Scenario: Authenticated user with Solana primary asset in limited spending
    Given the user is logged into MetaMask Card and authenticated
    And the primary funding asset is on Solana mainnet CAIP chain
    And the asset status is limited spending (not full / not inactive)
    And the token symbol is not in the unsupported list (e.g. not AUSDC / AMUSD)

    When the user opens Card Home

    Then the spending limit section is visible with the label "Spending Limit"
    And the line shows the remaining amount, symbol, and the localized "available" suffix
    And no horizontal progress bar is shown for that compact state

  Scenario: Authenticated user with EVM asset and resolved original cap
    Given the same as above but the primary asset is EVM and `originalSpendingCap` is present from the provider

    When the user opens Card Home

    Then the full progress bar is shown with consumed/total and the progress bar control

Screenshots/Recordings

N/A — change is small UI copy/layout on Card Home; capture before/after on device or simulator when opening the PR for review if reviewers require visual proof.

Before

(Solana limited: no “Spending Limit” block on Card Home.)

After

Simulator Screenshot - iPhone 17 Pro - 2026-05-04 at 11 11 09

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.

Files changed (vs main)

File Change
app/components/UI/Card/Views/CardHome/CardHome.tsx Remove isEvmChain gate; pass hasOriginalAllowance from originalSpendingCap
app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.tsx Compact mode when hasOriginalAllowance is false; i18n for “available”
app/components/UI/Card/components/SpendingLimitProgressBar/SpendingLimitProgressBar.test.tsx Tests for compact mode
app/components/UI/Card/Views/CardHome/CardHome.test.tsx Mock string + Solana + undefined allowance expectations
locales/languages/en.json card.card_home.spending_limit_available

Note

Low Risk
Low risk UI change that only alters when/how the Card Home spending-limit section is displayed and adds i18n copy; main risk is incorrect gating/labeling for limited assets across chains.

Overview
Shows a spending-limit indicator on Card Home for limited funding assets even when an originalSpendingCap is unavailable (e.g., Solana), by removing the EVM-only gate and introducing a compact SpendingLimitProgressBar mode.

SpendingLimitProgressBar now accepts hasOriginalAllowance to switch between the existing consumed/total progress bar and a remaining-only “<amount> <symbol> available” label (localized via new card.card_home.spending_limit_available), with updated unit tests and CardHome expectations for Solana and undefined allowance cases.

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

@Brunonascdev Brunonascdev self-assigned this May 4, 2026
@Brunonascdev Brunonascdev requested a review from a team as a code owner May 4, 2026 14:17
@metamaskbotv2 metamaskbotv2 Bot added the team-card Card Team label May 4, 2026
@github-actions

github-actions Bot commented May 4, 2026

Copy link
Copy Markdown
Contributor

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.

@github-actions github-actions Bot added pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. size-M labels May 4, 2026
@Brunonascdev Brunonascdev linked an issue May 4, 2026 that may be closed by this pull request
@Brunonascdev Brunonascdev removed the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 4, 2026
@github-actions

github-actions Bot commented May 4, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

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

E2E Test Selection:
The changes are isolated to the MetaMask Card feature:

  1. CardHome.tsx: Removed the isEvmChain() guard for showing the spending limit progress bar, so Solana chain assets now show a spending limit indicator. Added hasOriginalAllowance prop passed to SpendingLimitProgressBar.

  2. SpendingLimitProgressBar.tsx: Added hasOriginalAllowance prop — when false, renders a compact "X SYMBOL available" view instead of the full progress bar. This handles cases where no original spending cap exists (e.g., Solana assets).

  3. en.json: Added spending_limit_available: "available" localization string used in the new compact view.

  4. Test files: Unit tests updated to reflect the new behavior (Solana assets now show compact indicator instead of nothing).

These changes are purely within the Card UI feature area (CardHome screen and SpendingLimitProgressBar component). They don't touch core infrastructure, navigation, shared components, or other feature areas. The SmokeMoney tag covers Card home screen, navbar entry, and card-related flows, making it the appropriate tag to validate these changes. No other tags are needed as there's no cross-cutting impact on confirmations, swaps, or other features.

Performance Test Selection:
The changes are limited to UI display logic within the Card Home screen — specifically a conditional rendering path for the SpendingLimitProgressBar component. There are no changes to list rendering, data fetching, state management, app startup, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

@Brunonascdev Brunonascdev added the skip-e2e skip E2E test jobs label May 4, 2026
@Brunonascdev Brunonascdev enabled auto-merge May 4, 2026 17:44
@sonarqubecloud

sonarqubecloud Bot commented May 4, 2026

Copy link
Copy Markdown

@Brunonascdev Brunonascdev added this pull request to the merge queue May 4, 2026
Merged via the queue into main with commit 4b55117 May 4, 2026
125 of 135 checks passed
@Brunonascdev Brunonascdev deleted the fix/mm-card-solana-spending-limit branch May 4, 2026 18:03
@github-actions github-actions Bot locked and limited conversation to collaborators May 4, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.77.0 Issue or pull request that will be included in release 7.77.0 size-M skip-e2e skip E2E test jobs team-card Card Team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Card: Spending limit for SPL token not displayed

2 participants