@orderly.network/markets 2.11.3-rc.0 → 2.12.0-alpha.0

package/dist/index.js

@@ -3,8 +3,8 @@
 var React6 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
-var ui = require('@orderly.network/ui');
 var i18n = require('@orderly.network/i18n');
+var ui = require('@orderly.network/ui');
 var utils = require('@orderly.network/utils');
 var ramda = require('ramda');
 var uiScaffold = require('@orderly.network/ui-scaffold');
@@ -27,7 +27,7 @@ var init_marketsProvider = __esm({
   "src/components/marketsProvider/index.tsx"() {
     MarketsContext = React6.createContext({});
     exports.MarketsProvider = (props) => {
-      const { symbol, comparisonProps, children, onSymbolChange } = props;
+      const { symbol, comparisonProps, children, onSymbolChange, tabs } = props;
       const [searchValue, setSearchValue] = React6.useState("");
       const clearSearchValue = React6.useCallback(() => {
         setSearchValue("");
@@ -39,9 +39,17 @@ var init_marketsProvider = __esm({
           clearSearchValue,
           symbol,
           onSymbolChange,
-          comparisonProps
+          comparisonProps,
+          tabs
         };
-      }, [searchValue, symbol, onSymbolChange, setSearchValue, comparisonProps]);
+      }, [
+        searchValue,
+        symbol,
+        onSymbolChange,
+        setSearchValue,
+        comparisonProps,
+        tabs
+      ]);
       return /* @__PURE__ */ jsxRuntime.jsx(MarketsContext.Provider, { value: memoizedValue, children });
     };
     useMarketsContext = () => {
@@ -49,14 +57,63 @@ var init_marketsProvider = __esm({
     };
   }
 });
+var RwaDotTooltip;
+var init_rwaDotTooltip = __esm({
+  "src/components/rwaDotTooltip.tsx"() {
+    RwaDotTooltip = ({ record }) => {
+      const { t } = i18n.useTranslation();
+      const isInTradingHours = hooks.isCurrentlyTrading(
+        record.rwaNextClose,
+        record.rwaStatus
+      );
+      if (!record.isRwa) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: isInTradingHours ? "success" : "danger", children: isInTradingHours ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { py: 2, px: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.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 } = hooks.useBadgeBySymbol(
+        props.symbol
+      );
+      const badge = brokerName ?? brokerId ?? void 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.SymbolBadge, { badge, fullName: brokerNameRaw });
+    };
+    SymbolBadge = BrokerIdBadge;
+  }
+});
 exports.SymbolDisplay = void 0;
 var init_symbolDisplay = __esm({
   "src/components/symbolDisplay.tsx"() {
+    init_rwaDotTooltip();
+    init_symbolBadge();
     exports.SymbolDisplay = React6.memo((props) => {
-      const { children, size = "xs", ...rest } = props;
+      const { children, size = "xs", showBadge = true, record, ...rest } = props;
       const symbol = children;
       const symbolsInfo = hooks.useSymbolsInfo();
       const displayName = symbolsInfo[symbol]("displayName");
+      const suffix = record?.isRwa || showBadge ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 0, itemAlign: "center", children: [
+        record?.isRwa && /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
+        showBadge && /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol })
+      ] }) : null;
       if (displayName) {
         return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: props.className, children: [
           props.showIcon && /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { size, symbol }),
@@ -68,10 +125,21 @@ var init_symbolDisplay = __esm({
               className: "oui-whitespace-nowrap oui-break-normal",
               children: displayName
             }
-          )
+          ),
+          suffix
         ] });
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { size: "xs", rule: "symbol", weight: "semibold", ...rest, children: symbol });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.formatted,
+        {
+          size: "xs",
+          rule: "symbol",
+          weight: "semibold",
+          suffix,
+          ...rest,
+          children: symbol
+        }
+      );
     });
   }
 });
@@ -1082,6 +1150,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 = hooks.useConfig("brokerId");
+  const [brokers] = hooks.useAllBrokers();
+  const [allMarkets] = hooks.useMarkets(hooks.MarketsType.ALL);
+  const lastSignatureRef = React6.useRef("");
+  const lastValueRef = React6.useRef([]);
+  return React6.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 } = i18n.useTranslation();
+      const [communitySubTab, setCommunitySubTab] = hooks.useLocalStorage(
+        storageKey,
+        "all"
+      );
+      const communityBrokerTabs = useCommunityTabs();
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Tabs,
+        {
+          variant,
+          size,
+          value: communitySubTab,
+          onValueChange: setCommunitySubTab,
+          classNames,
+          className,
+          showScrollIndicator,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: allTitle ?? t("common.all"), value: "all", children: renderPanel("all") }),
+            communityBrokerTabs.map((b) => /* @__PURE__ */ jsxRuntime.jsx(ui.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();
+  }
+});
 exports.CollapseMarkets = void 0;
 var init_collapseMarkets = __esm({
   "src/components/collapseMarkets/index.tsx"() {
@@ -1182,6 +1345,7 @@ var init_collapseMarkets = __esm({
 exports.FavoritesDropdownMenu = void 0;
 var init_favoritesDropdownMenu_ui = __esm({
   "src/components/favoritesDropdownMenu/favoritesDropdownMenu.ui.tsx"() {
+    init_symbolBadge();
     exports.FavoritesDropdownMenu = (props) => {
       const {
         symbol,
@@ -1293,9 +1457,10 @@ var init_favoritesDropdownMenu_ui = __esm({
             ui.Text.formatted,
             {
               rule: "symbol",
-              formatString: "base-type",
+              formatString: "base",
               size: "base",
               showIcon: true,
+              suffix: /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
               children: symbol
             }
           )
@@ -1507,36 +1672,6 @@ var init_favoritesDropdownMenu = __esm({
     init_favoritesDropdownMenu_widget();
   }
 });
-var RwaDotTooltip;
-var init_rwaDotTooltip = __esm({
-  "src/components/rwaDotTooltip.tsx"() {
-    RwaDotTooltip = ({ record }) => {
-      const { t } = i18n.useTranslation();
-      const isInTradingHours = hooks.isCurrentlyTrading(
-        record.rwaNextClose,
-        record.rwaStatus
-      );
-      if (!record.isRwa) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Tooltip,
-        {
-          content: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: isInTradingHours ? "success" : "danger", children: isInTradingHours ? t("trading.rwa.marketHours") : t("trading.rwa.outsideMarketHours") }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Box,
-            {
-              width: 4,
-              height: 4,
-              r: "full",
-              className: isInTradingHours ? "oui-bg-success" : "oui-bg-danger"
-            }
-          ) })
-        }
-      );
-    };
-  }
-});
 function getSymbolColumn(favorite, isFavoriteList = false, options) {
   return {
     title: i18n.i18n.t("common.symbol"),
@@ -1571,8 +1706,7 @@ function getSymbolColumn(favorite, isFavoriteList = false, options) {
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: value, className: "oui-size-[18px]" }),
-                /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: value }),
-                /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record })
+                /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", record, children: value })
               ] }),
               typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
                 record.leverage,
@@ -1743,7 +1877,6 @@ var init_column = __esm({
     init_icons();
     init_icons();
     init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
     init_symbolDisplay();
   }
 });
@@ -1836,7 +1969,7 @@ var init_marketsList_ui = __esm({
 });
 
 // src/type.ts
