Skip to content

Improve Order Pages#170

Merged
droplister merged 7 commits intomainfrom
feature/order-improvements
Jan 30, 2026
Merged

Improve Order Pages#170
droplister merged 7 commits intomainfrom
feature/order-improvements

Conversation

@droplister
Copy link
Member

@droplister droplister commented Jan 30, 2026

Summary

  • Add trading pair utility with base/quote asset determination (ported from PHP logic)
  • Change market orders tabs from Open/Matched to Buy/Sell/Matched for clearer categorization
  • Click market order to pre-fill compose form - clicking a sell order opens buy form with price/amount, vice versa
  • Fix Max button reactivity bug where balance wasn't updating when quote asset changed
  • Clear price/amount fields when changing quote asset to prevent user mistakes
  • Persist pair flip state when navigating Form→Review→Form
  • Improve order settings UI with smaller headings, clickable labels, and help text
  • Fix price calculation for buy vs sell orders (properly calculates quote per base in both directions)
  • Add unit tests for trading-pair utilities (15 tests)

Changes

  • src/utils/trading-pair.ts - New utility for base/quote asset determination
  • src/utils/__tests__/trading-pair.test.ts - Unit tests for trading pair utility
  • src/pages/market/orders/[baseAsset]/[quoteAsset].tsx - Buy/Sell/Matched tabs, click-to-fill
  • src/pages/compose/order/form.tsx - URL params, reactivity fix, UX improvements
  • src/pages/compose/order/index.tsx - Pass URL params to form
  • src/pages/settings/order-settings.tsx - UI polish

Test plan

  • Navigate to market orders page, verify Buy/Sell/Matched tabs work correctly
  • Click a sell order → verify opens buy form with correct price and amount
  • Click a buy order → verify opens sell form with correct price and amount
  • Create a buy order, set price, click Max - verify amount calculates correctly
  • Change quote asset on order form - verify price/amount clear
  • Flip trading pair, go to Review, go back to Form - verify price stays consistent
  • Check order settings cog has pointer cursor on hover
  • Run npx vitest run src/utils/__tests__/trading-pair.test.ts - all 15 tests should pass

- Add trading pair utility with base/quote asset determination logic
- Change market orders tabs from Open/Matched to Buy/Sell/Matched
- Fix Max button not updating when quote asset changes (reactivity bug)
- Clear price/amount when changing quote asset to avoid mistakes
- Persist pair flip state when navigating Form→Review→Form
- Improve order settings UI: smaller headings, clickable labels, help text
- Add cursor-pointer to settings cog button
- Click sell order → opens buy form with matching price/amount
- Click buy order → opens sell form with matching price/amount
- Add URL params support (type, quote, price, amount) to order form
- Fix price calculation for buy vs sell orders (quote per base)
- Add helper functions for order stats that handle both directions
- Fix bug in trading-pair.ts keyword tiebreaker logic
- Add unit tests for trading-pair utilities (15 tests)
- Update market order selectors for Buy/Sell/Matched tabs
- Add tests for clicking orders to navigate to compose form
- Add skipped tests for URL param reading (HashRouter investigation needed)
@droplister droplister changed the title feat: improve order form and market views Improve Order Pages Jan 30, 2026
- Add useEffect to sync URL params on direct navigation (fixes page.goto)
- Guard against division by zero when price is "0" in Max button calculation
- Enable previously skipped URL param E2E tests (now passing)
- Add form state verification to click-to-navigate tests
- Move getOrderPricePerUnit, getOrderBaseAmount, getOrderQuoteAmount,
  getMatchPricePerUnit to shared utility
- Add unit tests for all order calculation helpers (10 new tests)
- Reduces code duplication and enables better test coverage
The openTab selector was incorrectly aliased to "Sell" for backward
compatibility with orders page. This broke dispenser tests which still
use Open/Dispensed tabs. Fixed by:
- openTab now correctly matches "Open" button (for dispensers)
- dispensedTab uses consistent button locator pattern
- Removed misleading "legacy alias" comment
After wallet import, React state updates may still be pending when
navigation to /index occurs. The previous test checked for addressText
immediately, but the address container only renders after wallet context
finishes initializing (not during "Loading wallet data..." state).

Changed to wait for the address container element ([aria-label="Current
address"]) with a longer timeout, which is a reliable indicator that
wallet data has fully propagated through React state.
@droplister droplister merged commit 5de20a3 into main Jan 30, 2026
38 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant