@xylabs/sdk-react 2.11.10 → 2.11.13

package/dist/cjs5/index.js

@@ -4,28 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
-var ai = require('react-icons/ai');
-var styles = require('@mui/styles');
-var md5 = require('md5');
-var react = require('react');
-var reactRouterDom = require('react-router-dom');
 var iconsMaterial = require('@mui/icons-material');
 var reactHelmet = require('react-helmet');
+var react = require('react');
 var providers = require('@ethersproject/providers');
 var sdkJs = require('@xylabs/sdk-js');
-var pixel = require('@xylabs/pixel');
 var queryString = require('query-string');
-var styles$1 = require('@mui/material/styles');
+var pixel = require('@xylabs/pixel');
+var reactRouterDom = require('react-router-dom');
+var styles = require('@mui/material/styles');
 var cloneDeep = require('lodash/cloneDeep');
 var merge = require('lodash/merge');
+var ai = require('react-icons/ai');
+var md5 = require('md5');
+var styles$1 = require('@mui/styles');
 var numeral = require('numeral');
 var reactDom = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
+var md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 var numeral__default = /*#__PURE__*/_interopDefaultLegacy(numeral);
 
 /*! *****************************************************************************
@@ -81,7 +81,7 @@ const BusyBox = (_a) => {
     var { background, children, component, busyVariant = 'circular', busySize, busyOpacity = 0.85, busyColor, busy, busyCircularProps, busyLinearProps, paper, style } = _a, props = __rest(_a, ["background", "children", "component", "busyVariant", "busySize", "busyOpacity", "busyColor", "busy", "busyCircularProps", "busyLinearProps", "paper", "style"]);
     const theme = material.useTheme();
     return (jsxRuntime.jsxs(material.Box, Object.assign({ component: paper ? material.Paper : component, position: "relative", style: background
-            ? Object.assign({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }, style) : style }, props, { children: [children, busy && busyVariant === 'linear' ? (jsxRuntime.jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps))) : null, busy && busyVariant === 'circular' ? (jsxRuntime.jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps))) : null] })));
+            ? Object.assign({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }, style) : style }, props, { children: [children, busy && busyVariant === 'linear' ? jsxRuntime.jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps)) : null, busy && busyVariant === 'circular' ? jsxRuntime.jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps)) : null] })));
 };
 
 const FlexCol = (props) => {
@@ -98,143 +98,6 @@ const FlexGrowRow = (props) => {
     return jsxRuntime.jsx(FlexRow, Object.assign({ flexGrow: 1 }, props));
 };
 
-/**
- * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
- */
-const Background = (props) => {
-    return jsxRuntime.jsx(FlexRow, Object.assign({}, props));
-};
-
-const ErrorViewer = (props) => {
-    const { error } = props, boxProps = __rest(props, ["error"]);
-    const theme = material.useTheme();
-    return (jsxRuntime.jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }))] })));
-};
-
-const ErrorsViewer = (props) => {
-    const { onRetry, errors } = props, boxProps = __rest(props, ["onRetry", "errors"]);
-    return (jsxRuntime.jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
-                return jsxRuntime.jsx(ErrorViewer, { error: error }, index);
-            }), onRetry ? (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onRetry }, { children: jsxRuntime.jsx(ai.AiOutlineReload, {}) }))) : null] })));
-};
-
-const CoverProgress = (props) => {
-    var _a;
-    const { paper = true, open, opacity = 0.25, errors, onRetry } = props;
-    const theme = material.useTheme();
-    if (open) {
-        return (jsxRuntime.jsx(FlexGrowRow, Object.assign({ position: "absolute", margin: -1, top: 0, bottom: 0, right: 0, left: 0, bgcolor: paper ? theme.palette.background.paper : theme.palette.background.default }, { children: ((_a = errors === null || errors === void 0 ? void 0 : errors.length) !== null && _a !== void 0 ? _a : 0) === 0 ? (jsxRuntime.jsx(material.CircularProgress, { style: { opacity } })) : (jsxRuntime.jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry })) })));
-    }
-    return null;
-};
-
-const HoverScale = (props) => {
-    const { children, scale = 1.1 } = props;
-    const useStyles = styles.makeStyles(() => styles.createStyles({
-        zoomdiv: {
-            '&:hover': {
-                transform: `scale(${scale})`,
-                transitionDuration: '0.2s',
-                transitionTimingFunction: 'ease',
-            },
-        },
-    }));
-    const classes = useStyles();
-    return (jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.Box, Object.assign({ className: classes.zoomdiv }, { children: children })) }));
-};
-
-const range = (n, in_min, in_max, out_min, out_max) => {
-    return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
-};
-const updateCanvas = (canvas, props) => {
-    const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props;
-    let { fg } = props;
-    const hash = md5__default["default"](value);
-    const block = Math.floor(size / count);
-    const hashcolor = hash.slice(0, 6);
-    const current = canvas.current;
-    if (!current) {
-        return;
-    }
-    if (palette && palette.length) {
-        const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
-        fg = palette[index];
-    }
-    current.width = block * count + iconPadding;
-    current.height = block * count + iconPadding;
-    const arr = hash.split('').map((el) => {
-        const parsedEl = parseInt(el, 16);
-        if (parsedEl < 8) {
-            return 0;
-        }
-        else {
-            return 1;
-        }
-    });
-    const map = [];
-    map[0] = map[4] = arr.slice(0, 5);
-    map[1] = map[3] = arr.slice(5, 10);
-    map[2] = arr.slice(10, 15);
-    const ctx = current.getContext('2d');
-    if (ctx) {
-        ctx.imageSmoothingEnabled = false;
-        ctx.clearRect(0, 0, current.width, current.height);
-        map.forEach((row, i) => {
-            row.forEach((el, j) => {
-                if (el) {
-                    ctx.fillStyle = fg ? fg : '#' + hashcolor;
-                    ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
-                }
-                else {
-                    ctx.fillStyle = bg;
-                    ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
-                }
-            });
-        });
-    }
-};
-const Identicon = (_a) => {
-    var { size = 400, className = 'identicon', bg, count, fg, iconPadding, palette, value } = _a, props = __rest(_a, ["size", "className", "bg", "count", "fg", "iconPadding", "palette", "value"]);
-    const canvas = react.useRef(null);
-    react.useEffect(() => {
-        updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
-    });
-    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }) })));
-};
-
-const RedirectWithQuery = ({ href, to, toOptions }) => {
-    const newPath = `${to}${document.location.search}`;
-    const navigate = reactRouterDom.useNavigate();
-    const { pathname } = reactRouterDom.useLocation();
-    react.useEffect(() => {
-        if (href) {
-            window.location.href = href;
-        }
-        else {
-            if (newPath !== pathname) {
-                navigate(newPath, Object.assign({ replace: true }, toOptions));
-            }
-        }
-    });
-    return jsxRuntime.jsx("div", {});
-};
-
-const ScrollToTopButton = (_a) => {
-    var { children, anchorId } = _a, props = __rest(_a, ["children", "anchorId"]);
-    const trigger = material.useScrollTrigger({
-        disableHysteresis: true,
-        threshold: 100,
-    });
-    const handleClick = (event) => {
-        const anchor = (event.target.ownerDocument || document).querySelector(`#${anchorId}`);
-        if (anchor) {
-            anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    };
-    const theme = material.useTheme();
-    return (jsxRuntime.jsx(material.Zoom, Object.assign({ in: trigger }, props, { children: jsxRuntime.jsx(material.Box, Object.assign({ zIndex: 10, position: "fixed", right: theme.spacing(2), bottom: theme.spacing(2), onClick: handleClick, role: "presentation" }, { children: children })) })));
-};
-
 const AppBarEx = (props) => {
     const { contextToolbar, systemToolbar, container, style } = props, appbarProps = __rest(props, ["contextToolbar", "systemToolbar", "container", "style"]);
     const theme = material.useTheme();
@@ -244,6 +107,13 @@ const AppBarEx = (props) => {
     return (jsxRuntime.jsx(material.AppBar, Object.assign({ position: "static", style: Object.assign({ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex' }, style) }, appbarProps, { children: container ? (jsxRuntime.jsx(material.Container, Object.assign({ maxWidth: container }, { children: jsxRuntime.jsx(AppBarExInner, {}) }))) : (jsxRuntime.jsx(AppBarExInner, {})) })));
 };
 
+/**
+ * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
+ */
+const Background = (props) => {
+    return jsxRuntime.jsx(FlexRow, Object.assign({}, props));
+};
+
 const CookieConsentContext = react.createContext({});
 
 const CookiesAcceptedLocalStorageName = 'CookiesAccepted';
@@ -296,28 +166,6 @@ const isLocalhost = () => !!(window.location.hostname === 'localhost' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));
 
-/* eslint-disable react-hooks/exhaustive-deps */
-function useAsyncEffect(effect, inputs) {
-    react.useEffect(function () {
-        let mounted = true;
-        const promise = effect(() => {
-            return mounted;
-        });
-        Promise.resolve(promise)
-            .then((callback) => {
-            if (callback) {
-                callback === null || callback === void 0 ? void 0 : callback();
-            }
-        })
-            .catch((reason) => {
-            console.log(`useAsyncEffect Excepted: ${reason}`);
-        });
-        return function () {
-            mounted = false;
-        };
-    }, inputs !== null && inputs !== void 0 ? inputs : []);
-}
-
 let logProfiling = false;
 const enableProfileLogging = (enabled) => {
     logProfiling = enabled;
@@ -373,36 +221,50 @@ const setSessionStorageObject = (key, value, log) => {
     }
 };
 
-class Referrer {
-    constructor() {
-        var _a, _b;
-        this.session = (_a = this.getFromSession()) !== null && _a !== void 0 ? _a : document.referrer;
-        sessionStorage.setItem(Referrer.storageId, this.session);
-        this.local = (_b = this.getFromLocal()) !== null && _b !== void 0 ? _b : document.referrer;
-        localStorage.setItem(Referrer.storageId, this.local);
+class DripBaseEvent {
+    constructor(name, param) {
+        this.name = name;
+        this.param = param;
+        this.dcq = this.getDcq();
+        this.dcs = this.getDcs();
     }
-    getFromLocal() {
-        const value = localStorage.getItem(Referrer.storageId);
-        if (value && value.length > 0) {
-            return value;
-        }
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = [this.name];
+            if (this.param) {
+                payload.push(this.param);
+            }
+            payload.push(data);
+            this.dcq.push(payload);
+            yield sdkJs.delay(0);
+        });
     }
-    getFromSession() {
-        const value = sessionStorage.getItem(Referrer.storageId);
-        if (value && value.length > 0) {
-            return value;
+    getDcq() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const global = window;
+        if (!global._dcq) {
+            throw Error('DCQ not found');
         }
+        return global._dcq;
     }
-    toJson() {
-        if ((this.local && this.local.length > 0) || (this.session && this.session.length > 0)) {
-            return {
-                local: this.local,
-                session: this.session,
-            };
+    getDcs() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const global = window;
+        if (!global._dcs) {
+            throw Error('DCS not found');
         }
+        return global._dcs;
+    }
+}
+
+class DripCustomEvent extends DripBaseEvent {
+}
+
+class DripStandardEvents {
+    identify() {
+        return new DripBaseEvent('identify');
     }
 }
-Referrer.storageId = '_coin_referrer';
 
 class Fbq {
     constructor(pixelId) {
@@ -695,33 +557,6 @@ class GoogleBaseEvent {
 class GoogleCustomEvent extends GoogleBaseEvent {
 }
 
-class GoogleUserEventHandler {
-    testStarted(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const event = new GoogleCustomEvent('TestStarted');
-            return yield event.send(data);
-        });
-    }
-    funnelStarted(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const event = new GoogleCustomEvent('FunnelStarted');
-            return yield event.send(data);
-        });
-    }
-    viewContent(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const event = new GoogleCustomEvent('ViewContent');
-            return yield event.send(data);
-        });
-    }
-    userClick(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const event = new GoogleCustomEvent('UserClick');
-            return yield event.send(data);
-        });
-    }
-}
-
 class GoogleStandardEvent extends GoogleBaseEvent {
 }
 
@@ -818,80 +653,30 @@ class GoogleStandardEvents {
     }
 }
 
-class XyoUserEventHandler extends pixel.UserEventHandler {
-    constructor(handlers = []) {
-        super();
-        this.handlers = handlers !== null && handlers !== void 0 ? handlers : [new FacebookUserEventHandler(), new GoogleUserEventHandler()];
-    }
+class GoogleUserEventHandler {
     testStarted(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.allSettled(this.handlers.map((handler) => handler.testStarted(data)));
+            const event = new GoogleCustomEvent('TestStarted');
+            return yield event.send(data);
         });
     }
     funnelStarted(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.allSettled(this.handlers.map((handler) => handler.funnelStarted(data)));
-        });
-    }
-    viewContent(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.allSettled(this.handlers.map((handler) => handler.viewContent(data)));
-        });
-    }
-    userClick(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield Promise.allSettled(this.handlers.map((handler) => handler.userClick(data)));
-        });
-    }
-    static get() {
-        var _a;
-        this.instance = (_a = this.instance) !== null && _a !== void 0 ? _a : new XyoUserEventHandler();
-        return this.instance;
-    }
-}
-
-class DripBaseEvent {
-    constructor(name, param) {
-        this.name = name;
-        this.param = param;
-        this.dcq = this.getDcq();
-        this.dcs = this.getDcs();
-    }
-    send(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const payload = [this.name];
-            if (this.param) {
-                payload.push(this.param);
-            }
-            payload.push(data);
-            this.dcq.push(payload);
-            yield sdkJs.delay(0);
+            const event = new GoogleCustomEvent('FunnelStarted');
+            return yield event.send(data);
         });
     }
