feat: Implement market detail page and betting flow#812
Merged
GoSTEAN merged 5 commits intoMay 28, 2026
Conversation
- Mutation hook for signing and broadcasting place_bet transactions
- State machine: idle → signing → broadcasting → confirming → success | error
- Exposes { placeBet, txStatus, txHash, error, reset }
- Integrates with Freighter wallet via submitBet()
- Updates app store on transaction status changes
- Three outcome buttons: Fighter A / Draw / Fighter B - Amount input with min validation (1 XLM minimum) - Real-time projected payout calculation - Connect Wallet prompt when not connected - Disabled state with reason when market is Locked/Resolved/Cancelled - Integrates with usePlaceBet() mutation hook - Shows TransactionStatus component during/after submission
- FighterCard: displays fighter name, odds, and pool size - OddsDisplay: shows live odds for all three outcomes - PoolBar: visual representation of pool proportions - BetList: displays recent bets in table format
- Shows two FighterCard components side by side - Shows OddsDisplay with live odds for all outcomes - Shows PoolBar with pool proportions visualization - Shows CountdownTimer to fight start - Shows BetForm when market is Open - Shows BetList at the bottom with recent bets - Polls for updates every 10 seconds via useMarket hook - Displays oracle info after market resolution
- Remove babel.config.js to let Next.js handle TypeScript compilation - Add 'use client' directive to ErrorBoundary class component - Add @stellar/stellar-sdk to dependencies for wallet integration
GoSTEAN
added a commit
that referenced
this pull request
May 28, 2026
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
2 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.
Overview
This PR implements the complete market detail page and betting flow for BOXMEOUT, addressing issues #768, #769, #770, and #771.
Changes
1. usePlaceBet() Hook (#771)
2. BetForm Component (#770)
3. Market Detail Page Supporting Components (#769)
4. Market Detail Page (#769)
Acceptance Criteria Met
✅ All 4 issues addressed with separate commits
✅ usePlaceBet() builds transaction XDR, signs with Freighter, submits transaction
✅ State machine properly implemented
✅ BetForm has all required features and validations
✅ Market Detail page shows all required components
✅ Polling for updates every 10 seconds
✅ Frontend builds successfully with no errors
Testing
npm run buildcompletes successfullyFiles Changed
frontend/src/hooks/usePlaceBet.ts- New mutation hookfrontend/src/components/bet/BetForm.tsx- New bet form componentfrontend/src/components/market/FighterCard.tsx- New fighter card componentfrontend/src/components/market/OddsDisplay.tsx- New odds display componentfrontend/src/components/market/PoolBar.tsx- New pool visualization componentfrontend/src/components/bet/BetList.tsx- New bet list componentfrontend/src/app/markets/[market_id]/MarketDetailContent.tsx- Updated market detail pagefrontend/src/components/ui/ErrorBoundary.tsx- Added 'use client' directiveRelated Issues
Closes #768
Closes #769
Closes #770
Closes #771