-exports.MarketsPageTab = void 0; exports.MarketsTabName = void 0; exports.FundingTabName = void 0;
+exports.MarketsPageTab = void 0; exports.MarketsTabName = void 0; exports.CommunitySubTabName = void 0; exports.FundingTabName = void 0;
 var init_type = __esm({
   "src/type.ts"() {
     exports.MarketsPageTab = /* @__PURE__ */ ((MarketsPageTab2) => {
@@ -1850,8 +1983,15 @@ var init_type = __esm({
       MarketsTabName2["All"] = "all";
       MarketsTabName2["Rwa"] = "rwa";
       MarketsTabName2["NewListing"] = "newListing";
+      MarketsTabName2["Community"] = "community";
       return MarketsTabName2;
     })(exports.MarketsTabName || {});
+    exports.CommunitySubTabName = /* @__PURE__ */ ((CommunitySubTabName2) => {
+      CommunitySubTabName2["All"] = "all";
+      CommunitySubTabName2["MyListings"] = "myListings";
+      CommunitySubTabName2["OtherListings"] = "otherListings";
+      return CommunitySubTabName2;
+    })(exports.CommunitySubTabName || {});
     exports.FundingTabName = /* @__PURE__ */ ((FundingTabName2) => {
       FundingTabName2["Overview"] = "overview";
       FundingTabName2["Comparison"] = "comparison";
@@ -1867,6 +2007,7 @@ var init_marketsList_script = __esm({
     init_marketsProvider();
     MarketsTypeMap = {
       ["all" /* All */]: hooks.MarketsType.ALL,
+      ["community" /* Community */]: hooks.MarketsType.COMMUNITY,
       ["rwa" /* Rwa */]: hooks.MarketsType.RWA,
       ["favorites" /* Favorites */]: hooks.MarketsType.FAVORITES,
       ["recent" /* Recent */]: hooks.MarketsType.RECENT,
@@ -1966,18 +2107,7 @@ var init_rwaTab = __esm({
     };
     RwaTab = () => {
       const { t } = i18n.useTranslation();
-      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.rwa") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.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__ */ jsxRuntime.jsx(ui.GradientText, { color: "brand", children: t("common.new") })
-          }
-        )
-      ] });
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: t("common.rwa") }) });
     };
   }
 });
@@ -2490,19 +2620,137 @@ 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 React6.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.GradientText, { color: "brand", children: suffix }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "oui-inline-flex oui-items-center oui-gap-x-1", children: [
+      icon,
+      suffix
+    ] }) : icon;
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "oui-inline-flex oui-items-center oui-gap-x-1", children: [
+      icon,
+      label,
+      suffix
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    label,
+    suffix
+  ] });
+}
+function resolveTabTriggerIcon(tab, fallbackIcon) {
+  const resolvedIcon = typeof tab.icon !== "undefined" ? resolveIcon(tab.icon) : fallbackIcon;
+  return React6.isValidElement(resolvedIcon) ? resolvedIcon : void 0;
+}
+function resolveTabTitle(tab, titleOverrides, rwaTitle) {
+  if (isBuiltInMarketTab(tab) && tab.type === "favorites") {
+    return /* @__PURE__ */ jsxRuntime.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 } = i18n.useTranslation();
+  return React6.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 React6.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_column();
     init_useFavoritesExtraProps();
+    init_tabUtils();
+    init_useCommunityTabs();
     init_icons();
     init_type();
     MobileMarketsDataList = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
       const { t } = i18n.useTranslation();
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
       const getColumns = React6.useCallback(
         (favorite, isFavoriteList = false) => {
           return [
@@ -2516,6 +2764,37 @@ var init_marketsDataList_mobile_ui = __esm({
         []
       );
       const { getFavoritesProps } = useFavoritesProps();
+      const builtInMeta = React6.useMemo(
+        () => ({
+          favorites: {
+            title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
+            value: "favorites",
+            tabName: "favorites" /* Favorites */
+          },
+          community: {
+            title: t("markets.community"),
+            value: "community"
+          },
+          all: {
+            title: t("markets.allMarkets"),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
+            value: "all",
+            tabName: "all" /* All */
+          },
+          rwa: {
+            title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
+            value: "rwa",
+            tabName: "rwa" /* Rwa */
+          },
+          newListing: {
+            title: t("markets.newListings"),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
+            value: "new",
+            tabName: "newListing" /* NewListing */
+          }
+        }),
+        [t]
+      );
       const renderTab = (type) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2542,7 +2821,20 @@ var init_marketsDataList_mobile_ui = __esm({
           )
         ] });
       };
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-markets-list", intensity: 900, py: 3, mt: 2, r: "2xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      const renderCommunityList = (selected) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          exports.MarketsListWidget,
+          {
+            type: "all" /* All */,
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */),
+            getColumns,
+            rowClassName: "!oui-h-[34px]",
+            dataFilter: createCommunityBrokerFilter(selected)
+          }
+        );
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-markets-list", intensity: 900, py: 3, mt: 2, r: "2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tabs,
         {
           variant: "contained",
@@ -2553,28 +2845,85 @@ var init_marketsDataList_mobile_ui = __esm({
             scrollIndicator: "oui-mx-3"
           },
           showScrollIndicator: true,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}), value: "favorites", children: renderTab("favorites" /* Favorites */) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("markets.allMarkets"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
-                value: "all",
-                children: renderTab("all" /* All */)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.TabPanel, { title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}), value: "rwa", children: renderTab("rwa" /* Rwa */) }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FavoritesIcon, {})),
+                suffix: tab.suffix
+              }) : tab.type === "rwa" ? resolveTabTitle(tab, {}, /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {})) : composeTabTitle(tab.name ?? meta.title, {
+                suffix: tab.suffix
+              });
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ui.TabPanel,
+                {
+                  title,
+                  icon: tab.type === "favorites" || tab.type === "rwa" ? void 0 : resolveTabTriggerIcon(tab, meta.icon),
+                  value: meta.value,
+                  children: tab.type === "community" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SearchInput,
+                      {
+                        classNames: {
+                          root: ui.cn("oui-mx-3 oui-mb-4 oui-mt-5", "oui-mb-2")
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
               ui.TabPanel,
               {
-                title: t("markets.newListings"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
-                value: "new",
-                children: renderTab("newListing" /* NewListing */)
-              }
-            )
-          ]
+                title: composeTabTitle(tab.name ?? key, {
+                  icon: resolveTabTriggerIcon(tab),
+                  suffix: tab.suffix
+                }),
+                value: key,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SearchInput,
+                    {
+                      classNames: {
+                        root: ui.cn("oui-mx-3 oui-mb-4 oui-mt-5", "oui-mb-2")
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    exports.MarketsListWidget,
+                    {
+                      type: "all" /* All */,
+                      dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+                      initialSort: tabSort[key],
+                      onSort: onTabSort(key),
+                      getColumns,
+                      rowClassName: "!oui-h-[34px]"
+                    }
+                  )
+                ]
+              },
+              key
+            );
+          })
         }
       ) });
     };
