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.
…re it The button positions itself with transform: translateY(-130%), and the theme gives every MuiIconButton a press rule that sets transform: scale(0.99) on :active. transform is one property and the theme's selector outranks the sx, so mousedown replaced the offset outright: the button animated ~47px down, out from under the pointer, so mouseup landed elsewhere and no click event reached onSwitchReserves. The jump and the dead button were the same bug. Composing the two transforms in the active rule keeps the offset through the press. Also nudges the button and its progress ring up 6px, which is where they should have been sitting between the two inputs. Only the limit tab does this — the market tab's equivalent button needs no transform, so it never collided.
|
📦 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.77 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.66 KB (🟢 -4.38 KB) |
1.43 MB |
/404 |
2.1 KB (🟢 -754 B) |
1.34 MB |
/500 |
2.43 KB (🟢 -757 B) |
1.34 MB |
/bridge |
37.87 KB (🟡 +137 B) |
1.37 MB |
/dashboard |
81.65 KB (🟢 -3.96 KB) |
1.42 MB |
/faucet |
11.31 KB (🟢 -3.75 KB) |
1.35 MB |
/governance |
42.6 KB (🟢 -352 B) |
1.38 MB |
/governance/ipfs-preview |
99.27 KB (🟢 -2.39 KB) |
1.43 MB |
/governance/v3/proposal |
85.68 KB (🟢 -3.11 KB) |
1.42 MB |
/history |
32.52 KB (🟢 -3.82 KB) |
1.37 MB |
/markets |
52.76 KB (🟢 -2.16 KB) |
1.39 MB |
/reserve-overview |
38.81 KB (🟢 -1.05 KB) |
1.37 MB |
/safety-module |
55.13 KB (🟢 -1.34 KB) |
1.39 MB |
/sgho |
92.21 KB (🟢 -830 B) |
1.43 MB |
/staking |
31.23 KB (🟢 -2.26 KB) |
1.37 MB |
/v3-migration |
48.46 KB (🟢 -4.22 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.
Square the proposal share buttons: below lg they drop their label but kept MUI's 64px min-width and the theme's side padding, so they rendered as rectangles with the icon off centre. iconButtonSx already existed for this; the startIcon slot-margin reset it needs folds into the recipe, which also deletes the second copy in AppHeader. No-op for the consumer that passes its icon as a child. Double the gap between a mobile card's two action buttons, 6px to 12px, matching the staking panel. It was written three ways — mr on the first child, ml on the second, and the loader's own mr — so it moves to one mobileCardActionsSx next to the deposit-row recipes. The loader is the reason: it holds Skeletons, so a tweak made while looking at a real card would have missed it and the swap would visibly jump. justifyContent space-between and alignItems center go with it; both children are fullWidth with explicit heights, so neither had anything to do. Stop AssetCategoryMultiSelect forcing its own trigger to full width below sm. A shared control hardcoding one consumer's responsive width is the wrong place for it, and it stretched the dashboard card headers. Consumers can still opt in through its sx. This also drops a useMediaQuery, so the button and its open menu no longer re-render on every 760px crossing. Make the whole "Connect" row in the linked-addresses card one button. The label was inert text beside an icon-only IconButton that had no accessible name; folding it in gives the control a real one. The plus chip keeps its overlay-hover tint, now fired from the row's hover. Give the page header's title block flex: 1 at md so it absorbs the row's free space. Both blocks were flex: 0 1 auto, so they shrank in proportion to their natural widths and the description's dragged the stats narrow enough to wrap. Keep min-width: auto — with a zero basis the block absorbs no shrink, so that floor is the only thing holding the title column open when the stats overflow. Derive the dashboard tab switcher's bottom margin from the container's top padding instead of restating the literal, which is the coupling that put them out of step to begin with. Colour mobile card captions fg-3 and their tooltip icons fg-4 from ListMobileItem, via a row-caption hook on Row. That is a property of the card context rather than of any caption, so it belongs to the container rather than to thirty props. The icons keep their hover step, which a blanket colour rule would have outranked. Take the umbrella Stake button to 36px on mobile through an explicit size prop rather than inferring it from fullWidth, matching how the same problem was solved for FunSupplyButton.
|
📦 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.79 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.65 KB (🟢 -4.39 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -745 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -748 B) |
1.34 MB |
/bridge |
37.88 KB (🟡 +143 B) |
1.37 MB |
/dashboard |
81.64 KB (🟢 -3.97 KB) |
1.42 MB |
/faucet |
11.31 KB (🟢 -3.74 KB) |
1.35 MB |
/governance |
42.67 KB (🟢 -281 B) |
1.38 MB |
/governance/ipfs-preview |
99.29 KB (🟢 -2.37 KB) |
1.43 MB |
/governance/v3/proposal |
85.71 KB (🟢 -3.08 KB) |
1.42 MB |
/history |
32.52 KB (🟢 -3.81 KB) |
1.37 MB |
/markets |
52.76 KB (🟢 -2.16 KB) |
1.39 MB |
/reserve-overview |
38.82 KB (🟢 -1.04 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.24 KB (🟢 -799 B) |
1.43 MB |
/staking |
31.25 KB (🟢 -2.24 KB) |
1.37 MB |
/v3-migration |
48.48 KB (🟢 -4.2 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 header sentence compounded vault.targetRate monthly through convertAprToApy before printing it, so it read 4.59% APY directly beside a "Current APR" stat of 4.50% and a "Staking APR" of 4.50% in the card below — the same rate shown three times in two different measures, which reads as a discrepancy. Print the raw rate and label it APR so all three agree. The message id changes with the copy; the string was untranslated in es/fr/el, so nothing is lost. Catalog holds at 991.
|
📦 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.79 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.65 KB (🟢 -4.39 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -745 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -748 B) |
1.34 MB |
/bridge |
37.88 KB (🟡 +143 B) |
1.37 MB |
/dashboard |
81.64 KB (🟢 -3.97 KB) |
1.42 MB |
/faucet |
11.31 KB (🟢 -3.74 KB) |
1.35 MB |
/governance |
42.67 KB (🟢 -281 B) |
1.38 MB |
/governance/ipfs-preview |
99.29 KB (🟢 -2.37 KB) |
1.43 MB |
/governance/v3/proposal |
85.71 KB (🟢 -3.08 KB) |
1.42 MB |
/history |
32.52 KB (🟢 -3.81 KB) |
1.37 MB |
/markets |
52.76 KB (🟢 -2.16 KB) |
1.39 MB |
/reserve-overview |
38.82 KB (🟢 -1.04 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.23 KB (🟢 -806 B) |
1.43 MB |
/staking |
31.25 KB (🟢 -2.24 KB) |
1.37 MB |
/v3-migration |
48.48 KB (🟢 -4.2 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 sheet drew a 36x4 drag handle but used a plain Drawer, which has no gesture handling — so the affordance was decorative and the gesture silently failed. That mattered more than it looks: 474b9f9 removed the sheet's close button on the reasoning that swipe-down covered dismissal, leaving backdrop tap and selecting a market as the only ways out. SwipeableDrawer is the drop-in. disableSwipeToOpen because this sheet opens from its trigger, never from an edge swipe — without it, swiping up from the bottom of any page would summon the market picker. No keepMounted: MUI recommends it to make swipe-to-open feel instant, which is exactly what we disable, and it would hold ~26 market rows and their token icons in the DOM for the life of the page.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Safari zooms the page when a focused input renders below 16px, and this
field was a flat 0.875rem — the only search input in the app not going
through SearchInput, which already handles this.
Keyed on pointer rather than viewport width. The component's own isMobile
is breakpoints.down('sm'), i.e. under 760px, which catches phones and no
tablet: iPad portrait is 768, iPad Pro landscape 1366, and both zoom. No
width threshold separates a tablet from a laptop because they overlap.
Width also fires the wrong way, giving 16px to a narrowed desktop window
that has no zoom behaviour at all.
Doing it in CSS also avoids another useMediaQuery subscription and its
re-render on every 760px crossing.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +17.73 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.65 KB (🟢 -4.39 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -745 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -748 B) |
1.34 MB |
/bridge |
37.88 KB (🟡 +144 B) |
1.38 MB |
/dashboard |
81.64 KB (🟢 -3.97 KB) |
1.42 MB |
/faucet |
11.31 KB (🟢 -3.74 KB) |
1.35 MB |
/governance |
42.67 KB (🟢 -281 B) |
1.38 MB |
/governance/ipfs-preview |
99.29 KB (🟢 -2.37 KB) |
1.44 MB |
/governance/v3/proposal |
85.71 KB (🟢 -3.08 KB) |
1.42 MB |
/history |
32.52 KB (🟢 -3.81 KB) |
1.37 MB |
/markets |
52.76 KB (🟢 -2.16 KB) |
1.39 MB |
/reserve-overview |
38.82 KB (🟢 -1.04 KB) |
1.38 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.23 KB (🟢 -806 B) |
1.43 MB |
/staking |
31.25 KB (🟢 -2.24 KB) |
1.37 MB |
/v3-migration |
48.48 KB (🟢 -4.19 KB) |
1.39 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 radio and the amount both centred against the whole label, so on the combined AAVE + stkAAVE + aAAVE row — the only one that wraps — they sat between its two lines. The amount takes align="flex-start". The radio needs more than that: switching FormControlLabel to flex-start puts the radio's box top at the label's top, but the control is 36px (an 18px icon inside SwitchBase's unconditional 9px padding, which size="small" does not shrink once the theme substitutes a fixed icon) against a 20px text line, so the glyph would sit 8px low. The label carries that 8px as a top margin instead, which centres the first line on the glyph. The single-token rows render identically — centring a 20px label in a 36px box already put its top at 8px. Also stops the wrap splitting a token from its icon. The icon, the label and the "+" were three sibling flex items, so each was its own break opportunity and aAAVE's icon stayed behind on the first line. Each icon+label pair is now one item; the "+" still breaks freely.
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
1.34 MB (🟡 +17.74 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.65 KB (🟢 -4.39 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -745 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -748 B) |
1.34 MB |
/bridge |
37.88 KB (🟡 +144 B) |
1.38 MB |
/dashboard |
81.64 KB (🟢 -3.97 KB) |
1.42 MB |
/faucet |
11.31 KB (🟢 -3.74 KB) |
1.35 MB |
/governance |
42.67 KB (🟢 -281 B) |
1.38 MB |
/governance/ipfs-preview |
99.29 KB (🟢 -2.37 KB) |
1.44 MB |
/governance/v3/proposal |
85.71 KB (🟢 -3.08 KB) |
1.42 MB |
/history |
32.52 KB (🟢 -3.81 KB) |
1.37 MB |
/markets |
52.76 KB (🟢 -2.16 KB) |
1.39 MB |
/reserve-overview |
38.82 KB (🟢 -1.04 KB) |
1.38 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.23 KB (🟢 -806 B) |
1.43 MB |
/staking |
31.25 KB (🟢 -2.24 KB) |
1.37 MB |
/v3-migration |
48.48 KB (🟢 -4.19 KB) |
1.39 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.
|
Sorting ------- The double chevron beside a column label now lights the arrow matching the active direction (fg-1 against the resting fg-icon), 100ms via the motion tokens. Making that honest required fixing `sortDesc`, which lied in five of the six sortable tables: both `dashboardSortUtils` and `MarketAssetsList` produced *ascending* order for `sortDesc === true`, while `UmbrellaAssetsList` was already correct. The comparators are fixed and `handleSorting` now sets `sortDesc = true` on a new column, so markets and the four dashboard tables behave exactly as before (first click largest-first / Z-A, second reverses) with a flag that means what it says. Umbrella's first click changes from ascending to descending, which brings it in line with the other five. `dashboardSortUtils` collapses from three mirror-image functions to one `dir = sortDesc ? -1 : 1` multiplier (122 -> 80 lines, both @ts-ignores gone). Symbol ties keep returning 1 rather than `dir * 1`, which would have reordered them when descending. That collapse surfaced a real defect: `borrowAPY` is computed inside `BorrowedPositionsListItem`, not on the objects being sorted, so comparing it yielded NaN and the whole APY ordering came from the `isBorrowedPosition` pre-sort. The key now resolves to `reserve.variableBorrowAPY`, and the pre-sort runs in the same direction as the primary sort so the column agrees with its own arrow and the unsorted default order is preserved. Layout ------ - Savings deposit rows: 24px between the metric and the buttons, with the stkGHO row's two buttons grouped so they keep their tighter 12px. - Search field: focus fills with the secondary pill's bg-3 instead of a 3px outline. This is now the only focus indicator these fields have. - Filter bars on markets and staking: the gap below the bar is CONTENT_TOP_PADDING, so the row sits the same distance from the header hairline as from the table. 12px between the search field and the pills when the bar stacks. - Mobile cards: amount and USD equivalent lay out on one line, baseline aligned - `ReserveSubheader` carries a 2px top margin for the stacked layout and h5/description leading differs by 2px, so centring left them a pixel apart. Staking gets it through an `inline` prop, since the component is shared with the desktop column. - Mobile card padding: `ListMobileItem`'s header collapses when empty. The staking card supplies its own heading, so the unused header still contributed its 16px margin and the card had twice the padding above its first row as below its last. - Reserve panels: `PanelItemRow` owns the wrapping stats row - 16px between wrapped lines, and those lines top-align below `md` so a short stat (an APY has no USD sub-line) stops floating against a taller neighbour. Centring is kept from `md`, where PanelItem draws its dividers at its own 50%. - Proposal tables: bare EVM addresses middle-truncate below `sm`. A 42-char token has no break opportunity, so one address set the table's min-content width and the cell scrolled sideways. - Reserve header: 4px between token name and symbol on mobile, 8px from `sm`. - Tooltip text 10px -> 12px; market version pill reads V3/V2. Performance ----------- - `ProposalOverview`'s markdown renderer map is memoised. ReactMarkdown is not memoised and resolves every element type out of that object, so a fresh literal remounted the entire rendered proposal body each render - including the render the new breakpoint hook triggers right after hydration. - `AmountSharesItem`'s stacked branch no longer wraps in a Stack that only repeated what the enclosing one already did; `useCurrentTimestamp(1)` re-renders that component every second, per row. - The sort indicator's fully static sx is hoisted to module scope. Not rendered.
|
📦 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.21 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.73 KB (🟢 -4.31 KB) |
1.43 MB |
/404 |
2.11 KB (🟢 -745 B) |
1.34 MB |
/500 |
2.44 KB (🟢 -748 B) |
1.34 MB |
/bridge |
38.34 KB (🟡 +623 B) |
1.37 MB |
/dashboard |
81.66 KB (🟢 -3.95 KB) |
1.42 MB |
/faucet |
11.43 KB (🟢 -3.63 KB) |
1.35 MB |
/governance |
43.07 KB (🟡 +132 B) |
1.38 MB |
/governance/ipfs-preview |
99.37 KB (🟢 -2.29 KB) |
1.43 MB |
/governance/v3/proposal |
86.16 KB (🟢 -2.63 KB) |
1.42 MB |
/history |
32.57 KB (🟢 -3.77 KB) |
1.37 MB |
/markets |
52.93 KB (🟢 -1.99 KB) |
1.39 MB |
/reserve-overview |
38.83 KB (🟢 -1.03 KB) |
1.37 MB |
/safety-module |
55.17 KB (🟢 -1.31 KB) |
1.39 MB |
/sgho |
92.23 KB (🟢 -807 B) |
1.43 MB |
/staking |
31.45 KB (🟢 -2.03 KB) |
1.37 MB |
/v3-migration |
48.6 KB (🟢 -4.07 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.
Lens ---- Removed from all three surfaces: the footer link, the proposal page's share button, and the "Share on Lens" in the vote-success modal — the last of those wasn't flagged, but leaving it would have made it the only Lens surface left. `AIP.SHARE_VOTE_ON_LENS` goes with its last emitter. Dropping the vote modal's button meant `TxSuccessView` no longer received a `customAction`, and `customText` was only rendered inside that guard — so "Thank you for voting" would have disappeared with it. The two are now rendered separately, which also stops `customAction` (a Box + Button, from MigrateV3) being nested inside the `<p>` that Typography emits. "Share on twitter" is now "Share on X", with MUI's X glyph in place of the bird and the outbound URL moved to x.com, matching the footer. The analytics label stays as `Share on twitter` deliberately — it's a metric key, and renaming it would split the series from its history. Sorting ------- Column sort is now a three-state cycle: descending, ascending, then cleared. Previously it toggled between the two directions forever, so there was no way back to a list's own order. Two things had to be true for "cleared" to mean anything, and neither was: - `handleSortDashboardReserves` sorted the caller's array in place, and `SuppliedPositionsList` passes a memoised array straight in — so the first click permanently reordered the list's own ordering and clearing returned whatever the last sort left behind. It sorts a copy now. - The cycle reset `sortDesc` to `true`, but every list mounts at `false`. That matters because the borrowed-positions pre-sort still reads the direction once the name is gone, so the borrowed list cleared into the reverse of its own order. It resets to `false`. Spacing and sizing ------------------ - Alert: the default variant's glyph goes 1rem -> 1.25rem, filling the 20px content area its 2.5rem box leaves. The compact variants pin their own 1rem, since their padding leaves exactly 16px and the larger glyph would overflow. - Gov vote panel: 24px above the alert under the voting-power row, shared by both alerts in that slot instead of a literal repeated at each. - Mobile cards: 24px under the token heading, and 24px between the markets card's last row and its button. - Reserve header: 24px between the title block and the stats when stacked; unchanged side by side. - Reserve header: 4px between token name and symbol below `sm`, 8px above. - Proposal share buttons: the X glyph at 16px, through the new `startIconSizeSx` in buttonStyles. MUI sizes start icons via `.MuiButton-startIcon > *:nth-of-type(1)`, which outranks an `sx` on the icon itself — five other call sites in the app try the latter and silently do nothing. Not rendered.
📦 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.54 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.
|
…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.
1 participant
No description provided.