@xylabs/sdk-react 2.10.1 → 2.10.4

package/dist/node-esm/index.js

@@ -58,54 +58,54 @@ function __awaiter(thisArg, _arguments, P, generator) {
 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));
+    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)) })));
 };
 
 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));
+    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)) })));
 };
 
 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));
+            ? Object.assign({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }, style) : style }, props, { children: [children, busy && busyVariant === 'linear' ? (jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps))) : null, busy && busyVariant === 'circular' ? (jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps))) : null] })));
 };
 
 const FlexCol = (props) => {
-    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "column", justifyContent: "center" }, props), void 0);
+    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "column", justifyContent: "center" }, props));
 };
 const FlexGrowCol = (props) => {
-    return jsx(FlexCol, Object.assign({ flexGrow: 1 }, props), void 0);
+    return jsx(FlexCol, Object.assign({ flexGrow: 1 }, props));
 };
 
 const FlexRow = (props) => {
-    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, props), void 0);
+    return jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, props));
 };
 const FlexGrowRow = (props) => {
-    return jsx(FlexRow, Object.assign({ flexGrow: 1 }, props), void 0);
+    return jsx(FlexRow, Object.assign({ flexGrow: 1 }, props));
 };
 
 /**
  * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
  */
 const Background = (props) => {
-    return jsx(FlexRow, Object.assign({}, props), void 0);
+    return jsx(FlexRow, Object.assign({}, props));
 };
 
 const ErrorViewer = (props) => {
     const { error } = props, boxProps = __rest(props, ["error"]);
     const theme = useTheme();
-    return (jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsx(Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name }), void 0), jsx(Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }), void 0)] }), void 0));
+    return (jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsx(Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsx(Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }))] })));
 };
 
 const ErrorsViewer = (props) => {
     const { onRetry, errors } = props, boxProps = __rest(props, ["onRetry", "errors"]);
     return (jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
                 return jsx(ErrorViewer, { error: error }, index);
-            }), onRetry ? (jsx(IconButton, Object.assign({ onClick: onRetry }, { children: jsx(AiOutlineReload, {}, void 0) }), void 0)) : null] }), void 0));
+            }), onRetry ? (jsx(IconButton, Object.assign({ onClick: onRetry }, { children: jsx(AiOutlineReload, {}) }))) : null] })));
 };
 
 const CoverProgress = (props) => {
@@ -113,7 +113,7 @@ const CoverProgress = (props) => {
     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 (jsx(FlexGrowRow, Object.assign({ position: "absolute", margin: -1, top: 0, bottom: 0, right: 0, left: 0, bgcolor: paper ? theme.palette.background.paper : theme.palette.background.default }, { children: ((_a = errors === null || errors === void 0 ? void 0 : errors.length) !== null && _a !== void 0 ? _a : 0) === 0 ? (jsx(CircularProgress, { style: { opacity } })) : (jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry })) })));
     }
     return null;
 };
@@ -130,7 +130,7 @@ const HoverScale = (props) => {
         },
     }));
     const classes = useStyles();
-    return (jsx(FlexRow, { children: jsx(Box, Object.assign({ className: classes.zoomdiv }, { children: children }), void 0) }, void 0));
+    return (jsx(FlexRow, { children: jsx(Box, Object.assign({ className: classes.zoomdiv }, { children: children })) }));
 };
 
 const range = (n, in_min, in_max, out_min, out_max) => {
@@ -189,7 +189,7 @@ const Identicon = (_a) => {
     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));
+    return (jsx(FlexRow, Object.assign({}, props, { children: jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }) })));
 };
 
 const RedirectWithQuery = ({ href, to, toOptions }) => {
@@ -206,7 +206,7 @@ const RedirectWithQuery = ({ href, to, toOptions }) => {
             }
         }
     });