@@ -2989,7 +3338,7 @@ var init_marketsListFull_script = __esm({
       rwa: hooks.MarketsType.RWA
     };
     exports.useMarketsListFullScript = (options) => {
-      const { type = "all" } = options;
+      const { type = "all", dataFilter } = options;
       const [loading, setLoading] = React6.useState(true);
       const { setPage, pagination } = ui.usePagination({
         pageSize: 100
@@ -2998,9 +3347,10 @@ var init_marketsListFull_script = __esm({
       const { searchValue } = useMarketsContext();
       const { onSort, getSortedList, sort } = useSort(options.initialSort);
       const dataSource = React6.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]);
       React6.useEffect(() => {
         setLoading(false);
       }, [data]);
@@ -3056,11 +3406,15 @@ var init_marketsListFull = __esm({
     init_marketsListFull_widget();
   }
 });
-var LazySearchInput, LazyFavoritesListFullWidget, LazyMarketsListFullWidget; exports.MarketsDataList = void 0;
+var LazySearchInput, LazyFavoritesListFullWidget, LazyMarketsListFullWidget, DEFAULT_SORT; exports.MarketsDataList = void 0;
 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__default.default.lazy(
@@ -3078,10 +3432,53 @@ var init_marketsDataList_ui = __esm({
         return { default: mod.MarketsListFullWidget };
       })
     );
+    DEFAULT_SORT = { sortKey: "24h_amount", sortOrder: "desc" };
     exports.MarketsDataList = (props) => {
       const { searchValue, activeTab, onTabChange } = props;
       const { t } = i18n.useTranslation();
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-markets-list", intensity: 900, p: 6, r: "2xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      const { tabs } = useMarketsContext();
+      const tabDataFilters = useCustomTabDataFilters(tabs);
+      const builtInMeta = React6.useMemo(
+        () => ({
+          favorites: {
+            title: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
+            value: "all",
+            testid: "oui-testid-markets-all-tab",
+            listType: "all",
+            initialSort: DEFAULT_SORT
+          },
+          rwa: {
+            title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
+            value: "rwa",
+            testid: "oui-testid-markets-rwa-tab",
+            listType: "rwa",
+            initialSort: DEFAULT_SORT
+          },
+          newListing: {
+            title: t("markets.newListings"),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
+            value: "new",
+            testid: "oui-testid-markets-newListing-tab",
+            listType: "new",
+            initialSort: { sortKey: "created_time", sortOrder: "desc" }
+          }
+        }),
+        [t]
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { id: "oui-markets-list", intensity: 900, p: 6, r: "2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tabs,
         {
           variant: "contained",
@@ -3091,93 +3488,98 @@ var init_marketsDataList_ui = __esm({
           trailing: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-favorites-trigger",
-                  content: "oui-tabs-favorites-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__ */ jsxRuntime.jsx(FavoritesIcon, {})),
+                suffix: tab.suffix
+              }) : tab.type === "rwa" ? resolveTabTitle(tab, {}, /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {})) : composeTabTitle(tab.name ?? meta.title, {
+                suffix: tab.suffix
+              });
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ui.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__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: tab.type === "favorites" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    LazyFavoritesListFullWidget,
+                    {
+                      emptyView: !searchValue && /* @__PURE__ */ jsxRuntime.jsx(
+                        FavoritesEmpty,
+                        {
+                          onClick: () => onTabChange("all" /* All */)
+                        }
+                      )
+                    }
+                  ) : tab.type === "community" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        LazyMarketsListFullWidget,
+                        {
+                          type: "all",
+                          initialSort: meta.initialSort,
+                          dataFilter: createCommunityBrokerFilter(selected)
+                        }
+                      ) })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    LazyMarketsListFullWidget,
+                    {
+                      type: meta.listType,
+                      initialSort: meta.initialSort
+                    }
+                  ) })
                 },
-                title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
-                value: "favorites",
-                testid: "oui-testid-markets-favorites-tab",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyFavoritesListFullWidget,
-                  {
-                    emptyView: !searchValue && /* @__PURE__ */ jsxRuntime.jsx(
-                      FavoritesEmpty,
-                      {
-                        onClick: () => onTabChange("all" /* All */)
-                      }
-                    )
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
               ui.TabPanel,
               {
                 classNames: {
-                  trigger: "oui-tabs-all-trigger",
-                  content: "oui-tabs-all-content"
+                  trigger: `oui-tabs-${key}-trigger`,
+                  content: `oui-tabs-${key}-content`
                 },
-                title: t("markets.allMarkets"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
-                value: "all",
-                testid: "oui-testid-markets-all-tab",
+                title: composeTabTitle(tab.name ?? key, {
+                  icon: resolveTabTriggerIcon(tab),
+                  suffix: tab.suffix
+                }),
+                value: key,
                 children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                   LazyMarketsListFullWidget,
                   {
                     type: "all",
-                    initialSort: { sortKey: "24h_amount", sortOrder: "desc" }
+                    initialSort: DEFAULT_SORT,
+                    dataFilter: tabDataFilters[key]
                   }
                 ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-rwa-trigger",
-                  content: "oui-tabs-rwa-content"
-                },
-                title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
-                value: "rwa",
-                testid: "oui-testid-markets-rwa-tab",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyMarketsListFullWidget,
-                  {
-                    type: "rwa",
-                    initialSort: { sortKey: "24h_amount", sortOrder: "desc" }
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-newListings-trigger",
-                  content: "oui-tabs-newListings-content"
-                },
-                title: t("markets.newListings"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
-                value: "new",
-                testid: "oui-testid-markets-newListings-tab",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyMarketsListFullWidget,
-                  {
-                    type: "new",
-                    initialSort: { sortKey: "created_time", sortOrder: "desc" }
-                  }
-                ) })
-              }
-            )
-          ]
+              },
+              key
+            );
+          })
         }
       ) });
     };
@@ -3214,10 +3616,13 @@ var init_marketsDataList = __esm({
 var LazySearchInput2, LazyMarketsListWidget, cls; exports.ExpandMarkets = void 0;
 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__default.default.lazy(
       () => Promise.resolve().then(() => (init_searchInput(), searchInput_exports)).then((mod) => {
         return { default: mod.SearchInput };
@@ -3231,25 +3636,28 @@ var init_expandMarkets_ui = __esm({
     cls = "oui-h-[calc(100%_-_36px)]";
     exports.ExpandMarkets = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
-      const { t } = i18n.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__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyMarketsListWidget,
           {
-            type,
+            type: tabType,
             initialSort: tabSort[type],
-            onSort: onTabSort(type),
+            onSort: onTabSort(tabType),
             tableClassNames: {
               root: "oui-expandMarkets-list",
               scroll: ui.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 */);
               }
@@ -3257,6 +3665,48 @@ var init_expandMarkets_ui = __esm({
           }
         ) }) });
       };
+      const renderCommunityContent = () => {
+        return /* @__PURE__ */ jsxRuntime.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: ui.cn("oui-expandMarkets-community-tabs", cls),
+            showScrollIndicator: true,
+            renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+              LazyMarketsListWidget,
+              {
+                type: "all" /* All */,
+                initialSort: tabSort["community" /* Community */],
+                onSort: onTabSort("community" /* Community */),
+                tableClassNames: {
+                  root: "oui-expandMarkets-list",
+                  scroll: ui.cn("oui-px-1", "oui-pb-2")
+                },
+                dataFilter: createCommunityBrokerFilter(selected)
+              }
+            ) }) })
+          }
+        );
+      };
+      const renderCustomContent = (key) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          LazyMarketsListWidget,
+          {
+            type: "all" /* All */,
+            dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+            initialSort: tabSort[key],
+            onSort: onTabSort(key),
+            tableClassNames: {
+              root: "oui-expandMarkets-list",
+              scroll: ui.cn("oui-px-1", "oui-pb-2")
+            }
+          }
+        ) }) });
+      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Box,
         {
@@ -3272,7 +3722,7 @@ var init_expandMarkets_ui = __esm({
                 classNames: { root: "oui-expandMarkets-search-input" }
               }
             ) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               ui.Tabs,
               {
                 variant: "contained",
@@ -3286,68 +3736,24 @@ var init_expandMarkets_ui = __esm({
                 },
                 className: ui.cn("oui-expandMarkets-tabs", cls),
                 showScrollIndicator: true,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-favorites-trigger",
-                        content: "oui-tabs-favorites-content"
-                      },
-                      title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
-                      value: "favorites" /* Favorites */,
-                      children: renderTab("favorites" /* Favorites */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-all-trigger",
-                        content: "oui-tabs-all-content"
-                      },
-                      title: t("common.all"),
-                      value: "all" /* All */,
-                      children: renderTab("all" /* All */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-rwa-trigger",
-                        content: "oui-tabs-rwa-content"
-                      },
-                      title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
-                      value: "rwa" /* Rwa */,
-                      children: renderTab("rwa" /* Rwa */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-newListings-trigger",
-                        content: "oui-tabs-newListings-content"
-                      },
-                      title: t("markets.newListings"),
-                      value: "newListing" /* NewListing */,
-                      children: renderTab("newListing" /* NewListing */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                children: tabs?.map((tab, index) => {
+                  const key = tabKey(tab, index);
+                  const isBuiltIn = isBuiltInMarketTab(tab);
+                  const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
                     ui.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__ */ jsxRuntime.jsx(RwaTab, {})),
+                      value: key,
+                      children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                    },
+                    key
+                  );
+                })
               }
             )
           ]
