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

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import React6, { memo, createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import React6, { createContext, memo, useState, useRef, useCallback, useEffect, useMemo, createElement, useContext, isValidElement } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useSymbolsInfo, useMarkets, MarketsType, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useFundingRate, useMarketsStore, useFundingDetails, useSessionStorage, useFundingRateBySymbol, usePositionStream, isCurrentlyTrading } from '@orderly.network/hooks';
-import { Flex, TokenIcon, Text, Box, cn, Marquee, Checkbox, Divider, useEmblaCarousel, useScreen, Badge, Tooltip, CloseIcon, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, EmptyDataState, NewsFillIcon, modal, RwaIcon, GradientText, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
+import { useSymbolsInfo, useBadgeBySymbol, useMarkets, MarketsType, isCurrentlyTrading, useFundingRate, useFundingDetails, useFundingRateBySymbol, usePositionStream, useFundingRateHistory, useFundingRates, useQuery, useMarketsStream, useLocalStorage, useGetRwaSymbolInfo, useTickerStream, useMarketsStore, useSessionStorage, useMarketCategoriesConfig, useMarketList, useRwaSymbolsInfo, useConfig, useAllBrokers } from '@orderly.network/hooks';
 import { useTranslation, Trans, i18n } from '@orderly.network/i18n';
+import { injectable, Flex, TokenIcon, Text, SymbolBadge as SymbolBadge$1, Tooltip, Box, cn, Marquee, Checkbox, Divider, useScreen, WarningIcon, NewsFillIcon, CloseIcon, modal, GradientText, useEmblaCarousel, Badge, CheckedSquareFillIcon, CheckSquareEmptyIcon, Button, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, Input, CloseCircleFillIcon, PlusIcon, DataTable, usePagination, Tabs, TabPanel, EmptyDataState, RwaIcon, EmptyStateIcon, Picker, Select } from '@orderly.network/ui';
 import { Decimal, formatSymbol } from '@orderly.network/utils';
 import { pick } from 'ramda';
 import { LeftNavUI } from '@orderly.network/ui-scaffold';
@@ -21,7 +21,7 @@ var init_marketsProvider = __esm({
   "src/components/marketsProvider/index.tsx"() {
     MarketsContext = createContext({});
     MarketsProvider = (props) => {
-      const { symbol, comparisonProps, children, onSymbolChange } = props;
+      const { symbol, comparisonProps, children, onSymbolChange, tabs } = props;
       const [searchValue, setSearchValue] = useState("");
       const clearSearchValue = useCallback(() => {
         setSearchValue("");
@@ -33,9 +33,17 @@ var init_marketsProvider = __esm({
           clearSearchValue,
           symbol,
           onSymbolChange,
-          comparisonProps
+          comparisonProps,
+          tabs
         };
-      }, [searchValue, symbol, onSymbolChange, setSearchValue, comparisonProps]);
+      }, [
+        searchValue,
+        symbol,
+        onSymbolChange,
+        setSearchValue,
+        comparisonProps,
+        tabs
+      ]);
       return /* @__PURE__ */ jsx(MarketsContext.Provider, { value: memoizedValue, children });
     };
     useMarketsContext = () => {
@@ -43,14 +51,63 @@ var init_marketsProvider = __esm({
     };
   }
 });
+var RwaDotTooltip;
+var init_rwaDotTooltip = __esm({
+  "src/components/rwaDotTooltip.tsx"() {
+    RwaDotTooltip = ({ record }) => {
+      const { t } = useTranslation();
+      const isInTradingHours = isCurrentlyTrading(
+        record.rwaNextClose,
+        record.rwaStatus
+      );
+      if (!record.isRwa) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          content: /* @__PURE__ */ jsx(Text, { color: isInTradingHours ? "success" : "danger", children: isInTradingHours ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
+          children: /* @__PURE__ */ jsx(Box, { py: 2, px: 1, children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              width: 4,
+              height: 4,
+              r: "full",
+              className: isInTradingHours ? "oui-bg-success" : "oui-bg-danger"
+            }
+          ) })
+        }
+      );
+    };
+  }
+});
+var BrokerIdBadge, SymbolBadge;
+var init_symbolBadge = __esm({
+  "src/components/symbolBadge.tsx"() {
+    BrokerIdBadge = (props) => {
+      const { brokerId, brokerName, brokerNameRaw } = useBadgeBySymbol(
+        props.symbol
+      );
+      const badge = brokerName ?? brokerId ?? void 0;
+      return /* @__PURE__ */ jsx(SymbolBadge$1, { badge, fullName: brokerNameRaw });
+    };
+    SymbolBadge = BrokerIdBadge;
+  }
+});
 var SymbolDisplay;
 var init_symbolDisplay = __esm({
   "src/components/symbolDisplay.tsx"() {
+    init_rwaDotTooltip();
+    init_symbolBadge();
     SymbolDisplay = memo((props) => {
-      const { children, size = "xs", ...rest } = props;
+      const { children, size = "xs", showBadge = true, record, ...rest } = props;
       const symbol = children;
       const symbolsInfo = useSymbolsInfo();
       const displayName = symbolsInfo[symbol]("displayName");
+      const suffix = record?.isRwa || showBadge ? /* @__PURE__ */ jsxs(Flex, { gapX: 0, itemAlign: "center", children: [
+        record?.isRwa && /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
+        showBadge && /* @__PURE__ */ jsx(SymbolBadge, { symbol })
+      ] }) : null;
       if (displayName) {
         return /* @__PURE__ */ jsxs(Flex, { gapX: 1, className: props.className, children: [
           props.showIcon && /* @__PURE__ */ jsx(TokenIcon, { size, symbol }),
@@ -62,14 +119,25 @@ var init_symbolDisplay = __esm({
               className: "oui-whitespace-nowrap oui-break-normal",
               children: displayName
             }
-          )
+          ),
+          suffix
         ] });
       }
-      return /* @__PURE__ */ jsx(Text.formatted, { size: "xs", rule: "symbol", weight: "semibold", ...rest, children: symbol });
+      return /* @__PURE__ */ jsx(
+        Text.formatted,
+        {
+          size: "xs",
+          rule: "symbol",
+          weight: "semibold",
+          suffix,
+          ...rest,
+          children: symbol
+        }
+      );
     });
   }
 });
-var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
+var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
 var init_icons = __esm({
   "src/icons.tsx"() {
     EditIcon = (props) => /* @__PURE__ */ jsxs(
@@ -366,30 +434,6 @@ var init_icons = __esm({
         ]
       }
     );
-    ExpandIcon = (props) => /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
-      }
-    );
-    CollapseIcon = (props) => /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
-      }
-    );
     FilterIcon = (props) => /* @__PURE__ */ jsx(
       "svg",
       {
@@ -1076,6 +1120,101 @@ var init_marketsHeader_widget = __esm({
     };
   }
 });
+function createCommunityBrokerFilter(selected) {
+  return (data) => selected === "all" ? data?.filter((m) => Boolean(m?.broker_id)) : data?.filter((m) => m?.broker_id === selected);
+}
+function useCommunityTabs() {
+  const brokerId = useConfig("brokerId");
+  const [brokers] = useAllBrokers();
+  const [allMarkets] = useMarkets(MarketsType.ALL);
+  const lastSignatureRef = useRef("");
+  const lastValueRef = useRef([]);
+  return useMemo(() => {
+    const brokerIdSet = /* @__PURE__ */ new Set();
+    for (const m of allMarkets ?? []) {
+      const id = m?.broker_id;
+      if (typeof id === "string" && id.length) {
+        brokerIdSet.add(id);
+      }
+    }
+    const entries = Array.from(
+      brokerIdSet
+    ).map((id) => ({
+      id,
+      name: brokers?.[id]
+    }));
+    const sorted = entries.map(({ id, name }) => ({
+      id,
+      label: name ?? id,
+      sortKey: (name ?? id).toLowerCase()
+    })).sort((a, b) => a.sortKey.localeCompare(b.sortKey));
+    if (brokerId) {
+      const idx = sorted.findIndex((x) => x.id === brokerId);
+      if (idx > 0) {
+        const [cur] = sorted.splice(idx, 1);
+        sorted.unshift(cur);
+      }
+    }
+    const signature = sorted.map((x) => `${x.id}:${x.label}`).join("|");
+    if (signature === lastSignatureRef.current) {
+      return lastValueRef.current;
+    }
+    lastSignatureRef.current = signature;
+    lastValueRef.current = sorted;
+    return sorted;
+  }, [allMarkets, brokers, brokerId]);
+}
+var init_useCommunityTabs = __esm({
+  "src/hooks/useCommunityTabs.ts"() {
+  }
+});
+var CommunityBrokerTabs;
+var init_communityBrokerTabs_ui = __esm({
+  "src/components/communityBrokerTabs/communityBrokerTabs.ui.tsx"() {
+    init_useCommunityTabs();
+    CommunityBrokerTabs = (props) => {
+      const {
+        storageKey,
+        className,
+        classNames,
+        variant = "contained",
+        size = "sm",
+        showScrollIndicator,
+        allTitle,
+        renderPanel
+      } = props;
+      const { t } = useTranslation();
+      const [communitySubTab, setCommunitySubTab] = useLocalStorage(
+        storageKey,
+        "all"
+      );
+      const communityBrokerTabs = useCommunityTabs();
+      return /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          variant,
+          size,
+          value: communitySubTab,
+          onValueChange: setCommunitySubTab,
+          classNames,
+          className,
+          showScrollIndicator,
+          children: [
+            /* @__PURE__ */ jsx(TabPanel, { title: allTitle ?? t("common.all"), value: "all", children: renderPanel("all") }),
+            communityBrokerTabs.map((b) => /* @__PURE__ */ jsx(TabPanel, { title: b.label, value: b.id, children: renderPanel(b.id) }, b.id))
+          ]
+        }
+      );
+    };
+  }
+});
+
+// src/components/communityBrokerTabs/index.ts
+var init_communityBrokerTabs = __esm({
+  "src/components/communityBrokerTabs/index.ts"() {
+    init_communityBrokerTabs_ui();
+  }
+});
 var CollapseMarkets;
 var init_collapseMarkets = __esm({
   "src/components/collapseMarkets/index.tsx"() {
@@ -1176,6 +1315,7 @@ var init_collapseMarkets = __esm({
 var FavoritesDropdownMenu;
 var init_favoritesDropdownMenu_ui = __esm({
   "src/components/favoritesDropdownMenu/favoritesDropdownMenu.ui.tsx"() {
+    init_symbolBadge();
     FavoritesDropdownMenu = (props) => {
       const {
         symbol,
@@ -1287,9 +1427,10 @@ var init_favoritesDropdownMenu_ui = __esm({
             Text.formatted,
             {
               rule: "symbol",
-              formatString: "base-type",
+              formatString: "base",
               size: "base",
               showIcon: true,
+              suffix: /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
               children: symbol
             }
           )
@@ -1501,185 +1642,233 @@ var init_favoritesDropdownMenu = __esm({
     init_favoritesDropdownMenu_widget();
   }
 });
-var RwaDotTooltip;
-var init_rwaDotTooltip = __esm({
-  "src/components/rwaDotTooltip.tsx"() {
-    RwaDotTooltip = ({ record }) => {
-      const { t } = useTranslation();
-      const isInTradingHours = isCurrentlyTrading(
-        record.rwaNextClose,
-        record.rwaStatus
-      );
-      if (!record.isRwa) {
-        return null;
+function getSymbolColumn(favorite, isFavoriteList = false, options) {
+  return {
+    title: i18n.t("common.symbol"),
+    dataIndex: "symbol",
+    width: 150,
+    onSort: true,
+    render: (value, record) => {
+      let favoritesIcon;
+      if (!isFavoriteList) {
+        favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
+          Flex,
+          {
+            width: 12,
+            height: 12,
+            justify: "center",
+            itemAlign: "center",
+            className: "oui-mr-1 oui-cursor-pointer",
+            children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
+          }
+        ) });
       }
+      const stackLeverageInSecondRow = options?.stackLeverageInSecondRow;
+      return /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+        favoritesIcon,
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: stackLeverageInSecondRow ? "column" : "row",
+            itemAlign: stackLeverageInSecondRow ? "start" : "center",
+            gapY: stackLeverageInSecondRow ? 1 : void 0,
+            gapX: stackLeverageInSecondRow ? void 0 : 1,
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
+                /* @__PURE__ */ jsx(TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
+                /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", record, children: value })
+              ] }),
+              typeof record.leverage === "number" && /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
+                record.leverage,
+                "x"
+              ] })
+            ]
+          }
+        )
+      ] });
+    }
+  };
+}
+function getLastColumn() {
+  return {
+    title: i18n.t("markets.column.last"),
+    dataIndex: "24h_close",
+    align: "right",
+    onSort: true,
+    width: 100,
+    render: (value, record) => {
+      return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
+    }
+  };
+}
+function get24hPercentageColumn() {
+  return {
+    title: i18n.t("markets.column.24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    width: 80,
+    render: (value) => {
       return /* @__PURE__ */ jsx(
-        Tooltip,
+        Text.numeral,
         {
-          content: /* @__PURE__ */ jsx(Text, { color: isInTradingHours ? "success" : "danger", children: isInTradingHours ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
-          children: /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsx(
-            Box,
-            {
-              width: 4,
-              height: 4,
-              r: "full",
-              className: isInTradingHours ? "oui-bg-success" : "oui-bg-danger"
-            }
-          ) })
+          rule: "percentages",
+          coloring: true,
+          rm: Decimal.ROUND_DOWN,
+          showIdentifier: true,
+          size: "2xs",
+          children: value
         }
       );
-    };
-  }
-});
-var useSideMarketsColumns;
-var init_column = __esm({
-  "src/components/sideMarkets/column.tsx"() {
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
-      const { t } = useTranslation();
-      return [
+    }
+  };
+}
+function get24hVolOIColumn() {
+  return {
+    title: i18n.t("markets.column.24hVolOI"),
+    dataIndex: "24h_amount",
+    align: "right",
+    className: "oui-h-[36px]",
+    width: 100,
+    multiSort: {
+      fields: [
         {
-          title: `${t("markets.column.market")} / ${t("common.volume")}`,
-          dataIndex: "24h_amount",
-          multiSort: {
-            fields: [
-              {
-                sortKey: "symbol",
-                label: t("markets.column.market")
-              },
-              {
-                sortKey: "24h_amount",
-                label: t("common.volume")
-              }
-            ]
-          },
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            let favoritesIcon;
-            if (!isFavoriteList) {
-              favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  width: 12,
-                  height: 12,
-                  justify: "center",
-                  itemAlign: "center",
-                  className: "oui-mr-1 oui-cursor-pointer",
-                  children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-                }
-              ) });
-            }
-            return /* @__PURE__ */ jsxs(Flex, { children: [
-              favoritesIcon,
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
-                /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-                  /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
-                  /* @__PURE__ */ jsx(RwaDotTooltip, { record }),
-                  /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
-                    record.leverage,
-                    "x"
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Text.numeral,
-                  {
-                    intensity: 54,
-                    size: "2xs",
-                    rule: "human",
-                    dp: 2,
-                    rm: Decimal.ROUND_DOWN,
-                    children: value
-                  }
-                )
-              ] })
-            ] });
-          }
+          sortKey: "24h_amount",
+          label: i18n.t("markets.column.24hVol")
         },
         {
-          title: t("markets.column.price&Change"),
-          dataIndex: "change",
-          align: "right",
-          onSort: true,
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            const onDelSymbol = (e) => {
-              favorite.updateSymbolFavoriteState(
-                record,
-                favorite.selectedFavoriteTab,
-                true
-              );
-              e.stopPropagation();
-            };
-            const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
-            const actions = /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "oui-absolute oui-right-0 oui-top-[6.5px]",
-                  "oui-hidden group-hover:oui-block"
-                ),
-                children: /* @__PURE__ */ jsxs(
-                  Flex,
-                  {
-                    className: cn(
-                      "oui-inline-flex",
-                      "oui-bg-primary-darken oui-py-[6px]"
-                    ),
-                    r: "base",
-                    width: 52,
-                    justify: "center",
-                    itemAlign: "end",
-                    gapX: 2,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TopIcon,
-                        {
-                          className: iconCls,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            favorite.pinToTop(record);
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-                    ]
-                  }
-                )
-              }
-            );
-            return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
-              isFavoriteList && actions,
-              /* @__PURE__ */ jsxs(
-                Flex,
+          sortKey: "openInterest",
+          label: i18n.t("markets.column.OI")
+        }
+      ]
+    },
+    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+      /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, rm: Decimal.ROUND_DOWN, children: value }),
+      /* @__PURE__ */ jsx(
+        Text.numeral,
+        {
+          rule: "human",
+          dp: 2,
+          rm: Decimal.ROUND_DOWN,
+          size: "2xs",
+          intensity: 54,
+          children: record.openInterest
+        }
+      )
+    ] })
+  };
+}
+function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
+  return {
+    title: i18n.t("markets.column.last&24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    className: "oui-h-[36px]",
+    width: 100,
+    render: (value, record) => {
+      const onDelSymbol = (e) => {
+        favorite.updateSymbolFavoriteState(
+          record,
+          favorite.selectedFavoriteTab,
+          true
+        );
+        e.stopPropagation();
+      };
+      const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
+      const actions = /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "oui-absolute oui-right-0 oui-top-[6.5px]",
+            "oui-hidden group-hover:oui-block"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              className: cn(
+                "oui-inline-flex",
+                "oui-bg-primary-darken oui-py-[6px]"
+              ),
+              r: "base",
+              width: 52,
+              justify: "center",
+              itemAlign: "end",
+              gapX: 2,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TopIcon,
+                  {
+                    className: iconCls,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      favorite.pinToTop(record);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
+              ]
+            }
+          )
+        }
+      );
+      return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
+        isFavoriteList && actions,
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            justify: "end",
+            itemAlign: "end",
+            gapY: 1,
+            className: cn(isFavoriteList && "group-hover:oui-invisible"),
+            children: [
+              /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
+              /* @__PURE__ */ jsx(
+                Text.numeral,
                 {
-                  direction: "column",
-                  justify: "end",
-                  itemAlign: "end",
-                  gapY: 1,
-                  className: cn(isFavoriteList && "group-hover:oui-invisible"),
-                  children: [
-                    /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-                    /* @__PURE__ */ jsx(
-                      Text.numeral,
-                      {
-                        rule: "percentages",
-                        coloring: true,
-                        rm: Decimal.ROUND_DOWN,
-                        showIdentifier: true,
-                        size: "2xs",
-                        children: value
-                      }
-                    )
-                  ]
+                  rule: "percentages",
+                  coloring: true,
+                  rm: Decimal.ROUND_DOWN,
+                  showIdentifier: true,
+                  size: "2xs",
+                  children: value
                 }
               )
-            ] });
+            ]
           }
