@orderly.network/portfolio 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/index.d.mts

@@ -110,6 +110,11 @@ declare const useAssetsHistoryData: (localKey: string, options?: {
         snapshot_time?: number | undefined;
     }[];
     readonly volumeUpdateDate: any;
+    readonly todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
 };
 type useAssetsHistoryDataReturn = ReturnType<typeof useAssetsHistoryData>;
 
@@ -143,6 +148,11 @@ declare const useAssetsChartScript: () => {
         snapshot_time?: number | undefined;
     }[];
     readonly volumeUpdateDate: any;
+    readonly todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
     readonly totalOrderClaimedReward: [number | undefined, {
         refresh: () => void;
     }];
@@ -223,6 +233,11 @@ declare const usePerformanceScript: () => {
         snapshot_time?: number | undefined;
     }[];
     volumeUpdateDate: any;
+    todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
     totalOrderClaimedReward: [number | undefined, {
         refresh: () => void;
     }];

package/dist/index.d.ts

@@ -110,6 +110,11 @@ declare const useAssetsHistoryData: (localKey: string, options?: {
         snapshot_time?: number | undefined;
     }[];
     readonly volumeUpdateDate: any;
+    readonly todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
 };
 type useAssetsHistoryDataReturn = ReturnType<typeof useAssetsHistoryData>;
 
@@ -143,6 +148,11 @@ declare const useAssetsChartScript: () => {
         snapshot_time?: number | undefined;
     }[];
     readonly volumeUpdateDate: any;
+    readonly todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
     readonly totalOrderClaimedReward: [number | undefined, {
         refresh: () => void;
     }];
@@ -223,6 +233,11 @@ declare const usePerformanceScript: () => {
         snapshot_time?: number | undefined;
     }[];
     volumeUpdateDate: any;
+    todayPerformance: {
+        pnl: number;
+        roi: number;
+        vol: number;
+    } | null;
     totalOrderClaimedReward: [number | undefined, {
         refresh: () => void;
     }];

package/dist/index.js

@@ -845,9 +845,24 @@ var init_assetHistory = __esm({
     init_assetHistory_widget();
   }
 });
