Skip to content

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Oct 14, 2025

Description

This PR removes the deprecated ErrorMessage component from the codebase and replaces its usage with the modern BannerAlert component from the component-library. This continues the effort to modernize MetaMask's UI components and remove deprecated code.

Key Changes:

  • Completely removed the deprecated ErrorMessage component and all related files
  • Replaced ErrorMessage usage in EditGasFeePopover with BannerAlert
  • Cleaned up SCSS imports and styles
  • Added comprehensive Storybook stories for EditGasFeePopover

Component Migration:

  • ErrorMessageBannerAlert with severity={BannerAlertSeverity.Danger}
  • Maintains the same visual appearance and functionality
  • Uses the modern component-library API

Open in GitHub Codespaces

Changelog

CHANGELOG entry: null

Related issues

Fixes: #20394

Manual testing steps

  1. Build the application to ensure no broken imports
  2. Navigate to any transaction confirmation flow that shows gas editing
  3. Verify that insufficient funds errors still display correctly with red styling
  4. Check Storybook to ensure EditGasFeePopover stories render correctly:
    • Run yarn storybook
    • Navigate to Pages/Confirmations/Components/EditGasFeePopover
    • Test different scenarios including error states
  5. Run tests to ensure no regressions: yarn test

Screenshots/Recordings

N/A - This is a component refactor with no visual changes to end users

Before

  • Deprecated ErrorMessage component used in edit gas modal
Screenshot 2025-10-14 at 2 46 12 PM

After

  • Replaced with BannerAlert component
Screenshot 2025-10-14 at 2 44 59 PM

Pre-merge author checklist

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

Removes ErrorMessage and replaces its usage in EditGasFeePopover with BannerAlert, deletes related files, updates styles, and adds a Storybook story.

  • UI Migration
    • Replace ErrorMessage with BannerAlert (Danger) in ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js (uses t(INSUFFICIENT_FUNDS_ERROR_KEY) for description).
    • Adjust imports to use component-library BannerAlert and Text.
  • Cleanup/Removals
    • Delete deprecated ui/components/ui/error-message/* (component, tests, stories, styles, snapshots).
    • Remove @import 'error-message/index'; from ui/components/ui/ui-components.scss.
    • Drop .error-message margin overrides from ui/pages/confirmations/components/edit-gas-fee-popover/index.scss.
  • Storybook
    • Add EditGasFeePopover story edit-gas-fee-popover.stories.tsx with mocked providers and args.

Written by Cursor Bugbot for commit c4da056. This will update automatically on new commits. Configure here.

@georgewrmarshall georgewrmarshall requested a review from a team as a code owner October 14, 2025 21:52
Copy link
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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Extension label Oct 14, 2025
cursor[bot]

This comment was marked as outdated.

@metamaskbot
Copy link
Collaborator

metamaskbot commented Oct 14, 2025

✨ Files requiring CODEOWNER review ✨

@MetaMask/confirmations (3 files, +104 -8)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 edit-gas-fee-popover/
            • 📄 edit-gas-fee-popover.js +10 -3
            • 📄 edit-gas-fee-popover.stories.tsx +94 -0
            • 📄 index.scss +0 -5

@georgewrmarshall georgewrmarshall changed the title Remove deprecated ErrorMessage component and replace with BannerAlert chore: remove deprecated ErrorMessage component and replace with BannerAlert Oct 14, 2025
editGasMode: EditGasModes.modifyInPlace,
balanceError: false,
},
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding story for easier updates and visual regression testing

Image

Comment on lines -16 to -19
& .error-message {
margin-top: 0;
margin-bottom: 12px;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no longer using this component. this is why we shouldn't use direct CSS classnames from other components in our styles. Very easy to miss

@@ -0,0 +1,84 @@
import React from 'react';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding story

Comment on lines -58 to +65
<ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
<BannerAlert
severity={BannerAlertSeverity.Danger}
description={t(INSUFFICIENT_FUNDS_ERROR_KEY)}
marginBottom={1}
/>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaces last instance of the ErrorMessage component with BannerAlert

Image

@georgewrmarshall georgewrmarshall self-assigned this Oct 14, 2025
@georgewrmarshall georgewrmarshall added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Oct 14, 2025
@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: d01f9bc | Date: 10/14/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±74ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 739ms (±86ms) 🟢 | historical mean value: 738ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 89ms (±129ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 74ms 1.01s 1.37s 1.26s 1.37s
domContentLoaded 739ms 86ms 696ms 1.30s 941ms 1.30s
firstPaint 89ms 129ms 60ms 1.37s 88ms 1.37s
firstContentfulPaint 89ms 129ms 60ms 1.37s 88ms 1.37s
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [d01f9bc]
UI Startup Metrics (1251 ± 74 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1251112215717412951371
load107493413336911061200
domContentLoaded106892913226911011194
domInteractive1813131121734
firstPaint61874135544710881197
backgroundConnect2522382797256265
firstReactRender2618129122642
getState1154061324
initialActions50598523
loadScripts822680105567859945
setupStore962641018
WebpackHomeuiStartup818699144097830994
load638580130595638840
domContentLoaded630575129694628823
domInteractive16116091440
firstPaint20754930203193627
backgroundConnect20104772531
firstReactRender25165683133
getState74153913
initialActions208235
loadScripts627573128592626812
setupStore84152911
FirefoxBrowserifyHomeuiStartup14211222182413214821724
load1213105014629612831396
domContentLoaded1213105014619612831396
domInteractive1043631059101276
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect3218137213276
firstReactRender29255143138
getState73638521
initialActions408610223
loadScripts1189103314419412661365
setupStore10414017649
WebpackHomeuiStartup15461376217312715851821
load1338122016867913781503
domContentLoaded1338122016867913781503
domInteractive92341953199174
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect3119159193463
firstReactRender362582133774
getState11218927644
initialActions2023327
loadScripts1315120416567513561473
setupStore11414521743
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -1.69 KiB (-0.03%)
  • common: 10 Bytes (0%)

@georgewrmarshall georgewrmarshall changed the title chore: remove deprecated ErrorMessage component and replace with BannerAlert chore: remove deprecated ErrorMessage component Oct 14, 2025
@metamaskbot
Copy link
Collaborator

📊 Page Load Benchmark Results

Current Commit: c4da056 | Date: 10/14/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.06s (±71ms) 🟡 | historical mean value: 1.05s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 741ms (±69ms) 🟢 | historical mean value: 738ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 78ms (±13ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)
📈 Detailed Results
Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.06s 71ms 1.01s 1.34s 1.28s 1.34s
domContentLoaded 741ms 69ms 700ms 1.01s 951ms 1.01s
firstPaint 78ms 13ms 60ms 196ms 92ms 196ms
firstContentfulPaint 78ms 13ms 60ms 196ms 92ms 196ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms

Results generated automatically by MetaMask CI

@metamaskbot
Copy link
Collaborator

Builds ready [c4da056]
UI Startup Metrics (1225 ± 59 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1225109413895912691319
load105595911785410901145
domContentLoaded104995411735310821138
domInteractive18135671635
firstPaint728141118242210841148
backgroundConnect2502362858254264
firstReactRender25185062541
getState1253571429
initialActions50427523
loadScripts80471093152837890
setupStore95506919
WebpackHomeuiStartup8367151179808531027
load64058798478637884
domContentLoaded63358395777632877
domInteractive16115791541
firstPaint17954985171177595
backgroundConnect21115472632
firstReactRender2917127143248
getState832131013
initialActions2011237
loadScripts63158194674630866
setupStore94283912
FirefoxBrowserifyHomeuiStartup14081221181212314641702
load1203105915518612601344
domContentLoaded1203105915518612601344
domInteractive1043437755109227
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect281990103149
firstReactRender29254233035
getState73648623
initialActions6018025214
loadScripts1182104015248512411325
setupStore94529831
WebpackHomeuiStartup15191374209812515441793
load1324117116218113651491
domContentLoaded1324117116208113651491
domInteractive98303706297256
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect311880123463
firstReactRender342677113470
getState63437618
initialActions20223211
loadScripts1301115416038013421460
setupStore11413918645
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -1.69 KiB (-0.03%)
  • common: 10 Bytes (0%)

@georgewrmarshall georgewrmarshall added this pull request to the merge queue Oct 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 17, 2025
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Oct 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 17, 2025
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Oct 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 17, 2025
@georgewrmarshall georgewrmarshall added this pull request to the merge queue Oct 17, 2025
Merged via the queue into main with commit a88251b Oct 17, 2025
170 checks passed
@georgewrmarshall georgewrmarshall deleted the remove-error-message branch October 17, 2025 20:36
@github-actions github-actions bot locked and limited conversation to collaborators Oct 17, 2025
@metamaskbot metamaskbot added the release-13.7.0 Issue or pull request that will be included in release 13.7.0 label Oct 17, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed release-13.7.0 Issue or pull request that will be included in release 13.7.0 size-M team-design-system All issues relating to design system in Extension

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace deprecated ErrorMessage component with BannerAlert from the component-library

4 participants