@orderly.network/portfolio 2.5.1 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +154 -0
  2. package/package.json +18 -18
package/README.md ADDED
@@ -0,0 +1,154 @@
1
+ # @orderly.network/portfolio Mobile Pages Usage Guide
2
+
3
+ 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.
4
+
5
+ ## Component Import Paths
6
+
7
+ ### HistoryPage Component
8
+
9
+ ```typescript
10
+ import { HistoryModule } from "@orderly.network/portfolio";
11
+
12
+ // Available components
13
+ const { HistoryPage, HistoryWidget } = HistoryModule;
14
+ ```
15
+
16
+ ### SettingPage Component
17
+
18
+ ```typescript
19
+ import { SettingModule } from "@orderly.network/portfolio";
20
+
21
+ // Available components
22
+ const { SettingPage, SettingWidget } = SettingModule;
23
+ ```
24
+
25
+ ## Route Path Configuration
26
+
27
+ Based on the `PortfolioLeftSidebarPath` enum definition, the standard route paths for mobile pages are:
28
+
29
+ ```typescript
30
+ // History page path
31
+ const HISTORY_PATH = "/portfolio/history";
32
+
33
+ // Settings page path
34
+ const SETTING_PATH = "/portfolio/setting";
35
+ ```
36
+
37
+ ## Complete Route Configuration Examples
38
+
39
+ ### React Router Configuration Example
40
+
41
+ ```typescript
42
+ import { Routes, Route } from "react-router-dom";
43
+ import { HistoryModule, SettingModule } from "@orderly.network/portfolio";
44
+
45
+ const { HistoryPage } = HistoryModule;
46
+ const { SettingPage } = SettingModule;
47
+
48
+ function App() {
49
+ return (
50
+ <Routes>
51
+ {/* Other routes */}
52
+ <Route path="/portfolio" element={<PortfolioOverview />} />
53
+ <Route path="/portfolio/positions" element={<PositionsPage />} />
54
+ <Route path="/portfolio/orders" element={<OrdersPage />} />
55
+
56
+ {/* New mobile page routes */}
57
+ <Route path="/portfolio/history" element={<HistoryPage />} />
58
+ <Route path="/portfolio/setting" element={<SettingPage />} />
59
+ </Routes>
60
+ );
61
+ }
62
+ ```
63
+
64
+ ### Next.js App Router Configuration Example
65
+
66
+ ```typescript
67
+ // app/portfolio/history/page.tsx
68
+ import { HistoryModule } from "@orderly.network/portfolio";
69
+
70
+ const { HistoryPage } = HistoryModule;
71
+
72
+ export default function HistoryPageRoute() {
73
+ return <HistoryPage />;
74
+ }
75
+ ```
76
+
77
+ ```typescript
78
+ // app/portfolio/setting/page.tsx
79
+ import { SettingModule } from "@orderly.network/portfolio";
80
+
81
+ const { SettingPage } = SettingModule;
82
+
83
+ export default function SettingPageRoute() {
84
+ return <SettingPage />;
85
+ }
86
+ ```
87
+
88
+ ### Next.js Pages Router Configuration Example
89
+
90
+ ```typescript
91
+ // pages/portfolio/history.tsx
92
+ import { HistoryModule } from "@orderly.network/portfolio";
93
+
94
+ const { HistoryPage } = HistoryModule;
95
+
96
+ export default HistoryPage;
97
+ ```
98
+
99
+ ```typescript
100
+ // pages/portfolio/setting.tsx
101
+ import { SettingModule } from "@orderly.network/portfolio";
102
+
103
+ const { SettingPage } = SettingModule;
104
+
105
+ export default SettingPage;
106
+ ```
107
+
108
+ ## Mobile Navigation Configuration
109
+
110
+ If you are using Portfolio's layout components, mobile navigation will automatically handle these routes. Ensure your `routerAdapter` is properly configured:
111
+
112
+ ```typescript
113
+ import { PortfolioLayoutWidget } from "@orderly.network/portfolio";
114
+
115
+ const routerAdapter = {
116
+ onRouteChange: ({ href, name }) => {
117
+ // Handle route navigation logic
118
+ router.push(href);
119
+ },
120
+ currentPath: router.pathname, // Current path
121
+ };
122
+
123
+ function PortfolioLayout({ children }) {
124
+ return (
125
+ <PortfolioLayoutWidget
126
+ routerAdapter={routerAdapter}
127
+ current={router.pathname}
128
+ >
129
+ {children}
130
+ </PortfolioLayoutWidget>
131
+ );
132
+ }
133
+ ```
134
+
135
+ ## Feature Description
136
+
137
+ ### HistoryPage
138
+
139
+ - **Function**: Display user's trading history records
140
+ - **Includes**: Deposit/withdrawal history, funding fee history, distribution history
141
+ - **Mobile Optimization**: Automatically adapts to mobile interface, provides touch-friendly interactive experience
142
+
143
+ ### SettingPage
144
+
145
+ - **Function**: User settings page
146
+ - **Includes**: Account settings, preference settings, etc.
147
+ - **Mobile Optimization**: Responsive design, supports mobile operations
148
+
149
+ ## Important Notes
150
+
151
+ 1. **Path Consistency**: Ensure route paths are consistent with `PortfolioLeftSidebarPath` enum values
152
+ 2. **Mobile Detection**: Components automatically detect mobile environment and render corresponding UI
153
+ 3. **Dependency Requirements**: Ensure all necessary dependency packages are installed, including `@orderly.network/ui`, `@orderly.network/i18n`, etc.
154
+ 4. **RouterAdapter**: Ensure proper implementation of `routerAdapter` interface to support page navigation functionality
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orderly.network/portfolio",
3
- "version": "2.5.1",
3
+ "version": "2.5.2",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -17,22 +17,22 @@
17
17
  "ramda": "^0.29.0",
