@xylabs/sdk-react 2.11.10 → 2.11.13

package/dist/esm2017/index.js

@@ -1,20 +1,20 @@
 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, Menu, Badge, Card, Divider, FormControl, FormLabel, Switch, Select } from '@mui/material';
+import { useTheme, Box, alpha, CircularProgress, LinearProgress, Paper, AppBar, Container, Toolbar, Button, Typography, Link, responsiveFontSizes, ScopedCssBaseline, ThemeProvider, useScrollTrigger, Zoom, Fab, Breadcrumbs, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery, Slider, Menu, Badge, Card, Divider, FormControl, FormLabel, Switch, Select } from '@mui/material';
 export { useMediaQuery } from '@mui/material';
-import { AiOutlineReload, AiOutlineQuestionCircle } from 'react-icons/ai';
-import { makeStyles, createStyles } from '@mui/styles';
-import md5 from 'md5';
-import { useRef, useEffect, createContext, useState, useContext } from 'react';
-import { useNavigate, useLocation, Link as Link$1 } from 'react-router-dom';
 import { KeyboardArrowUp } from '@mui/icons-material';
 import { Helmet } from 'react-helmet';
+import { createContext, useState, useContext, useEffect, useRef } from 'react';
 import { InfuraProvider, Web3Provider } from '@ethersproject/providers';
-import { getApiStage as getApiStage$1, assertEx, delay, EthAddress, forget, BigNumber } from '@xylabs/sdk-js';
-import { UserEventHandler, XyPixel } from '@xylabs/pixel';
+import { getApiStage as getApiStage$1, delay, assertEx, EthAddress, forget, BigNumber } from '@xylabs/sdk-js';
 import { parse, stringify } from 'query-string';
+import { XyPixel, UserEventHandler } from '@xylabs/pixel';
+import { useNavigate, useLocation, Link as Link$1 } from 'react-router-dom';
 import { createTheme } from '@mui/material/styles';
 import cloneDeep from 'lodash/cloneDeep';
 import merge from 'lodash/merge';
+import { AiOutlineReload, AiOutlineQuestionCircle } from 'react-icons/ai';
+import md5 from 'md5';
+import { makeStyles, createStyles } from '@mui/styles';
 import numeral from 'numeral';
 import { createPortal } from 'react-dom';
 
