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

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,14 +125,25 @@ 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
+        }
+      );
     });
   }
 });
-var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, ExpandIcon, CollapseIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
+var EditIcon, TrashIcon, AllMarketsIcon, NewListingsIcon, FavoritesIcon, UnFavoritesIcon, SearchIcon, MoveToTopIcon, OrderlyIcon, FavoritesIcon2, UnFavoritesIcon2, TopIcon, DeleteIcon, AddIcon, ActiveAddIcon, FilterIcon, TriangleDownIcon, ArrowLeftIcon;
 var init_icons = __esm({
   "src/icons.tsx"() {
     EditIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -372,30 +440,6 @@ var init_icons = __esm({
         ]
       }
     );
-    ExpandIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
-      }
-    );
-    CollapseIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "16",
-        height: "16",
-        viewBox: "0 0 16 16",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
-      }
-    );
     FilterIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -1082,6 +1126,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 +1321,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 +1433,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,185 +1648,233 @@ 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;
+function getSymbolColumn(favorite, isFavoriteList = false, options) {
+  return {
+    title: i18n.i18n.t("common.symbol"),
+    dataIndex: "symbol",
+    width: 150,
+    onSort: true,
+    render: (value, record) => {
+      let favoritesIcon;
+      if (!isFavoriteList) {
+        favoritesIcon = /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Flex,
+          {
+            width: 12,
+            height: 12,
+            justify: "center",
+            itemAlign: "center",
+            className: "oui-mr-1 oui-cursor-pointer",
+            children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
+          }
+        ) });
       }
+      const stackLeverageInSecondRow = options?.stackLeverageInSecondRow;
+      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, itemAlign: "center", children: [
+        favoritesIcon,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: stackLeverageInSecondRow ? "column" : "row",
+            itemAlign: stackLeverageInSecondRow ? "start" : "center",
+            gapY: stackLeverageInSecondRow ? 1 : void 0,
+            gapX: stackLeverageInSecondRow ? void 0 : 1,
+            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", record, children: value })
+              ] }),
+              typeof record.leverage === "number" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
+                record.leverage,
+                "x"
+              ] })
+            ]
+          }
+        )
+      ] });
+    }
+  };
+}
+function getLastColumn() {
+  return {
+    title: i18n.i18n.t("markets.column.last"),
+    dataIndex: "24h_close",
+    align: "right",
+    onSort: true,
+    width: 100,
+    render: (value, record) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
+    }
+  };
+}
+function get24hPercentageColumn() {
+  return {
+    title: i18n.i18n.t("markets.column.24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    width: 80,
+    render: (value) => {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Tooltip,
+        ui.Text.numeral,
         {
-          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"
-            }
-          ) })
+          rule: "percentages",
+          coloring: true,
+          rm: utils.Decimal.ROUND_DOWN,
+          showIdentifier: true,
+          size: "2xs",
+          children: value
         }
       );