@@ -3404,10 +3810,94 @@ var init_expandMarkets_script = __esm({
     init_useTabSort();
   }
 });
+
+// src/registry/builtInTabRegistry.ts
+exports.builtInTabs = void 0; var componentDefaultTabs;
+var init_builtInTabRegistry = __esm({
+  "src/registry/builtInTabRegistry.ts"() {
+    exports.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" },
+        { ...exports.builtInTabs.community }
+      ],
+      expandMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...exports.builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      dropDownMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...exports.builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      subMenuMarkets: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...exports.builtInTabs.community },
+        { type: "newListing" },
+        { type: "recent" }
+      ],
+      marketsDataList: [
+        { type: "favorites" },
+        { type: "all" },
+        { type: "rwa" },
+        { ...exports.builtInTabs.community },
+        { type: "newListing" }
+      ],
+      horizontalMarkets: [
+        { type: "all" },
+        { type: "recent" },
+        { type: "newListing" },
+        { type: "favorites" }
+      ]
+    };
+  }
+});
+function useMarketCategories(componentKey) {
+  const marketTabs = hooks.useMarketCategoriesConfig();
+  const { i18n: i18n2 } = i18n.useTranslation();
+  const symbolList = hooks.useMarketList();
+  const rwaSymbolsInfo = hooks.useRwaSymbolsInfo();
+  return React6.useMemo(() => {
+    const original = componentDefaultTabs[componentKey];
+    const resolved = marketTabs ? marketTabs(original, { componentKey, builtIn: exports.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();
+  }
+});
 exports.ExpandMarketsWidget = void 0;
 var init_expandMarkets_widget = __esm({
   "src/components/expandMarkets/expandMarkets.widget.tsx"() {
     init_marketsProvider();
+    init_useMarketCategories();
     init_expandMarkets_script();
     init_expandMarkets_ui();
     exports.ExpandMarketsWidget = (props) => {
@@ -3415,11 +3905,13 @@ var init_expandMarkets_widget = __esm({
         activeTab: props.activeTab,
         onTabChange: props.onTabChange
       });
+      const tabs = useMarketCategories("expandMarkets");
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.MarketsProvider,
         {
           symbol: props.symbol,
           onSymbolChange: props.onSymbolChange,
+          tabs,
           children: /* @__PURE__ */ jsxRuntime.jsx(exports.ExpandMarkets, { ...state })
         }
       );
@@ -3464,7 +3956,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) {
@@ -3854,7 +4346,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) => {
@@ -4308,12 +4800,15 @@ var init_column4 = __esm({
 exports.DropDownMarkets = void 0; exports.DropDownMarketsConetnt = void 0;
 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();
     exports.DropDownMarkets = (props) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(ui.DropdownMenuRoot, { open: props.open, onOpenChange: props.onOpenChange, children: [
@@ -4337,8 +4832,8 @@ var init_dropDownMarkets_ui = __esm({
     };
     exports.DropDownMarketsConetnt = (props) => {
       const { activeTab, onTabChange, tabSort, onTabSort } = props;
-      const { t } = i18n.useTranslation();
       const getColumns = exports.useDropDownMarketsColumns();
+      const builtInTitles = useBuiltInTitles();
       const search = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-dropDownMarkets-search", mx: 3, gapX: 3, pt: 3, pb: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           SearchInput,
@@ -4360,22 +4855,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__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
           exports.MarketsListWidget,
           {
-            type,
-            initialSort: tabSort[type],
-            onSort: onTabSort(type),
+            type: tabType,
+            initialSort: tabSort[tabType],
+            onSort: onTabSort(tabType),
             getColumns,
             tableClassNames: {
               root: ui.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 */);
               }
@@ -4383,6 +4880,52 @@ var init_dropDownMarkets_ui = __esm({
           }
         ) });
       };
+      const renderCommunityContent = () => {
+        return /* @__PURE__ */ jsxRuntime.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: ui.cn("oui-dropDownMarkets-community-tabs", cls3),
+            showScrollIndicator: true,
+            renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
+              exports.MarketsListWidget,
+              {
+                type: "all" /* All */,
+                initialSort: tabSort["community" /* Community */],
+                onSort: onTabSort("community" /* Community */),
+                getColumns,
+                tableClassNames: {
+                  root: ui.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__ */ jsxRuntime.jsx("div", { className: cls3, children: /* @__PURE__ */ jsxRuntime.jsx(
+          exports.MarketsListWidget,
+          {
+            type: "all" /* All */,
+            dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+            initialSort: tabSort[key],
+            onSort: onTabSort(key),
+            getColumns,
+            tableClassNames: {
+              root: ui.cn("oui-dropDownMarkets-list", "!oui-bg-base-8"),
+              scroll: "oui-pb-5 oui-px-1"
+            },
+            rowClassName: "!oui-h-[34px]"
+          }
+        ) });
+      };
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Box,
         {
@@ -4394,7 +4937,7 @@ var init_dropDownMarkets_ui = __esm({
           intensity: 800,
           children: [
             search,
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               ui.Tabs,
               {
                 variant: "contained",
@@ -4402,72 +4945,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: ui.cn("oui-dropDownMarkets-tabs", cls3),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-favorites-trigger",
-                        content: "oui-tabs-favorites-content"
-                      },
-                      title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
-                      value: "favorites" /* Favorites */,
-                      children: renderTab("favorites" /* Favorites */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-all-trigger",
-                        content: "oui-tabs-all-content"
-                      },
-                      title: t("common.all"),
-                      value: "all" /* All */,
-                      children: renderTab("all" /* All */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-rwa-trigger",
-                        content: "oui-tabs-rwa-content"
-                      },
-                      title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
-                      value: "rwa" /* Rwa */,
-                      children: renderTab("rwa" /* Rwa */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    ui.TabPanel,
-                    {
-                      classNames: {
-                        trigger: "oui-tabs-newListings-trigger",
-                        content: "oui-tabs-newListings-content"
-                      },
-                      title: t("markets.newListings"),
-                      value: "newListing" /* NewListing */,
-                      children: renderTab("newListing" /* NewListing */)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                     ui.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__ */ jsxRuntime.jsx(RwaTab, {})),
+                      value: key,
+                      children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                    },
+                    key
+                  );
+                })
               }
             )
           ]
@@ -4516,15 +5018,18 @@ exports.DropDownMarketsWidget = void 0;
 var init_dropDownMarkets_widget = __esm({
   "src/components/dropDownMarkets/dropDownMarkets.widget.tsx"() {
     init_marketsProvider();
+    init_useMarketCategories();
     init_dropDownMarkets_script();
     init_dropDownMarkets_ui();
     exports.DropDownMarketsWidget = (props) => {
       const state = useDropDownMarketsScript();
+      const tabs = useMarketCategories("dropDownMarkets");
       return /* @__PURE__ */ jsxRuntime.jsx(
         exports.MarketsProvider,
         {
           symbol: props.symbol,
           onSymbolChange: props.onSymbolChange,
+          tabs,
           children: /* @__PURE__ */ jsxRuntime.jsx(exports.DropDownMarkets, { ...state, contentClassName: props.contentClassName, children: props.children })
         }
       );
@@ -4665,26 +5170,47 @@ var init_marketItem_ui = __esm({
     exports.MarketItem.displayName = "MarketItem";
   }
 });
-var marketTypeBase; exports.MarketTypeFilter = void 0;
+exports.MarketTypeFilter = void 0;
 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();
     exports.MarketTypeFilter = (props) => {
       const {
         selectedMarketType,
         onMarketTypeChange,
         className,
-        position = "bottom"
+        position = "bottom",
+        tabs
       } = props;
+      const { t } = i18n.useTranslation();
+      const orderedOptions = React6__default.default.useMemo(() => {
+        if (!tabs) return [];
+        return tabs.filter(
+          (tab) => isCustomMarketTab(tab) || isBuiltInMarketTab(tab) && tab.type !== "favorites"
+        );
+      }, [tabs]);
+      const hasFavoritesTab = React6__default.default.useMemo(() => {
+        return tabs?.some(
+          (tab) => isBuiltInMarketTab(tab) && tab.type === "favorites"
+        );
+      }, [tabs]);
       const [isOpen, setIsOpen] = React6.useState(false);
       const dropdownRef = React6.useRef(null);
       const [, favorite] = hooks.useMarkets(hooks.MarketsType.FAVORITES);
       const hasFavorites = (favorite?.favorites?.length || 0) > 0;
+      const titleOverrides = React6__default.default.useMemo(
+        () => ({
+          all: t("markets.allMarkets"),
+          newListing: t("markets.newListings"),
+          recent: t("markets.recent")
+        }),
+        [t]
+      );
+      const getOptionLabel = React6.useCallback(
+        (tab) => resolveTabTitle(tab, titleOverrides, t("common.rwa")),
+        [t, titleOverrides]
+      );
       React6.useEffect(() => {
         const handleClickOutside = (event) => {
           if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -4750,41 +5276,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__ */ jsxRuntime.jsxs(
-                        ui.Flex,
-                        {
-                          className: ui.cn("oui-cursor-pointer"),
-                          itemAlign: "center",
-                          onClick: () => handleOptionClick(option.value),
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              ui.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__ */ jsxRuntime.jsx(
-                              "label",
-                              {
-                                htmlFor: `toggle_market_type_${option.value}`,
-                                className: ui.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__ */ jsxRuntime.jsxs(
+                          ui.Flex,
+                          {
+                            className: ui.cn("oui-cursor-pointer"),
+                            itemAlign: "center",
+                            onClick: () => handleOptionClick(optionValue),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                ui.Checkbox,
+                                {
+                                  "data-testid": `oui-testid-marketType-${optionValue}-checkBox`,
+                                  id: htmlId,
+                                  className: "oui-peer",
+                                  color: "white",
+                                  checked: isActive
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "label",
+                                {
+                                  htmlFor: htmlId,
+                                  className: ui.cn(
+                                    "oui-text-2xs oui-ml-1",
+                                    "oui-break-normal oui-whitespace-nowrap oui-cursor-pointer"
+                                  ),
+                                  children: getOptionLabel(tab)
+                                }
+                              )
+                            ]
+                          },
+                          optionValue
+                        );
+                      })
                     }
                   ),
-                  hasFavorites && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  hasFavoritesTab && hasFavorites && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       ui.Divider,
                       {
@@ -4863,6 +5394,7 @@ __export(horizontalMarkets_ui_exports, {
 exports.HorizontalMarkets = void 0;
 var init_horizontalMarkets_ui = __esm({
   "src/components/horizontalMarkets/horizontalMarkets.ui.tsx"() {
+    init_marketsProvider();
     init_marketItem_ui();
     init_marketTypeFilter_ui();
     exports.HorizontalMarkets = React6__default.default.memo((props) => {
@@ -4876,6 +5408,7 @@ var init_horizontalMarkets_ui = __esm({
         className,
         dropdownPos
       } = props;
+      const { tabs } = useMarketsContext();
       const renderMarketItem = React6__default.default.useCallback(
         (symbol, index) => {
           const data = tickerData[symbol];
@@ -4934,7 +5467,8 @@ var init_horizontalMarkets_ui = __esm({
                   {
                     selectedMarketType,
                     onMarketTypeChange,
-                    position: dropdownPos
+                    position: dropdownPos,
+                    tabs
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -5151,12 +5685,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 = {
@@ -5193,8 +5730,10 @@ var MarketTabPanel = ({
 };
 var SubMenuMarkets = (props) => {
   const { activeTab, onTabChange, className, tabSort, onTabSort } = props;
-  const { t } = i18n.useTranslation();
   const { getFavoritesProps } = useFavoritesProps();
+  const builtInTitles = useBuiltInTitles();
+  const { tabs } = useMarketsContext();
+  const tabDataFilters = useCustomTabDataFilters(tabs);
   const getColumns = (_favorite, _isFavoritesList) => {
     return [
       {
@@ -5214,6 +5753,71 @@ var SubMenuMarkets = (props) => {
       }
     ];
   };
+  const renderBuiltInContent = (tabType) => {
+    if (tabType === "favorites" /* Favorites */) {
+      const favProps = getFavoritesProps("favorites" /* Favorites */);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MarketTabPanel,
+        {
+          type: "favorites" /* Favorites */,
+          getColumns,
+          dataFilter: favProps?.dataFilter,
+          renderHeader: (favorite) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesTabWidget, { favorite, size: "sm" }) }),
+          initialSort: tabSort["favorites" /* Favorites */],
+          onSort: onTabSort("favorites" /* Favorites */),
+          emptyView: /* @__PURE__ */ jsxRuntime.jsx(ui.EmptyDataState, {})
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MarketTabPanel,
+      {
+        type: tabType,
+        getColumns,
+        initialSort: tabSort[tabType],
+        onSort: onTabSort(tabType)
+      }
+    );
+  };
+  const renderCommunityContent = () => {
+    return /* @__PURE__ */ jsxRuntime.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: ui.cn("oui-subMenuMarkets-community-tabs", cls2),
+        showScrollIndicator: true,
+        renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx(
+          MarketTabPanel,
+          {
+            type: "all" /* All */,
+            getColumns,
+            dataFilter: createCommunityBrokerFilter(selected),
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */)
+          }
+        )
+      }
+    );
+  };
+  const renderCustomContent = (key) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls2, children: /* @__PURE__ */ jsxRuntime.jsx(
+      exports.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__ */ jsxRuntime.jsxs(
     ui.Box,
     {
@@ -5224,7 +5828,7 @@ var SubMenuMarkets = (props) => {
       height: "100%",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-p-1", children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazySearchInput3, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tabs,
           {
             variant: "contained",
@@ -5238,114 +5842,24 @@ var SubMenuMarkets = (props) => {
             },
             className: ui.cn(cls2, "oui-subMenuMarkets-tabs oui-my-1.5"),
             showScrollIndicator: true,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-favorites-trigger",
-                    content: "oui-tabs-favorites-content"
-                  },
-                  title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
-                  value: "favorites" /* Favorites */,
-                  children: (() => {
-                    const favProps = getFavoritesProps("favorites" /* Favorites */);
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      MarketTabPanel,
-                      {
-                        type: "favorites" /* Favorites */,
-                        getColumns,
-                        dataFilter: favProps?.dataFilter,
-                        renderHeader: (favorite) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: "oui-px-1 oui-my-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesTabWidget, { favorite, size: "sm" }) }),
-                        initialSort: tabSort["favorites" /* Favorites */],
-                        onSort: onTabSort("favorites" /* Favorites */),
-                        emptyView: /* @__PURE__ */ jsxRuntime.jsx(ui.EmptyDataState, {})
-                      }
-                    );
-                  })()
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-all-trigger",
-                    content: "oui-tabs-all-content"
-                  },
-                  title: t("common.all"),
-                  value: "all" /* All */,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    MarketTabPanel,
-                    {
-                      type: "all" /* All */,
-                      getColumns,
-                      initialSort: tabSort["all" /* All */],
-                      onSort: onTabSort("all" /* All */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-rwa-trigger",
-                    content: "oui-tabs-rwa-content"
-                  },
-                  title: /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {}),
-                  value: "rwa" /* Rwa */,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    MarketTabPanel,
-                    {
-                      type: "rwa" /* Rwa */,
-                      getColumns,
-                      initialSort: tabSort["rwa" /* Rwa */],
-                      onSort: onTabSort("rwa" /* Rwa */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-newListings-trigger",
-                    content: "oui-tabs-newListings-content"
-                  },
-                  title: t("markets.newListings"),
-                  value: "newListing" /* NewListing */,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    MarketTabPanel,
-                    {
-                      type: "newListing" /* NewListing */,
-                      getColumns,
-                      initialSort: tabSort["newListing" /* NewListing */],
-                      onSort: onTabSort("newListing" /* NewListing */)
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+            children: tabs?.map((tab, index) => {
+              const key = tabKey(tab, index);
+              const isBuiltIn = isBuiltInMarketTab(tab);
+              const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+              return /* @__PURE__ */ jsxRuntime.jsx(
                 ui.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__ */ jsxRuntime.jsx(
-                    MarketTabPanel,
-                    {
-                      type: "recent" /* Recent */,
-                      getColumns,
-                      initialSort: tabSort["recent" /* Recent */],
-                      onSort: onTabSort("recent" /* Recent */)
-                    }
-                  )
-                }
-              )
-            ]
+                  title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsxRuntime.jsx(RwaIconTab, {})),
+                  value: key,
+                  children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                },
+                key
+              );
+            })
           }
         )
       ]
@@ -5355,6 +5869,7 @@ var SubMenuMarkets = (props) => {
 
 // src/components/subMenuMarkets/subMenuMarkets.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 
 // src/components/subMenuMarkets/subMenuMarkets.script.ts
 init_constant();
@@ -5399,11 +5914,13 @@ var SubMenuMarketsWidget = (props) => {
     activeTab: props.activeTab,
     onTabChange: props.onTabChange
   });
+  const tabs = useMarketCategories("subMenuMarkets");
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.MarketsProvider,
     {
       symbol: props.symbol,
       onSymbolChange: props.onSymbolChange,
+      tabs,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SubMenuMarkets,
         {
@@ -5482,12 +5999,15 @@ 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_column();
@@ -5504,14 +6024,17 @@ var MarketsSheet = (props) => {
   const { className, tabSort, onTabSort } = props;
   const { t } = i18n.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__ */ jsxRuntime.jsx(
       exports.MarketsListWidget,
       {
-        type,
-        initialSort: tabSort[type],
-        onSort: onTabSort(type),
+        type: tabType,
+        initialSort: tabSort[tabType],
+        onSort: onTabSort(tabType),
         getColumns: getMarketsSheetColumns,
         tableClassNames: {
           root: ui.cn("oui-marketsSheet-list", "!oui-bg-base-8"),
@@ -5521,12 +6044,65 @@ var MarketsSheet = (props) => {
           )
         },
         emptyView: renderEmptyView({
-          type,
+          type: tabType,
           onClick: () => {
             props.onTabChange("all" /* All */);
           }
         }),
-        ...getFavoritesProps(type)
+        ...getFavoritesProps(tabType)
+      }
+    );
+  };
+  const renderCommunityContent = () => {
+    return /* @__PURE__ */ jsxRuntime.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: ui.cn(
+          "oui-marketsSheet-community-tabs",
+          "oui-h-[calc(100%_-_36px)]"
+        ),
+        showScrollIndicator: true,
+        renderPanel: (selected) => /* @__PURE__ */ jsxRuntime.jsx(
+          exports.MarketsListWidget,
+          {
+            type: "all" /* All */,
+            initialSort: tabSort["community" /* Community */],
+            onSort: onTabSort("community" /* Community */),
+            getColumns: getMarketsSheetColumns,
+            tableClassNames: {
+              root: ui.cn("oui-marketsSheet-list", "!oui-bg-base-8"),
+              scroll: ui.cn(
+                "oui-pb-[env(safe-area-inset-bottom,_20px)]",
+                "oui-h-[calc(100%_-_40px)]"
+              )
+            },
+            dataFilter: createCommunityBrokerFilter(selected)
+          }
+        )
+      }
+    );
+  };
+  const renderCustomContent = (key) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      exports.MarketsListWidget,
+      {
+        type: "all" /* All */,
+        dataFilter: (data) => tabDataFilters[key]?.(data) ?? data,
+        initialSort: tabSort[key],
+        onSort: onTabSort(key),
+        getColumns: getMarketsSheetColumns,
+        tableClassNames: {
+          root: ui.cn("oui-marketsSheet-list", "!oui-bg-base-8"),
+          scroll: ui.cn(
+            "oui-pb-[env(safe-area-inset-bottom,_20px)]",
+            "oui-h-[calc(100%_-_40px)]"
+          )
+        }
       }
     );
   };
@@ -5545,7 +6121,7 @@ var MarketsSheet = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tabs,
           {
             variant: "contained",
@@ -5559,44 +6135,24 @@ var MarketsSheet = (props) => {
             },
             className: ui.cn("oui-marketsSheet-tabs", "oui-h-[calc(100%_-_92px)]"),
             showScrollIndicator: true,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-favorites-trigger",
-                    content: "oui-tabs-favorites-content"
-                  },
-                  title: /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon, {}),
-                  value: "favorites" /* Favorites */,
-                  children: renderTab("favorites" /* Favorites */)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.TabPanel,
-                {
-                  classNames: {
-                    trigger: "oui-tabs-all-trigger",
-                    content: "oui-tabs-all-content"
-                  },
-                  title: t("common.all"),
-                  value: "all" /* All */,
-                  children: renderTab("all" /* All */)
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+            children: tabs?.map((tab, index) => {
+              const key = tabKey(tab, index);
+              const isBuiltIn = isBuiltInMarketTab(tab);
+              const isCommunity = isBuiltIn && tab.type === "community" /* Community */;
+              return /* @__PURE__ */ jsxRuntime.jsx(
                 ui.TabPanel,
                 {
                   classNames: {
-                    trigger: "oui-tabs-rwa-trigger",
-                    content: "oui-tabs-rwa-content"
+                    trigger: `oui-tabs-${key}-trigger`,
+                    content: `oui-tabs-${key}-content`
                   },
-                  title: /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {}),
-                  value: "rwa" /* Rwa */,
-                  children: renderTab("rwa" /* Rwa */)
-                }
-              )
-            ]
+                  title: resolveTabTitle(tab, builtInTitles, /* @__PURE__ */ jsxRuntime.jsx(RwaTab, {})),
+                  value: key,
+                  children: isCommunity ? renderCommunityContent() : isBuiltIn ? renderBuiltInContent(tab.type) : renderCustomContent(key)
+                },
+                key
+              );
+            })
           }
         )
       ]
@@ -5627,13 +6183,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__ */ jsxRuntime.jsx(
     exports.MarketsProvider,
     {
       symbol: props.symbol,
       onSymbolChange: props.onSymbolChange,
+      tabs,
       children: /* @__PURE__ */ jsxRuntime.jsx(MarketsSheet, { ...state, className: props.className })
     }
   );
@@ -5641,6 +6200,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;
@@ -5797,7 +6357,7 @@ var SymbolInfoBar = (props) => {
       className: "oui-h-5 oui-cursor-pointer oui-gap-x-[6px]",
       onClick: onSymbol,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "sm", children: symbol }),
+        /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "sm", showBadge: false, children: symbol }),
         /* @__PURE__ */ jsxRuntime.jsx(TriangleDownIcon, { className: "oui-size-[14px] oui-text-base-contrast-54" })
       ]
     }
@@ -5805,32 +6365,37 @@ var SymbolInfoBar = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
+      intensity: 900,
+      mx: 1,
+      px: 3,
+      py: 2,
       className: ui.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__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 3, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, size: "xs" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
               symbolView,
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
                   leverage,
                   "x"
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  RwaTooltip,
-                  {
-                    isRwa,
-                    open,
-                    closeTimeInterval,
-                    openTimeInterval
-                  }
-                )
-              ] })
+                /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                RwaTooltip,
+                {
+                  isRwa,
+                  open,
+                  closeTimeInterval,
+                  openTimeInterval
+                }
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-h-[38px]", direction: "vertical", intensity: 8 }),
@@ -6040,6 +6605,7 @@ var FundingRateHintWidget = (props) => {
 };
 
 // src/components/symbolInfoBarFull/symbolInfoBarFull.ui.tsx
+init_symbolBadge();
 init_symbolDisplay();
 var LazyDropDownMarketsWidget = React6__default.default.lazy(
   () => Promise.resolve().then(() => (init_dropDownMarkets(), dropDownMarkets_exports)).then((mod) => {
@@ -6056,6 +6622,92 @@ var LazyDataItem = React6__default.default.lazy(
     return { default: mod.DataItem };
   })
 );
+var RISK_NOTICE_LEARN_MORE_URL = "https://orderly.network";
+var SymbolInfoBarRiskNotice = ({ className, visible, symbolWithBroker, brokerName, autoHeight }) => {
+  const { t } = i18n.useTranslation();
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: RISK_NOTICE_LEARN_MORE_URL,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: ui.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__ */ jsxRuntime.jsxs(
+        ui.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__ */ jsxRuntime.jsx(ui.WarningIcon, { className: "oui-shrink-0 oui-size-4 oui-text-warning-darken" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xs", className: "oui-text-warning-darken oui-flex-1", children: [
+              t("markets.symbolInfoBar.riskNotice.content", {
+                symbolWithBroker,
+                brokerName
+              }),
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-underline", children: t("common.learnMore") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var SymbolInfoBarDesktop = ({
+  className,
+  trailing,
+  leftSection,
+  priceSection,
+  scrollableContent,
+  containerRef,
+  leadingVisible,
+  tailingVisible,
+  onScroll
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ui.Flex,
+  {
+    intensity: 900,
+    r: "2xl",
+    mt: 1,
+    px: 3,
+    className: ui.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__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 6, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { gapX: 1, className: "oui-flex-none oui-shrink-0", children: leftSection }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-h-[26px]", direction: "vertical", intensity: 8 }),
+        priceSection,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative oui-h-full oui-overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: containerRef,
+              className: "oui-hide-scrollbar oui-h-full oui-overflow-x-auto",
+              children: scrollableContent
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollIndicator2, { leading: true, onClick: onScroll, visible: leadingVisible }),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollIndicator2, { tailing: true, onClick: onScroll, visible: tailingVisible })
+        ] })
+      ] }),
+      trailing
+    ]
+  }
+);
 var SymbolInfoBarFull = (props) => {
   const {
     symbol,
@@ -6081,6 +6733,10 @@ var SymbolInfoBarFull = (props) => {
     showCountdown
   } = props;
   const { t } = i18n.useTranslation();
+  const { brokerId, brokerName, brokerNameRaw, displayName } = hooks.useBadgeBySymbol(symbol);
+  const isCommunityListed = Boolean(brokerId ?? brokerName);
+  const baseFromSymbol = symbol?.split("_")[1] ?? symbol;
+  const symbolWithBroker = brokerName != null ? `${baseFromSymbol}-${brokerNameRaw}` : displayName ?? symbol;
   const favoriteIcon = /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyFavoritesDropdownMenuWidget, { row: { symbol }, favorite, children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.Flex,
     {
@@ -6105,7 +6761,7 @@ var SymbolInfoBarFull = (props) => {
             contentClassName: "oui-w-[580px] oui-h-[496px]",
             symbol: props.symbol,
             onSymbolChange: props.onSymbolChange,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, className: "oui-cursor-pointer", children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol, className: "oui-size-4" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 exports.SymbolDisplay,
@@ -6113,22 +6769,26 @@ var SymbolInfoBarFull = (props) => {
                   formatString: "base",
                   size: "xs",
                   className: "oui-text-base-contrast",
+                  showBadge: false,
                   children: symbol
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(TriangleDownIcon, { className: "oui-text-base-contrast-54" })
-            ] })
+            ] }) })
           }
         ),
