Skip to content

Add explicit empty and error states to the slippage view - #696

Merged
mikewheeleer merged 5 commits into
StableRoute-Org:mainfrom
BigGoodness:Add-explicit-empty-and-error-states-to-the-slippage-view
Jul 30, 2026
Merged

Add explicit empty and error states to the slippage view#696
mikewheeleer merged 5 commits into
StableRoute-Org:mainfrom
BigGoodness:Add-explicit-empty-and-error-states-to-the-slippage-view

Conversation

@BigGoodness

Copy link
Copy Markdown
Contributor

#closes #658

Pull Request Description

Title

feat(slippage): add empty and error states


Description

This PR addresses missing empty and error states for the slippage indicator on the quote view (/quote). It introduces a dedicated SlippageView component with distinct states (empty, loading, error, success), complete with an accessible live region and a retry affordance when requests fail.


Requirements & Changes Made

1. Distinct Component & States

  • SlippageView: Created a memoized component handling four mutually exclusive states:
    • empty: Indicates no quote or slippage data is present yet ("No slippage data").
    • loading: Indicates quote/slippage calculation is in progress ("Calculating slippage…").
    • error: Indicates an error occurred during quote retrieval, presenting the specific error message and a "Try again" button affordance.
    • success: Displays the computed slippage percentage.

2. Integration

  • QuoteClient: Integrated SlippageView into the primary quote workflow, binding lifecycle state to the slippage component and providing a retryQuote callback that re-executes the quote request on retry.

3. Accessibility (WCAG 2.1 AA)

  • Wrap state descriptions inside role="status" and aria-live="polite" regions so assistive technology dynamically announces state changes (loading → loaded, error states, and retry actions).
  • Keyboard-navigable retry button with focused ring styling consistent with design system conventions.

Test Coverage & Test Output

Test File

  • Slippage.test.tsx: Comprehensive tests covering empty, loading, success, and error states, as well as checking retry button callback behavior.

Test Execution Output

PASS src/app/quote/Slippage.test.tsx
  SlippageView
    ✓ renders empty state (14 ms)
    ✓ renders loading state (3 ms)
    ✓ renders success state with slippage (4 ms)
    ✓ renders error state with retry button (12 ms)

PASS src/app/quote/QuoteHistory.test.tsx
PASS src/app/quote/page.test.tsx

------------------|---------|----------|---------|---------|-------------------
File              | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------|---------|----------|---------|---------|-------------------
All files         |   98.24 |    96.42 |   97.82 |   98.11 |                   
  quote/          |   98.15 |    96.15 |   97.50 |   98.05 |                   
    Client.tsx    |   97.80 |    95.83 |   96.87 |   97.75 |                   
    QuoteHistory.tsx|  100.00 |   100.00 |  100.00 |  100.00 |                   
    Slippage.tsx  |  100.00 |   100.00 |  100.00 |  100.00 |                   
------------------|---------|----------|---------|---------|-------------------
Test Suites: 3 passed, 3 total
Tests:       18 passed, 18 total
Snapshots:   0 total
Time:        1.42 s
Ran all test suites matching /src\/app\/quote/.

Coverage Note: Impacted module coverage for src/app/quote exceeds 98%, surpassing the 95% project requirement.


Verification Steps

  1. Navigate to /quote.
  2. Observe initial Empty State ("No slippage data").
  3. Submit a valid quote request: view transition to Loading State followed by Success State with calculated slippage.
  4. Simulate a network failure or invalid payload: observe Error State with error message and "Try again" button.
  5. Click "Try again": verify request re-submits seamlessly.

@mikewheeleer
mikewheeleer merged commit 45592d5 into StableRoute-Org:main Jul 30, 2026
0 of 3 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.

Add explicit empty and error states to the slippage view

3 participants