@dynamic-labs/sdk-react-core 0.19.0-alpha.24 → 0.19.0-alpha.25

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

@@ -126,6 +126,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
         }
     });
     const signInAccount = (provider, code, verifier, state) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _b;
         try {
             const jwt = yield api.signInOAuth(environmentId, provider, {
                 code,
@@ -146,6 +147,11 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             }
             setCallback('authSuccess');
             yield createUserProfileByJWT(jwt);
+            if (!((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                onSettled === null || onSettled === void 0 ? void 0 : onSettled();
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
@@ -165,7 +171,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
         }
     });
     const connectSocialAccount = (provider, validator) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+        var _c, _d;
         clearInterval(authWindowInterval.current);
         clearError();
         setIsProcessing(true);
@@ -184,13 +190,13 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: false });
         };
         const handleAuthWindowMessage = (event) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e;
+            var _e, _f;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
                 logger.logger.debug('Message received', { data: message });
             }
-            const apiProvider = getProviderByType.getProviderByType((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);
+            const apiProvider = getProviderByType.getProviderByType((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _e !== void 0 ? _e : [], provider);
             if (!(apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.redirectUrl)) {
                 return;
             }
@@ -216,7 +222,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
                 return;
             }
             setIsProcessing(true);
-            if (!((_e = providersWaitingOauthMessage.current) === null || _e === void 0 ? void 0 : _e[provider])) {
+            if (!((_f = providersWaitingOauthMessage.current) === null || _f === void 0 ? void 0 : _f[provider])) {
                 handleError(types.SocialOAuthErrorCode.SESSION_TIMEOUT, `Connecting ${provider} account session timeout.`);
                 return;
             }
@@ -244,12 +250,12 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             }
             setIsProcessing(false);
         });
