Skip to content

Conversation

@smgv
Copy link
Contributor

@smgv smgv commented Nov 14, 2025

Description

In this PR, Updated Transaction Shield UI Bugs.

Jira Link:

Figma Link:

Open in GitHub Codespaces

Changelog

CHANGELOG entry: Used feature flag to only show this change when sidepanel flag is enabled for chrome. Updated button on wallet creation successful page from 'Done' to 'Open wallet'.

Related issues

Fixes:

Manual testing steps

  1. Open extension
  2. Create wallet and validate Transaction Shield from settings.

Screenshots/Recordings

Before

After

Screenshot 2025-11-14 at 3 58 50 PM ![Uploading Screenshot 2025-11-14 at 4.45.54 PM.png…]()

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

Updates Transaction Shield copy and i18n, improves responsive layouts and theming, replaces the entry modal animation with a static image, and renames the billing action to “Manage billing.”

  • Frontend UI/Styles:
    • Shield Entry Modal (ui/components/app/shield-entry-modal/): Replace animation with static image (transaction-shield-modal.png), add responsive title/spacing, full-height body, and new shield-entry-modal-sheild-image styles.
    • Settings Layout (ui/pages/settings/index.scss): On small screens, modules use flex column with scroll; similar adjustments in sidepanel selected view.
    • Transaction Shield Tab (ui/pages/settings/transaction-shield-tab/): Add light-theme inactive background (--shield-membership-inactive-light) with new modifier class; remove forced dark theme; minor styling.
    • Claims Form (claims-form.tsx): Add padding/margins, keep only section headers (remove descriptive subtext), retain dividers.
    • Shield Plan (ui/pages/shield-plan/): Tweak plan card padding/gaps and responsive price font; move spacing from props to CSS.
    • Colors (ui/css/utilities/colors.scss): Add --shield-membership-inactive-light.
  • i18n (app/_locales/en*/messages.json):
    • Update copy: shieldTxDetails1Title to "Up to $10,000 transaction protection"; billing action to "Manage billing".
    • Remove unused: shieldClaimIncidentDetailsDescription, shieldClaimPersonalDetailsDescription.

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

@smgv smgv requested review from a team as code owners November 14, 2025 11:09
@smgv smgv self-assigned this Nov 14, 2025
@github-actions
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
Copy link
Collaborator

✨ Files requiring CODEOWNER review ✨

👨‍🔧 @MetaMask/core-extension-ux (1 files, +1 -0)
  • 📁 ui/
    • 📁 css/
      • 📁 utilities/
        • 📄 colors.scss +1 -0

🔐 @MetaMask/web3auth (7 files, +53 -32)
  • 📁 ui/
    • 📁 components/
      • 📁 app/
        • 📁 shield-entry-modal/
          • 📄 index.scss +14 -0
          • 📄 shield-entry-modal.tsx +5 -8
    • 📁 pages/
      • 📁 settings/
        • 📁 transaction-shield-tab/
          • 📁 claims-form/
            • 📄 claims-form.tsx +3 -19
            • 📄 index.scss +4 -0
            • 📄 transaction-shield.tsx +6 -1
      • 📁 shield-plan/
        • 📄 index.scss +15 -0
        • 📄 shield-plan.tsx +6 -4

chaitanyapotti
chaitanyapotti previously approved these changes Nov 14, 2025
tanguyenvn
tanguyenvn previously approved these changes Nov 14, 2025
@chaitanyapotti chaitanyapotti changed the title fix: JIRA-759, 760, 765, 754, 756 fix: JIRA-759, 760, 765, 754, 756 cp-13.10.0 Nov 14, 2025
@chaitanyapotti chaitanyapotti linked an issue Nov 14, 2025 that may be closed by this pull request
9 tasks
@metamaskbot
Copy link
Collaborator