@@ -71,7 +71,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 = useTheme();
     return (jsxs(Box, Object.assign({ component: paper ? 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' ? (jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps))) : null, busy && busyVariant === 'circular' ? (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' ? jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps)) : null, busy && busyVariant === 'circular' ? jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps)) : null] })));
 };
 
 const FlexCol = (props) => {
@@ -88,143 +88,6 @@ const FlexGrowRow = (props) => {
     return 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 jsx(FlexRow, Object.assign({}, props));
-};
-
-const ErrorViewer = (props) => {
-    const { error } = props, boxProps = __rest(props, ["error"]);
-    const theme = useTheme();
-    return (jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsx(Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsx(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 (jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
-                return jsx(ErrorViewer, { error: error }, index);
-            }), onRetry ? (jsx(IconButton, Object.assign({ onClick: onRetry }, { children: jsx(AiOutlineReload, {}) }))) : null] })));
-};
-
-const CoverProgress = (props) => {
-    var _a;
-    const { paper = true, open, opacity = 0.25, errors, onRetry } = props;
-    const theme = useTheme();
-    if (open) {
-        return (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 ? (jsx(CircularProgress, { style: { opacity } })) : (jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry })) })));
-    }
-    return null;
-};
-
-const HoverScale = (props) => {
-    const { children, scale = 1.1 } = props;
-    const useStyles = makeStyles(() => createStyles({
-        zoomdiv: {
-            '&:hover': {
-                transform: `scale(${scale})`,
-                transitionDuration: '0.2s',
-                transitionTimingFunction: 'ease',
-            },
-        },
-    }));
-    const classes = useStyles();
-    return (jsx(FlexRow, { children: jsx(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(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 = useRef(null);
-    useEffect(() => {
-        updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
-    });
-    return (jsx(FlexRow, Object.assign({}, props, { children: jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }) })));
-};
-
-const RedirectWithQuery = ({ href, to, toOptions }) => {
-    const newPath = `${to}${document.location.search}`;
-    const navigate = useNavigate();
-    const { pathname } = useLocation();
-    useEffect(() => {
-        if (href) {
-            window.location.href = href;
-        }
-        else {
-            if (newPath !== pathname) {
-                navigate(newPath, Object.assign({ replace: true }, toOptions));
-            }
-        }
-    });
-    return jsx("div", {});
-};
-
-const ScrollToTopButton = (_a) => {
-    var { children, anchorId } = _a, props = __rest(_a, ["children", "anchorId"]);
-    const trigger = 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 = useTheme();
-    return (jsx(Zoom, Object.assign({ in: trigger }, props, { children: jsx(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 = useTheme();
@@ -234,6 +97,13 @@ const AppBarEx = (props) => {
     return (jsx(AppBar, Object.assign({ position: "static", style: Object.assign({ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex' }, style) }, appbarProps, { children: container ? (jsx(Container, Object.assign({ maxWidth: container }, { children: jsx(AppBarExInner, {}) }))) : (jsx(AppBarExInner, {})) })));
 };
 
+/**
+ * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
+ */
+const Background = (props) => {
+    return jsx(FlexRow, Object.assign({}, props));
+};
+
 const CookieConsentContext = createContext({});
 
 const CookiesAcceptedLocalStorageName = 'CookiesAccepted';
@@ -286,28 +156,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) {
-    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;
@@ -363,36 +211,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 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) {
@@ -685,33 +547,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 {
 }
 
@@ -808,80 +643,30 @@ class GoogleStandardEvents {
     }
 }
 
-class XyoUserEventHandler extends 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)));
+            const event = new GoogleCustomEvent('FunnelStarted');
+            return yield event.send(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 delay(0);
-        });
-    }
-    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');
+        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);
+        });
     }
 }
 
@@ -979,6 +764,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 delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
 class SnapTr {
     static getSnapTr() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -996,17 +823,6 @@ class SnapTr {
     }
 }
 
-class SnapchatBaseEvent {
-    constructor(name) {
-        this.name = name;
-    }
-    send(_data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield delay(0); //force async to increase reporting odds
-        });
-    }
-}
-
 class SnapchatStandardEvent extends SnapchatBaseEvent {
     send(data) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1329,6 +1145,60 @@ class XyUserEventHandler {
     }
 }
 
+class XyoUserEventHandler extends 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) {
+    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
@@ -1662,8 +1532,8 @@ const DebugUserEventsContext = createContext({
     },
 });
 
-const UserEventsProvider = ({ userEvents, children, }) => {
-    return (jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children })));
+const UserEventsProvider = ({ userEvents, children }) => {
+    return jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children }));
 };
 
 const calcSpacing = (theme, values) => {
@@ -1708,7 +1578,7 @@ const ButtonExBase = (props) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
     };
-    return (jsxs(Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? (jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 })) : null, children] })));
+    return (jsxs(Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 }) : null, children] })));
 };
 
 const ButtonExTo = (_a) => {
@@ -1774,7 +1644,7 @@ const CookieConsent = (props) => {
     const { storageName } = useCookieConsent();
     const Inner = () => {
         const { accepted } = useCookieConsent();
-        return accepted ? null : (jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props)));
+        return accepted ? null : 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) {
@@ -1835,6 +1705,22 @@ const ScrollToTop = () => {
     return null;
 };
 
+const ScrollToTopButton = (_a) => {
+    var { children, anchorId } = _a, props = __rest(_a, ["children", "anchorId"]);
+    const trigger = 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 = useTheme();
+    return (jsx(Zoom, Object.assign({ in: trigger }, props, { children: jsx(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 = useTheme();
@@ -1860,10 +1746,33 @@ const BreadcrumbsEx = (_a) => {
     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 (jsxs(Breadcrumbs, Object.assign({ separator: separator }, props, { children: [pathParts.map((_pathPart, index) => {
                 const path = getPartialPath(pathParts, index);
-                return (jsx(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: Link$1, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsx(FlexRow, { children: typeof logo === 'string' ? jsx("img", { src: logo }) : logo })) }), path));
+                return (jsx(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: Link$1, to: path }, { children: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : jsx(FlexRow, { children: typeof logo === 'string' ? jsx("img", { src: logo }) : logo }) }), path));
             }), children] })));
 };
 
+const ErrorViewer = (props) => {
+    const { error } = props, boxProps = __rest(props, ["error"]);
+    const theme = useTheme();
+    return (jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsx(Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsx(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 (jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
+                return jsx(ErrorViewer, { error: error }, index);
+            }), onRetry ? (jsx(IconButton, Object.assign({ onClick: onRetry }, { children: jsx(AiOutlineReload, {}) }))) : null] })));
+};
+
+const CoverProgress = (props) => {
+    var _a;
+    const { paper = true, open, opacity = 0.25, errors, onRetry } = props;
+    const theme = useTheme();
+    if (open) {
+        return (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 ? jsx(CircularProgress, { style: { opacity } }) : jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry }) })));
+    }
+    return null;
+};
+
 const toAxiosError = (error) => {
     return error.isAxiosError ? error : undefined;
 };
@@ -2072,6 +1981,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(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 = useRef(null);
+    useEffect(() => {
+        updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
+    });
+    return (jsx(FlexRow, Object.assign({}, props, { children: 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 } = useContext(EthersContext);
@@ -2131,11 +2099,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;
@@ -2220,6 +2184,21 @@ const ExperimentsDebugger = (_a) => {
         }) })));
 };
 
+const HoverScale = (props) => {
+    const { children, scale = 1.1 } = props;
+    const useStyles = makeStyles(() => createStyles({
+        zoomdiv: {
+            '&:hover': {
+                transform: `scale(${scale})`,
+                transitionDuration: '0.2s',
+                transitionTimingFunction: 'ease',
+            },
+        },
+    }));
+    const classes = useStyles();
+    return (jsx(FlexRow, { children: jsx(Box, Object.assign({ className: classes.zoomdiv }, { children: children })) }));
+};
+
 const LinkEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
     if (to) {
@@ -2310,14 +2289,14 @@ const PixelDebugger = () => {
                         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" })) })), 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}`))) }))), displayEvents && !events.length && jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }))] })) })) })) })) }));
 };
-const PixelEventDetails = ({ event, fields, index, events, }) => {
+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 })), isOpen && (jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }))), events[index + 1] && jsx(Divider, {})] })));
 };
 
 const PixelDebuggerProvider = ({ children }) => {
     const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
-    return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children })));
+    return jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }));
 };
 
 const PixelDebuggerToggle = (_a) => {
@@ -2332,11 +2311,21 @@ const QuickTipButton = (_a) => {
     return (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsx(AiOutlineQuestionCircle, { size: 16 }) })), 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 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 = useNavigate();
+    const { pathname } = useLocation();
+    useEffect(() => {
+        if (href) {
+            window.location.href = href;
+        }
+        else {
+            if (newPath !== pathname) {
+                navigate(newPath, Object.assign({ replace: true }, toOptions));
+            }
+        }
+    });
+    return jsx("div", {});
 };
 
 var ActionStatusType;
@@ -2383,12 +2372,17 @@ var MapCategoryType;
     MapCategoryType["VenueMap"] = "VenueMap";
 })(MapCategoryType || (MapCategoryType = {}));
 
+const RichResult = (props) => {
+    const { thing } = props;
+    const thingWithContext = thing;
+    thingWithContext['@context'] = 'https://schema.org';
+    return 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 = useTheme();
-    const colorizeMenuProps = colorize
-        ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
-        : {};
+    const colorizeMenuProps = colorize ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } } : {};
     return jsx(Select, Object.assign({ MenuProps: merge(MenuProps, colorizeMenuProps) }, props));
 };
 
@@ -2410,5 +2404,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 }) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }))) : null] }), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }))] })) })));
 };
 
-export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, EF, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, FacebookUserEventHandler, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkEx, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatStandardEvents, TapjoyStandardEvent, TapjoyStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsProvider, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useInterval, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useTimeout, useUserEvents, useWebP, useWindowSize };
+export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripBaseEvent, DripCustomEvent, DripStandardEvents, EF, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookBaseEvent, FacebookCustomEvent, FacebookStandardEvent, FacebookStandardEvents, FacebookUserEventHandler, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkEx, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditBaseEvent, RedditCustomEvent, RedditStandardEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatBaseEvent, SnapchatStandardEvent, SnapchatStandardEvents, TapjoyStandardEvent, TapjoyStandardEvents, TiktokBaseEvent, TiktokCustomEvent, TiktokStandardEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsProvider, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useInterval, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useTimeout, useUserEvents, useWebP, useWindowSize };
 //# sourceMappingURL=index.js.map