-    getDcq() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const global = window;
-        if (!global._dcq) {
-            throw Error('DCQ not found');
-        }
-        return global._dcq;
-    }
-    getDcs() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const global = window;
-        if (!global._dcs) {
-            throw Error('DCS not found');
-        }
-        return global._dcs;
-    }
-}
-
-class DripCustomEvent extends DripBaseEvent {
-}
-
-class DripStandardEvents {
-    identify() {
-        return new DripBaseEvent('identify');
+    viewContent(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new GoogleCustomEvent('ViewContent');
+            return yield event.send(data);
+        });
+    }
+    userClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new GoogleCustomEvent('UserClick');
+            return yield event.send(data);
+        });
     }
 }
 
@@ -989,6 +774,48 @@ class RedditStandardEvents {
     }
 }
 
+class Referrer {
+    constructor() {
+        var _a, _b;
+        this.session = (_a = this.getFromSession()) !== null && _a !== void 0 ? _a : document.referrer;
+        sessionStorage.setItem(Referrer.storageId, this.session);
+        this.local = (_b = this.getFromLocal()) !== null && _b !== void 0 ? _b : document.referrer;
+        localStorage.setItem(Referrer.storageId, this.local);
+    }
+    getFromLocal() {
+        const value = localStorage.getItem(Referrer.storageId);
+        if (value && value.length > 0) {
+            return value;
+        }
+    }
+    getFromSession() {
+        const value = sessionStorage.getItem(Referrer.storageId);
+        if (value && value.length > 0) {
+            return value;
+        }
+    }
+    toJson() {
+        if ((this.local && this.local.length > 0) || (this.session && this.session.length > 0)) {
+            return {
+                local: this.local,
+                session: this.session,
+            };
+        }
+    }
+}
+Referrer.storageId = '_coin_referrer';
+
+class SnapchatBaseEvent {
+    constructor(name) {
+        this.name = name;
+    }
+    send(_data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield sdkJs.delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
 class SnapTr {
     static getSnapTr() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1006,17 +833,6 @@ class SnapTr {
     }
 }
 
-class SnapchatBaseEvent {
-    constructor(name) {
-        this.name = name;
-    }
-    send(_data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield sdkJs.delay(0); //force async to increase reporting odds
-        });
-    }
-}
-
 class SnapchatStandardEvent extends SnapchatBaseEvent {
     send(data) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1339,6 +1155,60 @@ class XyUserEventHandler {
     }
 }
 
+class XyoUserEventHandler extends pixel.UserEventHandler {
+    constructor(handlers = []) {
+        super();
+        this.handlers = handlers !== null && handlers !== void 0 ? handlers : [new FacebookUserEventHandler(), new GoogleUserEventHandler()];
+    }
+    testStarted(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.allSettled(this.handlers.map((handler) => handler.testStarted(data)));
+        });
+    }
+    funnelStarted(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.allSettled(this.handlers.map((handler) => handler.funnelStarted(data)));
+        });
+    }
+    viewContent(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.allSettled(this.handlers.map((handler) => handler.viewContent(data)));
+        });
+    }
+    userClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.allSettled(this.handlers.map((handler) => handler.userClick(data)));
+        });
+    }
+    static get() {
+        var _a;
+        this.instance = (_a = this.instance) !== null && _a !== void 0 ? _a : new XyoUserEventHandler();
+        return this.instance;
+    }
+}
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function useAsyncEffect(effect, inputs) {
+    react.useEffect(function () {
+        let mounted = true;
+        const promise = effect(() => {
+            return mounted;
+        });
+        Promise.resolve(promise)
+            .then((callback) => {
+            if (callback) {
+                callback === null || callback === void 0 ? void 0 : callback();
+            }
+        })
+            .catch((reason) => {
+            console.log(`useAsyncEffect Excepted: ${reason}`);
+        });
+        return function () {
+            mounted = false;
+        };
+    }, inputs !== null && inputs !== void 0 ? inputs : []);
+}
+
 const MetaMaskEthersLoader = (props) => {
     const { children, enabled = true } = props;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1672,8 +1542,8 @@ const DebugUserEventsContext = react.createContext({
     },
 });
 
