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

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

@@ -0,0 +1,139 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import { isSameAddress } 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 orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+    const [loadingNetwork, setLoadingNetwork] = useState(true);
+    const [network, setNetwork] = useState(undefined);
+    useEffect(() => {
+        const fetchNetwork = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                if (!primaryWallet)
+                    return;
+                const network = yield primaryWallet.connector.getNetwork();
+                setNetwork(network);
+            }
+            catch (error) {
+                /* istanbul ignore next */
+                logger.debug(error);
+            }
+            finally {
+                setLoadingNetwork(false);
+            }
+        });
+        fetchNetwork();
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
+    useEffect(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        const seen = new Set();
+        seen.add(primaryWallet.connector.name);
+        primaryWallet.connector.setupEventListeners({
+            onAccountChange: (accounts) => __awaiter(void 0, void 0, void 0, function* () {
+                const [newAddress] = accounts;
+                yield computeConnectedStateForWallets();
+                if (isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+                    setMultiWalletWidgetState('idle');
+                }
+                else if (!multiWallet) {
+                    yield handleLogOut();
+                }
+                else if (multiWalletWidgetState === 'awaiting_account_switch') {
+                    const linkedSecondaryWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
+                    // this means the user is linking a new account, so we need proof of ownership...
+                    if (!linkedSecondaryWallet) {
+                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+                        setSelectedWalletConnector(primaryWallet.connector);
+                        return;
+                    }
+                    // ...otherwise, the user is switching primary accounts betweeen the same wallet
+                    setPrimaryWalletId(linkedSecondaryWallet.id);
+                    setMultiWalletWidgetState('idle');
+                    yield computeConnectedStateForWallets();
+                }
+                else if (multiWalletWidgetState === 'idle' &&
+                    secondaryWallets.some((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain))) {
+                    setMultiWalletWidgetState('detected_known_secondary_wallet');
+                }
+                else if (multiWalletWidgetState === 'idle' &&
+                    !secondaryWallets.some((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain))) {
+                    if (user) {
+                        setMultiWalletWidgetState('detected_new_wallet');
+                        setSelectedWalletConnector(primaryWallet.connector);
+                        return;
+                    }
+                    connectWalletByAddressAndChain(primaryWallet.connector.name, newAddress, primaryWallet.chain);
+                }
+                else {
+                    logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+                    setMultiWalletWidgetState('idle');
+                }
+            }),
+            onChainChange: (chain) => __awaiter(void 0, void 0, void 0, function* () {
+                /* istanbul ignore next */
+                setNetwork(parseInt(chain));
+            }),
+            onDisconnect: handleLogOut,
+        });
+        if (selectedWalletConnector && !seen.has(selectedWalletConnector.name)) {
+            seen.add(selectedWalletConnector.name);
+            selectedWalletConnector.setupEventListeners({
+                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                    if (multiWalletWidgetState === 'awaiting_account_switch') {
+                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+                    }
+                    yield computeConnectedStateForWallets();
+                }),
+                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield computeConnectedStateForWallets();
+                }),
+            });
+        }
+        for (const wallet of secondaryWallets) {
+            if (seen.has(wallet.connector.name)) {
+                continue;
+            }
+            seen.add(wallet.connector.name);
+            wallet.connector.setupEventListeners({
+                onAccountChange: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield computeConnectedStateForWallets();
+                }),
+                onDisconnect: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield computeConnectedStateForWallets();
+                }),
+            });
+        }
+        return () => {
+            primaryWallet.connector.teardownEventListeners();
+            for (const wallet of secondaryWallets) {
+                wallet.connector.teardownEventListeners();
+            }
+        };
+        // justification: we don't want to setup event listeners more than needed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        user,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address,
+        primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id,
+        multiWalletWidgetState,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        orderedSecondaryWalletAddresses(secondaryWallets).join(),
+        selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
+    ]);
+    return {
+        loadingNetwork,
+        network,
+        setNetwork,
+    };
+};
+
+export { useWalletEventListeners };

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

@@ -0,0 +1,143 @@
+'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');
+var MockContext = require('../../../context/MockContext/MockContext.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var ErrorContext = require('../../../context/ErrorContext/ErrorContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+require('../../constants/colors.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+var requiresTwoStepAuthentication = require('../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs');
+var useConnectAndSign = require('../authenticationHooks/useConnectAndSign/useConnectAndSign.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../shared/consts/index.cjs');
+var useConnectAndSignSplitSteps = require('../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
+var isSelectedWalletAlreadyConnected = require('../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.cjs');
+
+const useWalletItemActions = () => {
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { mockedSDK } = MockContext.useMockContext();
+    const { setError } = ErrorContext.useErrorContext();
+    const { setView } = ViewContext.useViewContext();
+    const { onlyConnectUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
+    const connectAndSignWallet = useConnectAndSign.useConnectAndSign();
+    const setWalletConnectorAndWalletColor = React.useCallback((walletConnector) => {
+        setSelectedWalletConnector(walletConnector);
+    }, [setSelectedWalletConnector]);
+    const handleCustodialWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const twoStepAuthentication = requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector);
+        if (twoStepAuthentication) {
+            setWalletConnectorAndWalletColor(walletConnector);
+            yield onlyConnectUser({
+                walletConnector,
+            });
+        }
+        else {
+            setWalletConnectorAndWalletColor(walletConnector);
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+        }
+        setView('pending-signature');
+    });
+    const handleMobileWalletClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        onlyConnectUser({ walletConnector });
+    });
+    const handleInstalledExtensionClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+    });
+    const handleUninstalledClick = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        if (!walletConnector.canConnectViaQrCode) {
+            setView('no-qr-not-installed');
+        }
+        else {
+            connectAndSignWallet({
+                fetchPublicAddressOpts: {
+                    onDesktopUri: (uri) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                        setDesktopUri(uri);
+                    }),
+                    onDisplayUri: (uri) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                        setQrcodeUri(uri);
+                    }),
+                },
+                walletConnector,
+            });
+            setView('qr-code');
+        }
+        setError(undefined);
+    });
+    const handleAlreadyConnectedWallet = (walletConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        setShowAuthFlow(false);
+        setWalletConnectorAndWalletColor(walletConnector);
+    });
+    const openWallet = (walletKey, handlers) => {
+        const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
+        const wallet = wallets.find((wallet) => wallet.key === walletKey);
+        if (!wallet)
+            return;
+        if (multiWallet.isMobile()) {
+            openMobileWallet(wallet.walletConnector);
+        }
+        else if (wallet.walletConnector.canConnectViaCustodialService) {
+            openCustodialWallet(wallet.walletConnector);
+        }
+        else if (wallet.isInstalledOnBrowser) {
+            openExtensionWallet(wallet.walletConnector);
+        }
+    };
+    const handleWalletItemClick = (wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { walletConnector, isInstalledOnBrowser } = wallet;
+        if (mockedSDK)
+            return;
+        if (walletConnector.connectedChain === 'FLOW') {
+            yield ((_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector));
+        }
+        if (isSelectedWalletAlreadyConnected.isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+            walletConnector.connectedChain !== 'FLOW') {
+            // wallet is already connected
+            handleAlreadyConnectedWallet(walletConnector);
+        }
+        else if (walletConnector.canConnectViaCustodialService) {
+            // providers like blocto and dapper
+            handleCustodialWalletClick(walletConnector);
+        }
+        else if (multiWallet.isMobile()) {
+            // mobile wallets
+            if (walletConnector.name === 'WalletConnect') {
+                setView('wallet-connect-mobile-wallets-list');
+            }
+            else {
+                handleMobileWalletClick(walletConnector);
+            }
+        }
+        else if (isInstalledOnBrowser) {
+            // browser extensions or injected wallets
+            handleInstalledExtensionClick(walletConnector);
+        }
+        else {
+            // wallet requiring a qr code (wallet connect/coinbase wallet)
+            handleUninstalledClick(walletConnector);
+        }
+    });
+    return {
+        handleAlreadyConnectedWallet,
+        handleCustodialWalletClick,
+        handleInstalledExtensionClick,
+        handleMobileWalletClick,
+        handleUninstalledClick,
+        handleWalletItemClick,
+        openWallet,
+    };
+};
+
+exports.useWalletItemActions = useWalletItemActions;

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

@@ -0,0 +1,139 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useCallback } from 'react';
+import { isMobile } from '@dynamic-labs/multi-wallet';
+import { useMockContext } from '../../../context/MockContext/MockContext.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import '../../constants/colors.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import { requiresTwoStepAuthentication } from '../../functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.js';
+import { useConnectAndSign } from '../authenticationHooks/useConnectAndSign/useConnectAndSign.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../shared/consts/index.js';
+import { useConnectAndSignSplitSteps } from '../authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
+import { isSelectedWalletAlreadyConnected } from '../../functions/isSelectedWalletAlreadyConnected/isSelectedWalletAlreadyConnected.js';
+
+const useWalletItemActions = () => {
+    const { setMultiWalletWidgetState, setShowAuthFlow, setSelectedWalletConnector, wallets, setQrcodeUri, setDesktopUri, user, connectedWallets, } = useInternalDynamicContext();
+    const { mockedSDK } = useMockContext();
+    const { setError } = useErrorContext();
+    const { setView } = useViewContext();
+    const { onlyConnectUser } = useConnectAndSignSplitSteps();
+    const connectAndSignWallet = useConnectAndSign();
+    const setWalletConnectorAndWalletColor = useCallback((walletConnector) => {
+        setSelectedWalletConnector(walletConnector);
+    }, [setSelectedWalletConnector]);
+    const handleCustodialWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        const twoStepAuthentication = requiresTwoStepAuthentication(walletConnector);
+        if (twoStepAuthentication) {
+            setWalletConnectorAndWalletColor(walletConnector);
+            yield onlyConnectUser({
+                walletConnector,
+            });
+        }
+        else {
+            setWalletConnectorAndWalletColor(walletConnector);
+            setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+        }
+        setView('pending-signature');
+    });
+    const handleMobileWalletClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        onlyConnectUser({ walletConnector });
+    });
+    const handleInstalledExtensionClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+    });
+    const handleUninstalledClick = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        setWalletConnectorAndWalletColor(walletConnector);
+        if (!walletConnector.canConnectViaQrCode) {
+            setView('no-qr-not-installed');
+        }
+        else {
+            connectAndSignWallet({
+                fetchPublicAddressOpts: {
+                    onDesktopUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
+                        setDesktopUri(uri);
+                    }),
+                    onDisplayUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
+                        setQrcodeUri(uri);
+                    }),
+                },
+                walletConnector,
+            });
+            setView('qr-code');
+        }
+        setError(undefined);
+    });
+    const handleAlreadyConnectedWallet = (walletConnector) => __awaiter(void 0, void 0, void 0, function* () {
+        setMultiWalletWidgetState('awaiting_account_switch', 'linking_new_wallet');
+        setShowAuthFlow(false);
+        setWalletConnectorAndWalletColor(walletConnector);
+    });
+    const openWallet = (walletKey, handlers) => {
+        const { openMobileWallet = handleMobileWalletClick, openCustodialWallet = handleCustodialWalletClick, openExtensionWallet = handleInstalledExtensionClick, } = handlers || {};
+        const wallet = wallets.find((wallet) => wallet.key === walletKey);
+        if (!wallet)
+            return;
+        if (isMobile()) {
+            openMobileWallet(wallet.walletConnector);
+        }
+        else if (wallet.walletConnector.canConnectViaCustodialService) {
+            openCustodialWallet(wallet.walletConnector);
+        }
+        else if (wallet.isInstalledOnBrowser) {
+            openExtensionWallet(wallet.walletConnector);
+        }
+    };
+    const handleWalletItemClick = (wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { walletConnector, isInstalledOnBrowser } = wallet;
+        if (mockedSDK)
+            return;
+        if (walletConnector.connectedChain === 'FLOW') {
+            yield ((_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector));
+        }
+        if (isSelectedWalletAlreadyConnected(connectedWallets, walletConnector, user) &&
+            walletConnector.connectedChain !== 'FLOW') {
+            // wallet is already connected
+            handleAlreadyConnectedWallet(walletConnector);
+        }
+        else if (walletConnector.canConnectViaCustodialService) {
+            // providers like blocto and dapper
+            handleCustodialWalletClick(walletConnector);
+        }
+        else if (isMobile()) {
+            // mobile wallets
+            if (walletConnector.name === 'WalletConnect') {
+                setView('wallet-connect-mobile-wallets-list');
+            }
+            else {
+                handleMobileWalletClick(walletConnector);
+            }
+        }
+        else if (isInstalledOnBrowser) {
+            // browser extensions or injected wallets
+            handleInstalledExtensionClick(walletConnector);
+        }
+        else {
+            // wallet requiring a qr code (wallet connect/coinbase wallet)
+            handleUninstalledClick(walletConnector);
+        }
+    });
+    return {
+        handleAlreadyConnectedWallet,
+        handleCustodialWalletClick,
+        handleInstalledExtensionClick,
+        handleMobileWalletClick,
+        handleUninstalledClick,
+        handleWalletItemClick,
+        openWallet,
+    };
+};
+
+export { useWalletItemActions };

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SignMessageConfirmationModal = require('../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs');
+var TransactionConfirmationModal = require('../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs');
+var useConfirmationModal = require('../useConfirmationModal/useConfirmationModal.cjs');
+require('../../constants/colors.cjs');
+require('@dynamic-labs/multi-wallet');
+var getAuthToken = require('../../functions/getAuthToken/getAuthToken.cjs');
+require('@dynamic-labs/sdk-api');
+
+const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
+    const fakeSignerRef = React.useRef('disabled');
+    const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal.useConfirmationModal({
+        elementId: 'dynamic-send-transaction',
+    });
+    const { modal, open: openSignMessage } = useConfirmationModal.useConfirmationModal({
+        elementId: 'dynamic-sign-message',
+    });
+    const signMessage = React.useCallback(({ message, handler }) => {
+        const jwt = getAuthToken.getAuthToken();
+        if (!jwt && fakeSignerRef.current === 'enabled') {
+            fakeSignerRef.current = 'disabled';
+            return handler(message);
+        }
+        return openSignMessage((resolve, reject) => (jsxRuntime.jsx(SignMessageConfirmationModal.SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    const sendTransaction = React.useCallback(({ transaction, handler, provider }) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        return openSendTransaction((resolve, reject) => (jsxRuntime.jsx(TransactionConfirmationModal.TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
+    const enableInternalSign = React.useCallback(() => {
+        fakeSignerRef.current = 'enabled';
+    }, []);
+    const walletUiUtils = React.useMemo(() => ({
+        enableInternalSign,
+        sendTransaction,
+        signMessage,
+    }), [signMessage, enableInternalSign, sendTransaction]);
+    return React.useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
+};
+
+exports.useWalletUiUtils = useWalletUiUtils;

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

@@ -0,0 +1,42 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useMemo } from 'react';
+import { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js';
+import { TransactionConfirmationModal } from '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.js';
+import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.js';
+import '../../constants/colors.js';
+import '@dynamic-labs/multi-wallet';
+import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.js';
+import '@dynamic-labs/sdk-api';
+
+const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
+    const fakeSignerRef = useRef('disabled');
+    const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal({
+        elementId: 'dynamic-send-transaction',
+    });
+    const { modal, open: openSignMessage } = useConfirmationModal({
+        elementId: 'dynamic-sign-message',
+    });
+    const signMessage = useCallback(({ message, handler }) => {
+        const jwt = getAuthToken();
+        if (!jwt && fakeSignerRef.current === 'enabled') {
+            fakeSignerRef.current = 'disabled';
+            return handler(message);
+        }
+        return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    const sendTransaction = useCallback(({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
+    const enableInternalSign = useCallback(() => {
+        fakeSignerRef.current = 'enabled';
+    }, []);
+    const walletUiUtils = useMemo(() => ({
+        enableInternalSign,
+        sendTransaction,
+        signMessage,
+    }), [signMessage, enableInternalSign, sendTransaction]);
+    return useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
+};
+
+export { useWalletUiUtils };

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+var data = require('../../../views/WalletList/data.cjs');
+var getMagicLinkApiKeyFromProviders = require('./utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.cjs');
+
+const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, vendorCredentials, walletUiUtils, magicLinkConfig, }) => {
+    const [wallets, setWallets] = React.useState([]);
+    React.useEffect(() => {
+        const getWalletList = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (projectSettings) {
+                const magicLinkApiKey = getMagicLinkApiKeyFromProviders.getMagicLinkApiKeyFromProviders((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []);
+                const installedWallets = yield data.getInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const notInstalledWallets = yield data.getNotInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const unfilteredWallets = [...installedWallets, ...notInstalledWallets];
+                setWallets(unfilteredWallets);
+            }
+        });
+        getWalletList();
+    }, [
+        projectSettings,
+        appLogoUrl,
+        appName,
+        vendorCredentials,
+        networkConfigurations,
+    ]);
+    return { wallets };
+};
+
+exports.useWallets = useWallets;

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

@@ -0,0 +1,47 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.js';
+import { getMagicLinkApiKeyFromProviders } from './utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.js';
+
+const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, vendorCredentials, walletUiUtils, magicLinkConfig, }) => {
+    const [wallets, setWallets] = useState([]);
+    useEffect(() => {
+        const getWalletList = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (projectSettings) {
+                const magicLinkApiKey = getMagicLinkApiKeyFromProviders((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []);
+                const installedWallets = yield getInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const notInstalledWallets = yield getNotInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const unfilteredWallets = [...installedWallets, ...notInstalledWallets];
+                setWallets(unfilteredWallets);
+            }
+        });
+        getWalletList();
+    }, [
+        projectSettings,
+        appLogoUrl,
+        appName,
+        vendorCredentials,
+        networkConfigurations,
+    ]);
+    return { wallets };
+};
+
+export { useWallets };