@xylabs/sdk-react 2.9.14 → 2.9.19

package/dist/components/Pixel/PixelDebugger.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Card, Divider, Typography, useTheme } from '@mui/material';
+import { useContext, useState } from 'react';
+import { DebugUserEventsContext } from '../../contexts';
+import { ButtonEx } from '../ButtonEx';
+import { FlexCol } from '../FlexBox';
+import { Portal } from '../Portal';
+import { usePixelAltSendHandler } from './hooks';
+export const PixelDebugger = () => {
+    const { isDebugging } = useContext(DebugUserEventsContext);
+    //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
+    const theme = useTheme();
+    const [displayEvents, setDisplayEvents] = useState(false);
+    const [events, setEvents] = useState([]);
+    usePixelAltSendHandler((event, fields) => {
+        setEvents((events) => [{ event, fields }, ...events]);
+    });
+    if (!isDebugging) {
+        return null;
+    }
+    return (_jsx(Portal, { children: _jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: _jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: _jsx(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: _jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [_jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: _jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (_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) => (_jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && _jsx(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] = useState(false);
+    return (_jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [_jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (_jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && _jsx(Divider, {}, void 0)] }), void 0));
+};
+//# sourceMappingURL=PixelDebugger.js.map

package/dist/components/Pixel/PixelDebugger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.tsx"],"names":[],"mappings":"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"}

package/dist/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/components/Pixel/PixelDebugger.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PixelApi, XyPixel } from '@xylabs/pixel';
+import { useEffect } from 'react';
+import { PixelDebugger, PixelDebuggerToggle } from './index';
+import { PixelDebuggerProvider } from './PixelDebuggerProvider';
+const StorybookEntry = {
+    argTypes: {},
+    component: PixelDebuggerToggle,
+    parameters: {
+        docs: {
+            page: null,
+        },
+    },
+    title: 'Components/PixelDebuggerToggle',
+};
+const Template = (args) => {
+    useEffect(() => {
+        XyPixel.selectApi(new PixelApi('local'));
+        XyPixel.init('storybookPixel');
+    }, []);
+    return (_jsxs(PixelDebuggerProvider, { children: [_jsx(PixelDebuggerToggle, Object.assign({}, args), void 0), _jsx(PixelDebugger, {}, void 0)] }, void 0));
+};
+const Default = Template.bind({});
+Default.args = {};
+export { Default };
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry;
+//# sourceMappingURL=PixelDebugger.stories.js.map

package/dist/components/Pixel/PixelDebugger.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebugger.stories.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,gCAAgC;CACK,CAAA;AAE9C,MAAM,QAAQ,GAA+C,CAAC,IAAI,EAAE,EAAE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;QACxC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,MAAC,qBAAqB,eACpB,KAAC,mBAAmB,oBAAK,IAAI,UAAI,EACjC,KAAC,aAAa,aAAG,YACK,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;AAEjB,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,oDAAoD;AACpD,eAAe,cAAc,CAAA"}

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

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

package/dist/components/Pixel/PixelDebuggerProvider.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DebugUserEventsContext } from '../../contexts';
+import { useLocalStorage } from '../../hooks';
+export const PixelDebuggerProvider = ({ children }) => {
+    const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
+    return (_jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
+};
+//# sourceMappingURL=PixelDebuggerProvider.js.map

package/dist/components/Pixel/PixelDebuggerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,CAAC,MAAM,qBAAqB,GAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,gBACpE,QAAQ,YACuB,CACnC,CAAA;AACH,CAAC,CAAA"}

package/dist/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/components/Pixel/PixelDebuggerToggle.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormLabel, Switch } from '@mui/material';
+import { useContext } from 'react';
+import { DebugUserEventsContext } from '../../contexts';
+import { FlexRow } from '../FlexBox';
+export const PixelDebuggerToggle = (_a) => {
+    var props = __rest(_a, []);
+    const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
+    return (_jsx(FlexRow, Object.assign({}, props, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }, void 0), _jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
+};
+//# sourceMappingURL=PixelDebuggerToggle.js.map

package/dist/components/Pixel/PixelDebuggerToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,cAAV,EAAY,CAAF;IACpE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,OAAO,oBAAK,KAAK,cAChB,MAAC,WAAW,eACV,KAAC,SAAS,0CAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,WAAI,YACjE,YACN,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/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/components/Pixel/hooks/index.js

@@ -0,0 +1,25 @@
+import { __awaiter } from "tslib";
+import { XyPixel } from '@xylabs/pixel';
+import { useEffect, useState } from 'react';
+export const usePixelAltSendHandler = (altHandler) => {
+    const [pixelSend, setPixelSend] = useState();
+    useEffect(() => {
+        if (!pixelSend && XyPixel.instance.send) {
+            const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
+            setPixelSend(oldHandler);
+        }
+        else {
+            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) {
+                XyPixel.instance.send = pixelSend;
+            }
+        };
+    }, [pixelSend, altHandler]);
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Pixel/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pixel/hooks/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,UAAqE,EAAE,EAAE;IAC9G,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAgC,CAAA;IAC1E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACvC,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;YAC/D,YAAY,CAAC,UAAU,CAAC,CAAA;SACzB;aAAM;YACL,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAO,KAAa,EAAE,MAAgC,EAAE,EAAE;gBAChF,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;gBACzB,OAAO,MAAM,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,EAAE,MAAM,CAAC,CAAA,CAAA;YACzC,CAAC,CAAA,CAAA;SACF;QACD,OAAO,GAAG,EAAE;YACV,yBAAyB;YACzB,IAAI,SAAS,EAAE;gBACb,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAA;aAClC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;AAC7B,CAAC,CAAA"}

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

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

package/dist/components/Pixel/index.js

@@ -0,0 +1,4 @@
+export * from './PixelDebugger';
+export * from './PixelDebuggerProvider';
+export * from './PixelDebuggerToggle';
+//# sourceMappingURL=index.js.map

package/dist/components/Pixel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pixel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}

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

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

package/dist/components/Pixel/models/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/components/Pixel/models/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Pixel/models/index.ts"],"names":[],"mappings":""}

package/dist/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/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/components/index.js

@@ -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/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,WAAW,CAAA;AACzB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,WAAW,CAAA;AACzB,cAAc,2BAA2B,CAAA;AACzC,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kBAAkB,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/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/contexts/UserEvents/Context.js

@@ -1,4 +1,10 @@
 import { createContext } from 'react';
 const UserEventsContext = createContext({});
-export { UserEventsContext };
+const DebugUserEventsContext = createContext({
+    isDebugging: false,
+    setIsDebugging: (value) => {
+        console.warn('set is debugging is not set', value);
+    },
+});
+export { DebugUserEventsContext, UserEventsContext };
 //# sourceMappingURL=Context.js.map

package/dist/contexts/UserEvents/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAMrC,MAAM,iBAAiB,GAAG,aAAa,CAAQ,EAAE,CAAC,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAKrC,MAAM,iBAAiB,GAAG,aAAa,CAAQ,EAAE,CAAC,CAAA;AAOlD,MAAM,sBAAsB,GAAG,aAAa,CAAiB;IAC3D,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAA;IACpD,CAAC;CACF,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,CAAA"}

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

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

package/dist/contexts/UserEvents/index.js

@@ -1,4 +1,3 @@
-import { UserEventsContext } from './Context';
+export * from './Context';
 export * from './Loader';
-export { UserEventsContext };
 //# sourceMappingURL=index.js.map

package/dist/contexts/UserEvents/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}

package/dist/esm2015/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/esm2015/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts

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

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

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

package/dist/esm2015/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/esm2015/components/Pixel/PixelDebuggerProvider.d.ts

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

package/dist/esm2015/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/esm2015/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/esm2015/components/Pixel/index.d.ts

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

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

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

package/dist/esm2015/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/esm2015/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/esm2015/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/esm2015/contexts/UserEvents/index.d.ts

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

package/dist/esm2015/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTheme, Box, alpha, CircularProgress, LinearProgress, Paper, Typography, IconButton, useScrollTrigger, Zoom, AppBar, Container, Toolbar, Button, Link, responsiveFontSizes, ScopedCssBaseline, ThemeProvider, Fab, Breadcrumbs, Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery, Slider } from '@mui/material';
+import { useTheme, Box, alpha, CircularProgress, LinearProgress, Paper, Typography, IconButton, useScrollTrigger, Zoom, AppBar, Container, Toolbar, Button, Link, responsiveFontSizes, ScopedCssBaseline, ThemeProvider, Fab, Breadcrumbs, Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery, Slider, Badge, Card, Divider, FormControl, FormLabel, Switch } from '@mui/material';
 export { useMediaQuery } from '@mui/material';
 import { AiOutlineReload, AiOutlineQuestionCircle } from 'react-icons/ai';
 import { makeStyles, createStyles } from '@mui/styles';