18
18
  "date-fns": "^3.6.0",
19
19
  "lodash": "^4.17.21",
20
- "@orderly.network/chart": "2.5.1",
21
- "@orderly.network/i18n": "2.5.1",
22
- "@orderly.network/react-app": "2.5.1",
23
- "@orderly.network/hooks": "2.5.1",
24
- "@orderly.network/types": "2.5.1",
25
- "@orderly.network/perp": "4.5.1",
26
- "@orderly.network/ui": "2.5.1",
27
- "@orderly.network/ui-connector": "2.5.1",
28
- "@orderly.network/ui-leverage": "2.5.1",
29
- "@orderly.network/ui-positions": "2.5.1",
30
- "@orderly.network/ui-scaffold": "2.5.1",
31
- "@orderly.network/ui-share": "2.5.1",
32
- "@orderly.network/ui-transfer": "2.5.1",
33
- "@orderly.network/ui-orders": "2.5.1",
34
- "@orderly.network/utils": "2.5.1",
35
- "@orderly.network/ui-chain-selector": "2.5.1"
20
+ "@orderly.network/chart": "2.5.2",
21
+ "@orderly.network/i18n": "2.5.2",
22
+ "@orderly.network/hooks": "2.5.2",
23
+ "@orderly.network/react-app": "2.5.2",
24
+ "@orderly.network/perp": "4.5.2",
25
+ "@orderly.network/types": "2.5.2",
26
+ "@orderly.network/ui-connector": "2.5.2",
27
+ "@orderly.network/ui": "2.5.2",
28
+ "@orderly.network/ui-leverage": "2.5.2",
29
+ "@orderly.network/ui-orders": "2.5.2",
30
+ "@orderly.network/ui-positions": "2.5.2",
31
+ "@orderly.network/ui-scaffold": "2.5.2",
32
+ "@orderly.network/ui-share": "2.5.2",
33
+ "@orderly.network/utils": "2.5.2",
34
+ "@orderly.network/ui-transfer": "2.5.2",
35
+ "@orderly.network/ui-chain-selector": "2.5.2"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@types/ramda": "^0.29.3",
@@ -44,7 +44,7 @@
44
44
  "tailwindcss": "^3.4.4",
45
45
  "tsup": "^7.1.0",
46
46
  "typescript": "^5.1.6",
47
- "tsconfig": "0.8.1"
47
+ "tsconfig": "0.8.2"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "react": ">=18",