@dynamic-labs/sdk-react-core 1.1.0-alpha.9 → 1.1.0

package/src/lib/shared/utils/classes/storage/localStorage.cjs

@@ -2,8 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var dynamicEvents = require('../../../../events/dynamicEvents.cjs');
 var localStorage = require('../../../../utils/constants/localStorage.cjs');
 require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
 var logger = require('../../../logger.cjs');
 
 const connectedKeys = {
@@ -49,7 +51,7 @@ class LocalStorage {
             [key]
                 .concat(connectedKeys[key] || [])
                 .forEach((_key) => LocalStorage.removeFromLS(_key));
-            window.dispatchEvent(new Event('logOut'));
+            dynamicEvents.dynamicEvents.emit('triggerLogout');
         }
         return undefined;
     }

package/src/lib/shared/utils/classes/storage/localStorage.js

@@ -1,5 +1,7 @@
+import { dynamicEvents } from '../../../../events/dynamicEvents.js';
 import { AUTH_TOKEN, AUTH_USER } from '../../../../utils/constants/localStorage.js';
 import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
 import { logger } from '../../../logger.js';
 
 const connectedKeys = {
@@ -45,7 +47,7 @@ class LocalStorage {
             [key]
                 .concat(connectedKeys[key] || [])
                 .forEach((_key) => LocalStorage.removeFromLS(_key));
-            window.dispatchEvent(new Event('logOut'));
+            dynamicEvents.emit('triggerLogout');
         }
         return undefined;
     }

package/src/lib/shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.cjs

@@ -4,14 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var localStorage$1 = require('../../../../utils/constants/localStorage.cjs');
 require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
 var localStorage = require('../../classes/storage/localStorage.cjs');
 var isWalletGroup = require('../../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
+var getWalletGroupType = require('../../../../utils/functions/getWalletGroupType/getWalletGroupType.cjs');
 
-const getLastUsedWalletName = () => localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET);
+const getLastUsedWalletKey = () => localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET);
 const getWalletGroupLabel = (walletGroup) => {
-    const lastUsedWalletName = getLastUsedWalletName();
-    const hasNestedLastUsedWallet = walletGroup.groupedWallets.some((walletOption) => walletOption.walletConnector.name === lastUsedWalletName ||
-        walletOption.walletConnector.key === lastUsedWalletName);
+    const lastUsedWalletKey = getLastUsedWalletKey();
+    const hasNestedLastUsedWallet = walletGroup.groupedWallets.some((walletOption) => walletOption.walletConnector.key === lastUsedWalletKey);
     if (hasNestedLastUsedWallet) {
         return 'Last used';
     }
@@ -19,23 +20,26 @@ const getWalletGroupLabel = (walletGroup) => {
     if (hasNestedInstalledWallets) {
         return 'Installed';
     }
-    return 'Multichain';
+    if (getWalletGroupType.getWalletGroupType(walletGroup) === 'multi-chain') {
+        return 'Multichain';
+    }
+    return undefined;
 };
-const getWalletLabel = (walletOption, usingMultiWallet = false) => {
-    const lastUsedWalletName = getLastUsedWalletName();
-    const { name: walletName, key: walletKey } = walletOption.walletConnector;
-    const isLastUsedWallet = walletName === lastUsedWalletName || walletKey === lastUsedWalletName;
+const getWalletLabel = (walletOption) => {
+    const lastUsedWalletKey = getLastUsedWalletKey();
+    const { key: walletKey } = walletOption.walletConnector;
+    const isLastUsedWallet = walletKey === lastUsedWalletKey;
     if (isLastUsedWallet)
         return 'Last used';
     if (walletOption.isInstalledOnBrowser)
         return 'Installed';
     return undefined;
 };
-const getWalletListItemLabel = ({ usingMultiWallet, wallet, }) => {
+const getWalletListItemLabel = ({ wallet }) => {
     if (isWalletGroup.isWalletGroup(wallet)) {
         return getWalletGroupLabel(wallet);
     }
-    return getWalletLabel(wallet, usingMultiWallet);
+    return getWalletLabel(wallet);
 };
 
 exports.getWalletListItemLabel = getWalletListItemLabel;

package/src/lib/shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.d.ts

@@ -1,8 +1,7 @@
 import { WalletOption } from '../../../types';
 type Args = {
-    usingMultiWallet: boolean;
     wallet: WalletOption;
 };
 type Label = 'Last used' | 'Installed' | 'Multichain' | undefined;
-export declare const getWalletListItemLabel: ({ usingMultiWallet, wallet, }: Args) => Label;
+export declare const getWalletListItemLabel: ({ wallet }: Args) => Label;
 export {};

package/src/lib/shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.js

@@ -1,13 +1,14 @@
 import { LAST_USED_WALLET } from '../../../../utils/constants/localStorage.js';
 import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
 import { LocalStorage } from '../../classes/storage/localStorage.js';
 import { isWalletGroup } from '../../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
+import { getWalletGroupType } from '../../../../utils/functions/getWalletGroupType/getWalletGroupType.js';
 
-const getLastUsedWalletName = () => LocalStorage.getFromLS(LAST_USED_WALLET);
+const getLastUsedWalletKey = () => LocalStorage.getFromLS(LAST_USED_WALLET);
 const getWalletGroupLabel = (walletGroup) => {
-    const lastUsedWalletName = getLastUsedWalletName();
-    const hasNestedLastUsedWallet = walletGroup.groupedWallets.some((walletOption) => walletOption.walletConnector.name === lastUsedWalletName ||
-        walletOption.walletConnector.key === lastUsedWalletName);
+    const lastUsedWalletKey = getLastUsedWalletKey();
+    const hasNestedLastUsedWallet = walletGroup.groupedWallets.some((walletOption) => walletOption.walletConnector.key === lastUsedWalletKey);
     if (hasNestedLastUsedWallet) {
         return 'Last used';
     }
@@ -15,23 +16,26 @@ const getWalletGroupLabel = (walletGroup) => {
     if (hasNestedInstalledWallets) {
         return 'Installed';
     }
-    return 'Multichain';
+    if (getWalletGroupType(walletGroup) === 'multi-chain') {
+        return 'Multichain';
+    }
+    return undefined;
 };
-const getWalletLabel = (walletOption, usingMultiWallet = false) => {
-    const lastUsedWalletName = getLastUsedWalletName();
-    const { name: walletName, key: walletKey } = walletOption.walletConnector;
-    const isLastUsedWallet = walletName === lastUsedWalletName || walletKey === lastUsedWalletName;
+const getWalletLabel = (walletOption) => {
+    const lastUsedWalletKey = getLastUsedWalletKey();
+    const { key: walletKey } = walletOption.walletConnector;
+    const isLastUsedWallet = walletKey === lastUsedWalletKey;
     if (isLastUsedWallet)
         return 'Last used';
     if (walletOption.isInstalledOnBrowser)
         return 'Installed';
     return undefined;
 };
-const getWalletListItemLabel = ({ usingMultiWallet, wallet, }) => {
+const getWalletListItemLabel = ({ wallet }) => {
     if (isWalletGroup(wallet)) {
         return getWalletGroupLabel(wallet);
     }
-    return getWalletLabel(wallet, usingMultiWallet);
+    return getWalletLabel(wallet);
 };
 
 export { getWalletListItemLabel };

package/src/lib/shared/utils/functions/index.d.ts

@@ -13,3 +13,4 @@ export * from './getWalletListItemLabel';
 export * from './formatBigNumber';
 export * from './trimEnd';
 export * from './ceil';
+export * from './providerLabel';

package/src/lib/shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs

@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const isUserLinkingWallet = (user, view, isMockedSDK) => (user === null || user === void 0 ? void 0 : user.verifiedCredentials) !== undefined &&
     (view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list' ||
-        view === 'multi-wallet-wallet-list') &&
+        view === 'login-with-email-or-wallet-full-wallet-list') &&
     // Mocked SDK is used in the dashboard and the user is
     // the actual user that the user logged in to the dashboard
     !isMockedSDK;

package/src/lib/shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js

@@ -1,7 +1,6 @@
 const isUserLinkingWallet = (user, view, isMockedSDK) => (user === null || user === void 0 ? void 0 : user.verifiedCredentials) !== undefined &&
     (view === 'wallet-list' ||
-        view === 'login-with-email-or-wallet-full-wallet-list' ||
-        view === 'multi-wallet-wallet-list') &&
+        view === 'login-with-email-or-wallet-full-wallet-list') &&
     // Mocked SDK is used in the dashboard and the user is
     // the actual user that the user logged in to the dashboard
     !isMockedSDK;

package/src/lib/shared/utils/functions/providerLabel/index.d.ts

@@ -0,0 +1 @@
+export { providerLabel } from './providerLabel';

package/src/lib/shared/utils/functions/providerLabel/providerLabel.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sdkApi = require('@dynamic-labs/sdk-api');
+var capitalize = require('../capitalize/capitalize.cjs');
+
+const providerLabel = (provider) => {
+    if (provider === sdkApi.SocialSignInProviderEnum.Coinbasesocial) {
+        return 'Coinbase';
+    }
+    return capitalize.capitalize(provider);
+};
+
+exports.providerLabel = providerLabel;

package/src/lib/shared/utils/functions/providerLabel/providerLabel.d.ts

@@ -0,0 +1,2 @@
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+export declare const providerLabel: (provider: SocialSignInProviderEnum) => string;

package/src/lib/shared/utils/functions/providerLabel/providerLabel.js

@@ -0,0 +1,11 @@
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+import { capitalize } from '../capitalize/capitalize.js';
+
+const providerLabel = (provider) => {
+    if (provider === SocialSignInProviderEnum.Coinbasesocial) {
+        return 'Coinbase';
+    }
+    return capitalize(provider);
+};
+
+export { providerLabel };

package/src/lib/shared/utils/functions/wallet/createWallet.cjs

@@ -6,14 +6,16 @@ var walletBook = require('@dynamic-labs/wallet-book');
 
 const createWallet = (walletBook$1, wallet) => {
     var _a;
-    const walletbookWallet = walletBook.findWalletBookWallet(walletBook$1, wallet.key);
+    const walletBookWallet = walletBook.findWalletBookWallet(walletBook$1, wallet.key);
     return {
-        group: walletbookWallet === null || walletbookWallet === void 0 ? void 0 : walletbookWallet.group,
-        injectedConfig: walletbookWallet === null || walletbookWallet === void 0 ? void 0 : walletbookWallet.injectedConfig,
+        chainGroup: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.chainGroup,
+        group: (walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.chainGroup) || (walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.walletGroup),
+        injectedConfig: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.injectedConfig,
         isInstalledOnBrowser: (_a = wallet.isInstalledOnBrowser()) !== null && _a !== void 0 ? _a : false,
         key: wallet.key,
         name: wallet.name,
         walletConnector: wallet,
+        walletGroup: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.walletGroup,
     };
 };
 

package/src/lib/shared/utils/functions/wallet/createWallet.js

@@ -2,14 +2,16 @@ import { findWalletBookWallet } from '@dynamic-labs/wallet-book';
 
 const createWallet = (walletBook, wallet) => {
     var _a;
-    const walletbookWallet = findWalletBookWallet(walletBook, wallet.key);
+    const walletBookWallet = findWalletBookWallet(walletBook, wallet.key);
     return {
-        group: walletbookWallet === null || walletbookWallet === void 0 ? void 0 : walletbookWallet.group,
-        injectedConfig: walletbookWallet === null || walletbookWallet === void 0 ? void 0 : walletbookWallet.injectedConfig,
+        chainGroup: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.chainGroup,
+        group: (walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.chainGroup) || (walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.walletGroup),
+        injectedConfig: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.injectedConfig,
         isInstalledOnBrowser: (_a = wallet.isInstalledOnBrowser()) !== null && _a !== void 0 ? _a : false,
         key: wallet.key,
         name: wallet.name,
         walletConnector: wallet,
+        walletGroup: walletBookWallet === null || walletBookWallet === void 0 ? void 0 : walletBookWallet.walletGroup,
     };
 };
 

package/src/lib/shared/utils/hooks/index.d.ts

@@ -1,7 +1,8 @@
+export { useEffectOnce } from './useEffectOnce';
+export { useForwardedRef } from './useForwardedRef';
+export { useGlobalLoading } from './useGlobalLoading';
 export { useLocalStorage } from './useLocalStorage';
+export { useMediaQuery } from './useMediaQuery';
 export { useOnClickOutside } from './useOnClickOutside';
 export { usePreventPageScroll } from './usePreventPageScroll';
-export { useGlobalLoading } from './useGlobalLoading';
-export { useMediaQuery } from './useMediaQuery';
-export { useEffectOnce } from './useEffectOnce';
-export { useForwardedRef } from './useForwardedRef';
+export * from './useThrottle';

package/src/lib/shared/utils/hooks/useOnClickOutside/index.cjs

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const useOnClickOutside = (ref, handler) => {
+    const handlerRef = React.useRef(handler);
+    handlerRef.current = handler;
     React.useEffect(() => {
         const listener = (event) => {
             event.stopPropagation();
@@ -14,7 +16,7 @@ const useOnClickOutside = (ref, handler) => {
                 ref.current.contains(realTarget)) {
                 return;
             }
-            handler(event);
+            handlerRef.current(event);
         };
         document.addEventListener('touchstart', listener);
         document.addEventListener('click', listener);
@@ -22,7 +24,7 @@ const useOnClickOutside = (ref, handler) => {
             document.removeEventListener('touchstart', listener);
             document.removeEventListener('click', listener);
         };
-    }, [ref, handler]);
+    }, [ref]);
 };
 
 exports.useOnClickOutside = useOnClickOutside;

package/src/lib/shared/utils/hooks/useOnClickOutside/index.js

@@ -1,6 +1,8 @@
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 const useOnClickOutside = (ref, handler) => {
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
     useEffect(() => {
         const listener = (event) => {
             event.stopPropagation();
@@ -10,7 +12,7 @@ const useOnClickOutside = (ref, handler) => {
                 ref.current.contains(realTarget)) {
                 return;
             }
-            handler(event);
+            handlerRef.current(event);
         };
         document.addEventListener('touchstart', listener);
         document.addEventListener('click', listener);
@@ -18,7 +20,7 @@ const useOnClickOutside = (ref, handler) => {
             document.removeEventListener('touchstart', listener);
             document.removeEventListener('click', listener);
         };
-    }, [ref, handler]);
+    }, [ref]);
 };
 
 export { useOnClickOutside };