-        isRwa && /* @__PURE__ */ jsxRuntime.jsx(
-          RwaTooltip,
-          {
-            isRwa,
-            open,
-            closeTimeInterval,
-            openTimeInterval
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SymbolBadge, { symbol }),
+          isRwa && /* @__PURE__ */ jsxRuntime.jsx(
+            RwaTooltip,
+            {
+              isRwa,
+              open,
+              closeTimeInterval,
+              openTimeInterval
+            }
+          )
+        ] })
       ]
     }
   ) });
@@ -6157,129 +6817,92 @@ var SymbolInfoBarFull = (props) => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", className: "oui-h-full oui-w-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Flex,
+  const leftSection = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    favoriteIcon,
+    symbolView
+  ] });
+  const priceSection = /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Tooltip,
+    {
+      content: t("markets.symbolInfoBar.lastPrice.tooltip"),
+      className: "oui-max-w-[240px]",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-inline-block", children: price })
+    }
+  );
+  const scrollableContent = /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 8, height: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leadingElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyDataItem, { label: t("markets.column.24hChange"), value: change }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      LazyDataItem,
       {
-        className: ui.cn(
-          "oui-symbol-info-bar-desktop",
-          "oui-font-semibold",
-          "oui-flex-1 oui-w-full",
-          props.className
+        label: t("markets.symbolInfoBar.Mark"),
+        value: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text.numeral,
+          {
+            dp: quotoDp,
+            "data-testid": "oui-testid-tokenInfo-markPrice-value",
+            children: data?.["mark_price"]
+          }
         ),
-        style: {
-          transform: "translateZ(0)",
-          willChange: "transform"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 6, className: "oui-h-full oui-flex-1 oui-overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
-              favoriteIcon,
-              symbolView
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Divider,
-              {
-                className: "oui-h-[26px]",
-                direction: "vertical",
-                intensity: 8
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tooltip,
-              {
-                content: t("markets.symbolInfoBar.lastPrice.tooltip"),
-                className: "oui-max-w-[240px]",
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-cursor-pointer oui-border-b oui-border-dashed oui-border-line-12 oui-inline-block", children: price })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative oui-h-full oui-overflow-hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: containerRef,
-                  className: "oui-hide-scrollbar oui-h-full oui-overflow-x-auto",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 8, height: "100%", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: leadingElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.column.24hChange"),
-                        value: change
-                      }
-                    ) }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.Mark"),
-                        value: /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Text.numeral,
-                          {
-                            dp: quotoDp,
-                            "data-testid": "oui-testid-tokenInfo-markPrice-value",
-                            children: data?.["mark_price"]
-                          }
-                        ),
-                        hint: t("markets.symbolInfoBar.Mark.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.Index"),
-                        value: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quotoDp, children: data?.["index_price"] }),
-                        hint: t("markets.symbolInfoBar.Index.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.24hVolume"),
-                        value: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, children: data?.["24h_amount"] }),
-                        hint: t("markets.symbolInfoBar.24hVolume.tooltip")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.symbolInfoBar.predFundingRate"),
-                        value: /* @__PURE__ */ jsxRuntime.jsx(FundingRate, { symbol }),
-                        hint: /* @__PURE__ */ jsxRuntime.jsx(FundingRateHintWidget, { symbol })
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tailingElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      LazyDataItem,
-                      {
-                        label: t("markets.openInterest"),
-                        value: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, children: openInterest }),
-                          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, children: ` USDC` })
-                        ] }),
-                        hint: t("markets.openInterest.tooltip")
-                      }
-                    ) }) })
-                  ] })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ScrollIndicator2,
-                {
-                  leading: true,
-                  onClick: onScoll,
-                  visible: leadingVisible
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ScrollIndicator2,
-                {
-                  tailing: true,
-                  onClick: onScoll,
-                  visible: tailingVisible
-                }
-              )
-            ] })
-          ] }),
-          props.trailing
-        ]
+        hint: t("markets.symbolInfoBar.Mark.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.Index"),
+        value: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: quotoDp, children: data?.["index_price"] }),
+        hint: t("markets.symbolInfoBar.Index.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.24hVolume"),
+        value: /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, children: data?.["24h_amount"] }),
+        hint: t("markets.symbolInfoBar.24hVolume.tooltip")
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      LazyDataItem,
+      {
+        label: t("markets.symbolInfoBar.predFundingRate"),
+        value: /* @__PURE__ */ jsxRuntime.jsx(FundingRate, { symbol }),
+        hint: /* @__PURE__ */ jsxRuntime.jsx(FundingRateHintWidget, { symbol })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tailingElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+      LazyDataItem,
+      {
+        label: t("markets.openInterest"),
+        value: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, children: openInterest }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 36, children: ` USDC` })
+        ] }),
+        hint: t("markets.openInterest.tooltip")
+      }
+    ) }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", className: "oui-h-full oui-w-full", gapY: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SymbolInfoBarRiskNotice,
+      {
+        visible: isCommunityListed,
+        symbolWithBroker,
+        brokerName: brokerNameRaw ?? brokerName ?? ""
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SymbolInfoBarDesktop,
+      {
+        className: props.className,
+        trailing: props.trailing,
+        leftSection,
+        priceSection,
+        scrollableContent,
+        containerRef,
+        leadingVisible,
+        tailingVisible,
+        onScroll: onScoll
       }
     ),
     showCountdown && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6480,34 +7103,57 @@ var SymbolInfoBarFullWidget = (props) => {
 
 // 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] = hooks.useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY,
     defaultMarketType || "all"
   );
