@xylabs/sdk-react 2.10.2 → 2.10.5

package/dist/cjs5/index.js

@@ -68,54 +68,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 = material.useTheme();
-    return (jsxRuntime.jsx(material.Box, Object.assign({ display: "flex", bgcolor: material.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: jsxRuntime.jsx(material.CircularProgress, Object.assign({ size: size }, props), void 0) }), void 0));
+    return (jsxRuntime.jsx(material.Box, Object.assign({ display: "flex", bgcolor: material.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: jsxRuntime.jsx(material.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 = material.useTheme();
-    return (jsxRuntime.jsx(material.Box, Object.assign({ display: "flex", flexDirection: "column", bgcolor: material.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: jsxRuntime.jsx(material.LinearProgress, Object.assign({}, props), void 0) }), void 0));
+    return (jsxRuntime.jsx(material.Box, Object.assign({ display: "flex", flexDirection: "column", bgcolor: material.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: jsxRuntime.jsx(material.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 = material.useTheme();
     return (jsxRuntime.jsxs(material.Box, Object.assign({ component: paper ? material.Paper : component, position: "relative", style: background
-            ? Object.assign({ backgroundColor: theme.palette.background.default, color: theme.palette.text.primary }, style) : style }, props, { children: [children, busy && busyVariant === 'linear' ? (jsxRuntime.jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps), void 0)) : null, busy && busyVariant === 'circular' ? (jsxRuntime.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' ? (jsxRuntime.jsx(BusyLinearProgress, Object.assign({ color: busyColor, opacity: busyOpacity }, busyLinearProps))) : null, busy && busyVariant === 'circular' ? (jsxRuntime.jsx(BusyCircularProgress, Object.assign({ color: busyColor, opacity: busyOpacity, size: busySize }, busyCircularProps))) : null] })));
 };
 
 const FlexCol = (props) => {
-    return jsxRuntime.jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "column", justifyContent: "center" }, props), void 0);
+    return jsxRuntime.jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "column", justifyContent: "center" }, props));
 };
 const FlexGrowCol = (props) => {
-    return jsxRuntime.jsx(FlexCol, Object.assign({ flexGrow: 1 }, props), void 0);
+    return jsxRuntime.jsx(FlexCol, Object.assign({ flexGrow: 1 }, props));
 };
 
 const FlexRow = (props) => {
-    return jsxRuntime.jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, props), void 0);
+    return jsxRuntime.jsx(BusyBox, Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, props));
 };
 const FlexGrowRow = (props) => {
-    return jsxRuntime.jsx(FlexRow, Object.assign({ flexGrow: 1 }, props), void 0);
+    return jsxRuntime.jsx(FlexRow, Object.assign({ flexGrow: 1 }, props));
 };
 
 /**
  * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
  */
 const Background = (props) => {
-    return jsxRuntime.jsx(FlexRow, Object.assign({}, props), void 0);
+    return jsxRuntime.jsx(FlexRow, Object.assign({}, props));
 };
 
 const ErrorViewer = (props) => {
     const { error } = props, boxProps = __rest(props, ["error"]);
     const theme = material.useTheme();
-    return (jsxRuntime.jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name }), void 0), jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }), void 0)] }), void 0));
+    return (jsxRuntime.jsxs(FlexCol, Object.assign({ color: theme.palette.error.main }, boxProps, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "subtitle1" }, { children: error === null || error === void 0 ? void 0 : error.name })), jsxRuntime.jsx(material.Typography, Object.assign({ align: "center", variant: "body2" }, { children: error === null || error === void 0 ? void 0 : error.message }))] })));
 };
 
 const ErrorsViewer = (props) => {
     const { onRetry, errors } = props, boxProps = __rest(props, ["onRetry", "errors"]);
     return (jsxRuntime.jsxs(FlexGrowCol, Object.assign({ padding: 1 }, boxProps, { children: [errors === null || errors === void 0 ? void 0 : errors.map((error, index) => {
                 return jsxRuntime.jsx(ErrorViewer, { error: error }, index);
-            }), onRetry ? (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onRetry }, { children: jsxRuntime.jsx(ai.AiOutlineReload, {}, void 0) }), void 0)) : null] }), void 0));
+            }), onRetry ? (jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onRetry }, { children: jsxRuntime.jsx(ai.AiOutlineReload, {}) }))) : null] })));
 };
 
 const CoverProgress = (props) => {
@@ -123,7 +123,7 @@ const CoverProgress = (props) => {
     const { paper = true, open, opacity = 0.25, errors, onRetry } = props;
     const theme = material.useTheme();
     if (open) {
-        return (jsxRuntime.jsx(FlexGrowRow, Object.assign({ position: "absolute", margin: -1, top: 0, bottom: 0, right: 0, left: 0, bgcolor: paper ? theme.palette.background.paper : theme.palette.background.default }, { children: ((_a = errors === null || errors === void 0 ? void 0 : errors.length) !== null && _a !== void 0 ? _a : 0) === 0 ? (jsxRuntime.jsx(material.CircularProgress, { style: { opacity } }, void 0)) : (jsxRuntime.jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry }, void 0)) }), void 0));
+        return (jsxRuntime.jsx(FlexGrowRow, Object.assign({ position: "absolute", margin: -1, top: 0, bottom: 0, right: 0, left: 0, bgcolor: paper ? theme.palette.background.paper : theme.palette.background.default }, { children: ((_a = errors === null || errors === void 0 ? void 0 : errors.length) !== null && _a !== void 0 ? _a : 0) === 0 ? (jsxRuntime.jsx(material.CircularProgress, { style: { opacity } })) : (jsxRuntime.jsx(ErrorsViewer, { margin: 1, errors: errors, onRetry: onRetry })) })));
     }
     return null;
 };
@@ -140,7 +140,7 @@ const HoverScale = (props) => {
         },
     }));
     const classes = useStyles();
-    return (jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.Box, Object.assign({ className: classes.zoomdiv }, { children: children }), void 0) }, void 0));
+    return (jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.Box, Object.assign({ className: classes.zoomdiv }, { children: children })) }));
 };
 
 const range = (n, in_min, in_max, out_min, out_max) => {
@@ -199,7 +199,7 @@ const Identicon = (_a) => {
     react.useEffect(() => {
         updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
     });
-    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }, void 0) }), void 0));
+    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }) })));
 };
 
 const RedirectWithQuery = ({ href, to, toOptions }) => {
@@ -216,7 +216,7 @@ const RedirectWithQuery = ({ href, to, toOptions }) => {
             }
         }
     });
-    return jsxRuntime.jsx("div", {}, void 0);
+    return jsxRuntime.jsx("div", {});
 };
 
 const ScrollToTopButton = (_a) => {
@@ -232,16 +232,16 @@ const ScrollToTopButton = (_a) => {
         }
     };
     const theme = material.useTheme();
-    return (jsxRuntime.jsx(material.Zoom, Object.assign({ in: trigger }, props, { children: jsxRuntime.jsx(material.Box, Object.assign({ zIndex: 10, position: "fixed", right: theme.spacing(2), bottom: theme.spacing(2), onClick: handleClick, role: "presentation" }, { children: children }), void 0) }), void 0));
+    return (jsxRuntime.jsx(material.Zoom, Object.assign({ in: trigger }, props, { children: jsxRuntime.jsx(material.Box, Object.assign({ zIndex: 10, position: "fixed", right: theme.spacing(2), bottom: theme.spacing(2), onClick: handleClick, role: "presentation" }, { children: children })) })));
 };
 
 const AppBarEx = (props) => {
     const { contextToolbar, systemToolbar, container, style } = props, appbarProps = __rest(props, ["contextToolbar", "systemToolbar", "container", "style"]);
     const theme = material.useTheme();
     const AppBarExInner = () => {
-        return (jsxRuntime.jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between" }, { children: [contextToolbar !== null && contextToolbar !== void 0 ? contextToolbar : jsxRuntime.jsx(material.Toolbar, {}, void 0), systemToolbar !== null && systemToolbar !== void 0 ? systemToolbar : jsxRuntime.jsx(material.Toolbar, {}, void 0)] }), void 0));
+        return (jsxRuntime.jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between" }, { children: [contextToolbar !== null && contextToolbar !== void 0 ? contextToolbar : jsxRuntime.jsx(material.Toolbar, {}), systemToolbar !== null && systemToolbar !== void 0 ? systemToolbar : jsxRuntime.jsx(material.Toolbar, {})] })));
     };
-    return (jsxRuntime.jsx(material.AppBar, Object.assign({ position: "static", style: Object.assign({ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex' }, style) }, appbarProps, { children: container ? (jsxRuntime.jsx(material.Container, Object.assign({ maxWidth: container }, { children: jsxRuntime.jsx(AppBarExInner, {}, void 0) }), void 0)) : (jsxRuntime.jsx(AppBarExInner, {}, void 0)) }), void 0));
+    return (jsxRuntime.jsx(material.AppBar, Object.assign({ position: "static", style: Object.assign({ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, display: 'flex' }, style) }, appbarProps, { children: container ? (jsxRuntime.jsx(material.Container, Object.assign({ maxWidth: container }, { children: jsxRuntime.jsx(AppBarExInner, {}) }))) : (jsxRuntime.jsx(AppBarExInner, {})) })));
 };
 
 const CookieConsentContext = react.createContext({});
@@ -263,7 +263,7 @@ const CookieConsentLoader = ({ children }) => {
         localStorage.removeItem(CookiesAcceptedLocalStorageName);
         setAccepted(getAcceptedFromLocalStorage());
     };
-    return (jsxRuntime.jsx(CookieConsentContext.Provider, Object.assign({ value: { accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName } }, { children: children }), void 0));
+    return (jsxRuntime.jsx(CookieConsentContext.Provider, Object.assign({ value: { accepted, clearAccepted, setAccepted: setAcceptedHandler, storageName: CookiesAcceptedLocalStorageName } }, { children: children })));
 };
 
 const useCookieConsent = () => {
@@ -283,14 +283,14 @@ const InfuraEthersLoader = (props) => {
             isConnected: true,
             provider,
             signer: null,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const getApiStage = () => {
     return sdkJs.getApiStage(document.location.hostname);
 };
 
-const isLocalhost = !!(window.location.hostname === 'localhost' ||
+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.
@@ -1395,7 +1395,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 = sdkJs.EthAddress.fromString(yield signer.getAddress());
@@ -1415,7 +1417,9 @@ const MetaMaskEthersLoader = (props) => {
         }
     }), [signer, resetCount, enabled]);
     const [chainId, setChainId] = react.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;
@@ -1435,7 +1439,7 @@ const MetaMaskEthersLoader = (props) => {
             providerName,
             signer: isConnected ? signer : undefined,
             walletProvider,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const MyEtherWalletEthersLoader = (props) => {
@@ -1482,7 +1486,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 = sdkJs.EthAddress.fromString(yield signer.getAddress());
@@ -1501,7 +1507,9 @@ const MyEtherWalletEthersLoader = (props) => {
         }
     }), [signer]);
     const [chainId, setChainId] = react.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())
@@ -1519,7 +1527,7 @@ const MyEtherWalletEthersLoader = (props) => {
             providerName,
             signer: isConnected ? signer : undefined,
             walletProvider,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const OperaEthersLoader = (props) => {
@@ -1534,7 +1542,9 @@ const OperaEthersLoader = (props) => {
     const [localAddress, setLocalAddress] = react.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 ? sdkJs.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 providers.Web3Provider(ethereum);
@@ -1564,7 +1574,7 @@ const OperaEthersLoader = (props) => {
             localAddress,
             provider,
             signer,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const TrustEthersLoader = (props) => {
@@ -1577,7 +1587,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 = sdkJs.EthAddress.fromString(yield signer.getAddress());
@@ -1599,7 +1611,7 @@ const TrustEthersLoader = (props) => {
             localAddress,
             provider,
             signer,
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const EthersLoader = (props) => {
@@ -1608,21 +1620,21 @@ const EthersLoader = (props) => {
     const global = window;
     const { children } = props;
     if ((_a = global.ethereum) === null || _a === void 0 ? void 0 : _a.isMetaMask) {
-        return jsxRuntime.jsx(MetaMaskEthersLoader, { children: children }, void 0);
+        return jsxRuntime.jsx(MetaMaskEthersLoader, { children: children });
     }
     if ((_b = global.ethereum) === null || _b === void 0 ? void 0 : _b.isTrust) {
-        return jsxRuntime.jsx(TrustEthersLoader, { children: children }, void 0);
+        return jsxRuntime.jsx(TrustEthersLoader, { children: children });
     }
     if ((_c = global.ethereum) === null || _c === void 0 ? void 0 : _c.isMew) {
-        return jsxRuntime.jsx(MyEtherWalletEthersLoader, { children: children }, void 0);
+        return jsxRuntime.jsx(MyEtherWalletEthersLoader, { children: children });
     }
     if (((_d = global.ethereum) === null || _d === void 0 ? void 0 : _d.providerName) === 'opera') {
-        return jsxRuntime.jsx(OperaEthersLoader, { children: children }, void 0);
+        return jsxRuntime.jsx(OperaEthersLoader, { children: children });
     }
     if (global.ethereum) {
-        return jsxRuntime.jsx(OperaEthersLoader, { children: children }, void 0);
+        return jsxRuntime.jsx(OperaEthersLoader, { children: children });
     }
-    return jsxRuntime.jsx(InfuraEthersLoader, { children: children }, void 0);
+    return jsxRuntime.jsx(InfuraEthersLoader, { children: children });
 };
 
 const NetworkSettingsContext = react.createContext({});
@@ -1634,7 +1646,7 @@ const NetworkSettingsLoader = (props) => {
             xyFhrMerkleSendAddress: sdkJs.EthAddress.fromString('0x46FEEBDffC8076D9E5fd8a11CF1508810472A79f'),
             xyGovernanceAddress: sdkJs.EthAddress.fromString('0x01925d0fFE4a6a6162B51ba611e3D4780Fc2dF42'),
             xyStakingConsensusAddress: sdkJs.EthAddress.fromString('0x0242514106114DEaA99Fd81574142c36Edb03B6D'),
-        } }, { children: children }), void 0));
+        } }, { children: children })));
 };
 
 const UserEventsContext = react.createContext({});
@@ -1646,7 +1658,7 @@ const DebugUserEventsContext = react.createContext({
 });
 
 const UserEventsProvider = ({ userEvents, children }) => {
-    return (jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children }), void 0));
+    return (jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents: userEvents !== null && userEvents !== void 0 ? userEvents : XyoUserEventHandler.get() } }, { children: children })));
 };
 
 const calcSpacing = (theme, values) => {
@@ -1691,7 +1703,7 @@ const ButtonExBase = (props) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         }
     };
-    return (jsxRuntime.jsxs(material.Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsxRuntime.jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }, void 0) : null, busy && busyVariant === 'circular' ? (jsxRuntime.jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 }, void 0)) : null, children] }), void 0));
+    return (jsxRuntime.jsxs(material.Button, Object.assign({ onClick: localOnClick }, rootProps, { children: [busy && busyVariant === 'linear' ? jsxRuntime.jsx(BusyLinearProgress, { rounded: true, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0 }) : null, busy && busyVariant === 'circular' ? (jsxRuntime.jsx(BusyCircularProgress, { rounded: true, size: 24, opacity: busyOpacity !== null && busyOpacity !== void 0 ? busyOpacity : 0.5 })) : null, children] })));
 };
 
 const ButtonExTo = (_a) => {
@@ -1703,16 +1715,16 @@ const ButtonExTo = (_a) => {
             navigate(to, toOptions);
         }
     };
-    return jsxRuntime.jsx(ButtonExBase, Object.assign({ onClick: localOnClick }, props), void 0);
+    return jsxRuntime.jsx(ButtonExBase, Object.assign({ onClick: localOnClick }, props));
 };
 
 const ButtonEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
     if (to) {
-        return jsxRuntime.jsx(ButtonExTo, Object.assign({ to: to }, props), void 0);
+        return jsxRuntime.jsx(ButtonExTo, Object.assign({ to: to }, props));
     }
     else {
-        return jsxRuntime.jsx(ButtonExBase, Object.assign({}, props), void 0);
+        return jsxRuntime.jsx(ButtonExBase, Object.assign({}, props));
     }
 };
 
@@ -1748,22 +1760,22 @@ const CookieConsentBody = (_a) => {
         }, acceptOnTimer);
     }
     if (!storageName) {
-        return (jsxRuntime.jsx(FlexRow, Object.assign({ justifyContent: "center", paddingY: 2 }, props, { children: jsxRuntime.jsx(material.Typography, Object.assign({ color: "error", variant: "body1" }, { children: "Missing CookieConsentContext" }), void 0) }), void 0));
+        return (jsxRuntime.jsx(FlexRow, Object.assign({ justifyContent: "center", paddingY: 2 }, props, { children: jsxRuntime.jsx(material.Typography, Object.assign({ color: "error", variant: "body1" }, { children: "Missing CookieConsentContext" })) })));
     }
-    return accepted ? null : (jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between" }, props, { children: [jsxRuntime.jsxs(material.Typography, Object.assign({ variant: "body2", margin: 2 }, { children: ['This site uses ', jsxRuntime.jsx(material.Link, Object.assign({ href: "https://cookiesandyou.com/", rel: "noopener noreferrer", target: "_blank" }, { children: "cookies" }), void 0), ' and ', jsxRuntime.jsx(material.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), jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "contained", color: "secondary", onClick: onAcceptClick, margin: 2 }, { children: "Accept" }), void 0)] }), void 0));
+    return accepted ? null : (jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between" }, props, { children: [jsxRuntime.jsxs(material.Typography, Object.assign({ variant: "body2", margin: 2 }, { children: ['This site uses ', jsxRuntime.jsx(material.Link, Object.assign({ href: "https://cookiesandyou.com/", rel: "noopener noreferrer", target: "_blank" }, { children: "cookies" })), ' and ', jsxRuntime.jsx(material.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.'] })), jsxRuntime.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 : (jsxRuntime.jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props), void 0));
+        return accepted ? null : (jsxRuntime.jsx(CookieConsentBody, Object.assign({ background: true, paper: true, position: "fixed", bottom: 0, maxWidth: "100vw", width: "100%", zIndex: 1000 }, props)));
     };
     //if not inside a context, make a context
     if (!storageName) {
-        return (jsxRuntime.jsx(CookieConsentLoader, { children: jsxRuntime.jsx(Inner, {}, void 0) }, void 0));
+        return (jsxRuntime.jsx(CookieConsentLoader, { children: jsxRuntime.jsx(Inner, {}) }));
     }
-    return jsxRuntime.jsx(Inner, {}, void 0);
+    return jsxRuntime.jsx(Inner, {});
 };
 
 const InvertableThemeContext = react.createContext({
@@ -1804,9 +1816,9 @@ darkTheme, darkOptions, lightOptions, }) => {
     }
     const theme = noResponsiveFonts ? styles$1.createTheme(themeOptions) : material.responsiveFontSizes(styles$1.createTheme(themeOptions));
     const Provider = () => {
-        return (jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+        return (jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children })) })));
     };
-    return scoped ? (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(Provider, {}, void 0) }, void 0)) : (jsxRuntime.jsx(Provider, {}, void 0));
+    return scoped ? (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(Provider, {}) })) : (jsxRuntime.jsx(Provider, {}));
 };
 
 // The point of this component it to return to the top of the page on any router navigate
@@ -1822,7 +1834,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 = material.useTheme();
     const scrollToTopAnchorId = 'scroll-to-top-anchor';
-    return (jsxRuntime.jsxs(FlexCol, Object.assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsxRuntime.jsx(ScrollToTop, {}, void 0), jsxRuntime.jsx(reactHelmet.Helmet, Object.assign({ title: title }, { children: noindex ? jsxRuntime.jsx("meta", { content: "noindex", name: "robots" }, void 0) : null }), void 0), scrollToTopButton ? jsxRuntime.jsx("div", { id: scrollToTopAnchorId }, void 0) : null, hideAppBar ? null : appBar, beta ? (jsxRuntime.jsx(FlexRow, Object.assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsxRuntime.jsx(material.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 ? (jsxRuntime.jsx(material.Container, Object.assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }), void 0)) : (children), hideFooter ? null : jsxRuntime.jsx("footer", { children: appFooter }, void 0), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(InvertableThemeProvider, Object.assign({ invert: true }, { children: jsxRuntime.jsx(CookieConsent, { borderRadius: 0 }, void 0) }), void 0) }, void 0)), scrollToTopButton ? (jsxRuntime.jsx(ScrollToTopButton, Object.assign({ anchorId: scrollToTopAnchorId }, { children: jsxRuntime.jsx(material.Fab, Object.assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsxRuntime.jsx(iconsMaterial.KeyboardArrowUp, {}, void 0) }), void 0) }), void 0)) : null] }), void 0));
+    return (jsxRuntime.jsxs(FlexCol, Object.assign({ justifyContent: "flex-start", color: theme.palette.text.primary, alignItems: "stretch", width: "100%", maxWidth: "100vw", minHeight: "100vh" }, props, { children: [jsxRuntime.jsx(ScrollToTop, {}), jsxRuntime.jsx(reactHelmet.Helmet, Object.assign({ title: title }, { children: noindex ? jsxRuntime.jsx("meta", { content: "noindex", name: "robots" }) : null })), scrollToTopButton ? jsxRuntime.jsx("div", { id: scrollToTopAnchorId }) : null, hideAppBar ? null : appBar, beta ? (jsxRuntime.jsx(FlexRow, Object.assign({ margin: 1, position: "absolute", top: 0, left: 0, bgcolor: "#cccccc88", paddingX: 1, style: { opacity: 0.5 } }, { children: jsxRuntime.jsx(material.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 ? (jsxRuntime.jsx(material.Container, Object.assign({ style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }, maxWidth: container, disableGutters: disableGutters }, { children: children }))) : (children), hideFooter ? null : jsxRuntime.jsx("footer", { children: appFooter }), cookieConsent !== null && cookieConsent !== void 0 ? cookieConsent : (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(InvertableThemeProvider, Object.assign({ invert: true }, { children: jsxRuntime.jsx(CookieConsent, { borderRadius: 0 }) })) })), scrollToTopButton ? (jsxRuntime.jsx(ScrollToTopButton, Object.assign({ anchorId: scrollToTopAnchorId }, { children: jsxRuntime.jsx(material.Fab, Object.assign({ "aria-label": "scroll to top", color: "secondary", size: "small" }, { children: jsxRuntime.jsx(iconsMaterial.KeyboardArrowUp, {}) })) }))) : null] })));
 };
 
 const getPartialPath = (pathParts, index) => {
@@ -1843,8 +1855,8 @@ const BreadcrumbsEx = (_a) => {
     sdkJs.assertEx(pathParts.length - 1 === (titles === null || titles === void 0 ? void 0 : titles.length), `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`);
     return (jsxRuntime.jsxs(material.Breadcrumbs, Object.assign({ separator: separator }, props, { children: [pathParts.map((_pathPart, index) => {
                 const path = getPartialPath(pathParts, index);
-                return (jsxRuntime.jsx(material.Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: reactRouterDom.Link, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsxRuntime.jsx(FlexRow, { children: typeof logo === 'string' ? jsxRuntime.jsx("img", { src: logo }, void 0) : logo }, void 0)) }), path));
-            }), children] }), void 0));
+                return (jsxRuntime.jsx(material.Link, Object.assign({ title: index > 0 ? titles === null || titles === void 0 ? void 0 : titles[index - 1] : 'COIN', color: index === pathParts.length - 1 ? 'textPrimary' : 'inherit', component: reactRouterDom.Link, to: path }, { children: index > 0 ? (titles === null || titles === void 0 ? void 0 : titles[index - 1]) : (jsxRuntime.jsx(FlexRow, { children: typeof logo === 'string' ? jsxRuntime.jsx("img", { src: logo }) : logo })) }), path));
+            }), children] })));
 };
 
 const toAxiosError = (error) => {
@@ -1861,12 +1873,12 @@ const ErrorDialogOpen = (_a) => {
     };
     const axiosError = toAxiosError(error);
     const message = (_b = error.message) !== null && _b !== void 0 ? _b : error.toString();
-    return (jsxRuntime.jsxs(material.Dialog, Object.assign({}, props, { children: [jsxRuntime.jsx(material.DialogTitle, { children: title }, void 0), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.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), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", minWidth: "300px" }, { children: [jsxRuntime.jsx(ButtonEx, Object.assign({ onClick: onCloseClicked, variant: "text" }, { children: "Close" }), void 0), jsxRuntime.jsx(ButtonEx, Object.assign({ onClick: onRetryClicked, variant: "text" }, { children: "Retry" }), void 0)] }), void 0) }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs(material.Dialog, Object.assign({}, props, { children: [jsxRuntime.jsx(material.DialogTitle, { children: title }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.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}` })) }) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", minWidth: "300px" }, { children: [jsxRuntime.jsx(ButtonEx, Object.assign({ onClick: onCloseClicked, variant: "text" }, { children: "Close" })), jsxRuntime.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 jsxRuntime.jsx(ErrorDialogOpen, Object.assign({ open: !!error || open, error: error }, props), void 0);
+        return jsxRuntime.jsx(ErrorDialogOpen, Object.assign({ open: !!error || open, error: error }, props));
     }
     else {
         return null;
@@ -1875,7 +1887,7 @@ const ErrorDialog = (_a) => {
 
 const MessageDialog = (_a) => {
     var { onOk, onCancel, children, title } = _a, props = __rest(_a, ["onOk", "onCancel", "children", "title"]);
-    return (jsxRuntime.jsxs(material.Dialog, Object.assign({}, props, { children: [jsxRuntime.jsx(material.DialogTitle, { children: title }, void 0), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch" }, { children: children }), void 0) }, void 0), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%" }, { children: [jsxRuntime.jsx(material.Button, Object.assign({ onClick: onCancel, variant: "text" }, { children: "Cancel" }), void 0), jsxRuntime.jsx(material.Button, Object.assign({ onClick: onOk, variant: "text" }, { children: "Ok" }), void 0)] }), void 0) }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs(material.Dialog, Object.assign({}, props, { children: [jsxRuntime.jsx(material.DialogTitle, { children: title }), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch" }, { children: children })) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%" }, { children: [jsxRuntime.jsx(material.Button, Object.assign({ onClick: onCancel, variant: "text" }, { children: "Cancel" })), jsxRuntime.jsx(material.Button, Object.assign({ onClick: onOk, variant: "text" }, { children: "Ok" }))] })) })] })));
 };
 
 const useBreakpoint = () => {
@@ -2015,14 +2027,16 @@ const useUserEvents = () => {
 let supportsWebP = undefined;
 const useWebP = (webp, alt) => {
     const [img, setImg] = react.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* () {
@@ -2074,12 +2088,12 @@ const EthAccount = (_a) => {
                 ? addressToDisplay.toString()
                 : addressToDisplay.toShortString();
     // Note: We use the all zero address for spacing in case it is
-    return (jsxRuntime.jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: jsxRuntime.jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon && address ? jsxRuntime.jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }, void 0) : null, iconOnly ? null : (jsxRuntime.jsxs(FlexRow, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay }), void 0), address ? null : (jsxRuntime.jsx(material.Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" }), void 0))] }, void 0)), isLocalAddress ? jsxRuntime.jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" }), void 0) : null] }), void 0) }), void 0));
+    return (jsxRuntime.jsx(ButtonEx, Object.assign({ onClick: onClickLocal, title: `0x${address === null || address === void 0 ? void 0 : address.toHex()}` }, props, { children: jsxRuntime.jsxs(FlexGrowRow, Object.assign({ justifyContent: "space-between", alignItems: "center" }, { children: [icon && address ? jsxRuntime.jsx(Identicon, { size: iconSize, value: address === null || address === void 0 ? void 0 : address.toHex() }) : null, iconOnly ? null : (jsxRuntime.jsxs(FlexRow, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily, visibility: address ? 'inherit' : 'hidden' }, { children: testToDisplay })), address ? null : (jsxRuntime.jsx(material.Typography, Object.assign({ position: "absolute", marginLeft: icon ? 1 : 0, variant: "body1", fontFamily: fontFamily }, { children: "-- --" })))] })), isLocalAddress ? jsxRuntime.jsx(FlexRow, Object.assign({ marginLeft: 0.5 }, { children: "(You)" })) : null] })) })));
 };
 
 const Experiment = (props) => {
     const { children } = props;
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }, void 0);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
 };
 
 const OutcomesLocalStorageKey = 'outcomes';
@@ -2180,7 +2194,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 (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle1" }, { children: "No Experiments loaded" }), void 0), jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }), void 0)] }), void 0));
+        return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle1" }, { children: "No Experiments loaded" })), jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "Visit a page with an experiment to load the data" }))] })));
     }
     return (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch" }, props, { children: Object.entries(experiments).map((data) => {
             const [name, experiment] = data;
@@ -2192,22 +2206,22 @@ const ExperimentsDebugger = (_a) => {
                     value: index === 0 ? weight : sumUpVariants(experiment.variants.slice(0, index + 1)),
                 })),
             ];
-            return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxRuntime.jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }, void 0), jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.Slider, { "aria-label": `Experiment ${name}`, defaultValue: outcome, value: outcome, marks: marks, onChange: (e, value) => {
+            return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", paddingX: 4, marginBottom: 4 }, props, { children: [jsxRuntime.jsxs(FlexRow, { children: [name, ":\u00A0", outcome] }), jsxRuntime.jsx(FlexRow, { children: jsxRuntime.jsx(material.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 jsxRuntime.jsx(material.Link, Object.assign({ component: reactRouterDom.Link, to: to }, props), void 0);
+        return jsxRuntime.jsx(material.Link, Object.assign({ component: reactRouterDom.Link, to: to }, props));
     }
     else {
-        return jsxRuntime.jsx(material.Link, Object.assign({}, props), void 0);
+        return jsxRuntime.jsx(material.Link, Object.assign({}, props));
     }
 };
 /** @deprecated use LinkEx instead */
