@xylabs/sdk-react 2.9.14 → 2.9.19

package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts

@@ -2,5 +2,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const StorybookEntry: ComponentMeta<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
 declare const Default: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
-export { Default };
+declare const DarkThemeEnabled: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
+export { DarkThemeEnabled, Default };
 export default StorybookEntry;

package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts

@@ -5,5 +5,6 @@ interface InvertableThemeProviderProps {
     invert?: boolean;
     noResponsiveFonts?: boolean;
     options?: ThemeOptions;
+    darkTheme?: ThemeOptions;
 }
 export type { InvertableThemeProviderProps };

package/dist/cjs5/components/Pixel/PixelDebugger.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PixelDebugger: React.FC;

package/dist/cjs5/components/Pixel/PixelDebugger.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const StorybookEntry: ComponentMeta<import("react").FC<import("../FlexBox/BusyBox").BusyBoxProps>>;
+declare const Default: ComponentStory<import("react").FC<import("../FlexBox/BusyBox").BusyBoxProps>>;
+export { Default };
+export default StorybookEntry;

package/dist/cjs5/components/Pixel/PixelDebuggerProvider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PixelDebuggerProvider: React.FC;

package/dist/cjs5/components/Pixel/PixelDebuggerToggle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BusyBoxProps } from '../FlexBox';
+export declare const PixelDebuggerToggle: React.FC<BusyBoxProps>;

package/dist/cjs5/components/Pixel/hooks/index.d.ts

@@ -0,0 +1 @@
+export declare const usePixelAltSendHandler: (altHandler: (event: string, fields?: Record<string, unknown> | undefined) => void) => void;

package/dist/cjs5/components/Pixel/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PixelDebugger';
+export * from './PixelDebuggerProvider';
+export * from './PixelDebuggerToggle';

package/dist/cjs5/components/Pixel/models/index.d.ts

@@ -0,0 +1,4 @@
+export interface PixelEvent {
+    event: string;
+    fields?: unknown;
+}

package/dist/cjs5/components/TokenAmount/TokenAmountProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="bn.js" />
 import { BigNumber } from '@xylabs/sdk-js';
 import { MouseEventHandler } from 'react';
 import { ButtonExProps } from '../ButtonEx';

package/dist/cjs5/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './FlexBox';
 export * from './InvertableThemeProvider';
 export * from './LinkEx';
 export * from './NumberStatus';
+export * from './Pixel';
 export * from './Portal';
 export * from './QuickTipButton';
 export * from './RichResult';

package/dist/cjs5/contexts/UserEvents/Context.d.ts

@@ -4,4 +4,9 @@ interface Props {
     userEvents?: UserEventHandler<unknown>;
 }
 declare const UserEventsContext: import("react").Context<Props>;
-export { UserEventsContext };
+interface DebuggingProps {
+    isDebugging: boolean;
+    setIsDebugging: (value: boolean) => void;
+}
+declare const DebugUserEventsContext: import("react").Context<DebuggingProps>;
+export { DebugUserEventsContext, UserEventsContext };

package/dist/cjs5/contexts/UserEvents/index.d.ts

@@ -1,3 +1,2 @@
-import { UserEventsContext } from './Context';
+export * from './Context';
 export * from './Loader';
-export { UserEventsContext };

package/dist/cjs5/index.js

@@ -1536,6 +1536,12 @@ const NetworkSettingsLoader = (props) => {
 };
 
 const UserEventsContext = react.createContext({});