-const UserEventsProvider = ({ userEvents, children, }) => {
-    return (jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children })));
+const UserEventsProvider = ({ userEvents, children }) => {
+    return jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children }));
 };
 
 const calcSpacing = (theme, values) => {
@@ -1718,7 +1588,7 @@ const ButtonExBase = (props) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
     };
-    return (jsxRuntime.jsxs(material.Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsxRuntime.jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? (jsxRuntime.jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 })) : null, children] })));
+    return (jsxRuntime.jsxs(material.Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsxRuntime.jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? jsxRuntime.jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 }) : null, children] })));
 };
 
 const ButtonExTo = (_a) => {
@@ -1784,7 +1654,7 @@ const CookieConsent = (props) => {
     const { storageName } = useCookieConsent();
     const Inner = () => {
         const { accepted } = useCookieConsent();
-        return accepted ? null : (jsxRuntime.jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props)));
+        return accepted ? null : jsxRuntime.jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props));
     };
     //if not inside a context, make a context
     if (!storageName) {
@@ -1799,7 +1669,7 @@ const InvertableThemeContext = react.createContext({
 
 const resolveThemeColors = (options) => {
     var _a, _b;
-    const theme = styles$1.createTheme(options);
+    const theme = styles.createTheme(options);
     return merge__default["default"]({}, options, {
         palette: {
             text: {
@@ -1829,7 +1699,7 @@ darkTheme, darkOptions, lightOptions, }) => {
     if (resolve) {
         themeOptions = resolveThemeColors(themeOptions);
     }
-    const theme = noResponsiveFonts ? styles$1.createTheme(themeOptions) : material.responsiveFontSizes(styles$1.createTheme(themeOptions));
+    const theme = noResponsiveFonts ? styles.createTheme(themeOptions) : material.responsiveFontSizes(styles.createTheme(themeOptions));
     const Provider = () => {
         return (jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children })) })));
     };
@@ -1845,6 +1715,22 @@ const ScrollToTop = () => {
     return null;
 };
 
+const ScrollToTopButton = (_a) => {
+    var { children, anchorId } = _a, props = __rest(_a, ["children", "anchorId"]);
+    const trigger = material.useScrollTrigger({
+        disableHysteresis: true,
+        threshold: 100,
+    });
+    const handleClick = (event) => {
+        const anchor = (event.target.ownerDocument || document).querySelector(`#${anchorId}`);
+        if (anchor) {
+            anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    };
+    const theme = material.useTheme();
+    return (jsxRuntime.jsx(material.Zoom, Object.assign({ in: trigger }, props, { children: jsxRuntime.jsx(material.Box, Object.assign({ zIndex: 10, position: "fixed", right: theme.spacing(2), bottom: theme.spacing(2), onClick: handleClick, role: "presentation" }, { children: children })) })));
+};
+
 const BasePage = (_a) => {
     var { disableGutters, children, beta, container, hideFooter, appFooter, appBar, cookieConsent, hideAppBar, noindex = false, scrollToTopButton = false, title } = _a, props = __rest(_a, ["disableGutters", "children", "beta", "container", "hideFooter", "appFooter", "appBar", "cookieConsent", "hideAppBar", "noindex", "scrollToTopButton", "title"]);
     const theme = material.useTheme();
@@ -1870,10 +1756,33 @@ const BreadcrumbsEx = (_a) => {
     sdkJs.assertEx(pathParts.length - 1 === (titles === null || titles === void 0 ? void 0 : titles.length), `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`);
     return (jsxRuntime.jsxs(material.Breadcrumbs, Object.assign({ separator: separator }, props, { children: [pathParts.map((_pathPart, index) => {
                 const path = getPartialPath(pathParts, index);
-                return (jsxRuntime.jsx(material.Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: reactRouterDom.Link, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsxRuntime.jsx(FlexRow, { children: typeof logo === 'string' ? jsxRuntime.jsx("img", { src: logo }) : logo })) }), path));
+                return (jsxRuntime.jsx(material.Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: reactRouterDom.Link, to: path }, { children: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : jsxRuntime.jsx(FlexRow, { children: typeof logo === 'string' ? jsxRuntime.jsx("img", { src: logo }) : logo }) }), path));
             }), children] })));
 };
 
