Arbitrage Quote Analysis Interface

Technical Specification

Frontend Development of the Arbitrage Quote Analysis System Interface

Goal

Create a responsive and dynamic web interface using Angular, with the following capabilities:
• Display of charts for trading instruments (via TradingView Lightweight Charts)
• Automatic addition, update, and sorting of instrument panels
• Basic user authentication and access protection
• User controls for display, sorting, and filtering via interface elements


Technologies
• Framework: Angular (v16+)
• Charts: TradingView Lightweight Charts
• UI: Responsive layout using Flexbox / CSS Grid (Angular Material optional)
• Data: All data provided via API in JSON format (mocked during development)


Interface Structure

1. Page Header
• Button: “Refresh instrument list”
• Sends a request to fetch updated instruments
• Only new instruments are added to the UI; existing ones are not duplicated
• Display of the last update timestamp
• (Optional) Badge showing the number of active arbitrage opportunities

2. Instrument Panels

Each instrument is shown as an individual panel, containing:
• Instrument name (e.g., GOLD, USD/CNH)
• TradingView chart connected to relevant instrument data
• Key information:
• Best Bid / Best Ask from each exchange
• Calculated spread (from API)
• Color indicator for arbitrage status:
• Green: arbitrage opportunity detected
• Gray: no arbitrage signal
• (Optional) Remove panel button
• Tooltip on hover over spread value, showing explanation (provided by API)

3. Panel Grid Layout
• Responsive layout: panels automatically wrap into rows depending on screen width
• Maximum number of panels per row, based on available width
• Implemented using CSS Grid or Flexbox with emphasis on readability and stability
• Sorting:
• Panels sorted in descending order of spread value
• Order updates automatically when data changes

4. Authentication
• Simple login form:
• Fields: Email and Password
• Login button
• After successful login, user is redirected to the main dashboard
• Route protection for unauthenticated users
• Token stored in localStorage or SessionStorage
• Logout button available in the header

5. Color Indication
• Use CSS or SCSS classes:
• .has-arbitrage { background: #d0f0c0; }
• .no-arbitrage { background: #f0f0f0; }
• Message or icon indicating “Arbitrage opportunity detected” if spread exceeds a threshold (defined in JSON)

6. Data Updating
• Data is refreshed via:
• Manual click of the Refresh button
• Automatic timer (interval in hours, configurable via environment variable)
• Panels are updated only if new instruments are received
• Spread-based sorting is maintained after updates

7. Responsiveness and Cross-Browser Support
• The interface must work correctly on:
• Desktops (primary target)
• Tablets (with readable layout)
• Minimum supported screen width: 1024px
• Fully compatible with the latest versions of Chrome, Firefox, and Safari


Roles and Access
• Implement client-side role toggle (isAdmin: true/false)
• No functional differences yet
• Prepared for future admin-specific features