-var useFundingHistoryColumns;
+var SymbolBadge, useFundingHistoryColumns;
 var init_column2 = __esm({
   "src/pages/overview/funding/column.tsx"() {
+    SymbolBadge = (props) => {
+      const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(
+        props.symbol
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.symbolBadge,
+        {
+          badge: brokerName ?? brokerId ?? void 0,
+          fullName: brokerNameRaw,
+          className: "oui-cursor-pointer",
+          showIcon: true,
+          children: props.symbol
+        }
+      );
+    };
     useFundingHistoryColumns = () => {
       const { t } = i18n.useTranslation();
       const columns = React12.useMemo(() => {
@@ -856,10 +871,7 @@ var init_column2 = __esm({
             title: t("common.symbol"),
             dataIndex: "symbol",
             width: 80,
-            rule: "symbol",
-            textProps: {
-              showIcon: true
-            }
+            render: (value) => /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol: value })
           },
           {
             title: t("common.time"),
@@ -987,9 +999,22 @@ var init_fundingHistory_ui = __esm({
     };
   }
 });
+var SymbolBadge2;
+var init_symbolBadge = __esm({
+  "src/pages/overview/funding/symbolBadge.tsx"() {
+    SymbolBadge2 = (props) => {
+      const { brokerId, brokerName, brokerNameRaw } = hooks.useBadgeBySymbol(
+        props.symbol
+      );
+      const badge = brokerName ?? brokerId ?? void 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+    };
+  }
+});
 var FundingHistoryMobile;
 var init_fundingHistory_ui_mobile = __esm({
   "src/pages/overview/funding/fundingHistory.ui.mobile.tsx"() {
+    init_symbolBadge();
     FundingHistoryMobile = (props) => {
       const { dataSource: dataSource2, queryParameter, onFilter, isLoading, pagination } = props;
       const symbols = hooks.useSymbolsInfo();
@@ -1026,11 +1051,16 @@ var init_fundingHistory_ui_mobile = __esm({
                   ui.Text.formatted,
                   {
                     rule: "symbol",
+                    formatString: "base",
                     className: "oui-text-base-contrast oui-mr-1 oui-text-sm",
+                    suffix: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", gap: 1, children: [
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: switchPaymentType(item.payment_type) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge2, { symbol: item.symbol })
+                    ] }),
                     children: item.symbol
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: switchPaymentType(item.payment_type) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   ui.Text.formatted,
                   {
@@ -2223,7 +2253,7 @@ var init_assets_ui_desktop = __esm({
               children: totalValue ?? "--"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", weight: "bold", children: "USDC" })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "div", weight: "bold", className: "oui-leading-6", children: "USDC" })
         ] })
       ] });
     };
@@ -4115,7 +4145,7 @@ var init_useAssetHistory = __esm({
       );
       const [userStatistics] = hooks.useUserStatistics();
       const todayVolume = React12.useMemo(
-        () => userStatistics?.perp_trading_volume_last_24_hours ?? 0,
+        () => userStatistics?.perp_trading_volume_today ?? 0,
         [userStatistics]
       );
       const lastBalanceEventRef = React12.useRef(0);
@@ -4272,6 +4302,7 @@ var init_useAssetHistory = __esm({
           ...lastItem2,
           date: getUTCStr(today),
           perp_volume: todayVol,
+          base_account_value: lastItem2?.account_value ?? 0,
           account_value: totalValue2 !== null ? totalValue2 : lastItem2?.account_value ?? 0,
           pnl: calculateLastPnl({
             lastItem: lastItem2,
@@ -4330,6 +4361,25 @@ var init_useAssetHistory = __esm({
         totalTransferOut,
         todayVolume
       ]);
+      const todayPerformance = React12.useMemo(() => {
+        if (!Array.isArray(calculatedData) || calculatedData.length === 0) {
+          return null;
+        }
+        const todayRow = calculatedData[calculatedData.length - 1];
+        if (!todayRow.__isCalculated) {
+          return null;
+        }
+        const baseAccountValue = typeof todayRow.base_account_value === "number" ? todayRow.base_account_value : todayRow.account_value ?? 0;
+        let roi = utils.zero;
+        if (baseAccountValue) {
+          roi = new utils.Decimal(todayRow.pnl).div(baseAccountValue);
+        }
+        return {
+          pnl: todayRow.pnl,
+          roi: roi.toNumber(),
+          vol: todayRow.perp_volume ?? 0
+        };
+      }, [calculatedData]);
       const aggregateValue = React12.useMemo(() => {
         let vol = utils.zero;
         let pnl = utils.zero;
@@ -4369,7 +4419,8 @@ var init_useAssetHistory = __esm({
         // calculatedData,
         aggregateValue,
         createFakeData,
-        volumeUpdateDate: data?.[data.length - 1]?.date ?? ""
+        volumeUpdateDate: data?.[data.length - 1]?.date ?? "",
+        todayPerformance
       };
     };
   }
@@ -4479,7 +4530,7 @@ var init_performance_ui = __esm({
     formatForChart = (value, dp = 2) => {
       if (value == null) return 0;
       const decimal = new utils.Decimal(value);
-      return Number(decimal.toFixed(dp, utils.Decimal.ROUND_DOWN));
+      return Number(decimal.toFixed(dp, utils.Decimal.ROUND_HALF_UP));
     };
     PerformanceUI = (props) => {
       const {
@@ -5084,7 +5135,7 @@ var init_apiManager_script = __esm({
             hideCreateDialog();
             setGenerateKey({
               key,
-              screctKey: secretKey,
+              secretKey,
               ip,
               permissions: scope?.split(",")?.map((e) => capitalizeFirstChar(e)).join(", ")
             });
@@ -5505,7 +5556,7 @@ var init_createdApiKey = __esm({
                   copyIconSize: 16,
                   className: "oui-break-all",
                   onCopy: props.onCopyApiSecretKey,
-                  children: props.generateKey?.screctKey
+                  children: props.generateKey?.secretKey
                 }
               ),
               " "
@@ -5949,18 +6000,24 @@ var init_apiManager_ui = __esm({
           dataIndex: "orderly_key",
           width: 150,
           render: (value) => {
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text.formatted,
-              {
-                rule: "",
-                copyable: true,
-                copyIconSize: 16,
-                onCopy: () => {
-                  props.onCopyApiKey?.(value);
-                },
-                children: formatKey(value)
-              }
-            );
+            const fullKey = typeof value === "string" ? value : `${value ?? ""}`;
+            const displayKey = formatKey(fullKey);
+            return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-overflow-hidden oui-overflow-ellipsis", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "", children: displayKey }) }),
+              !!fullKey && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { width: 16, height: 16, className: "oui-cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.CopyIcon,
+                {
+                  color: "white",
+                  opacity: 0.54,
+                  size: 16,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(fullKey);
+                    props.onCopyApiKey?.(fullKey);
+                  }
+                }
+              ) })
+            ] });
           }
         },
         {
@@ -6763,8 +6820,10 @@ init_assetChart();
 
 // src/pages/overview/portfolioChartsMobile/portfolioChartsMobile.script.ts
 init_type();
+init_overviewContext();
 var usePortfolioChartsState = () => {
   const [data] = hooks.usePositionStream();
+  const overview = useOverviewContext();
   const [visible, setVisible] = hooks.useLocalStorage(
     ORDERLY_ASSETS_VISIBLE_KEY,
     true
@@ -6773,6 +6832,9 @@ var usePortfolioChartsState = () => {
     return ui.modal.show(PerformanceMobileSheetId);
   }, []);
   return {
+    todaysPnl: overview?.todayPerformance?.pnl ?? null,
+    todaysRoi: overview?.todayPerformance?.roi ?? null,
+    todaysVol: overview?.todayPerformance?.vol ?? null,
     unrealPnL: data?.aggregated.total_unreal_pnl,
     unrealROI: data?.totalUnrealizedROI,
     visible,
@@ -6781,7 +6843,15 @@ var usePortfolioChartsState = () => {
   };
 };
 var PortfolioChartsMobileUI = (props) => {
-  const { data, invisible, unrealPnL, unrealROI, visible, onPerformanceClick } = props;
+  const {
+    data,
+    invisible,
+    todaysPnl,
+    todaysRoi,
+    todaysVol,
+    visible,
+    onPerformanceClick
+  } = props;
   const { t } = i18n.useTranslation();
   const colorId = React12.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6789,62 +6859,55 @@ var PortfolioChartsMobileUI = (props) => {
     {
       p: 4,
       width: "100%",
-      itemAlign: "center",
-      justify: "between",
+      direction: "column",
       className: ui.cn(
         "oui-relative oui-overflow-hidden oui-rounded-2xl oui-border oui-border-solid oui-border-line-12 oui-bg-base-9"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Flex,
-          {
-            width: "100%",
-            justify: "center",
-            itemAlign: "start",
-            direction: "column",
-            gap: 2,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", intensity: 54, children: t("common.unrealizedPnl") }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text.pnl, { coloring: true, size: "base", weight: "semibold", visible, children: unrealPnL }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text.roi,
-                  {
-                    coloring: true,
-                    rule: "percentages",
-                    size: "sm",
-                    weight: "semibold",
-                    prefix: "(",
-                    suffix: ")",
-                    visible,
-                    children: unrealROI
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Text,
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", justify: "between", itemAlign: "start", mb: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("portfolio.overview.todaysPnl") }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gapX: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.pnl, { coloring: true, size: "base", weight: "semibold", visible, children: invisible || todaysPnl == null ? "--" : todaysPnl }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text.roi,
                 {
-                  size: "xs",
-                  intensity: 54,
-                  className: "oui-flex oui-items-center oui-justify-start oui-gap-1",
-                  onClick: onPerformanceClick,
-                  children: [
-                    t("portfolio.overview.performance"),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronRightIcon, { className: "oui-text-base-contrast-54" })
-                  ]
+                  coloring: true,
+                  rule: "percentages",
+                  size: "sm",
+                  weight: "semibold",
+                  prefix: "(",
+                  suffix: ")",
+                  visible,
+                  children: invisible || todaysRoi == null ? "--" : todaysRoi
                 }
               )
-            ]
-          }
-        ),
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, children: t("portfolio.overview.todaysVol") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Text.numeral,
+              {
+                size: "sm",
+                rule: "human",
+                dp: 2,
+                visible,
+                prefix: "$",
+                children: invisible || todaysVol == null ? "--" : todaysVol
+              }
+            )
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Flex,
           {
             width: "100%",
             justify: "center",
             itemAlign: "center",
-            direction: "column",
-            children: /* @__PURE__ */ jsxRuntime.jsx(chart.AreaChart, { data: data || types.EMPTY_LIST, width: 160, height: 52, children: !invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            mb: 3,
+            className: "oui-px-1",
+            children: /* @__PURE__ */ jsxRuntime.jsx(chart.ResponsiveContainer, { width: "100%", height: 52, children: /* @__PURE__ */ jsxRuntime.jsx(chart.AreaChart, { data: data || types.EMPTY_LIST, children: !invisible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "stop",
@@ -6875,9 +6938,22 @@ var PortfolioChartsMobileUI = (props) => {
                   fill: `url(#${colorId})`
                 }
               )
-            ] }) })
+            ] }) }) })
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { width: "100%", justify: "start", itemAlign: "center", mt: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Text,
+          {
+            size: "xs",
+            intensity: 54,
+            className: "oui-flex oui-items-center oui-justify-start oui-gap-1",
+            onClick: onPerformanceClick,
+            children: [
+              t("portfolio.overview.performance"),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronRightIcon, { className: "oui-text-base-contrast-54" })
+            ]
+          }
+        ) })
       ]
     }
   );