@@ -2217,7 +2231,7 @@ const MenuEx = (_a) => {
     var { MenuListProps = {}, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuListProps", "mode", "colorize"]);
     const theme = material.useTheme();
     const colorizeMenuListProps = colorize ? { sx: { backgroundColor: theme.palette[colorize][mode] } } : {};
-    return jsxRuntime.jsx(material.Menu, Object.assign({ MenuListProps: merge__default["default"](MenuListProps, colorizeMenuListProps) }, props), void 0);
+    return jsxRuntime.jsx(material.Menu, Object.assign({ MenuListProps: merge__default["default"](MenuListProps, colorizeMenuListProps) }, props));
 };
 
 const NumberStatus = (_a) => {
@@ -2229,7 +2243,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 (jsxRuntime.jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsxRuntime.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__default["default"](value).format(format) }), void 0), jsxRuntime.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 (jsxRuntime.jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsxRuntime.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__default["default"](value).format(format) })), jsxRuntime.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' }) => {
@@ -2289,35 +2303,35 @@ const PixelDebugger = () => {
                         backgroundColor: 'rgba(18, 18, 18, .70)',
                         overflowY: 'auto',
                         width: '100%',
-                    }, color: theme.palette.primary.main }, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsxRuntime.jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsxRuntime.jsx(material.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: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" })) })), displayEvents && !!events.length && (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsxRuntime.jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }))), displayEvents && !events.length && jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }))] })) })) })) })) }));
 };
 const PixelEventDetails = ({ event, fields, index, events, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
-    return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsxRuntime.jsx(material.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsxRuntime.jsx(material.Divider, {}, void 0)] }), void 0));
+    return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: event })), isOpen && (jsxRuntime.jsx(material.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }))), events[index + 1] && jsxRuntime.jsx(material.Divider, {})] })));
 };
 
 const PixelDebuggerProvider = ({ children }) => {
     const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
-    return (jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
+    return (jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children })));
 };
 
 const PixelDebuggerToggle = (_a) => {
     var props = __rest(_a, []);
     const { setIsDebugging, isDebugging } = react.useContext(DebugUserEventsContext);
-    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.FormLabel, { children: "Enable Debugger" }, void 0), jsxRuntime.jsx(material.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
+    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.FormLabel, { children: "Enable Debugger" }), jsxRuntime.jsx(material.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) })] }) })));
 };
 
 const QuickTipButton = (_a) => {
     var { title, children } = _a, props = __rest(_a, ["title", "children"]);
     const [messageOpen, setMessageOpen] = react.useState(false);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsxRuntime.jsx(ai.AiOutlineQuestionCircle, { size: 16 }, void 0) }), void 0), jsxRuntime.jsx(MessageDialog, Object.assign({ onOk: () => setMessageOpen(false), onCancel: () => setMessageOpen(false), onClose: () => setMessageOpen(false), open: messageOpen, title: title !== null && title !== void 0 ? title : '' }, { children: children }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: () => setMessageOpen(true), size: "small" }, props, { children: jsxRuntime.jsx(ai.AiOutlineQuestionCircle, { size: 16 }) })), jsxRuntime.jsx(MessageDialog, Object.assign({ onOk: () => setMessageOpen(false), onCancel: () => setMessageOpen(false), onClose: () => setMessageOpen(false), open: messageOpen, title: title !== null && title !== void 0 ? title : '' }, { children: children }))] }));
 };
 
 const RichResult = (props) => {
     const { thing } = props;
     const thingWithContext = thing;
     thingWithContext['@context'] = 'https://schema.org';
-    return jsxRuntime.jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }), void 0);
+    return jsxRuntime.jsx("script", Object.assign({ type: "application/ld+json" }, { children: JSON.stringify(thingWithContext) }));
 };
 
 exports.ActionStatusType = void 0;
@@ -2370,7 +2384,7 @@ const SelectEx = (_a) => {
     const colorizeMenuProps = colorize
         ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
         : {};
-    return jsxRuntime.jsx(material.Select, Object.assign({ MenuProps: merge__default["default"](MenuProps, colorizeMenuProps) }, props), void 0);
+    return jsxRuntime.jsx(material.Select, Object.assign({ MenuProps: merge__default["default"](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";
@@ -2388,7 +2402,7 @@ 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 (jsxRuntime.jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxRuntime.jsxs(FlexRow, { children: [logo ? jsxRuntime.jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsxRuntime.jsx(material.Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsxRuntime.jsx(material.Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
+    return (jsxRuntime.jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxRuntime.jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxRuntime.jsxs(FlexRow, { children: [logo ? jsxRuntime.jsx("img", { src: img, height: 24 }) : null, label ? (jsxRuntime.jsx(material.Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }))) : null] }), jsxRuntime.jsx(material.Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }))] })) })));
 };
 
 Object.defineProperty(exports, 'useMediaQuery', {