@dynamic-labs/sdk-react-core 0.16.0 → 0.16.2

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var handleUnlinkHelper = require('../../functions/handleUnlinkHelper/handleUnlinkHelper.cjs');
+var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletName.cjs');
+
+const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
+    const callback = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (walletId === primaryWalletId)
+            return;
+        const newUser = yield handleUnlinkHelper.handleUnlinkHelper({
+            environmentId,
+            primaryWalletId,
+            walletId,
+        });
+        if (newUser) {
+            setUser(newUser);
+        }
+        const wallet = secondaryWallets.find((w) => w.id === walletId);
+        const numberOfLinkedWallets = verifiedCredentials.filter((account) => account.walletName &&
+            isSameWalletName.isSameWalletName(account.walletName, (wallet === null || wallet === void 0 ? void 0 : wallet.connector.name) || '')).length;
+        // If there's only 1, it's the one being removed and we can kill the session
+        if (numberOfLinkedWallets === 1) {
+            yield ((_b = wallet === null || wallet === void 0 ? void 0 : (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a));
+        }
+    }), [
+        primaryWalletId,
+        environmentId,
+        secondaryWallets,
+        setUser,
+        verifiedCredentials,
+    ]);
+    return callback;
+};
+
+exports.useHandleUnlinkWallet = useHandleUnlinkWallet;

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

@@ -0,0 +1,36 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useCallback } from 'react';
+import { handleUnlinkHelper } from '../../functions/handleUnlinkHelper/handleUnlinkHelper.js';
+import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletName.js';
+
+const useHandleUnlinkWallet = ({ verifiedCredentials, environmentId, primaryWalletId, secondaryWallets, setUser, }) => {
+    const callback = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (walletId === primaryWalletId)
+            return;
+        const newUser = yield handleUnlinkHelper({
+            environmentId,
+            primaryWalletId,
+            walletId,
+        });
+        if (newUser) {
+            setUser(newUser);
+        }
+        const wallet = secondaryWallets.find((w) => w.id === walletId);
+        const numberOfLinkedWallets = verifiedCredentials.filter((account) => account.walletName &&
+            isSameWalletName(account.walletName, (wallet === null || wallet === void 0 ? void 0 : wallet.connector.name) || '')).length;
+        // If there's only 1, it's the one being removed and we can kill the session
+        if (numberOfLinkedWallets === 1) {
+            yield ((_b = wallet === null || wallet === void 0 ? void 0 : (_a = wallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a));
+        }
+    }), [
+        primaryWalletId,
+        environmentId,
+        secondaryWallets,
+        setUser,
+        verifiedCredentials,
+    ]);
+    return callback;
+};
+
+export { useHandleUnlinkWallet };

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var index = require('../../functions/getEnabledKYC/index.cjs');
+var useOnlyConnectedMode = require('../useOnlyConnectedMode/useOnlyConnectedMode.cjs');
+
+const useKYCFlag = () => {
+    var _a;
+    const isOnlyConnected = useOnlyConnectedMode.useOnlyConnectedMode();
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const hasKYCSettings = (_a = index.getEnabledKYC(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc)) === null || _a === void 0 ? void 0 : _a.length;
+    return !isOnlyConnected && Boolean(hasKYCSettings);
+};
+
+exports.useKYCFlag = useKYCFlag;

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

@@ -0,0 +1,13 @@
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { getEnabledKYC } from '../../functions/getEnabledKYC/index.js';
+import { useOnlyConnectedMode } from '../useOnlyConnectedMode/useOnlyConnectedMode.js';
+
+const useKYCFlag = () => {
+    var _a;
+    const isOnlyConnected = useOnlyConnectedMode();
+    const { projectSettings } = useInternalDynamicContext();
+    const hasKYCSettings = (_a = getEnabledKYC(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc)) === null || _a === void 0 ? void 0 : _a.length;
+    return !isOnlyConnected && Boolean(hasKYCSettings);
+};
+
+export { useKYCFlag };

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+var isSSR = require('../../../shared/utils/functions/isSSR/isSSR.cjs');
+require('../../constants/colors.cjs');
+require('../../../shared/consts/index.cjs');
+var useOnlyConnectedMode = require('../useOnlyConnectedMode/useOnlyConnectedMode.cjs');
+
+const isMultiWalletEnabledInURL = () => {
+    const flag = 'multiwallet.widget';
+    const searchParams = new URLSearchParams(!isSSR.isSSR() ? window.location.search : '');
+    // by default, enable the widget
+    if (!searchParams.has(flag)) {
+        return true;
+    }
+    return searchParams.get(flag) === 'true';
+};
+const useMultiWalletFlag = () => {
+    const { multiWallet: isMultiWalletEnabled } = useInternalDynamicContext.useInternalDynamicContext();
+    const isOnlyConnected = useOnlyConnectedMode.useOnlyConnectedMode();
+    if (isOnlyConnected)
+        return false;
+    return isMultiWalletEnabled && isMultiWalletEnabledInURL();
+};
+
+exports.isMultiWalletEnabledInURL = isMultiWalletEnabledInURL;
+exports.useMultiWalletFlag = useMultiWalletFlag;

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

@@ -0,0 +1,31 @@
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { isSSR } from '../../../shared/utils/functions/isSSR/isSSR.js';
+import '../../constants/colors.js';
+import '../../../shared/consts/index.js';
+import { useOnlyConnectedMode } from '../useOnlyConnectedMode/useOnlyConnectedMode.js';
+
+const isMultiWalletEnabledInURL = () => {
+    const flag = 'multiwallet.widget';
+    const searchParams = new URLSearchParams(!isSSR() ? window.location.search : '');
+    // by default, enable the widget
+    if (!searchParams.has(flag)) {
+        return true;
+    }
+    return searchParams.get(flag) === 'true';
+};
+const useMultiWalletFlag = () => {
+    const { multiWallet: isMultiWalletEnabled } = useInternalDynamicContext();
+    const isOnlyConnected = useOnlyConnectedMode();
+    if (isOnlyConnected)
+        return false;
+    return isMultiWalletEnabled && isMultiWalletEnabledInURL();
+};
+
+export { isMultiWalletEnabledInURL, useMultiWalletFlag };

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+
+const useMutation = (mutation, options = {}) => {
+    const [state, setState] = React.useState({
+        isLoading: false,
+    });
+    const mutate = React.useCallback((variables) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        let data;
+        setState({
+            isLoading: true,
+        });
+        try {
+            const mutationResult = mutation(variables);
+            if (mutationResult instanceof Promise) {
+                data = yield mutationResult;
+            }
+            else {
+                data = mutationResult;
+            }
+            setState({
+                data,
+                isLoading: false,
+            });
+            try {
+                (_a = options === null || options === void 0 ? void 0 : options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, data, variables);
+            }
+            catch (err) {
+                multiWallet.logger.error(err);
+            }
+            return data;
+        }
+        catch (error) {
+            setState({ error: error, isLoading: false });
+            multiWallet.logger.error(error);
+            try {
+                (_b = options === null || options === void 0 ? void 0 : options.onFailure) === null || _b === void 0 ? void 0 : _b.call(options, error, variables);
+            }
+            catch (err) {
+                multiWallet.logger.error(err);
+            }
+        }
+        return undefined;
+    }), [mutation, options]);
+    return Object.assign(Object.assign({}, state), { hasData: Boolean(state.data), hasError: Boolean(state.error), mutate });
+};
+
+exports.useMutation = useMutation;

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