+const ErrorViewer = (props) => {
+    const { error } = props, boxProps = __rest(props, ["error"]);
+    const theme = material.useTheme();
+    return (jsxRuntime.jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }))] })));
+};
+
+const ErrorsViewer = (props) => {
+    const { onRetry, errors } = props, boxProps = __rest(props, ["onRetry", "errors"]);
+    return (jsxRuntime.jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
+                return jsxRuntime.jsx(ErrorViewer, { error: error }, index);
+            }), onRetry ? (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onRetry }, { children: jsxRuntime.jsx(ai.AiOutlineReload, {}) }))) : null] })));
+};
+
+const CoverProgress = (props) => {
+    var _a;
+    const { paper = true, open, opacity = 0.25, errors, onRetry } = props;
+    const theme = material.useTheme();
+    if (open) {
+        return (jsxRuntime.jsx(FlexGrowRow, Object.assign({ position: "absolute", margin: -1, top: 0, bottom: 0, right: 0, left: 0, bgcolor: paper ? theme.palette.background.paper : theme.palette.background.default }, { children: ((_a = errors === null || errors === void 0 ? void 0 : errors.length) !== null && _a !== void 0 ? _a : 0) === 0 ? jsxRuntime.jsx(material.CircularProgress, { style: { opacity } }) : jsxRuntime.jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry }) })));
+    }
+    return null;
+};
+
 const toAxiosError = (error) => {
     return error.isAxiosError ? error : undefined;
 };
