feat(wallet): refine WalletPanel + add Compact and Compact V1 variants#6
Open
ChefWafflesPCS wants to merge 39 commits into
Open
feat(wallet): refine WalletPanel + add Compact and Compact V1 variants#6ChefWafflesPCS wants to merge 39 commits into
ChefWafflesPCS wants to merge 39 commits into
Conversation
Introduces a Spot / Perp / Farming bucket model so users can see how
their balance is distributed across EOA wallet, Aster perp contract,
and PCS LP positions, with weighted PnL across all three.
- Total + weighted PnL hero with 24H/7D/All segmented control
- Top composition strip (purple/amber/teal) with legend
- Three collapsible bucket cards, each with subtotal + per-bucket PnL
pill + % share bar
- Spot expands to token rows + Send/Receive/Swap actions
- Perp expands to margin used/available + open positions
- Farming expands to pending CAKE rewards + LP positions with
in-range/out-of-range tags
- Hide-balance eye toggle, Hide-small-balances checkbox, Bridge link
- Themes via PCS CSS variables — light/dark switch automatically
- Storybook variants for default + each bucket expanded + timeframes
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Refine WalletPanel to match Figma simplified design (Spot + Perps only, drop Farming/eye/hide-small-balances row, add chain grid wallet chip, inline-decimal hero, gradient composition bar, click-to-expand bucket cards with token/position lists and Send/Receive/Swap or Deposit/Withdraw/Manage actions). - Add WalletPanelCompact: groups composition + buckets into a single Overview-titled card with internal 1px section dividers. - Add WalletPanelCompactV1: drill-down navigation pattern — bucket rows show vertical color bar + right chevron; clicking opens a full bucket detail view with back-arrow header. - Standardize "Hide small balances" pill across all 3 variants (8px padding, 12px radius, card-secondary bg, 1/1/2/1 borders). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… polish
PerpsPage
- Renders MobilePerpsPage at viewports ≤ 767 px via a small
matchMedia hook (mobile breakpoint = 767). MobilePerpsPage
fills the responsive viewport up to the same 767 px cap.
MobilePerpsPage
- Wired all the previously-static affordances to real interactions
matching the desktop:
• leverage pill opens the LeverageModal (BunnySlider inside)
• order-type select opens a portaled menu with
Market / Limit / Stop Limit / Stop Market
• symbol pill opens a full-page MarketsDropdown action sheet
• star toggles activeSymbol in the favourites set (style
mirrors the dropdown's StarSvg)
• order-book footer icon mirrors the desktop view-icons
(Both / Asks / Bids) and opens a bottom action sheet
• tick-size button opens a 0.1 → 100 dropdown
• history icon opens a full-page History sheet with
Order / Trade / Transactions tabs (PCS styling)
- Replaced the broken history SVG with the standard MD `history`
glyph; replaced the local Chart with PCS ChartIcon /
ChartDisableIcon (filled / strike-through state).
- Removed the bottom-right filter icon and the unused Filter SVG.
- Account row: removed Transfer; Deposit promoted to primary
teal CTA.
- All sheet headers put the close button on the right and use
textSubtle fill (PCS secondary-fill icon colour).
MarketsDropdown
- @media (max-width: 767px) → full-page action sheet with no
border / radius / shadow so the widget itself reads identically
to the symbol-pill sheet on MobilePerpsPage.
- Row hover swapped from `input` to `cardSecondary` and given an
8 px border-radius + 0.12s transition.
PositionsPanel
- Row-hover padding reduced to 16 × 12 across all 4 tables.
Padding now lives on RowGroup's `& > *` so it actually applies
to the data cells (parent grid's `& > *` only reaches Th
headers because RowGroup is display:contents).
Modal primitive
- Close button gets `mr="-4px"` so the icon optically aligns 4 px
closer to the modal's right edge across every Modal-backed
widget.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…pansion - Replace placeholder lavender squares with real 3D PNG icons (brown leather wallet for Spot, blue candle chart for Perps); remove the vertical color bars on bucket rows. - Detail view top group (hero + track + description) tightened to 8px gaps via new `.wpc1-detail-top` wrapper; root keeps 16px gap to the next section. - Perp detail (when user clicks Perps Balance row) replaced with the new layout: simplified description, no positions list at top, Balance + Unrealized PnL stats card, Transfer / Withdraw / Deposit action buttons (Deposit is primary). - Stats card supports per-row expansion (mutually exclusive). Click caret on Balance: shows Hide small balances + USDC/ETH/BNB token rows. Click caret on Unrealized PnL: shows Hide small balances + ETH Long / BTC Short / BNB Long position rows. Caret rotates 180° when its section is expanded. - Add `balanceTokens` field to perp bucket data with mock USDC/ETH/BNB collateral. - Update perp action prop type to include 'transfer'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add OrderHistoryRow type + orderHistory prop. Replace the "coming soon" placeholder with a table that renders date/time/symbol/side/type/price/ size/filled/status. Tab label reflects row count. Consumed by pancake-frontend's PositionsPanel adapter via the new usePrivateOrderHistory hook (separate PR on feat/perps-aster). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
LeverageModal:
- Swap BunnySlider for the primitive Slider with variant="dotted".
Round dots land on multiples of `max/4`: BTCUSDT (max 200) → stops at
1/50/100/150/200, SOLUSDT (max 100) → 1/25/50/75/100. Slider min=0
with caller-side clamp keeps the user-facing minimum at 1.
SimpleBetPanel:
- Add `betError?: string` prop rendered under the bet input as a
failure-colored hint. Consumer pairs with `canSubmit={false}` so
UP/DOWN disable while the message is showing — gives a visible reason
("At least 3.83 USDT required") instead of a silent disable when the
bet would floor to a sub-lot-size qty.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… into feat/perps-simple3
411px modal with 24px radius, 1/1/2/1 cardBorder, dual shadow. Header "Order Confirmation" Kanit 16/600. Token row shows pair + ↑ Up / ↓ Down pill (success/failure colored). 4 detail rows (Price / Est. Liquidation price / Position size / Time duration). "Don't show again" inset card (8/16 padding, 16px radius, 1/1/2/1 border, cardSecondary bg) with custom 24×24 checkbox (8px radius, 2px border-bottom, success-green bg + white tick when checked, secondary purple focus ring). Confirm (primary teal) / Cancel (tertiary light) buttons match the Deposit/Withdraw button spec. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… overflow - Replace BTC/USD label + Perp tag with single PairDropdown pill (24px tall, 8px radius, 1/1/2/1 input-secondary borders, input- primary bg, Kanit 14/600/21px text + 20px arrow icon) - Markets popover opens on click: 697px wide, 24px radius, 1/1/2/1 cardBorder, dual shadow. Tabs Favorites (active secondary purple) / All markets. Search field 7/8/9/16 padding, 16px radius, 1/1/2/1 input-secondary border, input-primary bg. Table SYMBOLS / LAST PRICE / 1D CHANGE / 1D VOLUME (USDT) with 3 mock rows (BTC / CAKE / ETH) + favorited star - Responsive metrics: each Stat flex-shrink: 0 to keep 24px gap constant; ticker info Left flex-shrink: 0 so it never collapses; Card's space-between makes the gap between info and metrics shrink first. ResizeObserver-driven chevron `>` appears at the right edge of StatsWrap when metrics overflow Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Deposit/Withdraw buttons: padding 11px 12px 13px 12px, flex 1 0 0 align-self: stretch, 16px radius, 2px asymmetric border-bottom (0.20 for primary teal / 0.10 for secondary), background switches V1-Global-Primary vs V1-Main-Tertiary (#EFF4F5), Kanit 16/600 - Unrealized PnL card: padding 16, 24px radius, 1/1/2/1 cardBorder, cardSecondary (#FAF9FA) bg. Label H4 (Kanit 20/600/30px text- subtle). Value H2 Mobile (Kanit 32/600/120% text-primary right- aligned) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add card chrome to the SimpleBetPanel Root: 24px radius, 1/1/2/1 cardBorder, overflow: hidden, card-primary bg. The inner StyledCardInner has its border-radius forced to 0 to prevent nested rounded corners. Move padding from the inner div onto TopCard and Bottom (24px each) so the Bottom's border-top divider goes edge-to-edge across the panel. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Tabs: padding 8/16, gap 4, align-self stretch. Active tab uses secondary purple Kanit 16/600 with 12/12/12/16 padding + 16px radius pill. Inactive tabs use text-subtle Kanit 16/400 with uniform 12px padding (no underline) - Column headers (Th): secondary purple Kanit 12/600 uppercase 0.24px tracking (Pretitle) - Value cells (Td): text-primary Kanit 16/400 right-aligned (Body) - PnL cell: Kanit 20/600/-0.2px (H4). Positive uses --pcs-colors- positive60 (#129E7D) instead of generic theme.colors.success for the dimmer shade Figma calls for Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ton refinements - ZonePill: spec'd borders/bg per zone (#129E7D safe, #FFB237 warn, #ED4B9E danger), emoji slot (🌿/⚡️/🔥), 2-line clamp, and hover/focus tooltip with copy per zone - UP/DOWN buttons: 24px radius, 2/2/4/2 dark border, 24px Kanit text, 24×24 arrow SVGs; always wrapped in UpDownCard with stats list rendered only when bet is filled - Bet field: focus ring (#7645D9 + purple-20 halo) via :focus-within; whole field is clickable (rendered as <label>) so empty space focuses the input - Leverage: removed colored zone fill so the bubblegum gradient stays visible end-to-end (light keeps gradient, dark falls back to backgroundBubblegum); custom-input suffix switched to % - Ticker % pill: spec'd flex/padding/gap, #EAFBF7 / #FFF0F9 backgrounds, new triangle SVG paths in #129E7D / #ED4B9E - Positions table close button: 32×32, 8px radius, 1/1/2/1 #ED4B9E border, #FFF0F9 fill Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The "Perpetual / 1h / 30m / 15m / 5m" row was a static prototype placeholder. Aster's regular perp REST API (POST /fapi/v3/order) has no duration / auto-settle field — fixed-duration bets only exist on the separate on-chain `predictAndBet` contract powering the `/trade/1001x/...` prediction product, which is a different integration entirely. Drop the dead UI; restore here only if/when we wire the prediction product. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
These row interfaces have been declared on PositionsPanel since the trade/tx history tabs were introduced, but they were missing from the barrel export — consumers couldn't type their adapter mappers against them. Surface them alongside OrderHistoryRow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Order History / Trade History / Transaction History tables previously grew to fit every row. With ~100 entries on a busy account the panel pushed the rest of the page off-screen. Add a shared `historyTableScroll` mixin (max-height 360px, overflow-y: auto) on the three history tables and make `Th` cells position: sticky so the header row stays anchored while rows scroll. Sticky is a no-op when the parent doesn't scroll, so this is safe on the Positions / Open Orders tables which don't use the mixin today. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…olHeader Add `marketsOpen` + `onMarketsOpenChange` props so the consumer can lift the dropdown's open lifecycle into a shared atom — needed when another markets trigger lives elsewhere on the page (e.g. the Simple ticker chevron, the bet panel asset chip) and would otherwise pop a second dropdown alongside this one. When `marketsOpen` is omitted the widget falls back to its own useState, so existing call sites keep working unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Radix-Popover-backed tooltip hook with the same return shape as @pancakeswap/uikit's useTooltip — call sites are portable across this repo and pancake-frontend. Replaces the ad-hoc CSS-hover ZoneTipBubble in SimpleBetPanel and documents the canonical pattern plus the Anchor-must-be-sibling gotcha under "Tooltips" in AGENTS.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous commit added the dep to package.json but the lockfile update from `pnpm install` was lost during a stash dance — CI's `--frozen-lockfile` would fail without this. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
WithdrawModal — Amount step - Header row above the field with Withdrawable label on the left and 25/50/75/MAX text-only shortcuts on the right (primary teal, separated by 1 px card-border dividers). 8 px gap between the header and the field. - AmountField restyled to match Figma 36:5698 — 80 px tall, 24 px radius, input-primary bg + input-secondary border + inset top shadow + secondary focus ring. Token chip on the left (40 px badge + bold display name), 24 px SemiBold amount input on the right with "0.0" placeholder in textSubtle. - Back link replaced with a minimal BackLink — small ArrowBackIcon + "Back" text in primary teal, no Button chrome. PositionsPanel - Symbol cell now renders the position's leverage as a small chip next to the symbol (purple text on tertiary fill, mirrors the old SymbolHeader LevPill). Removed - src/pages/MobilePerpsPage.stories.tsx — the responsive PerpsPage now covers the mobile view, the standalone story is redundant. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
13 stories covering every step (select, amount, checking, success, failed) and every submit-button phase (switching-chain, approving, depositing) plus a click-driven Interactive variant. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… into feat/perps-pro
… into feat/wallet-new
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan