1exch.com Bet Panel UX Analysis
Design specification reference for Hannibal Bet Panel redesign. Based on domain expertise from Betfair/Pinnacle/1exch exchange UIs + reference screenshots.
1. Overall Page Layout: 3-Column Architecture
1.1 Column Breakdown
+------------------+----------------------------------+--------------------+
| Left Sidebar | Center Content | Right Bet Panel |
| ~200px fixed | flex-1 (remaining space) | ~320px fixed |
| | | |
| - Sport nav | - Match cards / fixture list | - Bet Slip |
| - Competitions | - Market grids | - Open Bets |
| - Quick links | - Live scorecard | - Settings |
| - In-Play | - Match detail | |
+------------------+----------------------------------+--------------------+
Key dimensions (desktop, 1920px viewport):
- Left sidebar: ~200-220px, fixed/sticky, scrolls independently
- Center content: fluid, fills remaining space (~1380px at 1920px)
- Right bet panel: ~300-340px, always visible, never collapses on desktop
Proportions at common breakpoints:
- 1920px: ~11% / ~71% / ~18%
- 1440px: ~14% / ~64% / ~22%
- 1280px: ~16% / ~59% / ~25%
- Below 1024px: Collapses to single column with bottom sheet bet panel
1.2 Key Difference From Hannibal Today
Current Hannibal: BetSlip is position: fixed z-50 overlay. Content area does NOT adjust when panel is open. Panel hides completely when empty.
1exch pattern: Bet panel is ALWAYS part of the layout grid. Content area shrinks. Both scroll independently. Panel never disappears — empty state shows "Click on the odds to add a selection."
2. Right Bet Panel: Detailed Structure
2.1 Panel Header Tabs
+------------------------------------+
| [ BETSLIP ] [ OPEN BETS ] |
+------------------------------------+
- Active tab: bottom border accent
- Full-width, equally spaced
2.2 BETSLIP Tab — Empty State
Panel remains at full height. Clean centered text: "Your bet list is empty! Add bets and start winning with every match." No distracting illustrations needed — just clear messaging.
2.3 BETSLIP Tab — With Selections
Header row: Your Bets: {count} with settings gear (⚙) and delete all (🗑) icons.
2.4 Bet Card Anatomy
+------------------------------------+
| [LIVE 🟢] Match Name X | ← Close button
| |
| Market Name (exchange) - Back/Lay |
| [Logo] Selection Name [-] 5.6 [+] | ← Odds with +/- buttons
| |
| Your Bet Min: 100 Max: 225,200 | ← Betfair limits
| Max. Mkt: 500,000+ |
| |
| ┌──────────────────┐ Liability: 2.00|
| │ Enter stake │ |
| └──────────────────┘ |
| [+500] [+2500] [+5000] [+12500] | ← Quick stake ADD buttons
| [ Max ] |
+------------------------------------+
Data per card:
- Bet type badge + Selection name + Close (X)
- Market type — "Match Odds (exchange) - Lay"
- Match context — "Home vs Away - Tournament"
- Odds display — static value (e.g., 1.78), NO +/- buttons (verified via Playwright 2026-02-12). Hannibal should ADD odds +/- as a differentiator.
- Min/Max/MaxMkt — from exchange, varies per market. Low-liquidity markets omit Max.Mkt.
- Quick stake buttons — ADD to current stake (not replace!). Labels: "+500", "+2500", "+5000", "+12500"
- Per-bet calculations — Potential win (Back) or Liability (Lay), inline right of stake input
Color coding:
- Back: Light blue border-left, blue badge
- Lay: Light pink border-left, pink badge
2.5 Panel Footer (Sticky Bottom)
+------------------------------------+
| Total Payout: 478 | ← Green
| Potential Risk: 35.00 |
+------------------------------------+
| [ Place Bet 35.00 ⏱ 5s ] | ← Green button
| [ Potential Payout 478 ] |
+------------------------------------+
Footer is always visible. Shows aggregated totals across all bets.
2.6 ONE CLICK Betting Toggle (Verified 2026-02-12)
Top of panel, above tabs. Three states:
OFF: [⚡ OFF] ONE CLICK Betting [ⓘ]
- Default. Odds click adds to slip, user enters stake, clicks Place Bet.
ON: [⚡ ON] [110] [550] [1100] [✏️]
- 3 pre-set stake buttons (user-configurable). Active one highlighted green.
- Clicking any odds cell immediately places bet at selected stake. No confirmation.
- Edit icon (✏️) enters inline editing mode with 3 input fields + checkmark to save.
Info modal (from ⓘ): 3-step onboarding — Enable → Choose Stake → Place Instantly. "Got it" button.
Power-user feature for live betting where speed matters.
2.7 Delete All Button
Clears all selections. Optional confirmation toast with undo.
3. Odds Step Increments (Tick Sizes)
| Odds Range | Increment |
|---|---|
| 1.01 - 2.00 | 0.01 |
| 2.00 - 3.00 | 0.02 |
| 3.00 - 4.00 | 0.05 |
| 4.00 - 6.00 | 0.10 |
| 6.00 - 10.00 | 0.20 |
| 10.00 - 20.00 | 0.50 |
| 20.00 - 30.00 | 1.00 |
| 30.00 - 50.00 | 2.00 |
| 50.00 - 100.00 | 5.00 |
| 100.00 - 1000.00 | 10.00 |
Odds input SNAPS to valid ticks on blur. Invalid ticks not submittable.
4. Open Bets Tab
4.1 Sub-tabs
[Matched] [Unmatched] [Voided] [Cashed Out]
- Matched: Fully matched, confirmed active bets
- Unmatched: Limit orders not yet matched. Can be cancelled.
- Voided: Voided by exchange/operator
- Cashed Out: Early cash-out (future feature)
4.2 Settings Panel (Collapsible)
⚙ Settings ▼
─────────────────────────────────────
GENERAL
□ Show bet info
BETS
□ Consolidate
□ Average Odds
☑ Order By Date
4.3 Empty States
Per sub-tab: loading spinner → "You have no {Matched} Bets" with illustration
5. Interaction Patterns
5.1 Adding a Bet
- Click odds cell → if NOT duplicate: add card, scroll to it, focus stake input
- If duplicate: flash/highlight existing card (not silent ignore)
5.2 Removing a Bet
- Individual: Click X, removed immediately (no confirmation needed)
- Delete All: Click 🗑, optional confirmation toast with undo
5.3 Editing Odds
[-]/[+]step through valid ticks- Click odds value for direct edit, snaps to nearest tick on blur
- Recalculates payout/risk in real-time
5.4 Entering Stake
- Type directly or use quick stake buttons (ADD behavior)
[Max]sets to maximum allowed- Recalculates in real-time
5.5 Scrolling
- Panel scrolls independently from center content
- Header (tabs) and footer (totals + Place Bet) are sticky
- Only bet cards area scrolls
6. Visual Design Patterns
| Element | Color |
|---|---|
| Back bet bg | blue-500/10 or sky-500/5 |
| Back bet badge | blue-400 |
| Lay bet bg | pink-500/10 or rose-500/5 |
| Lay bet badge | pink-400 |
| Odds flash up | Green pulse |
| Odds flash down | Red pulse |
| Panel bg | slate-900 |
| Card bg | slate-800 or white/5 |
| Place Bet button | green-600 |
| Cancel/Delete | red-400 |
| ONE CLICK | yellow-500 |
7. Comparison: 1exch vs Hannibal Today
| Feature | 1exch (verified) | Hannibal (current) | Hannibal (target) |
|---|---|---|---|
| Persistent right column | Yes, always visible | No, overlay | Yes |
| Open Bets in panel | Yes, 4 sub-tabs | No, separate page | Yes |
| ONE CLICK betting | Yes, 3 configurable stakes | No | Yes |
| Odds +/- buttons | No (static display) | No | Yes (differentiator) |
| Quick stake ADD behavior | +500/+2500/+5000/+12500 | Buttons replace | ADD behavior |
| Min/Max/MaxMkt display | Yes, per card | No | Yes |
| Settings in panel | Yes, collapsible | No | Yes |
| Unmatched bet cancel | No (no limit orders) | No | Yes (Betfair only) |
| Duplicate handling | Not tested | Silent prevent | Highlight existing |
| Odds tick snapping | No (no editing) | No validation | Yes (Betfair ticks) |
| Empty state | Panel stays visible | Panel hides | Always visible |
| Placement error feedback | Silent failure on 400 | N/A | Toast notifications |
| Placement confirmation | "Are you sure?" dialog | Confirmation modal | Same |
| 5s countdown timer | Yes, for live bets | No | Yes |
| Settlement real-time | Yes, balance auto-updates | Via WebSocket | Same |
| Commission deduction | ~2% on net winnings | Same model | Same |
What Hannibal Does Better (keep):
- Make Offer flow for empty markets
- 3-level depth ladder in ExchangeGrid
- Haptic feedback patterns
- Lay bet liability display
- Agent-specific endpoint routing
- Margin awareness (trueOdds vs display odds)
8. Key UX Principles
- Bet panel is a workspace, not a popup. Always there, always ready.
- No navigation to manage bets. Open bets visible without leaving current page.
- Speed is king for live. ONE CLICK, quick stake ADD, tick buttons — reduce time to place.
- High information density. Min/max, volume, odds, stake, payout, risk — all at a glance.
- Valid inputs only. Odds snap to valid ticks. Stake respects min/max. UI prevents invalid submissions.
- Context travels with the bet. Each card shows match, tournament, market, selection.