@@ -2082,6 +1991,65 @@ function useWindowSize() {
     return windowSize;
 }
 
+const range = (n, in_min, in_max, out_min, out_max) => {
+    return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
+};
+const updateCanvas = (canvas, props) => {
+    const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = props;
+    let { fg } = props;
+    const hash = md5__default["default"](value);
+    const block = Math.floor(size / count);
+    const hashcolor = hash.slice(0, 6);
+    const current = canvas.current;
+    if (!current) {
+        return;
+    }
+    if (palette && palette.length) {
+        const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
+        fg = palette[index];
+    }
+    current.width = block * count + iconPadding;
+    current.height = block * count + iconPadding;
+    const arr = hash.split('').map((el) => {
+        const parsedEl = parseInt(el, 16);
+        if (parsedEl < 8) {
+            return 0;
+        }
+        else {
+            return 1;
+        }
+    });
+    const map = [];
+    map[0] = map[4] = arr.slice(0, 5);
+    map[1] = map[3] = arr.slice(5, 10);
+    map[2] = arr.slice(10, 15);
+    const ctx = current.getContext('2d');
+    if (ctx) {
+        ctx.imageSmoothingEnabled = false;
+        ctx.clearRect(0, 0, current.width, current.height);
+        map.forEach((row, i) => {
+            row.forEach((el, j) => {
+                if (el) {
+                    ctx.fillStyle = fg ? fg : '#' + hashcolor;
+                    ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+                }
+                else {
+                    ctx.fillStyle = bg;
+                    ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+                }
+            });
+        });
+    }
+};
+const Identicon = (_a) => {
+    var { size = 400, className = 'identicon', bg, count, fg, iconPadding, palette, value } = _a, props = __rest(_a, ["size", "className", "bg", "count", "fg", "iconPadding", "palette", "value"]);
+    const canvas = react.useRef(null);
+    react.useEffect(() => {
+        updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
+    });
+    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }) })));
+};
+
 const EthAccount = (_a) => {
     var { address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconSize", "iconOnly", "shortenedLength", "addressLength", "fontFamily", "toEtherScan", "onButtonClick"]);
     const { localAddress } = react.useContext(EthersContext);
@@ -2141,11 +2109,7 @@ const makeChildrenArray = (children) => {
     }
 };
 const buildLocalStorageKey = (localStorageProp) => {
-    return localStorageProp === true
-        ? defaultLocalStorageKey
-        : typeof localStorageProp === 'string'
-            ? localStorageProp !== null && localStorageProp !== void 0 ? localStorageProp : defaultLocalStorageKey
-            : '';
+    return localStorageProp === true ? defaultLocalStorageKey : typeof localStorageProp === 'string' ? localStorageProp !== null && localStorageProp !== void 0 ? localStorageProp : defaultLocalStorageKey : '';
 };
 const calcTotalWeight = (childList) => {
     let totalWeight = 0;
@@ -2230,6 +2194,21 @@ const ExperimentsDebugger = (_a) => {
         }) })));
 };
 
+const HoverScale = (props) => {
+    const { children, scale = 1.1 } = props;
+    const useStyles = styles$1.makeStyles(() => styles$1.createStyles({
+        zoomdiv: {
+            '&:hover': {
+                transform: `scale(${scale})`,
+                transitionDuration: '0.2s',
+                transitionTimingFunction: 'ease',
+            },
+        },
+    }));
+    const classes = useStyles();
+    return (jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.Box, Object.assign({ className: classes.zoomdiv }, { children: children })) }));
+};
+
 const LinkEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
     if (to) {
@@ -2320,14 +2299,14 @@ const PixelDebugger = () => {
                         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" })) })), 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}`))) }))), displayEvents && !events.length && jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }))] })) })) })) })) }));
 };
-const PixelEventDetails = ({ event, fields, index, events, }) => {
+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 })), isOpen && (jsxRuntime.jsx(material.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }))), events[index + 1] && jsxRuntime.jsx(material.Divider, {})] })));
 };
 
 const PixelDebuggerProvider = ({ children }) => {
     const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
-    return (jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children })));
+    return jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }));
 };
 
 const PixelDebuggerToggle = (_a) => {
@@ -2342,11 +2321,21 @@ const QuickTipButton = (_a) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsxRuntime.jsx(ai.AiOutlineQuestionCircle, { size: 16 }) })), jsxRuntime.jsx(MessageDialog, Object.assign({ onOk: () => setMessageOpen(false), onCancel: () => setMessageOpen(false), onClose: () => setMessageOpen(false), open: messageOpen, title: title !== null && title !== void 0 ? title : '' }, { children: children }))] }));
 };
 
-const RichResult = (props) => {
-    const { thing } = props;
-    const thingWithContext = thing;
-    thingWithContext['@context'] = 'https://schema.org';
-    return jsxRuntime.jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }));
+const RedirectWithQuery = ({ href, to, toOptions }) => {
+    const newPath = `${to}${document.location.search}`;
+    const navigate = reactRouterDom.useNavigate();
+    const { pathname } = reactRouterDom.useLocation();
+    react.useEffect(() => {
+        if (href) {
+            window.location.href = href;
+        }
+        else {
+            if (newPath !== pathname) {
+                navigate(newPath, Object.assign({ replace: true }, toOptions));
+            }
+        }
+    });
+    return jsxRuntime.jsx("div", {});
 };
 
 exports.ActionStatusType = void 0;