-    return jsx("div", {}, void 0);
+    return jsx("div", {});
 };
 
 const ScrollToTopButton = (_a) => {
@@ -222,16 +222,16 @@ const ScrollToTopButton = (_a) => {
         }
     };
     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));
+    return (jsx(Zoom, Object.assign({ in: trigger }, props, { children: jsx(Box, Object.assign({ zIndex: 10, position: "fixed", right: theme.spacing(2), bottom: theme.spacing(2), onClick: handleClick, role: "presentation" }, { children: children })) })));
 };
 
 const AppBarEx = (props) => {
     const { contextToolbar, systemToolbar, container, style } = props, appbarProps = __rest(props, ["contextToolbar", "systemToolbar", "container", "style"]);
     const theme = useTheme();
     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 (jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between" }, { children: [contextToolbar !== null && contextToolbar !== void 0 ? contextToolbar : jsx(Toolbar, {}), systemToolbar !== null && systemToolbar !== void 0 ? systemToolbar : jsx(Toolbar, {})] })));
     };
-    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));
+    return (jsx(AppBar, Object.assign({ position: "static", style: Object.assign({ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex' }, style) }, appbarProps, { children: container ? (jsx(Container, Object.assign({ maxWidth: container }, { children: jsx(AppBarExInner, {}) }))) : (jsx(AppBarExInner, {})) })));
 };
 
 const CookieConsentContext = createContext({});
@@ -253,7 +253,7 @@ const CookieConsentLoader = ({ children }) => {
         localStorage.removeItem(CookiesAcceptedLocalStorageName);
         setAccepted(getAcceptedFromLocalStorage());
     };
-    return (jsx(CookieConsentContext.Provider, Object.assign({ value: { accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName } }, { children: children }), void 0));
+    return (jsx(CookieConsentContext.Provider, Object.assign({ value: { accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName } }, { children: children })));
 };
 
 const useCookieConsent = () => {
@@ -273,7 +273,7 @@ const InfuraEthersLoader = (props) => {
             isConnected: true,
             provider,
             signer: null,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const getApiStage = () => {
@@ -1094,6 +1094,69 @@ class SnapchatStandardEvents {
     }
 }
 
+class EF {
+    static init() {
+        try {
+            EF.instance = new EF();
+        }
+        catch (ex) {
+            console.error(`EF.init: ${ex}`);
+        }
+    }
+    static getEF() {
+        if (global.EF) {
+            return global.EF;
+        }
+        console.warn('Missing EF');
+    }
+    track(event, data) {
+        switch (event) {
+            case 'Purchase':
+                this.sendConversion(data);
+                break;
+            default:
+                console.error(`EF.track: missing event ${event}`);
+        }
+    }
+    sendConversion(data) {
+        try {
+            //data: have session_id, tracking_id, order_id, amount
+            const ef = EF.getEF();
+            ef.conversion(Object.assign({}, data));
+        }
+        catch (ex) {
+            console.error(`EF.conversion: ${ex}`);
+        }
+    }
+}
+
+class TapjoyBaseEvent {
+    constructor(name) {
+        this.name = name;
+        this.ef = assertEx(EF.instance, 'Missing Tapjoy Eventflow');
+    }
+    send(_data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield delay(0);
+        });
+    }
+}
+
+class TapjoyStandardEvent extends TapjoyBaseEvent {
+    send(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ef.track(this.name, data);
+            yield delay(0);
+        });
+    }
+}
+
+class TapjoyStandardEvents {
+    purchase() {
+        return new TapjoyStandardEvent('Purchase');
+    }
+}
+
 class Ttq {
     static init(pixelId) {
         try {
@@ -1322,7 +1385,9 @@ const MetaMaskEthersLoader = (props) => {
             setSigner(signer);
         }
     }, [ethereum, isConnected, enabled]);
-    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (isMounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (signer && enabled) {
             try {
                 const localAddress = EthAddress.fromString(yield signer.getAddress());
@@ -1342,7 +1407,9 @@ const MetaMaskEthersLoader = (props) => {
         }
     }), [signer, resetCount, enabled]);
     const [chainId, setChainId] = useState();
-    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (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;
@@ -1362,7 +1429,7 @@ const MetaMaskEthersLoader = (props) => {
             providerName,
             signer: isConnected ? signer : undefined,
             walletProvider,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const MyEtherWalletEthersLoader = (props) => {
@@ -1409,7 +1476,9 @@ const MyEtherWalletEthersLoader = (props) => {
         }
         setSigner(signer);
     }, [ethereum, isConnected]);
-    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (isMounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (signer) {
             try {
                 const localAddress = EthAddress.fromString(yield signer.getAddress());
@@ -1428,7 +1497,9 @@ const MyEtherWalletEthersLoader = (props) => {
         }
     }), [signer]);
     const [chainId, setChainId] = useState();
-    useAsyncEffect((isMounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (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())
@@ -1446,7 +1517,7 @@ const MyEtherWalletEthersLoader = (props) => {
             providerName,
             signer: isConnected ? signer : undefined,
             walletProvider,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const OperaEthersLoader = (props) => {
@@ -1461,7 +1532,9 @@ const OperaEthersLoader = (props) => {
     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* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (mounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (ethereum) {
             ethereum.enable();
             const operaProvider = new Web3Provider(ethereum);
@@ -1491,7 +1564,7 @@ const OperaEthersLoader = (props) => {
             localAddress,
             provider,
             signer,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const TrustEthersLoader = (props) => {
@@ -1504,7 +1577,9 @@ const TrustEthersLoader = (props) => {
     const signer = trustProvider.getSigner();
     const chainId = 1;
     const provider = trustProvider;
-    useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (mounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (signer) {
             try {
                 const localAddress = EthAddress.fromString(yield signer.getAddress());
@@ -1526,7 +1601,7 @@ const TrustEthersLoader = (props) => {
             localAddress,
             provider,
             signer,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const EthersLoader = (props) => {
@@ -1535,21 +1610,21 @@ const EthersLoader = (props) => {
     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);
+        return jsx(MetaMaskEthersLoader, { children: children });
     }
     if ((_b = global.ethereum) === null || _b === void 0 ? void 0 : _b.isTrust) {
-        return jsx(TrustEthersLoader, { children: children }, void 0);
+        return jsx(TrustEthersLoader, { children: children });
     }
     if ((_c = global.ethereum) === null || _c === void 0 ? void 0 : _c.isMew) {
-        return jsx(MyEtherWalletEthersLoader, { children: children }, void 0);
+        return jsx(MyEtherWalletEthersLoader, { children: children });
     }
     if (((_d = global.ethereum) === null || _d === void 0 ? void 0 : _d.providerName) === 'opera') {
-        return jsx(OperaEthersLoader, { children: children }, void 0);
+        return jsx(OperaEthersLoader, { children: children });
     }
     if (global.ethereum) {
-        return jsx(OperaEthersLoader, { children: children }, void 0);
+        return jsx(OperaEthersLoader, { children: children });
     }
-    return jsx(InfuraEthersLoader, { children: children }, void 0);
+    return jsx(InfuraEthersLoader, { children: children });
 };
 
 const NetworkSettingsContext = createContext({});
@@ -1561,7 +1636,7 @@ const NetworkSettingsLoader = (props) => {
             xyFhrMerkleSendAddress: EthAddress.fromString('0x46FEEBDffC8076D9E5fd8a11CF1508810472A79f'),
             xyGovernanceAddress: EthAddress.fromString('0x01925d0fFE4a6a6162B51ba611e3D4780Fc2dF42'),
             xyStakingConsensusAddress: EthAddress.fromString('0x0242514106114DEaA99Fd81574142c36Edb03B6D'),
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const UserEventsContext = createContext({});
@@ -1573,7 +1648,7 @@ const DebugUserEventsContext = createContext({
 });
 
 const UserEventsProvider = ({ userEvents, children }) => {
-    return (jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children }), void 0));
+    return (jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children })));
 };
 
 const calcSpacing = (theme, values) => {
@@ -1618,7 +1693,7 @@ const ButtonExBase = (props) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
     };
-    return (jsxs(Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }, 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));
+    return (jsxs(Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? (jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 })) : null, children] })));
 };
 
 const ButtonExTo = (_a) => {
@@ -1630,16 +1705,16 @@ const ButtonExTo = (_a) => {
             navigate(to, toOptions);
         }
     };
-    return jsx(ButtonExBase, Object.assign({ onClick: localOnClick }, props), void 0);
+    return jsx(ButtonExBase, Object.assign({ onClick: localOnClick }, props));
 };
 
 const ButtonEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
     if (to) {
-        return jsx(ButtonExTo, Object.assign({ to: to }, props), void 0);
+        return jsx(ButtonExTo, Object.assign({ to: to }, props));
     }
     else {
-        return jsx(ButtonExBase, Object.assign({}, props), void 0);
+        return jsx(ButtonExBase, Object.assign({}, props));
     }
 };
 
@@ -1675,22 +1750,22 @@ const CookieConsentBody = (_a) => {
         }, 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 (jsx(FlexRow, Object.assign({ justifyContent: "center", paddingY: 2 }, props, { children: jsx(Typography, Object.assign({ color: "error", variant: "body1" }, { children: "Missing CookieConsentContext" })) })));
     }
-    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));
+    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" })), ' and ', jsx(Link, Object.assign({ href: "https://policies.google.com/technologies/partner-sites", rel: "noopener noreferrer", target: "_blank" }, { children: "Google\u00A0tools" })), ' to analyze traffic and for ads measurement purposes.'] })), jsx(ButtonEx, Object.assign({ variant: "contained", color: "secondary", onClick: onAcceptClick, margin: 2 }, { children: "Accept" }))] })));
 };
 
 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));