Builds ready [1b81792]
UI Startup Metrics (1207 ± 95 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1207106515789512671352
load104691513549011141199
domContentLoaded103990713428911081178
domInteractive2313130192076
firstPaint69376121341810621167
backgroundConnect2322172839235247
firstReactRender30195883347
getState2184882536
initialActions104112
loadScripts813680109087879949
setupStore1062531114
numNetworkReqs1367419669
BrowserifyPower User HomeuiStartup22321836292929824382929
load1146972149418713631494
domContentLoaded1124950148719213481487
domInteractive521814646109146
firstPaint798210151246511961512
backgroundConnect25123928010260280
firstReactRender71451352178135
getState24316334153293341
initialActions103113
loadScripts896724124918711241249
setupStore25943103343
numNetworkReqs1218820032149200
WebpackStandard HomeuiStartup8487221157918591106
load61956494481612865
domContentLoaded61155991676606842
domInteractive191289151560
firstPaint19959921195188597
backgroundConnect271280143263
firstReactRender322082103742
getState1152231315
initialActions104111
loadScripts60855790573603832
setupStore1163541316
numNetworkReqs1367919871
WebpackPower User HomeuiStartup1098935177123813401771
load657576865101800865
domContentLoaded63956583892763838
domInteractive36131123895112
firstPaint346110784215591784
backgroundConnect651822966148229
firstReactRender42394634646
getState1429417423157174
initialActions101011
loadScripts63556382889752828
setupStore96295929
numNetworkReqs825812826124128
FirefoxBrowserifyStandard HomeuiStartup15071321211912815461743
load1262112615859013111440
domContentLoaded1261112615849013111439
domInteractive1123744367113311
firstPaint------
backgroundConnect4425170215181
firstReactRender27225542731
getState1173351224
initialActions103122
loadScripts1235110914918512841405
setupStore14687131236
numNetworkReqs1267216760
BrowserifyPower User HomeuiStartup31222433383545136233835
load15001237197521116941975
domContentLoaded14991237197521116941975
domInteractive337152766193480766
firstPaint------
backgroundConnect53712710383429371038
firstReactRender795297139397
getState1696041678215416
initialActions213123
loadScripts14521210188019916441880
setupStore9717486105111486
numNetworkReqs1278322650166226
WebpackStandard HomeuiStartup15921389222216615892139
load13461212169010613611623
domContentLoaded13451212169010613611622
domInteractive54302113157133
firstPaint------
backgroundConnect46192132949117
firstReactRender32247573341
getState167189241249
initialActions213122
loadScripts1318119516549613331547
setupStore177216241250
numNetworkReqs1367217765
WebpackPower User HomeuiStartup32062533434055934914340
load16781450202320919422023
domContentLoaded16781450202320919422023
domInteractive320122748216562748
firstPaint------
backgroundConnect41012110852906501085
firstReactRender884912822107128
getState16311021931189219
initialActions215125
loadScripts16251389199321119071993
setupStore1084920339137203
numNetworkReqs1247222751179227
📊 Page Load Benchmark Results

Current Commit: 1b81792 | Date: 11/14/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±62ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 724ms (±58ms) 🟢 | historical mean value: 727ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 80ms (±38ms) 🟢 | historical mean value: 78ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 62ms 1.01s 1.58s 1.07s 1.58s
domContentLoaded 724ms 58ms 699ms 1.24s 744ms 1.24s
firstPaint 80ms 38ms 60ms 452ms 84ms 452ms
firstContentfulPaint 80ms 38ms 60ms 452ms 84ms 452ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚀 Bundle size reduced!]
  • background: 58 Bytes (0%)
  • ui: -199 Bytes (0%)
  • common: -208 Bytes (0%)

@chaitanyapotti chaitanyapotti added this pull request to the merge queue Nov 14, 2025
Merged via the queue into main with commit 238a703 Nov 14, 2025
174 checks passed
@chaitanyapotti chaitanyapotti deleted the fix/shield-ui-updates branch November 14, 2025 12:33
@github-actions github-actions bot locked and limited conversation to collaborators Nov 14, 2025
@metamaskbot metamaskbot added the release-13.11.0 Issue or pull request that will be included in release 13.11.0 label Nov 14, 2025
@LeVinhGithub LeVinhGithub added team-shield Shield team and removed team-onboarding Onboarding team labels Nov 25, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-onboarding release-13.11.0 Issue or pull request that will be included in release 13.11.0 size-M team-shield Shield team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ui fixes needed for shield

7 participants