test: color-no-hex earn batch by georgewrmarshall · Pull Request #27151 · MetaMask/metamask-mobile

georgewrmarshall · 2026-03-06T20:21:01Z

Description

Test-only refactor to remove hard-coded hex colors from Earn/Stake test suites and align with the @metamask/design-tokens/color-no-hex rule by using the shared mockTheme and brand tokens. No production logic changes.

Earn withdrawal confirmation test now expects mockTheme.colors.background.alternative to match production.
useMerklClaimStatus.test.ts replaces hex values with mockTheme.colors.icon.default and mockTheme.colors.background.default.
GraphCursor.test.tsx uses mockTheme.brandColors.green600 instead of a hex literal.
ESLint: re-enabled @metamask/design-tokens/color-no-hex as error for app/components/UI/Earn/**/* and app/components/UI/Stake/**/* to keep these areas compliant going forward.

Changelog

CHANGELOG entry: null

Related issues

Split from #26651 to reduce CODEOWNERS fanout.

Manual testing steps

Feature: Enforce design-token colors in Earn/Stake tests

  Scenario: Lint and unit tests succeed
    Given the repository is checked out on this branch
    When I run "yarn lint" and "yarn test:unit"
    Then lint passes without color-no-hex violations in Earn/Stake paths
     And unit tests pass

Screenshots/Recordings

N/A

Pre-merge author checklist

I've followed MetaMask contributor guidelines and coding standards
I've completed the PR template to the best of my ability
I've included/updated tests where applicable
I've applied appropriate labels (internal maintainers)

github-actions · 2026-03-06T20:21:11Z

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.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Test asserts wrong background color token
- Updated the test to expect background.alternative to match the component and styles using theme.colors.background.alternative.

Or push these changes by commenting:

@cursor push a3e931cd35

Preview (a3e931cd35)

diff --git a/app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx b/app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx
--- a/app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx
+++ b/app/components/UI/Earn/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx
@@ -235,7 +235,7 @@
       expect.any(Object), // theme.colors
       {
         hasCancelButton: false,
-        backgroundColor: mockTheme.colors.background.section,
+        backgroundColor: mockTheme.colors.background.alternative,
       },
       {
         backButtonEvent: {

...n/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts

...mponents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx

georgewrmarshall · 2026-03-19T18:15:31Z

@cursoragent update PR description to align with template. Also add update to eslintrc file see other exampels

cursor · 2026-03-19T18:15:40Z

I updated app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts to use mockTheme like useMusdConversionStatus.test.ts:
- Imported mockTheme from ../../../../util/theme.
- Replaced hex values with mockTheme.colors.icon.default and mockTheme.colors.background.default for all bonus claim toast configs.
- Removed the @metamask/design-tokens/color-no-hex eslint-disable comments.
I committed and pushed to chore/color-no-hex-earn-batch:
- test(earn): use mockTheme for Merkl claim status toast colors; remove color-no-hex disables
I updated the PR description to note the useMerklClaimStatus.test.ts color token change.

.eslintrc.js

georgewrmarshall · 2026-03-19T20:50:06Z

.eslintrc.js

        'app/components/UI/Ramp/**/*.{js,jsx,ts,tsx}',
        'app/components/UI/Rewards/**/*.{js,jsx,ts,tsx}',
        'app/components/UI/Perps/**/*.{js,jsx,ts,tsx}',
+        'app/components/UI/Earn/**/*.{js,jsx,ts,tsx}',


Earn and Stake UI now falls under the same `@metamask/design-tokens/color-no-hex` enforcement as Card, Ramp, Rewards, and the other listed areas, so new hex in those trees fails lint at author time instead of only in tests or unrelated folders.

georgewrmarshall · 2026-03-19T20:50:08Z

.../Earn/components/Earnings/EarningsHistory/EarningsHistoryChart/EarningsHistoryChart.test.tsx

 import { EarningsHistoryChart } from './EarningsHistoryChart';
 import { fireLayoutEvent } from '../../../../../../../util/testUtils/react-native-svg-charts';
-import { lightTheme } from '@metamask/design-tokens';
+import { mockTheme } from '../../../../../../../util/theme';


Bar fill expectations should track the same theme surface the app uses via util/theme, not a second import path that could drift when tokens or wiring change. This keeps chart assertions coupled to the runtime theme contract while avoiding raw hex in the spec.

georgewrmarshall · 2026-03-19T20:50:14Z

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts

    hasNoTimeout: true,
-    iconColor: '#000000',
-    backgroundColor: '#FFFFFF',
+    iconColor: mockTheme.colors.icon.default,


These objects mirror what the hook passes into useEarnToasts

georgewrmarshall · 2026-03-19T20:50:15Z

...oreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/ChartTimespanButtonGroup.test.tsx


-    const INACTIVE_COLOR = lightTheme.colors.background.default;
-    const ACTIVE_COLOR = lightTheme.colors.background.muted;
+    const INACTIVE_COLOR = mockTheme.colors.background.default;


The component styles active/inactive spans with semantic background tokens. Asserting against mockTheme keeps the test aligned with the same palette as production code and avoids embedding hex now that Stake paths are linted with color-no-hex.

georgewrmarshall · 2026-03-19T20:50:15Z

...mponents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx

  const MOCK_X = () => 73;
  const MOCK_Y = () => 33.17441726994484;
-  const MOCK_COLOR = '#1c8234';
+  const MOCK_COLOR = mockTheme.brandColors.green600;


The previous literal matched the product green used on the chart cursor. mockTheme.brandColors.green600 preserves that intent through the brand scale so the snapshot and prop contract stay on tokens and pass color-no-hex in Stake UI.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

✅ Fixed: Likely undefined brandColors.green600 property access
- Replaced undefined mockTheme.brandColors.green600 with mockTheme.colors.success.default so a valid color token is passed.
✅ Fixed: Unfixed hex literals break newly enabled lint rule
- Replaced '#000000' and '#FFFFFF' with mockTheme.colors.icon.default and mockTheme.colors.background.default to comply with color-no-hex.

Or push these changes by commenting:

@cursor push 266707f1dd

Preview (266707f1dd)

diff --git a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
--- a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
+++ b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
@@ -186,8 +186,8 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: '#000000',
-        backgroundColor: '#FFFFFF',
+        iconColor: mockTheme.colors.icon.default,
+        backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Withdrawal failed', isBold: true }],
       }),

diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
--- a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx
@@ -12,7 +12,7 @@
   const MOCK_CURRENT_X = 2;
   const MOCK_X = () => 73;
   const MOCK_Y = () => 33.17441726994484;
-  const MOCK_COLOR = mockTheme.brandColors.green600;
+  const MOCK_COLOR = mockTheme.colors.success.default;
 
   it('render matches snapshot', () => {
     const props: GraphCursorProps = {

...mponents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx

app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Toast mock colors collapsed to identical values
- Updated success and failed toast mocks to use mockTheme.colors.success.default and mockTheme.colors.error.default matching production.

Or push these changes by commenting:

@cursor push 3461b83d9c

Preview (3461b83d9c)

diff --git a/app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts b/app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts
--- a/app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts
+++ b/app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts
@@ -105,7 +105,7 @@
     variant: ToastVariants.Icon as const,
     iconName: IconName.CheckBold,
     hasNoTimeout: false,
-    iconColor: mockTheme.colors.icon.default,
+    iconColor: mockTheme.colors.success.default,
     backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Success,
     labelOptions: [{ label: 'Your mUSD is here!', isBold: true }],
@@ -114,7 +114,7 @@
     variant: ToastVariants.Icon as const,
     iconName: IconName.CircleX,
     hasNoTimeout: false,
-    iconColor: mockTheme.colors.icon.default,
+    iconColor: mockTheme.colors.error.default,
     backgroundColor: mockTheme.colors.background.default,
     hapticsType: NotificationFeedbackType.Error,
     labelOptions: [{ label: 'Bonus claim failed', isBold: true }],

diff --git a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
--- a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
+++ b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts
@@ -137,7 +137,7 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.CheckBold,
         hasNoTimeout: false,
-        iconColor: mockTheme.colors.icon.default,
+        iconColor: mockTheme.colors.success.default,
         backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Success,
         labelOptions: [{ label: 'Success', isBold: true }],
@@ -146,7 +146,7 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: mockTheme.colors.icon.default,
+        iconColor: mockTheme.colors.error.default,
         backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Failed', isBold: true }],
@@ -166,7 +166,7 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.CheckBold,
         hasNoTimeout: false,
-        iconColor: mockTheme.colors.icon.default,
+        iconColor: mockTheme.colors.success.default,
         backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Success,
         labelOptions: [{ label: 'Success', isBold: true }],
@@ -175,7 +175,7 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: mockTheme.colors.icon.default,
+        iconColor: mockTheme.colors.error.default,
         backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Bonus claim failed', isBold: true }],
@@ -186,7 +186,7 @@
         variant: ToastVariants.Icon as const,
         iconName: IconName.Danger,
         hasNoTimeout: false,
-        iconColor: mockTheme.colors.icon.default,
+        iconColor: mockTheme.colors.error.default,
         backgroundColor: mockTheme.colors.background.default,
         hapticsType: NotificationFeedbackType.Error,
         labelOptions: [{ label: 'Withdrawal failed', isBold: true }],

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts

codecov-commenter · 2026-03-20T22:03:50Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.44%. Comparing base (d86db93) to head (bdd871a).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #27151      +/-   ##
==========================================
+ Coverage   77.80%   82.44%   +4.63%     
==========================================
  Files        4802     4801       -1     
  Lines      123906   123806     -100     
  Branches    27594    27598       +4     
==========================================
+ Hits        96410   102073    +5663     
+ Misses      20523    14665    -5858     
- Partials     6973     7068      +95

☔ 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 · 2026-03-22T18:31:07Z

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

github-actions · 2026-03-23T15:53:48Z

✅ E2E Fixture Validation — Schema is up to date
18 value mismatches detected (expected — fixture represents an existing user).
View details

sonarqubecloud · 2026-03-23T16:01:48Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

georgewrmarshall requested a review from a team as a code owner March 6, 2026 20:21

metamaskbot added the team-design-system All issues relating to design system in Mobile label Mar 6, 2026

github-actions bot added the size-S label Mar 6, 2026

cursor bot reviewed Mar 6, 2026

View reviewed changes

...n/Views/EarnLendingWithdrawalConfirmationView/EarnLendingWithdrawalConfirmationView.test.tsx Outdated Show resolved Hide resolved

georgewrmarshall marked this pull request as draft March 6, 2026 21:10

georgewrmarshall commented Mar 19, 2026

View reviewed changes

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts Outdated Show resolved Hide resolved

georgewrmarshall commented Mar 19, 2026

View reviewed changes

...mponents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx Outdated Show resolved Hide resolved

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Mar 19, 2026

georgewrmarshall commented Mar 19, 2026

View reviewed changes

.eslintrc.js Outdated Show resolved Hide resolved

georgewrmarshall self-assigned this Mar 19, 2026

georgewrmarshall force-pushed the chore/color-no-hex-earn-batch branch from 6fe8fa1 to 2d15ee5 Compare March 19, 2026 20:47

github-actions bot added size-M and removed size-S labels Mar 19, 2026

georgewrmarshall force-pushed the chore/color-no-hex-earn-batch branch from 2d15ee5 to faf8c6c Compare March 19, 2026 20:48

georgewrmarshall commented Mar 19, 2026

View reviewed changes

cursor bot reviewed Mar 19, 2026

View reviewed changes

...mponents/PoolStakingLearnMoreModal/InteractiveTimespanChart/GraphCursor/GraphCursor.test.tsx Show resolved Hide resolved

app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts Show resolved Hide resolved

cursor bot reviewed Mar 19, 2026

View reviewed changes

app/components/UI/Earn/hooks/useMerklClaimStatus.test.ts Show resolved Hide resolved

georgewrmarshall force-pushed the chore/color-no-hex-earn-batch branch from 2337506 to bdd871a Compare March 20, 2026 19:36

georgewrmarshall force-pushed the chore/color-no-hex-earn-batch branch from bdd871a to 55b1a5e Compare March 22, 2026 18:28

github-actions bot added size-S and removed size-M labels Mar 22, 2026

test: color-no-hex earn batch

496965f

georgewrmarshall force-pushed the chore/color-no-hex-earn-batch branch from 55b1a5e to 496965f Compare March 22, 2026 18:30

Matt561 approved these changes Mar 23, 2026

View reviewed changes

georgewrmarshall marked this pull request as ready for review March 23, 2026 16:16

georgewrmarshall enabled auto-merge March 23, 2026 16:16

georgewrmarshall removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Mar 23, 2026

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Mar 23, 2026

georgewrmarshall added this pull request to the merge queue Mar 23, 2026

Merged via the queue into main with commit 1ed96f7 Mar 23, 2026
200 of 206 checks passed

georgewrmarshall deleted the chore/color-no-hex-earn-batch branch March 23, 2026 16:39

github-actions bot locked and limited conversation to collaborators Mar 23, 2026

metamaskbot added the release-7.72.0 Issue or pull request that will be included in release 7.72.0 label Mar 23, 2026

Uh oh!

Conversation

georgewrmarshall commented Mar 6, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Uh oh!

github-actions bot commented Mar 6, 2026

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

georgewrmarshall commented Mar 19, 2026

Uh oh!

cursor bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

georgewrmarshall Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov-commenter commented Mar 20, 2026

Codecov Report

Uh oh!

github-actions bot commented Mar 22, 2026

🔍 Smart E2E Test Selection

Uh oh!

github-actions bot commented Mar 23, 2026

Uh oh!

sonarqubecloud bot commented Mar 23, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

georgewrmarshall commented Mar 6, 2026 •

edited by cursor bot

Loading

cursor bot left a comment •

edited

Loading

cursor bot commented Mar 19, 2026 •

edited

Loading

georgewrmarshall Mar 19, 2026 •

edited

Loading

georgewrmarshall Mar 19, 2026 •

edited

Loading

georgewrmarshall Mar 19, 2026 •

edited

Loading

georgewrmarshall Mar 19, 2026 •

edited

Loading

georgewrmarshall Mar 19, 2026 •

edited

Loading

cursor bot left a comment •

edited

Loading

cursor bot left a comment •

edited

Loading