Conversation
…e transition Phase 1 of a unified overlay motion system. A shared ScaleFade transition (opacity 0→1 + scale 0.96→1, modeled on MUI's Grow) is wired as the default TransitionComponent for MuiMenu and MuiPopover at 100ms, so all menus, selects and popovers pop consistently instead of using MUI's default Grow. Timing lives in a single motion-tokens module. - src/utils/motion.ts: central duration/easing tokens (single source of truth) - ScaleFade: MUI-compatible transition primitive (scale 0.96, not Grow's 0.75) - theme: MuiMenu/MuiPopover transition defaults + global prefers-reduced-motion - showcase: Select/Menu specimens in the Overlays section Modals and drawers are intentionally untouched (deferred to later phases).
The outlined variant sets border:none at rest, but its :hover block only changed background + re-asserted the box-shadow ring, so MUI's built-in .MuiButton-outlinedPrimary:hover border leaked through on hover only. Force border:none in the hover/focus block so the borderless pill stays borderless.
…radients - figmaColors.ts: single source of truth for color tokens + the figVars var() accessor. - theme.tsx: flatten tokens onto the MUI CssVars palette (P3 + sRGB fallback); emit P3 vars. - colorToP3.ts: Display-P3 conversion for the @supports P3 override layer. - gradients slot/type removed; the new branding uses the solid purple-1 token.
Sweep explicit color reads onto flattened figma tokens (bare sx strings / figVars) for P3. Also swaps the brand gradient for the solid purple-1 token in the affected components.
Same token sweep across module components for Display-P3 with sRGB fallback. Swaps the brand gradient for purple-1 in the E-Mode button, StakeActionBox and version badge.
Token sweep across layouts; swaps the newGradient banner for purple-1 in TopBarNotify.
Buttons, icon and toggle buttons scale to 0.99 on :active (not disabled) via a shared fragment. MarketSwitcher's custom Box trigger gets the same press feedback inline.
DotsHorizontalIcon: currentColor meatball icon replacing the '...' text supply dropdown. iconButtonSx (buttonStyles.ts): square icon-only button styling (min-width 0, 0.25rem pad). Desktop table action buttons across the four dashboard lists set to size=small.
|
…button E-Mode info: put 24px between the category rows. The gap there was never a spacing rule — it came from ReserveOverviewBox's `marginBottom: '2%'`, a percentage margin that resolves against the container's *width*, so the vertical rhythm changed with the viewport (~19.5px at 976px, the same 2% as the horizontal gutters). The container is now a flex column with a 24px gap and each category is one Box rather than a Fragment, so the gap has a unit to act on. That 2% is zeroed inside this panel and replaced with `rowGap: '12px'` on the metric row. The boxes do wrap on narrow screens — ReserveOverviewBox has no `min-width: 0`, so they can't shrink past their label's min-content — and the margin was the only thing keeping wrapped rows apart. `rowGap` covers that without leaving trailing space under the last row. ReserveOverviewBox itself is untouched, so SupplyInfo and ReserveFactorOverview are unaffected. The explainer paragraph moves ~43px -> 48px below the last row, since it keeps its own `paddingTop: 24px` on top of the new gap. Secondary button (`variant="outlined"`) in dark: flat fill, no ring. Both layers of `figSurfaceShadow()` map to the button's Figma shadow tokens (shadow-low -> shadow-secondary-btn, shadow-stroke-2 -> border-secondary-btn) and both are transparent in the dark set, so the pill drops its box-shadow entirely — at rest, hover, focus, aria-expanded and disabled. `&&` is used to outrank the base rules the variant inherits. The dark fill needed a new token: the spec's #28282a is neither our dark bg-3 (#1f1e1e) nor bg-4 (#2a2828, which leans red where this leans blue), and the Figma var is button-scoped. Added `button-bg-secondary` alongside the other semantic/button tokens — #28282a dark, #ffffff light, which is what light bg-3 already was, so light mode is byte-identical. Reaches all 18 outlined call sites, not just the header. Select triggers share the surfaceFill recipe but are not this variant, so they keep bg-3 and the ring in dark.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.33 MB (🟡 +12.58 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.8 KB (🟢 -4.24 KB) |
1.42 MB |
/404 |
2.11 KB (🟢 -744 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +674 B) |
1.37 MB |
/dashboard |
81.73 KB (🟢 -3.88 KB) |
1.41 MB |
/faucet |
11.47 KB (🟢 -3.58 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +133 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.99 KB (🟢 -1.93 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -805 B) |
1.42 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.63 KB (🟢 -4.04 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
3b38001 removed the shadow with a `&&`-doubled selector nested inside `darkScheme`, which never reached the browser. `&` expands to the whole parent selector, and inside `darkScheme` that parent is a descendant selector rather than a bare class, so `&&` compiled to: *:where([data-mui-color-scheme="dark"]) .MuiButton-outlined*:where(…) .MuiButton-outlined A universal selector mid-compound is invalid, and one invalid selector in a comma list drops the whole rule — so `box-shadow: none` was never applied. The fill change was a plain property and did land, which is why the button showed the new #28282a surface with the old ring still on top, plus a white flash on hover: dark shadow-stroke-2 is rgba(255,255,255,0.1), re-asserted by pillStyle's own hover rule over 100ms. The `&&` idiom was lifted from `bareSelectSx` in this file, where it does work — there `&` is a single class, so doubling it is valid. Now plain `&` selectors in `secondaryPillDark`, spread last in the variant so they follow `pillStyle`'s rules and `&.Mui-disabled`. They match at equal specificity and win on source order. Verified through stylis: every selector is valid and every dark rule is emitted after the base rule it overrides. Moving that spread back above `&.Mui-disabled` would silently restore the bug, so the constraint is noted at the definition.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.33 MB (🟡 +12.58 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.8 KB (🟢 -4.24 KB) |
1.42 MB |
/404 |
2.11 KB (🟢 -744 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +674 B) |
1.37 MB |
/dashboard |
81.73 KB (🟢 -3.88 KB) |
1.41 MB |
/faucet |
11.47 KB (🟢 -3.58 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +133 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.99 KB (🟢 -1.93 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -805 B) |
1.42 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.63 KB (🟢 -4.04 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
The table and card buttons — Withdraw, Repay, the list Hide toggle — are `variant="tertiary"`, not the outlined variant fixed in e2f982b, so they kept their hairline ring in dark. Tertiary is the app's default button, 72 call sites, which is why it reads as "every button in a table or a card". Tertiary now drops its box-shadow in dark in every state, matching secondary. The dark fill is unchanged at bg-4 (#2a2828) — only the ring was reported, and there is no tertiary surface value in the spec to apply. Light mode is byte-identical; the old `darkFill` argument only ever emitted a dark rule. Doing this needed a small refactor rather than a second `darkScheme` spread. `pillStyle`'s `darkFill` already emitted one, and two `darkScheme` calls on one element collide on the same object key — the later spread drops the earlier one whole, so the fill would have silently disappeared. Same failure mode as the `&&` bug, invisible at the call site. So `darkFill` is gone from `pillStyle`, which had no other caller, and the dark recipe lives in one `pillDark(fill)` factory used by both variants. `pillStyle` is light-only, `pillDark` is dark-only, one `darkScheme` per variant. The ordering constraint and the collision reason are documented at `pillDark`. Also swept every `darkScheme(` call in src/ for a nested `&&`; the one fixed in e2f982b was the only instance. Select triggers still carry the ring in dark. They share the surfaceFill recipe but are not a Button variant, so nothing here reaches them.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.33 MB (🟡 +12.6 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.8 KB (🟢 -4.24 KB) |
1.42 MB |
/404 |
2.11 KB (🟢 -744 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +674 B) |
1.37 MB |
/dashboard |
81.73 KB (🟢 -3.88 KB) |
1.41 MB |
/faucet |
11.47 KB (🟢 -3.58 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +133 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.99 KB (🟢 -1.93 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -805 B) |
1.42 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.63 KB (🟢 -4.04 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Only three markets carried a line under the name; the rest showed nothing.
All 24 that have approved copy now have one, so the description reads as part
of the control rather than something Core happens to get.
The 21 single-market networks share one translatable string that takes the
network's name, rather than 21 near-identical entries. Same rendered copy,
one message for translators instead of twenty-one. The three Ethereum
instances sit side by side in the picker and have to distinguish themselves,
so those are written out.
Keyed by market id, not title: `Avalanche` and `Polygon` each name both a v2
and a v3 market, so a title key would collide.
Moved to module scope. The old map was rebuilt on every render for no reason,
and none of it depends on component state.
Ink's copy is now the standard network line, which drops the note about the
instance being operated by Tydro and governed by the Ink Foundation. Confirmed
as intended.
Two markets are still blank, and render nothing rather than an empty line:
- EtherFi, which has no approved copy yet. It is on mainnet with a market
logo override, so it is a fourth Ethereum instance alongside Core, Prime
and Horizon rather than a network — "core assets on EtherFi" would be
wrong, and it needs a line of its own.
- Base Sepolia, testnet only.
Reaches the dashboard, the markets page and PageHeader alike, since all three
render the same MarketSwitcher.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.33 MB (🟡 +12.81 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.8 KB (🟢 -4.24 KB) |
1.42 MB |
/404 |
2.11 KB (🟢 -744 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +674 B) |
1.37 MB |
/dashboard |
81.73 KB (🟢 -3.88 KB) |
1.41 MB |
/faucet |
11.47 KB (🟢 -3.58 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +133 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.99 KB (🟢 -1.93 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -805 B) |
1.42 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.63 KB (🟢 -4.04 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Hovering the market picker faded its title to 60% opacity. Dimming the
brightest thing on the page reads as "disabled", which is the opposite of
what a control should say when you reach for it. The title is fg-1 already,
so there was nowhere brighter to go — the only directions left are chroma and
bloom, which is what this does.
A soft band drifts across the label while the picker is hovered, keyboard
focused, or open. Under it the glyphs take a periwinkle tint, glow, and
thicken from 500 to 550 in light or 600 in dark. Nothing happens at rest:
the animation property is `none`, not paused, so there is no compositor work
when the pointer is elsewhere.
The band is a mask rather than a paint, so one travelling window drives both
the tint and the bloom and they cannot drift apart. It enters and leaves at
zero alpha, so the loop has no seam.
Weight is per letter, so the thickening travels with the light instead of the
word pulsing as a whole. The band's centre reaches the word's left edge a
quarter of the way through the loop and its right edge three quarters
through, so each letter is phase-shifted by its position. WEIGHT_LEAD runs
the crest slightly ahead of the band's alpha peak — the band is wider than
the word, so its leading edge lights a letter well before its centre arrives,
and lining the two up exactly reads as late.
Nothing moves. Each letter is drawn twice: a hidden copy at rest weight holds
the box open and a positioned copy carries the animation, so a heavier glyph
grows into its own sidebearings. Measured across a full loop on "Avalanche",
the wrapper width, every letter's x, and the V3 pill's and chevron's x each
hold a single value.
Two things that look removable and are not:
- `mask-clip` defaults to `border-box` and discards everything an element
paints outside its own box, which cuts a blurred glow off square. The
ghosts are inset by BLOOM_ROOM and pad themselves back out, while
`mask-origin: content-box` keeps the band's travel measured against the
word alone — widening the box would otherwise desync the letter phases.
- `onAnimationEnd` carries the same handler as `onAnimationIteration`
because CssBaseline pins animations to one iteration under
`prefers-reduced-motion`, where the sweep ends rather than repeating.
Turning it off lets the sweep in flight finish rather than freezing a band
over the word: it stops on the sweep's own iteration boundary, the one
instant where the band is off the word and every letter is back at rest.
Per-letter animation needs per-letter elements, and browsers do not kern
across element boundaries, so the label sits a touch looser than before —
about 2.5px on "Avalanche". It also needs a variable font; the app's Inter
Variable has a wght axis, but against the static fallback the lit weight
snaps to the nearest cut and the thickening simply does not show.
Hover and focus are tracked separately so neither cancels the other, and
focus is gated on :focus-visible so clicking the trigger does not leave the
label lit after the pointer moves away.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +14.09 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.8 KB (🟢 -4.24 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -746 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +673 B) |
1.37 MB |
/dashboard |
81.73 KB (🟢 -3.89 KB) |
1.42 MB |
/faucet |
11.47 KB (🟢 -3.59 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +132 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.99 KB (🟢 -1.93 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -805 B) |
1.43 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.63 KB (🟢 -4.04 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
The incentives panels share ContentWithTooltip with every one-line text
tooltip in the app, so they inherited the tooltip grey. That base reads as a
chip, which is right for a sentence and wrong under a panel of rows.
ContentWithTooltip now takes `variant`. The `card` surface is bg-3 in light
and bg-4 in dark. bg-4 alone would not have been a change in light, where it
sits a single step off bg-5 — #f2f2f2 against #f1f1f1.
One styled Popper, not two. The surface is a CSS variable so the arrow states
that it matches rather than repeating the value, and the card branch is a
class on the popper: PopperProps is typed Partial<PopperProps>, which has no
room for a data attribute without a cast.
The card drops two of the tooltip's type rules rather than inheriting them:
- `textAlign: center`. Merit and Merkl both set `alignItems: start` and put
a left-aligned logo directly above a ~150-character legal paragraph,
which was rendering centred under it.
- `maxWidth: 250px`. At 0.88rem padding under border-box that is a 221.84px
content box, and Merit's widest row — "Merit Incentives Combined (+)" at
subheader2, plus the row's 8px gutter, plus the percent — measures about
227px. It was already overflowing, and wrapping centred. The card gets
20rem.
Three of the six incentives buttons opt in: Incentives, Merit and Merkl, all
of which render Row-based panels. Ethena, Ether.fi and Sonic stay tooltips —
each is a sentence, a link and a disclaimer, which is what the grey suits.
Nothing else moves; the other consumers do not pass `variant`.
The showcase gains a card specimen carrying a paragraph and Merit's widest
row, so it exercises the wrap case rather than two short labels that never
reach the limit.
Worth knowing for the next change here: the showcase's own light/dark toggle
sets data-mui-color-scheme on a local wrapper, and the popper portals to
body, so it escapes the toggle and renders at the app's global scheme. The
layout already re-declares the attribute inside its portalled Drawer for the
same reason. Use the app's theme switch to compare popper surfaces.
Not routed through a shared floating-surface recipe. In light this is the
same pixel as `Paper variant="card"` (#ffffff either way), and the app now
carries a fourth hand-rolled elevated-panel grey in dark. Consolidating that
means extracting a helper in theme.tsx and rewiring the card and menu paper
variants, which is its own change.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +14.22 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.82 KB (🟢 -4.22 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -746 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +673 B) |
1.37 MB |
/dashboard |
81.74 KB (🟢 -3.87 KB) |
1.42 MB |
/faucet |
11.47 KB (🟢 -3.59 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +132 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
53 KB (🟢 -1.92 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.18 KB (🟢 -1.29 KB) |
1.39 MB |
/sgho |
92.25 KB (🟢 -791 B) |
1.43 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.65 KB (🟢 -4.03 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
The only V2 affordance left in the market selector was a link row under
"Show legacy markets" pointing at v2-market.aave.com, carrying the favicon as
its logo. It is gone.
The V2 markets themselves were never reachable from the picker — every group
derives from `availableMarkets.filter((id) => marketsData[id].v3)`, so
proto_mainnet, proto_polygon, proto_avalanche and proto_fuji have always been
filtered out upstream of the grid. This removes the last way into V2 from the
selector.
With the row gone the Legacy section no longer needs a fragment, so it takes
the same one-liner shape as the Ethereum and L2 sections above it. The
section itself stays and still holds its V3 markets — EtherFi, ZKsync,
Soneium, Metis and Scroll. renderLinkRow stays too; the V4 rows still use it.
Deliberately not part of this change, since the ask was to hide it from the
menu for now:
- `?marketName=proto_mainnet` and a stale `localStorage.selectedMarket`
still resolve to a V2 market. setCurrentMarket guards only on
`availableMarkets.includes(...)`, and that list still contains V2, so
anyone who previously selected one still lands on it.
- /v3-migration is untouched and still works. It is gated entirely on
markets carrying V3_MIGRATOR, so it would crash rather than degrade if
the V2 entries were deleted — worth settling before going further.
- No V2 market entries or V2 code paths were removed.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +14.17 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.82 KB (🟢 -4.22 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -746 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +673 B) |
1.37 MB |
/dashboard |
81.74 KB (🟢 -3.87 KB) |
1.42 MB |
/faucet |
11.47 KB (🟢 -3.59 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +132 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
53 KB (🟢 -1.92 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.18 KB (🟢 -1.29 KB) |
1.39 MB |
/sgho |
92.25 KB (🟢 -791 B) |
1.43 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.65 KB (🟢 -4.03 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
Arc joins the V4 link rows under "L1 Networks", next to the Avalanche V4 link. Circle's Arc is a standalone chain — its own chain id and USDC as its native currency, not a rollup settling to Ethereum — so it belongs with Plasma, Sonic and Aptos rather than with Base or Arbitrum. A link row, not a market. That matters: the address book does ship an Arc deployment, but only as AaveV4Arc — hub-and-spoke, ACCESS_MANAGER, POSITION_MANAGERS, V4_SECURITY_COUNCIL. It has none of the four addresses MarketDataType requires, there is no AaveV3*Arc module in any published release, and contract-helpers has no V4 support. So a real market entry is not currently possible, and none was added — nothing touches marketsConfig, networksConfig or the address book. These rows are plain external links. The URL is AAVE_PRO_URL, matching both existing V4 rows: Aave Pro and Avalanche V4 already point at the same pro.aave.com page with no per-market path. If Arc gets its own destination this becomes a second constant. The icon is the supplied artwork with two changes. Its background was `var(--arc)`, which cannot resolve here — row logos render through renderRowLogo as an `<img src>`, and an externally referenced SVG is its own document with no sight of the page's custom properties. It is baked in as #1B3158. It was also squared off, and every other mark in icons/networks is a circular tile (plasma rx=120/240, linea rx=540/1080, sonic rx=100/200, base r=73, celo r=125), so it carries rx=250 to match.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +14.18 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixteen Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ |
91.82 KB (🟢 -4.22 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -746 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -747 B) |
1.34 MB |
/bridge |
38.39 KB (🟡 +673 B) |
1.37 MB |
/dashboard |
81.74 KB (🟢 -3.87 KB) |
1.42 MB |
/faucet |
11.47 KB (🟢 -3.59 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +132 B) |
1.38 MB |
/governance/ipfs-preview |
97.65 KB (🟢 -4.01 KB) |
1.43 MB |
/governance/v3/proposal |
84.41 KB (🟢 -4.38 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
53 KB (🟢 -1.92 KB) |
1.39 MB |
/reserve-overview |
38.84 KB (🟢 -1.01 KB) |
1.37 MB |
/safety-module |
55.18 KB (🟢 -1.29 KB) |
1.39 MB |
/sgho |
92.25 KB (🟢 -791 B) |
1.43 MB |
/staking |
31.51 KB (🟢 -1.98 KB) |
1.37 MB |
/v3-migration |
48.65 KB (🟢 -4.03 KB) |
1.38 MB |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
3 participants
No description provided.