-    };
-  }
-});
-var useSideMarketsColumns;
-var init_column = __esm({
-  "src/components/sideMarkets/column.tsx"() {
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
-      const { t } = i18n.useTranslation();
-      return [
+    }
+  };
+}
+function get24hVolOIColumn() {
+  return {
+    title: i18n.i18n.t("markets.column.24hVolOI"),
+    dataIndex: "24h_amount",
+    align: "right",
+    className: "oui-h-[36px]",
+    width: 100,
+    multiSort: {
+      fields: [
         {
-          title: `${t("markets.column.market")} / ${t("common.volume")}`,
-          dataIndex: "24h_amount",
-          multiSort: {
-            fields: [
-              {
-                sortKey: "symbol",
-                label: t("markets.column.market")
-              },
-              {
-                sortKey: "24h_amount",
-                label: t("common.volume")
-              }
-            ]
-          },
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            let favoritesIcon;
-            if (!isFavoriteList) {
-              favoritesIcon = /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Flex,
-                {
-                  width: 12,
-                  height: 12,
-                  justify: "center",
-                  itemAlign: "center",
-                  className: "oui-mr-1 oui-cursor-pointer",
-                  children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-                }
-              ) });
-            }
-            return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
-              favoritesIcon,
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { symbol: record.symbol, className: "oui-size-[18px]" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.SymbolDisplay, { formatString: "base", size: "2xs", children: record.symbol }),
-                  /* @__PURE__ */ jsxRuntime.jsx(RwaDotTooltip, { record }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
-                    record.leverage,
-                    "x"
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text.numeral,
-                  {
-                    intensity: 54,
-                    size: "2xs",
-                    rule: "human",
-                    dp: 2,
-                    rm: utils.Decimal.ROUND_DOWN,
-                    children: value
-                  }
-                )
-              ] })
-            ] });
-          }
+          sortKey: "24h_amount",
+          label: i18n.i18n.t("markets.column.24hVol")
         },
         {
-          title: t("markets.column.price&Change"),
-          dataIndex: "change",
-          align: "right",
-          onSort: true,
-          className: "oui-h-[36px]",
-          render: (value, record) => {
-            const onDelSymbol = (e) => {
-              favorite.updateSymbolFavoriteState(
-                record,
-                favorite.selectedFavoriteTab,
-                true
-              );
-              e.stopPropagation();
-            };
-            const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
-            const actions = /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ui.cn(
-                  "oui-absolute oui-right-0 oui-top-[6.5px]",
-                  "oui-hidden group-hover:oui-block"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  ui.Flex,
-                  {
-                    className: ui.cn(
-                      "oui-inline-flex",
-                      "oui-bg-primary-darken oui-py-[6px]"
-                    ),
-                    r: "base",
-                    width: 52,
-                    justify: "center",
-                    itemAlign: "end",
-                    gapX: 2,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TopIcon,
-                        {
-                          className: iconCls,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            favorite.pinToTop(record);
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-                    ]
+          sortKey: "openInterest",
+          label: i18n.i18n.t("markets.column.OI")
+        }
+      ]
+    },
+    render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, rm: utils.Decimal.ROUND_DOWN, children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Text.numeral,
+        {
+          rule: "human",
+          dp: 2,
+          rm: utils.Decimal.ROUND_DOWN,
+          size: "2xs",
+          intensity: 54,
+          children: record.openInterest
+        }
+      )
+    ] })
+  };
+}
+function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
+  return {
+    title: i18n.i18n.t("markets.column.last&24hPercentage"),
+    dataIndex: "change",
+    align: "right",
+    onSort: true,
+    className: "oui-h-[36px]",
+    width: 100,
+    render: (value, record) => {
+      const onDelSymbol = (e) => {
+        favorite.updateSymbolFavoriteState(
+          record,
+          favorite.selectedFavoriteTab,
+          true
+        );
+        e.stopPropagation();
+      };
+      const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
+      const actions = /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: ui.cn(
+            "oui-absolute oui-right-0 oui-top-[6.5px]",
+            "oui-hidden group-hover:oui-block"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              className: ui.cn(
+                "oui-inline-flex",
+                "oui-bg-primary-darken oui-py-[6px]"
+              ),
+              r: "base",
+              width: 52,
+              justify: "center",
+              itemAlign: "end",
+              gapX: 2,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TopIcon,
+                  {
+                    className: iconCls,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      favorite.pinToTop(record);
+                    }
                   }
-                )
-              }
-            );
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
-              isFavoriteList && actions,
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.Flex,
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
+              ]
+            }
+          )
+        }
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
+        isFavoriteList && actions,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "column",
+            justify: "end",
+            itemAlign: "end",
+            gapY: 1,
+            className: ui.cn(isFavoriteList && "group-hover:oui-invisible"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text.numeral,
                 {
-                  direction: "column",
-                  justify: "end",
-                  itemAlign: "end",
-                  gapY: 1,
-                  className: ui.cn(isFavoriteList && "group-hover:oui-invisible"),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.Text.numeral,
-                      {
-                        rule: "percentages",
-                        coloring: true,
-                        rm: utils.Decimal.ROUND_DOWN,
-                        showIdentifier: true,
-                        size: "2xs",
-                        children: value
-                      }
-                    )
-                  ]
+                  rule: "percentages",
+                  coloring: true,
+                  rm: utils.Decimal.ROUND_DOWN,
+                  showIdentifier: true,
+                  size: "2xs",
+                  children: value
                 }
               )