-        }
+        )
+      ] });
+    }
+  };
+}
+var init_column = __esm({
+  "src/components/shared/column.tsx"() {
+    init_icons();
+    init_icons();
+    init_favoritesDropdownMenu();
+    init_symbolDisplay();
+  }
+});
+
+// src/components/sideMarkets/column.tsx
+var useSideMarketsColumns;
+var init_column2 = __esm({
+  "src/components/sideMarkets/column.tsx"() {
+    init_column();
+    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
+      const symbolCol = getSymbolColumn(favorite, isFavoriteList, {
+        stackLeverageInSecondRow: true
+      });
+      const volOiCol = get24hVolOIColumn();
+      const lastPctCol = getLastAnd24hPercentageColumn(favorite, isFavoriteList);
+      return [
+        {
+          ...symbolCol,
+          width: 115
+        },
+        volOiCol,
+        lastPctCol
       ];
     };
   }
@@ -1689,7 +1878,7 @@ var init_marketsList_ui = __esm({
   "src/components/marketsList/marketsList.ui.tsx"() {
     init_collapseMarkets();
     init_marketsProvider();
-    init_column();
+    init_column2();
     MarketsList = (props) => {
       const {
         loading,
@@ -1750,7 +1939,7 @@ var init_marketsList_ui = __esm({
 });
 
 // src/type.ts
-var MarketsPageTab, MarketsTabName, FundingTabName;
+var MarketsPageTab, MarketsTabName, CommunitySubTabName, FundingTabName;
 var init_type = __esm({
   "src/type.ts"() {
     MarketsPageTab = /* @__PURE__ */ ((MarketsPageTab2) => {
@@ -1764,8 +1953,15 @@ var init_type = __esm({
       MarketsTabName2["All"] = "all";
       MarketsTabName2["Rwa"] = "rwa";
       MarketsTabName2["NewListing"] = "newListing";
+      MarketsTabName2["Community"] = "community";
       return MarketsTabName2;
     })(MarketsTabName || {});
+    CommunitySubTabName = /* @__PURE__ */ ((CommunitySubTabName2) => {
+      CommunitySubTabName2["All"] = "all";
+      CommunitySubTabName2["MyListings"] = "myListings";
+      CommunitySubTabName2["OtherListings"] = "otherListings";
+      return CommunitySubTabName2;
+    })(CommunitySubTabName || {});
     FundingTabName = /* @__PURE__ */ ((FundingTabName2) => {
       FundingTabName2["Overview"] = "overview";
       FundingTabName2["Comparison"] = "comparison";
@@ -1781,6 +1977,7 @@ var init_marketsList_script = __esm({
     init_marketsProvider();
     MarketsTypeMap = {
       ["all" /* All */]: MarketsType.ALL,
+      ["community" /* Community */]: MarketsType.COMMUNITY,
       ["rwa" /* Rwa */]: MarketsType.RWA,
       ["favorites" /* Favorites */]: MarketsType.FAVORITES,
       ["recent" /* Recent */]: MarketsType.RECENT,
@@ -1880,18 +2077,7 @@ var init_rwaTab = __esm({
     };
     RwaTab = () => {
       const { t } = useTranslation();
-      return /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
-        /* @__PURE__ */ jsx(Text, { children: t("common.rwa") }),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            r: "base",
-            px: 2,
-            className: "oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)]",
-            children: /* @__PURE__ */ jsx(GradientText, { color: "brand", children: t("common.new") })
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsx(Flex, { gap: 1, children: /* @__PURE__ */ jsx(Text, { children: t("common.rwa") }) });
     };
   }
 });
@@ -1953,231 +2139,6 @@ var init_searchInput = __esm({
     };
   }
 });
-function getSymbolColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.t("common.symbol"),
-    dataIndex: "symbol",
-    width: 150,
-    onSort: true,
-    render: (value, record) => {
-      let favoritesIcon;
-      if (!isFavoriteList) {
-        favoritesIcon = /* @__PURE__ */ jsx(FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsx(
-          Flex,
-          {
-            width: 12,
-            height: 12,
-            justify: "center",
-            itemAlign: "center",
-            className: "oui-mr-1 oui-cursor-pointer",
-            children: record.isFavorite ? /* @__PURE__ */ jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
-        favoritesIcon,
-        /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
-          /* @__PURE__ */ jsxs(Flex, { gapX: 1, itemAlign: "center", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
-            /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
-            /* @__PURE__ */ jsx(RwaDotTooltip, { record })
-          ] }),
-          /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
-            record.leverage,
-            "x"
-          ] })
-        ] })
-      ] });
-    }
-  };
-}
-function getLastColumn() {
-  return {
-    title: i18n.t("markets.column.last"),
-    dataIndex: "24h_close",
-    align: "right",
-    onSort: true,
-    width: 100,
-    render: (value, record) => {
-      return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
-    }
-  };
-}
-function get24hPercentageColumn() {
-  return {
-    title: i18n.t("markets.column.24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    width: 80,
-    render: (value) => {
-      return /* @__PURE__ */ jsx(
-        Text.numeral,
-        {
-          rule: "percentages",
-          coloring: true,
-          rm: Decimal.ROUND_DOWN,
-          showIdentifier: true,
-          size: "2xs",
-          children: value
-        }
-      );
-    }
-  };
-}
-function get24hVolOIColumn() {
-  return {
-    title: i18n.t("markets.column.24hVolOI"),
-    dataIndex: "24h_amount",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "24h_amount",
-          label: i18n.t("markets.column.24hVol")
-        },
-        {
-          sortKey: "openInterest",
-          label: i18n.t("markets.column.OI")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, rm: Decimal.ROUND_DOWN, children: value }),
-      /* @__PURE__ */ jsx(
-        Text.numeral,
-        {
-          rule: "human",
-          dp: 2,
-          rm: Decimal.ROUND_DOWN,
-          size: "2xs",
-          intensity: 54,
-          children: record.openInterest
-        }
-      )
-    ] })
-  };
-}
-function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.t("markets.column.last&24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    className: "oui-h-[36px]",
-    width: 100,
-    render: (value, record) => {
-      const onDelSymbol = (e) => {
-        favorite.updateSymbolFavoriteState(
-          record,
-          favorite.selectedFavoriteTab,
-          true
-        );
-        e.stopPropagation();
-      };
-      const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
-      const actions = /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "oui-absolute oui-right-0 oui-top-[6.5px]",
-            "oui-hidden group-hover:oui-block"
-          ),
-          children: /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              className: cn(
-                "oui-inline-flex",
-                "oui-bg-primary-darken oui-py-[6px]"
-              ),
-              r: "base",
-              width: 52,
-              justify: "center",
-              itemAlign: "end",
-              gapX: 2,
-              children: [
-                /* @__PURE__ */ jsx(
-                  TopIcon,
-                  {
-                    className: iconCls,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      favorite.pinToTop(record);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-              ]
-            }
-          )
-        }
-      );
-      return /* @__PURE__ */ jsxs("div", { className: "oui-relative", children: [
-        isFavoriteList && actions,
-        /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            direction: "column",
-            justify: "end",
-            itemAlign: "end",
-            gapY: 1,
-            className: cn(isFavoriteList && "group-hover:oui-invisible"),
-            children: [
-              /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-              /* @__PURE__ */ jsx(
-                Text.numeral,
-                {
-                  rule: "percentages",
-                  coloring: true,
-                  rm: Decimal.ROUND_DOWN,
-                  showIdentifier: true,
-                  size: "2xs",
-                  children: value
-                }
-              )
-            ]
-          }
-        )
-      ] });
-    }
-  };
-}
-function getMarkIndexColumn() {
-  return {
-    title: i18n.t("markets.column.mark&Index"),
-    dataIndex: "mark_price",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "mark_price",
-          label: i18n.t("markets.column.mark")
-        },
-        {
-          sortKey: "index_price",
-          label: i18n.t("markets.column.index")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value }),
-      /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, size: "2xs", intensity: 54, children: record.index_price })
-    ] })
-  };
-}
-var init_column2 = __esm({
-  "src/components/shared/column.tsx"() {
-    init_icons();
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-  }
-});
 var FavoritesEmpty;
 var init_favoritesEmpty = __esm({
   "src/components/favoritesEmpty/index.tsx"() {
@@ -2629,31 +2590,181 @@ var init_useFavoritesExtraProps = __esm({
     init_marketsProvider();
   }
 });
+function isBuiltInMarketTab(tab) {
+  return "type" in tab;
+}
+function isCustomMarketTab(tab) {
+  return "id" in tab;
+}
+function tabKey(tab, index) {
+  return isBuiltInMarketTab(tab) ? tab.type : tab.id || `category_${index}`;
+}
+function resolveIcon(icon) {
+  if (typeof icon === "string") {
+    return createElement("img", {
+      src: icon,
+      alt: "",
+      style: { width: 16, height: 16 }
+    });
+  }
+  return icon;
+}
+function resolveSuffix(suffix) {
+  if (typeof suffix === "undefined" || suffix === null) {
+    return void 0;
+  }
+  if (typeof suffix === "string") {
+    return /* @__PURE__ */ jsx("span", { className: "oui-ml-1 oui-inline-flex oui-items-center oui-rounded oui-bg-gradient-to-r oui-from-[rgb(var(--oui-gradient-brand-start)_/_0.12)] oui-to-[rgb(var(--oui-gradient-brand-end)_/_0.12)] oui-px-2", children: /* @__PURE__ */ jsx(GradientText, { color: "brand", children: suffix }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "oui-ml-1", children: suffix });
+}
+function composeTabTitle(label, options) {
+  const icon = options?.icon;
+  const suffix = resolveSuffix(options?.suffix);
+  const hasLabel = typeof label !== "undefined" && label !== null && label !== "";
+  if (!hasLabel) {
+    if (!icon) {
+      return suffix ?? null;
+    }
+    return suffix ? /* @__PURE__ */ jsxs("span", { className: "oui-inline-flex oui-items-center oui-gap-x-1", children: [
+      icon,
+      suffix
+    ] }) : icon;
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsxs("span", { className: "oui-inline-flex oui-items-center oui-gap-x-1", children: [
+      icon,
+      label,
+      suffix
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    suffix
+  ] });
+}
+function resolveTabTriggerIcon(tab, fallbackIcon) {
+  const resolvedIcon = typeof tab.icon !== "undefined" ? resolveIcon(tab.icon) : fallbackIcon;
+  return isValidElement(resolvedIcon) ? resolvedIcon : void 0;
+}
+function resolveTabTitle(tab, titleOverrides, rwaTitle) {
+  if (isBuiltInMarketTab(tab) && tab.type === "favorites") {
+    return /* @__PURE__ */ jsx(FavoritesIcon, {});
+  }
+  if (isBuiltInMarketTab(tab) && tab.type === "rwa") {
+    return rwaTitle;
+  }
+  if (isBuiltInMarketTab(tab) && titleOverrides[tab.type]) {
+    return tab.name ?? titleOverrides[tab.type];
+  }
+  return composeTabTitle(tab.name, {
+    icon: resolveIcon(tab.icon),
+    suffix: tab.suffix
+  });
+}
+function useBuiltInTitles() {
+  const { t } = useTranslation();
+  return useMemo(
+    () => Object.fromEntries(
+      Object.entries(BUILT_IN_TITLE_MAP).map(([key, i18nKey]) => [
+        key,
+        t(i18nKey)
+      ])
+    ),
+    [t]
+  );
+}
+function getCustomTabDataFilter(tab) {
+  if (!tab) return void 0;
+  return (data) => data.filter((item) => tab.match(item));
+}
+function useCustomTabDataFilters(tabs) {
+  return useMemo(() => {
+    if (!tabs) return {};
+    const result = {};
+    tabs.forEach((tab, i) => {
+      if (isCustomMarketTab(tab)) {
+        result[tabKey(tab, i)] = (data) => data.filter((item) => tab.match(item));
+      }
+    });
+    return result;
+  }, [tabs]);
+}
+var BUILT_IN_TITLE_MAP;
+var init_tabUtils = __esm({
+  "src/components/shared/tabUtils.tsx"() {
+    init_icons();
+    BUILT_IN_TITLE_MAP = {
+      community: "markets.community",
+      all: "common.all",
+      newListing: "markets.newListings",
+      recent: "markets.recent"
+    };
+  }
+});
 var MobileMarketsDataList;
 var init_marketsDataList_mobile_ui = __esm({
   "src/pages/home/marketsDataList/marketsDataList.mobile.ui.tsx"() {
+    init_communityBrokerTabs();
     init_marketsList();
+    init_marketsProvider();
     init_rwaTab();
     init_searchInput();
-    init_column2();
+    init_column();
     init_useFavoritesExtraProps();
+    init_tabUtils();
+    init_useCommunityTabs();
     init_icons();
     init_type();
     MobileMarketsDataList = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { t } = useTranslation();
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
       const getColumns = useCallback(
         (favorite, isFavoriteList = false) => {
           return [
-            getSymbolColumn(favorite, isFavoriteList),
+            getSymbolColumn(favorite, isFavoriteList, {
+              stackLeverageInSecondRow: true
+            }),
             get24hVolOIColumn(),
-            getLastAnd24hPercentageColumn(favorite, isFavoriteList),
-            getMarkIndexColumn()
+            getLastAnd24hPercentageColumn(favorite, isFavoriteList)
           ];
         },
         []
       );
       const { getFavoritesProps } = useFavoritesProps();
+      const builtInMeta = useMemo(
+        () => ({
+          favorites: {
+            title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
+            value: "favorites",
+            tabName: "favorites" /* Favorites */
+          },
+          community: {
+            title: t("markets.community"),
+            value: "community"
+          },
+          all: {
+            title: t("markets.allMarkets"),
+            icon: /* @__PURE__ */ jsx(AllMarketsIcon, {}),
+            value: "all",
+            tabName: "all" /* All */
+          },
+          rwa: {
+            title: /* @__PURE__ */ jsx(RwaIconTab, {}),
+            value: "rwa",
+            tabName: "rwa" /* Rwa */
+          },
+          newListing: {
+            title: t("markets.newListings"),
+            icon: /* @__PURE__ */ jsx(NewListingsIcon, {}),
+            value: "new",
+            tabName: "newListing" /* NewListing */
+          }
+        }),
+        [t]
+      );
       const renderTab = (type) => {
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -2680,7 +2791,20 @@ var init_marketsDataList_mobile_ui = __esm({
           )
         ] });
       };
-      return /* @__PURE__ */ jsx(Box, { id: "oui-markets-list", intensity: 900, py: 3, mt: 2, r: "2xl", children: /* @__PURE__ */ jsxs(
+      const renderCommunityList = (selected) => {
+        return /* @__PURE__ */ jsx(
+          MarketsListWidget,
+          {
+            type: "all" /* All */,
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */),
+            getColumns,
+            rowClassName: "!oui-h-[34px]",
+            dataFilter: createCommunityBrokerFilter(selected)
+          }
+        );
+      };
+      return /* @__PURE__ */ jsx(Box, { id: "oui-markets-list", intensity: 900, py: 3, mt: 2, r: "2xl", children: /* @__PURE__ */ jsx(
         Tabs,
         {
           variant: "contained",
@@ -2691,28 +2815,85 @@ var init_marketsDataList_mobile_ui = __esm({
             scrollIndicator: "oui-mx-3"
           },
           showScrollIndicator: true,
-          children: [
-            /* @__PURE__ */ jsx(TabPanel, { title: /* @__PURE__ */ jsx(FavoritesIcon, {}), value: "favorites", children: renderTab("favorites" /* Favorites */) }),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("markets.allMarkets"),
-                icon: /* @__PURE__ */ jsx(AllMarketsIcon, {}),
-                value: "all",
-                children: renderTab("all" /* All */)
-              }
-            ),
-            /* @__PURE__ */ jsx(TabPanel, { title: /* @__PURE__ */ jsx(RwaIconTab, {}), value: "rwa", children: renderTab("rwa" /* Rwa */) }),
-            /* @__PURE__ */ jsx(
+          children: tabs?.map((tab, index) => {
+            const key = tabKey(tab, index);
+            const isBuiltIn = isBuiltInMarketTab(tab);
+            const meta = isBuiltIn ? builtInMeta[tab.type] : void 0;
+            if (isBuiltIn && meta) {
+              const title = tab.type === "favorites" ? composeTabTitle(tab.name, {
+                icon: resolveTabTriggerIcon(tab, /* @__PURE__ */ jsx(FavoritesIcon, {})),
+                suffix: tab.suffix
+              }) : tab.type === "rwa" ? resolveTabTitle(tab, {}, /* @__PURE__ */ jsx(RwaIconTab, {})) : composeTabTitle(tab.name ?? meta.title, {
+                suffix: tab.suffix
+              });
+              return /* @__PURE__ */ jsx(
+                TabPanel,
+                {
+                  title,
+                  icon: tab.type === "favorites" || tab.type === "rwa" ? void 0 : resolveTabTriggerIcon(tab, meta.icon),
+                  value: meta.value,
+                  children: tab.type === "community" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      SearchInput,
+                      {
+                        classNames: {
+                          root: cn("oui-mx-3 oui-mb-4 oui-mt-5", "oui-mb-2")
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CommunityBrokerTabs,
+                      {
+                        storageKey: "orderly_mobile_markets_datalist_community_sel_sub_tab",
+                        size: "md",
+                        classNames: {
+                          tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
+                          tabsContent: "oui-h-full",
+                          scrollIndicator: "oui-mx-3"
+                        },
+                        className: "oui-mobileMarketsDataList-community-tabs",
+                        showScrollIndicator: true,
+                        renderPanel: renderCommunityList
+                      }
+                    )
+                  ] }) : renderTab(meta.tabName)
+                },
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxs(
               TabPanel,
               {
-                title: t("markets.newListings"),
-                icon: /* @__PURE__ */ jsx(NewListingsIcon, {}),
-                value: "new",
-                children: renderTab("newListing" /* NewListing */)
-              }
-            )
-          ]
+                title: composeTabTitle(tab.name ?? key, {
+                  icon: resolveTabTriggerIcon(tab),
+                  suffix: tab.suffix
+                }),
+                value: key,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SearchInput,
+                    {
+                      classNames: {
+                        root: cn("oui-mx-3 oui-mb-4 oui-mt-5", "oui-mb-2")
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    MarketsListWidget,
+                    {
+                      type: "all" /* All */,
+                      dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+                      initialSort: tabSort[key],
+                      onSort: onTabSort(key),
+                      getColumns,
+                      rowClassName: "!oui-h-[34px]"
+                    }
+                  )
+                ]
+              },
+              key
+            );
+          })
         }
       ) });
     };
@@ -2837,26 +3018,6 @@ var init_column3 = __esm({
               return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
             }
           },
-          {
-            title: t("markets.column.mark"),
-            dataIndex: "mark_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
-          {
-            title: t("markets.column.index"),
-            dataIndex: "index_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsx(Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
           {
             title: t("markets.column.24hChange"),
             dataIndex: "change",
@@ -3147,7 +3308,7 @@ var init_marketsListFull_script = __esm({
       rwa: MarketsType.RWA
     };
     useMarketsListFullScript = (options) => {
-      const { type = "all" } = options;
+      const { type = "all", dataFilter } = options;
       const [loading, setLoading] = useState(true);
       const { setPage, pagination } = usePagination({
         pageSize: 100
@@ -3156,9 +3317,10 @@ var init_marketsListFull_script = __esm({
       const { searchValue } = useMarketsContext();
       const { onSort, getSortedList, sort } = useSort(options.initialSort);
       const dataSource = useMemo(() => {
-        const searchList = searchBySymbol(data, searchValue, "base-type");
+        const filtered = typeof dataFilter === "function" ? dataFilter(data) : data;
+        const searchList = searchBySymbol(filtered, searchValue, "base-type");
         return getSortedList(searchList);
-      }, [data, getSortedList, searchValue]);
+      }, [data, dataFilter, getSortedList, searchValue]);
       useEffect(() => {
         setLoading(false);
       }, [data]);
@@ -3214,11 +3376,15 @@ var init_marketsListFull = __esm({
     init_marketsListFull_widget();
   }
 });
-var LazySearchInput, LazyFavoritesListFullWidget, LazyMarketsListFullWidget, MarketsDataList;
+var LazySearchInput, LazyFavoritesListFullWidget, LazyMarketsListFullWidget, DEFAULT_SORT, MarketsDataList;
 var init_marketsDataList_ui = __esm({
   "src/pages/home/marketsDataList/marketsDataList.ui.tsx"() {
+    init_communityBrokerTabs();
     init_favoritesEmpty();
+    init_marketsProvider();
     init_rwaTab();
+    init_tabUtils();
+    init_useCommunityTabs();
     init_icons();
     init_type();
     LazySearchInput = React6.lazy(
@@ -3236,10 +3402,53 @@ var init_marketsDataList_ui = __esm({
         return { default: mod.MarketsListFullWidget };
       })
     );
+    DEFAULT_SORT = { sortKey: "24h_amount", sortOrder: "desc" };
     MarketsDataList = (props) => {
       const { searchValue, activeTab, onTabChange } = props;
       const { t } = useTranslation();
-      return /* @__PURE__ */ jsx(Box, { id: "oui-markets-list", intensity: 900, p: 6, r: "2xl", children: /* @__PURE__ */ jsxs(
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
+      const builtInMeta = useMemo(
+        () => ({
+          favorites: {
+            title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
+            value: "favorites",
+            testid: "oui-testid-markets-favorites-tab",
+            initialSort: DEFAULT_SORT
+          },
+          community: {
+            title: t("markets.community"),
+            value: "community",
+            testid: "oui-testid-markets-community-tab",
+            initialSort: DEFAULT_SORT
+          },
+          all: {
+            title: t("markets.allMarkets"),
+            icon: /* @__PURE__ */ jsx(AllMarketsIcon, {}),
+            value: "all",
+            testid: "oui-testid-markets-all-tab",
+            listType: "all",
+            initialSort: DEFAULT_SORT
+          },
+          rwa: {
+            title: /* @__PURE__ */ jsx(RwaIconTab, {}),
+            value: "rwa",
+            testid: "oui-testid-markets-rwa-tab",
+            listType: "rwa",
+            initialSort: DEFAULT_SORT
+          },
+          newListing: {
+            title: t("markets.newListings"),
+            icon: /* @__PURE__ */ jsx(NewListingsIcon, {}),
+            value: "new",
+            testid: "oui-testid-markets-newListing-tab",
+            listType: "new",
+            initialSort: { sortKey: "created_time", sortOrder: "desc" }
+          }
+        }),
+        [t]
+      );
+      return /* @__PURE__ */ jsx(Box, { id: "oui-markets-list", intensity: 900, p: 6, r: "2xl", children: /* @__PURE__ */ jsx(
         Tabs,
         {
           variant: "contained",
@@ -3249,93 +3458,98 @@ var init_marketsDataList_ui = __esm({
           trailing: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazySearchInput, { classNames: { root: "oui-my-1 oui-w-[240px]" } }) }),
           classNames: {
             tabsList: "oui-tabs-markets-list",
-            tabsContent: "oui-tabs-markets-content"
+            tabsContent: "oui-tabs-markets-content",
+            scrollIndicator: "oui-mr-3"
           },
           className: "oui-markets-list-tabs",
-          children: [
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-favorites-trigger",
-                  content: "oui-tabs-favorites-content"
-                },
-                title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
-                value: "favorites",
-                testid: "oui-testid-markets-favorites-tab",
-                children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                  LazyFavoritesListFullWidget,
-                  {
-                    emptyView: !searchValue && /* @__PURE__ */ jsx(
-                      FavoritesEmpty,
-                      {
-                        onClick: () => onTabChange("all" /* All */)
-                      }
-                    )
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-all-trigger",
-                  content: "oui-tabs-all-content"
-                },
-                title: t("markets.allMarkets"),
-                icon: /* @__PURE__ */ jsx(AllMarketsIcon, {}),
-                value: "all",
-                testid: "oui-testid-markets-all-tab",
-                children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                  LazyMarketsListFullWidget,
-                  {
-                    type: "all",
-                    initialSort: { sortKey: "24h_amount", sortOrder: "desc" }
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-rwa-trigger",
-                  content: "oui-tabs-rwa-content"
+          showScrollIndicator: true,
+          children: tabs?.map((tab, index) => {
+            const key = tabKey(tab, index);
+            const isBuiltIn = isBuiltInMarketTab(tab);
+            const meta = isBuiltIn ? builtInMeta[tab.type] : void 0;
+            if (isBuiltIn && meta) {
+              const title = tab.type === "favorites" ? composeTabTitle(tab.name, {
+                icon: resolveTabTriggerIcon(tab, /* @__PURE__ */ jsx(FavoritesIcon, {})),
+                suffix: tab.suffix
+              }) : tab.type === "rwa" ? resolveTabTitle(tab, {}, /* @__PURE__ */ jsx(RwaIconTab, {})) : composeTabTitle(tab.name ?? meta.title, {
+                suffix: tab.suffix
+              });
+              return /* @__PURE__ */ jsx(
+                TabPanel,
+                {
+                  classNames: {
+                    trigger: `oui-tabs-${meta.value}-trigger`,
+                    content: `oui-tabs-${meta.value}-content`
+                  },
+                  title,
+                  icon: tab.type === "favorites" || tab.type === "rwa" ? void 0 : resolveTabTriggerIcon(tab, meta.icon),
+                  value: meta.value,
+                  testid: meta.testid,
+                  children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: tab.type === "favorites" ? /* @__PURE__ */ jsx(
+                    LazyFavoritesListFullWidget,
+                    {
+                      emptyView: !searchValue && /* @__PURE__ */ jsx(
+                        FavoritesEmpty,
+                        {
+                          onClick: () => onTabChange("all" /* All */)
+                        }
+                      )
+                    }
+                  ) : tab.type === "community" ? /* @__PURE__ */ jsx(
+                    CommunityBrokerTabs,
+                    {
+                      storageKey: "orderly_markets_datalist_community_sel_sub_tab",
+                      size: "md",
+                      classNames: {
+                        tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
+                        tabsContent: "oui-h-full"
+                      },
+                      className: "oui-marketsDataList-community-tabs",
+                      showScrollIndicator: true,
+                      renderPanel: (selected) => /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                        LazyMarketsListFullWidget,
+                        {
+                          type: "all",
+                          initialSort: meta.initialSort,
+                          dataFilter: createCommunityBrokerFilter(selected)
+                        }
+                      ) })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    LazyMarketsListFullWidget,
+                    {
+                      type: meta.listType,
+                      initialSort: meta.initialSort
+                    }
+                  ) })
                 },
-                title: /* @__PURE__ */ jsx(RwaIconTab, {}),
-                value: "rwa",
-                testid: "oui-testid-markets-rwa-tab",
-                children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                  LazyMarketsListFullWidget,
-                  {
-                    type: "rwa",
-                    initialSort: { sortKey: "24h_amount", sortOrder: "desc" }
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
+                key
+              );
+            }
+            return /* @__PURE__ */ jsx(
               TabPanel,
               {
                 classNames: {
-                  trigger: "oui-tabs-newListings-trigger",
-                  content: "oui-tabs-newListings-content"
+                  trigger: `oui-tabs-${key}-trigger`,
+                  content: `oui-tabs-${key}-content`
                 },
-                title: t("markets.newListings"),
-                icon: /* @__PURE__ */ jsx(NewListingsIcon, {}),
-                value: "new",
-                testid: "oui-testid-markets-newListings-tab",
+                title: composeTabTitle(tab.name ?? key, {
+                  icon: resolveTabTriggerIcon(tab),
+                  suffix: tab.suffix
+                }),
+                value: key,
                 children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
                   LazyMarketsListFullWidget,
                   {
-                    type: "new",
-                    initialSort: { sortKey: "created_time", sortOrder: "desc" }
+                    type: "all",
+                    initialSort: DEFAULT_SORT,
+                    dataFilter: tabDataFilters[key]
                   }
                 ) })
-              }
-            )
-          ]
+              },
+              key
+            );
+          })
         }
       ) });
     };
@@ -3372,10 +3586,13 @@ var init_marketsDataList = __esm({
 var LazySearchInput2, LazyMarketsListWidget, cls, ExpandMarkets;
 var init_expandMarkets_ui = __esm({
   "src/components/expandMarkets/expandMarkets.ui.tsx"() {
-    init_icons();
+    init_useCommunityTabs();
     init_type();
+    init_communityBrokerTabs();
+    init_marketsProvider();
     init_rwaTab();
     init_useFavoritesExtraProps();
+    init_tabUtils();
     LazySearchInput2 = React6.lazy(
       () => Promise.resolve().then(() => (init_searchInput(), searchInput_exports)).then((mod) => {
         return { default: mod.SearchInput };
@@ -3386,28 +3603,31 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-[calc(100%_-_36px)]";
+    cls = "oui-h-full";
     ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
-      const { t } = useTranslation();
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
-      const renderTab = (type) => {
+      const builtInTitles = useBuiltInTitles();
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
+      const renderBuiltInContent = (type) => {
+        const tabType = type;
         return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyMarketsListWidget,
           {
-            type,
+            type: tabType,
             initialSort: tabSort[type],
-            onSort: onTabSort(type),
+            onSort: onTabSort(tabType),
             tableClassNames: {
               root: "oui-expandMarkets-list",
               scroll: cn(
                 "oui-px-1",
-                type === "favorites" /* Favorites */ ? "oui-pb-9" : "oui-pb-2"
+                tabType === "favorites" /* Favorites */ ? "oui-pb-9" : "oui-pb-2"
               )
             },
-            ...getFavoritesProps(type),
+            ...getFavoritesProps(tabType),
             emptyView: renderEmptyView({
-              type,
+              type: tabType,
               onClick: () => {
                 onTabChange("all" /* All */);
               }
@@ -3415,6 +3635,48 @@ var init_expandMarkets_ui = __esm({
           }
         ) }) });
       };
+      const renderCommunityContent = () => {
+        return /* @__PURE__ */ jsx(
+          CommunityBrokerTabs,
+          {
+            storageKey: "orderly_expand_markets_community_sel_sub_tab",
+            classNames: {
+              tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
+              tabsContent: "oui-h-full"
+            },
+            className: cn("oui-expandMarkets-community-tabs", cls),
+            showScrollIndicator: true,
+            renderPanel: (selected) => /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+              LazyMarketsListWidget,
+              {
+                type: "all" /* All */,
+                initialSort: tabSort["community" /* Community */],
+                onSort: onTabSort("community" /* Community */),
+                tableClassNames: {
+                  root: "oui-expandMarkets-list",
+                  scroll: cn("oui-px-1", "oui-pb-2")
+                },
+                dataFilter: createCommunityBrokerFilter(selected)
+              }
+            ) }) })
+          }
+        );
+      };
+      const renderCustomContent = (key) => {
+        return /* @__PURE__ */ jsx("div", { className: cls, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          LazyMarketsListWidget,
+          {
+            type: "all" /* All */,
+            dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+            initialSort: tabSort[key],
+            onSort: onTabSort(key),
+            tableClassNames: {
+              root: "oui-expandMarkets-list",
+              scroll: cn("oui-px-1", "oui-pb-2")
+            }
+          }
+        ) }) });
+      };
       return /* @__PURE__ */ jsxs(
         Box,
         {
@@ -3430,7 +3692,7 @@ var init_expandMarkets_ui = __esm({
                 classNames: { root: "oui-expandMarkets-search-input" }
               }
             ) }) }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               Tabs,
               {
                 variant: "contained",
@@ -3444,68 +3706,24 @@ var init_expandMarkets_ui = __esm({
                 },
                 className: cn("oui-expandMarkets-tabs", cls),
                 showScrollIndicator: true,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-favorites-trigger",
-                        content: "oui-tabs-favorites-content"
-                      },
-                      title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
-                      value: "favorites" /* Favorites */,
-                      children: renderTab("favorites" /* Favorites */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-all-trigger",
-                        content: "oui-tabs-all-content"
-                      },
-                      title: t("common.all"),
-                      value: "all" /* All */,
-                      children: renderTab("all" /* All */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-rwa-trigger",
-                        content: "oui-tabs-rwa-content"
-                      },
-                      title: /* @__PURE__ */ jsx(RwaTab, {}),
-                      value: "rwa" /* Rwa */,
-                      children: renderTab("rwa" /* Rwa */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-newListings-trigger",
-                        content: "oui-tabs-newListings-content"
-                      },
-                      title: t("markets.newListings"),
-                      value: "newListing" /* NewListing */,
-                      children: renderTab("newListing" /* NewListing */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
+                children: tabs?.map((tab, index) => {
+                  const key = tabKey(tab, index);
+                  const isBuiltIn = isBuiltInMarketTab(tab);
+                  const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+                  return /* @__PURE__ */ jsx(
                     TabPanel,
                     {
                       classNames: {
-                        trigger: "oui-tabs-recent-trigger",
-                        content: "oui-tabs-recent-content"
+                        trigger: `oui-tabs-${key}-trigger`,
+                        content: `oui-tabs-${key}-content`
                       },
-                      title: t("markets.recent"),
-                      value: "recent" /* Recent */,
-                      children: renderTab("recent" /* Recent */)
-                    }
-                  )
-                ]
+                      title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsx(RwaTab, {})),
+                      value: key,
+                      children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                    },
+                    key
+                  );
+                })
               }
             )
           ]
@@ -3562,10 +3780,94 @@ var init_expandMarkets_script = __esm({
     init_useTabSort();
   }
 });
+
+// src/registry/builtInTabRegistry.ts
+var builtInTabs, componentDefaultTabs;
+var init_builtInTabRegistry = __esm({
+  "src/registry/builtInTabRegistry.ts"() {
+    builtInTabs = {
+      favorites: { type: "favorites" },
+      community: {
+        type: "community",
+        isVisible: (symbolList) => {
+          return symbolList.some((m) => Boolean(m?.broker_id));
+        }
+      },
+      all: { type: "all" },
+      rwa: { type: "rwa" },
+      newListing: { type: "newListing" },
+      recent: { type: "recent" }
+    };
+    componentDefaultTabs = {
+      marketsSheet: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...builtInTabs.community }
+      ],
+      expandMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      dropDownMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      subMenuMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      marketsDataList: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...builtInTabs.community },
+        { type: "newListing" }
+      ],
+      horizontalMarkets: [
+        { type: "all" },
+        { type: "recent" },
+        { type: "newListing" },
+        { type: "favorites" }
+      ]
+    };
+  }
+});
+function useMarketCategories(componentKey) {
+  const marketTabs = useMarketCategoriesConfig();
+  const { i18n: i18n2 } = useTranslation();
+  const symbolList = useMarketList();
+  const rwaSymbolsInfo = useRwaSymbolsInfo();
+  return useMemo(() => {
+    const original = componentDefaultTabs[componentKey];
+    const resolved = marketTabs ? marketTabs(original, { componentKey, builtIn: builtInTabs }) : original;
+    return resolved.filter(
+      (tab) => tab.isVisible?.(symbolList, { rwaSymbolsInfo }) ?? true
+    );
+  }, [marketTabs, componentKey, i18n2.language, symbolList, rwaSymbolsInfo]);
+}
+var init_useMarketCategories = __esm({
+  "src/components/shared/hooks/useMarketCategories.ts"() {
+    init_builtInTabRegistry();
+  }
+});
 var ExpandMarketsWidget;
 var init_expandMarkets_widget = __esm({
   "src/components/expandMarkets/expandMarkets.widget.tsx"() {
     init_marketsProvider();
+    init_useMarketCategories();
     init_expandMarkets_script();
     init_expandMarkets_ui();
     ExpandMarketsWidget = (props) => {
@@ -3573,11 +3875,13 @@ var init_expandMarkets_widget = __esm({
         activeTab: props.activeTab,
         onTabChange: props.onTabChange
       });
+      const tabs = useMarketCategories("expandMarkets");
       return /* @__PURE__ */ jsx(
         MarketsProvider,
         {
           symbol: props.symbol,
           onSymbolChange: props.onSymbolChange,
+          tabs,
           children: /* @__PURE__ */ jsx(ExpandMarkets, { ...state })
         }
       );
@@ -3622,7 +3926,7 @@ var init_columns = __esm({
             title: t("markets.column.market"),
             dataIndex: "symbol",
             onSort: true,
-            width: 135,
+            width: 180,
             className: isMobile ? "oui-pl-0" : void 0,
             render: (value, record) => {
               if (isMobile) {
@@ -4012,7 +4316,7 @@ var init_columns2 = __esm({
           {
             title: t("markets.column.market"),
             dataIndex: "symbol",
-            width: 150,
+            width: 220,
             onSort: true,
             className: isMobile ? "oui-pl-0" : void 0,
             render: (value, record) => {
@@ -4263,53 +4567,17 @@ var init_fundingComparison = __esm({
 // src/components/sideMarkets/sideMarkets.ui.tsx
 var sideMarkets_ui_exports = {};
 __export(sideMarkets_ui_exports, {
-  SideMarkets: () => SideMarkets,
-  SideMarketsHeader: () => SideMarketsHeader
+  SideMarkets: () => SideMarkets
 });
-var SideMarketsHeader, SideMarkets;
+var SideMarkets;
 var init_sideMarkets_ui = __esm({
   "src/components/sideMarkets/sideMarkets.ui.tsx"() {
-    init_icons();
     init_expandMarkets();
     init_marketsList();
     init_marketsProvider();
     init_useFavoritesExtraProps();
-    SideMarketsHeader = (props) => {
-      const { resizeable, panelSize, onPanelSizeChange } = props;
-      const { t } = useTranslation();
-      const cls3 = cn(
-        "oui-text-base-contrast-36",
-        resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
-      );
-      return /* @__PURE__ */ jsxs(
-        Flex,
-        {
-          className: panelSize === "small" ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
-          justify: panelSize === "large" ? "between" : "center",
-          width: "100%",
-          px: 3,
-          children: [
-            panelSize === "large" && /* @__PURE__ */ jsx(Text, { size: "base", intensity: 80, children: t("common.markets") }),
-            panelSize === "large" && /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
-                children: /* @__PURE__ */ jsx(CollapseIcon, { className: cls3 })
-              }
-            ),
-            (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
-                children: /* @__PURE__ */ jsx(ExpandIcon, { className: cls3 })
-              }
-            )
-          ]
-        }
-      );
-    };
     SideMarkets = (props) => {
-      const { panelSize, activeTab, onTabChange, className, tabSort } = props;
+      const { activeTab, onTabChange, className, tabSort, panelSize } = props;
       const { symbol, onSymbolChange } = useMarketsContext();
       const { getFavoritesProps } = useFavoritesProps();
       const renderContent = () => {
@@ -4334,34 +4602,12 @@ var init_sideMarkets_ui = __esm({
           }
         );
       };
-      return /* @__PURE__ */ jsxs(
-        Flex,
+      return /* @__PURE__ */ jsx(
+        Box,
         {
-          id: "oui-side-markets",
-          className: cn("oui-relative oui-font-semibold", className),
-          direction: "column",
-          gapY: 5,
-          height: "100%",
           width: "100%",
-          children: [
-            /* @__PURE__ */ jsx(
-              SideMarketsHeader,
-              {
-                ...pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                width: "100%",
-                className: cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-[calc(100%_-_52px)]"
-                ),
-                children: renderContent()
-              }
-            )
-          ]
+          height: "100%",
+          children: renderContent()
         }
       );
     };
@@ -4371,7 +4617,7 @@ var useDropDownMarketsColumns;
 var init_column4 = __esm({
   "src/components/dropDownMarkets/column.tsx"() {
     init_icons();
-    init_column2();
+    init_column();
     useDropDownMarketsColumns = () => {
       const { t } = useTranslation();
       return useCallback(
@@ -4466,12 +4712,15 @@ var init_column4 = __esm({
 var DropDownMarkets, DropDownMarketsConetnt;
 var init_dropDownMarkets_ui = __esm({
   "src/components/dropDownMarkets/dropDownMarkets.ui.tsx"() {
-    init_icons();
+    init_useCommunityTabs();
     init_type();
+    init_communityBrokerTabs();
     init_marketsList();
+    init_marketsProvider();
     init_rwaTab();
     init_searchInput();
     init_useFavoritesExtraProps();
+    init_tabUtils();
     init_column4();
     DropDownMarkets = (props) => {
       return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open: props.open, onOpenChange: props.onOpenChange, children: [
@@ -4495,8 +4744,8 @@ var init_dropDownMarkets_ui = __esm({
     };
     DropDownMarketsConetnt = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
-      const { t } = useTranslation();
       const getColumns = useDropDownMarketsColumns();
+      const builtInTitles = useBuiltInTitles();
       const search = /* @__PURE__ */ jsxs(Flex, { className: "oui-dropDownMarkets-search", mx: 3, gapX: 3, pt: 3, pb: 2, children: [
         /* @__PURE__ */ jsx(
           SearchInput,
@@ -4518,22 +4767,24 @@ var init_dropDownMarkets_ui = __esm({
       ] });
       const cls3 = "oui-h-[calc(100%_-_36px)]";
       const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
-      const renderTab = (type) => {
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
+      const renderBuiltInContent = (tabType) => {
         return /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
           MarketsListWidget,
           {
-            type,
-            initialSort: tabSort[type],
-            onSort: onTabSort(type),
+            type: tabType,
+            initialSort: tabSort[tabType],
+            onSort: onTabSort(tabType),
             getColumns,
             tableClassNames: {
               root: cn("oui-dropDownMarkets-list", "!oui-bg-base-8"),
               scroll: "oui-pb-5 oui-px-1"
             },
             rowClassName: "!oui-h-[34px]",
-            ...getFavoritesProps(type),
+            ...getFavoritesProps(tabType),
             emptyView: renderEmptyView({
-              type,
+              type: tabType,
               onClick: () => {
                 onTabChange("all" /* All */);
               }
@@ -4541,6 +4792,52 @@ var init_dropDownMarkets_ui = __esm({
           }
         ) });
       };
+      const renderCommunityContent = () => {
+        return /* @__PURE__ */ jsx(
+          CommunityBrokerTabs,
+          {
+            storageKey: "orderly_dropdown_markets_community_sel_sub_tab",
+            classNames: {
+              tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
+              tabsContent: "oui-h-full"
+            },
+            className: cn("oui-dropDownMarkets-community-tabs", cls3),
+            showScrollIndicator: true,
+            renderPanel: (selected) => /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
+              MarketsListWidget,
+              {
+                type: "all" /* All */,
+                initialSort: tabSort["community" /* Community */],
+                onSort: onTabSort("community" /* Community */),
+                getColumns,
+                tableClassNames: {
+                  root: cn("oui-dropDownMarkets-list", "!oui-bg-base-8"),
+                  scroll: "oui-pb-5 oui-px-1"
+                },
+                rowClassName: "!oui-h-[34px]",
+                dataFilter: createCommunityBrokerFilter(selected)
+              }
+            ) })
+          }
+        );
+      };
+      const renderCustomContent = (key) => {
+        return /* @__PURE__ */ jsx("div", { className: cls3, children: /* @__PURE__ */ jsx(
+          MarketsListWidget,
+          {
+            type: "all" /* All */,
+            dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+            initialSort: tabSort[key],
+            onSort: onTabSort(key),
+            getColumns,
+            tableClassNames: {
+              root: cn("oui-dropDownMarkets-list", "!oui-bg-base-8"),
+              scroll: "oui-pb-5 oui-px-1"
+            },
+            rowClassName: "!oui-h-[34px]"
+          }
+        ) });
+      };
       return /* @__PURE__ */ jsxs(
         Box,
         {
@@ -4552,7 +4849,7 @@ var init_dropDownMarkets_ui = __esm({
           intensity: 800,
           children: [
             search,
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               Tabs,
               {
                 variant: "contained",
@@ -4560,72 +4857,31 @@ var init_dropDownMarkets_ui = __esm({
                 value: activeTab,
                 onValueChange: onTabChange,
                 classNames: {
-                  tabsList: "oui-my-[6px] oui-px-3",
-                  tabsContent: "oui-h-full"
+                  tabsListContainer: "oui-px-3",
+                  tabsList: "oui-my-[6px]",
+                  tabsContent: "oui-h-full",
+                  scrollIndicator: "oui-mx-0"
                 },
                 className: cn("oui-dropDownMarkets-tabs", cls3),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-favorites-trigger",
-                        content: "oui-tabs-favorites-content"
-                      },
-                      title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
-                      value: "favorites" /* Favorites */,
-                      children: renderTab("favorites" /* Favorites */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-all-trigger",
-                        content: "oui-tabs-all-content"
-                      },
-                      title: t("common.all"),
-                      value: "all" /* All */,
-                      children: renderTab("all" /* All */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-rwa-trigger",
-                        content: "oui-tabs-rwa-content"
-                      },
-                      title: /* @__PURE__ */ jsx(RwaTab, {}),
-                      value: "rwa" /* Rwa */,
-                      children: renderTab("rwa" /* Rwa */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-newListings-trigger",
-                        content: "oui-tabs-newListings-content"
-                      },
-                      title: t("markets.newListings"),
-                      value: "newListing" /* NewListing */,
-                      children: renderTab("newListing" /* NewListing */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
+                showScrollIndicator: true,
+                children: tabs?.map((tab, index) => {
+                  const key = tabKey(tab, index);
+                  const isBuiltIn = isBuiltInMarketTab(tab);
+                  const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+                  return /* @__PURE__ */ jsx(
                     TabPanel,
                     {
                       classNames: {
-                        trigger: "oui-tabs-recent-trigger",
-                        content: "oui-tabs-recent-content"
+                        trigger: `oui-tabs-${key}-trigger`,
+                        content: `oui-tabs-${key}-content`
                       },
-                      title: t("markets.recent"),
-                      value: "recent" /* Recent */,
-                      children: renderTab("recent" /* Recent */)
-                    }
-                  )
-                ]
+                      title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsx(RwaTab, {})),
+                      value: key,
+                      children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                    },
+                    key
+                  );
+                })
               }
             )
           ]
@@ -4674,15 +4930,18 @@ var DropDownMarketsWidget;
 var init_dropDownMarkets_widget = __esm({
   "src/components/dropDownMarkets/dropDownMarkets.widget.tsx"() {
     init_marketsProvider();
+    init_useMarketCategories();
     init_dropDownMarkets_script();
     init_dropDownMarkets_ui();
     DropDownMarketsWidget = (props) => {
       const state = useDropDownMarketsScript();
+      const tabs = useMarketCategories("dropDownMarkets");
       return /* @__PURE__ */ jsx(
         MarketsProvider,
         {
           symbol: props.symbol,
           onSymbolChange: props.onSymbolChange,
+          tabs,
           children: /* @__PURE__ */ jsx(DropDownMarkets, { ...state, contentClassName: props.contentClassName, children: props.children })
         }
       );
@@ -4823,26 +5082,47 @@ var init_marketItem_ui = __esm({
     MarketItem.displayName = "MarketItem";
   }
 });
-var marketTypeBase, MarketTypeFilter;
+var MarketTypeFilter;
 var init_marketTypeFilter_ui = __esm({
   "src/components/horizontalMarkets/marketTypeFilter.ui.tsx"() {
     init_icons();
-    marketTypeBase = [
-      { value: "recent", label: "Recent", translationKey: "Recent" },
-      { value: "all", label: "All Markets", translationKey: "All" },
-      { value: "newListing", label: "New Listing", translationKey: "New listing" }
-    ];
+    init_tabUtils();
     MarketTypeFilter = (props) => {
       const {
         selectedMarketType,
         onMarketTypeChange,
         className,
-        position = "bottom"
+        position = "bottom",
+        tabs
       } = props;
+      const { t } = useTranslation();
+      const orderedOptions = React6.useMemo(() => {
+        if (!tabs) return [];
+        return tabs.filter(
+          (tab) => isCustomMarketTab(tab) || isBuiltInMarketTab(tab) && tab.type !== "favorites"
+        );
+      }, [tabs]);
+      const hasFavoritesTab = React6.useMemo(() => {
+        return tabs?.some(
+          (tab) => isBuiltInMarketTab(tab) && tab.type === "favorites"
+        );
+      }, [tabs]);
       const [isOpen, setIsOpen] = useState(false);
       const dropdownRef = useRef(null);
       const [, favorite] = useMarkets(MarketsType.FAVORITES);
       const hasFavorites = (favorite?.favorites?.length || 0) > 0;
+      const titleOverrides = React6.useMemo(
+        () => ({
+          all: t("markets.allMarkets"),
+          newListing: t("markets.newListings"),
+          recent: t("markets.recent")
+        }),
+        [t]
+      );
+      const getOptionLabel = useCallback(
+        (tab) => resolveTabTitle(tab, titleOverrides, t("common.rwa")),
+        [t, titleOverrides]
+      );
       useEffect(() => {
         const handleClickOutside = (event) => {
           if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -4908,41 +5188,46 @@ var init_marketTypeFilter_ui = __esm({
                       wrap: "wrap",
                       gapY: 1,
                       className: "oui-gap-x-2 md:oui-gap-x-3",
-                      children: marketTypeBase.map((option) => /* @__PURE__ */ jsxs(
-                        Flex,
-                        {
-                          className: cn("oui-cursor-pointer"),
-                          itemAlign: "center",
-                          onClick: () => handleOptionClick(option.value),
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              Checkbox,
-                              {
-                                "data-testid": `oui-testid-marketType-${option.value}-checkBox`,
-                                id: `toggle_market_type_${option.value}`,
-                                className: "oui-peer",
-                                color: "white",
-                                checked: selectedMarketType === option.value
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              "label",
-                              {
-                                htmlFor: `toggle_market_type_${option.value}`,
-                                className: cn(
-                                  "oui-text-2xs oui-ml-1",
-                                  "oui-break-normal oui-whitespace-nowrap oui-cursor-pointer"
-                                ),
-                                children: option.translationKey
-                              }
-                            )
-                          ]
-                        },
-                        option.value
-                      ))
+                      children: orderedOptions.map((tab) => {
+                        const optionValue = isCustomMarketTab(tab) ? tab.id : tab.type;
+                        const isActive = selectedMarketType === optionValue;
+                        const htmlId = `toggle_market_type_${optionValue}`;
+                        return /* @__PURE__ */ jsxs(
+                          Flex,
+                          {
+                            className: cn("oui-cursor-pointer"),
+                            itemAlign: "center",
+                            onClick: () => handleOptionClick(optionValue),
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  "data-testid": `oui-testid-marketType-${optionValue}-checkBox`,
+                                  id: htmlId,
+                                  className: "oui-peer",
+                                  color: "white",
+                                  checked: isActive
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "label",
+                                {
+                                  htmlFor: htmlId,
+                                  className: cn(
+                                    "oui-text-2xs oui-ml-1",
+                                    "oui-break-normal oui-whitespace-nowrap oui-cursor-pointer"
+                                  ),
+                                  children: getOptionLabel(tab)
+                                }
+                              )
+                            ]
+                          },
+                          optionValue
+                        );
+                      })
                     }
                   ),
-                  hasFavorites && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  hasFavoritesTab && hasFavorites && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(
                       Divider,
                       {
@@ -5021,6 +5306,7 @@ __export(horizontalMarkets_ui_exports, {
 var HorizontalMarkets;
 var init_horizontalMarkets_ui = __esm({
   "src/components/horizontalMarkets/horizontalMarkets.ui.tsx"() {
+    init_marketsProvider();
     init_marketItem_ui();
     init_marketTypeFilter_ui();
     HorizontalMarkets = React6.memo((props) => {
@@ -5034,6 +5320,7 @@ var init_horizontalMarkets_ui = __esm({
         className,
         dropdownPos
       } = props;
+      const { tabs } = useMarketsContext();
       const renderMarketItem = React6.useCallback(
         (symbol, index) => {
           const data = tickerData[symbol];
@@ -5092,7 +5379,8 @@ var init_horizontalMarkets_ui = __esm({
                   {
                     selectedMarketType,
                     onMarketTypeChange,
-                    position: dropdownPos
+                    position: dropdownPos,
+                    tabs
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -5309,12 +5597,15 @@ init_favoritesTabs();
 init_expandMarkets();
 
 // src/components/subMenuMarkets/subMenuMarkets.ui.tsx
-init_icons();
+init_useCommunityTabs();
 init_type();
+init_communityBrokerTabs();
 init_favoritesTabs();
 init_marketsList();
+init_marketsProvider();
 init_rwaTab();
 init_useFavoritesExtraProps();
+init_tabUtils();
 init_symbolDisplay();
 var LIST_ROW_COMPACT = "oui-h-auto";
 var TABLE_CLASSNAMES = {
@@ -5351,8 +5642,10 @@ var MarketTabPanel = ({
 };
 var SubMenuMarkets = (props) => {
   const { activeTab, onTabChange, className, tabSort, onTabSort } = props;
-  const { t } = useTranslation();
   const { getFavoritesProps } = useFavoritesProps();
+  const builtInTitles = useBuiltInTitles();
+  const { tabs } = useMarketsContext();
+  const tabDataFilters = useCustomTabDataFilters(tabs);
   const getColumns = (_favorite, _isFavoritesList) => {
     return [
       {
@@ -5370,7 +5663,72 @@ var SubMenuMarkets = (props) => {
           ] }) });
         }
       }
-    ];
+    ];
+  };
+  const renderBuiltInContent = (tabType) => {
+    if (tabType === "favorites" /* Favorites */) {
+      const favProps = getFavoritesProps("favorites" /* Favorites */);
+      return /* @__PURE__ */ jsx(
+        MarketTabPanel,
+        {
+          type: "favorites" /* Favorites */,
+          getColumns,
+          dataFilter: favProps?.dataFilter,
+          renderHeader: (favorite) => /* @__PURE__ */ jsx(Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsx(FavoritesTabWidget, { favorite, size: "sm" }) }),
+          initialSort: tabSort["favorites" /* Favorites */],
+          onSort: onTabSort("favorites" /* Favorites */),
+          emptyView: /* @__PURE__ */ jsx(EmptyDataState, {})
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      MarketTabPanel,
+      {
+        type: tabType,
+        getColumns,
+        initialSort: tabSort[tabType],
+        onSort: onTabSort(tabType)
+      }
+    );
+  };
+  const renderCommunityContent = () => {
+    return /* @__PURE__ */ jsx(
+      CommunityBrokerTabs,
+      {
+        storageKey: "orderly_submenu_markets_community_sel_sub_tab",
+        classNames: {
+          tabsList: "oui-px-1 oui-pt-1 oui-pb-2",
+          tabsContent: "oui-h-full",
+          scrollIndicator: "oui-mx-1"
+        },
+        className: cn("oui-subMenuMarkets-community-tabs", cls2),
+        showScrollIndicator: true,
+        renderPanel: (selected) => /* @__PURE__ */ jsx(
+          MarketTabPanel,
+          {
+            type: "all" /* All */,
+            getColumns,
+            dataFilter: createCommunityBrokerFilter(selected),
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */)
+          }
+        )
+      }
+    );
+  };
+  const renderCustomContent = (key) => {
+    return /* @__PURE__ */ jsx("div", { className: cls2, children: /* @__PURE__ */ jsx(
+      MarketsListWidget,
+      {
+        type: "all" /* All */,
+        getColumns,
+        tableClassNames: TABLE_CLASSNAMES,
+        rowClassName: LIST_ROW_COMPACT,
+        dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+        initialSort: tabSort[key],
+        onSort: onTabSort(key)
+      }
+    ) });
   };
   return /* @__PURE__ */ jsxs(
     Box,
@@ -5382,7 +5740,7 @@ var SubMenuMarkets = (props) => {
       height: "100%",
       children: [
         /* @__PURE__ */ jsx(Box, { className: "oui-p-1", children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazySearchInput3, {}) }) }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           Tabs,
           {
             variant: "contained",
@@ -5396,114 +5754,24 @@ var SubMenuMarkets = (props) => {
             },
             className: cn(cls2, "oui-subMenuMarkets-tabs oui-my-1.5"),
             showScrollIndicator: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-favorites-trigger",
-                    content: "oui-tabs-favorites-content"
-                  },
-                  title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
-                  value: "favorites" /* Favorites */,
-                  children: (() => {
-                    const favProps = getFavoritesProps("favorites" /* Favorites */);
-                    return /* @__PURE__ */ jsx(
-                      MarketTabPanel,
-                      {
-                        type: "favorites" /* Favorites */,
-                        getColumns,
-                        dataFilter: favProps?.dataFilter,
-                        renderHeader: (favorite) => /* @__PURE__ */ jsx(Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsx(FavoritesTabWidget, { favorite, size: "sm" }) }),
-                        initialSort: tabSort["favorites" /* Favorites */],
-                        onSort: onTabSort("favorites" /* Favorites */),
-                        emptyView: /* @__PURE__ */ jsx(EmptyDataState, {})
-                      }
-                    );
-                  })()
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-all-trigger",
-                    content: "oui-tabs-all-content"
-                  },
-                  title: t("common.all"),
-                  value: "all" /* All */,
-                  children: /* @__PURE__ */ jsx(
-                    MarketTabPanel,
-                    {
-                      type: "all" /* All */,
-                      getColumns,
-                      initialSort: tabSort["all" /* All */],
-                      onSort: onTabSort("all" /* All */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-rwa-trigger",
-                    content: "oui-tabs-rwa-content"
-                  },
-                  title: /* @__PURE__ */ jsx(RwaIconTab, {}),
-                  value: "rwa" /* Rwa */,
-                  children: /* @__PURE__ */ jsx(
-                    MarketTabPanel,
-                    {
-                      type: "rwa" /* Rwa */,
-                      getColumns,
-                      initialSort: tabSort["rwa" /* Rwa */],
-                      onSort: onTabSort("rwa" /* Rwa */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-newListings-trigger",
-                    content: "oui-tabs-newListings-content"
-                  },
-                  title: t("markets.newListings"),
-                  value: "newListing" /* NewListing */,
-                  children: /* @__PURE__ */ jsx(
-                    MarketTabPanel,
-                    {
-                      type: "newListing" /* NewListing */,
-                      getColumns,
-                      initialSort: tabSort["newListing" /* NewListing */],
-                      onSort: onTabSort("newListing" /* NewListing */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
+            children: tabs?.map((tab, index) => {
+              const key = tabKey(tab, index);
+              const isBuiltIn = isBuiltInMarketTab(tab);
+              const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+              return /* @__PURE__ */ jsx(
                 TabPanel,
                 {
                   classNames: {
-                    trigger: "oui-tabs-recent-trigger",
-                    content: "oui-tabs-recent-content"
+                    trigger: `oui-tabs-${key}-trigger`,
+                    content: `oui-tabs-${key}-content`
                   },
-                  title: t("markets.recent"),
-                  value: "recent" /* Recent */,
-                  children: /* @__PURE__ */ jsx(
-                    MarketTabPanel,
-                    {
-                      type: "recent" /* Recent */,
-                      getColumns,
-                      initialSort: tabSort["recent" /* Recent */],
-                      onSort: onTabSort("recent" /* Recent */)
-                    }
-                  )
-                }
-              )
-            ]
+                  title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsx(RwaIconTab, {})),
+                  value: key,
+                  children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                },
+                key
+              );
+            })
           }
         )
       ]
@@ -5513,6 +5781,7 @@ var SubMenuMarkets = (props) => {
 
 // src/components/subMenuMarkets/subMenuMarkets.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 
 // src/components/subMenuMarkets/subMenuMarkets.script.ts
 init_constant();
@@ -5557,11 +5826,13 @@ var SubMenuMarketsWidget = (props) => {
     activeTab: props.activeTab,
     onTabChange: props.onTabChange
   });
+  const tabs = useMarketCategories("subMenuMarkets");
   return /* @__PURE__ */ jsx(
     MarketsProvider,
     {
       symbol: props.symbol,
       onSymbolChange: props.onSymbolChange,
+      tabs,
       children: /* @__PURE__ */ jsx(
         SubMenuMarkets,
         {
@@ -5591,7 +5862,6 @@ init_type();
 init_useTabSort();
 var SIDE_MARKETS_SEL_TAB_KEY2 = "orderly_side_markets_sel_tab_key";
 var useSideMarketsScript = (options) => {
-  const [panelSize, setPanelSize] = useState(options?.panelSize);
   const [activeTab, setActiveTab] = useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY2,
     "all" /* All */
@@ -5599,26 +5869,25 @@ var useSideMarketsScript = (options) => {
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
   });
-  const onPanelSizeChange = useCallback(
+  const panelSize = useMemo(() => {
+    if (options?.collapsed) {
+      return "small";
+    }
+    return options?.panelSize || "large";
+  }, [options?.collapsed, options?.panelSize]);
+  useCallback(
     (size) => {
       if (typeof options?.onPanelSizeChange === "function") {
         options.onPanelSizeChange(size);
-      } else {
-        setPanelSize(size);
       }
     },
     [options?.onPanelSizeChange]
   );
-  useEffect(() => {
-    setPanelSize(options?.panelSize);
-  }, [options?.panelSize]);
   return {
-    resizeable: options?.resizeable ?? true,
-    panelSize,
-    onPanelSizeChange,
     activeTab,
     onTabChange: setActiveTab,
-    tabSort
+    tabSort,
+    panelSize
   };
 };
 
@@ -5630,9 +5899,7 @@ var LazySideMarkets = React6.lazy(
   })
 );
 var SideMarketsWidget = (props) => {
-  const state = useSideMarketsScript(
-    pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-  );
+  const state = useSideMarketsScript(props);
   return /* @__PURE__ */ jsx(MarketsProvider, { ...pick(["symbol", "onSymbolChange"], props), children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazySideMarkets, { ...state, className: props.className }) }) });
 };
 
@@ -5640,18 +5907,23 @@ var SideMarketsWidget = (props) => {
 init_dropDownMarkets();
 
 // src/components/marketsSheet/marketsSheet.ui.tsx
-init_icons();
+init_useCommunityTabs();
 init_type();
+init_communityBrokerTabs();
 init_marketsList();
+init_marketsProvider();
 init_rwaTab();
 init_searchInput();
 init_useFavoritesExtraProps();
+init_tabUtils();
 
 // src/components/marketsSheet/column.tsx
-init_column2();
+init_column();
 var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
   return [
-    getSymbolColumn(favorite, isFavoriteList),
+    getSymbolColumn(favorite, isFavoriteList, {
+      stackLeverageInSecondRow: true
+    }),
     get24hVolOIColumn(),
     getLastAnd24hPercentageColumn(favorite, isFavoriteList)
   ];
@@ -5660,14 +5932,17 @@ var MarketsSheet = (props) => {
   const { className, tabSort, onTabSort } = props;
   const { t } = useTranslation();
   const { getFavoritesProps, renderEmptyView } = useFavoritesProps();
-  const renderTab = (type) => {
-    const isFavorites = type === "favorites" /* Favorites */;
+  const { tabs } = useMarketsContext();
+  const builtInTitles = useBuiltInTitles();
+  const tabDataFilters = useCustomTabDataFilters(tabs);
+  const renderBuiltInContent = (tabType) => {
+    const isFavorites = tabType === "favorites" /* Favorites */;
     return /* @__PURE__ */ jsx(
       MarketsListWidget,
       {
-        type,
-        initialSort: tabSort[type],
-        onSort: onTabSort(type),
+        type: tabType,
+        initialSort: tabSort[tabType],
+        onSort: onTabSort(tabType),
         getColumns: getMarketsSheetColumns,
         tableClassNames: {
           root: cn("oui-marketsSheet-list", "!oui-bg-base-8"),
@@ -5677,12 +5952,65 @@ var MarketsSheet = (props) => {
           )
         },
         emptyView: renderEmptyView({
-          type,
+          type: tabType,
           onClick: () => {
             props.onTabChange("all" /* All */);
           }
         }),
-        ...getFavoritesProps(type)
+        ...getFavoritesProps(tabType)
+      }
+    );
+  };
+  const renderCommunityContent = () => {
+    return /* @__PURE__ */ jsx(
+      CommunityBrokerTabs,
+      {
+        storageKey: "orderly_markets_sheet_community_sel_sub_tab",
+        classNames: {
+          tabsList: "oui-px-3 oui-pt-1 oui-pb-2",
+          tabsContent: "oui-h-full"
+        },
+        className: cn(
+          "oui-marketsSheet-community-tabs",
+          "oui-h-[calc(100%_-_36px)]"
+        ),
+        showScrollIndicator: true,
+        renderPanel: (selected) => /* @__PURE__ */ jsx(
+          MarketsListWidget,
+          {
+            type: "all" /* All */,
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */),
+            getColumns: getMarketsSheetColumns,
+            tableClassNames: {
+              root: cn("oui-marketsSheet-list", "!oui-bg-base-8"),
+              scroll: cn(
+                "oui-pb-[env(safe-area-inset-bottom,_20px)]",
+                "oui-h-[calc(100%_-_40px)]"
+              )
+            },
+            dataFilter: createCommunityBrokerFilter(selected)
+          }
+        )
+      }
+    );
+  };
+  const renderCustomContent = (key) => {
+    return /* @__PURE__ */ jsx(
+      MarketsListWidget,
+      {
+        type: "all" /* All */,
+        dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+        initialSort: tabSort[key],
+        onSort: onTabSort(key),
+        getColumns: getMarketsSheetColumns,
+        tableClassNames: {
+          root: cn("oui-marketsSheet-list", "!oui-bg-base-8"),
+          scroll: cn(
+            "oui-pb-[env(safe-area-inset-bottom,_20px)]",
+            "oui-h-[calc(100%_-_40px)]"
+          )
+        }
       }
     );
   };
@@ -5701,7 +6029,7 @@ var MarketsSheet = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           Tabs,
           {
             variant: "contained",
@@ -5715,44 +6043,24 @@ var MarketsSheet = (props) => {
             },
             className: cn("oui-marketsSheet-tabs", "oui-h-[calc(100%_-_92px)]"),
             showScrollIndicator: true,
-            children: [
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-favorites-trigger",
-                    content: "oui-tabs-favorites-content"
-                  },
-                  title: /* @__PURE__ */ jsx(FavoritesIcon, {}),
-                  value: "favorites" /* Favorites */,
-                  children: renderTab("favorites" /* Favorites */)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-all-trigger",
-                    content: "oui-tabs-all-content"
-                  },
-                  title: t("common.all"),
-                  value: "all" /* All */,
-                  children: renderTab("all" /* All */)
-                }
-              ),
-              /* @__PURE__ */ jsx(
+            children: tabs?.map((tab, index) => {
+              const key = tabKey(tab, index);
+              const isBuiltIn = isBuiltInMarketTab(tab);
+              const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+              return /* @__PURE__ */ jsx(
                 TabPanel,
                 {
                   classNames: {
-                    trigger: "oui-tabs-rwa-trigger",
-                    content: "oui-tabs-rwa-content"
+                    trigger: `oui-tabs-${key}-trigger`,
+                    content: `oui-tabs-${key}-content`
                   },
-                  title: /* @__PURE__ */ jsx(RwaTab, {}),
-                  value: "rwa" /* Rwa */,
-                  children: renderTab("rwa" /* Rwa */)
-                }
-              )
-            ]
+                  title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsx(RwaTab, {})),
+                  value: key,
+                  children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                },
+                key
+              );
+            })
           }
         )
       ]
@@ -5783,13 +6091,16 @@ function useMarketsSheetScript() {
 
 // src/components/marketsSheet/marketsSheet.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 var MarketsSheetWidget = (props) => {
   const state = useMarketsSheetScript();
+  const tabs = useMarketCategories("marketsSheet");
   return /* @__PURE__ */ jsx(
     MarketsProvider,
     {
       symbol: props.symbol,
       onSymbolChange: props.onSymbolChange,
+      tabs,
       children: /* @__PURE__ */ jsx(MarketsSheet, { ...state, className: props.className })
     }
   );
@@ -5797,6 +6108,7 @@ var MarketsSheetWidget = (props) => {
 
 // src/components/symbolInfoBar/symbolInfoBar.ui.tsx
 init_icons();
+init_symbolBadge();
 init_symbolDisplay();
 var RwaTooltip = (props) => {
   const { isRwa, open, closeTimeInterval, openTimeInterval } = props;
@@ -5953,7 +6265,7 @@ var SymbolInfoBar = (props) => {
       className: "oui-h-5 oui-cursor-pointer oui-gap-x-[6px]",
       onClick: onSymbol,
       children: [
-        /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "sm", children: symbol }),
+        /* @__PURE__ */ jsx(SymbolDisplay, { formatString: "base", size: "sm", showBadge: false, children: symbol }),
         /* @__PURE__ */ jsx(TriangleDownIcon, { className: "oui-size-[14px] oui-text-base-contrast-54" })
       ]
     }
@@ -5961,32 +6273,37 @@ var SymbolInfoBar = (props) => {
   return /* @__PURE__ */ jsxs(
     Flex,
     {
+      intensity: 900,
+      mx: 1,
+      px: 3,
+      py: 2,
       className: cn(
         "oui-symbol-info-bar-mobile",
-        "oui-h-full oui-font-semibold",
+        "oui-h-full oui-font-semibold oui-rounded-xl",
         props.className
       ),
       children: [
         /* @__PURE__ */ jsxs(Flex, { gapX: 3, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
           /* @__PURE__ */ jsxs(Flex, { gapX: 3, children: [
             /* @__PURE__ */ jsx(TokenIcon, { symbol, size: "xs" }),
-            /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
               symbolView,
               /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
                 /* @__PURE__ */ jsxs(Badge, { size: "xs", color: "primary", children: [
                   leverage,
                   "x"
                 ] }),
-                /* @__PURE__ */ jsx(
-                  RwaTooltip,
-                  {
-                    isRwa,
-                    open,
-                    closeTimeInterval,
-                    openTimeInterval
-                  }
-                )
-              ] })
+                /* @__PURE__ */ jsx(SymbolBadge, { symbol })
+              ] }),
+              /* @__PURE__ */ jsx(
+                RwaTooltip,
+                {
+                  isRwa,
+                  open,
+                  closeTimeInterval,
+                  openTimeInterval
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsx(Divider, { className: "oui-h-[38px]", direction: "vertical", intensity: 8 }),
@@ -6196,6 +6513,7 @@ var FundingRateHintWidget = (props) => {
 };
 
 // src/components/symbolInfoBarFull/symbolInfoBarFull.ui.tsx
+init_symbolBadge();
 init_symbolDisplay();
 var LazyDropDownMarketsWidget = React6.lazy(
   () => Promise.resolve().then(() => (init_dropDownMarkets(), dropDownMarkets_exports)).then((mod) => {
@@ -6212,6 +6530,91 @@ var LazyDataItem = React6.lazy(
     return { default: mod.DataItem };
   })
 );
+var RISK_NOTICE_LEARN_MORE_URL = "https://orderly.network";
+var SymbolInfoBarRiskNotice = ({ className, visible, symbolWithBroker, brokerName, autoHeight }) => {
+  const { t } = useTranslation();
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: RISK_NOTICE_LEARN_MORE_URL,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "oui-symbol-info-bar-risk-notice oui-w-full oui-bg-warning-darken/10 oui-rounded-none oui-text-warning-darken hover:oui-cursor-pointer oui-block",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          itemAlign: "center",
+          gap: 2,
+          className: autoHeight ? "oui-min-h-0 oui-py-2 oui-px-2" : "oui-h-[46px] oui-px-3",
+          children: [
+            /* @__PURE__ */ jsx(WarningIcon, { className: "oui-shrink-0 oui-size-4 oui-text-warning-darken" }),
+            /* @__PURE__ */ jsxs(Text, { size: "xs", className: "oui-text-warning-darken oui-flex-1", children: [
+              t("markets.symbolInfoBar.riskNotice.content", {
+                symbolWithBroker,
+                brokerName
+              }),
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "oui-underline", children: t("common.learnMore") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var SymbolInfoBarDesktop = ({
+  className,
+  trailing,
+  leftSection,
+  priceSection,
+  scrollableContent,
+  containerRef,
+  leadingVisible,
+  tailingVisible,
+  onScroll
+}) => /* @__PURE__ */ jsxs(
+  Flex,
+  {
+    intensity: 900,
+    r: "2xl",
+    px: 3,
+    className: cn(
+      "oui-symbol-info-bar-desktop",
+      "oui-font-semibold",
+      "oui-flex-1 oui-w-full",
+      "oui-py-2",
+      className
+    ),
+    style: {
+      transform: "translateZ(0)",
+      willChange: "transform"
+    },
+    children: [
+      /* @__PURE__ */ jsxs(Flex, { gapX: 6, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
+        /* @__PURE__ */ jsx(Flex, { gapX: 1, className: "oui-flex-none oui-shrink-0", children: leftSection }),
+        /* @__PURE__ */ jsx(Divider, { className: "oui-h-[26px]", direction: "vertical", intensity: 8 }),
+        priceSection,
+        /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-h-full oui-overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: containerRef,
+              className: "oui-hide-scrollbar oui-h-full oui-overflow-x-auto",
+              children: scrollableContent
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollIndicator2, { leading: true, onClick: onScroll, visible: leadingVisible }),
+          /* @__PURE__ */ jsx(ScrollIndicator2, { tailing: true, onClick: onScroll, visible: tailingVisible })
+        ] })
+      ] }),
+      trailing
+    ]
+  }
+);
 var SymbolInfoBarFull = (props) => {
   const {
     symbol,
@@ -6237,6 +6640,10 @@ var SymbolInfoBarFull = (props) => {
     showCountdown
   } = props;
   const { t } = useTranslation();
+  const { brokerId, brokerName, brokerNameRaw, displayName } = useBadgeBySymbol(symbol);
+  const isCommunityListed = Boolean(brokerId ?? brokerName);
+  const baseFromSymbol = symbol?.split("_")[1] ?? symbol;
+  const symbolWithBroker = brokerName != null ? `${baseFromSymbol}-${brokerNameRaw}` : displayName ?? symbol;
   const favoriteIcon = /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyFavoritesDropdownMenuWidget, { row: { symbol }, favorite, children: /* @__PURE__ */ jsx(
     Flex,
     {
@@ -6261,7 +6668,7 @@ var SymbolInfoBarFull = (props) => {
             contentClassName: "oui-w-[580px] oui-h-[496px]",
             symbol: props.symbol,
             onSymbolChange: props.onSymbolChange,
-            children: /* @__PURE__ */ jsxs(Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
+            children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 1, children: /* @__PURE__ */ jsxs(Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
               /* @__PURE__ */ jsx(TokenIcon, { symbol, className: "oui-size-4" }),
               /* @__PURE__ */ jsx(
                 SymbolDisplay,
@@ -6269,22 +6676,26 @@ var SymbolInfoBarFull = (props) => {
                   formatString: "base",
                   size: "xs",
                   className: "oui-text-base-contrast",
+                  showBadge: false,
                   children: symbol
                 }
               ),
               /* @__PURE__ */ jsx(TriangleDownIcon, { className: "oui-text-base-contrast-54" })
-            ] })
+            ] }) })
           }
         ),
-        isRwa && /* @__PURE__ */ jsx(
-          RwaTooltip,
-          {
-            isRwa,
-            open,
-            closeTimeInterval,
-            openTimeInterval
-          }
-        )
+        /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsx(SymbolBadge, { symbol }),
+          isRwa && /* @__PURE__ */ jsx(
+            RwaTooltip,
+            {
+              isRwa,
+              open,
+              closeTimeInterval,
+              openTimeInterval
+            }
+          )
+        ] })
       ]
     }
   ) });
@@ -6313,129 +6724,92 @@ var SymbolInfoBarFull = (props) => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "oui-h-full oui-w-full", children: [
-    /* @__PURE__ */ jsxs(
-      Flex,
+  const leftSection = /* @__PURE__ */ jsxs(Fragment, { children: [
+    favoriteIcon,
+    symbolView
+  ] });
+  const priceSection = /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: t("markets.symbolInfoBar.lastPrice.tooltip"),
+      className: "oui-max-w-[240px]",
+      children: /* @__PURE__ */ jsx("span", { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-inline-block", children: price })
+    }
+  );
+  const scrollableContent = /* @__PURE__ */ jsxs(Flex, { gapX: 8, height: "100%", children: [
+    /* @__PURE__ */ jsx("div", { ref: leadingElementRef, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyDataItem, { label: t("markets.column.24hChange"), value: change }) }) }),
+    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyDataItem,
       {
-        className: cn(
-          "oui-symbol-info-bar-desktop",
-          "oui-font-semibold",
-          "oui-flex-1 oui-w-full",
-          props.className
+        label: t("markets.symbolInfoBar.Mark"),
+        value: /* @__PURE__ */ jsx(
+          Text.numeral,
+          {
+            dp: quotoDp,
+            "data-testid": "oui-testid-tokenInfo-markPrice-value",
+            children: data?.["mark_price"]
+          }
         ),
-        style: {
-          transform: "translateZ(0)",
-          willChange: "transform"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(Flex, { gapX: 6, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
-            /* @__PURE__ */ jsxs(Flex, { gapX: 1, children: [
-              favoriteIcon,
-              symbolView
-            ] }),
-            /* @__PURE__ */ jsx(
-              Divider,
-              {
-                className: "oui-h-[26px]",
-                direction: "vertical",
-                intensity: 8
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                content: t("markets.symbolInfoBar.lastPrice.tooltip"),
-                className: "oui-max-w-[240px]",
-                children: /* @__PURE__ */ jsx("span", { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-inline-block", children: price })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "oui-relative oui-h-full oui-overflow-hidden", children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ref: containerRef,
-                  className: "oui-hide-scrollbar oui-h-full oui-overflow-x-auto",
-                  children: /* @__PURE__ */ jsxs(Flex, { gapX: 8, height: "100%", children: [
-                    /* @__PURE__ */ jsx("div", { ref: leadingElementRef, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.column.24hChange"),
-                        value: change
-                      }
-                    ) }) }),
-                    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.Mark"),
-                        value: /* @__PURE__ */ jsx(
-                          Text.numeral,
-                          {
-                            dp: quotoDp,
-                            "data-testid": "oui-testid-tokenInfo-markPrice-value",
-                            children: data?.["mark_price"]
-                          }
-                        ),
-                        hint: t("markets.symbolInfoBar.Mark.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.Index"),
-                        value: /* @__PURE__ */ jsx(Text.numeral, { dp: quotoDp, children: data?.["index_price"] }),
-                        hint: t("markets.symbolInfoBar.Index.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.24hVolume"),
-                        value: /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, children: data?.["24h_amount"] }),
-                        hint: t("markets.symbolInfoBar.24hVolume.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.predFundingRate"),
-                        value: /* @__PURE__ */ jsx(FundingRate, { symbol }),
-                        hint: /* @__PURE__ */ jsx(FundingRateHintWidget, { symbol })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx("div", { ref: tailingElementRef, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.openInterest"),
-                        value: /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, children: openInterest }),
-                          /* @__PURE__ */ jsx(Text, { intensity: 36, children: ` USDC` })
-                        ] }),
-                        hint: t("markets.openInterest.tooltip")
-                      }
-                    ) }) })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ScrollIndicator2,
-                {
-                  leading: true,
-                  onClick: onScoll,
-                  visible: leadingVisible
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ScrollIndicator2,
-                {
-                  tailing: true,
-                  onClick: onScoll,
-                  visible: tailingVisible
-                }
-              )
-            ] })
-          ] }),
-          props.trailing
-        ]
+        hint: t("markets.symbolInfoBar.Mark.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.Index"),
+        value: /* @__PURE__ */ jsx(Text.numeral, { dp: quotoDp, children: data?.["index_price"] }),
+        hint: t("markets.symbolInfoBar.Index.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.24hVolume"),
+        value: /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, children: data?.["24h_amount"] }),
+        hint: t("markets.symbolInfoBar.24hVolume.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.predFundingRate"),
+        value: /* @__PURE__ */ jsx(FundingRate, { symbol }),
+        hint: /* @__PURE__ */ jsx(FundingRateHintWidget, { symbol })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { ref: tailingElementRef, children: /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LazyDataItem,
+      {
+        label: t("markets.openInterest"),
+        value: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text.numeral, { rule: "human", dp: 2, children: openInterest }),
+          /* @__PURE__ */ jsx(Text, { intensity: 36, children: ` USDC` })
+        ] }),
+        hint: t("markets.openInterest.tooltip")
+      }
+    ) }) })
+  ] });
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", className: "oui-h-full oui-w-full", gapY: 1, children: [
+    /* @__PURE__ */ jsx(
+      SymbolInfoBarRiskNotice,
+      {
+        visible: isCommunityListed,
+        symbolWithBroker,
+        brokerName: brokerNameRaw ?? brokerName ?? ""
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SymbolInfoBarDesktop,
+      {
+        className: props.className,
+        trailing: props.trailing,
+        leftSection,
+        priceSection,
+        scrollableContent,
+        containerRef,
+        leadingVisible,
+        tailingVisible,
+        onScroll: onScoll
       }
     ),
     showCountdown && /* @__PURE__ */ jsx(
@@ -6628,42 +7002,69 @@ function useSymbolInfoBarFullScript(options) {
     openTimeInterval
   };
 }
+var SymbolInfoBarFullInjectable = injectable(
+  SymbolInfoBarFull,
+  "Trading.SymbolInfoBar.Desktop"
+);
 var SymbolInfoBarFullWidget = (props) => {
   const { symbol, ...rest } = props;
   const state = useSymbolInfoBarFullScript({ symbol });
-  return /* @__PURE__ */ jsx(SymbolInfoBarFull, { ...state, ...rest });
+  return /* @__PURE__ */ jsx(SymbolInfoBarFullInjectable, { ...state, ...rest });
 };
 
 // src/components/horizontalMarkets/horizontalMarkets.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 
 // src/components/horizontalMarkets/horizontalMarkets.script.ts
 init_constant();
 init_utils();
 init_marketsProvider();
 init_useTabSort();
+init_tabUtils();
 var useHorizontalMarketsScript = (options) => {
   const {
     symbols: optionSymbols,
     maxItems: optionMaxItems,
     defaultMarketType
   } = options || {};
-  const { symbol: currentSymbol, onSymbolChange } = useMarketsContext();
+  const { symbol: currentSymbol, onSymbolChange, tabs } = useMarketsContext();
   const [selectedMarketType, setSelectedMarketType] = useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY,
     defaultMarketType || "all"
   );
+  const availableMarketTypes = useMemo(
+    () => tabs?.map((tab, index) => tabKey(tab, index)) ?? ["all"],
+    [tabs]
+  );
   const MarketsTypeMap3 = {
     all: MarketsType.ALL,
     recent: MarketsType.RECENT,
     newListing: MarketsType.NEW_LISTING,
     favorites: MarketsType.FAVORITES
   };
-  const marketTypeKey = selectedMarketType || "all";
+  const isCustomCategory = typeof selectedMarketType === "string" && !MarketsTypeMap3[selectedMarketType];
+  const marketTypeKey = isCustomCategory ? "all" : selectedMarketType || "all";
   const [markets, favorite] = useMarkets(
     MarketsTypeMap3[marketTypeKey] || MarketsType.ALL
   );
+  useEffect(() => {
+    if (!availableMarketTypes.includes(selectedMarketType)) {
+      setSelectedMarketType(availableMarketTypes[0] ?? "all");
+    }
+  }, [availableMarketTypes, selectedMarketType, setSelectedMarketType]);
+  const customCategoryFilter = useMemo(() => {
+    if (!isCustomCategory || !tabs) return null;
+    const customTabs = tabs.filter(isCustomMarketTab);
+    const tab = customTabs.find(
+      (item, index) => tabKey(item, index) === selectedMarketType
+    );
+    return tab ? getCustomTabDataFilter(tab) ?? null : null;
+  }, [isCustomCategory, tabs, selectedMarketType]);
   const filteredMarkets = useMemo(() => {
+    if (isCustomCategory && customCategoryFilter) {
+      return customCategoryFilter(markets);
+    }
     if (selectedMarketType === "favorites") {
       const { favorites, selectedFavoriteTab } = favorite;
       const symbolsInTab = favorites?.filter(
@@ -6685,7 +7086,9 @@ var useHorizontalMarketsScript = (options) => {
     favorite.favorites,
     favorite.selectedFavoriteTab,
     favorite.recent,
-    selectedMarketType
+    selectedMarketType,
+    isCustomCategory,
+    customCategoryFilter
   ]);
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
@@ -6770,7 +7173,8 @@ var HorizontalMarketsWidget = (props) => {
     dropdownPos,
     ...providerProps
   } = props;
-  return /* @__PURE__ */ jsx(MarketsProvider, { ...providerProps, children: /* @__PURE__ */ jsx(
+  const tabs = useMarketCategories("horizontalMarkets");
+  return /* @__PURE__ */ jsx(MarketsProvider, { ...providerProps, tabs, children: /* @__PURE__ */ jsx(
     HorizontalMarketsInner,
     {
       symbols,
@@ -6790,7 +7194,7 @@ init_marketItem_ui();
 // src/deprecated/newListingList/newListingList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var NewListingList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6859,7 +7263,7 @@ var NewListingListWidget = (props) => {
 init_collapseMarkets();
 init_favoritesTabs();
 init_marketsProvider();
-init_column();
+init_column2();
 var FavoritesList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6940,7 +7344,7 @@ var FavoritesListWidget = (props) => {
 // src/deprecated/recentList/recentList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var RecentList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -7010,6 +7414,7 @@ init_type();
 
 // src/pages/home/page.tsx
 init_marketsProvider();
+init_useMarketCategories();
 init_type();
 var LazyMarketsHeaderWidget = React6.lazy(
   () => Promise.resolve().then(() => (init_marketsHeader_widget(), marketsHeader_widget_exports)).then((mod) => {
@@ -7031,6 +7436,7 @@ var MarketsHomePage = (props) => {
   const [activeTab, setActiveTab] = useState(
     "markets" /* Markets */
   );
+  const tabs = useMarketCategories("marketsDataList");
   return /* @__PURE__ */ jsx(
     MarketsProvider,
     {
@@ -7038,6 +7444,7 @@ var MarketsHomePage = (props) => {
       onSymbolChange: props.onSymbolChange,
       navProps: props.navProps,
       comparisonProps: props.comparisonProps,
+      tabs,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -7161,7 +7568,8 @@ var MarketsMobileContent = (props) => {
 // src/index.ts
 init_marketsProvider();
 init_symbolDisplay();
+init_builtInTabRegistry();
 
-export { CollapseMarkets, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, HorizontalMarkets, HorizontalMarketsWidget, MarketItem, MarketTypeFilter, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, SubMenuMarkets, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarWidget, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
+export { CollapseMarkets, CommunitySubTabName, DropDownMarkets, DropDownMarketsConetnt, DropDownMarketsWidget, ExpandMarkets, ExpandMarketsWidget, FavoritesDropdownMenu, FavoritesDropdownMenuWidget, FavoritesList, FavoritesListFull, FavoritesListFullWidget, FavoritesListWidget, FavoritesTab, FavoritesTabWidget, FundingComparison, FundingComparisonWidget, FundingOverview, FundingOverviewWidget, FundingTabName, HorizontalMarkets, HorizontalMarketsWidget, MarketItem, MarketTypeFilter, MarketsDataList, MarketsDataListWidget, MarketsHeader, MarketsHeaderWidget, MarketsHomePage, MarketsList, MarketsListFull, MarketsListFullWidget, MarketsListWidget, MarketsPageTab, MarketsProvider, MarketsSheet, MarketsSheetWidget, MarketsTabName, NewListingList, NewListingListWidget, RecentList, RecentListWidget, SideMarkets, SideMarketsWidget, SubMenuMarkets, SubMenuMarketsWidget, SymbolDisplay, SymbolInfoBar, SymbolInfoBarFull, SymbolInfoBarFullWidget, SymbolInfoBarRiskNotice, SymbolInfoBarWidget, builtInTabs, useDropDownMarketsColumns, useDropDownMarketsScript, useExpandMarketsScript, useFavoritesDropdownMenuScript, useFavoritesListFullScript, useFavoritesListScript, useFavoritesTabScript, useFundingComparisonScript, useFundingOverviewScript, useHorizontalMarketsScript, useMarketsDataListScript, useMarketsHeaderScript, useMarketsListFullScript, useMarketsListScript, useMarketsSheetScript, useNewListingListScript, useRecentListScript, useSideMarketsScript, useSubMenuMarketsScript, useSymbolInfoBarFullScript, useSymbolInfoBarScript };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map