Skip to content

Conversation

@dan437
Copy link
Contributor

@dan437 dan437 commented Nov 28, 2025

Description

A few design upgrades for Confirmations:

  • Update the colour of the key from text/ default to text/ alterantive (soft).
  • The "Key" in simulation component needs to be body(md)-medium. Its currently appearing in body(md)-default.
  • Also the spacing between the "info" and "advanced detail" icons needs to be 16px.
  • Show a transparent background color behind a tooltip icon if there is no text

Open in GitHub Codespaces

Changelog

CHANGELOG entry: feat: Design upgrades for Confirmations

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/5279

Manual testing steps

  1. Go to a dapp
  2. Trigger a swap from a dapp
  3. It will open the. extension with updated UI

Screenshots/Recordings

Before

image

After

image

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

Polishes Confirmations UI by softening key label color/weight, adding 16px spacing between header icons, and making inline alerts transparent when no text (with text rendered only when provided).

  • Confirmations UI:
    • Labels/Keys: Default label color shifted to TextColor.textAlternative; key text set to TextVariant.bodyMdMedium across info rows and components (e.g., getAlertTextColors, BalanceChangeRow).
    • Header spacing: Added gap={4} (16px) between the account info and advanced details buttons; removed right margin from AdvancedDetailsButton container.
    • Inline Alerts: Render text only when textOverride is provided; apply inline-alert__transparent-background (transparent background) when no text; added SCSS modifier; removed default i18n label.
  • Tests: Updated snapshots to reflect color, spacing, and inline alert behavior changes throughout confirmation views.

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

@dan437 dan437 requested a review from a team as a code owner November 28, 2025 13:27
@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 metamaskbot added the team-confirmations Push issues to confirmations team label Nov 28, 2025
@metamaskbot
Copy link
Collaborator

metamaskbot commented Nov 28, 2025

✨ Files requiring CODEOWNER review ✨

@MetaMask/confirmations (24 files, +99 -99)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 confirm/
            • 📁 header/
              • 📁 __snapshots__/
                • 📄 advanced-details-button.test.tsx.snap +1 -1
                • 📄 dapp-initiated-header.test.tsx.snap +1 -1
                • 📄 header-info.test.tsx.snap +1 -1
                • 📄 header.test.tsx.snap +5 -5
                • 📄 wallet-initiated-header.test.tsx.snap +1 -1
                • 📄 advanced-details-button.tsx +0 -1
                • 📄 header-info.tsx +1 -0
            • 📁 info/
              • 📁 __snapshots__/
                • 📄 info.test.tsx.snap +19 -19
              • 📁 approve/
                • 📁 __snapshots__/
                  • 📄 approve.test.tsx.snap +5 -5
                • 📁 approve-details/
                  • 📁 __snapshots__/
                    • 📄 approve-details.test.tsx.snap +4 -4
              • 📁 base-transaction-info/
                • 📁 __snapshots__/
                  • 📄 base-transaction-info.test.tsx.snap +6 -6
              • 📁 native-transfer/
                • 📁 __snapshots__/
                  • 📄 native-transfer.test.tsx.snap +7 -7
              • 📁 nft-token-transfer/
                • 📁 __snapshots__/
                  • 📄 nft-token-transfer.test.tsx.snap +7 -7
              • 📁 personal-sign/
                • 📁 __snapshots__/
                  • 📄 personal-sign.test.tsx.snap +4 -4
              • 📁 set-approval-for-all-info/
                • 📁 __snapshots__/
                  • 📄 set-approval-for-all-info.test.tsx.snap +4 -4
              • 📁 shared/
                • 📁 edit-gas-fees-row/
                  • 📁 __snapshots__/
                    • 📄 edit-gas-fees-row.test.tsx.snap +2 -2
                • 📁 gas-fees-section/
                  • 📁 __snapshots__/
                    • 📄 gas-fees-section.test.tsx.snap +2 -2
                • 📁 transaction-details/
                  • 📁 __snapshots__/
                    • 📄 transaction-details.test.tsx.snap +3 -3
              • 📁 token-transfer/
                • 📁 __snapshots__/
                  • 📄 token-details-section.test.tsx.snap +2 -2
                  • 📄 token-transfer.test.tsx.snap +7 -7
                  • 📄 transaction-flow-section.test.tsx.snap +2 -2
              • 📁 typed-sign/
                • 📁 __snapshots__/
                  • 📄 typed-sign.test.tsx.snap +12 -12
              • 📁 typed-sign-v1/
                • 📁 __snapshots__/
                  • 📄 typed-sign-v1.test.tsx.snap +1 -1
          • 📁 simulation-details/
            • 📄 balance-change-row.tsx +2 -2

@metamaskbot
Copy link
Collaborator

Builds ready [f43f1ad]
UI Startup Metrics (1230 ± 110 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12301010170611012921427
load1029853145410310811234
domContentLoaded1023848144610210731209
domInteractive2514103202085
firstPaint4689011393579291088
backgroundConnect21619427614224245
firstReactRender3219197193655
getState3417108143861
initialActions105113
loadScripts8136561207988591000
setupStore1263551321
numNetworkReqs1257520571
BrowserifyPower User HomeuiStartup20561719280322921952538
load1030910161713110391350
domContentLoaded1015900160713110291341
domInteractive37172353234118
firstPaint5869014203939681309
backgroundConnect24820573592230473
firstReactRender61401211865102
getState18413125327201234
initialActions106112
loadScripts80869514041308061141
setupStore2065992441
numNetworkReqs1136539061105271
WebpackStandard HomeuiStartup8276881131858571024
load63856293671662798
domContentLoaded63355792670658793
domInteractive2614147242190
firstPaint242101701165240669
backgroundConnect1053061125
firstReactRender27206273138
getState261348103343
initialActions104112
loadScripts63055591368656784
setupStore1062131218
numNetworkReqs1257620572
WebpackPower User HomeuiStartup16521310221826519532162
load682584101496687922
domContentLoaded671576100697675918
domInteractive38171713434145
firstPaint286108885181345674
backgroundConnect3875409818171
firstReactRender62479296680
getState19612768897188222
initialActions103112
loadScripts66957499695673908
setupStore24665133053
numNetworkReqs1776542483219406
FirefoxBrowserifyStandard HomeuiStartup13291051182217314481704
load1100903149513511501413
domContentLoaded1099897149513511501413
domInteractive65312433690134
firstPaint------
backgroundConnect47221582859104
firstReactRender2518111102538
getState147169201133
initialActions102122
loadScripts1070886143912711221394
setupStore1256081033
numNetworkReqs1156616763
BrowserifyPower User HomeuiStartup25931938478152427083967
load1211981241329411801848
domContentLoaded1211980241229411801847
domInteractive11838582114109485
firstPaint------
backgroundConnect1192656795135320
firstReactRender5738122146091
getState23986774175251713
initialActions3129327
loadScripts1170961226026011481759
setupStore18113893215198713
numNetworkReqs100592546178242
WebpackStandard HomeuiStartup15871322204615016761898
load1295111315559613491451
domContentLoaded1294111215559613481451
domInteractive69271693290127
firstPaint------
backgroundConnect53181933264122
firstReactRender29207183043
getState167176201447
initialActions103123
loadScripts1262109415209113151407
setupStore206213281673
numNetworkReqs1256716763
WebpackPower User HomeuiStartup31132322572971031974923
load15721214308144516572843
domContentLoaded15721214308044516572841
domInteractive12132503113113452
firstPaint------
backgroundConnect14934641106157391
firstReactRender66452242068100
getState30875953228419810
initialActions3056637
loadScripts15171171291339616222702
setupStore13761276215108675
numNetworkReqs101603226278246
📊 Page Load Benchmark Results

Current Commit: f43f1ad | Date: 11/28/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±35ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 717ms (±34ms) 🟢 | historical mean value: 728ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±10ms) 🟢 | historical mean value: 78ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 35ms 1.01s 1.29s 1.04s 1.29s
domContentLoaded 717ms 34ms 699ms 972ms 732ms 972ms
firstPaint 77ms 10ms 60ms 156ms 84ms 156ms
firstContentfulPaint 77ms 10ms 60ms 156ms 84ms 156ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -40 Bytes (0%)
  • common: 20 Bytes (0%)

@dan437 dan437 force-pushed the confirmations-design-upgrades branch from f43f1ad to f6710de Compare November 28, 2025 14:15
@dan437 dan437 force-pushed the confirmations-design-upgrades branch from f6710de to 3d1e7d3 Compare November 28, 2025 14:46
matthewwalsh0
matthewwalsh0 previously approved these changes Nov 28, 2025
OGPoyraz
OGPoyraz previously approved these changes Nov 28, 2025
@dan437 dan437 dismissed stale reviews from OGPoyraz and matthewwalsh0 via 658febb November 28, 2025 15:01
@metamaskbot
Copy link
Collaborator

Builds ready [658febb]
UI Startup Metrics (1197 ± 98 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup119796614239812701380
load100683512489010581204
domContentLoaded99983012358910511195
domInteractive251596192080
firstPaint68086125439610161161
backgroundConnect20318423712208231
firstReactRender311862103654
getState3413105153963
initialActions108113
loadScripts803642103487853992
setupStore1263151424
numNetworkReqs1257721574
BrowserifyPower User HomeuiStartup21761787352530224482653
load1041913198116510271469
domContentLoaded1024904197416510111446
domInteractive36181852837118
firstPaint5479116784129791301
backgroundConnect274200807139235681
firstReactRender6242130166897
getState207146806114208286
initialActions104112
loadScripts81469316581578011223
setupStore2084572336
numNetworkReqs19210042472209408
WebpackStandard HomeuiStartup809689110682839983
load62356085966638798
domContentLoaded61855485265634788
domInteractive2615132242192
firstPaint25293854192226747
backgroundConnect952951026
firstReactRender2820129143141
getState271365113349
initialActions104112
loadScripts61655384163632780
setupStore1062031117
numNetworkReqs1257720573
WebpackPower User HomeuiStartup16111275259626817932192
load6855851145103700929
domContentLoaded6745801137103693922
domInteractive38181813337130
firstPaint276102901182308672
backgroundConnect287615741859
firstReactRender60449386573
getState17512925820180210
initialActions104112
loadScripts6715781126101691914
setupStore21659132250
numNetworkReqs1736942885217406
FirefoxBrowserifyStandard HomeuiStartup13011073179015913981596
load1070920150210311171278
domContentLoaded1069915150110311171278
domInteractive63311983586118
firstPaint------
backgroundConnect48211893560137
firstReactRender24185472437
getState1173251125
initialActions103122
loadScripts104090614769610801234
setupStore145217231133
numNetworkReqs1256817664
BrowserifyPower User HomeuiStartup26132016474854026564101
load1193946275528211871648
domContentLoaded1192946275528211871647
domInteractive12132645119111495
firstPaint------
backgroundConnect120251150164110368
firstReactRender5734154185993
getState22668902181212654
initialActions207123
loadScripts1145920258624411351537
setupStore1757770219201700
numNetworkReqs100603156281242
WebpackStandard HomeuiStartup15391304199113216301776
load1283112415028613391441
domContentLoaded1282112415028613391440
domInteractive67291853287117
firstPaint------
backgroundConnect46161222447107
firstReactRender28207573039
getState13784101421
initialActions103122
loadScripts1256110914307713151377
setupStore176202241446
numNetworkReqs1256918763
WebpackPower User HomeuiStartup29842165511076731094747
load14961144309045615632681
domContentLoaded14951144309045615632680
domInteractive10829509105101399
firstPaint------
backgroundConnect1802812892501751010
firstReactRender68381973466148
getState289731025235339854
initialActions207123
loadScripts13991122293035514002462
setupStore1455729189153621
numNetworkReqs100542526178244
📊 Page Load Benchmark Results

Current Commit: 658febb | Date: 11/28/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.06s (±36ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 737ms (±34ms) 🟢 | historical mean value: 723ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 79ms (±10ms) 🟢 | historical mean value: 79ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.06s 36ms 1.03s 1.33s 1.09s 1.33s
domContentLoaded 737ms 34ms 714ms 990ms 762ms 990ms
firstPaint 79ms 10ms 64ms 168ms 84ms 168ms
firstContentfulPaint 79ms 10ms 64ms 168ms 84ms 168ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -79 Bytes (0%)
  • common: 20 Bytes (0%)

@metamaskbot
Copy link
Collaborator

Builds ready [e4df7e9]
UI Startup Metrics (1226 ± 109 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12261012155010913041383
load102986812669410961192
domContentLoaded102486212609410921183
domInteractive2515116192283
firstPaint5218312764029801176
backgroundConnect21419324712222238
firstReactRender312075103654
getState3515121164067
initialActions106112
loadScripts815660105390879965
setupStore1263951225
numNetworkReqs1257720571
BrowserifyPower User HomeuiStartup20681616285327322432720
load1024902152214210221436
domContentLoaded1009893150714210021427
domInteractive34181442731119
firstPaint54010215233979601358
backgroundConnect256203781117228545
firstReactRender554196106170
getState19113270059209236
initialActions102012
loadScripts80468612951407961224
setupStore21967102444
numNetworkReqs1506641780201315
WebpackStandard HomeuiStartup829690104979871981
load64356187273668803
domContentLoaded63855686072665798
domInteractive2715109232292
firstPaint21673883159190613
backgroundConnect95324917
firstReactRender28209993139
getState251353103343
initialActions105112
loadScripts63555485170663790
setupStore1164551217
numNetworkReqs1257720572
WebpackPower User HomeuiStartup16171264273427418792101
load6765811347107681922
domContentLoaded6665761321106665915
domInteractive38182003834145
firstPaint288911334214294704
backgroundConnect51761412518453
firstReactRender60479596480
getState18912473690181261
initialActions104112
loadScripts6635741311104663906
setupStore201056102445
numNetworkReqs1696642981215406
FirefoxBrowserifyStandard HomeuiStartup13681155187815014221718
load1123968151311011781336
domContentLoaded1122968151211011781336
domInteractive71332053691139
firstPaint------
backgroundConnect52242834070145
firstReactRender261869102553
getState1175361123
initialActions103122
loadScripts108995114309811291296
setupStore136207201031
numNetworkReqs1156516762
BrowserifyPower User HomeuiStartup26551713532363927584368
load1207982263829211951614
domContentLoaded1206981263829211951613
domInteractive130341022138106414
firstPaint------
backgroundConnect154271720238130498
firstReactRender61382432660116
getState312541030235454835
initialActions2131423
loadScripts1152959249324411281564
setupStore1488742183131570
numNetworkReqs98613196077238
WebpackStandard HomeuiStartup14631238209514715401759
load12251066147010012971423
domContentLoaded12251066147010012971423
domInteractive53261342877113
firstPaint------
backgroundConnect47181852945110
firstReactRender26206462739
getState136120141221
initialActions103112
loadScripts1198105214359112711353
setupStore14597141240
numNetworkReqs1257117764
WebpackPower User HomeuiStartup29582094514769031014640
load14751193296040714152717
domContentLoaded14741193295940714142717
domInteractive1092950911497482
firstPaint------
backgroundConnect142291354170144402
firstReactRender66421572374121
getState274731106233318847
initialActions2044426
loadScripts14081167274733313872458
setupStore1376817183145582
numNetworkReqs98592485679234
📊 Page Load Benchmark Results

Current Commit: e4df7e9 | Date: 11/28/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 991ms (±42ms) 🟢 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 689ms (±62ms) 🟢 | historical mean value: 724ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 88ms (±124ms) 🟢 | historical mean value: 79ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 991ms 42ms 962ms 1.33s 1.02s 1.33s
domContentLoaded 689ms 62ms 665ms 1.26s 710ms 1.26s
firstPaint 88ms 124ms 64ms 1.32s 84ms 1.32s
firstContentfulPaint 88ms 124ms 64ms 1.32s 84ms 1.32s
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 668 Bytes (0.01%)
  • ui: -79 Bytes (0%)
  • common: 20 Bytes (0%)

@dan437 dan437 force-pushed the confirmations-design-upgrades branch from e4df7e9 to ac7421c Compare December 1, 2025 09:53
Signed-off-by: dan437 <[email protected]>
Signed-off-by: dan437 <[email protected]>
@metamaskbot
Copy link
Collaborator

Builds ready [5d1dd33]
UI Startup Metrics (1246 ± 103 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup12461034152410313141430
load104086812688811021195
domContentLoaded103486312638810981189
domInteractive2815154242489
firstPaint54577123840310041181
backgroundConnect21619330117226252
firstReactRender3319213213756
getState3716122184379
initialActions106113
loadScripts824654105187871973
setupStore1162541220
numNetworkReqs1257420572
BrowserifyPower User HomeuiStartup21151767269526023412628
load1022900149413510321401
domContentLoaded1008891148513510161392
domInteractive36181643034128
firstPaint5569114974109611360
backgroundConnect263203682117234614
firstReactRender5839106126288
getState19814273093199274
initialActions105113
loadScripts80268912821338051183
setupStore2185692442
numNetworkReqs1536642482203382
WebpackStandard HomeuiStartup819700124682840993
load63856893374652813
domContentLoaded63356492874648805
domInteractive2715158242291
firstPaint20371696128209593
backgroundConnect1056371120
firstReactRender28207183341
getState251379103239
initialActions102111
loadScripts63156291872646795
setupStore1152741218
numNetworkReqs1257520573
WebpackPower User HomeuiStartup16331279276728819242141
load6755861042101678937
domContentLoaded6665801035101666930
domInteractive38174094534110
firstPaint283106801182296747
backgroundConnect337624951688
firstReactRender61438796781
getState17913966753180226
initialActions104112
loadScripts6635781032100663920
setupStore22966132549
numNetworkReqs1687043485217420
FirefoxBrowserifyStandard HomeuiStartup12331044178812713021476
load102789912277510851179
domContentLoaded102689812267510841179
domInteractive50291192569105
firstPaint------
backgroundConnect3720174223887
firstReactRender21173842233
getState1074661020
initialActions102012
loadScripts100388411766710601122
setupStore134174181035
numNetworkReqs1156815659
BrowserifyPower User HomeuiStartup25981824451550226843842
load1172975244520111671491
domContentLoaded1171974244420111661491
domInteractive1183362999111382
firstPaint------
backgroundConnect1062351989117301
firstReactRender5936127176197
getState279881067216355785
initialActions218123
loadScripts1130959231918711201469
setupStore1907804210229673
numNetworkReqs100603196180233
WebpackStandard HomeuiStartup15441294195413716291802
load1266106314989413181438
domContentLoaded1266106314989413171438
domInteractive66272353888136
firstPaint------
backgroundConnect52211553155120
firstReactRender27224242836
getState168195271236
initialActions102122
loadScripts1236104814659012961411
setupStore14671111437
numNetworkReqs1156716756
WebpackPower User HomeuiStartup29972227642680031244640
load15331169324548415952723
domContentLoaded15321169324548415952723
domInteractive120291004136104422
firstPaint------
backgroundConnect157241352198154526
firstReactRender65383763864121
getState30335894225466759
initialActions2039523
loadScripts14701149308242415592633
setupStore1346771186136602
numNetworkReqs102612565990243
📊 Page Load Benchmark Results

Current Commit: 5d1dd33 | Date: 12/1/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±38ms) 🟡 | historical mean value: 1.04s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 723ms (±35ms) 🟢 | historical mean value: 721ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 78ms (±11ms) 🟢 | historical mean value: 79ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 38ms 1.01s 1.31s 1.07s 1.31s
domContentLoaded 723ms 35ms 703ms 980ms 747ms 980ms
firstPaint 78ms 11ms 60ms 176ms 88ms 176ms
firstContentfulPaint 78ms 11ms 60ms 176ms 88ms 176ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: -79 Bytes (0%)
  • common: 20 Bytes (0%)

@dan437 dan437 added this pull request to the merge queue Dec 1, 2025
Merged via the queue into main with commit eeca566 Dec 1, 2025
176 checks passed
@dan437 dan437 deleted the confirmations-design-upgrades branch December 1, 2025 13:41
@github-actions github-actions bot locked and limited conversation to collaborators Dec 1, 2025
@metamaskbot metamaskbot added the release-13.13.0 Issue or pull request that will be included in release 13.13.0 label Dec 1, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.13.0 Issue or pull request that will be included in release 13.13.0 size-S team-confirmations Push issues to confirmations team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants