@xylabs/sdk-react 2.9.32 → 2.9.35

package/dist/cjs5/components/EthAccount/EthAccount.stories.d.ts

@@ -3,9 +3,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 declare const StorybookEntry: ComponentMeta<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Long: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const LongEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const Medium: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
+declare const MediumEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Short: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const ShortEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const Auto: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
 declare const AutoEmpty: ComponentStory<import("react").FC<import("./EthAccountProps").EthAccountProps>>;
-export { Auto, AutoEmpty, Long, LongEmpty, Short, ShortEmpty };
+export { Auto, AutoEmpty, Long, LongEmpty, Medium, MediumEmpty, Short, ShortEmpty };
 export default StorybookEntry;

package/dist/cjs5/components/EthAccount/EthAccountProps.d.ts

@@ -4,6 +4,7 @@ import { ButtonExProps } from '../ButtonEx';
 interface EthAccountProps extends ButtonExProps {
     address?: EthAddress | null;
     addressLength?: 'auto' | 'short' | 'long';
+    shortenedLength?: number;
     full?: boolean;
     icon?: boolean;
     iconSize?: number;

package/dist/cjs5/components/LinkEx/LinkToEx.d.ts

@@ -2,7 +2,9 @@ import { LinkProps } from '@mui/material';
 import React from 'react';
 import { To } from 'react-router-dom';
 interface Props extends LinkProps {
-    to: To;
+    to?: To;
 }
+declare const LinkEx: React.FC<Props>;
+/** @deprecated use LinkEx instead */
 declare const LinkToEx: React.FC<Props>;
-export { LinkToEx };
+export { LinkEx, LinkToEx };

package/dist/cjs5/components/LinkEx/index.d.ts

@@ -1,2 +1 @@
-import { LinkToEx } from './LinkToEx';
-export { LinkToEx };
+export * from './LinkToEx';

package/dist/cjs5/hooks/index.d.ts

@@ -1,9 +1,11 @@
 export * from './useBreakpoint';
+export * from './useInterval';
 export * from './useLocalStorage';
 export * from './useMediaQuery';
 export * from './useMounted';
 export * from './useNavigateToEthAddress';
 export * from './useSpacing';
+export * from './useTimeout';
 export * from './useUserEvents';
 export * from './useWebP';
 export * from './useWindowSize';

package/dist/cjs5/hooks/useInterval.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useInterval: (callback: () => void, delay: number) => import("react").MutableRefObject<number>;

package/dist/cjs5/hooks/useTimeout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useTimeout: (callback: () => void, delay: number) => import("react").MutableRefObject<number>;

package/dist/cjs5/index.js

@@ -1805,6 +1805,20 @@ const useBreakpoint = () => {
     }
 };
 
+const useInterval = (callback, delay) => {
+    const intervalRef = react.useRef(-1);
+    const savedCallback = react.useRef(callback);
+    react.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        const tick = () => savedCallback.current();
+        intervalRef.current = window.setInterval(tick, delay);
+        return () => window.clearInterval(intervalRef.current);
+    }, [delay]);
+    return intervalRef;
+};
+
 const useLocalStorage = (key, defaultValue) => {
     const [storedValue, setStoredValue] = react.useState(() => {
         try {
@@ -1879,6 +1893,20 @@ const useSpacing = (value) => {
     return theme.spacing(typeof value === 'string' ? parseInt(value) : value);
 };
 
+const useTimeout = (callback, delay) => {
+    const timeoutRef = react.useRef(-1);
+    const savedCallback = react.useRef(callback);
+    react.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        const tick = () => savedCallback.current();
+        timeoutRef.current = window.setTimeout(tick, delay);
+        return () => window.clearTimeout(timeoutRef.current);
+    }, [delay]);
+    return timeoutRef;
+};
+
 const useUserEvents = () => {
     const { userEvents } = react.useContext(UserEventsContext);
     if (!userEvents) {
@@ -1929,7 +1957,7 @@ function useWindowSize() {
 }
 
 const EthAccount = (_a) => {
-    var { address, icon = false, iconSize = 16, iconOnly = false, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconSize", "iconOnly", "addressLength", "fontFamily", "toEtherScan", "onButtonClick"]);
+    var { address, icon = false, iconSize = 16, iconOnly = false, shortenedLength, addressLength = 'auto', fontFamily = '"Source Code Pro",monospace', toEtherScan, onButtonClick } = _a, props = __rest(_a, ["address", "icon", "iconSize", "iconOnly", "shortenedLength", "addressLength", "fontFamily", "toEtherScan", "onButtonClick"]);
     const { localAddress } = react.useContext(EthersContext);
     const theme = material.useTheme();
     const large = material.useMediaQuery(theme.breakpoints.up('md'));
@@ -1944,7 +1972,7 @@ const EthAccount = (_a) => {
     const testToDisplay = addressLength === 'long'
         ? addressToDisplay.toString()
         : addressLength === 'short'
-            ? addressToDisplay.toShortString()
+            ? addressToDisplay.toShortString(shortenedLength)
             : large
                 ? addressToDisplay.toString()
                 : addressToDisplay.toShortString();
@@ -2076,10 +2104,17 @@ const ExperimentsDebugger = (_a) => {
         }) }), void 0));
 };
 
-const LinkToEx = (_a) => {
+const LinkEx = (_a) => {
     var { to } = _a, props = __rest(_a, ["to"]);
-    return jsxRuntime.jsx(material.Link, Object.assign({ component: reactRouterDom.Link, to: to }, props), void 0);
+    if (to) {
+        return jsxRuntime.jsx(material.Link, Object.assign({ component: reactRouterDom.Link, to: to }, props), void 0);
+    }
+    else {
+        return jsxRuntime.jsx(material.Link, Object.assign({}, props), void 0);
+    }
 };
+/** @deprecated use LinkEx instead */
+const LinkToEx = LinkEx;
 
 const MenuEx = (_a) => {
     var { MenuListProps = {}, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuListProps", "mode", "colorize"]);
@@ -2300,6 +2335,7 @@ exports.Gtm = Gtm;
 exports.HoverScale = HoverScale;
 exports.Identicon = Identicon;
 exports.InvertableThemeProvider = InvertableThemeProvider;
+exports.LinkEx = LinkEx;
 exports.LinkToEx = LinkToEx;
 exports.MenuEx = MenuEx;
 exports.MessageDialog = MessageDialog;
@@ -2345,10 +2381,12 @@ exports.setSessionStorageObject = setSessionStorageObject;
 exports.useAsyncEffect = useAsyncEffect;
 exports.useBreakpoint = useBreakpoint;
 exports.useCookieConsent = useCookieConsent;
+exports.useInterval = useInterval;
 exports.useLocalStorage = useLocalStorage;
 exports.useMounted = useMounted;
 exports.useNavigateToEthAddress = useNavigateToEthAddress;
 exports.useSpacing = useSpacing;
+exports.useTimeout = useTimeout;
 exports.useUserEvents = useUserEvents;
 exports.useWebP = useWebP;
 exports.useWindowSize = useWindowSize;