+        return accepted ? null : (jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props)));
     };
     //if not inside a context, make a context
     if (!storageName) {
-        return (jsx(CookieConsentLoader, { children: jsx(Inner, {}, void 0) }, void 0));
+        return (jsx(CookieConsentLoader, { children: jsx(Inner, {}) }));
     }
-    return jsx(Inner, {}, void 0);
+    return jsx(Inner, {});
 };
 
 const InvertableThemeContext = createContext({
@@ -1731,9 +1806,9 @@ darkTheme, darkOptions, lightOptions, }) => {
     }
     const theme = noResponsiveFonts ? createTheme(themeOptions) : responsiveFontSizes(createTheme(themeOptions));
     const Provider = () => {
-        return (jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+        return (jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children })) })));
     };
-    return scoped ? (jsx(ScopedCssBaseline, { children: jsx(Provider, {}, void 0) }, void 0)) : (jsx(Provider, {}, void 0));
+    return scoped ? (jsx(ScopedCssBaseline, { children: jsx(Provider, {}) })) : (jsx(Provider, {}));
 };
 
 // The point of this component it to return to the top of the page on any router navigate
@@ -1749,7 +1824,7 @@ const BasePage = (_a) => {
     var { disableGutters, children, beta, container, hideFooter, appFooter, appBar, cookieConsent, hideAppBar, noindex = false, scrollToTopButton = false, title } = _a, props = __rest(_a, ["disableGutters", "children", "beta", "container", "hideFooter", "appFooter", "appBar", "cookieConsent", "hideAppBar", "noindex", "scrollToTopButton", "title"]);
     const theme = useTheme();
     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, 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));
+    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, {}), jsx(Helmet, Object.assign({ title: title }, { children: noindex ? jsx("meta", { content: "noindex", name: "robots" }) : null })), scrollToTopButton ? jsx("div", { id: scrollToTopAnchorId }) : null, hideAppBar ? null : appBar, 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." })) }))) : null, container ? (jsx(Container, Object.assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }))) : (children), hideFooter ? null : jsx("footer", { children: appFooter }), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeProvider, Object.assign({ invert: true }, { children: jsx(CookieConsent, { borderRadius: 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, {}) })) }))) : null] })));
 };
 
 const getPartialPath = (pathParts, index) => {
@@ -1770,8 +1845,8 @@ const BreadcrumbsEx = (_a) => {
     assertEx(pathParts.length - 1 === (titles === null || titles === void 0 ? void 0 : titles.length), `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`);
     return (jsxs(Breadcrumbs, Object.assign({ separator: separator }, props, { children: [pathParts.map((_pathPart, index) => {
                 const path = getPartialPath(pathParts, index);
-                return (jsx(Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: Link$1, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsx(FlexRow, { children: typeof logo === 'string' ? jsx("img", { src: logo }, void 0) : logo }, void 0)) }), path));
-            }), children] }), void 0));
+                return (jsx(Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: Link$1, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsx(FlexRow, { children: typeof logo === 'string' ? jsx("img", { src: logo }) : logo })) }), path));
+            }), children] })));
 };
 
 const toAxiosError = (error) => {
@@ -1788,12 +1863,12 @@ const ErrorDialogOpen = (_a) => {
     };
     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));
