Skip to content

feat: move quote card to align with mobile UI#39928

Merged
ghgoodreau merged 3 commits intomainfrom
SWAPS-3971-quote-card-move
Feb 12, 2026
Merged

feat: move quote card to align with mobile UI#39928
ghgoodreau merged 3 commits intomainfrom
SWAPS-3971-quote-card-move

Conversation

@ghgoodreau
Copy link
Copy Markdown
Contributor

@ghgoodreau ghgoodreau commented Feb 9, 2026

Description

Moves the quote card from being above the swap button to below the form. This aligns the extension UI with the mobile UI, increasing consistency. It also moves the % fee disclaimer to under the swap button, this also aligns with the mobile UI.

Open in GitHub Codespaces

Changelog

CHANGELOG entry: Aligns extension swaps UI with metamask mobile UI for consistency

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3971

Manual testing steps

  1. Go to the swaps screen and get a quote
  2. The UI of the quote card and fee disclaimer should match mobile

Screenshots/Recordings

Before

Screenshot 2026-02-09 at 4 42 14 PM

After

Screenshot 2026-02-09 at 4 41 09 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

Low Risk
Primarily a UI layout/styling reflow with snapshot updates; logic changes are limited to presentation/placement of existing quote/loading components.

Overview
Reworks the PrepareBridgePage layout to render MultichainBridgeQuoteCard below the token input form (and wraps the “no quotes available” banner in its own padded section), aligning the extension’s bridge/swap screen with mobile.

Updates the footer to place BridgeCTAInfoText under the primary CTA, tweaks the initial-quote loading state container/centering, and enhances the loading mascot animation styling (new background layers + bridge-loader-spin keyframes). Snapshots were updated to reflect the new DOM structure.

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 9, 2026

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-swaps-and-bridge Swaps and Bridge team label Feb 9, 2026
@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Feb 9, 2026

✨ Files requiring CODEOWNER review ✨

🔄 @MetaMask/swaps-engineers (5 files, +152 -106)
  • 📁 ui/
    • 📁 pages/
      • 📁 bridge/
        • 📁 __snapshots__/
          • 📄 index.test.tsx.snap +11 -11
        • 📁 prepare/
          • 📁 __snapshots__/
            • 📄 prepare-bridge-page.test.tsx.snap +22 -22
            • 📄 index.scss +36 -0
            • 📄 prepare-bridge-page-footer.tsx +1 -1
            • 📄 prepare-bridge-page.tsx +82 -72

@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Feb 9, 2026

