> For the complete documentation index, see [llms.txt](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/frontend-sdk/cloverfield-app/components/userpanel.md).

# UserPanel

The `UserPanel`component 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.

<br>

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://symmdocs.gitbook.io/frontend-sdk-technical-docs/frontend-sdk/cloverfield-app/components/userpanel.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.