> ## Documentation Index
> Fetch the complete documentation index at: https://orderly.network/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Portfolio

> Pre-built React portfolio components including history, settings, and mobile-responsive pages.

If you are using the layout components from @orderly.network/portfolio directly and are an existing user, when you want to use mobile pages, we have added HistoryPage and SettingPage. You can add the corresponding routes to fully utilize the mobile functionality.

## Component Import Paths

### HistoryPage Component

```typescript theme={null}
import { HistoryModule } from "@orderly.network/portfolio";

// Available components
const { HistoryPage, HistoryWidget } = HistoryModule;
```

### SettingPage Component

```typescript theme={null}
import { SettingModule } from "@orderly.network/portfolio";

// Available components
const { SettingPage, SettingWidget } = SettingModule;
```

## Route Path Configuration

Based on the `PortfolioLeftSidebarPath` enum definition, the standard route paths for mobile pages are:

```typescript theme={null}
// History page path
const HISTORY_PATH = "/portfolio/history";

// Settings page path
const SETTING_PATH = "/portfolio/setting";
```

## Complete Route Configuration Examples

### React Router Configuration Example

```typescript theme={null}
import { Routes, Route } from "react-router-dom";
import { HistoryModule, SettingModule } from "@orderly.network/portfolio";

const { HistoryPage } = HistoryModule;
const { SettingPage } = SettingModule;

function App() {
  return (
    <Routes>
      {/* Other routes */}
      <Route path="/portfolio" element={<PortfolioOverview />} />
      <Route path="/portfolio/positions" element={<PositionsPage />} />
      <Route path="/portfolio/orders" element={<OrdersPage />} />

      {/* New mobile page routes */}
      <Route path="/portfolio/history" element={<HistoryPage />} />
      <Route path="/portfolio/setting" element={<SettingPage />} />
    </Routes>
  );
}
```

### Next.js App Router Configuration Example

```typescript theme={null}
// app/portfolio/history/page.tsx
import { HistoryModule } from "@orderly.network/portfolio";

const { HistoryPage } = HistoryModule;

export default function HistoryPageRoute() {
  return <HistoryPage />;
}
```

```typescript theme={null}
// app/portfolio/setting/page.tsx
import { SettingModule } from "@orderly.network/portfolio";

const { SettingPage } = SettingModule;

export default function SettingPageRoute() {
  return <SettingPage />;
}
```

### Next.js Pages Router Configuration Example

```typescript theme={null}
// pages/portfolio/history.tsx
import { HistoryModule } from "@orderly.network/portfolio";

const { HistoryPage } = HistoryModule;

export default HistoryPage;
```

```typescript theme={null}
// pages/portfolio/setting.tsx
import { SettingModule } from "@orderly.network/portfolio";

const { SettingPage } = SettingModule;

export default SettingPage;
```

## Mobile Navigation Configuration

If you are using Portfolio's layout components, mobile navigation will automatically handle these routes. Ensure your `routerAdapter` is properly configured:

```typescript theme={null}
import { PortfolioLayoutWidget } from "@orderly.network/portfolio";

const routerAdapter = {
  onRouteChange: ({ href, name }) => {
    // Handle route navigation logic
    router.push(href);
  },
  currentPath: router.pathname, // Current path
};

function PortfolioLayout({ children }) {
  return (
    <PortfolioLayoutWidget
      routerAdapter={routerAdapter}
      current={router.pathname}
    >
      {children}
    </PortfolioLayoutWidget>
  );
}
```

## Feature Description

### HistoryPage

* **Function**: Display user's trading history records
* **Includes**: Deposit/withdrawal history, funding fee history, distribution history
* **Mobile Optimization**: Automatically adapts to mobile interface, provides touch-friendly interactive experience

### SettingPage

* **Function**: User settings page
* **Includes**: Account settings, preference settings, etc.
* **Mobile Optimization**: Responsive design, supports mobile operations

## Important Notes

1. **Path Consistency**: Ensure route paths are consistent with `PortfolioLeftSidebarPath` enum values
2. **Mobile Detection**: Components automatically detect mobile environment and render corresponding UI
3. **Dependency Requirements**: Ensure all necessary dependency packages are installed, including `@orderly.network/ui`, `@orderly.network/i18n`, etc.
4. **RouterAdapter**: Ensure proper implementation of `routerAdapter` interface to support page navigation functionality