-        const loginUrl = getOauthLoginUrl.getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
+        const loginUrl = getOauthLoginUrl.getOauthLoginUrl((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider);
         if (!loginUrl) {
             handleError(types.SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to connect social account: ${provider}`);
             return;
         }
-        if (!((_c = providersWaitingOauthMessage.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+        if (!((_d = providersWaitingOauthMessage.current) === null || _d === void 0 ? void 0 : _d[provider])) {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: true });
         }
@@ -292,10 +298,10 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             shouldPool.current = true;
             poolOauthResult(provider, state);
             authWindowInterval.current = setInterval(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-                var _f;
+                var _g;
                 shouldPool.current = false;
                 // clear all states/listeners, assuming user closed the window before completing oauth
-                if ((_f = providersWaitingOauthMessage.current) === null || _f === void 0 ? void 0 : _f[provider]) {
+                if ((_g = providersWaitingOauthMessage.current) === null || _g === void 0 ? void 0 : _g[provider]) {
                     clearListeners();
                     handleError(types.SocialOAuthErrorCode.OAUTH_WINDOW_TIMEOUT, `Connecting ${provider} account window timeout.`);
                 }

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

@@ -122,6 +122,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
         }
     });
     const signInAccount = (provider, code, verifier, state) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
         try {
             const jwt = yield signInOAuth(environmentId, provider, {
                 code,
@@ -142,6 +143,11 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             }
             setCallback('authSuccess');
             yield createUserProfileByJWT(jwt);
+            if (!((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                onSettled === null || onSettled === void 0 ? void 0 : onSettled();
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
@@ -161,7 +167,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
         }
     });
     const connectSocialAccount = (provider, validator) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b, _c;
+        var _c, _d;
         clearInterval(authWindowInterval.current);
         clearError();
         setIsProcessing(true);
@@ -180,13 +186,13 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: false });
         };
         const handleAuthWindowMessage = (event) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e;
+            var _e, _f;
             const message = event.data;
             const isAuthorizationMessage = (message === null || message === void 0 ? void 0 : message.type) === 'authorization_response';
             if (isAuthorizationMessage) {
                 logger.debug('Message received', { data: message });
             }
-            const apiProvider = getProviderByType((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);
+            const apiProvider = getProviderByType((_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _e !== void 0 ? _e : [], provider);
             if (!(apiProvider === null || apiProvider === void 0 ? void 0 : apiProvider.redirectUrl)) {
                 return;
             }
@@ -212,7 +218,7 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
                 return;
             }
             setIsProcessing(true);
-            if (!((_e = providersWaitingOauthMessage.current) === null || _e === void 0 ? void 0 : _e[provider])) {
+            if (!((_f = providersWaitingOauthMessage.current) === null || _f === void 0 ? void 0 : _f[provider])) {
                 handleError(SocialOAuthErrorCode.SESSION_TIMEOUT, `Connecting ${provider} account session timeout.`);
                 return;
             }
@@ -240,12 +246,12 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             }
             setIsProcessing(false);
         });
-        const loginUrl = getOauthLoginUrl((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _b !== void 0 ? _b : [], provider);
+        const loginUrl = getOauthLoginUrl((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _c !== void 0 ? _c : [], provider);
         if (!loginUrl) {
             handleError(SocialOAuthErrorCode.NO_OAUTH_URL, `Failed to get login url to connect social account: ${provider}`);
             return;
         }
-        if (!((_c = providersWaitingOauthMessage.current) === null || _c === void 0 ? void 0 : _c[provider])) {
+        if (!((_d = providersWaitingOauthMessage.current) === null || _d === void 0 ? void 0 : _d[provider])) {
             window.addEventListener('message', handleAuthWindowMessage);
             providersWaitingOauthMessage.current = Object.assign(Object.assign({}, providersWaitingOauthMessage.current), { [provider]: true });
         }
@@ -288,10 +294,10 @@ const useSocialAuth = ({ sessionTimeout, authMode, onSettled, onError, }) => {
             shouldPool.current = true;
             poolOauthResult(provider, state);
             authWindowInterval.current = setInterval(() => __awaiter(void 0, void 0, void 0, function* () {
-                var _f;
+                var _g;
                 shouldPool.current = false;
                 // clear all states/listeners, assuming user closed the window before completing oauth
-                if ((_f = providersWaitingOauthMessage.current) === null || _f === void 0 ? void 0 : _f[provider]) {
+                if ((_g = providersWaitingOauthMessage.current) === null || _g === void 0 ? void 0 : _g[provider]) {
                     clearListeners();
                     handleError(SocialOAuthErrorCode.OAUTH_WINDOW_TIMEOUT, `Connecting ${provider} account window timeout.`);
                 }

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

@@ -17,6 +17,7 @@ require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 require('../../../shared/consts/index.cjs');
 var useWalletConnectorEvent = require('../useWalletConnectorEvent/useWalletConnectorEvent.cjs');
+var sortAccountsByPrimaryWallet = require('./utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.cjs');
 
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = React.useState(true);
@@ -64,7 +65,11 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // change the api here
         if (!primaryWallet)
             return;
-        const [newAddress] = accounts;
+        // Sorts the accounts so that the primary wallet is always first
+        // when multiWallet is disabled to ensure we find the primary address
+        const [newAddress] = multiWallet
+            ? accounts
+            : sortAccountsByPrimaryWallet.sortAccountsByPrimaryWallet(accounts, primaryWallet);
         const newWallet = secondaryWallets.find((wallet) => walletConnectorCore.isSameAddress(wallet.address, newAddress, wallet.chain));
         if (authMode === 'connect-only') {
             refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);

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

@@ -13,6 +13,7 @@ import '../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import '../../../shared/consts/index.js';
 import { useWalletConnectorEvent } from '../useWalletConnectorEvent/useWalletConnectorEvent.js';
+import { sortAccountsByPrimaryWallet } from './utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.js';
 
 const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnector, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, }) => {
     const [loadingNetwork, setLoadingNetwork] = useState(true);
@@ -60,7 +61,11 @@ const useWalletEventListeners = ({ computeConnectedStateForWallets, handleLogOut
         // change the api here
         if (!primaryWallet)
             return;
-        const [newAddress] = accounts;
+        // Sorts the accounts so that the primary wallet is always first
+        // when multiWallet is disabled to ensure we find the primary address
+        const [newAddress] = multiWallet
+            ? accounts
+            : sortAccountsByPrimaryWallet(accounts, primaryWallet);
         const newWallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, newAddress, wallet.chain));
         if (authMode === 'connect-only') {
             refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);

package/src/lib/utils/hooks/useWalletEventListeners/utils/index.d.ts

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

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/index.d.ts

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

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+
+const sortAccountsByPrimaryWallet = (accounts, primaryWallet) => [...accounts].sort((account) => walletConnectorCore.isSameAddress(account, primaryWallet.address, primaryWallet.chain) ? -1 : 1);
+
+exports.sortAccountsByPrimaryWallet = sortAccountsByPrimaryWallet;

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.d.ts

@@ -0,0 +1,2 @@
+import { Wallet } from '../../../../../shared';
+export declare const sortAccountsByPrimaryWallet: (accounts: string[], primaryWallet: Wallet) => string[];

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

@@ -0,0 +1,5 @@
+import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
+
+const sortAccountsByPrimaryWallet = (accounts, primaryWallet) => [...accounts].sort((account) => isSameAddress(account, primaryWallet.address, primaryWallet.chain) ? -1 : 1);
+
+export { sortAccountsByPrimaryWallet };

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.cjs

@@ -64,7 +64,7 @@ require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
     const { setView, view } = ViewContext.useViewContext();
     const { createEmbeddedWallet } = useEmbeddedWallet.useEmbeddedWallet();
     const decodedJwt = decodeJwt.decodeJwt(onboardingOnlyJwt);
@@ -72,6 +72,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
         validationSchemaStripUnknown: false,
     });
     const onSubmit = React.useCallback((formValues) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
         if (isEmailVerificationRequired &&
             missingFields.map((field) => field.name).toString() === 'email') {
@@ -85,6 +86,10 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
             return;
         }
         setCallback('authSuccess');
+        if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation)) {
+            setShowAuthFlow(false);
+            return;
+        }
         try {
             // this function will check turnkey wallet enabled and create wallet if needed
             // if not enabled, it will throw an error.
@@ -100,6 +105,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
         view,
         createEmbeddedWallet,
         setShowAuthFlow,
+        projectSettings,
     ]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm.useUserDataForm({
         fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],

package/src/lib/views/CollectUserDataView/OnboardingUserDataForm/OnboardingUserDataForm.js

@@ -60,7 +60,7 @@ import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
 
 const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
-    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, } = useInternalDynamicContext();
+    const { policiesConsentInnerComponent, onboardingOnlyJwt, setShowAuthFlow, setCallback, projectSettings, } = useInternalDynamicContext();
     const { setView, view } = useViewContext();
     const { createEmbeddedWallet } = useEmbeddedWallet();
     const decodedJwt = decodeJwt(onboardingOnlyJwt);
@@ -68,6 +68,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
         validationSchemaStripUnknown: false,
     });
     const onSubmit = useCallback((formValues) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         const { isEmailVerificationRequired, missingFields } = yield updateUser(formValues);
         if (isEmailVerificationRequired &&
             missingFields.map((field) => field.name).toString() === 'email') {
@@ -81,6 +82,10 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
             return;
         }
         setCallback('authSuccess');
+        if (!((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.automaticEmbeddedWalletCreation)) {
+            setShowAuthFlow(false);
+            return;
+        }
         try {
             // this function will check turnkey wallet enabled and create wallet if needed
             // if not enabled, it will throw an error.
@@ -96,6 +101,7 @@ const OnboardingUserDataForm = ({ children, userProfile, disableSubmit, }) => {
         view,
         createEmbeddedWallet,
         setShowAuthFlow,
+        projectSettings,
     ]);
     const { fetch: loading, formikInitialValues, formikValidationSchema, enforcePolicies, onFormSubmit, } = useUserDataForm({
         fields: (decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.missingFields) || [],

package/src/lib/views/EmailVerification/EmailVerification.cjs

@@ -138,12 +138,14 @@ const EmailVerification = () => {
             if (nextView === 'verified-and-transferred') {
                 setShowTransferMessage(true);
             }
+            if (!((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation) {
-                    yield createEmbeddedWallet();
-                }
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);
@@ -210,12 +212,14 @@ const EmailVerification = () => {
             // this timeout is set to make sure that the user will see success message
             yield sleepToShowSuccessMessage();
             yield createUserProfileByJWT(jwt);
+            if (!((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation) {
-                    yield createEmbeddedWallet();
-                }
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);

package/src/lib/views/EmailVerification/EmailVerification.js

@@ -134,12 +134,14 @@ const EmailVerification = () => {
             if (nextView === 'verified-and-transferred') {
                 setShowTransferMessage(true);
             }
+            if (!((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.automaticEmbeddedWalletCreation) {
-                    yield createEmbeddedWallet();
-                }
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);
@@ -206,12 +208,14 @@ const EmailVerification = () => {
             // this timeout is set to make sure that the user will see success message
             yield sleepToShowSuccessMessage();
             yield createUserProfileByJWT(jwt);
+            if (!((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation)) {
+                setShowAuthFlow(false);
+                return;
+            }
             try {
                 // this function will check turnkey wallet enabled and create wallet if needed
                 // if not enabled, it will throw an error.
-                if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _d === void 0 ? void 0 : _d.automaticEmbeddedWalletCreation) {
-                    yield createEmbeddedWallet();
-                }
+                yield createEmbeddedWallet();
             }
             catch (e) {
                 setShowAuthFlow(false);

package/src/lib/views/LoginView/LoginView.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var sdkApi = require('@dynamic-labs/sdk-api');
 var Divider = require('../../components/Divider/Divider.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
@@ -17,6 +18,7 @@ var SocialSignInSection = require('./sections/SocialSignInSection/SocialSignInSe
 var useLoginView = require('./useLoginView.cjs');
 
 const LoginView = () => {
+    var _a;
     const { error } = ErrorContext.useErrorContext();
     const { loading } = LoadingContext.useLoadingContext();
     const { view, setView } = ViewContext.useViewContext();
@@ -40,6 +42,7 @@ const LoginView = () => {
             setShowWalletList(false);
         }
     }, [isWalletOnly, view]);
+    const numOfWallets = ((_a = logingViewSections.find((section) => section.type === sdkApi.SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
     const renderViewSections = React.useMemo(() => logingViewSections.map((viewSection, index) => {
         switch (viewSection.type) {
             case 'separator':
@@ -52,7 +55,7 @@ const LoginView = () => {
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'social':
-                return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { sectionData: viewSection }, `${viewSection.type}_${index}`));
+                return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
             default:
                 return null;
         }

package/src/lib/views/LoginView/LoginView.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
+import { SdkViewSectionType } from '@dynamic-labs/sdk-api';
 import { Divider } from '../../components/Divider/Divider.js';
 import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
@@ -13,6 +14,7 @@ import { SocialSignInSection } from './sections/SocialSignInSection/SocialSignIn
 import { useLoginView } from './useLoginView.js';
 
 const LoginView = () => {
+    var _a;
     const { error } = useErrorContext();
     const { loading } = useLoadingContext();
     const { view, setView } = useViewContext();
@@ -36,6 +38,7 @@ const LoginView = () => {
             setShowWalletList(false);
         }
     }, [isWalletOnly, view]);
+    const numOfWallets = ((_a = logingViewSections.find((section) => section.type === SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
     const renderViewSections = useMemo(() => logingViewSections.map((viewSection, index) => {
         switch (viewSection.type) {
             case 'separator':
@@ -48,7 +51,7 @@ const LoginView = () => {
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
             case 'social':
-                return (jsx(SocialSignInSection, { sectionData: viewSection }, `${viewSection.type}_${index}`));
+                return (jsx(SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
             default:
                 return null;
         }

package/src/lib/views/LoginView/sections/LoginWidget.d.ts

@@ -7,4 +7,5 @@ export interface LoginWidgetProps {
 export interface SocialSectionProps {
     defaultProvider?: SocialSignInProviderEnum;
     numOfItemsToDisplay?: number;
+    collapsedLayout?: boolean;
 }

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.cjs

@@ -60,7 +60,7 @@ require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.cjs');
 var SocialRedirectContext = require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 
-const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { setSocialProvider, socialProvider, enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
@@ -81,7 +81,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
         setShowAuthFlow(true);
         connectSocialAccount(providerEnum);
     };
-    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay, collapsedLayout: collapsedLayout }));
 };
 
 exports.DynamicSocialSignIn = DynamicSocialSignIn;

package/src/lib/views/LoginView/sections/SocialSignInSection/DynamicSocialSignIn/DynamicSocialSignIn.js

@@ -56,7 +56,7 @@ import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
 import { useSocialRedirectContext } from '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 
-const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { setShowAuthFlow } = useInternalDynamicContext();
     const { setSocialProvider, socialProvider, enabledSocialProviders } = useSocialRedirectContext();
     const { setView, goToInitialView } = useViewContext();
@@ -77,7 +77,7 @@ const DynamicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
         setShowAuthFlow(true);
         connectSocialAccount(providerEnum);
     };
-    return (jsx(SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+    return (jsx(SocialSignIn, { onSelectProvider: onSelectProvider, providers: enabledSocialProviders, selectedProvider: socialProvider, isLoading: isProcessing, testId: 'dynamic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay, collapsedLayout: collapsedLayout }));
 };
 
 export { DynamicSocialSignIn };

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.cjs

@@ -60,7 +60,7 @@ require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var SocialSignIn = require('../../../../../components/SocialSignIn/SocialSignIn.cjs');
 var SocialRedirectContext = require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 
-const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { socialProvidersFilter = (providers) => providers } = useInternalDynamicContext.useInternalDynamicContext();
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = SocialRedirectContext.useSocialRedirectContext();
     const socialProviders = socialProvidersFilter(enabledSocialProviders);
@@ -69,7 +69,7 @@ const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
     }));
-    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+    return (jsxRuntime.jsx(SocialSignIn.SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay, collapsedLayout: collapsedLayout }));
 };
 
 exports.MagicSocialSignIn = MagicSocialSignIn;

package/src/lib/views/LoginView/sections/SocialSignInSection/MagicSocialSignIn/MagicSocialSignIn.js

@@ -56,7 +56,7 @@ import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import { SocialSignIn } from '../../../../../components/SocialSignIn/SocialSignIn.js';
 import { useSocialRedirectContext } from '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 
-const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
+const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, collapsedLayout, }) => {
     const { socialProvidersFilter = (providers) => providers } = useInternalDynamicContext();
     const { socialProvider, setSocialProvider, socialWalletConnector, enabledSocialProviders, } = useSocialRedirectContext();
     const socialProviders = socialProvidersFilter(enabledSocialProviders);
@@ -65,7 +65,7 @@ const MagicSocialSignIn = ({ defaultProvider, numOfItemsToDisplay, }) => {
         yield (socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.endSession());
         return socialWalletConnector === null || socialWalletConnector === void 0 ? void 0 : socialWalletConnector.connect(provider);
     }));
-    return (jsx(SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay }));
+    return (jsx(SocialSignIn, { onSelectProvider: onClickProvider, providers: socialProviders, selectedProvider: socialProvider, isLoading: isLoading, testId: 'magic-social-sign-in', defaultProvider: defaultProvider, numOfItemsToDisplay: numOfItemsToDisplay, collapsedLayout: collapsedLayout }));
 };
 
 export { MagicSocialSignIn };

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.cjs

@@ -22,11 +22,12 @@ var getSocialSignInProviderFromString = require('../../../../utils/functions/get
 var MagicSocialSignIn = require('./MagicSocialSignIn/MagicSocialSignIn.cjs');
 var DynamicSocialSignIn = require('./DynamicSocialSignIn/DynamicSocialSignIn.cjs');
 
-const SocialSignInSection = ({ sectionData }) => {
+const SocialSignInSection = ({ sectionData, collapsedLayout, }) => {
     var _a, _b, _c;
     const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
     const componentProps = {
+        collapsedLayout,
         defaultProvider: getSocialSignInProviderFromString.getSocialSignInProviderFromString(sectionData.defaultItem),
         numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
     };

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.d.ts

@@ -2,6 +2,7 @@
 import { SdkViewSection } from '@dynamic-labs/sdk-api';
 type Props = {
     sectionData: SdkViewSection;
+    collapsedLayout?: boolean;
 };
-export declare const SocialSignInSection: ({ sectionData }: Props) => JSX.Element | null;
+export declare const SocialSignInSection: ({ sectionData, collapsedLayout, }: Props) => JSX.Element | null;
 export {};

package/src/lib/views/LoginView/sections/SocialSignInSection/SocialSignInSection.js

@@ -18,11 +18,12 @@ import { getSocialSignInProviderFromString } from '../../../../utils/functions/g
 import { MagicSocialSignIn } from './MagicSocialSignIn/MagicSocialSignIn.js';
 import { DynamicSocialSignIn } from './DynamicSocialSignIn/DynamicSocialSignIn.js';
 
-const SocialSignInSection = ({ sectionData }) => {
+const SocialSignInSection = ({ sectionData, collapsedLayout, }) => {
     var _a, _b, _c;
     const { projectSettings } = useInternalDynamicContext();
     const providers = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _a !== void 0 ? _a : [];
     const componentProps = {
+        collapsedLayout,
         defaultProvider: getSocialSignInProviderFromString(sectionData.defaultItem),
         numOfItemsToDisplay: sectionData.numOfItemsToDisplay,
     };

package/src/lib/views/LoginView/useLoginView.cjs

@@ -24,14 +24,14 @@ var index = require('../../utils/functions/getEnabledProviders/index.cjs');
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
      * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
      * wallets and then display an empty wallet list (since turnkey doesn't render)
      */
-    const selectableWallets = wallets.filter(({ key }) => key !== 'turnkey');
+    const selectableWallets = (walletsFilter ? walletsFilter(wallets) : wallets).filter(({ key }) => key !== 'turnkey');
     const { t } = reactI18next.useTranslation();
     const hasEnabledProviders = Boolean(index.getEnabledProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers).length);
     const isWalletOnly = React.useMemo(() => {

package/src/lib/views/LoginView/useLoginView.js

@@ -20,14 +20,14 @@ import { getEnabledProviders } from '../../utils/functions/getEnabledProviders/i
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, } = useInternalDynamicContext();
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
      * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
      * wallets and then display an empty wallet list (since turnkey doesn't render)
      */
-    const selectableWallets = wallets.filter(({ key }) => key !== 'turnkey');
+    const selectableWallets = (walletsFilter ? walletsFilter(wallets) : wallets).filter(({ key }) => key !== 'turnkey');
     const { t } = useTranslation();
     const hasEnabledProviders = Boolean(getEnabledProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers).length);
     const isWalletOnly = useMemo(() => {

package/src/lib/views/WalletList/WalletList.cjs

@@ -53,9 +53,10 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         multiWallet,
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
         searchFilter: filterValue,
+        showMoreWalletsWithFilter: true,
         signWithEmailWalletName,
         walletBook: walletBook$1,
-        walletsFilter: walletsFilter,
+        walletsFilter,
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;