UserPanel

The UserPanelcomponent offers users a quick and detailed overview of their account status and specific position details.

Component Overview

• Purpose: To toggle between and display views related to the user's sub-account and positions within the app.

• Main Features:

  • Two primary views: Account Overview and Position Details.

  • Mobile/Desktop views.

Usage and Behavior

• On desktop versions, users can toggle between the Account Overview and Position Details views using a tab interface.

• On mobile versions, the component defaults to showing the Account Overview due to space constraints.

• The component listens for changes in the application's state, such as selecting a specific quote or resizing the window, and updates the displayed content accordingly.

Positions

The Positions component in provides a user interface for viewing and managing trading positions. This component displays a list of positions, offering actions like close and cancel, and shows dynamic status updates including expiration and liquidation states.

Key Features

• Responsive Design: Adjusts content display for mobile and desktop views.

• Interactive Rows: Each position can be interacted with to perform actions such as closing or cancelling the position.

• Dynamic Status Indicators: Indicates whether a position is open, closed, pending, expired, or in the process of liquidation.

Components

• TableHeader: Displays column headers for the position table. Hidden on mobile devices to optimize space.

• TableRow: Renders individual rows for each position.

• TableBody: Manages the collection of position.

State Management

• Position Modal States: Utilizes local state to manage the visibility of modal dialogs for closing or cancelling positions.

• Selected Quote: Maintains the state of the currently selected quote for operations like closing or cancelling.

Hooks Used

• useIsMobile: Determines if the device is mobile for responsive layout adjustments.

• useActiveWagmi, useMarketData, useQuoteDetail: Fetches market details, specific quote details depending on connected account.

• useState: Manages local component states such as modal visibility and selected quotes.

Modals

• CloseModal and CancelModal: Modal components used for confirming the closing or cancelling of positions.

Order History

Overview

The History component provides a display of trading history for a user, including details on each trade's position, prices, status, and profit or loss. This component is part of a financial trading platform and allows users to review their historical transactions.

Component Structure

• History: The main container that orchestrates the rendering of the table headers and body based on device type (mobile or desktop).

• TableHeader: Displays column headers, which are hidden on mobile devices for a cleaner presentation.

• TableBody: Manages the rendering of each row in the history table, handling different states like loading or empty data states.

• QuoteRow: Renders individual rows with detailed information about each quote or position.

Features

• Status Indicators: Displays the current status of each position with visual cues for statuses like liquidated, expired, or canceled.

Hooks Used

• useIsMobile: Checks if the device is a mobile device to adjust the layout accordingly.

• useActiveWagmi: Fetches the active blockchain account details.

• useMarketsStatus, useHistoryQuotes: Fetches the status of the markets and historical quotes.

• useMarket, useQuoteUpnlAndPnl, useQuoteLeverage: Fetches market details and calculates the unrealized profit/loss and leverage for each quote.