@orderly.network/react-app 2.12.4-alpha.0 → 3.0.0-alpha.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import react, { ReactNode, ComponentType, PropsWithChildren, Component, ErrorInfo } from 'react';
-import { ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
+import { OrderlyPlugin, PluginRegistrationFn, ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
 import { ConfigProviderProps, ExclusiveConfigProviderProps, Chains, WalletState, RestrictedInfoReturns, MarketCategoryConfig, RestrictedInfoOptions, OrderValidationResult } from '@orderly.network/hooks';
 import { Chain, NetworkId, AccountStatusEnum } from '@orderly.network/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -16,6 +16,8 @@ type AppLogos = Partial<{
 type OrderlyAppConfig = {
     appIcons?: AppLogos;
     dateFormatting?: string;
+    /** Plugins for the new interceptor system (registerPlugin descriptors or registration fns) */
+    plugins?: (OrderlyPlugin | PluginRegistrationFn)[];
     components?: {
         [position in ExtensionPosition]: ComponentType;
     };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import react, { ReactNode, ComponentType, PropsWithChildren, Component, ErrorInfo } from 'react';
-import { ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
+import { OrderlyPlugin, PluginRegistrationFn, ExtensionPosition, OrderlyThemeProviderProps } from '@orderly.network/ui';
 import { ConfigProviderProps, ExclusiveConfigProviderProps, Chains, WalletState, RestrictedInfoReturns, MarketCategoryConfig, RestrictedInfoOptions, OrderValidationResult } from '@orderly.network/hooks';
 import { Chain, NetworkId, AccountStatusEnum } from '@orderly.network/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -16,6 +16,8 @@ type AppLogos = Partial<{
 type OrderlyAppConfig = {
     appIcons?: AppLogos;
     dateFormatting?: string;
+    /** Plugins for the new interceptor system (registerPlugin descriptors or registration fns) */
+    plugins?: (OrderlyPlugin | PluginRegistrationFn)[];
     components?: {
         [position in ExtensionPosition]: ComponentType;
     };

package/dist/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
+var react = require('react');
 var hooks = require('@orderly.network/hooks');
 var ui = require('@orderly.network/ui');
-var react = require('react');
 var types = require('@orderly.network/types');
 var i18n = require('@orderly.network/i18n');
 var utils = require('@orderly.network/utils');
@@ -700,38 +700,7 @@ var AppStateProvider = (props) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AppStateContext.Provider, { value: memoizedValue, children: /* @__PURE__ */ jsxRuntime.jsx(hooks.MarketCategoriesConfigProvider, { value: props.widgetConfigs?.marketTabs, children: props.children }) });
 };
-var ORDERLY_THEME_STORAGE_KEY = "orderly_theme_id";
-var AppThemeProvider = (props) => {
-  const { children, themes, ...rest } = props;
-  const [currentThemeId, setCurrentThemeId] = hooks.useLocalStorage(ORDERLY_THEME_STORAGE_KEY, themes?.[0]?.id);
-  const currentTheme = react.useMemo(() => {
-    return themes?.find((theme) => theme.id === currentThemeId);
-  }, [themes, currentThemeId]);
-  react.useEffect(() => {
-    if (typeof document === "undefined") return;
-    const root = document.documentElement;
-    if (!currentThemeId) {
-      root.removeAttribute("data-oui-theme");
-      return;
-    }
-    root.setAttribute("data-oui-theme", currentThemeId);
-    Object.entries(ui.DARK_THEME_CSS_VARS).forEach(([key, value]) => {
-      const newValue = currentTheme?.cssVars?.[key] || value;
-      root.style.setProperty(key, newValue);
-    });
-  }, [currentThemeId, currentTheme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ui.OrderlyThemeProvider,
-    {
-      themes,
-      currentThemeId,
-      currentTheme,
-      setCurrentThemeId,
-      ...rest,
-      children
-    }
-  );
-};
+var EMPTY_PLUGINS = [];
 var ExecutionReportListener = () => {
   useExecutionReport();
   return null;
@@ -741,7 +710,7 @@ var OrderlyAppProvider = (props) => {
     // dateFormatting,
     components,
     appIcons,
-    themes,
+    plugins,
     onChainChanged,
     defaultChain,
     widgetConfigs,
@@ -750,23 +719,39 @@ var OrderlyAppProvider = (props) => {
   hooks.useTrack();
   useBootstrap();
   const uiLocale = useUILocale();
+  const pluginState = react.useMemo(
+    () => ({
+      config: { appIcons, brokerName: props.brokerName },
+      networkId: configProps.networkId
+    }),
+    [appIcons, props.brokerName, configProps.networkId]
+  );
+  const pluginsList = plugins ?? EMPTY_PLUGINS;
   return /* @__PURE__ */ jsxRuntime.jsx(AppConfigProvider, { appIcons, brokerName: props.brokerName, children: /* @__PURE__ */ jsxRuntime.jsx(
-    AppThemeProvider,
+    ui.OrderlyThemeProvider,
     {
       components,
       overrides: props.overrides,
-      themes,
       children: /* @__PURE__ */ jsxRuntime.jsxs(hooks.OrderlyConfigProvider, { ...configProps, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ExecutionReportListener, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AppStateProvider,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.OrderlyPluginProvider,
           {
-            onChainChanged,
-            defaultChain,
-            restrictedInfo: props.restrictedInfo,
-            onRouteChange: props.onRouteChange,
-            widgetConfigs,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.LocaleProvider, { locale: uiLocale, children: /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ModalProvider, { children: props.children }) }) })
+            plugins: pluginsList,
+            pluginState,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ExecutionReportListener, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AppStateProvider,
+                {
+                  onChainChanged,
+                  defaultChain,
+                  restrictedInfo: props.restrictedInfo,
+                  onRouteChange: props.onRouteChange,
+                  widgetConfigs,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.LocaleProvider, { locale: uiLocale, children: /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ModalProvider, { children: props.children }) }) })
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Toaster, {})