-            ] });
+            ]
           }
-        }
+        )
+      ] });
+    }
+  };
+}
+var init_column = __esm({
+  "src/components/shared/column.tsx"() {
+    init_icons();
+    init_icons();
+    init_favoritesDropdownMenu();
+    init_symbolDisplay();
+  }
+});
+
+// src/components/sideMarkets/column.tsx
+var useSideMarketsColumns;
+var init_column2 = __esm({
+  "src/components/sideMarkets/column.tsx"() {
+    init_column();
+    useSideMarketsColumns = (favorite, isFavoriteList = false) => {
+      const symbolCol = getSymbolColumn(favorite, isFavoriteList, {
+        stackLeverageInSecondRow: true
+      });
+      const volOiCol = get24hVolOIColumn();
+      const lastPctCol = getLastAnd24hPercentageColumn(favorite, isFavoriteList);
+      return [
+        {
+          ...symbolCol,
+          width: 115
+        },
+        volOiCol,
+        lastPctCol
       ];
     };
   }
@@ -1695,7 +1884,7 @@ var init_marketsList_ui = __esm({
   "src/components/marketsList/marketsList.ui.tsx"() {
     init_collapseMarkets();
     init_marketsProvider();
-    init_column();
+    init_column2();
     exports.MarketsList = (props) => {
       const {
         loading,
@@ -1756,7 +1945,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) => {
@@ -1770,8 +1959,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";
@@ -1787,6 +1983,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,
@@ -1886,18 +2083,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") }) });
     };
   }
 });
@@ -1959,231 +2145,6 @@ var init_searchInput = __esm({
     };
   }
 });
-function getSymbolColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.i18n.t("common.symbol"),
-    dataIndex: "symbol",
-    width: 150,
-    onSort: true,
-    render: (value, record) => {
-      let favoritesIcon;
-      if (!isFavoriteList) {
-        favoritesIcon = /* @__PURE__ */ jsxRuntime.jsx(exports.FavoritesDropdownMenuWidget, { row: record, favorite, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Flex,
-          {
-            width: 12,
-            height: 12,
-            justify: "center",
-            itemAlign: "center",
-            className: "oui-mr-1 oui-cursor-pointer",
-            children: record.isFavorite ? /* @__PURE__ */ jsxRuntime.jsx(FavoritesIcon2, { className: "oui-size-3" }) : /* @__PURE__ */ jsxRuntime.jsx(UnFavoritesIcon2, { className: "oui-size-3" })
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gapX: 1, children: [
-        favoritesIcon,
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gapY: 1, 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.jsxs(ui.Badge, { size: "xs", color: "primary", children: [
-            record.leverage,
-            "x"
-          ] })
-        ] })
-      ] });
-    }
-  };
-}
-function getLastColumn() {
-  return {
-    title: i18n.i18n.t("markets.column.last"),
-    dataIndex: "24h_close",
-    align: "right",
-    onSort: true,
-    width: 100,
-    render: (value, record) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value });
-    }
-  };
-}
-function get24hPercentageColumn() {
-  return {
-    title: i18n.i18n.t("markets.column.24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    width: 80,
-    render: (value) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.numeral,
-        {
-          rule: "percentages",
-          coloring: true,
-          rm: utils.Decimal.ROUND_DOWN,
-          showIdentifier: true,
-          size: "2xs",
-          children: value
-        }
-      );
-    }
-  };
-}
-function get24hVolOIColumn() {
-  return {
-    title: i18n.i18n.t("markets.column.24hVolOI"),
-    dataIndex: "24h_amount",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "24h_amount",
-          label: i18n.i18n.t("markets.column.24hVol")
-        },
-        {
-          sortKey: "openInterest",
-          label: i18n.i18n.t("markets.column.OI")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "human", dp: 2, rm: utils.Decimal.ROUND_DOWN, children: value }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.numeral,
-        {
-          rule: "human",
-          dp: 2,
-          rm: utils.Decimal.ROUND_DOWN,
-          size: "2xs",
-          intensity: 54,
-          children: record.openInterest
-        }
-      )
-    ] })
-  };
-}
-function getLastAnd24hPercentageColumn(favorite, isFavoriteList = false) {
-  return {
-    title: i18n.i18n.t("markets.column.last&24hPercentage"),
-    dataIndex: "change",
-    align: "right",
-    onSort: true,
-    className: "oui-h-[36px]",
-    width: 100,
-    render: (value, record) => {
-      const onDelSymbol = (e) => {
-        favorite.updateSymbolFavoriteState(
-          record,
-          favorite.selectedFavoriteTab,
-          true
-        );
-        e.stopPropagation();
-      };
-      const iconCls = "oui-w-4 oui-h-4 oui-text-base-contrast-54 hover:oui-text-base-contrast";
-      const actions = /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: ui.cn(
-            "oui-absolute oui-right-0 oui-top-[6.5px]",
-            "oui-hidden group-hover:oui-block"
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs(
-            ui.Flex,
-            {
-              className: ui.cn(
-                "oui-inline-flex",
-                "oui-bg-primary-darken oui-py-[6px]"
-              ),
-              r: "base",
-              width: 52,
-              justify: "center",
-              itemAlign: "end",
-              gapX: 2,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TopIcon,
-                  {
-                    className: iconCls,
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      favorite.pinToTop(record);
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, { className: iconCls, onClick: onDelSymbol })
-              ]
-            }
-          )
-        }
-      );
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-relative", children: [
-        isFavoriteList && actions,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Flex,
-          {
-            direction: "column",
-            justify: "end",
-            itemAlign: "end",
-            gapY: 1,
-            className: ui.cn(isFavoriteList && "group-hover:oui-invisible"),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: record["24h_close"] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text.numeral,
-                {
-                  rule: "percentages",
-                  coloring: true,
-                  rm: utils.Decimal.ROUND_DOWN,
-                  showIdentifier: true,
-                  size: "2xs",
-                  children: value
-                }
-              )
-            ]
-          }
-        )
-      ] });
-    }
-  };
-}
-function getMarkIndexColumn() {
-  return {
-    title: i18n.i18n.t("markets.column.mark&Index"),
-    dataIndex: "mark_price",
-    align: "right",
-    className: "oui-h-[36px]",
-    width: 100,
-    multiSort: {
-      fields: [
-        {
-          sortKey: "mark_price",
-          label: i18n.i18n.t("markets.column.mark")
-        },
-        {
-          sortKey: "index_price",
-          label: i18n.i18n.t("markets.column.index")
-        }
-      ]
-    },
-    render: (value, record) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gapY: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", children: value }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, size: "2xs", intensity: 54, children: record.index_price })
-    ] })
-  };
-}
-var init_column2 = __esm({
-  "src/components/shared/column.tsx"() {
-    init_icons();
-    init_icons();
-    init_favoritesDropdownMenu();
-    init_rwaDotTooltip();
-    init_symbolDisplay();
-  }
-});
 var FavoritesEmpty;
 var init_favoritesEmpty = __esm({
   "src/components/favoritesEmpty/index.tsx"() {
@@ -2635,31 +2596,181 @@ var init_useFavoritesExtraProps = __esm({
     init_marketsProvider();
   }
 });
+function isBuiltInMarketTab(tab) {
+  return "type" in tab;
+}
+function isCustomMarketTab(tab) {
+  return "id" in tab;
+}
+function tabKey(tab, index) {
+  return isBuiltInMarketTab(tab) ? tab.type : tab.id || `category_${index}`;
+}
+function resolveIcon(icon) {
+  if (typeof icon === "string") {
+    return 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_column2();
+    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 [
-            getSymbolColumn(favorite, isFavoriteList),
+            getSymbolColumn(favorite, isFavoriteList, {
+              stackLeverageInSecondRow: true
+            }),
             get24hVolOIColumn(),
-            getLastAnd24hPercentageColumn(favorite, isFavoriteList),
-            getMarkIndexColumn()
+            getLastAnd24hPercentageColumn(favorite, isFavoriteList)
           ];
         },
         []
       );
       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(
@@ -2686,7 +2797,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",
@@ -2697,28 +2821,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
+            );
+          })
         }
       ) });
     };
@@ -2843,26 +3024,6 @@ var init_column3 = __esm({
               return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
             }
           },
-          {
-            title: t("markets.column.mark"),
-            dataIndex: "mark_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
-          {
-            title: t("markets.column.index"),
-            dataIndex: "index_price",
-            width: 100,
-            align: "right",
-            onSort: true,
-            render: (value, record) => {
-              return /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { dp: record.quote_dp || 2, currency: "$", children: value });
-            }
-          },
           {
             title: t("markets.column.24hChange"),
             dataIndex: "change",
@@ -3153,7 +3314,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
@@ -3162,9 +3323,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]);
@@ -3220,11 +3382,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(
@@ -3242,10 +3408,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",
@@ -3255,93 +3464,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"
-                },
-                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(
-              ui.TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-all-trigger",
-                  content: "oui-tabs-all-content"
-                },
-                title: t("markets.allMarkets"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(AllMarketsIcon, {}),
-                value: "all",
-                testid: "oui-testid-markets-all-tab",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LazyMarketsListFullWidget,
-                  {
-                    type: "all",
-                    initialSort: { sortKey: "24h_amount", sortOrder: "desc" }
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                classNames: {
-                  trigger: "oui-tabs-rwa-trigger",
-                  content: "oui-tabs-rwa-content"
+          showScrollIndicator: true,
+          children: tabs?.map((tab, index) => {
+            const key = tabKey(tab, index);
+            const isBuiltIn = isBuiltInMarketTab(tab);
+            const meta = isBuiltIn ? builtInMeta[tab.type] : void 0;
+            if (isBuiltIn && meta) {
+              const title = tab.type === "favorites" ? composeTabTitle(tab.name, {
+                icon: resolveTabTriggerIcon(tab, /* @__PURE__ */ 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(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(
+                key
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
               ui.TabPanel,
               {
                 classNames: {
-                  trigger: "oui-tabs-newListings-trigger",
-                  content: "oui-tabs-newListings-content"
+                  trigger: `oui-tabs-${key}-trigger`,
+                  content: `oui-tabs-${key}-content`
                 },
-                title: t("markets.newListings"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(NewListingsIcon, {}),
-                value: "new",
-                testid: "oui-testid-markets-newListings-tab",
+                title: composeTabTitle(tab.name ?? key, {
+                  icon: resolveTabTriggerIcon(tab),
+                  suffix: tab.suffix
+                }),
+                value: key,
                 children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
                   LazyMarketsListFullWidget,
                   {
-                    type: "new",
-                    initialSort: { sortKey: "created_time", sortOrder: "desc" }
+                    type: "all",
+                    initialSort: DEFAULT_SORT,
+                    dataFilter: tabDataFilters[key]
                   }
                 ) })
-              }
-            )
-          ]
+              },
+              key
+            );
+          })
         }
       ) });
     };
