@dynamic-labs/sdk-react-core 1.1.0-alpha.9 → 1.1.0

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

@@ -4,80 +4,106 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/sdk-api');
-var logger = require('../../../shared/logger.cjs');
+require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('@dynamic-labs/utils');
+var useThrottle = require('../../../shared/utils/hooks/useThrottle/useThrottle.cjs');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
+var getWalletIdentifier = require('../../functions/getWalletIdentifier/getWalletIdentifier.cjs');
 var isWalletConnected = require('../../functions/isWalletConnected/isWalletConnected.cjs');
+require('viem/chains');
 require('../../../events/dynamicEvents.cjs');
-var useEventListener = require('../events/useEventListener/useEventListener.cjs');
 var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
+var useWindowEvent = require('../events/useWindowEvent/useWindowEvent.cjs');
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
-    if (isConnectedWalletsMapEmpty && state.didLoad === false) {
-        return state;
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier.getWalletIdentifier(wallet)] = yield isWalletConnected.isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = React.useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const refreshKey = wallets.map(({ id }) => id).join('-');
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = React.useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = React.useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = React.useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = React.useRef(undefined);
     const computeConnectedStateForWallets = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected.isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => walletConnectorCore.isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier.getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle.useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent.useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     React.useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
-    useEventListener.useEventListener('focus', computeConnectedStateForWallets);
+    useWindowEvent.useWindowEvent('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };
 

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

@@ -1,13 +1,11 @@
+import { MutableRefObject } from 'react';
 import { Wallet } from '../../../shared';
-type ConnectedState = {
-    didLoad: boolean;
-    connectedWalletsMap: {
-        [address: string]: boolean;
-    };
+type ConnectedWalletsMap = {
+    [address: string]: boolean;
 };
 type WalletsConnectionStateHook = (wallets: Wallet[]) => {
-    connectedWalletMap: ConnectedState['connectedWalletsMap'];
-    didConnectedStateLoad: ConnectedState['didLoad'];
+    connectedWalletsMap: ConnectedWalletsMap;
+    didConnectedStateLoad: MutableRefObject<boolean>;
 };
 export declare const useWalletsConnectionState: WalletsConnectionStateHook;
 export {};

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

@@ -1,79 +1,105 @@
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useReducer, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/sdk-api';
-import { logger } from '../../../shared/logger.js';
+import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../constants/colors.js';
+import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '@dynamic-labs/utils';
+import { useThrottle } from '../../../shared/utils/hooks/useThrottle/useThrottle.js';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
+import { getWalletIdentifier } from '../../functions/getWalletIdentifier/getWalletIdentifier.js';
 import { isWalletConnected } from '../../functions/isWalletConnected/isWalletConnected.js';
+import 'viem/chains';
 import '../../../events/dynamicEvents.js';
-import { useEventListener } from '../events/useEventListener/useEventListener.js';
 import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
+import { useWindowEvent } from '../events/useWindowEvent/useWindowEvent.js';
 
-const connectedWalletStateReducer = (state, connectedWalletsMap) => {
-    const isConnectedWalletsMapEmpty = Object.values(connectedWalletsMap).length === 0;
-    if (isConnectedWalletsMapEmpty && state.didLoad === false) {
-        return state;
-    }
-    return Object.assign(Object.assign({}, state), { connectedWalletsMap, didLoad: true });
-};
+/**
+ * For the given wallet array, this returns an object mapping from each wallet's
+ * identifier to whether its connector recognizes it as currently connected or not.
+ */
+const getConnectedWalletsMap = (wallets) => __awaiter(void 0, void 0, void 0, function* () {
+    const newMap = {};
+    yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
+        newMap[getWalletIdentifier(wallet)] = yield isWalletConnected(wallet);
+    })));
+    return newMap;
+});
 const useWalletsConnectionState = (wallets) => {
-    const [state, setState] = useReducer(connectedWalletStateReducer, {
-        connectedWalletsMap: {},
-        didLoad: false,
-    });
-    const refreshKey = wallets.map(({ id }) => id).join('-');
-    const connectors = wallets.map(({ connector }) => connector);
-    const lastCallTimestamp = useRef(0);
+    const [connectedWalletsMap, setConnectedWalletsMap] = useState({});
+    /**
+     * Whether the connection map has been loaded off of the current wallet array.
+     * Always false for empty wallet arrays.
+     */
+    const didConnectedStateLoad = useRef(false);
+    /**
+     * When an accountChanged event is raised, we store the incoming wallet here
+     * until it is finally reflected in the wallets prop.
+     * During this time we do not update the connectedWalletsMap.
+     * This way, we avoid setting the connected state of the primary wallet
+     * to false due to a state transition delay.
+     */
+    const incomingWalletSwitchAddress = useRef(undefined);
     const computeConnectedStateForWallets = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        const connectedWalletsMap = {};
-        yield Promise.all(wallets.map((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-            connectedWalletsMap[wallet.id] = yield isWalletConnected(wallet);
-        })));
-        setState(connectedWalletsMap);
-    }), [wallets]);
-    const handleOnEventUpdate = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!wallets.length)
-            return;
-        const callTimestamp = new Date().getTime();
-        const diffFromLastCall = callTimestamp - lastCallTimestamp.current;
-        lastCallTimestamp.current = callTimestamp;
-        // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
-        // which causes a loop of calls to this function
-        if (diffFromLastCall < 1000) {
-            logger.warn('computeConnectedStateForWallets: skipping due too many calls.');
+        didConnectedStateLoad.current = false;
+        const newMap = yield getConnectedWalletsMap(wallets);
+        if (Object.values(newMap).length === 0) {
+            setConnectedWalletsMap({});
             return;
         }
-        computeConnectedStateForWallets();
-    }), [computeConnectedStateForWallets, wallets.length]);
-    useWalletConnectorEvent(connectors, 'accountChange', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'disconnect', handleOnEventUpdate);
-    useWalletConnectorEvent(connectors, 'chainChange', handleOnEventUpdate);
+        didConnectedStateLoad.current = true;
+        // If there is an incoming account switch and it isn't yet finished,
+        // we don't change the map to avoid setting it to a misleading state
+        if (incomingWalletSwitchAddress.current) {
+            const accountSwitchIsComplete = wallets.some((wallet) => isSameAddress(incomingWalletSwitchAddress.current, wallet.address, wallet.chain));
+            if (accountSwitchIsComplete)
+                incomingWalletSwitchAddress.current = undefined;
+            else
+                return;
+        }
+        setConnectedWalletsMap(newMap);
+    }), [wallets]);
+    /** A string that is unique for each possible value of the wallets prop */
+    const walletsHash = wallets.map(getWalletIdentifier).join('-');
+    const connectors = wallets.map(({ connector }) => connector);
+    // getConnectedAccounts trigger accountChanged event for Phantom EVM wallets
+    // which causes a loop of calls to this function, so we throttle it
+    const handleEvent = useThrottle(() => {
+        if (walletsHash)
+            computeConnectedStateForWallets();
+    }, 1000);
+    const onAccountChange = ({ accounts }) => {
+        incomingWalletSwitchAddress.current = accounts[0];
+        handleEvent();
+    };
+    useWalletConnectorEvent(connectors, 'accountChange', onAccountChange);
+    useWalletConnectorEvent(connectors, 'disconnect', handleEvent);
+    useWalletConnectorEvent(connectors, 'chainChange', handleEvent);
     useEffect(() => {
         computeConnectedStateForWallets();
     }, 
     /**
-     * This is using a custom key to force the useEffect to run only when a connector is
-     * added or removed from the connectors list.
+     * This is using a custom key to force the useEffect to run only when the ids of the
+     * wallets change.
      */
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [refreshKey]);
+    [walletsHash]);
     /**
      * This is a workaround to detect when the user switches to another tab/extension
      * and then comes back to the dapp.
      */
-    useEventListener('focus', computeConnectedStateForWallets);
+    useWindowEvent('focus', computeConnectedStateForWallets);
     return {
-        connectedWalletMap: state.connectedWalletsMap,
-        didConnectedStateLoad: state.didLoad,
+        connectedWalletsMap,
+        didConnectedStateLoad,
     };
 };
 

package/src/lib/views/AccountExistsView/AccountExistsView.cjs

@@ -10,19 +10,22 @@ require('react');
 require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 require('../../context/DynamicContext/DynamicContext.cjs');
-require('@dynamic-labs/wallet-connector-core');
-require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../context/ErrorContext/ErrorContext.cjs');
-require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
+var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
 require('../../shared/consts/index.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var getSocialSignInProviderForProviderEnum = require('../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.cjs');
+require('viem/chains');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var AccountExistsContext = require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../config/ApiEndpoint.cjs');
@@ -44,20 +47,21 @@ require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/QrCodeContext/QrCodeContext.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
 require('../../context/LoadingContext/LoadingContext.cjs');
-require('qrcode');
 require('i18next');
+require('qrcode');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var IconListTile = require('../../components/IconListTile/IconListTile.cjs');
@@ -65,8 +69,10 @@ require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
-var capitalize = require('../../shared/utils/functions/capitalize/capitalize.cjs');
+require('../WalletList/WalletList.cjs');
+require('@hcaptcha/react-hcaptcha');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 var LoginEmailForm = require('../LoginView/sections/EmailSignInSection/LoginEmailForm.cjs');
 
 const AccountExistsView = () => {
@@ -82,12 +88,8 @@ const AccountExistsView = () => {
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(embeddedSocialSigninProvider);
     }));
     const renderFullMessage = () => {
-        const messageTrail = embeddedSocialSigninProvider
-            ? t('dyn_account_exists.trail_message_social', {
-                socialOauth: capitalize.capitalize(embeddedSocialSigninProvider),
-            })
-            : t('dyn_account_exists.trail_message_email');
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t('dyn_account_exists.description'), " ", jsxRuntime.jsx("strong", { children: email }), ' ', messageTrail] }));
+        const messageTrail = embeddedSocialSigninProvider ? (t('dyn_account_exists.description_social')) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [t('dyn_account_exists.description_email'), " ", jsxRuntime.jsx("strong", { children: email }), ' ', t('dyn_account_exists.trail_message_email')] }));
+        return messageTrail;
     };
     return (jsxRuntime.jsxs("div", { className: 'account-exists__container', children: [jsxRuntime.jsx(iconic.UserProfileIcon, { className: 'account-exists__image' }), jsxRuntime.jsxs("div", { className: 'account-exists__main', children: [jsxRuntime.jsx("div", { className: 'account-exists__content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary', copykey: 'dyn_account_exists', children: renderFullMessage() }) }), embeddedSocialSigninProvider ? (jsxRuntime.jsxs(IconListTile.IconListTile, { dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === existingSocialSignInProvider, iconSize: 32 }), jsxRuntime.jsx(Typography.Typography, { variant: 'button_primary', copykey: 'dyn_account_exists.connect', children: t('dyn_account_exists.connect', {
                                     socialOauth: capitalize.capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString()),

package/src/lib/views/AccountExistsView/AccountExistsView.js

@@ -6,19 +6,22 @@ import 'react';
 import '../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
-import '@dynamic-labs/wallet-connector-core';
-import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../context/ErrorContext/ErrorContext.js';
-import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
+import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
 import '../../shared/consts/index.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import { getSocialSignInProviderForProviderEnum } from '../../utils/functions/getSocialSignInProviderForProviderEnum/getSocialSignInProviderForProviderEnum.js';
+import 'viem/chains';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useAccountExistsContext } from '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../config/ApiEndpoint.js';
@@ -40,20 +43,21 @@ import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/QrCodeContext/QrCodeContext.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.js';
 import '../../context/LoadingContext/LoadingContext.js';
-import 'qrcode';
 import 'i18next';
+import 'qrcode';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { IconListTile } from '../../components/IconListTile/IconListTile.js';
@@ -61,8 +65,10 @@ import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
-import { capitalize } from '../../shared/utils/functions/capitalize/capitalize.js';
+import '../WalletList/WalletList.js';
+import '@hcaptcha/react-hcaptcha';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import { LoginEmailForm } from '../LoginView/sections/EmailSignInSection/LoginEmailForm.js';
 
 const AccountExistsView = () => {
@@ -78,12 +84,8 @@ const AccountExistsView = () => {
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(embeddedSocialSigninProvider);
     }));
     const renderFullMessage = () => {
-        const messageTrail = embeddedSocialSigninProvider
-            ? t('dyn_account_exists.trail_message_social', {
-                socialOauth: capitalize(embeddedSocialSigninProvider),
-            })
-            : t('dyn_account_exists.trail_message_email');
-        return (jsxs(Fragment, { children: [t('dyn_account_exists.description'), " ", jsx("strong", { children: email }), ' ', messageTrail] }));
+        const messageTrail = embeddedSocialSigninProvider ? (t('dyn_account_exists.description_social')) : (jsxs(Fragment, { children: [t('dyn_account_exists.description_email'), " ", jsx("strong", { children: email }), ' ', t('dyn_account_exists.trail_message_email')] }));
+        return messageTrail;
     };
     return (jsxs("div", { className: 'account-exists__container', children: [jsx(UserProfileIcon, { className: 'account-exists__image' }), jsxs("div", { className: 'account-exists__main', children: [jsx("div", { className: 'account-exists__content', children: jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'account-exists__content--secondary', copykey: 'dyn_account_exists', children: renderFullMessage() }) }), embeddedSocialSigninProvider ? (jsxs(IconListTile, { dataTestId: `inline-${embeddedSocialSigninProvider}`, onClick: () => handleNewLoging(), className: 'social-sign-in--tile', children: [jsx(IconWithSpinner, { Icon: findSocialIcon(embeddedSocialSigninProvider), isSpinning: socialProvider === existingSocialSignInProvider, iconSize: 32 }), jsx(Typography, { variant: 'button_primary', copykey: 'dyn_account_exists.connect', children: t('dyn_account_exists.connect', {
                                     socialOauth: capitalize(embeddedSocialSigninProvider === null || embeddedSocialSigninProvider === void 0 ? void 0 : embeddedSocialSigninProvider.toString()),

package/src/lib/views/BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.cjs

@@ -7,17 +7,68 @@ var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var utils = require('@dynamic-labs/utils');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var BridgeNextWalletToConnectLayout = require('../../layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.cjs');
-var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('react');
+require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
+require('../../utils/constants/values.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-require('react');
 require('@dynamic-labs/iconic');
 require('../../shared/consts/index.cjs');
+require('../../events/dynamicEvents.cjs');
+require('../../../../_virtual/_tslib.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('viem/chains');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('yup');
+require('react-i18next');
+require('../../context/MockContext/MockContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../components/Alert/Alert.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('formik');
+require('i18next');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../context/PasskeyContext/PasskeyContext.cjs');
+require('../WalletList/WalletList.cjs');
+require('qrcode');
+require('@hcaptcha/react-hcaptcha');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 
 const BridgeNextWalletConnectionView = () => {
     const { setShowAuthFlow, bridgeChainsToConnect } = useInternalDynamicContext.useInternalDynamicContext();

package/src/lib/views/BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.js

@@ -3,17 +3,68 @@ import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
 import { DynamicError } from '@dynamic-labs/utils';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { BridgeNextWalletToConnectLayout } from '../../layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.js';
-import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import 'react';
+import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import 'react';
 import '@dynamic-labs/iconic';
 import '../../shared/consts/index.js';
+import '../../events/dynamicEvents.js';
+import '../../../../_virtual/_tslib.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'viem/chains';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import 'yup';
+import 'react-i18next';
+import '../../context/MockContext/MockContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../components/Alert/Alert.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'formik';
+import 'i18next';
+import '../../components/OverlayCard/OverlayCard.context.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../WalletList/WalletList.js';
+import 'qrcode';
+import '@hcaptcha/react-hcaptcha';
+import '../../context/LoadingContext/LoadingContext.js';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/viem-utils';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
 const BridgeNextWalletConnectionView = () => {
     const { setShowAuthFlow, bridgeChainsToConnect } = useInternalDynamicContext();