Prediction Markets on Sonic Blockchain
Sonic Markets
Sonic Markets is a decentralized prediction markets platform similar to Polymarket, built on the Sonic blockchain. Users create, trade, and resolve markets on real-world outcomes such as politics, economics, sports, and crypto events. The design challenge was to make complex financial mechanics feel fast, legible, and trustworthy, while also building a scalable component system that engineers could extend without design debt.
Prediction markets combine multiple sources of complexity:
- -Binary and multi-outcome markets
- -Real-time pricing and liquidity
- -Financial risk and payouts
- -Trust, resolution rules, and edge cases
- -Regulatory and UX sensitivity around 'betting'
From a product perspective, the core problems were:
Users must understand odds, outcomes, and risk within seconds
Markets, outcomes, cards, and trading modules repeat across the product and must stay consistent
Components had to map cleanly from Figma to React and remain maintainable as the platform evolves
Markets Home
Category-based navigation with featured market cards. Each card displays the market question, multiple outcomes with probability percentages, and quick Yes/No trading buttons for immediate action.
- - All Markets
- - Politics
- - Economics
- - Technology
- - Sports
- - Entertainment
- - Art
- - Music
- - Celebrity
- - Category highlight with image
- - Market question preview
- - Go to Category / Markets CTA
- - Multiple outcomes with %
- - Yes/No quick trade buttons
- - Total bet volume
- - Comment count indicator
Market Detail Page
Full market view with trading panel, outcome list, rules, comments, and suggested markets. The right sidebar contains the complete trading flow: outcome selection, amount input, share calculation, and payout preview.
Market Content
- -Market Prompt with definition and event date
- -Outcome list with probabilities (50%)
- -Buy Yes / Buy No buttons per outcome
- -Rules section with resolution criteria
- -Comment section with Top Holders and Activities tabs
Trading Panel
Figma to Code Mapping
Every component in Figma maps 1:1 to a coded component. This ensures no hand-off ambiguity and allows engineers to extend safely.
OutcomeButton Component
Figma Properties:
- - Variant: Yes / No
- - State: Default / Hover / Disabled
- - Emphasis: Primary / Secondary
- - Price: Percent / Cents
This ensured:
- - No 'visual-only' components
- - No hand-off ambiguity
- - Engineers could extend safely
Design System Documentation
Component Documentation
Each component is documented with:
- - Purpose
- - When to use / not use
- - Responsive behavior
- - Accessibility notes
- - Edge cases
Storybook Integration
All production components are mirrored in Storybook for:
- - Visual regression testing
- - QA access states and variants
- - Design review without Figma access
- - Onboarding new engineers
Layouts were designed mobile-first with clear breakpoint rules:
- - Market cards collapse outcomes on small screens
- - Buy/Sell module becomes a sticky bottom sheet on mobile
- - Probability indicators simplify under space constraints
Points & Leaderboard System
Dark-themed mobile experience for earning points and gems through platform participation. Top users leaderboard with wallet addresses and point balances creates competitive engagement.
- -Some advanced trading features were intentionally deferred to avoid overwhelming new users
- -Real-time updates required careful performance budgeting
- -Regulatory copy and disclaimers constrained visual hierarchy in some areas
These constraints informed the system rather than fighting it.
- +Faster time-to-trade for first-time users
- +Reduced design debt through component reuse
- +Clearer collaboration between design and engineering
- +System flexible enough to support new market types without redesign