@@ -3378,10 +3592,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 };
@@ -3392,28 +3609,31 @@ var init_expandMarkets_ui = __esm({
         return { default: mod.MarketsListWidget };
       })
     );
-    cls = "oui-h-[calc(100%_-_36px)]";
+    cls = "oui-h-full";
     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 */);
               }
@@ -3421,6 +3641,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,
         {
@@ -3436,7 +3698,7 @@ var init_expandMarkets_ui = __esm({
                 classNames: { root: "oui-expandMarkets-search-input" }
               }
             ) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               ui.Tabs,
               {
                 variant: "contained",
@@ -3450,68 +3712,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
+                  );
+                })
               }
             )
           ]
@@ -3568,10 +3786,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) => {
@@ -3579,11 +3881,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 })
         }
       );
@@ -3628,7 +3932,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) {
@@ -4018,7 +4322,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) => {
@@ -4269,53 +4573,17 @@ var init_fundingComparison = __esm({
 // src/components/sideMarkets/sideMarkets.ui.tsx
 var sideMarkets_ui_exports = {};
 __export(sideMarkets_ui_exports, {
-  SideMarkets: () => exports.SideMarkets,
-  SideMarketsHeader: () => SideMarketsHeader
+  SideMarkets: () => exports.SideMarkets
 });
-var SideMarketsHeader; exports.SideMarkets = void 0;
+exports.SideMarkets = void 0;
 var init_sideMarkets_ui = __esm({
   "src/components/sideMarkets/sideMarkets.ui.tsx"() {
-    init_icons();
     init_expandMarkets();
     init_marketsList();
     init_marketsProvider();
     init_useFavoritesExtraProps();
-    SideMarketsHeader = (props) => {
-      const { resizeable, panelSize, onPanelSizeChange } = props;
-      const { t } = i18n.useTranslation();
-      const cls3 = ui.cn(
-        "oui-text-base-contrast-36",
-        resizeable ? "oui-cursor-pointer hover:oui-text-base-contrast-80" : "oui-cursor-not-allowed"
-      );
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Flex,
-        {
-          className: panelSize === "small" ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
-          justify: panelSize === "large" ? "between" : "center",
-          width: "100%",
-          px: 3,
-          children: [
-            panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 80, children: t("common.markets") }),
-            panelSize === "large" && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("middle") : void 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { className: cls3 })
-              }
-            ),
-            (panelSize === "middle" || panelSize === "small") && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: resizeable ? () => onPanelSizeChange?.("large") : void 0,
-                children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { className: cls3 })
-              }
-            )
-          ]
-        }
-      );
-    };
     exports.SideMarkets = (props) => {
-      const { panelSize, activeTab, onTabChange, className, tabSort } = props;
+      const { activeTab, onTabChange, className, tabSort, panelSize } = props;
       const { symbol, onSymbolChange } = useMarketsContext();
       const { getFavoritesProps } = useFavoritesProps();
       const renderContent = () => {
@@ -4340,34 +4608,12 @@ var init_sideMarkets_ui = __esm({
           }
         );
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Flex,
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Box,
         {
-          id: "oui-side-markets",
-          className: ui.cn("oui-relative oui-font-semibold", className),
-          direction: "column",
-          gapY: 5,
-          height: "100%",
           width: "100%",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SideMarketsHeader,
-              {
-                ...ramda.pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Box,
-              {
-                width: "100%",
-                className: ui.cn(
-                  panelSize === "large" && "oui-h-[calc(100%_-_56px)]",
-                  panelSize === "middle" && "oui-h-[calc(100%_-_52px)]"
-                ),
-                children: renderContent()
-              }
-            )
-          ]
+          height: "100%",
+          children: renderContent()
         }
       );
     };