+  const availableMarketTypes = React6.useMemo(
+    () => tabs?.map((tab, index) => tabKey(tab, index)) ?? ["all"],
+    [tabs]
+  );
   const MarketsTypeMap3 = {
     all: hooks.MarketsType.ALL,
     recent: hooks.MarketsType.RECENT,
     newListing: hooks.MarketsType.NEW_LISTING,
     favorites: hooks.MarketsType.FAVORITES
   };
-  const marketTypeKey = selectedMarketType || "all";
+  const isCustomCategory = typeof selectedMarketType === "string" && !MarketsTypeMap3[selectedMarketType];
+  const marketTypeKey = isCustomCategory ? "all" : selectedMarketType || "all";
   const [markets, favorite] = hooks.useMarkets(
     MarketsTypeMap3[marketTypeKey] || hooks.MarketsType.ALL
   );
+  React6.useEffect(() => {
+    if (!availableMarketTypes.includes(selectedMarketType)) {
+      setSelectedMarketType(availableMarketTypes[0] ?? "all");
+    }
+  }, [availableMarketTypes, selectedMarketType, setSelectedMarketType]);
+  const customCategoryFilter = React6.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 = React6.useMemo(() => {
+    if (isCustomCategory && customCategoryFilter) {
+      return customCategoryFilter(markets);
+    }
     if (selectedMarketType === "favorites") {
       const { favorites, selectedFavoriteTab } = favorite;
       const symbolsInTab = favorites?.filter(
@@ -6529,7 +7175,9 @@ var useHorizontalMarketsScript = (options) => {
     favorite.favorites,
     favorite.selectedFavoriteTab,
     favorite.recent,
-    selectedMarketType
+    selectedMarketType,
+    isCustomCategory,
+    customCategoryFilter
   ]);
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
@@ -6614,7 +7262,8 @@ var HorizontalMarketsWidget = (props) => {
     dropdownPos,
     ...providerProps
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(exports.MarketsProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const tabs = useMarketCategories("horizontalMarkets");
+  return /* @__PURE__ */ jsxRuntime.jsx(exports.MarketsProvider, { ...providerProps, tabs, children: /* @__PURE__ */ jsxRuntime.jsx(
     HorizontalMarketsInner,
     {
       symbols,
@@ -6854,6 +7503,7 @@ init_type();
 
 // src/pages/home/page.tsx
 init_marketsProvider();
+init_useMarketCategories();
 init_type();
 var LazyMarketsHeaderWidget = React6__default.default.lazy(
   () => Promise.resolve().then(() => (init_marketsHeader_widget(), marketsHeader_widget_exports)).then((mod) => {
@@ -6875,6 +7525,7 @@ var MarketsHomePage = (props) => {
   const [activeTab, setActiveTab] = React6.useState(
     "markets" /* Markets */
   );
+  const tabs = useMarketCategories("marketsDataList");
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.MarketsProvider,
     {
@@ -6882,6 +7533,7 @@ var MarketsHomePage = (props) => {
       onSymbolChange: props.onSymbolChange,
       navProps: props.navProps,
       comparisonProps: props.comparisonProps,
+      tabs,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7005,6 +7657,7 @@ var MarketsMobileContent = (props) => {
 // src/index.ts
 init_marketsProvider();
 init_symbolDisplay();
+init_builtInTabRegistry();
 
 exports.FavoritesList = FavoritesList;
 exports.FavoritesListWidget = FavoritesListWidget;
@@ -7022,6 +7675,7 @@ exports.SubMenuMarketsWidget = SubMenuMarketsWidget;
 exports.SymbolInfoBar = SymbolInfoBar;
 exports.SymbolInfoBarFull = SymbolInfoBarFull;
 exports.SymbolInfoBarFullWidget = SymbolInfoBarFullWidget;
+exports.SymbolInfoBarRiskNotice = SymbolInfoBarRiskNotice;
 exports.SymbolInfoBarWidget = SymbolInfoBarWidget;
 exports.useDropDownMarketsScript = useDropDownMarketsScript;
 exports.useExpandMarketsScript = useExpandMarketsScript;