@xylabs/sdk-react 2.9.13 → 2.9.17

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

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

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

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

package/dist/esm5/components/Portal/Portal.d.ts

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

package/dist/esm5/components/Portal/PortalProps.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PortalProps {
+    children: React.ReactNode;
+    className?: string;
+    el?: string;
+    target?: string;
+}

package/dist/esm5/components/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Portal';
+export * from './PortalProps';

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

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

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

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

package/dist/esm5/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';
@@ -15,6 +15,7 @@ import { parse, stringify } from 'query-string';
 import { createTheme } from '@mui/material/styles';
 import clone from 'lodash/clone';
 import numeral from 'numeral';
+import { createPortal } from 'react-dom';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1526,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);
@@ -1775,10 +1782,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];
 };
@@ -2037,6 +2042,81 @@ const NumberStatus = (_a) => {
     return (jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorTop, color: theme.palette.getContrastText(bgColorTop), fontSize: calcFontSize, fontFamily: "Source Code Pro,monospace", alignItems: "center", height: sizePixels * 0.75 }, { children: numeral(value).format(format) }), void 0), jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorBottom, borderTop: "1px", color: theme.palette.getContrastText(bgColorBottom), fontSize: sizePixels * 0.12, fontFamily: theme.typography.fontFamily, height: sizePixels * 0.25 }, { children: title }), void 0)] }), void 0) }), void 0));
 };
 
+const Portal = ({ children, className, el = 'div', target = 'body' }) => {
+    const [container] = useState(document.createElement(el));
+    if (className) {
+        container.classList.add(className);
+    }
+    useEffect(() => {
+        const targetElement = document.querySelector(target);
+        if (!targetElement) {
+            console.warn(`Unable to find target element: ${target}`);
+        }
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
+        return () => {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
+        };
+    }, [container, target]);
+    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);
@@ -2112,5 +2192,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, 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