Builds ready [bb953e1]
UI Startup Metrics (1319 ± 89 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1319114416338913671477
load114296614368211811278
domContentLoaded113596214328211721263
domInteractive251588172273
firstPaint153681206126194291
backgroundConnect23121429812234254
firstReactRender15102931620
initialActions105112
loadScripts9197581210819561045
setupStore1263141419
numNetworkReqs231592201582
BrowserifyPower User HomeuiStartup16761312228516417282016
load1087971185116510701552
domContentLoaded1068964172814710561475
domInteractive3418263303288
firstPaint217631744240231314
backgroundConnect30326738824315351
firstReactRender21134652229
initialActions104111
loadScripts84974614571418411241
setupStore1453861523
numNetworkReqs1134526046134203
WebpackStandard HomeuiStartup822671115699891984
load721597108199799883
domContentLoaded715592107499793878
domInteractive251585172372
firstPaint1135761475123231
backgroundConnect24174152735
firstReactRender14103751621
initialActions104111
loadScripts713590107298786876
setupStore1165261122
numNetworkReqs231589211586
WebpackPower User HomeuiStartup------
load------
domContentLoaded------
domInteractive------
firstPaint------
backgroundConnect------
firstReactRender------
initialActions------
loadScripts------
setupStore------
numNetworkReqs------
FirefoxBrowserifyStandard HomeuiStartup15691346223516315951915
load13521163181411913871593
domContentLoaded13511157181412013871591
domInteractive843231254103192
firstPaint------
backgroundConnect5630125175695
firstReactRender12102121214
initialActions102112
loadScripts13261137176411613621566
setupStore146138211228
numNetworkReqs241398221785
BrowserifyPower User HomeuiStartup27142045458246628083517
load15761271250127617002094
domContentLoaded15751270250027517002094
domInteractive13738808147117428
firstPaint------
backgroundConnect237108909187210856
firstReactRender18156381823
initialActions102122
loadScripts15391249244526416672074
setupStore1198793178102549
numNetworkReqs65371573189126
WebpackStandard HomeuiStartup15211333280718815621808
load13211153263416213661484
domContentLoaded13201153263416213621484
domInteractive87271371138109140
firstPaint------
backgroundConnect50252283149121
firstReactRender14105361319
initialActions103112
loadScripts12961138261015913381441
setupStore146131171140
numNetworkReqs231293191778
WebpackPower User HomeuiStartup26301931442844427643547
load15201237316432816492098
domContentLoaded15191237316432816482098
domInteractive13532725166102622
firstPaint------
backgroundConnect3031081230233316866
firstReactRender21155772328
initialActions213122
loadScripts14761184310930216091958
setupStore1537754203182660
numNetworkReqs64341893693133
📊 Page Load Benchmark Results

Current Commit: bb953e1 | Date: 2/9/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±42ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 716ms (±38ms) 🟢 | historical mean value: 717ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±11ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 42ms 997ms 1.30s 1.07s 1.30s
domContentLoaded 716ms 38ms 690ms 970ms 745ms 970ms
firstPaint 76ms 11ms 60ms 172ms 84ms 172ms
firstContentfulPaint 76ms 11ms 60ms 172ms 84ms 172ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs
  • background: 58 Bytes (0%)
  • ui: 118 Bytes (0%)
  • common: 20 Bytes (0%)

@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Feb 9, 2026

Builds ready [3d7f1fb]
UI Startup Metrics (1334 ± 84 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1334116715578413831492
load115097613538011871290
domContentLoaded114397113468011821282
domInteractive261685172370
firstPaint182651214189210333
backgroundConnect23321431715236255
firstReactRender16113941724
initialActions106113
loadScripts9257531130809671063
setupStore1262441419
numNetworkReqs231589201582
BrowserifyPower User HomeuiStartup17681394305223418042208
load11651034182215711461553
domContentLoaded11501027181315511351528
domInteractive3619185283579
firstPaint1677148574228275
backgroundConnect33028999573335377
firstReactRender24156392642
initialActions104112
loadScripts91278815641538981265
setupStore1664072031
numNetworkReqs1144726146143197
WebpackStandard HomeuiStartup8446881131999111006
load72261293480773865
domContentLoaded71760592880767858
domInteractive261595182274
firstPaint1176232362149252
backgroundConnect25185072841
firstReactRender14102941723
initialActions103112
loadScripts71460392679765850
setupStore1263641319
numNetworkReqs231595211582
WebpackPower User HomeuiStartup1207898201818712951585
load69860513801296831023
domContentLoaded68960013731276721012
domInteractive36171953431113
firstPaint13063680104123366
backgroundConnect16213040352160253
firstReactRender22163432427
initialActions102111
loadScripts6865981364125670994
setupStore1254761419
numNetworkReqs1254527751155237
FirefoxBrowserifyStandard HomeuiStartup15131301214815315451852
load12991128181411613391518
domContentLoaded12981128181311613381518
domInteractive73312504198135
firstPaint------
backgroundConnect5328184205283
firstReactRender1191611213
initialActions102012
loadScripts12741104170811013181486
setupStore146178201234
numNetworkReqs241290201782
BrowserifyPower User HomeuiStartup27081942442840528693564
load15361292243823815882083
domContentLoaded15351291243823815882078
domInteractive1163555089118319
firstPaint------
backgroundConnect292120953233325921
firstReactRender201469101926
initialActions2048522
loadScripts14951271238422615491962
setupStore18811887217296671
numNetworkReqs68361513193132
WebpackStandard HomeuiStartup15821341196711116341789
load1373119116969314261523
domContentLoaded1372119116959314261523
domInteractive902929547129155
firstPaint------
backgroundConnect55251502761133
firstReactRender14119381418
initialActions103122
loadScripts1344116615958913991490
setupStore13659101136
numNetworkReqs231293191775
WebpackPower User HomeuiStartup27151986396947328513684
load15471223254833016482237
domContentLoaded15471223254833016482237
domInteractive12731749143116548
firstPaint------
backgroundConnect3171141387269295921
firstReactRender21153542329
initialActions203122
loadScripts14991204251731116002191
setupStore2149794252372750
numNetworkReqs66361343097118
📊 Page Load Benchmark Results

Current Commit: 3d7f1fb | Date: 2/9/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.01s (±39ms) 🟡 | historical mean value: 1.03s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 695ms (±36ms) 🟢 | historical mean value: 717ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±11ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.01s 39ms 972ms 1.29s 1.03s 1.29s
domContentLoaded 695ms 36ms 667ms 962ms 708ms 962ms
firstPaint 76ms 11ms 64ms 176ms 84ms 176ms
firstContentfulPaint 76ms 11ms 64ms 176ms 84ms 176ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs
  • background: 58 Bytes (0%)
  • ui: 118 Bytes (0%)
  • common: 20 Bytes (0%)

@ghgoodreau ghgoodreau marked this pull request as ready for review February 10, 2026 15:17
@ghgoodreau ghgoodreau requested a review from a team as a code owner February 10, 2026 15:17
@ghgoodreau ghgoodreau enabled auto-merge February 10, 2026 15:35
@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Feb 11, 2026

Builds ready [c91c79e]
UI Startup Metrics (1414 ± 89 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1414121416158914671568
load1210102113858512691334
domContentLoaded1203100813688412621320
domInteractive271790172477
firstPaint172661329176210309
backgroundConnect24823035818256275
firstReactRender1592431720
initialActions105113
loadScripts97277511458410321092
setupStore1262741521
numNetworkReqs221588201581
BrowserifyPower User HomeuiStartup195213308914108018073535
load1137998221419311141603
domContentLoaded1121988217118911001552
domInteractive36162063331125
firstPaint224661292161250331
backgroundConnect4442754044566326989
firstReactRender21143342229
initialActions102011
loadScripts89676118901788791307
setupStore1363041420
numNetworkReqs1214628148144225
WebpackStandard HomeuiStartup795661108290837952
load691587101289743853
domContentLoaded685582100788735845
domInteractive251594182173
firstPaint1115627952153198
backgroundConnect25164972938
firstReactRender14103141722
initialActions103111
loadScripts682580100587733843
setupStore1274161126
numNetworkReqs2415102231586
WebpackPower User HomeuiStartup1247874290628912971666
load71961114031327121038
domContentLoaded70960613931317021031
domInteractive40182133736146
firstPaint157651078152175308
backgroundConnect1891291759186162344
firstReactRender21163732226
initialActions103011
loadScripts70660413851297001024
setupStore1343961519
numNetworkReqs1294528553149245
FirefoxBrowserifyStandard HomeuiStartup15501310243117315811873
load13401137207714413851584
domContentLoaded13391132207114413851584
domInteractive75322875293149
firstPaint------
backgroundConnect5629194196084
firstReactRender1292421214
initialActions102112
loadScripts13141114204114113601542
setupStore146131151235
numNetworkReqs241293211684
BrowserifyPower User HomeuiStartup27182054437642328193711
load15331277259023816321976
domContentLoaded15331277258623816311976
domInteractive13635663122138410
firstPaint------
backgroundConnect3181101502291355936
firstReactRender1913123131726
initialActions103122
loadScripts14921246255022615851930
setupStore1649773225202713
numNetworkReqs70381543095124
WebpackStandard HomeuiStartup15241308205214715671782
load13241133161810413721498
domContentLoaded13231133161710513681498
domInteractive802723443109146
firstPaint------
backgroundConnect48231452551104
firstReactRender14104861319
initialActions103112
loadScripts13021118158310213531465
setupStore156185251156
numNetworkReqs231294191781
WebpackPower User HomeuiStartup27312050410346129433661
load15641250255829816052297
domContentLoaded15641250255829816052297
domInteractive14534898177111645
firstPaint------
backgroundConnect3481241525285381908
firstReactRender22157372432
initialActions204123
loadScripts15231233251828515722202
setupStore1508759193158661
numNetworkReqs68362073782147
📊 Page Load Benchmark Results

Current Commit: c91c79e | Date: 2/11/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±41ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 721ms (±63ms) 🟢 | historical mean value: 735ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 79ms (±42ms) 🟢 | historical mean value: 81ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 41ms 1.01s 1.34s 1.06s 1.34s
domContentLoaded 721ms 63ms 696ms 1.30s 747ms 1.30s
firstPaint 79ms 42ms 60ms 496ms 84ms 496ms
firstContentfulPaint 79ms 42ms 60ms 496ms 84ms 496ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 297.67 KiB (7.43%)
  • ui: 8.37 KiB (0.1%)
  • common: 140.31 KiB (1.31%)

@ghgoodreau ghgoodreau added this pull request to the merge queue Feb 12, 2026
Merged via the queue into main with commit b13e88c Feb 12, 2026
176 checks passed
@ghgoodreau ghgoodreau deleted the SWAPS-3971-quote-card-move branch February 12, 2026 17:28
@github-actions github-actions bot locked and limited conversation to collaborators Feb 12, 2026
@metamaskbot metamaskbot added the release-13.19.0 Issue or pull request that will be included in release 13.19.0 label Feb 12, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.19.0 Issue or pull request that will be included in release 13.19.0 size-M team-swaps-and-bridge Swaps and Bridge team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants