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

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

@@ -0,0 +1,167 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { DynamicError } from '@dynamic-labs/multi-wallet';
+import { verifyWallet, linkWallet } from '../../../data/api.js';
+import { storeAuthToken } from '../../functions/storeAuthToken/index.js';
+import { LAST_USED_WALLET } from '../../constants/localStorage.js';
+import '../../constants/colors.js';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import { logger } from '../../../shared/logger.js';
+import { setToLS } from '../../../shared/utils/functions/storage/setToLS.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { getVerifyArgs } from '../../functions/getVerifyArgs/getVerifyArgs.js';
+import { createUserProfile } from '../../functions/createUserProfile/createUserProfile.js';
+import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.js';
+import '@dynamic-labs/sdk-api';
+import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.js';
+import { getSiweStatement } from '../../functions/getSiweStatement/getSiweStatement.js';
+import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
+import '../../../shared/consts/index.js';
+
+// This logic is used to both verify or link a wallet
+// Since we are re-using the different screens to authenticate or link the wallet.
+// This logic is the best place to determine whether we should verify or verify and link.
+const useVerifyWallet = ({ consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, }) => {
+    const { setView } = useViewContext();
+    const { setErrorMessage, setError } = useErrorContext();
+    const { setUser, multiWalletWidgetState, debugError, multiWallet: multiWalletEnabled, appName, primaryWalletId, setCallback, setShowAuthFlow, setPrimaryWalletId, siweStatement, connectedWallet, authMode, setOnboardingOnlyJwt, authToken, loginWithEmail, } = useInternalDynamicContext();
+    // If the user is not already logged it means that we only need to verify
+    // We need this boolean for the part of the logic where we already persisted a new authToken,
+    // and need to distinguish between logic for verify or linking.
+    const verifyOnly = !authToken;
+    const generateJWT = (walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
+        let Jwt;
+        const nonce = consumeNonce();
+        if (nonce === undefined)
+            throw new DynamicError('Missing nonce');
+        const verifyArgs = yield getVerifyArgs({
+            displayTermsOfService,
+            environmentId,
+            fetchPublicAddressOpts,
+            nonce,
+            publicWalletAddress,
+            siweStatement: getSiweStatement({ appName, siweStatement }),
+            walletConnector,
+            walletProvider,
+        });
+        if (authToken === undefined || !multiWalletEnabled) {
+            Jwt = yield verifyWallet(environmentId, Object.assign(Object.assign({}, verifyArgs), { captchaToken }));
+        }
+        else {
+            Jwt = yield linkWallet(environmentId, verifyArgs, authToken);
+        }
+        if (Jwt === undefined)
+            throw new DynamicError('Could not obtain a valid JWT');
+        // TODO DYN-523: add verification here that the JWT is valid with the publicKey
+        return Jwt;
+    });
+    // Overrides the stored primary wallet id when the
+    // user logs in for the first time.
+    // Or when the user is linking an additional
+    // account on the same wallet as the primary wallet.
+    const updatePrimaryWalletId = (walletConnector, user) => {
+        const newSelectedCredentialWallet = user.verifiedCredentials.find((cred) => cred.id === user.lastVerifiedCredentialId &&
+            cred.format === 'blockchain');
+        if (newSelectedCredentialWallet) {
+            const currentPrimaryWallet = user.verifiedCredentials.find((a) => a.id === primaryWalletId);
+            if (verifyOnly ||
+                primaryWalletId === undefined ||
+                (multiWalletWidgetState === 'awaiting_signature' &&
+                    newSelectedCredentialWallet.walletName ===
+                        (currentPrimaryWallet === null || currentPrimaryWallet === void 0 ? void 0 : currentPrimaryWallet.walletName)) ||
+                ((currentPrimaryWallet === null || currentPrimaryWallet === void 0 ? void 0 : currentPrimaryWallet.chain) === 'flow' &&
+                    walletConnector.connectedChain === 'FLOW')) {
+                setPrimaryWalletId(newSelectedCredentialWallet.id);
+            }
+        }
+    };
+    const handleError = (e, walletConnector) => {
+        var _a;
+        // This is a special case where the user is trying to link a wallet
+        // and the wallet is already linked and we don't want to kill the session.
+        if (e.name === 'WalletUsedError') {
+            setShowAuthFlow(true);
+            setView('wallet-used');
+            setIsSingleWalletAccount(false);
+            if (e.code === 'reassign_wallet_error') {
+                setIsSingleWalletAccount(true);
+            }
+            return;
+        }
+        (_a = walletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(walletConnector);
+        if (e.name === 'ChainalysisError') {
+            setView('chainalysis-blocked-wallet');
+            return;
+        }
+        if (e.name === 'NoAccessError') {
+            setView('no-access');
+            return;
+        }
+        if (connectedWallet && authMode === 'connect-only') {
+            throw new DynamicError(e.message);
+        }
+        setView(loginWithEmail ? 'login-with-email-or-wallet' : 'wallet-list');
+        logger.error(e);
+        if (debugError) {
+            setError(`${e.message}\n ${e.stack}`);
+        }
+        else {
+            setErrorMessage(e.code);
+        }
+    };
+    return ({ walletConnector, fetchPublicAddressOpts, publicWalletAddress, captchaToken, }) => __awaiter(void 0, void 0, void 0, function* () {
+        const walletProvider = getWalletProvider(walletConnector);
+        const network = yield walletConnector.getNetwork();
+        const _isSupportedNetwork = isSupportedNetwork({
+            network,
+            walletConnector,
+        });
+        try {
+            const Jwt = yield generateJWT(walletConnector, walletProvider, fetchPublicAddressOpts, publicWalletAddress, captchaToken);
+            const decodedJwt = decodeJwt(Jwt);
+            if (decodedJwt === undefined)
+                throw new DynamicError('Invalid token!');
+            const user = yield createUserProfile(decodedJwt);
+            const isKycRequired = decodedJwt.missingFields.length;
+            setOnboardingOnlyJwt(Jwt);
+            setToLS(LAST_USED_WALLET, walletConnector.name);
+            updatePrimaryWalletId(walletConnector, user);
+            // Routes user to "Not Supported Network" screen if the user is not on the supported network
+            if (projectSettings &&
+                verifyOnly &&
+                !_isSupportedNetwork &&
+                !isKycRequired) {
+                const _isProgrammableNetworkSwitchSupported = isProgrammableNetworkSwitchSupported(walletConnector);
+                if (_isProgrammableNetworkSwitchSupported) {
+                    return setView('network-not-supported');
+                }
+                return setView('network-not-supported-manual');
+            }
+            // TODO: how can projectSettings be undefined?
+            if (verifyOnly && projectSettings && isKycRequired) {
+                setShowAuthFlow(true);
+                return setView('collect-user-data');
+            }
+            storeAuthToken(Jwt);
+            setOnboardingOnlyJwt(undefined);
+            setUser(user); // The user should only be set if no KYC is needed.
+            setShowAuthFlow(false);
+            /* istanbul ignore else */
+            if (verifyOnly) {
+                setCallback('authSuccess');
+            }
+            else {
+                setCallback('linkSuccess');
+            }
+        }
+        catch (e) {
+            handleError(e, walletConnector);
+        }
+    });
+};
+
+export { useVerifyWallet };

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

@@ -0,0 +1,184 @@
+'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 decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+var localStorage$1 = require('../../constants/localStorage.cjs');
+require('../../constants/colors.cjs');
+var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
+require('../../../shared/consts/index.cjs');
+var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs');
+var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletName.cjs');
+require('@dynamic-labs/sdk-api');
+var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
+
+const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, }) => {
+    const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
+    const [wallets, setWallets] = React.useState([]);
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage.useLocalStorage(localStorage$1.PRIMARY_WALLET_ID, undefined, (value) => typeof value === 'string' || typeof value === 'undefined');
+    const setPrimaryWalletId = React.useCallback((walletId) => {
+        setPrimaryWalletIdState(walletId);
+    }, [setPrimaryWalletIdState]);
+    const clearWalletStates = React.useCallback(() => {
+        setWallets([]);
+        clearPrimaryWalletId();
+    }, [clearPrimaryWalletId]);
+    const getPrimaryWallet = React.useCallback(() => {
+        const primaryWallet = wallets.find((wallet) => wallet.id === primaryWalletId);
+        if (!primaryWallet) {
+            return null;
+        }
+        return primaryWallet;
+    }, [primaryWalletId, wallets]);
+    const getSecondaryWallets = React.useCallback(() => wallets.filter((wallet) => wallet.id !== primaryWalletId), [primaryWalletId, wallets]);
+    React.useEffect(() => {
+        const decodedJwt = decodeJwt.decodeJwt(authToken);
+        // wallet state should be null while loading all the wallets or when there is no user
+        if (!availableWallets || !decodedJwt) {
+            setWallets([]);
+            return;
+        }
+        Promise.all(decodedJwt.verifiedCredentials.map((account) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const wallet = availableWallets.find((wallet) => account.walletName &&
+                isSameWalletName.isSameWalletName(wallet.name, account.walletName));
+            // this probably shouldn't happen. this would mean that the user has an account linked
+            // with wallet W, but the customer has toggled off wallet W or the chain that
+            // supports wallet W
+            /* istanbul ignore next */
+            if (!wallet)
+                return null;
+            // this is here because phantom fires a disconnect event on page load,
+            // and other wallets and chains have similar issues
+            if (account.id === primaryWalletId &&
+                shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
+                yield wallet.walletConnector.connect();
+            }
+            if (account.address && account.chain) {
+                return {
+                    address: account.address,
+                    chain: account.chain,
+                    connected: yield isWalletConnected.isWalletConnected({
+                        address: account.address,
+                        chain: account.chain,
+                        connector: wallet.walletConnector,
+                    }),
+                    connector: wallet.walletConnector,
+                    id: account.id,
+                };
+            }
+            return null;
+        }))).then((result) => {
+            setWallets(result.filter((wc) => wc !== null));
+            return null;
+        });
+    }, [availableWallets, primaryWalletId, authToken]);
+    const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWalletId)
+            return;
+        const connectionMap = {};
+        for (const wallet of wallets) {
+            connectionMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
+        }
+        setWallets((currentWallets) => currentWallets.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: connectionMap[wallet.id] }))));
+    }), [primaryWalletId, wallets]);
+    const getSelectedWallet = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const newWallet = wallets.find(({ id }) => id === walletId);
+        if (!newWallet) {
+            throw new multiWallet.DynamicError(`Wallet with id: ${walletId} not found`);
+        }
+        const connectedAccounts = yield newWallet.connector.getConnectedAccounts();
+        return { connectedAccounts, newWallet };
+    }), [wallets]);
+    const checkIfAccountChangeIsRequired = React.useCallback((primaryWallet, newPrimaryWallet) => {
+        if (!primaryWallet)
+            return;
+        /**
+         * we need to check multiWalletWidgetState here because `setPrimaryWallet` currently gets
+         * called twice: once when the user clicks "make active" and once when the user performs
+         * the expected account switch in their wallet. this will change once this PR
+         * (https://github.com/dynamic-labs/DynamicAuth/pull/550) is merged, since setting the
+         * primary wallet will be simpler, so we won't need to call `setPrimaryWallet` twice.
+         */
+        return (multiWalletWidgetState === 'idle' &&
+            isSameWalletName.isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name));
+    }, [multiWalletWidgetState]);
+    const checkIfShowQrCodeModal = React.useCallback((wallet) => !wallet.connector.isInstalledOnBrowser() &&
+        !wallet.connector.canConnectViaCustodialService, []);
+    const setPrimaryWallet = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const { newWallet: newPrimaryWallet, connectedAccounts } = yield getSelectedWallet(walletId);
+        if (!primaryWalletId) {
+            yield newPrimaryWallet.connector.connect();
+            setPrimaryWalletId(walletId);
+            return;
+        }
+        if (primaryWalletId === walletId)
+            return;
+        const primaryWallet = getPrimaryWallet();
+        if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet)) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            return;
+        }
+        if (!connectedAccounts.length) {
+            setMultiWalletWidgetState('awaiting_connection');
+            setShowQrcodeModal(checkIfShowQrCodeModal(newPrimaryWallet));
+        }
+        if (multiWallet.isEmailWalletConnector(newPrimaryWallet.connector)) {
+            const emailConnector = newPrimaryWallet.connector;
+            const email = localStorage.getItem('magic-link-email');
+            if (email) {
+                emailConnector.setEmail(email);
+            }
+        }
+        /* istanbul ignore next */
+        const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
+            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);
+            }),
+        });
+        if (publicAddress) {
+            setPrimaryWalletId(walletId);
+            setMultiWalletWidgetState('idle');
+        }
+        else {
+            logger.logger.error('Failed to connect to wallet');
+        }
+    }), [
+        checkIfAccountChangeIsRequired,
+        checkIfShowQrCodeModal,
+        getPrimaryWallet,
+        getSelectedWallet,
+        primaryWalletId,
+        setDesktopUri,
+        setMultiWalletWidgetState,
+        setPrimaryWalletId,
+        setQrcodeUri,
+    ]);
+    const walletConnectors = wallets.map((wallet) => wallet.connector);
+    return {
+        clearWalletStates,
+        computeConnectedStateForWallets,
+        getPrimaryWallet,
+        getSecondaryWallets,
+        primaryWallet: getPrimaryWallet(),
+        primaryWalletId,
+        secondaryWallets: getSecondaryWallets(),
+        setPrimaryWallet,
+        setPrimaryWalletId,
+        setShowQrcodeModal,
+        showQrcodeModal,
+        walletConnectors,
+        wallets,
+    };
+};
+
+exports.useWalletConnectors = useWalletConnectors;

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

@@ -0,0 +1,180 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useState, useCallback, useEffect } from 'react';
+import { DynamicError, isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.js';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import { PRIMARY_WALLET_ID } from '../../constants/localStorage.js';
+import '../../constants/colors.js';
+import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+import '../../../shared/consts/index.js';
+import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.js';
+import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletName.js';
+import '@dynamic-labs/sdk-api';
+import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
+
+const useWalletConnectors = ({ authToken, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, }) => {
+    const [showQrcodeModal, setShowQrcodeModal] = useState(false);
+    const [wallets, setWallets] = useState([]);
+    const [primaryWalletId, setPrimaryWalletIdState, clearPrimaryWalletId] = useLocalStorage(PRIMARY_WALLET_ID, undefined, (value) => typeof value === 'string' || typeof value === 'undefined');
+    const setPrimaryWalletId = useCallback((walletId) => {
+        setPrimaryWalletIdState(walletId);
+    }, [setPrimaryWalletIdState]);
+    const clearWalletStates = useCallback(() => {
+        setWallets([]);
+        clearPrimaryWalletId();
+    }, [clearPrimaryWalletId]);
+    const getPrimaryWallet = useCallback(() => {
+        const primaryWallet = wallets.find((wallet) => wallet.id === primaryWalletId);
+        if (!primaryWallet) {
+            return null;
+        }
+        return primaryWallet;
+    }, [primaryWalletId, wallets]);
+    const getSecondaryWallets = useCallback(() => wallets.filter((wallet) => wallet.id !== primaryWalletId), [primaryWalletId, wallets]);
+    useEffect(() => {
+        const decodedJwt = decodeJwt(authToken);
+        // wallet state should be null while loading all the wallets or when there is no user
+        if (!availableWallets || !decodedJwt) {
+            setWallets([]);
+            return;
+        }
+        Promise.all(decodedJwt.verifiedCredentials.map((account) => __awaiter(void 0, void 0, void 0, function* () {
+            const wallet = availableWallets.find((wallet) => account.walletName &&
+                isSameWalletName(wallet.name, account.walletName));
+            // this probably shouldn't happen. this would mean that the user has an account linked
+            // with wallet W, but the customer has toggled off wallet W or the chain that
+            // supports wallet W
+            /* istanbul ignore next */
+            if (!wallet)
+                return null;
+            // this is here because phantom fires a disconnect event on page load,
+            // and other wallets and chains have similar issues
+            if (account.id === primaryWalletId &&
+                shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
+                yield wallet.walletConnector.connect();
+            }
+            if (account.address && account.chain) {
+                return {
+                    address: account.address,
+                    chain: account.chain,
+                    connected: yield isWalletConnected({
+                        address: account.address,
+                        chain: account.chain,
+                        connector: wallet.walletConnector,
+                    }),
+                    connector: wallet.walletConnector,
+                    id: account.id,
+                };
+            }
+            return null;
+        }))).then((result) => {
+            setWallets(result.filter((wc) => wc !== null));
+            return null;
+        });
+    }, [availableWallets, primaryWalletId, authToken]);
+    const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!primaryWalletId)
+            return;
+        const connectionMap = {};
+        for (const wallet of wallets) {
+            connectionMap[wallet.id] = yield isWalletConnected(wallet);
+        }
+        setWallets((currentWallets) => currentWallets.map((wallet) => (Object.assign(Object.assign({}, wallet), { connected: connectionMap[wallet.id] }))));
+    }), [primaryWalletId, wallets]);
+    const getSelectedWallet = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
+        const newWallet = wallets.find(({ id }) => id === walletId);
+        if (!newWallet) {
+            throw new DynamicError(`Wallet with id: ${walletId} not found`);
+        }
+        const connectedAccounts = yield newWallet.connector.getConnectedAccounts();
+        return { connectedAccounts, newWallet };
+    }), [wallets]);
+    const checkIfAccountChangeIsRequired = useCallback((primaryWallet, newPrimaryWallet) => {
+        if (!primaryWallet)
+            return;
+        /**
+         * we need to check multiWalletWidgetState here because `setPrimaryWallet` currently gets
+         * called twice: once when the user clicks "make active" and once when the user performs
+         * the expected account switch in their wallet. this will change once this PR
+         * (https://github.com/dynamic-labs/DynamicAuth/pull/550) is merged, since setting the
+         * primary wallet will be simpler, so we won't need to call `setPrimaryWallet` twice.
+         */
+        return (multiWalletWidgetState === 'idle' &&
+            isSameWalletName(newPrimaryWallet.connector.name, primaryWallet.connector.name));
+    }, [multiWalletWidgetState]);
+    const checkIfShowQrCodeModal = useCallback((wallet) => !wallet.connector.isInstalledOnBrowser() &&
+        !wallet.connector.canConnectViaCustodialService, []);
+    const setPrimaryWallet = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
+        const { newWallet: newPrimaryWallet, connectedAccounts } = yield getSelectedWallet(walletId);
+        if (!primaryWalletId) {
+            yield newPrimaryWallet.connector.connect();
+            setPrimaryWalletId(walletId);
+            return;
+        }
+        if (primaryWalletId === walletId)
+            return;
+        const primaryWallet = getPrimaryWallet();
+        if (checkIfAccountChangeIsRequired(primaryWallet, newPrimaryWallet)) {
+            setMultiWalletWidgetState('awaiting_account_switch', 'switching_primary');
+            return;
+        }
+        if (!connectedAccounts.length) {
+            setMultiWalletWidgetState('awaiting_connection');
+            setShowQrcodeModal(checkIfShowQrCodeModal(newPrimaryWallet));
+        }
+        if (isEmailWalletConnector(newPrimaryWallet.connector)) {
+            const emailConnector = newPrimaryWallet.connector;
+            const email = localStorage.getItem('magic-link-email');
+            if (email) {
+                emailConnector.setEmail(email);
+            }
+        }
+        /* istanbul ignore next */
+        const publicAddress = yield newPrimaryWallet.connector.fetchPublicAddress({
+            onDesktopUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
+                setDesktopUri(uri);
+            }),
+            onDisplayUri: (uri) => __awaiter(void 0, void 0, void 0, function* () {
+                setQrcodeUri(uri);
+            }),
+        });
+        if (publicAddress) {
+            setPrimaryWalletId(walletId);
+            setMultiWalletWidgetState('idle');
+        }
+        else {
+            logger.error('Failed to connect to wallet');
+        }
+    }), [
+        checkIfAccountChangeIsRequired,
+        checkIfShowQrCodeModal,
+        getPrimaryWallet,
+        getSelectedWallet,
+        primaryWalletId,
+        setDesktopUri,
+        setMultiWalletWidgetState,
+        setPrimaryWalletId,
+        setQrcodeUri,
+    ]);
+    const walletConnectors = wallets.map((wallet) => wallet.connector);
+    return {
+        clearWalletStates,
+        computeConnectedStateForWallets,
+        getPrimaryWallet,
+        getSecondaryWallets,
+        primaryWallet: getPrimaryWallet(),
+        primaryWalletId,
+        secondaryWallets: getSecondaryWallets(),
+        setPrimaryWallet,
+        setPrimaryWalletId,
+        setShowQrcodeModal,
+        showQrcodeModal,
+        walletConnectors,
+        wallets,
+    };
+};
+
+export { useWalletConnectors };

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.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');
+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 orderedSecondaryWalletAddresses = (wallets) => wallets.map((wallet) => wallet.address).sort();
+const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet: multiWallet$1, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, user, setPrimaryWalletId, connectWalletByAddressAndChain, }) => {
+    const [loadingNetwork, setLoadingNetwork] = React.useState(true);
+    const [network, setNetwork] = React.useState(undefined);
+    React.useEffect(() => {
+        const fetchNetwork = () => _tslib.__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.logger.debug(error);
+            }
+            finally {
+                setLoadingNetwork(false);
+            }
+        });
+        fetchNetwork();
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.id]);
+    React.useEffect(() => {
+        if (!primaryWallet) {
+            return;
+        }
+        const seen = new Set();
+        seen.add(primaryWallet.connector.name);
+        primaryWallet.connector.setupEventListeners({
+            onAccountChange: (accounts) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                const [newAddress] = accounts;
+                yield computeConnectedStateForWallets();
+                if (multiWallet.isSameAddress(newAddress, primaryWallet.address, primaryWallet.chain)) {
+                    setMultiWalletWidgetState('idle');
+                }
+                else if (!multiWallet$1) {
+                    yield handleLogOut();
+                }
+                else if (multiWalletWidgetState === 'awaiting_account_switch') {
+                    const linkedSecondaryWallet = secondaryWallets.find((wallet) => multiWallet.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) => multiWallet.isSameAddress(wallet.address, newAddress, wallet.chain))) {
+                    setMultiWalletWidgetState('detected_known_secondary_wallet');
+                }
+                else if (multiWalletWidgetState === 'idle' &&
+                    !secondaryWallets.some((wallet) => multiWallet.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.logger.error(`Unexpected multiWalletWidgetState (${multiWalletWidgetState}) and onAccountChange combination. Resetting state to idle.`);
+                    setMultiWalletWidgetState('idle');
+                }
+            }),
+            onChainChange: (chain) => _tslib.__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: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    if (multiWalletWidgetState === 'awaiting_account_switch') {
+                        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+                    }
+                    yield computeConnectedStateForWallets();
+                }),
+                onDisconnect: () => _tslib.__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: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+                    yield computeConnectedStateForWallets();
+                }),
+                onDisconnect: () => _tslib.__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,
+    };
+};
+
+exports.useWalletEventListeners = useWalletEventListeners;