@dynamic-labs/sdk-react-core 0.16.0

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

@@ -0,0 +1,167 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.es.js';
+import { DynamicError } from '@dynamic-labs/multi-wallet';
+import { verifyWallet, linkWallet } from '../../../data/api.es.js';
+import { storeAuthToken } from '../../functions/storeAuthToken/index.es.js';
+import { LAST_USED_WALLET } from '../../constants/localStorage.es.js';
+import '../../constants/colors.es.js';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.es.js';
+import { logger } from '../../../shared/logger.es.js';
+import { setToLS } from '../../../shared/utils/functions/storage/setToLS.es.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { getVerifyArgs } from '../../functions/getVerifyArgs/getVerifyArgs.es.js';
+import { createUserProfile } from '../../functions/createUserProfile/createUserProfile.es.js';
+import { isSupportedNetwork } from '../../functions/isSupportedNetwork/isSupportedNetwork.es.js';
+import '@dynamic-labs/sdk-api';
+import { isProgrammableNetworkSwitchSupported } from '../../functions/isProgrammableNetworkSwitchSupported/isProgrammableNetworkSwitchSupported.es.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { useErrorContext } from '../../../context/ErrorContext/ErrorContext.es.js';
+import { getSiweStatement } from '../../functions/getSiweStatement/getSiweStatement.es.js';
+import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.es.js';
+import '../../../shared/consts/index.es.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/index.d.ts

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

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

@@ -0,0 +1,184 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs.js');
+var React = require('react');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var decodeJwt = require('../../../shared/utils/functions/decodeJwt/decodeJwt.cjs.js');
+var logger = require('../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs.js');
+var localStorage$1 = require('../../constants/localStorage.cjs.js');
+require('../../constants/colors.cjs.js');
+var useLocalStorage = require('../../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs.js');
+require('../../../shared/consts/index.cjs.js');
+var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs.js');
+var isSameWalletName = require('../../functions/isSameWalletName/isSameWalletName.cjs.js');
+require('@dynamic-labs/sdk-api');
+var shouldManuallyReconnectOnRefresh = require('../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs.js');
+
+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.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from 'react';
+import { WalletOption, Wallet, MultiWalletWidgetState } from '../../../shared';
+import { MultiWalletWidgetStateSetter } from '../multiWallet';
+import { WalletConnector } from '../../../..';
+type Props = {
+    authToken: string | undefined;
+    multiWalletWidgetState: MultiWalletWidgetState;
+    setDesktopUri: Dispatch<SetStateAction<string>>;
+    setMultiWalletWidgetState: MultiWalletWidgetStateSetter;
+    setQrcodeUri: Dispatch<SetStateAction<string>>;
+    wallets: WalletOption[];
+};
+export interface UseWalletConnectors {
+    clearWalletStates: () => void;
+    computeConnectedStateForWallets: () => Promise<void>;
+    getPrimaryWallet: () => Wallet | null;
+    getSecondaryWallets: () => Wallet[];
+    primaryWallet: Wallet | null;
+    primaryWalletId: string | undefined;
+    secondaryWallets: Wallet[];
+    setPrimaryWallet: (walletId: string) => Promise<void>;
+    setPrimaryWalletId: (walletId: string) => void;
+    setShowQrcodeModal: Dispatch<SetStateAction<boolean>>;
+    showQrcodeModal: boolean;
+    walletConnectors: WalletConnector[];
+    wallets: Wallet[];
+}
+export declare const useWalletConnectors: ({ authToken, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, }: Props) => UseWalletConnectors;
+export {};

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

@@ -0,0 +1,180 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.es.js';
+import { useState, useCallback, useEffect } from 'react';
+import { DynamicError, isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
+import { decodeJwt } from '../../../shared/utils/functions/decodeJwt/decodeJwt.es.js';
+import { logger } from '../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.es.js';
+import { PRIMARY_WALLET_ID } from '../../constants/localStorage.es.js';
+import '../../constants/colors.es.js';
+import { useLocalStorage } from '../../../shared/utils/hooks/useLocalStorage/useLocalStorage.es.js';
+import '../../../shared/consts/index.es.js';
+import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.es.js';
+import { isSameWalletName } from '../../functions/isSameWalletName/isSameWalletName.es.js';
+import '@dynamic-labs/sdk-api';
+import { shouldManuallyReconnectOnRefresh } from '../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.es.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/index.d.ts

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