Skip to content

feat: Perps Chart - static#39302

Merged
gambinish merged 133 commits intomainfrom
perps/perps-chart
Jan 22, 2026
Merged

feat: Perps Chart - static#39302
gambinish merged 133 commits intomainfrom
perps/perps-chart

Conversation

@gambinish
Copy link
Copy Markdown
Member

@gambinish gambinish commented Jan 15, 2026

Description

Description

Adds the initial UI for the Perps trading feature with mock data. All data is mocked. Real API integration will come in future PRs.

  • Perps Home Page - Dashboard showing positions, orders, and market listings
  • Candlestick Chart on detail page - Interactive chart using lightweight-charts library

Changes

  • Added PerpsHomePage and PerpsMarketDetailPage components
  • Added PerpsCandlestickChart with volume bars and time interval selector
  • Added lightweight-charts@^5.1.0 dependency
  • Added routes: /perps, /perps/home, /perps/market/:symbol
  • Updated LavaMoat policies for lightweight-charts dependency
  • Added i18n strings and unit tests

Open in GitHub Codespaces

Changelog

CHANGELOG entry: Added Perps home page and market detail candlestick chart with mock data UI

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2377

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Screen.Recording.2026-01-21.at.1.37.04.PM.mov

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

Introduces initial Perps trading UI backed by mocked data and integrates a charting library.

  • Adds PerpsHomePage and updates routes (/perps, /perps/home, /perps/market/:symbol); adjusts route labels
  • Implements PerpsCandlestickChart (with volume histogram) using lightweight-charts, plus period selector and supporting mock data/utilities
  • Adds PerpsMarketBalanceActions and related UI pieces; updates i18n strings (perps labels/actions)
  • Adds dependency lightweight-charts@^5.1.0; externalizes ESM packages in build; provides Jest mock and mapper
  • Updates LavaMoat policies (browserify/webpack) for lightweight-charts/fancy-canvas globals and access
  • Minor test and config adjustments (jest.config.js)

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

@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Jan 21, 2026

Builds ready [3139f87]
UI Startup Metrics (1293 ± 98 ms)
PlatformBuildTypePageMetricTest Title (ms)Persona (ms)Mean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--1293102715909813591452
load--108287713809511331271
domContentLoaded--107687413759511261267
domInteractive--271697192286
firstPaint--1446430560182278
backgroundConnect--21719926512220243
firstReactRender--15103551626
getState--3421120123853
initialActions--109112
loadScripts--8666721151949181015
setupStore--1282731218
numNetworkReqs--171175151164
19--------
BrowserifyPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--18981627262519019622303
load--1043921178113010671312
domContentLoaded--1031915175413010571304
domInteractive--38181632735102
firstPaint--200671780210222327
backgroundConnect--260207718100243558
firstReactRender--23164852534
getState--17513426126196228
initialActions--102111
loadScripts--81470315181278281091
setupStore--1785071833
numNetworkReqs--58371372361117
19--------
WebpackStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--797658112478837935
load--64558495771657794
domContentLoaded--64058195170654786
domInteractive--2515139202078
firstPaint--1055733157130220
backgroundConnect--285117264283
firstReactRender--15113241722
getState--3316136174061
initialActions--102111
loadScripts--63857994269652779
setupStore--1264481236
numNetworkReqs--171172161165
19--------
WebpackPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--13471026209422814761759
load--69260595483712897
domContentLoaded--68359994784701891
domInteractive--36172403433122
firstPaint--1376343969185264
backgroundConnect--1287651208117594
firstReactRender--22163942430
getState--1477219816155180
initialActions--107111
loadScripts--68059793983699883
setupStore--1694771733
numNetworkReqs--863828348126160
19--------
FirefoxBrowserifyStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--13691076192918114751717
load--1101927161612711811339
domContentLoaded--1101922161612711811339
domInteractive--68272134087146
firstPaint--------
backgroundConnect--54211934376155
firstReactRender--14103951324
getState--136159161228
initialActions--1028312
loadScripts--1068913159211011381279
setupStore--143166221134
numNetworkReqs--19987181368
19--------
BrowserifyPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--25561845584272625244158
load--12761041275235812352458
domContentLoaded--12761041275235812342458
domInteractive--1043536162112252
firstPaint--------
backgroundConnect--110281538159115174
firstReactRender--2315104122331
getState--29464867234462809
initialActions--207123
loadScripts--12201024262130111892103
setupStore--12211760168104590
numNetworkReqs--5228159227092
19--------
WebpackStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--16141208231418717051954
load--13591124167711314291593
domContentLoaded--13591124167611314291592
domInteractive--862720440128146
firstPaint--------
backgroundConnect--67202304784173
firstReactRender--15115271523
getState--177247281435
initialActions--103122
loadScripts--1319110815689513851496
setupStore--2062393615104
numNetworkReqs--18977161368
19--------
WebpackPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--29951995622794337644840
load--16841209342661916553020
domContentLoaded--16831209342661916543020
domInteractive--963233762101250
firstPaint--------
backgroundConnect--2432412883412021115
firstReactRender--2716254252553
getState--33071894281596848
initialActions--203123
loadScripts--15201148325544215902833
setupStore--1289705158144513
numNetworkReqs--5029102207088
19--------
📊 Page Load Benchmark Results

Current Commit: 3139f87 | Date: 1/21/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±37ms) 🟡 | historical mean value: 1.03s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 717ms (±35ms) 🟢 | historical mean value: 718ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±13ms) 🟢 | historical mean value: 77ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 37ms 1.01s 1.30s 1.05s 1.30s
domContentLoaded 717ms 35ms 697ms 975ms 736ms 975ms
firstPaint 76ms 13ms 60ms 184ms 88ms 184ms
firstContentfulPaint 76ms 13ms 60ms 184ms 88ms 184ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 235 KiB (2.99%)
  • common: 886 Bytes (0.01%)

aganglada
aganglada previously approved these changes Jan 22, 2026
Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
cursor[bot]

This comment was marked as outdated.

Co-authored-by: Maarten Zuidhoorn <maarten@zuidhoorn.com>
Mrtenz
Mrtenz previously approved these changes Jan 22, 2026
Copy link
Copy Markdown
Member

@Mrtenz Mrtenz left a comment

Choose a reason for hiding this comment

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

Policies look good to me.

Mrtenz
Mrtenz previously approved these changes Jan 22, 2026
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

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

@metamaskbotv2
Copy link
Copy Markdown
Contributor

metamaskbotv2 bot commented Jan 22, 2026

Builds ready [2be2557]
UI Startup Metrics (1259 ± 100 ms)
PlatformBuildTypePageMetricTest Title (ms)Persona (ms)Mean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--12591005147810013211423
load--105684912589111111197
domContentLoaded--104984312529111031191
domInteractive--241592172275
firstPaint--204611175210194876
backgroundConnect--20518328513210225
firstReactRender--1593051825
getState--361675124263
initialActions--1010113
loadScripts--852654105889907988
setupStore--1273251326
numNetworkReqs--191274171269
19--------
BrowserifyPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--18651548271619919442292
load--1026905159911410501282
domContentLoaded--1014898159411510391269
domInteractive--38182383734102
firstPaint--189681217132237369
backgroundConnect--273206685123245611
firstReactRender--2216160142328
getState--17213476566182208
initialActions--105111
loadScripts--80268813891118201057
setupStore--17115581840
numNetworkReqs--59361572562126
19--------
WebpackStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--9037271261929521062
load--73361697488811920
domContentLoaded--72761296988804913
domInteractive--3018126232592
firstPaint--1176740561131242
backgroundConnect--2971583727139
firstReactRender--19124162134
getState--3616143184866
initialActions--107113
loadScripts--72461095687802908
setupStore--1577691732
numNetworkReqs--191284181272
19--------
WebpackPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--13591018211026215431901
load--69361298288699924
domContentLoaded--68360797688687918
domInteractive--35181412833118
firstPaint--1406638872185302
backgroundConnect--96762218024541
firstReactRender--22163332428
getState--15312972259156177
initialActions--104111
loadScripts--68060596787685910
setupStore--1594971726
numNetworkReqs--1033824049134222
19--------
FirefoxBrowserifyStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--13821072204919914711862
load--1118922188916911811490
domContentLoaded--1117922188216811811490
domInteractive--69338899186137
firstPaint--------
backgroundConnect--55192405151188
firstReactRender--13104361329
getState--135120131329
initialActions--102012
loadScripts--1085906187215511501365
setupStore--144164201149
numNetworkReqs--191076161467
19--------
BrowserifyPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--26791859550876626214846
load--13681048296944413392816
domContentLoaded--13671040296944413382816
domInteractive--155351775225121445
firstPaint--------
backgroundConnect--173301143247156995
firstReactRender--241685112550
getState--261741019224357743
initialActions--207123
loadScripts--1299968285138212722609
setupStore--1356686160133578
numNetworkReqs--55321152378102
19--------
WebpackStandard Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--16911366218920418332142
load--14121179199515614821755
domContentLoaded--14111179199515614821755
domInteractive--962825452131219
firstPaint--------
backgroundConnect--60201993870144
firstReactRender--16115361621
getState--187127191748
initialActions--102122
loadScripts--13751160194214414251709
setupStore--165151211338
numNetworkReqs--201085181472
19--------
WebpackPower User Home0--------
1--------
2--------
3--------
4--------
5--------
6--------
7--------
8--------
9--------
10--------
11--------
12--------
13--------
14--------
15--------
16--------
17--------
18--------
uiStartup--27741926469671226994500
load--16021214341650916142861
domContentLoaded--16021214341550916142861
domInteractive--11732842147103333
firstPaint--------
backgroundConnect--183251130251172917
firstReactRender--21153742329
getState--24464840217379739
initialActions--213123
loadScripts--15231184331443815772735
setupStore--92669714270515
numNetworkReqs--5431107217492
19--------
📊 Page Load Benchmark Results

Current Commit: 2be2557 | Date: 1/22/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±39ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 716ms (±36ms) 🟢 | historical mean value: 714ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 76ms (±14ms) 🟢 | historical mean value: 76ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 39ms 1.00s 1.32s 1.08s 1.32s
domContentLoaded 716ms 36ms 696ms 989ms 754ms 989ms
firstPaint 76ms 14ms 56ms 200ms 84ms 200ms
firstContentfulPaint 76ms 14ms 56ms 200ms 84ms 200ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 57 Bytes (0%)
  • ui: 234.08 KiB (2.94%)
  • common: 889 Bytes (0.01%)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.16.0 Issue or pull request that will be included in release 13.16.0 size-XL team-perps Perps team

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

5 participants