@xylabs/sdk-react 2.9.15 → 2.9.20

package/dist/esm2017/index.js

@@ -0,0 +1,2199 @@
+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, 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';
+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 { InfuraProvider, Web3Provider } from '@ethersproject/providers';
+import { getApiStage as getApiStage$1, delay, assertEx, EthAddress, forget, BigNumber } from '@xylabs/sdk-js';
+import { UserEventHandler, XyPixel } from '@xylabs/pixel';
+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.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const BusyCircularProgress = (_a) => {
+    var { bgcolor, style, rounded, size, opacity = 0.85 } = _a, props = __rest(_a, ["bgcolor", "style", "rounded", "size", "opacity"]);
+    const theme = useTheme();
+    return (jsx(Box, Object.assign({ display: "flex", bgcolor: alpha(bgcolor !== null && bgcolor !== void 0 ? bgcolor : theme.palette.background.default, parseFloat(`${opacity}`)), flexGrow: 1, position: "absolute", left: 0, right: 0, top: 0, bottom: 0, justifyContent: "center", alignItems: "center", overflow: "hidden", style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0 }, style) }, { children: jsx(CircularProgress, Object.assign({ size: size }, props), void 0) }), void 0));
+};
+
+const BusyLinearProgress = (_a) => {
+    var { bgcolor, style, rounded, opacity = 0.85 } = _a, props = __rest(_a, ["bgcolor", "style", "rounded", "opacity"]);
+    const theme = useTheme();
+    return (jsx(Box, Object.assign({ display: "flex", flexDirection: "column", bgcolor: alpha(bgcolor !== null && bgcolor !== void 0 ? bgcolor : theme.palette.background.default, parseFloat(`${opacity}`)), position: "absolute", left: 0, right: 0, top: 0, bottom: 0, justifyContent: "flex-start", alignItems: "stretch", overflow: "hidden", style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0 }, style) }, { children: jsx(LinearProgress, Object.assign({}, props), void 0) }), void 0));
+};
+
+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), void 0)) : null, busy && busyVariant === 'circular' ? (jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps), void 0)) : null] }), void 0));
+};
+
+const FlexCol = (props) => {
+    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "column", justifyContent: "center" }, props), void 0);
+};
+const FlexGrowCol = (props) => {
+    return jsx(FlexCol, Object.assign({ flexGrow: 1 }, props), void 0);
+};
+
+const FlexRow = (props) => {
+    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, props), void 0);
+};
+const FlexGrowRow = (props) => {
+    return jsx(FlexRow, Object.assign({ flexGrow: 1 }, props), void 0);
+};
+
+/**
+ * @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), void 0);
+};
+
+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 }), void 0), jsx(Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }), void 0)] }), void 0));
+};
+
+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, {}, void 0) }), void 0)) : null] }), void 0));
+};
+
+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 } }, void 0)) : (jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry }, void 0)) }), void 0));
+    }
+    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 }), void 0) }, void 0));
+};
+
+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 } }, void 0) }), void 0));
+};
+
+const RedirectWithQuery = ({ to, toOptions }) => {
+    const newPath = `${to}${document.location.search}`;
+    const navigate = useNavigate();
+    const { pathname } = useLocation();
+    useEffect(() => {
+        if (newPath !== pathname) {
+            navigate(newPath, Object.assign({ replace: true }, toOptions));
+        }
+    });
+    return jsx("div", {}, void 0);
+};
+
+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 }), void 0) }), void 0));
+};
+
+const AppBarEx = (props) => {
+    const { contextToolbar, systemToolbar, container, style } = props, appbarProps = __rest(props, ["contextToolbar", "systemToolbar", "container", "style"]);
+    const theme = useTheme();
+    const AppBarExInner = () => {
+        return (jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between" }, { children: [contextToolbar !== null && contextToolbar !== void 0 ? contextToolbar : jsx(Toolbar, {}, void 0), systemToolbar !== null && systemToolbar !== void 0 ? systemToolbar : jsx(Toolbar, {}, void 0)] }), void 0));
+    };
+    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, {}, void 0) }), void 0)) : (jsx(AppBarExInner, {}, void 0)) }), void 0));
+};
+
+const CookieConsentContext = createContext({});
+
+const CookiesAcceptedLocalStorageName = 'CookiesAccepted';
+const CookieConsentLoader = ({ children }) => {
+    const getAcceptedFromLocalStorage = () => {
+        return localStorage.getItem(CookiesAcceptedLocalStorageName) === 'true';
+    };
+    const setAcceptedToLocalStorage = (accepted) => {
+        localStorage.setItem(CookiesAcceptedLocalStorageName, accepted ? 'true' : 'false');
+    };
+    const [accepted, setAccepted] = useState(getAcceptedFromLocalStorage());
+    const setAcceptedHandler = (accepted) => {
+        setAcceptedToLocalStorage(accepted);
+        setAccepted(accepted);
+    };
+    const clearAccepted = () => {
+        localStorage.removeItem(CookiesAcceptedLocalStorageName);
+        setAccepted(getAcceptedFromLocalStorage());
+    };
+    return (jsx(CookieConsentContext.Provider, Object.assign({ value: { accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName } }, { children: children }), void 0));
+};
+
+const useCookieConsent = () => {
+    return useContext(CookieConsentContext);
+};
+
+const EthersContext = createContext({});
+
+const infuraKey = '1d9f8053c65a49cfb99fafaa8ef201c0';
+const InfuraEthersLoader = (props) => {
+    const { children } = props;
+    const chainId = 1;
+    const provider = new InfuraProvider(1, infuraKey);
+    return (jsx(EthersContext.Provider, Object.assign({ value: {
+            busy: false,
+            chainId,
+            isConnected: true,
+            provider,
+            signer: null,
+        } }, { children: children }), void 0));
+};
+
+const getApiStage = () => {
+    return getApiStage$1(document.location.hostname);
+};
+
+const isLocalhost = !!(window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 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;
+};
+const profileResults = [];
+const profileBlock = (name, closure) => __awaiter(void 0, void 0, void 0, function* () {
+    const startTime = Date.now();
+    yield closure();
+    const endTime = Date.now();
+    profileResults.push({ endTime, name, startTime });
+    if (logProfiling) {
+        console.log(`Timed ${name} [${endTime - startTime}ms]`);
+    }
+});
+
+const getLocalStorageObject = (key, log) => {
+    var _a;
+    let result = {};
+    try {
+        result = JSON.parse((_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : '{}');
+    }
+    catch (e) {
+        log === null || log === void 0 ? void 0 : log.error('getLocalStorageObject', e);
+    }
+    return result;
+};
+const setLocalStorageObject = (key, value, log) => {
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+    catch (e) {
+        log === null || log === void 0 ? void 0 : log.error('setLocalStorageObject', e);
+    }
+};
+
+const getSessionStorageObject = (key, log) => {
+    var _a;
+    let result = {};
+    try {
+        result = JSON.parse((_a = sessionStorage.getItem(key)) !== null && _a !== void 0 ? _a : '{}');
+    }
+    catch (e) {
+        log === null || log === void 0 ? void 0 : log.error('getSessionStorageObject', e);
+    }
+    return result;
+};
+const setSessionStorageObject = (key, value, log) => {
+    try {
+        sessionStorage.setItem(key, JSON.stringify(value));
+    }
+    catch (e) {
+        log === null || log === void 0 ? void 0 : log.error('setSessionStorageObject', e);
+    }
+};
+
+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 XyoUserEventHandler extends UserEventHandler {
+    constructor(handlers = []) {
+        super();
+        this.handlers = handlers;
+    }
+    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)));
+        });
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const global = window;
+
+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() {
+        if (!global._dcq) {
+            throw Error('DCQ not found');
+        }
+        return global._dcq;
+    }
+    getDcs() {
+        if (!global._dcs) {
+            throw Error('DCS not found');
+        }
+        return global._dcs;
+    }
+}
+
+class DripCustomEvent extends DripBaseEvent {
+}
+
+class DripStandardEvents {
+    identify() {
+        return new DripBaseEvent('identify');
+    }
+}
+
+class Fbq {
+    constructor(pixelId) {
+        this.pixelId = pixelId;
+        this.fbq = function () {
+            // eslint-disable-next-line prefer-rest-params,prefer-spread
+            this.fbq.callMethod ? this.fbq.callMethod.apply(this.fbq, arguments) : this.fbq.queue.push(arguments);
+        };
+        this.fbq.push = this.fbq;
+        this.fbq.loaded = true;
+        this.fbq.version = '2.0';
+        this.fbq.queue = [];
+        //we have to set these to globals because that is where the facebook script looks for them
+        global.fbq = this.fbq;
+        global._fbq = this.fbq;
+        this.fbq('init', pixelId);
+        this.fbq('track', 'PageView');
+    }
+    static init(pixelId) {
+        if (!this.instance) {
+            this.instance = new Fbq(pixelId);
+        }
+        return this.instance;
+    }
+    track(event, data) {
+        this.fbq('track', event, Object.assign({}, data));
+    }
+    trackCustom(event, data) {
+        this.fbq('trackCustom', event, Object.assign({}, data));
+    }
+}
+
+class FacebookBaseEvent {
+    constructor(name) {
+        this.name = name;
+        this.fbq = assertEx(Fbq.instance, 'Missing Fbq');
+    }
+    send(_data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class FacebookCustomEvent extends FacebookBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.fbq.trackCustom(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class FacebookStandardEvent extends FacebookBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.fbq.track(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class FacebookStandardEvents {
+    addPaymentInfo() {
+        return new FacebookStandardEvent('AddPaymentInfo');
+    }
+    addToCart() {
+        return new FacebookStandardEvent('AddToCart');
+    }
+    addToWishList() {
+        return new FacebookStandardEvent('AddToWishList');
+    }
+    completedRegistration() {
+        return new FacebookStandardEvent('CompleteRegistration');
+    }
+    contact() {
+        return new FacebookStandardEvent('Contact');
+    }
+    customizeProduct() {
+        return new FacebookStandardEvent('CustomizeProduct');
+    }
+    donate() {
+        return new FacebookStandardEvent('Donate');
+    }
+    findLocation() {
+        return new FacebookStandardEvent('FindLocation');
+    }
+    initiateCheckout() {
+        return new FacebookStandardEvent('InitiateCheckout');
+    }
+    lead() {
+        return new FacebookStandardEvent('Lead');
+    }
+    pageView() {
+        return new FacebookStandardEvent('PageView');
+    }
+    purchase() {
+        return new FacebookStandardEvent('Purchase');
+    }
+    schedule() {
+        return new FacebookStandardEvent('Schedule');
+    }
+    search() {
+        return new FacebookStandardEvent('Search');
+    }
+    startTrial() {
+        return new FacebookStandardEvent('StartTrial');
+    }
+    submitApplication() {
+        return new FacebookStandardEvent('SubmitApplication');
+    }
+    subscribe() {
+        return new FacebookStandardEvent('Subscribe');
+    }
+    viewContent() {
+        return new FacebookStandardEvent('ViewContent');
+    }
+}
+
+class Gtag {
+    constructor(ga4id, awid, domains) {
+        var _a, _b, _c, _d;
+        this.ga4id = ga4id;
+        this.awid = awid;
+        this.domains = domains;
+        global.dataLayer = (_a = global.dataLayer) !== null && _a !== void 0 ? _a : [];
+        this.gtag =
+            (_b = global.gtag) !== null && _b !== void 0 ? _b : function () {
+                // eslint-disable-next-line prefer-rest-params
+                global.dataLayer.push(arguments);
+            };
+        global.gtag = this.gtag;
+        this.gtag('js', new Date());
+        this.gtag('config', ga4id);
+        //this.gtag('config', awid) - this is configured in the Data Stream in Google Analytics
+        const parsedQueryString = parse(document.location.search);
+        //we handle the utm_referrer here incase a referrer was forwarded (special.coinapp.co does this)
+        sessionStorage.setItem('initialReferrer', decodeURIComponent((_d = (_c = parsedQueryString['utm_referrer']) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : document.referrer));
+        delete parsedQueryString['utm_referrer'];
+        const remainingSearch = parsedQueryString ? stringify(parsedQueryString) : '';
+        sessionStorage.setItem('initialQuery', remainingSearch);
+        sessionStorage.setItem('initialPage', document.location.href);
+    }
+    updatePagePath(page_path) {
+        const ga4id = assertEx(this.ga4id, 'Missing GA4ID');
+        const pathOnly = page_path.split('?')[0];
+        const search = Gtag.getInitialQuery();
+        this.gtag('config', ga4id, { page_path: `${pathOnly}${search}` });
+    }
+    //
+    static getInitialQuery() {
+        return sessionStorage.getItem('initialQuery') || '';
+    }
+    static getInitialPage() {
+        return sessionStorage.getItem('initialPage') || '';
+    }
+    static getInitialReferrer() {
+        return sessionStorage.getItem('initialReferrer') || '';
+    }
+    static clearDataLayer() {
+        const dataLayer = global.dataLayer;
+        dataLayer.length = 0;
+    }
+    static init(ga4id, awid, domains) {
+        if (!this.instance) {
+            return this.reinit(ga4id, awid, domains);
+        }
+        return this.instance;
+    }
+    static reinit(ga4id, awid, domains) {
+        this.instance = new Gtag(ga4id, awid, domains);
+        return this.instance;
+    }
+    static updatePagePath(page_path) {
+        const instance = assertEx(this.instance, 'Not initialized');
+        return instance.updatePagePath(page_path);
+    }
+    sendAnalytics(event, data) {
+        return new Promise((resolve) => {
+            this.gtag('event', event, Object.assign(Object.assign({}, data), { event_callback: () => {
+                    resolve();
+                }, event_timeout: 2000, page_location: Gtag.getInitialPage(), page_referrer: Gtag.getInitialReferrer(), send_to: this.ga4id }));
+        });
+    }
+    sendAdwords(event, data) {
+        return new Promise((resolve) => {
+            this.gtag('event', 'conversion', Object.assign(Object.assign({}, data), { event_callback: () => {
+                    resolve();
+                }, event_timeout: 2000, send_to: `${this.awid}/${event}` }));
+        });
+    }
+}
+
+class Gtm {
+    constructor(containerId) {
+        this.containerId = containerId;
+        const global = window;
+        global.dataLayer = global.dataLayer || [];
+        global.dataLayer.push({ event: 'gtm.js', 'gtm.start': new Date().getTime() });
+    }
+    static getInitialQuery() {
+        return sessionStorage.getItem('initialQuery') || '';
+    }
+    static clearDataLayer() {
+        const global = window;
+        const dataLayer = global.dataLayer;
+        dataLayer.length = 0;
+    }
+    static init(containerId) {
+        if (!this.instance) {
+            this.instance = new Gtm(containerId);
+        }
+        return this.instance;
+    }
+    send(event, data, eventTimeout = 500) {
+        return new Promise((resolve) => {
+            var _a;
+            const global = window;
+            (_a = global.dataLayer) === null || _a === void 0 ? void 0 : _a.push(Object.assign(Object.assign({ event }, data), { eventCallback: () => {
+                    resolve();
+                }, eventTimeout }));
+        });
+    }
+}
+
+class GoogleBaseEvent {
+    constructor(name, adwordConversionId) {
+        this.name = name;
+        this.adwordConversionId = adwordConversionId;
+    }
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.sendGtag(data);
+        });
+    }
+    sendGtag(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.gtag().sendAnalytics(this.name, data);
+            if (this.adwordConversionId) {
+                yield this.gtag().sendAdwords(this.adwordConversionId, data);
+            }
+        });
+    }
+    sendGtm(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.gtm().send(this.name, data);
+        });
+    }
+    gtag() {
+        return assertEx(Gtag.instance, 'Missing/uninitialized gtag');
+    }
+    gtm() {
+        return assertEx(Gtm.instance, 'Missing/uninitialized gtm');
+    }
+}
+
+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 {
+}
+
+class GoogleStandardEvents {
+    addPaymentInfo() {
+        return new GoogleStandardEvent('add_paymennt_info');
+    }
+    addShippingInfo() {
+        return new GoogleStandardEvent('add_shipping_info');
+    }
+    addToCart() {
+        return new GoogleStandardEvent('add_to_cart');
+    }
+    addToWishList() {
+        return new GoogleStandardEvent('add_to_wishlist');
+    }
+    beginCheckout() {
+        return new GoogleStandardEvent('begin_checkout');
+    }
+    earnVirtualCurrency() {
+        return new GoogleStandardEvent('earn_virtual_currency');
+    }
+    generateLead() {
+        return new GoogleStandardEvent('generate_lead');
+    }
+    joinGroup() {
+        return new GoogleStandardEvent('join_group');
+    }
+    levelEnd() {
+        return new GoogleStandardEvent('level_end');
+    }
+    levelStart() {
+        return new GoogleStandardEvent('level_start');
+    }
+    levelUp() {
+        return new GoogleStandardEvent('level_up');
+    }
+    login() {
+        return new GoogleStandardEvent('login');
+    }
+    postScore() {
+        return new GoogleStandardEvent('post_score');
+    }
+    purchase() {
+        return new GoogleStandardEvent('purchase');
+    }
+    refund() {
+        return new GoogleStandardEvent('refund');
+    }
+    removeFromCart() {
+        return new GoogleStandardEvent('remove_from_cart');
+    }
+    search() {
+        return new GoogleStandardEvent('search');
+    }
+    selectContent() {
+        return new GoogleStandardEvent('select_content');
+    }
+    selectItem() {
+        return new GoogleStandardEvent('select_item');
+    }
+    selectPromotion() {
+        return new GoogleStandardEvent('select_promotion');
+    }
+    share() {
+        return new GoogleStandardEvent('share');
+    }
+    signUp() {
+        return new GoogleStandardEvent('sign_up');
+    }
+    spendVirtualCurrency() {
+        return new GoogleStandardEvent('spend_virtual_currency');
+    }
+    tutorialBegin() {
+        return new GoogleStandardEvent('tutorial_begin');
+    }
+    tutorialComplete() {
+        return new GoogleStandardEvent('tutorial_complete');
+    }
+    unlockAchievement() {
+        return new GoogleStandardEvent('unlock_achievement');
+    }
+    viewCart() {
+        return new GoogleStandardEvent('view_cart');
+    }
+    viewItem() {
+        return new GoogleStandardEvent('view_item');
+    }
+    viewItemList() {
+        return new GoogleStandardEvent('view_item_list');
+    }
+    viewPromotion() {
+        return new GoogleStandardEvent('view_promotion');
+    }
+}
+
+class Rdt {
+    static init(pixelId) {
+        try {
+            Rdt.instance = new Rdt();
+            Rdt.instance.load(pixelId);
+            Rdt.instance.track('PageVisit');
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+    }
+    static getRdt() {
+        if (global.rdt) {
+            return global.rdt;
+        }
+        console.warn('Missing rdt');
+    }
+    load(id) {
+        try {
+            Rdt.getRdt()('init', id);
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+    }
+    track(event, data) {
+        try {
+            Rdt.getRdt()('track', event, Object.assign({}, data));
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+    }
+}
+
+class RedditBaseEvent {
+    constructor(name) {
+        this.name = name;
+        this.rdt = assertEx(Rdt.instance, 'Missing Rdt');
+    }
+    send(_data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class RedditCustomEvent extends RedditBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.rdt.track(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class RedditStandardEvent extends RedditBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.rdt.track(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class RedditStandardEvents {
+    pageView() {
+        return new RedditStandardEvent('PageView');
+    }
+    viewContent() {
+        return new RedditStandardEvent('ViewContent');
+    }
+    addToCart() {
+        return new RedditStandardEvent('AddToCart');
+    }
+    addToWishlist() {
+        return new RedditStandardEvent('AddToWishlist');
+    }
+    purchase() {
+        return new RedditStandardEvent('Purchase');
+    }
+    signup() {
+        return new RedditStandardEvent('SignUp');
+    }
+    lead() {
+        return new RedditStandardEvent('Lead');
+    }
+    search() {
+        return new RedditStandardEvent('Search');
+    }
+}
+
+class SnapTr {
+    static getSnapTr() {
+        if (global.snaptr) {
+            return global.snaptr;
+        }
+        console.warn('Missing snaptr');
+    }
+    static track(event, data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.getSnapTr()('track', event, data);
+            yield delay(0);
+        });
+    }
+}
+
+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* () {
+            yield SnapTr.track(this.name, data);
+        });
+    }
+}
+
+class SnapchatStandardEvents {
+    pageView() {
+        return new SnapchatStandardEvent('PAGE_VIEW');
+    }
+    signUp() {
+        return new SnapchatStandardEvent('SIGN_UP');
+    }
+    purchase() {
+        return new SnapchatStandardEvent('PURCHASE');
+    }
+    save() {
+        return new SnapchatStandardEvent('SAVE');
+    }
+    startCheckout() {
+        return new SnapchatStandardEvent('START_CHECKOUT');
+    }
+    addCart() {
+        return new SnapchatStandardEvent('ADD_CART');
+    }
+    openApp() {
+        return new SnapchatStandardEvent('OPEN_APP');
+    }
+    viewContent() {
+        return new SnapchatStandardEvent('VIEW_CONTENT');
+    }
+    addBilling() {
+        return new SnapchatStandardEvent('ADD_BILLING');
+    }
+    search() {
+        return new SnapchatStandardEvent('SEARCH');
+    }
+    subscribe() {
+        return new SnapchatStandardEvent('SUBSCRIBE');
+    }
+    adClick() {
+        return new SnapchatStandardEvent('AD_CLICK');
+    }
+    adView() {
+        return new SnapchatStandardEvent('AD_VIEW');
+    }
+    completeTutorial() {
+        return new SnapchatStandardEvent('COMPLETE_TUTORIAL');
+    }
+    invite() {
+        return new SnapchatStandardEvent('INVITE');
+    }
+    login() {
+        return new SnapchatStandardEvent('LOGIN');
+    }
+    share() {
+        return new SnapchatStandardEvent('SHARE');
+    }
+    reserve() {
+        return new SnapchatStandardEvent('RESERVE');
+    }
+    achievementUnlocked() {
+        return new SnapchatStandardEvent('ACHIEVEMENT_UNLOCKED');
+    }
+    addToWishlist() {
+        return new SnapchatStandardEvent('ADD_TO_WISHLIST');
+    }
+    spentCredits() {
+        return new SnapchatStandardEvent('SPENT_CREDITS');
+    }
+    rate() {
+        return new SnapchatStandardEvent('RATE');
+    }
+    startTrial() {
+        return new SnapchatStandardEvent('START_TRIAL');
+    }
+    listView() {
+        return new SnapchatStandardEvent('LIST_VIEW');
+    }
+    custom1() {
+        return new SnapchatStandardEvent('CUSTOM_EVENT_1');
+    }
+    custom2() {
+        return new SnapchatStandardEvent('CUSTOM_EVENT_2');
+    }
+    custom3() {
+        return new SnapchatStandardEvent('CUSTOM_EVENT_3');
+    }
+    custom4() {
+        return new SnapchatStandardEvent('CUSTOM_EVENT_4');
+    }
+    custom5() {
+        return new SnapchatStandardEvent('CUSTOM_EVENT_5');
+    }
+}
+
+class Ttq {
+    static init(pixelId) {
+        try {
+            Ttq.instance = new Ttq();
+            Ttq.getTtq().load(pixelId);
+            Ttq.page();
+        }
+        catch (ex) {
+            console.error(`Ttq.init: ${ex}`);
+        }
+    }
+    static getTtq() {
+        if (global.ttq) {
+            return global.ttq;
+        }
+        console.warn('Missing ttq');
+    }
+    static page() {
+        try {
+            Ttq.getTtq().page();
+        }
+        catch (ex) {
+            console.error(`Ttq.page: ${ex}`);
+        }
+    }
+    track(event, data) {
+        try {
+            Ttq.getTtq().track(event, Object.assign({}, data));
+        }
+        catch (ex) {
+            console.error(`Ttq.track: ${ex}`);
+        }
+    }
+}
+
+class TiktokBaseEvent {
+    constructor(name) {
+        this.name = name;
+        this.ttq = assertEx(Ttq.instance, 'Missing Ttq');
+    }
+    send(_data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class TiktokCustomEvent extends TiktokBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ttq.track(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class TiktokStandardEvent extends TiktokBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ttq.track(this.name, data);
+            yield delay(0); //force async to increase reporting odds
+        });
+    }
+}
+
+class TiktokStandardEvents {
+    pageView() {
+        return new TiktokStandardEvent('Browse');
+    }
+    viewContent() {
+        return new TiktokStandardEvent('ViewContent');
+    }
+    addToCart() {
+        return new TiktokStandardEvent('AddToCart');
+    }
+    checkout() {
+        return new TiktokStandardEvent('Checkout');
+    }
+    purchase() {
+        return new TiktokStandardEvent('Purchase');
+    }
+    registration() {
+        return new TiktokStandardEvent('Registration');
+    }
+    startCheckout() {
+        return new TiktokStandardEvent('StartCheckout');
+    }
+    addBilling() {
+        return new TiktokStandardEvent('AddBilling');
+    }
+    search() {
+        return new TiktokStandardEvent('Search');
+    }
+    viewForm() {
+        return new TiktokStandardEvent('ViewForm');
+    }
+    clickForm() {
+        return new TiktokStandardEvent('ClickForm');
+    }
+    submitForm() {
+        return new TiktokStandardEvent('SubmitForm');
+    }
+    viewDownloadPage() {
+        return new TiktokStandardEvent('ViewDownloadPage');
+    }
+    clickInDownloadPage() {
+        return new TiktokStandardEvent('ClickInDownloadPage');
+    }
+    clickToDownload() {
+        return new TiktokStandardEvent('ClickToDownload');
+    }
+    clickButton() {
+        return new TiktokStandardEvent('ClickButton');
+    }
+}
+
+class XyBaseEvent {
+    constructor(name) {
+        this.name = name;
+    }
+    send(fields) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield XyPixel.instance.send(this.name, fields);
+        });
+    }
+}
+
+class XyCustomEvent extends XyBaseEvent {
+}
+
+class XyUserEventHandler {
+    testStarted(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new XyCustomEvent('TestStarted');
+            return yield event.send(data);
+        });
+    }
+    funnelStarted(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new XyCustomEvent('FunnelStarted');
+            return yield event.send(data);
+        });
+    }
+    viewContent(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new XyCustomEvent('ViewContent');
+            return yield event.send(data);
+        });
+    }
+    userClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const event = new XyCustomEvent('UserClick');
+            return yield event.send(data);
+        });
+    }
+}
+
+const MetaMaskEthersLoader = (props) => {
+    const { children, enabled = true } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    const ethereum = global.ethereum;
+    const [error, setError] = useState();
+    const [localAddress, setLocalAddress] = useState();
+    const [resetCount, setResetCount] = useState(0);
+    const [providerName, setProviderName] = useState();
+    if (ethereum) {
+        ethereum.autoRefreshOnNetworkChange = false;
+    }
+    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = global.ethereum) === null || _a === void 0 ? void 0 : _a.enable());
+        return localAddress ? [localAddress.toString()] : [];
+    });
+    const [isConnected, setIsConnected] = useState();
+    useEffect(() => {
+        if (ethereum && enabled) {
+            ethereum.on('accountsChanged', (accounts) => {
+                console.log(`accountsChanged: ${JSON.stringify(accounts)}`);
+                setResetCount(resetCount + 1);
+                if (accounts.length > 0) {
+                    setLocalAddress(EthAddress.fromString(accounts[0]));
+                }
+                else {
+                    setLocalAddress(undefined);
+                }
+            });
+            ethereum.on('chainChanged', (chainId) => {
+                setResetCount(resetCount + 1);
+                if (chainId) {
+                    setChainId(parseInt(chainId));
+                }
+                else {
+                    setChainId(undefined);
+                }
+            });
+        }
+    }, [ethereum, resetCount, enabled]);
+    const [walletProvider, setWalletProvider] = useState();
+    const [provider, setProvider] = useState();
+    const [signer, setSigner] = useState();
+    useEffect(() => {
+        if (enabled) {
+            const walletProvider = ethereum ? new Web3Provider(ethereum) : null;
+            let provider = null;
+            let providerName = null;
+            if (walletProvider) {
+                provider = walletProvider;
+                providerName = 'Meta Mask';
+            }
+            else {
+                provider = new InfuraProvider(1, infuraKey);
+                providerName = 'Infura (Default)';
+            }
+            provider = walletProvider !== null && walletProvider !== void 0 ? walletProvider : provider;
+            setProvider(provider);
+            setProviderName(providerName);
+            setWalletProvider(walletProvider);
+            let signer = null;
+            try {
+                signer = walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.getSigner();
+            }
+            catch (ex) {
+                console.error(ex);
+            }
+            setSigner(signer);
+        }
+    }, [ethereum, isConnected, enabled]);
+    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+        if (signer && enabled) {
+            try {
+                const localAddress = EthAddress.fromString(yield signer.getAddress());
+                console.log(`Setting Local Address: ${localAddress}`);
+                if (isMounted()) {
+                    setLocalAddress(localAddress);
+                    setIsConnected(true);
+                }
+            }
+            catch (ex) {
+                if (isMounted()) {
+                    setError(Error(`localAddress: ${ex}`));
+                    setLocalAddress(undefined);
+                    setIsConnected(false);
+                }
+            }
+        }
+    }), [signer, resetCount, enabled]);
+    const [chainId, setChainId] = useState();
+    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        if (enabled) {
+            const chainId = (_b = (yield (provider === null || provider === void 0 ? void 0 : provider.getNetwork()))) === null || _b === void 0 ? void 0 : _b.chainId;
+            if (!isMounted())
+                return;
+            setChainId(chainId);
+        }
+    }), [provider, enabled]);
+    return (jsx(EthersContext.Provider, Object.assign({ value: {
+            busy: false,
+            chainId,
+            connect,
+            error,
+            isConnected,
+            localAddress,
+            provider,
+            providerName,
+            signer: isConnected ? signer : undefined,
+            walletProvider,
+        } }, { children: children }), void 0));
+};
+
+const MyEtherWalletEthersLoader = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    const ethereum = global.ethereum;
+    const [error, setError] = useState();
+    const [localAddress, setLocalAddress] = useState();
+    const [providerName, setProviderName] = useState();
+    if (ethereum) {
+        ethereum.autoRefreshOnNetworkChange = false;
+    }
+    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        yield ((_a = global.ethereum) === null || _a === void 0 ? void 0 : _a.enable());
+        return localAddress ? [localAddress.toString()] : [];
+    });
+    const [isConnected, setIsConnected] = useState();
+    const [walletProvider, setWalletProvider] = useState();
+    const [provider, setProvider] = useState();
+    const [signer, setSigner] = useState();
+    useEffect(() => {
+        const walletProvider = ethereum ? new Web3Provider(ethereum) : null;
+        let provider = null;
+        let providerName = null;
+        if (walletProvider) {
+            provider = walletProvider;
+            providerName = 'MyEtherWallet';
+        }
+        else {
+            provider = new InfuraProvider(1, infuraKey);
+            providerName = 'Infura (Default)';
+        }
+        setProvider(provider);
+        setProviderName(providerName);
+        setWalletProvider(walletProvider);
+        let signer = null;
+        try {
+            signer = walletProvider === null || walletProvider === void 0 ? void 0 : walletProvider.getSigner();
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+        setSigner(signer);
+    }, [ethereum, isConnected]);
+    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+        if (signer) {
+            try {
+                const localAddress = EthAddress.fromString(yield signer.getAddress());
+                if (isMounted()) {
+                    setLocalAddress(localAddress);
+                    setIsConnected(true);
+                }
+            }
+            catch (ex) {
+                if (isMounted()) {
+                    setError(Error(`localAddress: ${ex}`));
+                    setLocalAddress(undefined);
+                    setIsConnected(false);
+                }
+            }
+        }
+    }), [signer]);
+    const [chainId, setChainId] = useState();
+    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        const chainId = (_b = (yield (provider === null || provider === void 0 ? void 0 : provider.getNetwork()))) === null || _b === void 0 ? void 0 : _b.chainId;
+        if (!isMounted())
+            return;
+        setChainId(chainId);
+    }), [provider]);
+    return (jsx(EthersContext.Provider, Object.assign({ value: {
+            busy: false,
+            chainId,
+            connect,
+            error,
+            isConnected,
+            localAddress,
+            provider,
+            providerName,
+            signer: isConnected ? signer : undefined,
+            walletProvider,
+        } }, { children: children }), void 0));
+};
+
+const OperaEthersLoader = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { children } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    const ethereum = global.ethereum;
+    const [error, setError] = useState();
+    const [signer, setSigner] = useState();
+    const [provider, setProvider] = useState();
+    const [localAddress, setLocalAddress] = useState(((_c = (_b = (_a = global.ethereum) === null || _a === void 0 ? void 0 : _a.addresses) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0 ? EthAddress.fromString((_e = (_d = global.ethereum) === null || _d === void 0 ? void 0 : _d.addresses) === null || _e === void 0 ? void 0 : _e[0]) : null);
+    const chainId = (ethereum === null || ethereum === void 0 ? void 0 : ethereum.chainId) ? parseInt(ethereum === null || ethereum === void 0 ? void 0 : ethereum.chainId) : 1;
+    const isConnected = (_f = ethereum === null || ethereum === void 0 ? void 0 : ethereum.isConnected()) !== null && _f !== void 0 ? _f : false;
+    useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
+        if (ethereum) {
+            ethereum.enable();
+            const operaProvider = new Web3Provider(ethereum);
+            const provider = operaProvider;
+            const signer = operaProvider.getSigner();
+            try {
+                const localAddress = EthAddress.fromString(yield signer.getAddress());
+                ethereum.autoRefreshOnNetworkChange = false;
+                if (mounted()) {
+                    setSigner(signer);
+                    setProvider(provider);
+                    setLocalAddress(localAddress);
+                }
+            }
+            catch (ex) {
+                if (mounted()) {
+                    setError(Error(`localAddress: ${ex}`));
+                }
+            }
+        }
+    }), [ethereum]);
+    return (jsx(EthersContext.Provider, Object.assign({ value: {
+            busy: false,
+            chainId,
+            error,
+            isConnected,
+            localAddress,
+            provider,
+            signer,
+        } }, { children: children }), void 0));
+};
+
+const TrustEthersLoader = (props) => {
+    const { children } = props;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    const [error, setError] = useState();
+    const [localAddress, setLocalAddress] = useState();
+    const trustProvider = new Web3Provider(global.ethereum);
+    const signer = trustProvider.getSigner();
+    const chainId = 1;
+    const provider = trustProvider;
+    useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
+        if (signer) {
+            try {
+                const localAddress = EthAddress.fromString(yield signer.getAddress());
+                if (mounted()) {
+                    setLocalAddress(localAddress);
+                }
+            }
+            catch (ex) {
+                if (mounted()) {
+                    setError(Error(`localAddress: ${ex}`));
+                }
+            }
+        }
+    }), [signer]);
+    return (jsx(EthersContext.Provider, Object.assign({ value: {
+            busy: false,
+            chainId,
+            error,
+            localAddress,
+            provider,
+            signer,
+        } }, { children: children }), void 0));
+};
+
+const EthersLoader = (props) => {
+    var _a, _b, _c, _d;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const global = window;
+    const { children } = props;
+    if ((_a = global.ethereum) === null || _a === void 0 ? void 0 : _a.isMetaMask) {
+        return jsx(MetaMaskEthersLoader, { children: children }, void 0);
+    }
+    if ((_b = global.ethereum) === null || _b === void 0 ? void 0 : _b.isTrust) {
+        return jsx(TrustEthersLoader, { children: children }, void 0);
+    }
+    if ((_c = global.ethereum) === null || _c === void 0 ? void 0 : _c.isMew) {
+        return jsx(MyEtherWalletEthersLoader, { children: children }, void 0);
+    }
+    if (((_d = global.ethereum) === null || _d === void 0 ? void 0 : _d.providerName) === 'opera') {
+        return jsx(OperaEthersLoader, { children: children }, void 0);
+    }
+    if (global.ethereum) {
+        return jsx(OperaEthersLoader, { children: children }, void 0);
+    }
+    return jsx(InfuraEthersLoader, { children: children }, void 0);
+};
+
+const NetworkSettingsContext = createContext({});
+
+const NetworkSettingsLoader = (props) => {
+    const { children } = props;
+    return (jsx(NetworkSettingsContext.Provider, Object.assign({ value: {
+            xyBondAddress: EthAddress.fromString('0x1a024A698EEBdB86ccf3fCaF2F589839bdc066AD'),
+            xyFhrMerkleSendAddress: EthAddress.fromString('0x46FEEBDffC8076D9E5fd8a11CF1508810472A79f'),
+            xyGovernanceAddress: EthAddress.fromString('0x01925d0fFE4a6a6162B51ba611e3D4780Fc2dF42'),
+            xyStakingConsensusAddress: EthAddress.fromString('0x0242514106114DEaA99Fd81574142c36Edb03B6D'),
+        } }, { children: children }), void 0));
+};
+
+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);
+};
+
+const calcSpacing = (theme, values) => {
+    for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        if (value !== undefined) {
+            if (typeof value === 'string') {
+                return value;
+            }
+            else if (typeof value === 'number') {
+                return theme.spacing(value);
+            }
+        }
+    }
+};
+
+const mergeBoxlikeStyles = (theme, props, defaultProps) => {
+    const _a = Object.assign(Object.assign({}, defaultProps), props), { alignContent, alignItems, alignSelf, bgcolor, border, borderColor, display, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifyItems, justifySelf, height, minHeight, minWidth, margin, marginX, marginY, marginTop, marginLeft, marginRight, marginBottom, padding, paddingX, paddingY, paddingTop, paddingLeft, paddingRight, paddingBottom, position, style, width } = _a, rootProps = __rest(_a, ["alignContent", "alignItems", "alignSelf", "bgcolor", "border", "borderColor", "display", "flexGrow", "flexShrink", "flexDirection", "flexWrap", "justifyContent", "justifyItems", "justifySelf", "height", "minHeight", "minWidth", "margin", "marginX", "marginY", "marginTop", "marginLeft", "marginRight", "marginBottom", "padding", "paddingX", "paddingY", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "position", "style", "width"]);
+    const mergedStyle = Object.assign({ alignContent,
+        alignItems,
+        alignSelf, backgroundColor: bgcolor, border,
+        borderColor,
+        display,
+        flexDirection,
+        flexGrow,
+        flexShrink,
+        flexWrap,
+        height,
+        justifyContent,
+        justifyItems,
+        justifySelf, marginBottom: calcSpacing(theme, [marginBottom, marginY, margin]), marginLeft: calcSpacing(theme, [marginLeft, marginX, margin]), marginRight: calcSpacing(theme, [marginRight, marginX, margin]), marginTop: calcSpacing(theme, [marginTop, marginY, margin]), minHeight,
+        minWidth, paddingBottom: calcSpacing(theme, [paddingBottom, paddingY, padding]), paddingLeft: calcSpacing(theme, [paddingLeft, paddingX, padding]), paddingRight: calcSpacing(theme, [paddingRight, paddingX, padding]), paddingTop: calcSpacing(theme, [paddingTop, paddingY, padding]), position,
+        width }, style);
+    return Object.assign(Object.assign({}, rootProps), { style: mergedStyle });
+};
+
+const ButtonExBase = (props) => {
+    const theme = useTheme();
+    const _a = mergeBoxlikeStyles(theme, props), { busy, busyVariant = 'linear', busyOpacity, onClick, children } = _a, rootProps = __rest(_a, ["busy", "busyVariant", "busyOpacity", "onClick", "children"]);
+    const localOnClick = (event) => {
+        if (!busy) {
+            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 }, void 0) : null, busy && busyVariant === 'circular' ? (jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 }, void 0)) : null, children] }), void 0));
+};
+
+const ButtonExTo = (_a) => {
+    var { to, toOptions, onClick } = _a, props = __rest(_a, ["to", "toOptions", "onClick"]);
+    const navigate = useNavigate();
+    const localOnClick = (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (to) {
+            navigate(to, toOptions);
+        }
+    };
+    return jsx(ButtonExBase, Object.assign({ onClick: localOnClick }, props), void 0);
+};
+
+const ButtonEx = (_a) => {
+    var { to } = _a, props = __rest(_a, ["to"]);
+    if (to) {
+        return jsx(ButtonExTo, Object.assign({ to: to }, props), void 0);
+    }
+    else {
+        return jsx(ButtonExBase, Object.assign({}, props), void 0);
+    }
+};
+
+const CookieConsentBody = (_a) => {
+    var { acceptOnScroll, acceptOnTimer = 0, onAccept } = _a, props = __rest(_a, ["acceptOnScroll", "acceptOnTimer", "onAccept"]);
+    const { accepted, setAccepted, storageName } = useCookieConsent();
+    const onScroll = () => {
+        //hide it one the user has scrolled at least one page
+        if (window.scrollY > window.innerHeight && !accepted) {
+            onAcceptClick();
+        }
+    };
+    useEffect(() => {
+        if (acceptOnScroll) {
+            window.addEventListener('scroll', onScroll);
+            return () => {
+                window.removeEventListener('scroll', onScroll);
+            };
+        }
+    });
+    const onAcceptClick = () => {
+        if (setAccepted) {
+            setAccepted === null || setAccepted === void 0 ? void 0 : setAccepted(true);
+        }
+        else {
+            localStorage.setItem(storageName !== null && storageName !== void 0 ? storageName : 'CookiesAccepted', 'true');
+        }
+        onAccept === null || onAccept === void 0 ? void 0 : onAccept(true);
+    };
+    if (acceptOnTimer > 0 && !accepted) {
+        setTimeout(() => {
+            onAcceptClick();
+        }, acceptOnTimer);
+    }
+    if (!storageName) {
+        return (jsx(FlexRow, Object.assign({ justifyContent: "center", paddingY: 2 }, props, { children: jsx(Typography, Object.assign({ color: "error", variant: "body1" }, { children: "Missing CookieConsentContext" }), void 0) }), void 0));
+    }
+    return accepted ? null : (jsxs(FlexRow, Object.assign({ justifyContent: "space-between" }, props, { children: [jsxs(Typography, Object.assign({ variant: "body2", margin: 2 }, { children: ['This site uses ', jsx(Link, Object.assign({ href: "https://cookiesandyou.com/", rel: "noopener noreferrer", target: "_blank" }, { children: "cookies" }), void 0), ' and ', jsx(Link, Object.assign({ href: "https://policies.google.com/technologies/partner-sites", rel: "noopener noreferrer", target: "_blank" }, { children: "Google\u00A0tools" }), void 0), ' to analyze traffic and for ads measurement purposes.'] }), void 0), jsx(ButtonEx, Object.assign({ variant: "contained", color: "secondary", onClick: onAcceptClick, margin: 2 }, { children: "Accept" }), void 0)] }), void 0));
+};
+
+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), void 0));
+    };
+    //if not inside a context, make a context
+    if (!storageName) {
+        return (jsx(CookieConsentLoader, { children: jsx(Inner, {}, void 0) }, void 0));
+    }
+    return jsx(Inner, {}, void 0);
+};
+
+const InvertableThemeContext = createContext({
+    options: {},
+});
+
+const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
+    var _a, _b;
+    const contextInvertableTheme = useContext(InvertableThemeContext);
+    const clonedOptions = clone((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
+    clonedOptions.palette = (_b = clonedOptions.palette) !== null && _b !== void 0 ? _b : {};
+    if (invert) {
+        clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark';
+    }
+    if (dark !== undefined) {
+        clonedOptions.palette.mode = dark ? 'dark' : 'light';
+    }
+    if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
+        clonedOptions.palette = darkTheme.palette;
+    }
+    let theme = createTheme(clonedOptions);
+    if (!noResponsiveFonts) {
+        theme = responsiveFontSizes(theme);
+    }
+    return scoped ? (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0) }, void 0)) : (jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+};
+
+// The point of this component it to return to the top of the page on any router navigate
+const ScrollToTop = () => {
+    const { pathname } = useLocation();
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);
+    return null;
+};
+
+const BasePage = (_a) => {
+    var { disableGutters, children, beta, container, hideFooter, appFooter, appBar, cookieConsent, filterBar, hideAppBar, hideFilterBar, noindex = false, scrollToTopButton = false, title } = _a, props = __rest(_a, ["disableGutters", "children", "beta", "container", "hideFooter", "appFooter", "appBar", "cookieConsent", "filterBar", "hideAppBar", "hideFilterBar", "noindex", "scrollToTopButton", "title"]);
+    const theme = useTheme();
+    const scrollToTopAnchorId = 'scroll-to-top-anchor';
+    return (jsxs(FlexCol, Object.assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsx(ScrollToTop, {}, void 0), jsx(Helmet, Object.assign({ title: title }, { children: noindex ? jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, hideFilterBar ? null : filterBar, beta ? (jsx(FlexRow, Object.assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsx(Typography, Object.assign({ variant: "body2" }, { children: "Important: This page is a Beta page. It is possible that some information may not be correct." }), void 0) }), void 0)) : null, container ? (jsx(Container, Object.assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeProvider, Object.assign({ invert: true }, { children: jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsx(ScrollToTopButton, Object.assign({ anchorId: scrollToTopAnchorId }, { children: jsx(Fab, Object.assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsx(KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
+};
+
+const getPartialPath = (pathParts, index) => {
+    const result = [];
+    for (let i = 0; i <= index; i++) {
+        result.push(`${pathParts[i]}/`);
+    }
+    return result.join('');
+};
+const BreadcrumbsEx = (_a) => {
+    var _b;
+    var { titles, path = document.location.pathname, separator = '|', logo, children } = _a, props = __rest(_a, ["titles", "path", "separator", "logo", "children"]);
+    const pathParts = path.split('/');
+    //if the url has a trailing '/', remove the last part
+    if (((_b = pathParts[pathParts.length - 1]) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+        pathParts.pop();
+    }
+    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 }, void 0) : logo }, void 0)) }), path));
+            }), children] }), void 0));
+};
+
+const toAxiosError = (error) => {
+    return error.isAxiosError ? error : undefined;
+};
+const ErrorDialogOpen = (_a) => {
+    var _b, _c;
+    var { onAction, title = 'Oops. Something went wrong.', error = Error('Unknown Error') } = _a, props = __rest(_a, ["onAction", "title", "error"]);
+    const onCloseClicked = () => {
+        onAction === null || onAction === void 0 ? void 0 : onAction(false);
+    };
+    const onRetryClicked = () => {
+        onAction === null || onAction === void 0 ? void 0 : onAction(true);
+    };
+    const axiosError = toAxiosError(error);
+    const message = (_b = error.message) !== null && _b !== void 0 ? _b : error.toString();
+    return (jsxs(Dialog, Object.assign({}, props, { children: [jsx(DialogTitle, { children: title }, void 0), jsx(DialogContent, { children: jsx(FlexRow, { children: jsx(Typography, Object.assign({ color: "error" }, { children: axiosError ? `${message} [${(_c = axiosError === null || axiosError === void 0 ? void 0 : axiosError.code) !== null && _c !== void 0 ? _c : 'Connection Failure'}]` : `${message}` }), void 0) }, void 0) }, void 0), jsx(DialogActions, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", minWidth: "300px" }, { children: [jsx(ButtonEx, Object.assign({ onClick: onCloseClicked, variant: "text" }, { children: "Close" }), void 0), jsx(ButtonEx, Object.assign({ onClick: onRetryClicked, variant: "text" }, { children: "Retry" }), void 0)] }), void 0) }, void 0)] }), void 0));
+};
+const ErrorDialog = (_a) => {
+    var { open, error } = _a, props = __rest(_a, ["open", "error"]);
+    if (error) {
+        return jsx(ErrorDialogOpen, Object.assign({ open: !!error || open, error: error }, props), void 0);
+    }
+    else {
+        return null;
+    }
+};
+
+const MessageDialog = (_a) => {
+    var { onOk, onCancel, children, title } = _a, props = __rest(_a, ["onOk", "onCancel", "children", "title"]);
+    return (jsxs(Dialog, Object.assign({}, props, { children: [jsx(DialogTitle, { children: title }, void 0), jsx(DialogContent, { children: jsx(FlexCol, Object.assign({ alignItems: "stretch" }, { children: children }), void 0) }, void 0), jsx(DialogActions, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%" }, { children: [jsx(Button, Object.assign({ onClick: onCancel, variant: "text" }, { children: "Cancel" }), void 0), jsx(Button, Object.assign({ onClick: onOk, variant: "text" }, { children: "Ok" }), void 0)] }), void 0) }, void 0)] }), void 0));
+};
+
+const useBreakpoint = () => {
+    const theme = useTheme();
+    const xs = useMediaQuery(theme.breakpoints.only('xs'));
+    const sm = useMediaQuery(theme.breakpoints.only('sm'));
+    const md = useMediaQuery(theme.breakpoints.only('md'));
+    const lg = useMediaQuery(theme.breakpoints.only('lg'));
+    const xl = useMediaQuery(theme.breakpoints.only('xl'));
+    if (xs) {
+        return 'xs';
+    }
+    else if (sm) {
+        return 'sm';
+    }
+    else if (md) {
+        return 'md';
+    }
+    else if (lg) {
+        return 'lg';
+    }
+    else if (xl) {
+        return 'xl';
+    }
+};
+
+const useLocalStorage = (key, defaultValue) => {
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            const item = getLocalStorageObject(key);
+            return Object.keys(item).length ? item : defaultValue;
+        }
+        catch (ex) {
+            //Error is already logged
+            return defaultValue;
+        }
+    });
+    const setValue = (value) => {
+        setStoredValue(value);
+        setLocalStorageObject(key, value);
+    };
+    return [storedValue, setValue];
+};
+
+const useMounted = () => {
+    const [mounted, setMounted] = useState(true);
+    useEffect(() => {
+        setMounted(true);
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            setMounted(false);
+        };
+    }, []);
+    return () => {
+        return mounted;
+    };
+};
+
+const useNavigateToEthAddress = () => {
+    const navigate = useNavigate();
+    const navigateToEthAddress = (address, event, page, to, toOptions, toEtherScan) => {
+        var _a;
+        const openInEtherScan = toEtherScan || (!to && !page);
+        if (openInEtherScan) {
+            window.open(`https://etherscan.io/address/${address.toString()}`, '_blank');
+        }
+        else {
+            const path = (_a = to === null || to === void 0 ? void 0 : to.toString()) !== null && _a !== void 0 ? _a : `/${page}/${address.toString()}`;
+            if (event.metaKey || toEtherScan) {
+                window.open(path, '_blank');
+            }
+            else {
+                navigate(to !== null && to !== void 0 ? to : path, toOptions);
+            }
+        }
+    };
+    return { navigateToEthAddress };
+};
+
+const useSpacing = (value) => {
+    const theme = useTheme();
+    return theme.spacing(typeof value === 'string' ? parseInt(value) : value);
+};
+
+const useUserEvents = () => {
+    const { userEvents } = useContext(UserEventsContext);
+    if (!userEvents) {
+        console.error('useUserEvents must be called inside a UserEventsContext');
+    }
+    return userEvents;
+};
+
+let supportsWebP = undefined;
+const useWebP = (webp, alt) => {
+    const [img, setImg] = useState(supportsWebP === true ? webp : supportsWebP === false ? alt : undefined);
+    useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
+        if (supportsWebP === undefined) {
+            supportsWebP = yield getSupportsWebP();
+            if (mounted()) {
+                setImg(supportsWebP ? webp : alt);
+            }
+        }
+    }), [supportsWebP]);
+    return img;
+};
+const getSupportsWebP = () => __awaiter(void 0, void 0, void 0, function* () {
+    return yield new Promise((resolve) => {
+        const image = new Image();
+        image.onerror = () => resolve(false);
+        image.onload = () => resolve(image.width === 1);
+        image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
+    }).catch(() => false);
+});
+
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        height: undefined,
+        width: undefined,
+    });
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                height: window.innerHeight,
+                width: window.innerWidth,
+            });
+        }
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowSize;
+}
+
+const EthAccount = (_a) => {
+    var { address, icon = false, iconSize = 16, iconOnly = false, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconSize", "iconOnly", "addressLength", "fontFamily", "toEtherScan", "onButtonClick"]);
+    const { localAddress } = useContext(EthersContext);
+    const theme = useTheme();
+    const large = useMediaQuery(theme.breakpoints.up('md'));
+    const isLocalAddress = address ? (localAddress === null || localAddress === void 0 ? void 0 : localAddress.toString()) === address.toString() : false;
+    const onClickLocal = (event) => {
+        onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick(event);
+        if (toEtherScan && address) {
+            window.open(`https://etherscan.io/address/${address.toString()}`, '_blank');
+        }
+    };
+    const addressToDisplay = assertEx(address !== null && address !== void 0 ? address : EthAddress.fromString('0x00'), 'Bad Eth Address');
+    const testToDisplay = addressLength === 'long'
+        ? addressToDisplay.toString()
+        : addressLength === 'short'
+            ? addressToDisplay.toShortString()
+            : large
+                ? addressToDisplay.toString()
+                : addressToDisplay.toShortString();
+    // Note: We use the all zero address for spacing in case it is
+    return (jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon && address ? jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (jsxs(FlexRow, { children: [jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay }), void 0), address ? null : (jsx(Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" }), void 0))] }, void 0)), isLocalAddress ? jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
+};
+
+const Experiment = (props) => {
+    const { children } = props;
+    return jsx(Fragment, { children: children }, void 0);
+};
+
+const OutcomesLocalStorageKey = 'outcomes';
+const ExperimentsLocalStorageKey = 'experiments';
+
+const defaultLocalStorageKey = 'testData';
+const experimentsTestData = {};
+let outcomes = {}; //prevent multi-outcome
+const saveOutcomes = () => {
+    setLocalStorageObject(OutcomesLocalStorageKey, outcomes);
+};
+const loadOutcomes = () => {
+    outcomes = getLocalStorageObject(OutcomesLocalStorageKey);
+};
+const mergeData = (data, log) => {
+    const dataArray = [];
+    for (const key in data) {
+        dataArray.push(`${key}-${data[key]}`);
+    }
+    log === null || log === void 0 ? void 0 : log.info('MergeData', dataArray.join('|'));
+    return dataArray.join('|');
+};
+const missingKeyError = new Error('Experiment Elements must have Keys');
+const makeChildrenArray = (children) => {
+    if (Array.isArray(children)) {
+        return children;
+    }
+    else {
+        return [children];
+    }
+};
+const buildLocalStorageKey = (localStorageProp) => {
+    return localStorageProp === true
+        ? defaultLocalStorageKey
+        : typeof localStorageProp === 'string'
+            ? localStorageProp !== null && localStorageProp !== void 0 ? localStorageProp : defaultLocalStorageKey
+            : '';
+};
+const calcTotalWeight = (childList) => {
+    let totalWeight = 0;
+    for (const child of childList) {
+        totalWeight += child.props.weight;
+    }
+    return totalWeight;
+};
+const saveExperimentDebugRanges = (name, totalWeight, childList) => {
+    const experiments = getLocalStorageObject(ExperimentsLocalStorageKey) || {};
+    experiments[name] = {
+        totalWeight,
+        variants: childList.map((child) => {
+            var _a;
+            return ({
+                name: (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString(),
+                weight: child.props.weight,
+            });
+        }),
+    };
+    setLocalStorageObject(ExperimentsLocalStorageKey, experiments);
+};
+const Experiments = (props) => {
+    var _a, _b;
+    const { name, children, localStorageProp = true } = props;
+    const userEvents = useUserEvents();
+    loadOutcomes();
+    const localStorageKey = buildLocalStorageKey(localStorageProp);
+    const childList = makeChildrenArray(children);
+    const totalWeight = calcTotalWeight(childList);
+    saveExperimentDebugRanges(name, totalWeight, childList);
+    const firstTime = outcomes[name] === undefined;
+    let targetWeight = (_a = outcomes[name]) !== null && _a !== void 0 ? _a : Math.random() * totalWeight;
+    outcomes[name] = targetWeight;
+    saveOutcomes();
+    for (const child of childList) {
+        targetWeight -= child.props.weight;
+        if (targetWeight > 0)
+            continue;
+        if (!child.key) {
+            throw missingKeyError;
+        }
+        experimentsTestData[name] = (_b = child.key) === null || _b === void 0 ? void 0 : _b.toString();
+        if (firstTime) {
+            if (localStorageProp !== false) {
+                localStorage.setItem(localStorageKey, mergeData(experimentsTestData));
+            }
+            if (userEvents) {
+                forget(userEvents.testStarted({ name, variation: child.key }));
+            }
+        }
+        return child;
+    }
+    throw new Error('Experiment Choice Failed');
+};
+
+const ExperimentsDebugger = (_a) => {
+    var props = __rest(_a, []);
+    const [experiments] = useLocalStorage(ExperimentsLocalStorageKey, {});
+    const [outcomes, setOutcomes] = useLocalStorage(OutcomesLocalStorageKey, {});
+    const sumUpVariants = (items) => items.reduce((acc, curr) => acc + curr.weight, 0);
+    const experimentEntries = Object.entries(experiments);
+    if (!experiments || !experimentEntries.length) {
+        return (jsxs(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: "No Experiments loaded" }), void 0), jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }), void 0)] }), void 0));
+    }
+    return (jsx(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: Object.entries(experiments).map((data) => {
+            const [name, experiment] = data;
+            const outcome = (outcomes[name] || 0);
+            const marks = [
+                { label: `${experiment.variants[0].name} | ${experiment.variants[0].weight}`, value: 0 },
+                ...experiment.variants.map(({ weight }, index) => ({
+                    label: index === experiment.variants.length - 1 ? 'End' : `${experiment.variants[index + 1].name} | ${weight}`,
+                    value: index === 0 ? weight : sumUpVariants(experiment.variants.slice(0, index + 1)),
+                })),
+            ];
+            return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }, void 0), jsx(FlexRow, { children: jsx(Slider, { "aria-label": `Experiment ${name}`, defaultValue: outcome, value: outcome, marks: marks, onChange: (e, value) => {
+                                const truncated = Number((Array.isArray(value) ? value[0] : value).toFixed(2));
+                                outcomes[name] = truncated;
+                                // Spread operator triggers rerender
+                                setOutcomes(Object.assign({}, outcomes));
+                            } }, void 0) }, void 0)] }), `experiment-${name}`));
+        }) }), void 0));
+};
+
+const LinkToEx = (_a) => {
+    var { to } = _a, props = __rest(_a, ["to"]);
+    return jsx(Link, Object.assign({ component: Link$1, to: to }, props), void 0);
+};
+
+const NumberStatus = (_a) => {
+    var _b, _c;
+    var { error, format = '0[.]0a', color = 'primary', title, value, size, fontSize, rounded = false, autoWidth = false, style } = _a, props = __rest(_a, ["error", "format", "color", "title", "value", "size", "fontSize", "rounded", "autoWidth", "style"]);
+    const theme = useTheme();
+    const palette = color === 'inherit' ? undefined : theme.palette[color];
+    const bgColorTop = (_b = palette === null || palette === void 0 ? void 0 : palette.dark) !== null && _b !== void 0 ? _b : theme.palette.background.paper;
+    const bgColorBottom = (_c = palette === null || palette === void 0 ? void 0 : palette.main) !== null && _c !== void 0 ? _c : theme.palette.background.default;
+    const sizePixels = size === 'large' ? 96 : size === 'small' ? 64 : 80;
+    const calcFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : sizePixels * 0.2;
+    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);
+    return (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsx(AiOutlineQuestionCircle, { size: 16 }, void 0) }), void 0), jsx(MessageDialog, Object.assign({ onOk: () => setMessageOpen(false), onCancel: () => setMessageOpen(false), onClose: () => setMessageOpen(false), open: messageOpen, title: title !== null && title !== void 0 ? title : '' }, { children: children }), void 0)] }, void 0));
+};
+
+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) }), void 0);
+};
+
+var ActionStatusType;
+(function (ActionStatusType) {
+    ActionStatusType["ActiveActionStatus"] = "ActiveActionStatus";
+    ActionStatusType["CompletedActionStatus"] = "CompletedActionStatus";
+    ActionStatusType["FailedActionStatus"] = "FailedActionStatus";
+    ActionStatusType["PotentialActionStatus"] = "PotentialActionStatus";
+})(ActionStatusType || (ActionStatusType = {}));
+
+var ContactPointOption;
+(function (ContactPointOption) {
+    ContactPointOption["HearingImpairedSupported"] = "HearingImpairedSupported";
+    ContactPointOption["TollFree"] = "TollFree";
+})(ContactPointOption || (ContactPointOption = {}));
+
+var ItemAvailability;
+(function (ItemAvailability) {
+    /** Indicates that the item has been discontinued. */
+    ItemAvailability["Discontinued"] = "https://schema.org/Discontinued";
+    /** Indicates that the item is in stock. */
+    ItemAvailability["InStock"] = "https://schema.org/InStock";
+    /** Indicates that the item is available only at physical locations. */
+    ItemAvailability["InStoreOnly"] = "https://schema.org/InStoreOnly";
+    /** Indicates that the item has limited availability. */
+    ItemAvailability["LimitedAvailability"] = "https://schema.org/LimitedAvailability";
+    /** Indicates that the item is available only online. */
+    ItemAvailability["OnlineOnly"] = "https://schema.org/OnlineOnly";
+    /** Indicates that the item is out of stock. */
+    ItemAvailability["OutOfStock"] = "https://schema.org/OutOfStock";
+    /** Indicates that the item is available for pre-order. */
+    ItemAvailability["PreOrder"] = "https://schema.org/PreOrder";
+    /** Indicates that the item is available for ordering and delivery before general availability. */
+    ItemAvailability["PreSale"] = "https://schema.org/PreSale";
+    /** Indicates that the item has sold out. */
+    ItemAvailability["SoldOut"] = "https://schema.org/SoldOut";
+})(ItemAvailability || (ItemAvailability = {}));
+
+var MapCategoryType;
+(function (MapCategoryType) {
+    MapCategoryType["ParkingMap"] = "ParkingMap";
+    MapCategoryType["SeatingMap"] = "SeatingMap";
+    MapCategoryType["TransitMap"] = "TransitMap";
+    MapCategoryType["VenueMap"] = "VenueMap";
+})(MapCategoryType || (MapCategoryType = {}));
+
+var img = "data:image/svg+xml,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 238'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%23999%3b%7d%3c/style%3e%3c/defs%3e%3ctitle%3eicon_gray%3c/title%3e%3cpath class='cls-1' d='M74.5%2c28.33%2c21.29%2c120.5%2c74.5%2c212.67H180.94l1.76-3%2c51.46-89.13L180.94%2c28.33ZM84.65%2c40.54h78.83L111.65%2c56.93a15.85%2c15.85%2c0%2c0%2c1%2c2%2c5l59.66-18.81L185.22%2c101a20.12%2c20.12%2c0%2c0%2c1%2c5.36-.78l-10-47.91%2c37.87%2c65.53h-7.62a24.21%2c24.21%2c0%2c0%2c1%2c.15%2c2.68%2c23.29%2c23.29%2c0%2c0%2c1-.15%2c2.68h7.62l-39.1%2c67.75%2c10.92-50.13A20.57%2c20.57%2c0%2c0%2c1%2c185%2c140l-12.88%2c59-58.37-19.53a17.61%2c17.61%2c0%2c0%2c1-1.7%2c5l47.5%2c15.92H84.65l4-6.85A20.17%2c20.17%2c0%2c0%2c1%2c83.93%2c191L80%2c197.78%2c42.67%2c133.13l37%2c32.66a20.52%2c20.52%2c0%2c0%2c1%2c3.6-4L36.69%2c120.66%2c85%2c77.79a17.45%2c17.45%2c0%2c0%2c1-3.19-4.32l-39.46%2c35L80%2c43.22l5.56%2c9.69A17.51%2c17.51%2c0%2c0%2c1%2c90.12%2c50Zm28.24%2c31.17a16.15%2c16.15%2c0%2c0%2c1-2.68%2c4.64l62%2c35.81a19.74%2c19.74%2c0%2c0%2c1%2c2.83-4.54Zm-20%2c10.51v75.33a18%2c18%2c0%2c0%2c1%2c2.47-.16%2c17.18%2c17.18%2c0%2c0%2c1%2c2.89.21v-75a11.21%2c11.21%2c0%2c0%2c1-1.29%2c0%2c17.57%2c17.57%2c0%2c0%2c1-4.07-.47Zm79.34%2c46.63-62.08%2c35.81a18.45%2c18.45%2c0%2c0%2c1%2c2.68%2c4.68l62.23-36a19.68%2c19.68%2c0%2c0%2c1-2.83-4.53Z'/%3e%3cpath class='cls-1' d='M97%2c48.58a17.06%2c17.06%2c0%2c1%2c0%2c17%2c17%2c17.08%2c17.08%2c0%2c0%2c0-17-17Zm0%2c5.36a11.7%2c11.7%2c0%2c1%2c1-11.7%2c11.69A11.65%2c11.65%2c0%2c0%2c1%2c97%2c53.94Z'/%3e%3cpath class='cls-1' d='M95.37%2c157.39a18.73%2c18.73%2c0%2c1%2c0%2c18.7%2c18.7%2c18.74%2c18.74%2c0%2c0%2c0-18.7-18.7Zm0%2c5.31A13.4%2c13.4%2c0%2c1%2c1%2c82%2c176.09a13.37%2c13.37%2c0%2c0%2c1%2c13.4-13.39Z'/%3e%3cpath class='cls-1' d='M190.73%2c100.2A20.3%2c20.3%2c0%2c1%2c0%2c211%2c120.5a20.34%2c20.34%2c0%2c0%2c0-20.3-20.3Zm0%2c5.36a14.94%2c14.94%2c0%2c1%2c1-14.94%2c14.94%2c14.88%2c14.88%2c0%2c0%2c1%2c14.94-14.94Z'/%3e%3c/svg%3e";
+
+const base10Shift = (bn, places) => {
+    const factor = new BigNumber(10).pow(new BigNumber(Math.abs(places)));
+    if (places > 0) {
+        return bn.mul(factor);
+    }
+    else {
+        return bn.div(factor);
+    }
+};
+const TokenAmount = (_a) => {
+    var { textFontFamily = '"Source Code Pro",monospace', textColor, statusColor, style, amount, places = -18, logo, label, onButtonClick } = _a, props = __rest(_a, ["textFontFamily", "textColor", "statusColor", "style", "amount", "places", "logo", "label", "onButtonClick"]);
+    const adjustedAmount = amount ? base10Shift(amount, places).toNumber() : undefined;
+    const amountString = adjustedAmount ? Math.trunc(adjustedAmount).toLocaleString() : '-';
+    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, 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