@@ -4377,7 +4623,7 @@ exports.useDropDownMarketsColumns = void 0;
 var init_column4 = __esm({
   "src/components/dropDownMarkets/column.tsx"() {
     init_icons();
-    init_column2();
+    init_column();
     exports.useDropDownMarketsColumns = () => {
       const { t } = i18n.useTranslation();
       return React6.useCallback(
@@ -4472,12 +4718,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: [
@@ -4501,8 +4750,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,
@@ -4524,22 +4773,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 */);
               }
@@ -4547,6 +4798,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,
         {
@@ -4558,7 +4855,7 @@ var init_dropDownMarkets_ui = __esm({
           intensity: 800,
           children: [
             search,
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               ui.Tabs,
               {
                 variant: "contained",
@@ -4566,72 +4863,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
+                  );
+                })
               }
             )
           ]
@@ -4680,15 +4936,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 })
         }
       );
@@ -4829,26 +5088,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)) {
@@ -4914,41 +5194,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,
                       {
@@ -5027,6 +5312,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) => {
@@ -5040,6 +5326,7 @@ var init_horizontalMarkets_ui = __esm({
         className,
         dropdownPos
       } = props;
+      const { tabs } = useMarketsContext();
       const renderMarketItem = React6__default.default.useCallback(
         (symbol, index) => {
           const data = tickerData[symbol];
@@ -5098,7 +5385,8 @@ var init_horizontalMarkets_ui = __esm({
                   {
                     selectedMarketType,
                     onMarketTypeChange,
-                    position: dropdownPos
+                    position: dropdownPos,
+                    tabs
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -5315,12 +5603,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 = {
@@ -5357,8 +5648,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 [
       {
@@ -5376,7 +5669,72 @@ 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,
@@ -5388,7 +5746,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",
@@ -5402,114 +5760,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
+              );
+            })
           }
         )
       ]
@@ -5519,6 +5787,7 @@ var SubMenuMarkets = (props) => {
 
 // src/components/subMenuMarkets/subMenuMarkets.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 
 // src/components/subMenuMarkets/subMenuMarkets.script.ts
 init_constant();
@@ -5563,11 +5832,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,
         {
@@ -5597,7 +5868,6 @@ init_type();
 init_useTabSort();
 var SIDE_MARKETS_SEL_TAB_KEY2 = "orderly_side_markets_sel_tab_key";
 var useSideMarketsScript = (options) => {
-  const [panelSize, setPanelSize] = React6.useState(options?.panelSize);
   const [activeTab, setActiveTab] = hooks.useLocalStorage(
     SIDE_MARKETS_SEL_TAB_KEY2,
     "all" /* All */
@@ -5605,26 +5875,25 @@ var useSideMarketsScript = (options) => {
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
   });
-  const onPanelSizeChange = React6.useCallback(
+  const panelSize = React6.useMemo(() => {
+    if (options?.collapsed) {
+      return "small";
+    }
+    return options?.panelSize || "large";
+  }, [options?.collapsed, options?.panelSize]);
+  React6.useCallback(
     (size) => {
       if (typeof options?.onPanelSizeChange === "function") {
         options.onPanelSizeChange(size);
-      } else {
-        setPanelSize(size);
       }
     },
     [options?.onPanelSizeChange]
   );
-  React6.useEffect(() => {
-    setPanelSize(options?.panelSize);
-  }, [options?.panelSize]);
   return {
-    resizeable: options?.resizeable ?? true,
-    panelSize,
-    onPanelSizeChange,
     activeTab,
     onTabChange: setActiveTab,
-    tabSort
+    tabSort,
+    panelSize
   };
 };
 
@@ -5636,9 +5905,7 @@ var LazySideMarkets = React6__default.default.lazy(
   })
 );
 var SideMarketsWidget = (props) => {
-  const state = useSideMarketsScript(
-    ramda.pick(["resizeable", "panelSize", "onPanelSizeChange"], props)
-  );
+  const state = useSideMarketsScript(props);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.MarketsProvider, { ...ramda.pick(["symbol", "onSymbolChange"], props), children: /* @__PURE__ */ jsxRuntime.jsx(React6__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazySideMarkets, { ...state, className: props.className }) }) });
 };
 
@@ -5646,18 +5913,23 @@ var SideMarketsWidget = (props) => {
 init_dropDownMarkets();
 
 // src/components/marketsSheet/marketsSheet.ui.tsx
-init_icons();
+init_useCommunityTabs();
 init_type();
+init_communityBrokerTabs();
 init_marketsList();
+init_marketsProvider();
 init_rwaTab();
 init_searchInput();
 init_useFavoritesExtraProps();
+init_tabUtils();
 
 // src/components/marketsSheet/column.tsx
-init_column2();
+init_column();
 var getMarketsSheetColumns = (favorite, isFavoriteList = false) => {
   return [
-    getSymbolColumn(favorite, isFavoriteList),
+    getSymbolColumn(favorite, isFavoriteList, {
+      stackLeverageInSecondRow: true
+    }),
     get24hVolOIColumn(),
     getLastAnd24hPercentageColumn(favorite, isFavoriteList)
   ];
@@ -5666,14 +5938,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"),
@@ -5683,12 +5958,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)]"
+          )
+        }
       }
     );
   };