package/src/lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utils = require('@dynamic-labs/utils');
 
+// This hook allows us to prevent page from scrolling ie. when a modal is open.
+// It adds a class to the html and body elements which disables scrolling.
 const usePreventPageScroll = (isOpen) => {
-    React.useEffect(() => {
+    const disableScroll = () => {
         var _a;
-        if (!isOpen)
-            return;
         const html = document.querySelector('html');
         const body = document.querySelector('body');
         /* istanbul ignore next */
@@ -25,10 +25,6 @@ const usePreventPageScroll = (isOpen) => {
             return;
         html.classList.add('dynamic-no-scroll');
         body.classList.add('dynamic-no-scroll');
-        const userScrollCoordinatesBeforeLock = {
-            x: window.scrollX,
-            y: window.scrollY,
-        };
         // IOS Safari needs to have a different class to prevent scroll
         // We need to add postion: fixed to lock the body scrolling
         // It breaks the scroll position, so we need to save the scroll position and restore it after the modal is closed
@@ -37,16 +33,33 @@ const usePreventPageScroll = (isOpen) => {
             html.classList.add('dynamic-no-scroll--ios');
             body.classList.add('dynamic-no-scroll--ios');
         }
+    };
+    const enableScroll = (userScrollCoordinatesBeforeLock) => {
+        const html = document.querySelector('html');
+        const body = document.querySelector('body');
+        /* istanbul ignore next */
+        if (!html || !body)
+            return;
+        html.classList.remove('dynamic-no-scroll');
+        body.classList.remove('dynamic-no-scroll');
+        // Restore the scroll position when user is using IOS
+        /* istanbul ignore else */
+        if (utils.isIOS()) {
+            html.classList.remove('dynamic-no-scroll--ios');
+            body.classList.remove('dynamic-no-scroll--ios');
+            window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
+        }
+    };
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const userScrollCoordinatesBeforeLock = {
+            x: window.scrollX,
+            y: window.scrollY,
+        };
+        disableScroll();
         return () => {
-            html.classList.remove('dynamic-no-scroll');
-            body.classList.remove('dynamic-no-scroll');
-            // Restore the scroll position when user is using IOS
-            /* istanbul ignore else */
-            if (utils.isIOS()) {
-                html.classList.remove('dynamic-no-scroll--ios');
-                body.classList.remove('dynamic-no-scroll--ios');
-                window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
-            }
+            enableScroll(userScrollCoordinatesBeforeLock);
         };
     }, [isOpen]);
 };

package/src/lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { isIOS } from '@dynamic-labs/utils';
 
+// This hook allows us to prevent page from scrolling ie. when a modal is open.
+// It adds a class to the html and body elements which disables scrolling.
 const usePreventPageScroll = (isOpen) => {
-    useEffect(() => {
+    const disableScroll = () => {
         var _a;
-        if (!isOpen)
-            return;
         const html = document.querySelector('html');
         const body = document.querySelector('body');
         /* istanbul ignore next */
@@ -21,10 +21,6 @@ const usePreventPageScroll = (isOpen) => {
             return;
         html.classList.add('dynamic-no-scroll');
         body.classList.add('dynamic-no-scroll');
-        const userScrollCoordinatesBeforeLock = {
-            x: window.scrollX,
-            y: window.scrollY,
-        };
         // IOS Safari needs to have a different class to prevent scroll
         // We need to add postion: fixed to lock the body scrolling
         // It breaks the scroll position, so we need to save the scroll position and restore it after the modal is closed
@@ -33,16 +29,33 @@ const usePreventPageScroll = (isOpen) => {
             html.classList.add('dynamic-no-scroll--ios');
             body.classList.add('dynamic-no-scroll--ios');
         }
+    };
+    const enableScroll = (userScrollCoordinatesBeforeLock) => {
+        const html = document.querySelector('html');
+        const body = document.querySelector('body');
+        /* istanbul ignore next */
+        if (!html || !body)
+            return;
+        html.classList.remove('dynamic-no-scroll');
+        body.classList.remove('dynamic-no-scroll');
+        // Restore the scroll position when user is using IOS
+        /* istanbul ignore else */
+        if (isIOS()) {
+            html.classList.remove('dynamic-no-scroll--ios');
+            body.classList.remove('dynamic-no-scroll--ios');
+            window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
+        }
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const userScrollCoordinatesBeforeLock = {
+            x: window.scrollX,
+            y: window.scrollY,
+        };
+        disableScroll();
         return () => {
-            html.classList.remove('dynamic-no-scroll');
-            body.classList.remove('dynamic-no-scroll');
-            // Restore the scroll position when user is using IOS
-            /* istanbul ignore else */
-            if (isIOS()) {
-                html.classList.remove('dynamic-no-scroll--ios');
-                body.classList.remove('dynamic-no-scroll--ios');
-                window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
-            }
+            enableScroll(userScrollCoordinatesBeforeLock);
         };
     }, [isOpen]);
 };

package/src/lib/shared/utils/hooks/useThrottle/index.d.ts

@@ -0,0 +1 @@
+export * from './useThrottle';

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+const useThrottle = (callback, delay) => {
+    const isThrottled = React.useRef(false);
+    const savedCallback = React.useRef(callback);
+    // Remember the latest callback if it changes.
+    savedCallback.current = callback;
+    return React.useCallback((...args) => {
+        if (!isThrottled.current) {
+            savedCallback.current(...args);
+            isThrottled.current = true;
+            // Set the throttle off after the delay
+            setTimeout(() => (isThrottled.current = false), delay);
+        }
+    }, [delay]);
+};
+
+exports.useThrottle = useThrottle;

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+export declare const useThrottle: <T extends (...args: unknown[]) => void>(callback: T, delay: number) => (...args: Parameters<T>) => void;

package/src/lib/shared/utils/hooks/useThrottle/useThrottle.js

@@ -0,0 +1,25 @@
+import { useRef, useCallback } from 'react';
+
+/**
+ * useThrottle hook to throttle a callback function.
+ *
+ * @param callback - The callback function to be throttled. It must return void.
+ * @param delay - The time in milliseconds to wait before the next call.
+ * @returns A throttled version of the callback function.
+ */
+const useThrottle = (callback, delay) => {
+    const isThrottled = useRef(false);
+    const savedCallback = useRef(callback);
+    // Remember the latest callback if it changes.
+    savedCallback.current = callback;
+    return useCallback((...args) => {
+        if (!isThrottled.current) {
+            savedCallback.current(...args);
+            isThrottled.current = true;
+            // Set the throttle off after the delay
+            setTimeout(() => (isThrottled.current = false), delay);
+        }
+    }, [delay]);
+};
+
+export { useThrottle };