@@ -0,0 +1,50 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useCallback } from 'react';
+import { logger } from '@dynamic-labs/multi-wallet';
+
+const useMutation = (mutation, options = {}) => {
+    const [state, setState] = useState({
+        isLoading: false,
+    });
+    const mutate = useCallback((variables) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        let data;
+        setState({
+            isLoading: true,
+        });
+        try {
+            const mutationResult = mutation(variables);
+            if (mutationResult instanceof Promise) {
+                data = yield mutationResult;
+            }
+            else {
+                data = mutationResult;
+            }
+            setState({
+                data,
+                isLoading: false,
+            });
+            try {
+                (_a = options === null || options === void 0 ? void 0 : options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, data, variables);
+            }
+            catch (err) {
+                logger.error(err);
+            }
+            return data;
+        }
+        catch (error) {
+            setState({ error: error, isLoading: false });
+            logger.error(error);
+            try {
+                (_b = options === null || options === void 0 ? void 0 : options.onFailure) === null || _b === void 0 ? void 0 : _b.call(options, error, variables);
+            }
+            catch (err) {
+                logger.error(err);
+            }
+        }
+        return undefined;
+    }), [mutation, options]);
+    return Object.assign(Object.assign({}, state), { hasData: Boolean(state.data), hasError: Boolean(state.error), mutate });
+};
+
+export { useMutation };

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+const useOnlyConnectedMode = () => {
+    const { authMode, user } = useInternalDynamicContext.useInternalDynamicContext();
+    return authMode === 'connect-only' && !user;
+};
+
+exports.useOnlyConnectedMode = useOnlyConnectedMode;

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

@@ -0,0 +1,8 @@
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+
+const useOnlyConnectedMode = () => {
+    const { authMode, user } = useInternalDynamicContext();
+    return authMode === 'connect-only' && !user;
+};
+
+export { useOnlyConnectedMode };

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+
+const usePromise = (fetcher, deps = []) => {
+    const [state, setState] = React.useState({
+        active: false,
+    });
+    const fetch = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setState({
+            active: true,
+        });
+        try {
+            let data;
+            const fetchData = fetcher();
+            if (fetchData instanceof Promise) {
+                data = yield fetchData;
+            }
+            else {
+                data = fetchData;
+            }
+            setState({
+                active: false,
+                data,
+            });
+        }
+        catch (error) {
+            setState({
+                active: false,
+                error: error,
+            });
+        }
+    }), [setState, fetcher]);
+    React.useEffect(() => {
+        fetch();
+    }, deps);
+    return Object.assign(Object.assign({}, state), { isLoading: state.active });
+};
+
+exports.usePromise = usePromise;

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

@@ -0,0 +1,39 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useCallback, useEffect } from 'react';
+
+const usePromise = (fetcher, deps = []) => {
+    const [state, setState] = useState({
+        active: false,
+    });
+    const fetch = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        setState({
+            active: true,
+        });
+        try {
+            let data;
+            const fetchData = fetcher();
+            if (fetchData instanceof Promise) {
+                data = yield fetchData;
+            }
+            else {
+                data = fetchData;
+            }
+            setState({
+                active: false,
+                data,
+            });
+        }
+        catch (error) {
+            setState({
+                active: false,
+                error: error,
+            });
+        }
+    }), [setState, fetcher]);
+    useEffect(() => {
+        fetch();
+    }, deps);
+    return Object.assign(Object.assign({}, state), { isLoading: state.active });
+};
+
+export { usePromise };

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('../../constants/colors.cjs');
+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(() => {
+        try {
+            if (networkConfigurations) {
+                setProviders(multiWallet.getRpcProviders(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.logger.error(error);
+        }
+    }, [networkConfigurations]);
+    const getEvmRpcProviderByChainId = React.useCallback((chainId) => {
+        if (!networkConfigurations) {
+            return undefined;
+        }
+        return multiWallet.getEvmRpcProviderByChainId(networkConfigurations, chainId);
+    }, [networkConfigurations]);
+    React.useEffect(() => {
+        try {
+            if (networkConfigurations) {
+                setEvmDefaultProvider(multiWallet.getEvmDefaultRpcProvider(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.logger.error(error);
+        }
+    }, [networkConfigurations]);
+    React.useEffect(() => {
+        try {
+            if (networkConfigurations) {
+                setSolanaDefaultProvider(multiWallet.getSolanaDefaultRpcProvider(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.logger.error(error);
+        }
+    }, [networkConfigurations]);
+    return {
+        evmDefaultProvider,
+        evmProviders: providers === null || providers === void 0 ? void 0 : providers.evm,
+        getEvmRpcProviderByChainId,
+        solanaDefaultProvider,
+        solanaProviders: providers === null || providers === void 0 ? void 0 : providers.solana,
+    };
+};
+
+exports.useRpcProviders = useRpcProviders;

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

@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback } from 'react';
+import { getRpcProviders, getEvmRpcProviderByChainId, getEvmDefaultRpcProvider, getSolanaDefaultRpcProvider } from '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '../../constants/colors.js';
+import '../../../shared/consts/index.js';
+
+const useRpcProviders = ({ networkConfigurations, }) => {
+    const [providers, setProviders] = useState();
+    const [evmDefaultProvider, setEvmDefaultProvider] = useState();
+    const [solanaDefaultProvider, setSolanaDefaultProvider] = useState();
+    useEffect(() => {
+        try {
+            if (networkConfigurations) {
+                setProviders(getRpcProviders(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.error(error);
+        }
+    }, [networkConfigurations]);
+    const getEvmRpcProviderByChainId$1 = useCallback((chainId) => {
+        if (!networkConfigurations) {
+            return undefined;
+        }
+        return getEvmRpcProviderByChainId(networkConfigurations, chainId);
+    }, [networkConfigurations]);
+    useEffect(() => {
+        try {
+            if (networkConfigurations) {
+                setEvmDefaultProvider(getEvmDefaultRpcProvider(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.error(error);
+        }
+    }, [networkConfigurations]);
+    useEffect(() => {
+        try {
+            if (networkConfigurations) {
+                setSolanaDefaultProvider(getSolanaDefaultRpcProvider(networkConfigurations));
+            }
+        }
+        catch (error) {
+            logger.error(error);
+        }
+    }, [networkConfigurations]);
+    return {
+        evmDefaultProvider,
+        evmProviders: providers === null || providers === void 0 ? void 0 : providers.evm,
+        getEvmRpcProviderByChainId: getEvmRpcProviderByChainId$1,
+        solanaDefaultProvider,
+        solanaProviders: providers === null || providers === void 0 ? void 0 : providers.solana,
+    };
+};
+
+export { useRpcProviders };

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

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var animationFrameTimeout = require('../../functions/animationFrameTimeout/animationFrameTimeout.cjs');
+var useTransitionEvents = require('../useTransitionEvents/useTransitionEvents.cjs');
+
+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';
+    const animationFrameTimeoutIdRef = React.useRef({ id: -1 });
+    const timeoutIdRef = React.useRef({ id: -1 });
+    const [stage, setStage] = React.useState(initialState);
+    const [mount, setMount] = React.useState(!animateOnMount);
+    const [currentDuration, setCurrentDuration] = React.useState(duration);
+    const conditionTimeout = (callback, timeout) => {
+        if (timeout) {
+            timeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(callback, timeout);
+        }
+        else {
+            callback();
+        }
+    };
+    const performEnter = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const animationDuration = inDuration || duration;
+        setCurrentDuration(animationDuration);
+        setMount(true);
+        setStage('ENTERING');
+        animationFrameTimeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(() => {
+            setStage('ENTERED');
+        }, animationDuration);
+    }), [duration, inDuration]);
+    const performExit = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const animationDuration = outDuration || duration;
+        setCurrentDuration(animationDuration);
+        setStage('EXITING');
+        animationFrameTimeoutIdRef.current = animationFrameTimeout.animationFrameTimeout(() => {
+            setMount(false);
+            setStage('UNMOUNT');
+        }, animationDuration);
+    }), [duration, outDuration]);
+    React.useEffect(() => {
+        if (isShown && stage !== 'ENTERED') {
+            const enterTimeout = timeout || inTimeout;
+            conditionTimeout(performEnter, enterTimeout);
+        }
+        else if (!isShown && stage !== 'UNMOUNT') {
+            const exitTimeout = timeout || outTimeout;
+            conditionTimeout(performExit, exitTimeout);
+        }
+        return () => {
+            animationFrameTimeout.clearAnimationFrameTimeout(animationFrameTimeoutIdRef.current);
+            animationFrameTimeout.clearAnimationFrameTimeout(timeoutIdRef.current);
+        };
+    }, [
+        inTimeout,
+        outTimeout,
+        performEnter,
+        performExit,
+        isShown,
+        timeout,
+        stage,
+    ]);
+    useTransitionEvents.useTransitionEvents(stage, events);
+    return { currentDuration, mount, stage };
+};
+
+exports.DEFAULT_DURATION = DEFAULT_DURATION;
+exports.useTransition = useTransition;

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

@@ -0,0 +1,68 @@
+import { __rest, __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { animationFrameTimeout, clearAnimationFrameTimeout } from '../../functions/animationFrameTimeout/animationFrameTimeout.js';
+import { useTransitionEvents } from '../useTransitionEvents/useTransitionEvents.js';
+
+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 = __rest(_a, ["isShown", "inDuration", "outDuration", "duration", "timeout", "inTimeout", "outTimeout", "animateOnMount"]);
+    const initialState = animateOnMount ? 'UNMOUNT' : 'ENTERED';
+    const animationFrameTimeoutIdRef = useRef({ id: -1 });
+    const timeoutIdRef = useRef({ id: -1 });
+    const [stage, setStage] = useState(initialState);
+    const [mount, setMount] = useState(!animateOnMount);
+    const [currentDuration, setCurrentDuration] = useState(duration);
+    const conditionTimeout = (callback, timeout) => {
+        if (timeout) {
+            timeoutIdRef.current = animationFrameTimeout(callback, timeout);
+        }
+        else {
+            callback();
+        }
+    };
+    const performEnter = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const animationDuration = inDuration || duration;
+        setCurrentDuration(animationDuration);
+        setMount(true);
+        setStage('ENTERING');
+        animationFrameTimeoutIdRef.current = animationFrameTimeout(() => {
+            setStage('ENTERED');
+        }, animationDuration);
+    }), [duration, inDuration]);
+    const performExit = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const animationDuration = outDuration || duration;
+        setCurrentDuration(animationDuration);
+        setStage('EXITING');
+        animationFrameTimeoutIdRef.current = animationFrameTimeout(() => {
+            setMount(false);
+            setStage('UNMOUNT');
+        }, animationDuration);
+    }), [duration, outDuration]);
+    useEffect(() => {
+        if (isShown && stage !== 'ENTERED') {
+            const enterTimeout = timeout || inTimeout;
+            conditionTimeout(performEnter, enterTimeout);
+        }
+        else if (!isShown && stage !== 'UNMOUNT') {
+            const exitTimeout = timeout || outTimeout;
+            conditionTimeout(performExit, exitTimeout);
+        }
+        return () => {
+            clearAnimationFrameTimeout(animationFrameTimeoutIdRef.current);
+            clearAnimationFrameTimeout(timeoutIdRef.current);
+        };
+    }, [
+        inTimeout,
+        outTimeout,
+        performEnter,
+        performExit,
+        isShown,
+        timeout,
+        stage,
+    ]);
+    useTransitionEvents(stage, events);
+    return { currentDuration, mount, stage };
+};
+
+export { DEFAULT_DURATION, useTransition };