@orderly.network/portfolio 2.11.1 → 2.11.2

package/dist/index.mjs

@@ -12,7 +12,7 @@ import { Decimal, zero, numberToHumanStyle, commifyOptional, subtractDaysFromCur
 import { subDays, format, getYear, getMonth, getDate, set, differenceInDays, setHours } from 'date-fns';
 import { produce } from 'immer';
 import pick$1 from 'ramda/es/pick';
-import { AssetLineChart, PnLBarChart, PnlAreaChart, VolBarChart, VolumeAreaChart, AreaChart, Area, AssetAreaChart } from '@orderly.network/chart';
+import { AssetLineChart, PnLBarChart, PnlAreaChart, VolBarChart, VolumeAreaChart, ResponsiveContainer, AreaChart, Area, AssetAreaChart } from '@orderly.network/chart';
 import { useScaffoldContext, Scaffold, SideBar, MainNavMobile, BottomNav, LanguageSwitcherWidget } from '@orderly.network/ui-scaffold';
 import { pick } from 'ramda';
 import { CombinePositionsWidget, PositionsWidget, PositionHistoryWidget, LiquidationWidget } from '@orderly.network/ui-positions';
@@ -4108,7 +4108,7 @@ var init_useAssetHistory = __esm({
       );
       const [userStatistics] = useUserStatistics();
       const todayVolume = useMemo(
-        () => userStatistics?.perp_trading_volume_last_24_hours ?? 0,
+        () => userStatistics?.perp_trading_volume_today ?? 0,
         [userStatistics]
       );
       const lastBalanceEventRef = useRef(0);
@@ -4265,6 +4265,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,
@@ -4323,6 +4324,25 @@ var init_useAssetHistory = __esm({
         totalTransferOut,
         todayVolume
       ]);
+      const todayPerformance = 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 = zero;
+        if (baseAccountValue) {
+          roi = new Decimal(todayRow.pnl).div(baseAccountValue);
+        }
+        return {
+          pnl: todayRow.pnl,
+          roi: roi.toNumber(),
+          vol: todayRow.perp_volume ?? 0
+        };
+      }, [calculatedData]);
       const aggregateValue = useMemo(() => {
         let vol = zero;
         let pnl = zero;
@@ -4362,7 +4382,8 @@ var init_useAssetHistory = __esm({
         // calculatedData,
         aggregateValue,
         createFakeData,
-        volumeUpdateDate: data?.[data.length - 1]?.date ?? ""
+        volumeUpdateDate: data?.[data.length - 1]?.date ?? "",
+        todayPerformance
       };
     };
   }
@@ -4472,7 +4493,7 @@ var init_performance_ui = __esm({
     formatForChart = (value, dp = 2) => {
       if (value == null) return 0;
       const decimal = new Decimal(value);
-      return Number(decimal.toFixed(dp, Decimal.ROUND_DOWN));
+      return Number(decimal.toFixed(dp, Decimal.ROUND_HALF_UP));
     };
     PerformanceUI = (props) => {
       const {
@@ -5077,7 +5098,7 @@ var init_apiManager_script = __esm({
             hideCreateDialog();
             setGenerateKey({
               key,
-              screctKey: secretKey,
+              secretKey,
               ip,
               permissions: scope?.split(",")?.map((e) => capitalizeFirstChar(e)).join(", ")
             });
@@ -5498,7 +5519,7 @@ var init_createdApiKey = __esm({
                   copyIconSize: 16,
                   className: "oui-break-all",
                   onCopy: props.onCopyApiSecretKey,
-                  children: props.generateKey?.screctKey
+                  children: props.generateKey?.secretKey
                 }
               ),
               " "
@@ -5942,18 +5963,24 @@ var init_apiManager_ui = __esm({
           dataIndex: "orderly_key",
           width: 150,
           render: (value) => {
-            return /* @__PURE__ */ jsx(
-              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__ */ jsxs(Flex, { gap: 1, itemAlign: "center", children: [
+              /* @__PURE__ */ jsx("div", { className: "oui-overflow-hidden oui-overflow-ellipsis", children: /* @__PURE__ */ jsx(Text.formatted, { rule: "", children: displayKey }) }),
+              !!fullKey && /* @__PURE__ */ jsx(Box, { width: 16, height: 16, className: "oui-cursor-pointer", children: /* @__PURE__ */ jsx(
+                CopyIcon,
+                {
+                  color: "white",
+                  opacity: 0.54,
+                  size: 16,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(fullKey);
+                    props.onCopyApiKey?.(fullKey);
+                  }
+                }
+              ) })
+            ] });
           }
         },
         {
@@ -6756,8 +6783,10 @@ init_assetChart();
 
 // src/pages/overview/portfolioChartsMobile/portfolioChartsMobile.script.ts
 init_type();
+init_overviewContext();
 var usePortfolioChartsState = () => {
   const [data] = usePositionStream();
+  const overview = useOverviewContext();
   const [visible, setVisible] = useLocalStorage(
     ORDERLY_ASSETS_VISIBLE_KEY,
     true
@@ -6766,6 +6795,9 @@ var usePortfolioChartsState = () => {
     return 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,
@@ -6774,7 +6806,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 } = useTranslation();
   const colorId = useId();
   return /* @__PURE__ */ jsxs(
@@ -6782,62 +6822,55 @@ var PortfolioChartsMobileUI = (props) => {
     {
       p: 4,
       width: "100%",
-      itemAlign: "center",
-      justify: "between",
+      direction: "column",
       className: cn(
         "oui-relative oui-overflow-hidden oui-rounded-2xl oui-border oui-border-solid oui-border-line-12 oui-bg-base-9"
       ),
       children: [
-        /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            width: "100%",
-            justify: "center",
-            itemAlign: "start",
-            direction: "column",
-            gap: 2,
-            children: [
-              /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 54, children: t("common.unrealizedPnl") }),
-              /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", children: [
-                /* @__PURE__ */ jsx(Text.pnl, { coloring: true, size: "base", weight: "semibold", visible, children: unrealPnL }),
-                /* @__PURE__ */ jsx(
-                  Text.roi,
-                  {
-                    coloring: true,
-                    rule: "percentages",
-                    size: "sm",
-                    weight: "semibold",
-                    prefix: "(",
-                    suffix: ")",
-                    visible,
-                    children: unrealROI
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(
-                Text,
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", justify: "between", itemAlign: "start", mb: 3, children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("portfolio.overview.todaysPnl") }),
+            /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", gapX: 1, children: [
+              /* @__PURE__ */ jsx(Text.pnl, { coloring: true, size: "base", weight: "semibold", visible, children: invisible || todaysPnl == null ? "--" : todaysPnl }),
+              /* @__PURE__ */ jsx(
+                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__ */ jsx(ChevronRightIcon, { className: "oui-text-base-contrast-54" })
-                  ]
+                  coloring: true,
+                  rule: "percentages",
+                  size: "sm",
+                  weight: "semibold",
+                  prefix: "(",
+                  suffix: ")",
+                  visible,
+                  children: invisible || todaysRoi == null ? "--" : todaysRoi
                 }
               )
-            ]
-          }
-        ),
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "end", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, children: t("portfolio.overview.todaysVol") }),
+            /* @__PURE__ */ jsx(
+              Text.numeral,
+              {
+                size: "sm",
+                rule: "human",
+                dp: 2,
+                visible,
+                prefix: "$",
+                children: invisible || todaysVol == null ? "--" : todaysVol
+              }
+            )
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           Flex,
           {
             width: "100%",
             justify: "center",
             itemAlign: "center",
-            direction: "column",
-            children: /* @__PURE__ */ jsx(AreaChart, { data: data || EMPTY_LIST, width: 160, height: 52, children: !invisible && /* @__PURE__ */ jsxs(Fragment, { children: [
+            mb: 3,
+            className: "oui-px-1",
+            children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 52, children: /* @__PURE__ */ jsx(AreaChart, { data: data || EMPTY_LIST, children: !invisible && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: colorId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
                 /* @__PURE__ */ jsx(
                   "stop",
@@ -6868,9 +6901,22 @@ var PortfolioChartsMobileUI = (props) => {
                   fill: `url(#${colorId})`
                 }
               )
-            ] }) })
+            ] }) }) })
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(Flex, { width: "100%", justify: "start", itemAlign: "center", mt: 1, children: /* @__PURE__ */ jsxs(
+          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__ */ jsx(ChevronRightIcon, { className: "oui-text-base-contrast-54" })
+            ]
+          }
+        ) })
       ]
     }
   );