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

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import React12, { createContext, useMemo, useId, useContext, useState, useCallback, useRef, createElement, useEffect } from 'react';
-import { useLocalStorage, useAccount, useIndexPricesStream, useCollateral, usePrivateQuery, useStatisticsDaily, useUserStatistics, useBalanceTopic, useAssetsHistory, useFeeState, useMediaQuery, useAccountInfo, useWalletConnector, usePositionStream, useLeverage, useMaxWithdrawal, useGetClaimed, DistributionId, TWType, useCurEpochEstimate, useAllBrokers, noCacheConfig, useEpochInfo, useConfig, useGetEnv, useMutation, useOrderlyContext, useDebouncedCallback, useAppStore, parseJSON, useChains, useTransferHistory, useChainInfo, useSymbolsInfo, useFundingFeeHistory, useSubAccountQuery, useApiKeyManager, useDistributionHistory, useVaultsHistory } from '@orderly.network/hooks';
+import { useLocalStorage, useAccount, useIndexPricesStream, useCollateral, usePrivateQuery, useStatisticsDaily, useUserStatistics, useBalanceTopic, useAssetsHistory, useFeeState, useMediaQuery, useAccountInfo, useWalletConnector, usePositionStream, useLeverage, useMaxWithdrawal, useGetClaimed, DistributionId, TWType, useCurEpochEstimate, useAllBrokers, noCacheConfig, useEpochInfo, useConfig, useGetEnv, useMutation, useOrderlyContext, useDebouncedCallback, useAppStore, parseJSON, useChains, useTransferHistory, useChainInfo, useBadgeBySymbol, useSymbolsInfo, useFundingFeeHistory, useSubAccountQuery, useApiKeyManager, useDistributionHistory, useVaultsHistory } from '@orderly.network/hooks';
 import { useAppContext, useDataTap, useCanTrade } from '@orderly.network/react-app';
 import { AccountStatusEnum, ChainNamespace, EMPTY_LIST, AssetHistoryStatusEnum, AssetHistorySideEnum } from '@orderly.network/types';
-import { registerSimpleSheet, registerSimpleDialog, Tabs, TabPanel, Flex, Text, modal, useModal, SimpleDialog, DataTable, SimpleSheet, TokenIcon, Divider, toast, useScreen, CardTitle, Select, Box, cn, Statistic, CopyIcon, Grid, formatAddress, DataFilter, Tooltip, InfoCircleIcon, Button, EmptyDataState, Card, Either, gradientTextVariants, EyeIcon, EyeCloseIcon, useOrderlyTheme, ArrowDownSquareFillIcon, ArrowLeftRightIcon, ArrowUpSquareFillIcon, ArrowRightShortIcon, CalendarMinusIcon, AffiliateIcon, ChevronRightIcon, TraderMobileIcon, SettingFillIcon, Switch, ChainIcon, capitalizeFirstLetter, usePagination, ListView, Badge, ArrowDownShortIcon, ScrollIndicator, PlusIcon, FeeTierIcon, ServerFillIcon, ArrowLeftRightSquareFill, VaultsIcon } from '@orderly.network/ui';
+import { registerSimpleSheet, registerSimpleDialog, Tabs, TabPanel, Flex, Text, modal, useModal, SimpleDialog, DataTable, SimpleSheet, TokenIcon, Divider, toast, useScreen, CardTitle, Select, Box, cn, Statistic, CopyIcon, Grid, formatAddress, DataFilter, Tooltip, InfoCircleIcon, Button, EmptyDataState, Card, Either, gradientTextVariants, EyeIcon, EyeCloseIcon, useOrderlyTheme, ArrowDownSquareFillIcon, ArrowLeftRightIcon, ArrowUpSquareFillIcon, ArrowRightShortIcon, CalendarMinusIcon, AffiliateIcon, ChevronRightIcon, TraderMobileIcon, SettingFillIcon, Switch, ChainIcon, capitalizeFirstLetter, usePagination, ListView, Badge, ArrowDownShortIcon, ScrollIndicator, PlusIcon, SymbolBadge as SymbolBadge$1, FeeTierIcon, ServerFillIcon, ArrowLeftRightSquareFill, VaultsIcon } from '@orderly.network/ui';
 import { LeverageWidgetWithDialogId } from '@orderly.network/ui-leverage';
 import { DepositAndWithdrawWithSheetId, DepositAndWithdrawWithDialogId, TransferSheetId, TransferDialogId, DepositStatusWidget } from '@orderly.network/ui-transfer';
 import { i18n, useTranslation, Trans } from '@orderly.network/i18n';