+const DebugUserEventsContext = react.createContext({
+    isDebugging: false,
+    setIsDebugging: (value) => {
+        console.warn('set is debugging is not set', value);
+    },
+});
 
 const UserEventsLoader = ({ userEvents, children }) => {
     return jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
@@ -1662,7 +1668,7 @@ const InvertableThemeContext = react.createContext({
     options: {},
 });
 
-const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, }) => {
+const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
     var _a, _b;
     const contextInvertableTheme = react.useContext(InvertableThemeContext);
     const clonedOptions = clone__default["default"]((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
@@ -1673,6 +1679,9 @@ const InvertableThemeProvider = ({ options, children, dark, scoped = false, inve
     if (dark !== undefined) {
         clonedOptions.palette.mode = dark ? 'dark' : 'light';
     }
+    if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
+        clonedOptions.palette = darkTheme.palette;
+    }
     let theme = styles$1.createTheme(clonedOptions);
     if (!noResponsiveFonts) {
         theme = material.responsiveFontSizes(theme);
@@ -1785,10 +1794,8 @@ const useLocalStorage = (key, defaultValue) => {
         }
     });
     const setValue = (value) => {
-        console.log('setValue', value);
         setStoredValue(value);
         setLocalStorageObject(key, value);
-        console.log('getValue from ls', getLocalStorageObject(key));
     };
     return [storedValue, setValue];
 };
@@ -2065,6 +2072,63 @@ const Portal = ({ children, className, el = 'div', target = 'body' }) => {
     return reactDom.createPortal(children, container);
 };
 
+const usePixelAltSendHandler = (altHandler) => {
+    const [pixelSend, setPixelSend] = react.useState();
+    react.useEffect(() => {
+        if (!pixelSend && pixel.XyPixel.instance.send) {
+            const oldHandler = pixel.XyPixel.instance.send.bind(pixel.XyPixel.instance);
+            setPixelSend(oldHandler);
+        }
+        else {
+            pixel.XyPixel.instance.send = (event, fields) => __awaiter(void 0, void 0, void 0, function* () {
+                altHandler(event, fields);
+                return yield (pixelSend === null || pixelSend === void 0 ? void 0 : pixelSend(event, fields));
+            });
+        }
+        return () => {
+            //restore send on unmount
+            if (pixelSend) {
+                pixel.XyPixel.instance.send = pixelSend;
+            }
+        };
+    }, [pixelSend, altHandler]);
+};
+
+const PixelDebugger = () => {
+    const { isDebugging } = react.useContext(DebugUserEventsContext);
+    //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
+    const theme = material.useTheme();
+    const [displayEvents, setDisplayEvents] = react.useState(false);
+    const [events, setEvents] = react.useState([]);
+    usePixelAltSendHandler((event, fields) => {
+        setEvents((events) => [{ event, fields }, ...events]);
+    });
+    if (!isDebugging) {
+        return null;
+    }
+    return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsxRuntime.jsx(material.Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsxRuntime.jsx(material.Card, Object.assign({ variant: "outlined", sx: {
+                        backdropFilter: 'blur(16px) saturate(180%)',
+                        backgroundColor: 'rgba(18, 18, 18, .70)',
+                        overflowY: 'auto',
+                        width: '100%',
+                    }, color: theme.palette.primary.main }, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsxRuntime.jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
+};
+const PixelEventDetails = ({ event, fields, index, events, }) => {
+    const [isOpen, setIsOpen] = react.useState(false);
+    return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsxRuntime.jsx(material.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsxRuntime.jsx(material.Divider, {}, void 0)] }), void 0));
+};
+
+const PixelDebuggerProvider = ({ children }) => {
+    const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
+    return (jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
+};
+
+const PixelDebuggerToggle = (_a) => {
+    var props = __rest(_a, []);
+    const { setIsDebugging, isDebugging } = react.useContext(DebugUserEventsContext);
+    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.FormLabel, { children: "Enable Debugger" }, void 0), jsxRuntime.jsx(material.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
+};
+
 const QuickTipButton = (_a) => {
     var { title, children } = _a, props = __rest(_a, ["title", "children"]);
     const [messageOpen, setMessageOpen] = react.useState(false);
@@ -2155,6 +2219,7 @@ exports.CookieConsentBody = CookieConsentBody;
 exports.CookieConsentContext = CookieConsentContext;
 exports.CookieConsentLoader = CookieConsentLoader;
 exports.CoverProgress = CoverProgress;
+exports.DebugUserEventsContext = DebugUserEventsContext;
 exports.DripCustomEvent = DripCustomEvent;
 exports.DripStandardEvents = DripStandardEvents;
 exports.ErrorDialog = ErrorDialog;
@@ -2185,6 +2250,9 @@ exports.MessageDialog = MessageDialog;
 exports.NetworkSettingsContext = NetworkSettingsContext;
 exports.NetworkSettingsLoader = NetworkSettingsLoader;
 exports.NumberStatus = NumberStatus;
+exports.PixelDebugger = PixelDebugger;
+exports.PixelDebuggerProvider = PixelDebuggerProvider;
+exports.PixelDebuggerToggle = PixelDebuggerToggle;
 exports.Portal = Portal;
 exports.QuickTipButton = QuickTipButton;
 exports.Rdt = Rdt;