@dynamic-labs/sdk-react-core 0.18.0-RC.7 → 0.18.0-RC.8

package/src/lib/utils/hooks/useColorSchemePreference/useColorSchemePreference.js

@@ -1,23 +1,21 @@
-import { useState, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import { useMediaQuery } from '../../../shared/utils/hooks/useMediaQuery/useMediaQuery.js';
+import '../../../shared/consts/index.js';
 
 const useColorSchemePreference = () => {
-    const [preference, setPreference] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    useEffect(() => {
-        const listener = (e) => {
-            setPreference(e.matches ? 'dark' : 'light');
-        };
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', listener);
-        return () => {
-            window
-                .matchMedia('(prefers-color-scheme: dark)')
-                .removeEventListener('change', listener);
-        };
-    }, []);
-    return preference;
+    const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    return isDarkMode ? 'dark' : 'light';
 };
 
 export { useColorSchemePreference };

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.cjs

@@ -23,7 +23,7 @@ var api = require('../../../data/api.cjs');
 require('@dynamic-labs/multi-wallet');
 var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly, primaryWalletId, setPrimaryWalletId) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage.useLocalStorage(localStorage.CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = React.useState(null);
     const [connectedWallets, setConnectedWallets] = React.useState([]);
@@ -37,9 +37,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         setConnectedWallets((currentWallets) => {
             const exists = currentWallets.some((currentWallet) => walletConnectorCore.isSameAddress(currentWallet.address, address, chain));
-            if (currentWallets.length === 0 &&
-                authMode === 'connect-only' &&
-                !primaryWalletId) {
+            // when we connect first wallet, it should be set as a primary wallet
+            const shouldSetPrimaryWalletId = authMode === 'connect-only' &&
+                currentWallets.length === 0 &&
+                !primaryWalletId;
+            if (shouldSetPrimaryWalletId) {
                 setPrimaryWalletId(`connect-only-wallet-${0}`);
             }
             if (exists) {
@@ -65,6 +67,7 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
                 ...currentWallets,
                 {
                     chain,
+                    id: `connect-only-wallet-${id}`,
                     name: walletConnector.name,
                     provider: getWalletProvider.getWalletProvider(walletConnector),
                     walletPublicKey: address,
@@ -72,6 +75,16 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             ];
         });
     }, [authMode, primaryWalletId, setConnectedWalletsInfo, setPrimaryWalletId]);
+    React.useEffect(() => {
+        const found = connectedWalletsInfo.find((connectedWalletInfo) => connectedWalletInfo.id !== primaryWalletId);
+        // when primaryWalletId is defined, but it does not exist in
+        // connectedWalletInfo that means we're out of sync and we want to remove all connected wallets data
+        if (primaryWalletId && !found && !user) {
+            removeConnectedWalletsInfo();
+            setConnectedWallets([]);
+            clearPrimaryWalletId();
+        }
+    }, []);
     const connectWalletByAddressAndChain = React.useCallback((name, address, chain, id) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = walletConnectorCore.getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
@@ -93,9 +106,10 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     React.useEffect(() => {
-        if (authMode === 'connect-only' &&
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' &&
             connectedWalletsInfo.length &&
-            !connectedWallets.length) {
+            !connectedWallets.length;
+        if (shouldUpdateConnectedWalletsState) {
             connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }, id) => {
                 if (chain) {
                     connectWalletByAddressAndChain(name, walletPublicKey, chain, id);

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.d.ts

@@ -1,13 +1,24 @@
 /// <reference types="react" />
 import { Chain, FetchPublicAddressOpts, WalletConnector } from '@dynamic-labs/wallet-connector-core';
-import { AuthModeType, Wallet, WalletOption } from '../../../shared';
+import { AuthModeType, UserProfile, Wallet, WalletOption } from '../../../shared';
 export type ConnectedWalletConnectorType = {
     chain: Chain | undefined;
     name: string;
     provider: string;
     walletPublicKey: string;
+    id: string;
 };
-export declare const useConnectWallet: (wallets: WalletOption[], authMode: AuthModeType, environmentId: string, enableVisitTrackingOnConnectOnly: boolean, primaryWalletId: string | undefined, setPrimaryWalletId: (walletId: string) => void) => {
+type Props = {
+    authMode: AuthModeType;
+    clearPrimaryWalletId: () => void;
+    enableVisitTrackingOnConnectOnly: boolean;
+    environmentId: string;
+    primaryWalletId: string | undefined;
+    setPrimaryWalletId: (walletId: string) => void;
+    wallets: WalletOption[];
+    user: UserProfile | undefined;
+};
+export declare const useConnectWallet: ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }: Props) => {
     connectWallet: (walletConnector: WalletConnector, fetchPublicAddressOpts?: FetchPublicAddressOpts) => Promise<string>;
     connectWalletByAddressAndChain: (name: string, address: string, chain: Chain, id?: number) => Promise<void>;
     connectedWallet: Wallet | null;
@@ -17,3 +28,4 @@ export declare const useConnectWallet: (wallets: WalletOption[], authMode: AuthM
     setConnectedWallet: import("react").Dispatch<import("react").SetStateAction<Wallet | null>>;
     setConnectedWallets: import("react").Dispatch<import("react").SetStateAction<[] | Wallet[]>>;
 };
+export {};

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.js

@@ -19,7 +19,7 @@ import { createVisit } from '../../../data/api.js';
 import '@dynamic-labs/multi-wallet';
 import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 
-const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingOnConnectOnly, primaryWalletId, setPrimaryWalletId) => {
+const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, wallets, user, }) => {
     const [connectedWalletsInfo, setConnectedWalletsInfo, removeConnectedWalletsInfo,] = useLocalStorage(CONNECTED_WALLETS_INFO, []);
     const [connectedWallet, setConnectedWallet] = useState(null);
     const [connectedWallets, setConnectedWallets] = useState([]);
@@ -33,9 +33,11 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         });
         setConnectedWallets((currentWallets) => {
             const exists = currentWallets.some((currentWallet) => isSameAddress(currentWallet.address, address, chain));
-            if (currentWallets.length === 0 &&
-                authMode === 'connect-only' &&
-                !primaryWalletId) {
+            // when we connect first wallet, it should be set as a primary wallet
+            const shouldSetPrimaryWalletId = authMode === 'connect-only' &&
+                currentWallets.length === 0 &&
+                !primaryWalletId;
+            if (shouldSetPrimaryWalletId) {
                 setPrimaryWalletId(`connect-only-wallet-${0}`);
             }
             if (exists) {
@@ -61,6 +63,7 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
                 ...currentWallets,
                 {
                     chain,
+                    id: `connect-only-wallet-${id}`,
                     name: walletConnector.name,
                     provider: getWalletProvider(walletConnector),
                     walletPublicKey: address,
@@ -68,6 +71,16 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
             ];
         });
     }, [authMode, primaryWalletId, setConnectedWalletsInfo, setPrimaryWalletId]);
+    useEffect(() => {
+        const found = connectedWalletsInfo.find((connectedWalletInfo) => connectedWalletInfo.id !== primaryWalletId);
+        // when primaryWalletId is defined, but it does not exist in
+        // connectedWalletInfo that means we're out of sync and we want to remove all connected wallets data
+        if (primaryWalletId && !found && !user) {
+            removeConnectedWalletsInfo();
+            setConnectedWallets([]);
+            clearPrimaryWalletId();
+        }
+    }, []);
     const connectWalletByAddressAndChain = useCallback((name, address, chain, id) => __awaiter(void 0, void 0, void 0, function* () {
         const walletConnector = getWalletConnectorByName(wallets.map((wallet) => wallet.walletConnector), name);
         if (walletConnector) {
@@ -89,9 +102,10 @@ const useConnectWallet = (wallets, authMode, environmentId, enableVisitTrackingO
         }
     }), [setConnectedStates, wallets]);
     useEffect(() => {
-        if (authMode === 'connect-only' &&
+        const shouldUpdateConnectedWalletsState = authMode === 'connect-only' &&
             connectedWalletsInfo.length &&
-            !connectedWallets.length) {
+            !connectedWallets.length;
+        if (shouldUpdateConnectedWalletsState) {
             connectedWalletsInfo.forEach(({ name, walletPublicKey, chain }, id) => {
                 if (chain) {
                     connectWalletByAddressAndChain(name, walletPublicKey, chain, id);

package/src/lib/utils/hooks/useCountdown/useCountdown.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = React.useState(seconds);
+    const timeoutRef = React.useRef();
+    const startCountdown = () => {
+        if (timeoutRef.current) {
+            return setRemainingSeconds(seconds);
+        }
+        runCountdown();
+    };
+    const stopCountdown = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const runCountdown = () => {
+        timeoutRef.current = setTimeout(() => {
+            setRemainingSeconds((prevSeconds) => prevSeconds - 1);
+        }, 1000);
+    };
+    React.useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+exports.useCountdown = useCountdown;

package/src/lib/utils/hooks/useCountdown/useCountdown.d.ts

@@ -0,0 +1,11 @@
+type Prop = {
+    callback?: () => void;
+    seconds: number;
+};
+export interface UseCountdown {
+    remainingSeconds: number;
+    startCountdown: () => void;
+    stopCountdown: () => void;
+}
+export declare const useCountdown: ({ callback, seconds }: Prop) => UseCountdown;
+export {};

package/src/lib/utils/hooks/useCountdown/useCountdown.js

@@ -0,0 +1,35 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useCountdown = ({ callback, seconds }) => {
+    const [remainingSeconds, setRemainingSeconds] = useState(seconds);
+    const timeoutRef = useRef();
+    const startCountdown = () => {
+        if (timeoutRef.current) {
+            return setRemainingSeconds(seconds);
+        }
+        runCountdown();
+    };
+    const stopCountdown = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const runCountdown = () => {
+        timeoutRef.current = setTimeout(() => {
+            setRemainingSeconds((prevSeconds) => prevSeconds - 1);
+        }, 1000);
+    };
+    useEffect(() => {
+        if (!timeoutRef.current)
+            return;
+        if (remainingSeconds <= 0) {
+            if (callback)
+                callback();
+            return;
+        }
+        runCountdown();
+        return () => clearTimeout(timeoutRef.current);
+    }, [remainingSeconds, callback]);
+    return { remainingSeconds, startCountdown, stopCountdown };
+};
+
+export { useCountdown };

package/src/lib/utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/src/lib/utils/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect };

package/src/lib/utils/hooks/useKeyboardEventListener/useKeyboardEventListener.cjs

@@ -5,19 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const useKeyboardEventListener = ({ disabled, inputKey, onKeyPressed, }) => {
-    const handleKeydown = React.useCallback((evt) => {
-        if (disabled)
-            return;
-        if (evt.key === inputKey) {
-            onKeyPressed();
-        }
-    }, [disabled, inputKey, onKeyPressed]);
     React.useEffect(() => {
+        const handleKeydown = (evt) => {
+            if (disabled || evt.key !== inputKey)
+                return;
+            onKeyPressed();
+        };
         document.addEventListener('keydown', handleKeydown);
         return () => {
             document.removeEventListener('keydown', handleKeydown);
         };
-    }, [handleKeydown]);
+    }, [disabled, inputKey, onKeyPressed]);
 };
 
 exports.useKeyboardEventListener = useKeyboardEventListener;

package/src/lib/utils/hooks/useKeyboardEventListener/useKeyboardEventListener.js

@@ -1,19 +1,17 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 const useKeyboardEventListener = ({ disabled, inputKey, onKeyPressed, }) => {
-    const handleKeydown = useCallback((evt) => {
-        if (disabled)
-            return;
-        if (evt.key === inputKey) {
-            onKeyPressed();
-        }
-    }, [disabled, inputKey, onKeyPressed]);
     useEffect(() => {
+        const handleKeydown = (evt) => {
+            if (disabled || evt.key !== inputKey)
+                return;
+            onKeyPressed();
+        };
         document.addEventListener('keydown', handleKeydown);
         return () => {
             document.removeEventListener('keydown', handleKeydown);
         };
-    }, [handleKeydown]);
+    }, [disabled, inputKey, onKeyPressed]);
 };
 
 export { useKeyboardEventListener };

package/src/lib/utils/hooks/useRpcProviders/useRpcProviders.cjs

@@ -18,45 +18,23 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 
 const useRpcProviders = ({ networkConfigurations, }) => {
-    const [providers, setProviders] = React.useState();
-    const [evmDefaultProvider, setEvmDefaultProvider] = React.useState();
-    const [solanaDefaultProvider, setSolanaDefaultProvider] = React.useState();
-    React.useEffect(() => {
+    let providers, evmDefaultProvider, solanaDefaultProvider;
+    if (networkConfigurations) {
         try {
-            if (networkConfigurations) {
-                setProviders(rpcProviders.ChainRpcProviders.getProviders(networkConfigurations));
-            }
+            providers = rpcProviders.ChainRpcProviders.getProviders(networkConfigurations);
+            evmDefaultProvider = rpcProviders.ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, 1);
+            solanaDefaultProvider = rpcProviders.ChainRpcProviders.getSolanaRpcProviderByChainId(networkConfigurations, '101');
         }
         catch (error) {
             logger.logger.error(error);
         }
-    }, [networkConfigurations]);
+    }
     const getEvmRpcProviderByChainId = React.useCallback((chainId) => {
         if (!networkConfigurations) {
             return undefined;
         }
         return rpcProviders.ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, chainId);
     }, [networkConfigurations]);
-    React.useEffect(() => {
-        try {
-            if (networkConfigurations) {
-                setEvmDefaultProvider(rpcProviders.ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, 1));
-            }
-        }
-        catch (error) {
-            logger.logger.error(error);
-        }
-    }, [networkConfigurations]);
-    React.useEffect(() => {
-        try {
-            if (networkConfigurations) {
-                setSolanaDefaultProvider(rpcProviders.ChainRpcProviders.getSolanaRpcProviderByChainId(networkConfigurations, '101'));
-            }
-        }
-        catch (error) {
-            logger.logger.error(error);
-        }
-    }, [networkConfigurations]);
     return {
         evmDefaultProvider,
         evmProviders: providers === null || providers === void 0 ? void 0 : providers.evm,

package/src/lib/utils/hooks/useRpcProviders/useRpcProviders.d.ts

@@ -2,7 +2,6 @@ import { NetworkConfigurationMap } from '@dynamic-labs/types';
 import { DynamicRPCProviders } from '../../../shared';
 type Props = {
     networkConfigurations: NetworkConfigurationMap | undefined;
-    networkId: string | number | undefined;
 };
 export declare const useRpcProviders: ({ networkConfigurations, }: Props) => DynamicRPCProviders;
 export {};

package/src/lib/utils/hooks/useRpcProviders/useRpcProviders.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { ChainRpcProviders } from '@dynamic-labs/rpc-providers';
 import '@dynamic-labs/sdk-api';
 import { logger } from '../../../shared/logger.js';
@@ -14,45 +14,23 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 
 const useRpcProviders = ({ networkConfigurations, }) => {
-    const [providers, setProviders] = useState();
-    const [evmDefaultProvider, setEvmDefaultProvider] = useState();
-    const [solanaDefaultProvider, setSolanaDefaultProvider] = useState();
-    useEffect(() => {
+    let providers, evmDefaultProvider, solanaDefaultProvider;
+    if (networkConfigurations) {
         try {
-            if (networkConfigurations) {
-                setProviders(ChainRpcProviders.getProviders(networkConfigurations));
-            }
+            providers = ChainRpcProviders.getProviders(networkConfigurations);
+            evmDefaultProvider = ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, 1);
+            solanaDefaultProvider = ChainRpcProviders.getSolanaRpcProviderByChainId(networkConfigurations, '101');
         }
         catch (error) {
             logger.error(error);
         }
-    }, [networkConfigurations]);
+    }
     const getEvmRpcProviderByChainId = useCallback((chainId) => {
         if (!networkConfigurations) {
             return undefined;
         }
         return ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, chainId);
     }, [networkConfigurations]);
-    useEffect(() => {
-        try {
-            if (networkConfigurations) {
-                setEvmDefaultProvider(ChainRpcProviders.getEvmProviderByChainId(networkConfigurations, 1));
-            }
-        }
-        catch (error) {
-            logger.error(error);
-        }
-    }, [networkConfigurations]);
-    useEffect(() => {
-        try {
-            if (networkConfigurations) {
-                setSolanaDefaultProvider(ChainRpcProviders.getSolanaRpcProviderByChainId(networkConfigurations, '101'));
-            }
-        }
-        catch (error) {
-            logger.error(error);
-        }
-    }, [networkConfigurations]);
     return {
         evmDefaultProvider,
         evmProviders: providers === null || providers === void 0 ? void 0 : providers.evm,

package/src/lib/utils/hooks/useTimeout/useTimeout.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs');
+
+// https://usehooks-ts.com/react-hook/use-timeout
+const useTimeout = (callback, delay) => {
+    const savedCallback = React.useRef(callback);
+    // Remember the latest callback if it changes.
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the timeout.
+    React.useEffect(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (!delay && delay !== 0) {
+            return;
+        }
+        const id = setTimeout(() => savedCallback.current(), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+};
+
+exports.useTimeout = useTimeout;

package/src/lib/utils/hooks/useTimeout/useTimeout.js

@@ -0,0 +1,23 @@
+import { useRef, useEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+// https://usehooks-ts.com/react-hook/use-timeout
+const useTimeout = (callback, delay) => {
+    const savedCallback = useRef(callback);
+    // Remember the latest callback if it changes.
+    useIsomorphicLayoutEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the timeout.
+    useEffect(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (!delay && delay !== 0) {
+            return;
+        }
+        const id = setTimeout(() => savedCallback.current(), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+};
+
+export { useTimeout };

package/src/lib/utils/hooks/useTransition/useTransition.cjs

@@ -10,22 +10,22 @@ var useTransitionEvents = require('../useTransitionEvents/useTransitionEvents.cj
 const DEFAULT_DURATION = 100;
 // The hook inspired by https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js
 const useTransition = (_a) => {
-    var { isShown, inDuration, outDuration, duration = DEFAULT_DURATION, timeout, inTimeout, outTimeout, animateOnMount = true } = _a, events = _tslib.__rest(_a, ["isShown", "inDuration", "outDuration", "duration", "timeout", "inTimeout", "outTimeout", "animateOnMount"]);
-    const initialState = animateOnMount ? 'UNMOUNT' : 'ENTERED';
+    var { isShown, inDuration, outDuration, duration = DEFAULT_DURATION, delay, inDelay, outDelay, animateOnMount = true } = _a, events = _tslib.__rest(_a, ["isShown", "inDuration", "outDuration", "duration", "delay", "inDelay", "outDelay", "animateOnMount"]);
+    const initialStage = animateOnMount ? 'UNMOUNT' : 'ENTERED';
     const animationFrameTimeoutIdRef = React.useRef({ id: -1 });
     const timeoutIdRef = React.useRef({ id: -1 });
-    const [stage, setStage] = React.useState(initialState);
+    const [stage, setStage] = React.useState(initialStage);
     const [mount, setMount] = React.useState(!animateOnMount);
     const [currentDuration, setCurrentDuration] = React.useState(duration);
-    const conditionTimeout = (callback, timeout) => {
-        if (timeout) {
-            timeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(callback, timeout);
+    const performTransition = (runTransition, transitionDelay) => {
+        if (transitionDelay) {
+            timeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(runTransition, transitionDelay);
         }
         else {
-            callback();
+            runTransition();
         }
     };
-    const performEnter = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const performEnter = React.useCallback(() => {
         const animationDuration = inDuration || duration;
         setCurrentDuration(animationDuration);
         setMount(true);
@@ -33,8 +33,8 @@ const useTransition = (_a) => {
         animationFrameTimeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(() => {
             setStage('ENTERED');
         }, animationDuration);
-    }), [duration, inDuration]);
-    const performExit = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    }, [duration, inDuration]);
+    const performExit = React.useCallback(() => {
         const animationDuration = outDuration || duration;
         setCurrentDuration(animationDuration);
         setStage('EXITING');
@@ -42,29 +42,21 @@ const useTransition = (_a) => {
             setMount(false);
             setStage('UNMOUNT');
         }, animationDuration);
-    }), [duration, outDuration]);
+    }, [duration, outDuration]);
     React.useEffect(() => {
         if (isShown && stage !== 'ENTERED') {
-            const enterTimeout = timeout || inTimeout;
-            conditionTimeout(performEnter, enterTimeout);
+            const enterDelay = inDelay || delay;
+            performTransition(performEnter, enterDelay);
         }
         else if (!isShown && stage !== 'UNMOUNT') {
-            const exitTimeout = timeout || outTimeout;
-            conditionTimeout(performExit, exitTimeout);
+            const exitDelay = outDelay || delay;
+            performTransition(performExit, exitDelay);
         }
         return () => {
             animationFrameTimeout.clearAnimationFrameTimeout(animationFrameTimeoutIdRef.current);
             animationFrameTimeout.clearAnimationFrameTimeout(timeoutIdRef.current);
         };
-    }, [
-        inTimeout,
-        outTimeout,
-        performEnter,
-        performExit,
-        isShown,
-        timeout,
-        stage,
-    ]);
+    }, [inDelay, outDelay, performEnter, performExit, isShown, delay, stage]);
     useTransitionEvents.useTransitionEvents(stage, events);
     return { currentDuration, mount, stage };
 };

package/src/lib/utils/hooks/useTransition/useTransition.d.ts

@@ -8,11 +8,11 @@ export type UseTransitionProps = {
     animateOnMount?: boolean;
     duration?: number;
     inDuration?: number;
-    inTimeout?: number;
+    inDelay?: number;
     isShown?: boolean;
     outDuration?: number;
-    outTimeout?: number;
-    timeout?: number;
+    outDelay?: number;
+    delay?: number;
 };
 export type Props = UseTransitionProps & UseTransitionEvents;
 export type TransitionStage = 'ENTERED' | 'ENTERING' | 'EXITING' | 'UNMOUNT';