@@ -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';
@@ -838,9 +838,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 } = useBadgeBySymbol(
+        props.symbol
+      );
+      return /* @__PURE__ */ jsx(
+        Text.symbolBadge,
+        {
+          badge: brokerName ?? brokerId ?? void 0,
+          fullName: brokerNameRaw,
+          className: "oui-cursor-pointer",
+          showIcon: true,
+          children: props.symbol
+        }
+      );
+    };
     useFundingHistoryColumns = () => {
       const { t } = useTranslation();
       const columns = useMemo(() => {
@@ -849,10 +864,7 @@ var init_column2 = __esm({
             title: t("common.symbol"),
             dataIndex: "symbol",
             width: 80,
-            rule: "symbol",
-            textProps: {
-              showIcon: true
-            }
+            render: (value) => /* @__PURE__ */ jsx(SymbolBadge, { symbol: value })
           },
           {
             title: t("common.time"),
@@ -980,9 +992,22 @@ var init_fundingHistory_ui = __esm({
     };
   }
 });
+var SymbolBadge2;
+var init_symbolBadge = __esm({
+  "src/pages/overview/funding/symbolBadge.tsx"() {
+    SymbolBadge2 = (props) => {
+      const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(
+        props.symbol
+      );
+      const badge = brokerName ?? brokerId ?? void 0;
+      return /* @__PURE__ */ jsx(SymbolBadge$1, { 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 = useSymbolsInfo();
@@ -1019,11 +1044,16 @@ var init_fundingHistory_ui_mobile = __esm({
                   Text.formatted,
                   {
                     rule: "symbol",
+                    formatString: "base",
                     className: "oui-text-base-contrast oui-mr-1 oui-text-sm",
+                    suffix: /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 1, children: [
+                      " ",
+                      /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: switchPaymentType(item.payment_type) }),
+                      /* @__PURE__ */ jsx(SymbolBadge2, { symbol: item.symbol })
+                    ] }),
                     children: item.symbol
                   }
                 ),
-                /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: switchPaymentType(item.payment_type) }),
                 /* @__PURE__ */ jsx(
                   Text.formatted,
                   {
@@ -4108,7 +4138,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 +4295,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 +4354,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 +4412,8 @@ var init_useAssetHistory = __esm({
         // calculatedData,
         aggregateValue,
         createFakeData,
-        volumeUpdateDate: data?.[data.length - 1]?.date ?? ""
+        volumeUpdateDate: data?.[data.length - 1]?.date ?? "",
+        todayPerformance
       };
     };
   }
@@ -4472,7 +4523,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 +5128,7 @@ var init_apiManager_script = __esm({
             hideCreateDialog();
             setGenerateKey({
               key,
-              screctKey: secretKey,
+              secretKey,
               ip,
               permissions: scope?.split(",")?.map((e) => capitalizeFirstChar(e)).join(", ")
             });
@@ -5498,7 +5549,7 @@ var init_createdApiKey = __esm({
                   copyIconSize: 16,
                   className: "oui-break-all",
                   onCopy: props.onCopyApiSecretKey,
-                  children: props.generateKey?.screctKey
+                  children: props.generateKey?.secretKey
                 }
               ),
               " "
@@ -5942,18 +5993,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 +6813,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 +6825,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 +6836,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 +6852,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 +6931,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" })
+            ]
+          }
+        ) })
       ]
     }
   );