+    return (jsxs(Dialog, Object.assign({}, props, { children: [jsx(DialogTitle, { children: title }), 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}` })) }) }), 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" })), jsx(ButtonEx, Object.assign({ onClick: onRetryClicked, variant: "text" }, { children: "Retry" }))] })) })] })));
 };
 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);
+        return jsx(ErrorDialogOpen, Object.assign({ open: !!error || open, error: error }, props));
     }
     else {
         return null;
@@ -1802,7 +1877,7 @@ const ErrorDialog = (_a) => {
 
 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));
+    return (jsxs(Dialog, Object.assign({}, props, { children: [jsx(DialogTitle, { children: title }), jsx(DialogContent, { children: jsx(FlexCol, Object.assign({ alignItems: "stretch" }, { children: children })) }), jsx(DialogActions, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%" }, { children: [jsx(Button, Object.assign({ onClick: onCancel, variant: "text" }, { children: "Cancel" })), jsx(Button, Object.assign({ onClick: onOk, variant: "text" }, { children: "Ok" }))] })) })] })));
 };
 
 const useBreakpoint = () => {
@@ -1942,14 +2017,16 @@ const useUserEvents = () => {
 let supportsWebP = undefined;
 const useWebP = (webp, alt) => {
     const [img, setImg] = useState();
-    useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (mounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (supportsWebP === undefined) {
             supportsWebP = yield getSupportsWebP();
         }
         if (mounted()) {
             setImg(supportsWebP ? webp : alt);
         }
-    }), [supportsWebP]);
+    }), [alt, webp]);
     return img;
 };
 const getSupportsWebP = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2001,12 +2078,12 @@ const EthAccount = (_a) => {
                 ? 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));
+    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() }) : null, iconOnly ? null : (jsxs(FlexRow, { children: [jsx(Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay })), address ? null : (jsx(Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" })))] })), isLocalAddress ? jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" })) : null] })) })));
 };
 
 const Experiment = (props) => {
     const { children } = props;
-    return jsx(Fragment, { children: children }, void 0);
+    return jsx(Fragment, { children: children });
 };
 
 const OutcomesLocalStorageKey = 'outcomes';
@@ -2107,7 +2184,7 @@ const ExperimentsDebugger = (_a) => {
     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 (jsxs(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [jsx(Typography, Object.assign({ variant: "subtitle1" }, { children: "No Experiments loaded" })), jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }))] })));
     }
     return (jsx(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: Object.entries(experiments).map((data) => {
             const [name, experiment] = data;
@@ -2119,22 +2196,22 @@ const ExperimentsDebugger = (_a) => {
                     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) => {
+            return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }), 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));
+                            } }) })] }), `experiment-${name}`));
+        }) })));
 };
 
 const LinkEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
     if (to) {
-        return jsx(Link, Object.assign({ component: Link$1, to: to }, props), void 0);
+        return jsx(Link, Object.assign({ component: Link$1, to: to }, props));
     }
     else {
-        return jsx(Link, Object.assign({}, props), void 0);
+        return jsx(Link, Object.assign({}, props));
     }
 };
 /** @deprecated use LinkEx instead */
@@ -2144,7 +2221,7 @@ const MenuEx = (_a) => {
     var { MenuListProps = {}, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuListProps", "mode", "colorize"]);
     const theme = useTheme();
     const colorizeMenuListProps = colorize ? { sx: { backgroundColor: theme.palette[colorize][mode] } } : {};
-    return jsx(Menu, Object.assign({ MenuListProps: merge(MenuListProps, colorizeMenuListProps) }, props), void 0);
+    return jsx(Menu, Object.assign({ MenuListProps: merge(MenuListProps, colorizeMenuListProps) }, props));
 };
 
 const NumberStatus = (_a) => {
@@ -2156,7 +2233,7 @@ const NumberStatus = (_a) => {
     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));
+    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) })), 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 }))] })) })));
 };
 
 const Portal = ({ children, className, el = 'div', target = 'body' }) => {
@@ -2216,35 +2293,35 @@ const PixelDebugger = () => {
                         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));
+                    }, color: theme.palette.primary.main }, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" })) })), displayEvents && !!events.length && (jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }))), displayEvents && !events.length && jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }))] })) })) })) })) }));
 };
 const PixelEventDetails = ({ event, fields, index, events, }) => {
     const [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));
+    return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: event })), isOpen && (jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }))), events[index + 1] && jsx(Divider, {})] })));
 };
 
 const PixelDebuggerProvider = ({ children }) => {
     const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
-    return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
+    return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children })));
 };
 
 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));
+    return (jsx(FlexRow, Object.assign({}, props, { children: jsxs(FormControl, { children: [jsx(FormLabel, { children: "Enable Debugger" }), jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })] }) })));
 };
 
 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));
+    return (jsxs(Fragment, { children: [jsx(IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsx(AiOutlineQuestionCircle, { size: 16 }) })), jsx(MessageDialog, Object.assign({ onOk: () => setMessageOpen(false), onCancel: () => setMessageOpen(false), onClose: () => setMessageOpen(false), open: messageOpen, title: title !== null && title !== void 0 ? title : '' }, { children: children }))] }));
 };
 
 const RichResult = (props) => {
     const { thing } = props;
     const thingWithContext = thing;
     thingWithContext['@context'] = 'https://schema.org';
-    return jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }), void 0);
+    return jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }));
 };
 
 var ActionStatusType;
@@ -2297,7 +2374,7 @@ const SelectEx = (_a) => {
     const colorizeMenuProps = colorize
         ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
         : {};
-    return jsx(Select, Object.assign({ MenuProps: merge(MenuProps, colorizeMenuProps) }, props), void 0);
+    return jsx(Select, Object.assign({ MenuProps: merge(MenuProps, colorizeMenuProps) }, props));
 };
 
 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";
@@ -2315,8 +2392,8 @@ 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));
+    return (jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }))) : null] }), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }))] })) })));
 };
 
-export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, FacebookUserEventHandler, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkEx, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsProvider, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useInterval, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useTimeout, useUserEvents, useWebP, useWindowSize };
+export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, EF, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, FacebookUserEventHandler, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkEx, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatStandardEvents, TapjoyStandardEvent, TapjoyStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsProvider, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useInterval, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useTimeout, useUserEvents, useWebP, useWindowSize };
 //# sourceMappingURL=index.js.map