@@ -2393,12 +2382,17 @@ exports.MapCategoryType = void 0;
     MapCategoryType["VenueMap"] = "VenueMap";
 })(exports.MapCategoryType || (exports.MapCategoryType = {}));
 
+const RichResult = (props) => {
+    const { thing } = props;
+    const thingWithContext = thing;
+    thingWithContext['@context'] = 'https://schema.org';
+    return jsxRuntime.jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }));
+};
+
 const SelectEx = (_a) => {
     var { MenuProps, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuProps", "mode", "colorize"]);
     const theme = material.useTheme();
-    const colorizeMenuProps = colorize
-        ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
-        : {};
+    const colorizeMenuProps = colorize ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } } : {};
     return jsxRuntime.jsx(material.Select, Object.assign({ MenuProps: merge__default["default"](MenuProps, colorizeMenuProps) }, props));
 };
 
@@ -2436,6 +2430,7 @@ exports.CookieConsentContext = CookieConsentContext;
 exports.CookieConsentLoader = CookieConsentLoader;
 exports.CoverProgress = CoverProgress;
 exports.DebugUserEventsContext = DebugUserEventsContext;
+exports.DripBaseEvent = DripBaseEvent;
 exports.DripCustomEvent = DripCustomEvent;
 exports.DripStandardEvents = DripStandardEvents;
 exports.EF = EF;
@@ -2446,7 +2441,9 @@ exports.EthersLoader = EthersLoader;
 exports.Experiment = Experiment;
 exports.Experiments = Experiments;
 exports.ExperimentsDebugger = ExperimentsDebugger;
+exports.FacebookBaseEvent = FacebookBaseEvent;
 exports.FacebookCustomEvent = FacebookCustomEvent;
+exports.FacebookStandardEvent = FacebookStandardEvent;
 exports.FacebookStandardEvents = FacebookStandardEvents;
 exports.FacebookUserEventHandler = FacebookUserEventHandler;
 exports.Fbq = Fbq;
@@ -2456,6 +2453,7 @@ exports.FlexGrowRow = FlexGrowRow;
 exports.FlexRow = FlexRow;
 exports.GoogleBaseEvent = GoogleBaseEvent;
 exports.GoogleCustomEvent = GoogleCustomEvent;
+exports.GoogleStandardEvent = GoogleStandardEvent;
 exports.GoogleStandardEvents = GoogleStandardEvents;
 exports.GoogleUserEventHandler = GoogleUserEventHandler;
 exports.Gtag = Gtag;
@@ -2476,7 +2474,9 @@ exports.PixelDebuggerToggle = PixelDebuggerToggle;
 exports.Portal = Portal;
 exports.QuickTipButton = QuickTipButton;
 exports.Rdt = Rdt;
+exports.RedditBaseEvent = RedditBaseEvent;
 exports.RedditCustomEvent = RedditCustomEvent;
+exports.RedditStandardEvent = RedditStandardEvent;
 exports.RedditStandardEvents = RedditStandardEvents;
 exports.RedirectWithQuery = RedirectWithQuery;
 exports.Referrer = Referrer;
@@ -2485,10 +2485,14 @@ exports.ScrollToTop = ScrollToTop;
 exports.ScrollToTopButton = ScrollToTopButton;
 exports.SelectEx = SelectEx;
 exports.SnapTr = SnapTr;
+exports.SnapchatBaseEvent = SnapchatBaseEvent;
+exports.SnapchatStandardEvent = SnapchatStandardEvent;
 exports.SnapchatStandardEvents = SnapchatStandardEvents;
 exports.TapjoyStandardEvent = TapjoyStandardEvent;
 exports.TapjoyStandardEvents = TapjoyStandardEvents;
+exports.TiktokBaseEvent = TiktokBaseEvent;
 exports.TiktokCustomEvent = TiktokCustomEvent;
+exports.TiktokStandardEvent = TiktokStandardEvent;
 exports.TiktokStandardEvents = TiktokStandardEvents;
 exports.TokenAmount = TokenAmount;
 exports.Ttq = Ttq;