@@ -1527,6 +1527,12 @@ const NetworkSettingsLoader = (props) => {
 };
 
 const UserEventsContext = createContext({});
+const DebugUserEventsContext = createContext({
+    isDebugging: false,
+    setIsDebugging: (value) => {
+        console.warn('set is debugging is not set', value);
+    },
+});
 
 const UserEventsLoader = ({ userEvents, children }) => {
     return jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
@@ -1653,7 +1659,7 @@ const InvertableThemeContext = 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 = useContext(InvertableThemeContext);
     const clonedOptions = clone((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
@@ -1664,6 +1670,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 = createTheme(clonedOptions);
     if (!noResponsiveFonts) {
         theme = responsiveFontSizes(theme);
@@ -1776,10 +1785,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];
 };
@@ -2056,6 +2063,63 @@ const Portal = ({ children, className, el = 'div', target = 'body' }) => {
     return createPortal(children, container);
 };
 
+const usePixelAltSendHandler = (altHandler) => {
+    const [pixelSend, setPixelSend] = useState();
+    useEffect(() => {
+        if (!pixelSend && XyPixel.instance.send) {
+            const oldHandler = XyPixel.instance.send.bind(XyPixel.instance);
+            setPixelSend(oldHandler);
+        }
+        else {
+            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) {
+                XyPixel.instance.send = pixelSend;
+            }
+        };
+    }, [pixelSend, altHandler]);
+};
+
+const PixelDebugger = () => {
+    const { isDebugging } = useContext(DebugUserEventsContext);
+    //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
+    const theme = useTheme();
+    const [displayEvents, setDisplayEvents] = useState(false);
+    const [events, setEvents] = useState([]);
+    usePixelAltSendHandler((event, fields) => {
+        setEvents((events) => [{ event, fields }, ...events]);
+    });
+    if (!isDebugging) {
+        return null;
+    }
+    return (jsx(Portal, { children: jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsx(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: jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (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) => (jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsx(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] = useState(false);
+    return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsx(Divider, {}, void 0)] }), void 0));
+};
+
+const PixelDebuggerProvider = ({ children }) => {
+    const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
+    return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
+};
+
+const PixelDebuggerToggle = (_a) => {
+    var props = __rest(_a, []);
+    const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
+    return (jsx(FlexRow, Object.assign({}, props, { children: jsxs(FormControl, { children: [jsx(FormLabel, { children: "Enable Debugger" }, void 0), jsx(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] = useState(false);
@@ -2131,5 +2195,5 @@ const TokenAmount = (_a) => {
     return (jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
 };
 
-export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
+export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
 //# sourceMappingURL=index.js.map