@orderly.network/portfolio 2.10.1 → 2.10.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, 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, 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, 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, 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, AreaChart, Area, AssetAreaChart } from '@orderly.network/chart';
+import { AssetLineChart, PnLBarChart, PnlAreaChart, VolBarChart, VolumeAreaChart, 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';
@@ -2428,7 +2428,7 @@ var init_assets_ui_desktop = __esm({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          className: "oui-bg-transparent oui-p-0",
+          className: "oui-bg-transparent oui-p-0 oui-border-none oui-shadow-none",
           classNames: { content: "!oui-pt-0" },
           children: /* @__PURE__ */ jsxs(
             Tabs,
@@ -4106,6 +4106,11 @@ var init_useAssetHistory = __esm({
           ignoreAggregation: true
         }
       );
+      const [userStatistics] = useUserStatistics();
+      const todayVolume = useMemo(
+        () => userStatistics?.perp_trading_volume_last_24_hours ?? 0,
+        [userStatistics]
+      );
       const lastBalanceEventRef = useRef(0);
       const refreshTransferHistory = useCallback(() => {
         const now = Date.now();
@@ -4254,12 +4259,12 @@ var init_useAssetHistory = __esm({
         value = value.sub(inputs.transferHistory.IN).add(inputs.transferHistory.OUT);
         return value.toNumber();
       };
-      const calculate = (data2, totalValue2, totalTransferIn2, totalTransferOut2) => {
+      const calculate = (data2, totalValue2, totalTransferIn2, totalTransferOut2, todayVol) => {
         const lastItem2 = data2[data2.length - 1];
         return {
           ...lastItem2,
           date: getUTCStr(today),
-          perp_volume: 0,
+          perp_volume: todayVol,
           account_value: totalValue2 !== null ? totalValue2 : lastItem2?.account_value ?? 0,
           pnl: calculateLastPnl({
             lastItem: lastItem2,
@@ -4272,7 +4277,7 @@ var init_useAssetHistory = __esm({
           __isCalculated: true
         };
       };
-      const mergeData = (data2, totalValue2, totalTransferIn2, totalTransferOut2) => {
+      const mergeData = (data2, totalValue2, totalTransferIn2, totalTransferOut2, todayVol) => {
         if (!Array.isArray(data2) || data2.length === 0) {
           return data2;
         }
@@ -4280,11 +4285,17 @@ var init_useAssetHistory = __esm({
           return data2;
         }
         return data2.concat([
-          calculate(data2, totalValue2, totalTransferIn2, totalTransferOut2)
+          calculate(data2, totalValue2, totalTransferIn2, totalTransferOut2, todayVol)
         ]);
       };
-      const calculateData = (data2, realtime, totalValue2, totalTransferIn2, totalTransferOut2) => {
-        const _data = !realtime ? data2 : mergeData(data2, totalValue2, totalTransferIn2, totalTransferOut2);
+      const calculateData = (data2, realtime, totalValue2, totalTransferIn2, totalTransferOut2, todayVol) => {
+        const _data = !realtime ? data2 : mergeData(
+          data2,
+          totalValue2,
+          totalTransferIn2,
+          totalTransferOut2,
+          todayVol
+        );
         return _data.slice(Math.max(0, _data.length - periodValue));
       };
       const calculatedData = useMemo(() => {
@@ -4299,7 +4310,8 @@ var init_useAssetHistory = __esm({
           isRealtime,
           totalValue,
           totalTransferIn,
-          totalTransferOut
+          totalTransferOut,
+          todayVolume
         );
       }, [
         data,
@@ -4307,10 +4319,9 @@ var init_useAssetHistory = __esm({
         assetHistory,
         isRealtime,
         getIndexPrice,
-        // transferOutHistory,
-        // transferInHistory,
         totalTransferIn,
-        totalTransferOut
+        totalTransferOut,
+        todayVolume
       ]);
       const aggregateValue = useMemo(() => {
         let vol = zero;
@@ -4318,6 +4329,7 @@ var init_useAssetHistory = __esm({
         let roi = zero;
         if (Array.isArray(calculatedData) && calculatedData.length) {
           calculatedData.forEach((d) => {
+            vol = vol.add(d.perp_volume ?? 0);
             pnl = pnl.add(d.pnl);
           });
           const tail = calculatedData[0];
@@ -4331,22 +4343,8 @@ var init_useAssetHistory = __esm({
             );
           }
         }
-        if (data.length > 0) {
-          for (let i = 0; i < periodValue; i++) {
-            const item = data[data.length - 1 - i];
-            if (item) {
-              vol = vol.add(item.perp_volume ?? 0);
-            }
-          }
-        }
         return { vol: vol.toNumber(), pnl: pnl.toNumber(), roi: roi.toNumber() };
-      }, [
-        calculatedData,
-        data,
-        periodValue,
-        totalTransferInForROI,
-        totalDepositForROI
-      ]);
+      }, [calculatedData, data, totalTransferInForROI, totalDepositForROI]);
       const createFakeData = (start, end) => {
         return Array.from({ length: 2 }, (_, i) => {
           const date = format(i === 0 ? startDate : /* @__PURE__ */ new Date(), "yyyy-MM-dd");
@@ -4463,7 +4461,7 @@ var init_assetChart = __esm({
     init_assetsChart_ui();
   }
 });
-var LazyPeriodTitle2, PerformanceUI, LabelWithHint, PerformancePnL, CumulativePnlChart;
+var LazyPeriodTitle2, formatForChart, PerformanceUI, LabelWithHint, PerformancePnL, CumulativePnlChart, DailyVolumeChart, CumulativeVolumeChart;
 var init_performance_ui = __esm({
   "src/pages/overview/performance/performance.ui.tsx"() {
     LazyPeriodTitle2 = React12.lazy(
@@ -4471,6 +4469,11 @@ var init_performance_ui = __esm({
         return { default: mod.PeriodTitle };
       })
     );
+    formatForChart = (value, dp = 2) => {
+      if (value == null) return 0;
+      const decimal = new Decimal(value);
+      return Number(decimal.toFixed(dp, Decimal.ROUND_DOWN));
+    };
     PerformanceUI = (props) => {
       const {
         periodTypes,
@@ -4604,6 +4607,22 @@ var init_performance_ui = __esm({
                   invisible: props.invisible || (props.data?.length ?? 0) <= 2
                 }
               )
+            ] }),
+            /* @__PURE__ */ jsxs(Grid, { cols: 2, gap: 4, children: [
+              /* @__PURE__ */ jsx(
+                DailyVolumeChart,
+                {
+                  data: props.data ?? EMPTY_LIST,
+                  invisible: props.invisible
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CumulativeVolumeChart,
+                {
+                  data: props.data ?? EMPTY_LIST,
+                  invisible: props.invisible || (props.data?.length ?? 0) <= 2
+                }
+              )
             ] })
           ]
         }
@@ -4635,13 +4654,20 @@ var init_performance_ui = __esm({
     };
     PerformancePnL = (props) => {
       const { t } = useTranslation();
+      const chartData = React12.useMemo(
+        () => (props.data ?? []).map((d) => ({
+          ...d,
+          pnl: formatForChart(d.pnl)
+        })),
+        [props.data]
+      );
       return /* @__PURE__ */ jsxs(Box, { mt: 4, height: "188px", children: [
         /* @__PURE__ */ jsx(Text, { as: "div", size: "sm", className: "oui-mb-3", children: t("portfolio.overview.performance.dailyPnl") }),
         /* @__PURE__ */ jsx(Box, { r: "md", className: "oui-h-[188px] oui-border oui-border-line-4", children: /* @__PURE__ */ jsx(
           PnLBarChart,
           {
-            data: props.data,
-            invisible: props.invisible || (props.data?.length ?? 0) <= 2
+            data: chartData,
+            invisible: props.invisible || (chartData?.length ?? 0) <= 2
           }
         ) })
       ] });
@@ -4659,6 +4685,43 @@ var init_performance_ui = __esm({
         ) })
       ] });
     };
+    DailyVolumeChart = (props) => {
+      const { t } = useTranslation();
+      const volumeData = React12.useMemo(
+        () => (props.data ?? []).map((d) => ({
+          ...d,
+          volume: formatForChart(d.perp_volume ?? 0)
+        })),
+        [props.data]
+      );
+      return /* @__PURE__ */ jsxs(Box, { mt: 4, height: "188px", children: [
+        /* @__PURE__ */ jsx(Text, { as: "div", size: "sm", className: "oui-mb-3", children: t("portfolio.overview.performance.dailyVolume") }),
+        /* @__PURE__ */ jsx(Box, { r: "md", className: "oui-h-[188px] oui-border oui-border-line-4", children: /* @__PURE__ */ jsx(
+          VolBarChart,
+          {
+            data: volumeData,
+            invisible: props.invisible || volumeData.length <= 2,
+            responsiveContainerProps: {
+              width: "100%",
+              height: 188
+            }
+          }
+        ) })
+      ] });
+    };
+    CumulativeVolumeChart = (props) => {
+      const { t } = useTranslation();
+      return /* @__PURE__ */ jsxs(Box, { mt: 4, children: [
+        /* @__PURE__ */ jsx(Text, { as: "div", size: "sm", className: "oui-mb-3", children: t("portfolio.overview.performance.cumulativeVolume") }),
+        /* @__PURE__ */ jsx(Box, { r: "md", className: "oui-h-[188px] oui-border oui-border-line-4", children: /* @__PURE__ */ jsx(
+          VolumeAreaChart,
+          {
+            data: props.data ?? EMPTY_LIST,
+            invisible: props.invisible || (props.data?.length ?? 0) <= 2
+          }
+        ) })
+      ] });
+    };
   }
 });
 
@@ -5316,8 +5379,7 @@ var init_createApiKey = __esm({
                     fillRule: "evenodd",
                     clipRule: "evenodd",
                     d: "M6.99072 2.92981C4.78172 2.92981 2.99072 4.72071 2.99072 6.92981V16.9298C2.99072 19.1389 4.78172 20.9298 6.99072 20.9298H16.9907C19.1997 20.9298 20.9907 19.1389 20.9907 16.9298V6.92981C20.9907 4.72071 19.1997 2.92981 16.9907 2.92981H6.99072ZM16.9853 7.31211C17.2125 7.09537 17.5236 7 17.8218 7C18.1201 7 18.4312 7.09537 18.6584 7.31211C19.1139 7.74546 19.1139 8.47384 18.6584 8.9072L10.5077 16.675C10.0534 17.1083 9.28909 17.1083 8.83472 16.675L5.34077 13.3459C4.88641 12.9126 4.88641 12.1841 5.34077 11.7508C5.79631 11.3175 6.56057 11.3175 7.01493 11.7508L9.67122 14.2822L16.9853 7.31211Z",
-                    fill: "white",
-                    fillOpacity: "0.54"
+                    className: "oui-fill-base-contrast-54"
                   }
                 )
               }
@@ -5333,8 +5395,7 @@ var init_createApiKey = __esm({
                   "path",
                   {
                     d: "M6.99072 2.92981C4.78172 2.92981 2.99072 4.72071 2.99072 6.92981V16.9298C2.99072 19.1389 4.78172 20.9298 6.99072 20.9298H16.9907C19.1997 20.9298 20.9907 19.1389 20.9907 16.9298V6.92981C20.9907 4.72071 19.1997 2.92981 16.9907 2.92981H6.99072ZM6.99072 4.92981H16.9907C18.0957 4.92981 18.9907 5.82521 18.9907 6.92981V16.9298C18.9907 18.0344 18.0957 18.9298 16.9907 18.9298H6.99072C5.88572 18.9298 4.99072 18.0344 4.99072 16.9298V6.92981C4.99072 5.82521 5.88572 4.92981 6.99072 4.92981Z",
-                    fill: "white",
-                    fillOpacity: "0.54"
+                    className: "oui-fill-base-contrast-54"
                   }
                 )
               }
@@ -6391,6 +6452,13 @@ var PerformanceMobileUI = (props) => {
     { account_value: 0, pnl: 0 },
     { account_value: 500, pnl: 500 }
   );
+  const volumeData = React12.useMemo(
+    () => (mergedData ?? []).map((d) => ({
+      ...d,
+      volume: d.perp_volume ?? 0
+    })),
+    [mergedData]
+  );
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs(
       Tabs,
@@ -6524,6 +6592,38 @@ var PerformanceMobileUI = (props) => {
             }
           )
         }
+      ),
+      /* @__PURE__ */ jsx(
+        TabPanel,
+        {
+          value: "dailyVolume",
+          title: t("portfolio.overview.performance.dailyVolume"),
+          className: "oui-min-h-40",
+          children: /* @__PURE__ */ jsx(
+            VolBarChart,
+            {
+              data: volumeData,
+              invisible: invisible || (mergedData?.length ?? 0) <= 2,
+              responsiveContainerProps: responsiveProps
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TabPanel,
+        {
+          value: "cumulativeVolume",
+          title: t("portfolio.overview.performance.cumulativeVolume"),
+          className: "oui-min-h-40",
+          children: /* @__PURE__ */ jsx(
+            VolumeAreaChart,
+            {
+              data: mergedData,
+              invisible: invisible || (mergedData?.length ?? 0) <= 2,
+              responsiveContainerProps: responsiveProps
+            }
+          )
+        }
       )
     ] })
   ] });
@@ -6739,15 +6839,29 @@ var PortfolioChartsMobileUI = (props) => {
             direction: "column",
             children: /* @__PURE__ */ jsx(AreaChart, { data: data || EMPTY_LIST, width: 160, height: 52, 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", { stopColor: "#00B49E", offset: "0%", stopOpacity: 0.5 }),
-                /* @__PURE__ */ jsx("stop", { stopColor: "#00B49E", offset: "100%", stopOpacity: 0 })
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    stopColor: "rgb(var(--oui-color-success))",
+                    offset: "0%",
+                    stopOpacity: 0.5
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    stopColor: "rgb(var(--oui-color-success))",
+                    offset: "100%",
+                    stopOpacity: 0
+                  }
+                )
               ] }) }),
               /* @__PURE__ */ jsx(
                 Area,
                 {
                   type: "natural",
                   dataKey: "account_value",
-                  stroke: "rgb(41, 233, 169)",
+                  stroke: "rgb(var(--oui-color-trading-profit))",
                   strokeWidth: 1.5,
                   dot: false,
                   isAnimationActive: false,
@@ -6780,19 +6894,19 @@ var useCurrentStatus = () => {
   const statusText = {
     wrongNetwork: {
       description: t("connector.wrongNetwork.tooltip"),
-      rootClass: "oui-bg-[linear-gradient(15deg,#D25F00_0%,transparent_30%)]"
+      rootClass: "oui-bg-[linear-gradient(15deg,rgb(var(--oui-color-warning-darken))_0%,transparent_30%)]"
     },
     connectWallet: {
       description: t("connector.trade.connectWallet.tooltip"),
-      rootClass: "oui-bg-[linear-gradient(15deg,#27FDFE_0%,transparent_30%)]"
+      rootClass: "oui-bg-[linear-gradient(15deg,rgb(var(--oui-gradient-brand-start))_0%,transparent_30%)]"
     },
     notSignedIn: {
       description: t("connector.trade.createAccount.tooltip"),
-      rootClass: "oui-bg-[linear-gradient(15deg,#335FFC_0%,transparent_30%)]"
+      rootClass: "oui-bg-[linear-gradient(15deg,rgb(var(--oui-color-primary-darken))_0%,transparent_30%)]"
     },
     disabledTrading: {
       description: t("connector.trade.enableTrading.tooltip"),
-      rootClass: "oui-bg-[linear-gradient(15deg,#335FFC_0%,transparent_30%)]"
+      rootClass: "oui-bg-[linear-gradient(15deg,rgb(var(--oui-color-primary-darken))_0%,transparent_30%)]"
     },
     default: {
       description: "",
@@ -6870,7 +6984,7 @@ var EVMChains = () => {
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-left-[-9px] oui-flex oui-items-center oui-justify-center oui-gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "oui-flex oui-size-[18px] oui-items-center oui-justify-center oui-rounded-full oui-bg-[#282e3a]", children: /* @__PURE__ */ jsx(EVMChainPopover, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "oui-flex oui-size-[18px] oui-items-center oui-justify-center oui-rounded-full oui-bg-base-5", children: /* @__PURE__ */ jsx(EVMChainPopover, { children: /* @__PURE__ */ jsx(
         MoreIcon,
         {
           className: "oui-relative oui-z-10 oui-size-3 oui-text-base-contrast-54 hover:oui-text-base-contrast",
@@ -6941,9 +7055,9 @@ var ShowAccount = () => {
   const bgClass = useMemo(() => {
     let bg = "";
     if (currentNamespace == ChainNamespace.evm) {
-      bg = "oui-bg-[linear-gradient(15deg,#283BEE_-11%,transparent_30%,transparent_77%,#A53411_100%)]";
+      bg = "oui-bg-[linear-gradient(15deg,rgb(var(--oui-color-primary))_-11%,transparent_30%,transparent_77%,rgb(var(--oui-color-danger-darken))_100%)]";
     } else if (currentNamespace == ChainNamespace.solana) {
-      bg = "oui-bg-[linear-gradient(15deg,#7400D0_-11%,transparent_30%,transparent_77%,#009A7E_100%)]";
+      bg = "oui-bg-[linear-gradient(15deg,rgb(var(--oui-color-link))_-11%,transparent_30%,transparent_77%,rgb(var(--oui-color-success))_100%)]";
     }
     return bg;
   }, [currentNamespace]);
@@ -7185,13 +7299,13 @@ var PortfolioValueMobile = (props) => {
       p: 4,
       children: [
         /* @__PURE__ */ jsxs(Flex, { direction: "row", gapX: 1, itemAlign: "center", children: [
-          /* @__PURE__ */ jsx(Text, { className: "oui-text-sm oui-text-base-contrast-54", children: t("portfolio.overview.handle.title") }),
+          /* @__PURE__ */ jsx(Text, { className: "oui-text-sm oui-text-base-static-54", children: t("portfolio.overview.handle.title") }),
           /* @__PURE__ */ jsx(
             EyeIcon,
             {
               size: 16,
               className: cn(
-                props.canTrade ? "oui-text-base-contrast-54" : "oui-hidden"
+                props.canTrade ? "oui-text-base-static-54" : "oui-hidden"
               ),
               onClick: props.toggleVisible
             }
@@ -7209,11 +7323,11 @@ var PortfolioValueMobile = (props) => {
                 Text.numeral,
                 {
                   visible: props.visible,
-                  className: "oui-text-3xl oui-font-bold oui-text-base-contrast",
+                  className: "oui-text-3xl oui-font-bold oui-text-base-static",
                   children: props.portfolioValue ?? "--"
                 }
               ),
-              /* @__PURE__ */ jsx(Text, { className: "oui-text-base oui-font-bold oui-text-base-contrast-80", children: "USDC" })
+              /* @__PURE__ */ jsx(Text, { className: "oui-text-base oui-font-bold oui-text-base-static-80", children: "USDC" })
             ]
           }
         ),
@@ -7223,7 +7337,7 @@ var PortfolioValueMobile = (props) => {
             direction: "row",
             gapX: 1,
             itemAlign: "center",
-            className: "oui-text-sm oui-text-base-contrast",
+            className: "oui-text-sm oui-text-base-static",
             children: [
               /* @__PURE__ */ jsx(Text.pnl, { visible: props.visible, children: props.unrealPnL ?? "--" }),
               /* @__PURE__ */ jsx(
@@ -7247,7 +7361,14 @@ var PortfolioValueMobile = (props) => {
               href: "/portfolio/assets" /* Assets */,
               name: "Assets"
             }),
-            children: /* @__PURE__ */ jsx(ArrowRightShortIcon, { size: 18, color: "white", opacity: 0.54 })
+            children: /* @__PURE__ */ jsx(
+              ArrowRightShortIcon,
+              {
+                size: 18,
+                opacity: 0.99,
+                className: "oui-text-base-static"
+              }
+            )
           }
         )
       ]
@@ -7511,7 +7632,7 @@ var FeeTierTable = (props) => {
         return {
           "data-state": "active",
           className: cn(
-            "oui-pointer-events-none oui-h-[54px] oui-text-[rgba(0,0,0,0.88)] oui-gradient-brand"
+            "oui-pointer-events-none oui-h-[54px] oui-text-base-contrast-80 oui-gradient-brand"
           ),
           ...config.active
         };
@@ -8012,17 +8133,23 @@ __export(setting_exports, {
   SettingWidget: () => SettingWidget
 });
 var ORDERLY_ORDER_SOUND_ALERT_KEY = "orderly_order_sound_alert";
+var ORDERLY_ORDER_SOUND_OPTION_KEY = "orderly_order_sound_option";
 var ORDERLY_MWEB_ORDER_ENTRY_SIDE_MARKETS_LAYOUT = "orderly_mweb_order_entry_side_markets_layout";
 var useSettingScript = () => {
-  const { data, mutate: refresh } = useAccountInfo();
+  const { data } = useAccountInfo();
   const { wrongNetwork, disabledConnect } = useAppContext();
-  const [update, { isMutating }] = useMutation("/v1/client/maintenance_config");
+  const [update] = useMutation("/v1/client/maintenance_config");
   const [checked, setChecked] = useState(false);
   const { notification } = useOrderlyContext();
+  const { themes, currentThemeId, setCurrentThemeId } = useOrderlyTheme();
+  const soundOptions = notification?.orderFilled?.soundOptions;
+  const hasSoundOptions = Boolean(soundOptions && soundOptions.length > 0);
+  const defaultSoundValue = notification?.orderFilled?.defaultSoundValue ?? soundOptions?.[0]?.value;
   const [soundAlert, setSoundAlert] = useLocalStorage(
     ORDERLY_ORDER_SOUND_ALERT_KEY,
     notification?.orderFilled?.defaultOpen ?? false
   );
+  const [selectedSoundValue, setSelectedSoundValue] = useLocalStorage(ORDERLY_ORDER_SOUND_OPTION_KEY, defaultSoundValue ?? null);
   const [orderPanelLayout, setOrderPanelLayout] = useLocalStorage(
     ORDERLY_MWEB_ORDER_ENTRY_SIDE_MARKETS_LAYOUT,
     "right"
@@ -8056,12 +8183,139 @@ var useSettingScript = () => {
     soundAlert,
     setSoundAlert,
     hasOrderFilledMedia: Boolean(notification?.orderFilled?.media),
+    soundOptions,
+    hasSoundOptions,
+    selectedSoundValue,
+    setSelectedSoundValue,
     orderPanelLayout,
-    setOrderPanelLayout
+    setOrderPanelLayout,
+    themes,
+    currentThemeId,
+    setCurrentThemeId
   };
 };
+var SoundRadioButton = ({
+  sel,
+  label,
+  onCheckChange
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      onClick: (e) => {
+        onCheckChange();
+        e.stopPropagation();
+      },
+      gap: 1,
+      className: "oui-cursor-pointer",
+      children: [
+        sel ? /* @__PURE__ */ jsx(SoundSelIcon, { className: "oui-fill-base-contrast" }) : /* @__PURE__ */ jsx(SoundUnselIcon, { className: "oui-fill-base-contrast-54" }),
+        /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: sel ? 98 : 54, children: label })
+      ]
+    }
+  );
+};
+var SoundSelIcon = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3.333" })
+      ]
+    }
+  );
+};
+var SoundUnselIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: props.className,
+      children: /* @__PURE__ */ jsx("path", { d: "M8.01 1.333a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333m0 1.333a5.334 5.334 0 1 1-.001 10.667 5.334 5.334 0 0 1 0-10.667" })
+    }
+  );
+};
+var ThemeSettingCard = (props) => {
+  const { t } = useTranslation();
+  const { themes, currentThemeId, setCurrentThemeId, classNames } = props;
+  if (!themes || themes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: t("portfolio.setting.theme"),
+      id: "portfolio-theme-setting",
+      classNames: { root: classNames?.card },
+      children: /* @__PURE__ */ jsx(
+        Flex,
+        {
+          direction: "row",
+          gap: 4,
+          width: "100%",
+          itemAlign: "center",
+          className: cn(
+            "oui-border-t-2 oui-border-line-6 oui-font-semibold",
+            classNames?.content
+          ),
+          children: themes.length === 2 ? /* @__PURE__ */ jsx(Flex, { direction: "row", itemAlign: "center", gap: 2, children: themes.map((theme) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: theme.id === currentThemeId ? "contained" : "outlined",
+              size: "sm",
+              onClick: () => setCurrentThemeId?.(theme.id),
+              children: theme.displayName
+            },
+            theme.id
+          )) }) : /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+            Select.options,
+            {
+              value: currentThemeId,
+              onValueChange: (value) => {
+                setCurrentThemeId?.(value);
+              },
+              options: themes.map((theme) => ({
+                value: theme.id,
+                label: theme.displayName
+              })),
+              size: "sm",
+              testid: "oui-testid-setting-theme-select",
+              classNames: { trigger: "oui-min-w-[100px]" }
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
 var SettingDesktop = (props) => {
   const { t } = useTranslation();
+  const audioRef = useRef(null);
+  const playPreview = useCallback((media) => {
+    if (!media) return;
+    try {
+      if (!audioRef.current) {
+        audioRef.current = new Audio();
+      }
+      const audio = audioRef.current;
+      audio.pause();
+      audio.currentTime = 0;
+      audio.src = media;
+      void audio.play().catch(() => void 0);
+    } catch {
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Card,
@@ -8099,7 +8353,7 @@ var SettingDesktop = (props) => {
         )
       }
     ),
-    props.hasOrderFilledMedia && /* @__PURE__ */ jsx(
+    (props.hasOrderFilledMedia || props.hasSoundOptions) && /* @__PURE__ */ jsx(
       Card,
       {
         title: t("portfolio.setting.soundAlerts"),
@@ -8108,35 +8362,65 @@ var SettingDesktop = (props) => {
         children: /* @__PURE__ */ jsxs(
           Flex,
           {
-            direction: "row",
-            gap: 4,
+            direction: "column",
+            gap: 3,
             width: "100%",
-            itemAlign: "center",
             pt: 4,
+            itemAlign: "start",
             className: "oui-border-t-2 oui-border-line-6 oui-font-semibold",
             children: [
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  direction: "column",
-                  itemAlign: "start",
-                  className: "oui-flex-1",
-                  children: /* @__PURE__ */ jsx(Text, { intensity: 54, size: "sm", children: t("portfolio.setting.soundAlerts.description") })
-                }
-              ),
-              /* @__PURE__ */ jsx(AuthGuardTooltip, { align: "end", children: /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  checked: props.soundAlert,
-                  onCheckedChange: (checked) => props.setSoundAlert(checked),
-                  disabled: !props.canTouch,
-                  "data-testid": "oui-testid-setting-sound-switch-btn"
-                }
-              ) })
+              /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 4, width: "100%", itemAlign: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Flex,
+                  {
+                    direction: "column",
+                    itemAlign: "start",
+                    className: "oui-flex-1",
+                    children: /* @__PURE__ */ jsx(Text, { intensity: 54, size: "sm", children: t("portfolio.setting.soundAlerts.description") })
+                  }
+                ),
+                /* @__PURE__ */ jsx(AuthGuardTooltip, { align: "end", children: /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    checked: props.soundAlert,
+                    onCheckedChange: (checked) => props.setSoundAlert(checked),
+                    disabled: !props.canTouch,
+                    "data-testid": "oui-testid-setting-sound-switch-btn"
+                  }
+                ) })
+              ] }),
+              props.hasSoundOptions && props.soundOptions?.length && props.soundAlert && /* @__PURE__ */ jsx(AuthGuardTooltip, { align: "end", children: /* @__PURE__ */ jsx(Flex, { direction: "row", gap: 3, className: "oui-cursor-pointer", children: props.soundOptions.map((option) => {
+                const sel = props.selectedSoundValue === option.value;
+                return /* @__PURE__ */ jsx(
+                  SoundRadioButton,
+                  {
+                    sel,
+                    label: option.label,
+                    onCheckChange: () => {
+                      props.setSelectedSoundValue(option.value);
+                      props.setSoundAlert(Boolean(option.media));
+                      playPreview(option.media);
+                    }
+                  },
+                  option.value
+                );
+              }) }) })
             ]
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsx(
+      ThemeSettingCard,
+      {
+        themes: props.themes,
+        currentThemeId: props.currentThemeId,
+        setCurrentThemeId: props.setCurrentThemeId,
+        classNames: {
+          card: "oui-bg-base-9 oui-font-semibold oui-mt-3",
+          content: "oui-pt-4"
+        }
+      }
     )
   ] });
 };
@@ -8146,6 +8430,21 @@ var SettingMobile = (props) => {
   const onLanguageChange = () => {
     setOpen(true);
   };
+  const audioRef = useRef(null);
+  const playPreview = useCallback((media) => {
+    if (!media) return;
+    try {
+      if (!audioRef.current) {
+        audioRef.current = new Audio();
+      }
+      const audio = audioRef.current;
+      audio.pause();
+      audio.currentTime = 0;
+      audio.src = media;
+      void audio.play().catch(() => void 0);
+    } catch {
+    }
+  }, []);
   const renderItem = (position) => {
     const isSelected = props.orderPanelLayout === position;
     const handleClick = () => props.setOrderPanelLayout(position);
@@ -8290,7 +8589,7 @@ var SettingMobile = (props) => {
         )
       }
     ),
-    props.hasOrderFilledMedia && /* @__PURE__ */ jsx(
+    (props.hasOrderFilledMedia || props.hasSoundOptions) && /* @__PURE__ */ jsx(
       Card,
       {
         title: /* @__PURE__ */ jsx("div", { className: "oui-text-sm", children: t("portfolio.setting.soundAlerts") }),
@@ -8325,7 +8624,23 @@ var SettingMobile = (props) => {
                       disabled: !props.canTouch,
                       "data-testid": "oui-testid-setting-sound-switch-btn"
                     }
-                  ) })
+                  ) }),
+                  props.hasSoundOptions && props.soundOptions?.length && props.soundAlert && /* @__PURE__ */ jsx(Flex, { direction: "row", gap: 3, wrap: "wrap", children: props.soundOptions.map((option) => {
+                    const sel = props.selectedSoundValue === option.value;
+                    return /* @__PURE__ */ jsx(
+                      SoundRadioButton,
+                      {
+                        sel,
+                        label: option.label,
+                        onCheckChange: () => {
+                          props.setSelectedSoundValue(option.value);
+                          props.setSoundAlert(Boolean(option.media));
+                          playPreview(option.media);
+                        }
+                      },
+                      option.value
+                    );
+                  }) })
                 ]
               }
             )
@@ -8333,6 +8648,18 @@ var SettingMobile = (props) => {
         )
       }
     ),
+    /* @__PURE__ */ jsx(
+      ThemeSettingCard,
+      {
+        themes: props.themes,
+        currentThemeId: props.currentThemeId,
+        setCurrentThemeId: props.setCurrentThemeId,
+        classNames: {
+          card: "oui-mt-2 oui-bg-base-9 oui-font-semibold oui-p-3",
+          content: "oui-pt-3"
+        }
+      }
+    ),
     /* @__PURE__ */ jsx(
       Card,
       {
@@ -8365,10 +8692,11 @@ var EmptyBlockIcon = (props) => /* @__PURE__ */ jsx(
     width: "50",
     height: "80",
     viewBox: "0 0 50 80",
-    fill: "none",
+    fill: "currentColor",
+    className: "oui-fill-base-7",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
-    children: /* @__PURE__ */ jsx("rect", { width: "50", height: "80", rx: "2", fill: "#181C23" })
+    children: /* @__PURE__ */ jsx("rect", { width: "50", height: "80", rx: "2" })
   }
 );
 var OrderEntryStripIcon = (props) => /* @__PURE__ */ jsxs(
@@ -8381,10 +8709,40 @@ var OrderEntryStripIcon = (props) => /* @__PURE__ */ jsxs(
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [
-      /* @__PURE__ */ jsx("rect", { width: "50", height: "80", rx: "2", fill: "#181C23" }),
-      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "21", height: "11", rx: "2", fill: "#008676" }),
-      /* @__PURE__ */ jsx("rect", { x: "26", y: "3", width: "21", height: "11", rx: "2", fill: "#D92D6B" }),
-      /* @__PURE__ */ jsx("rect", { x: "3", y: "69", width: "44", height: "8", rx: "2", fill: "#008676" })
+      /* @__PURE__ */ jsx("rect", { width: "50", height: "80", rx: "2", fill: "rgb(var(--oui-color-base-7))" }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "3",
+          width: "21",
+          height: "11",
+          rx: "2",
+          fill: "rgb(var(--oui-color-success-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "26",
+          y: "3",
+          width: "21",
+          height: "11",
+          rx: "2",
+          fill: "rgb(var(--oui-color-danger-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "69",
+          width: "44",
+          height: "8",
+          rx: "2",
+          fill: "rgb(var(--oui-color-success-darken))"
+        }
+      )
     ]
   }
 );
@@ -8651,7 +9009,7 @@ init_assets_ui_desktop();
 // src/pages/assets/assetsPage/assets.ui.mobile.tsx
 init_assets_ui_desktop();
 var AccountTag = ({ name }) => {
-  return /* @__PURE__ */ jsx("div", { className: "oui-mt-2 oui-flex oui-h-[18px] oui-w-fit oui-items-center oui-rounded oui-bg-white/[0.06] oui-px-2 oui-text-2xs oui-font-semibold oui-text-base-contrast-36", children: name });
+  return /* @__PURE__ */ jsx("div", { className: "oui-mt-2 oui-flex oui-h-[18px] oui-w-fit oui-items-center oui-rounded oui-bg-base-contrast-6 oui-px-2 oui-text-2xs oui-font-semibold oui-text-base-contrast-36", children: name });
 };
 var AssetMobileItem = (props) => {
   const { item } = props;
@@ -8846,7 +9204,7 @@ var AssetMobileItem = (props) => {
             });
           },
           className: cn(
-            "oui-flex-1 oui-border-white/[0.36] oui-text-base-contrast-54"
+            "oui-flex-1 oui-border-base-contrast-36 oui-text-base-contrast-54"
           ),
           children: t("transfer.convert")
         }
@@ -8865,7 +9223,7 @@ var AssetMobileItem = (props) => {
             });
           },
           className: cn(
-            "oui-flex-1 oui-border-white/[0.36] oui-text-base-contrast-54"
+            "oui-flex-1 oui-border-base-contrast-36 oui-text-base-contrast-54"
           ),
           children: t("common.transfer")
         }