AquaVaults · Layout Options Review visual comparison lab ⚠ Static mockups · no wallet · no API · no swap logic
Swap: Current Compact Trader Jupiter Style Exchange Panel Mobile First Minimal Execution Limit: LO-1 Ticket+Tabs LO-2 Price-Centric LO-3 Single-Column LO-5 Unified Toggle Research-native: Compact Core Unified Ticket Sidecar Rail Terminal Lite Floating Ticket · Matrix Recommendation

Swap & Limit Order — Layout Comparison

Polished, static renderings of the candidate layouts using AquaVaults' existing design language: dark surfaces, indigo borders, rounded cards, community pills, token selectors, fee-routing visibility, settings, the swap/create action, and the activity log. Every concept is a relocation or collapse of existing controls — nothing functional is removed.

Source: the Swap & Limit Order Layout Review plus the Widget Redesign Research. The shared principle across benchmarked DEX/CEX surfaces is to show only what's needed to decide and act now, and stage everything else behind chips, drawers, and adjacent panels.

Concepts rendered
10 + matrix
Biggest height sinks today
Activity log · stacked rows
Est. reduction to CTA
32–55% per research
Architecture
Vanilla HTML/CSS/JS
0 Current Swap Layout Baseline
Difficulty Reductionbaseline

Today's stack, recreated. Community + always-loading vault pill precede the form; From/To/Amount are stacked; Check Settings sits co-equal with Swap; the full Activity Log lives below the action and dominates height.

Desktop
Swap
Auto Swap
Select a community to enable swaps
▼ ⓘ
🔒 SOL Vault (AquaVaults)
Loading…
⚙️ Swap Settings1.00% • 1.00% • Auto
From
SOL
To
USDC
Amount
0.00MAX
Balance: —
Estimated output: —
📋 Check SettingsSwap
🖥️ Activity LogInitializing…
🗑️ Clear💾 Export
[System] Initializing vault activity logging
Total
1
Errors
0
Warnings
0
Success
0
Mobile
Swap
Auto
Select a community…
🔒 SOL Vault
Loading…
⚙️ Settings1% • 1% ▾
From
SOL
To
USDC
Amount
0.00MAX
Balance: —
📋Swap
🖥️ Activity LogInit…
[System] Initializing…
1 Compact Trader Swap
DifficultyLow Reduction~30–35%

Same mental model, denser. From/To pair inline, balance + estimate merged to one line, Check Settings demoted to an inline icon, vault address collapsed into a "fees → 🔒" chip, and the Activity Log docked to a collapsed chip. Lowest-risk win.

Desktop
Swap
Auto Swap
OnlyMemes
fees → 🔒
From
SOL
To
USDC
Amount
1.50MAX
⚙️ Settings1.00% • 1.00% • Auto
Balance 12.44 SOL · ≈ 183.20 USDC out
Swapⓘ Settings
▸ 🖥️ Activity Log Idle · 1 event
Mobile
Swap
Auto
OnlyMemes
fees → 🔒 vault
From
SOL
To
USDC
1.50MAX
⚙️1% • 1% • Auto ▾
Bal 12.44 · ≈ 183.20
Swap
▸ 🖥️ Activity 1

Pros

  • Minimal logic change; reuses every existing element/class.
  • Biggest height saving for least effort.
  • Repeat traders see the form immediately.

Cons

  • Still fundamentally the same card — not a visual leap.
  • Inline From/To row needs care at very narrow widths.
2 Jupiter Style Swap
DifficultyMedium Reduction~25–30%

Familiar aggregator pattern: two large stacked token cards (pay / receive) with token, amount, and balance co-located, the flip button on the seam, and the estimate living in the receive card. Strong mobile ergonomics.

Desktop
Swap
Auto Swap
OnlyMemes
🔒⚙️ ▾
You payBalance 12.44 · MAX
1.50SOL
You receive (est.)
183.20USDC
Rate 1 SOL ≈ 122.13 USDC · fee 1.00% · slip 1%
Swap
▸ 🖥️ Activity Log Idle
Mobile
Swap
Auto
OnlyMemes
🔒⚙️
You payBal · MAX
1.50SOL ▼
You receive
183.20USDC ▼
1 SOL ≈ 122.13 · 1% · 1%
Swap
▸ 🖥️ Activity

Pros

  • Instantly legible to crypto users; amount/token/balance co-located.
  • Receive card naturally hosts the Jupiter estimate.
  • Excellent big tap targets on mobile.

Cons

  • Token selector moves from full-width select into a pill — more restyle.
  • Token picker becomes the primary selection path.
  • Vault detail must move into the 🔒 affordance.
3 Exchange Panel Swap
DifficultyMedium Reduction~40% desktop

Ticket on the left, live context on the right (fee routing, balance, estimate, rate, activity) — reusing the limit-order two-column grid. The Activity Log finally has a home that doesn't push the button down. Collapses to a single column on mobile.

Desktop
Swap
Auto Swap
● OnlyMemes ▼   ⚙️▾
TICKET
SOLFrom ▼
USDCTo ▼
1.50MAX
Swap
Context
Fees →🔒 OnlyMemes vault
Balance12.44 SOL
Est. output≈ 183.20 USDC
Rate1 SOL ≈ 122.13
Fee · Slip · Pri1% · 1% · Auto
🖥️ Activity Idle · 1
Mobile
Swap
Auto
OnlyMemes
▼ ⚙️
SOLFrom ▼
USDCTo ▼
1.50MAX
Fees→🔒 · Bal 12.44
183.20 out · 1%·1%·Auto
Swap
▸ 🖥️ Activity 1

Pros

  • Reuses the limit-order two-column grid — consistent across the product.
  • Quote breakdown always visible; activity has a real home.

Cons

  • Underuses space on narrow desktops.
  • Loses the single-card identity of the swapper.
4 Mobile First Swap
DifficultyMedium–High Reduction~45% mobile

Phone as the primary target; desktop is the centered version of it. Token picker is the default selection path, and Settings + Activity become bottom-sheet triggers — removing the two tallest blocks from the scroll.

Desktop (centered ~460px)
Swap
Auto Swap
OnlyMemes
PayBal 12.44 · MAX
1.50SOL ▼
Get≈ 183.20
183.20USDC ▼
fees → 🔒 · 1% · Auto   ⚙️
Swap
⚙️ Settings sheet🖥️ Activity sheet
Mobile
Swap
Auto
OnlyMemes
PayBal · MAX
1.50SOL ▼
Get≈ 183.20
183.20USDC ▼
fees → 🔒 · 1% · Auto  ⚙️
Swap ⚙️ Settings 🖥️ Activity

Pros

  • Best-in-class phone experience; two big blocks become sheet triggers.
  • Token picker modal already exists — low friction to promote.

Cons

  • Bottom sheets are new UI scaffolding to build/style.
  • Desktop feels slightly under-dense for power users.
  • Native select must remain as accessible fallback.
5 Minimal Execution Swap
DifficultyLow–Medium Reduction~50%

Strip the first view to community, pair, amount, button. Everything else (settings, vault address, balance, activity) goes behind progressive disclosure. Calmest surface — ideal for share-link landings and first-time users.

Desktop
Swap
Auto Swap
OnlyMemes
SOL
USDC
1.50MAX
183.20 USDC⚙️   ⓘ
Swap
▸ 🖥️
Mobile
Swap
Auto
OnlyMemes
SOL
USDC
1.50MAX
183.20⚙️ ⓘ
Swap
▸ 🖥️

Pros

  • Lowest cognitive load; great for share-link conversion.
  • Shortest scroll; fee transparency preserved behind ⓘ.

Cons

  • Fee routing — a core value — is demoted to an icon.
  • Power users feel under-served; balance hidden until interaction.
L1 LO-1 · Ticket + Tabs Limit
DifficultyLow Reduction~30% desk · ~50% mobile

Keep the two-column grid but tighten the ticket: inline You-Sell, fold the Order Preview into a one-line expandable summary, Advanced stays collapsed. On mobile, page-level Create/Orders tabs fix the "scroll past the whole form to see my orders" problem.

Desktop
📋 Create Limit Order
You Sell
SOL
1.50MAX
You Buy
USDC
Market Price122.13 USDC/SOL
Limit Price
125.00USDC / SOL
⚙️ Advanced (expiry · fee)
Create Limit Order
📜 Your Orders
ActiveHistory
📭
No active orders
Create your first limit order to get started
Mobile (page tabs)
CreateOrders
You Sell
SOL
1.50MAX
You Buy
USDC
Mkt122.13
125.00USDC/SOL
⚙️ Advanced
Create Order

Pros

  • Small change; page tabs directly fix mobile burial of orders.
  • Preview collapses; faster entry.

Cons

  • Preview-as-summary needs an expand affordance.
  • Two tab systems (page + Active/History) could confuse.
L2 LO-2 · Price-Centric Entry Limit
DifficultyMedium Reduction~25%

Make the limit price the hero. Big price field with live market beside it and quick-set chips (−5% / Market / +5% / +10%) — since choosing a price relative to market is the actual job. Leans on the existing live price ticker.

Desktop
📋 Create Limit Order
SOLSell ▼
USDCBuy ▼
1.50MAX
Market122.13 USDC/SOL
Limit Price
128.24USDC / SOL
−5%Market+5%+10%
⚙️ Advanced
Create Order
Mobile
SOL
USDC
1.50MAX
Mkt122.13
128.24USDC/SOL
−5%Mkt+5%+10%
Create Order

Pros

  • Matches the real decision (price vs market).
  • Quick-set chips speed entry and reduce typos.

Cons

  • Chips are new controls to wire to the price input.
  • Relative-offset math must respect existing fee/preview logic.
L3 LO-3 · Single-Column Flow Limit
DifficultyMedium Reduction~50% mobile

One column everywhere; Create and Orders become a top-level toggle so the orders list is never buried. Reuses the existing single-column breakpoint; desktop centers the same column (orders as a side drawer on wide screens).

Desktop (centered + Orders drawer)
CreateOrders ▸
You Sell
SOL
1.50MAX
You Buy
USDC
Market122.13 USDC/SOL
125.00USDC / SOL
⚙️ Advanced
Create Order
Mobile (toggle → Orders)
CreateOrders
ActiveHistory
SOL → USDC
1.50 @ 125.00
+2.1%
wPOND → SOL
500 @ 0.0021
−0.4%

Pros

  • Cleanest mobile; orders are one tap, not a scroll.
  • Reuses the existing 1040px single-column breakpoint.

Cons

  • Desktop drawer is new.
  • Loses at-a-glance "form + orders side by side" on desktop.
L5 LO-5 · Unified Swap / Limit Toggle Limit
DifficultyHigh Reduction~35% + consistency

Treat "swap now" and "swap at a price" as one intent. Limit joins the mode tabs; a Market/Limit toggle reveals trigger price + expiry, and the orders list appears below only in Limit mode. Limit inherits every swap-card improvement automatically.

Desktop
Swap
Auto
Limit
MarketLimit
OnlyMemes
▼ ⚙️
From
SOL
To
USDC
1.50MAX
Limit Price
125.00USDC/SOL
−5%Market+5%
▸ Preview · expiry 24h · fee 1.0%
Create Order
📜 Your Orders
ActiveHistory
SOL → USDC
1.50 @ 125.00
+2.1%
Mobile
Swap
Auto
Limit
OnlyMemes
From
SOL
To
USDC
1.50MAX
125.00USDC/SOL
−5%Mkt+5%
▸ Preview · 24h · 1.0%
Create Order
▸ Your Orders (Active)

Pros

  • One mental model across the whole product.
  • Limit inherits every swap-card improvement; discoverability rises.

Cons

  • Largest architectural change — limit page converges with swap card.
  • Trigger-specific fields (expiry, ≥1% fee) must coexist without confusing either flow.

Research-Native Widget Concepts

From the Widget Redesign Research

The five concepts defined directly in the Widget Redesign Research document, rendered in the same AquaVaults language. These differ from the ten above mainly in where context lives and what stays visible by default. Height figures are the research doc's ticket estimates against a current trade-critical stack of roughly 680–760 px to the CTA.

R1 Compact Core Research
DifficultyLow Reduction~40–45% · 380–440px

A fast instrument panel: thin utility bar (community · chain · share · wallet), mode tabs, From/To rows with amount inline, then a summary chip-bar for slippage / priority / platform-fee, the CTA, and a "View log" link. Everything nonessential collapses into chips. Lowest implementation risk, biggest immediate space saving.

Desktop
OnlyMemes ▾SolanaEVM⤴ Share⏿ Wallet
Swap
Limit
FromBalance: 12.44
SOL
1.50MAX
ToEst: 183.20
USDC
183.20
0.50% slippageAuto priority1.0% fee → 🔒
SwapView log
Mobile
OnlyMemes ▾
SolEVM⤴ Share
Swap
Limit
From · Bal 12.44
SOL
1.50MAX
To · Est 183.20
USDC
0.5%Auto1.0% 🔒
Swap

Pros

  • Lowest implementation risk; biggest immediate space savings.
  • Easy to mirror across Solana and EVM with minimal change.

Cons

  • Still card-centric.
  • If AquaVaults later wants richer market context, it can feel visually isolated.
R2 Unified Ticket Research · doc's pick
DifficultyMedium Reduction~32–42% · 420–500px

One shell for both swap and limit. Pair and amount stay in place; switching to Limit reveals trigger price + quick-price presets + expiry + a persistent custody/no-routing disclosure strip near the CTA. Reduces page-switching and makes deep links (mode=swap|limit) trivial. The research document's recommended direction.

Desktop (Limit mode shown)
OnlyMemes ▾SolanaEVM⤴ Share⏿ Wallet
Swap
Limit Order
Sell
SOL
1.50MAX
Buy
USDC
187.50
125.00trigger
Mkt+1+5
Expiry · 7 days
⚠ No community routing on limit orders · funds leave wallet until fill / cancel · learn why
0.50% slipAuto priority1.0% feeroute ⋯
Place OrderOpen orders ▸
Mobile
OnlyMemes ▾
Swap
Limit
Sell
SOL
1.50MAX
Buy
USDC
125.00trigger
Mkt+1+5
Expiry · 7 days
⚠ No community routing · funds leave wallet until fill/cancel ▸
0.5%Auto1.0%
Place Order

Pros

  • Best balance of compactness, clarity, and feature retention.
  • Reduces page-switching between swap and limit.
  • One shell can interpret mode=swap|limit deep links.

Cons

  • More state work than a pure visual cleanup.
  • Limit disclosure logic must be visible without overwhelming the swap state.
R3 Sidecar Rail Research
DifficultyMedium Reduction~30–40% · ticket 420–500px + rail

Pull AquaVaults' platform mechanics out of the ticket into a narrow context rail: community, chain family, wallet, share/deep-links, orders, activity, help. The ticket becomes almost purely execution. On mobile the rail compresses into a chip strip above the ticket.

Desktop
Context
OnlyMemes ▾
⛓ Solana / EVM
⏿ Wallet · ready
⤴ Share link
📜 Orders
🖥️ Activity
❔ Help
Swap
Limit
SOLSell ▼
1.50MAX
USDCBuy ▼
183.20
0.50% slipAuto priority1.0% fee → 🔒
Swap
Mobile (rail → chip strip)
OnlyMemes ▾⛓ Sol/EVM
⤴ Share📜 Orders🖥️ Activity
Swap
Limit
SOL
1.50MAX
USDCBuy ▼
183.20 USDC
0.5%Auto1.0% 🔒
Swap

Pros

  • Best way to preserve community-routing identity without bloating the ticket.
  • Natural home for deep links and activity.

Cons

  • Slightly more layout work on desktop.
  • On mobile the rail must become a chip strip / accordion or it stops being compact.
R4 Terminal Lite Research
DifficultyHigh Reduction~35–45% ticket · wider page

Treat the ticket as one widget in a trader page. Route detail, open orders, token info, and chart/context move into sibling panels — not into the ticket. Best desktop solution for active traders; mobile collapses to a single ticket with off-canvas panels.

Desktop (three panels)
Community / route
OnlyMemes
fee → 🔒 vault · route via Jupiter
Activity / logs
[System] init…
Total 1 · Err 0 · OK 0
Chart / market — SOL/USDC
1 SOL ≈ 122.13 USDC
Open orders
SOL → USDC
1.50 @ 125.00
+2.1%
Swap
Limit
SOLSell ▼
1.50MAX
USDCBuy ▼
0.5%Auto1.0% 🔒
Execute
Mobile (ticket + off-canvas)
Swap
Limit
OnlyMemes
SOLSell ▼
1.50MAX
USDCBuy ▼
0.5%Auto1.0% 🔒
Execute
Route ▸Orders ▸Activity ▸

Pros

  • Best desktop solution for serious traders.
  • Keep or expand route, market, and history without a tall ticket.

Cons

  • Higher development effort; larger conceptual shift.
  • Mobile needs a disciplined collapse strategy.
R5 Floating Action Ticket Research
DifficultyMedium–High Reduction~50–55% · visible 320–380px

A very small visible trade header at all times; deeper editing happens in an expandable drawer / bottom sheet. The most aggressive vertical-space play — strongest on mobile, where the sticky summary persists and the full ticket lives in a sheet.

Desktop (collapsed bar + drawer)
OnlyMemes ▾Mode ▾⏿ Wallet
SOL → USDC1.50
≈ 183.20 USDCSwap
0.5%Auto1.0% 🔒⤴ shareexpand ▾
Expanded drawer
SOLSell ▼
USDCBuy ▼
Trigger / expiry (if limit) · route · custody notice
🖥️ Open orders · Activity
Mobile (sticky bar + bottom sheet)
SOL → USDC
1.50
Swapexpand ▴
Bottom sheet
OnlyMemes ▾
Swap
Limit
SOLSell ▼
USDCBuy ▼
0.5%Auto1.0% 🔒
🖥️ Orders · Activity

Pros

  • Maximum visible-page cleanup; very strong on small screens.
  • Keeps trading access persistent alongside broader context.

Cons

  • More interaction complexity.
  • Requires careful focus trapping and keyboard handling so the drawer/sheet stays accessible.

Recommendation Matrix

Relative within this review · ★ weak → ★★★★★ strong. For "Impl. Cost", more ★ = cheaper / easier.

Swap concepts
ConceptMobileDesktopImpl. (cheap=★★★★★)Trading SpeedVisual Clarity
1 · Compact Trader★★★★★★★★★★★★★★★★★★★★★
2 · Jupiter Style★★★★★★★★★★★★★★★★★★★★★★★
3 · Exchange Panel★★★★★★★★★★★★★★★★★★★★★★★
4 · Mobile First★★★★★★★★★★★★★★★★★★★★★★★
5 · Minimal Execution★★★★★★★★★★★★★★★★★★★★★★★
Limit-order concepts
ConceptMobileDesktopImpl. (cheap=★★★★★)Entry SpeedOrder Mgmt
LO-1 · Ticket + Tabs★★★★★★★★★★★★★★★★★★★★★★★
LO-2 · Price-Centric★★★★★★★★★★★★★★★★★★★★★★
LO-3 · Single-Column★★★★★★★★★★★★★★★★★★★★★★
LO-5 · Unified Toggle★★★★★★★★★★★★★★★★★★★★★
Research-native concepts
ConceptMobileDesktopImpl. (cheap=★★★★★)CompactnessIdentity Fit
R1 · Compact Core★★★★★★★★★★★★★★★★★★★★★★★
R2 · Unified Ticket★★★★★★★★★★★★★★★★★★★★★★
R3 · Sidecar Rail★★★★★★★★★★★★★★★★★★★★★★★
R4 · Terminal Lite★★★★★★★★★★★★★★★★★★★★★★★★
R5 · Floating Action Ticket★★★★★★★★★★★★★★★★★★★★★★★★★

Recommended Direction

Base → Compact Trader Evolve → Jupiter Style Limit → LO-1 Ticket + Tabs

Compact Trader is the safe, high-yield first move — it touches only spacing and disclosure, keeps the single-card identity, and recovers the most height (Activity Log → chip, merged outcome line, demoted Check Settings, vault address behind a "fees → 🔒" tap). Jupiter Style is the natural evolution once compaction is proven, promoting the existing token picker modal as the primary selection path. LO-1 brings the same compaction to limit orders and fixes mobile order-burial with page-level Create/Orders tabs.

Stays visible: mode tabs · community pill · From/To + flip · amount + MAX · estimate + fee-routing summary · primary button · short status.   Collapses/relocates: Activity Log (chip) · full vault address (tap) · Swap Settings (collapsed, as today) · Order Preview (one-line) · Check Settings (inline). Nothing is removed — every control still renders and works.

Original review vs. research-native concepts

The two sets agree on the core principle — compress and stage, don't remove — and they converge on the same answer from two directions.

Compact Trader ≈ Compact Core. These are the same low-risk first move: collapse settings to chips, dock the log, merge the outcome line. Compact Core formalizes the chip-bar and adds the utility bar (chain toggle, share, wallet) the original folded into the community row. Pick whichever framing the team prefers — they ship as one phase.

The research doc's pick (Unified Ticket / R2) is the structural cousin of LO-5 — one shell for swap + limit with a mode-revealed extension. The original review rated this High difficulty and recommended LO-1 as the cheaper limit move first; the research review recommends going straight to the unified ticket. Both are right about the destination; they differ on sequencing. Reconciled path: ship Compact Core/Trader + LO-1 now (independently deployable), then converge on the Unified Ticket as the medium-term target once compaction is proven.

Sidecar Rail (R3) is the strongest answer to AquaVaults' specific identity problem — it keeps community routing, deep links, and activity first-class without taxing ticket height — and is the best desktop complement to a compact ticket. Terminal Lite (R4) is the same idea as Exchange Panel taken further, for active-trader desktop. Floating Action Ticket (R5) overlaps Mobile First's sheet model but is more aggressive; it's the mobile-max option if phone compactness becomes the top priority.

Now → Compact Core / Trader + LO-1 Desktop identity → Sidecar Rail Medium-term → Unified Ticket (R2) Mobile-max (optional) → Floating Ticket

Net: no change to the original "start with Compact, evolve toward a unified shell" recommendation — the research-native set reinforces it and adds the Sidecar Rail as the missing piece for preserving AquaVaults' community-routing identity on desktop.

Static visual review · AquaVaults design tokens mirrored from swapper/swap/swap-card.css · no wallet, no API, no swap logic · open this file in any browser.