@@ -5707,7 +6035,7 @@ var MarketsSheet = (props) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tabs,
           {
             variant: "contained",
@@ -5721,44 +6049,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
+              );
+            })
           }
         )
       ]
@@ -5789,13 +6097,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 })
     }
   );
@@ -5803,6 +6114,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;
@@ -5959,7 +6271,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" })
       ]
     }
@@ -5967,32 +6279,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 }),
@@ -6202,6 +6519,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) => {
@@ -6218,6 +6536,91 @@ 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",
+    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,
@@ -6243,6 +6646,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,
     {
@@ -6267,7 +6674,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,
@@ -6275,22 +6682,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
+            }
+          )
+        ] })
       ]
     }
   ) });
@@ -6319,129 +6730,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(
@@ -6634,42 +7008,69 @@ function useSymbolInfoBarFullScript(options) {
     openTimeInterval
   };
 }
+var SymbolInfoBarFullInjectable = ui.injectable(
+  SymbolInfoBarFull,
+  "Trading.SymbolInfoBar.Desktop"
+);
 var SymbolInfoBarFullWidget = (props) => {
   const { symbol, ...rest } = props;
   const state = useSymbolInfoBarFullScript({ symbol });
-  return /* @__PURE__ */ jsxRuntime.jsx(SymbolInfoBarFull, { ...state, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(SymbolInfoBarFullInjectable, { ...state, ...rest });
 };
 
 // src/components/horizontalMarkets/horizontalMarkets.widget.tsx
 init_marketsProvider();
+init_useMarketCategories();
 
 // src/components/horizontalMarkets/horizontalMarkets.script.ts
 init_constant();
 init_utils();
 init_marketsProvider();
 init_useTabSort();
+init_tabUtils();
 var useHorizontalMarketsScript = (options) => {
   const {
     symbols: optionSymbols,
     maxItems: optionMaxItems,
     defaultMarketType
   } = options || {};
-  const { symbol: currentSymbol, onSymbolChange } = useMarketsContext();
+  const { symbol: currentSymbol, onSymbolChange, tabs } = useMarketsContext();
   const [selectedMarketType, setSelectedMarketType] = 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(
@@ -6691,7 +7092,9 @@ var useHorizontalMarketsScript = (options) => {
     favorite.favorites,
     favorite.selectedFavoriteTab,
     favorite.recent,
-    selectedMarketType
+    selectedMarketType,
+    isCustomCategory,
+    customCategoryFilter
   ]);
   const { tabSort } = useTabSort({
     storageKey: SIDE_MARKETS_TAB_SORT_STORAGE_KEY
@@ -6776,7 +7179,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,
@@ -6796,7 +7200,7 @@ init_marketItem_ui();
 // src/deprecated/newListingList/newListingList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var NewListingList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6865,7 +7269,7 @@ var NewListingListWidget = (props) => {
 init_collapseMarkets();
 init_favoritesTabs();
 init_marketsProvider();
-init_column();
+init_column2();
 var FavoritesList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -6946,7 +7350,7 @@ var FavoritesListWidget = (props) => {
 // src/deprecated/recentList/recentList.ui.tsx
 init_collapseMarkets();
 init_marketsProvider();
-init_column();
+init_column2();
 var RecentList = (props) => {
   const { dataSource, favorite, onSort, loading, getColumns, collapsed } = props;
   const { symbol, onSymbolChange } = useMarketsContext();
@@ -7016,6 +7420,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) => {
@@ -7037,6 +7442,7 @@ var MarketsHomePage = (props) => {
   const [activeTab, setActiveTab] = React6.useState(
     "markets" /* Markets */
   );
+  const tabs = useMarketCategories("marketsDataList");
   return /* @__PURE__ */ jsxRuntime.jsx(
     exports.MarketsProvider,
     {
@@ -7044,6 +7450,7 @@ var MarketsHomePage = (props) => {
       onSymbolChange: props.onSymbolChange,
       navProps: props.navProps,
       comparisonProps: props.comparisonProps,
+      tabs,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7167,6 +7574,7 @@ var MarketsMobileContent = (props) => {
 // src/index.ts
 init_marketsProvider();
 init_symbolDisplay();
+init_builtInTabRegistry();
 
 exports.FavoritesList = FavoritesList;
 exports.FavoritesListWidget = FavoritesListWidget;
@@ -7184,6 +7592,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;