@dynamic-labs/sdk-react-core 3.0.0-alpha.47 → 3.0.0-alpha.48

package/CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## [3.0.0-alpha.48](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.47...v3.0.0-alpha.48) (2024-08-21)
+
+
+### Bug Fixes
+
+* collect user data to work when no wallet is selected ([#6670](https://github.com/dynamic-labs/DynamicAuth/issues/6670)) ([b86aae8](https://github.com/dynamic-labs/DynamicAuth/commit/b86aae8e7ceb35793f792941a34cabd19b9e65d4))
+* disable cookie when running on native mobile ([#6668](https://github.com/dynamic-labs/DynamicAuth/issues/6668)) ([e52a3d9](https://github.com/dynamic-labs/DynamicAuth/commit/e52a3d94a9028e36525be2e80a9f0916efad4320))
+* prevent external auth blocking pending user requirements views ([#6669](https://github.com/dynamic-labs/DynamicAuth/issues/6669)) ([848356c](https://github.com/dynamic-labs/DynamicAuth/commit/848356c57e730a8516c642da84274a236e026f40))
+
 ## [3.0.0-alpha.47](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.46...v3.0.0-alpha.47) (2024-08-21)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "3.0.0-alpha.47";
+var version = "3.0.0-alpha.48";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.519",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "3.0.0-alpha.47";
+var version = "3.0.0-alpha.48";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.519",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "3.0.0-alpha.47",
+  "version": "3.0.0-alpha.48",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dynamic-labs/dynamic-auth.git",
@@ -17,17 +17,17 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/iconic": "3.0.0-alpha.47",
-    "@dynamic-labs/logger": "3.0.0-alpha.47",
-    "@dynamic-labs/message-transport": "3.0.0-alpha.47",
-    "@dynamic-labs/multi-wallet": "3.0.0-alpha.47",
-    "@dynamic-labs/rpc-providers": "3.0.0-alpha.47",
-    "@dynamic-labs/store": "3.0.0-alpha.47",
-    "@dynamic-labs/types": "3.0.0-alpha.47",
-    "@dynamic-labs/utils": "3.0.0-alpha.47",
-    "@dynamic-labs/viem-utils": "3.0.0-alpha.47",
-    "@dynamic-labs/wallet-book": "3.0.0-alpha.47",
-    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.47",
+    "@dynamic-labs/iconic": "3.0.0-alpha.48",
+    "@dynamic-labs/logger": "3.0.0-alpha.48",
+    "@dynamic-labs/message-transport": "3.0.0-alpha.48",
+    "@dynamic-labs/multi-wallet": "3.0.0-alpha.48",
+    "@dynamic-labs/rpc-providers": "3.0.0-alpha.48",
+    "@dynamic-labs/store": "3.0.0-alpha.48",
+    "@dynamic-labs/types": "3.0.0-alpha.48",
+    "@dynamic-labs/utils": "3.0.0-alpha.48",
+    "@dynamic-labs/viem-utils": "3.0.0-alpha.48",
+    "@dynamic-labs/wallet-book": "3.0.0-alpha.48",
+    "@dynamic-labs/wallet-connector-core": "3.0.0-alpha.48",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/lib/shared/utils/functions/hasPendingRequirements/hasPendingRequirements.cjs

@@ -0,0 +1,10 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hasPendingMfaAction = require('../hasPendingMfaAction/hasPendingMfaAction.cjs');
+
+const hasPendingRequirements = (user) => { var _a; return Boolean((_a = user.missingFields) === null || _a === void 0 ? void 0 : _a.length) || hasPendingMfaAction.hasPendingMfaAction(user); };
+
+exports.hasPendingRequirements = hasPendingRequirements;

package/src/lib/shared/utils/functions/hasPendingRequirements/hasPendingRequirements.d.ts

@@ -0,0 +1,2 @@
+import { UserProfile } from '@dynamic-labs/types';
+export declare const hasPendingRequirements: (user: UserProfile) => boolean;

package/src/lib/shared/utils/functions/hasPendingRequirements/hasPendingRequirements.js

@@ -0,0 +1,6 @@
+'use client'
+import { hasPendingMfaAction } from '../hasPendingMfaAction/hasPendingMfaAction.js';
+
+const hasPendingRequirements = (user) => { var _a; return Boolean((_a = user.missingFields) === null || _a === void 0 ? void 0 : _a.length) || hasPendingMfaAction(user); };
+
+export { hasPendingRequirements };

package/src/lib/shared/utils/functions/hasPendingRequirements/index.d.ts

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

package/src/lib/shared/utils/functions/index.d.ts

@@ -15,3 +15,4 @@ export * from './validatePassword';
 export * from './generateRandomPassword';
 export * from './usingSessionKeys';
 export * from './hasPendingMfaAction';
+export * from './hasPendingRequirements';

package/src/lib/store/hooks/useUser/useUser.cjs

@@ -15,14 +15,13 @@ require('../../../utils/constants/colors.cjs');
 require('../../../utils/constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
-var hasPendingMfaAction = require('../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.cjs');
+var hasPendingRequirements = require('../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.cjs');
 require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 var store = require('../../store.cjs');
 var useStoreWithSelector = require('../useStoreWithSelector/useStoreWithSelector.cjs');
 
 const useUser = () => {
-    var _a;
     // after user has fully logged in (user is defined), it should never go back to
     // not being fully logged in (userWithMissingInfo defined instaed or user),
     // unless it's logged out (no user or userWithMissingInfo defined)
@@ -37,8 +36,7 @@ const useUser = () => {
     // since we won't have onboarding jwt anymore, the idea is to just store the user in LS and either use the user state
     // or userWithMissingInfo, depending on the value of missing fields or mfa required.
     // this is just following our existing logic of how we handle authToken vs onboardingOnlyToken.
-    if (!hasFullyLoggedIn.current &&
-        (((_a = userFromStore.missingFields) === null || _a === void 0 ? void 0 : _a.length) || hasPendingMfaAction.hasPendingMfaAction(userFromStore))) {
+    if (!hasFullyLoggedIn.current && hasPendingRequirements.hasPendingRequirements(userFromStore)) {
         return { userWithMissingInfo: userFromStore };
     }
     hasFullyLoggedIn.current = true;

package/src/lib/store/hooks/useUser/useUser.js

@@ -11,14 +11,13 @@ import '../../../utils/constants/colors.js';
 import '../../../utils/constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
-import { hasPendingMfaAction } from '../../../shared/utils/functions/hasPendingMfaAction/hasPendingMfaAction.js';
+import { hasPendingRequirements } from '../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.js';
 import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import { getStore } from '../../store.js';
 import { useStoreWithSelector } from '../useStoreWithSelector/useStoreWithSelector.js';
 
 const useUser = () => {
-    var _a;
     // after user has fully logged in (user is defined), it should never go back to
     // not being fully logged in (userWithMissingInfo defined instaed or user),
     // unless it's logged out (no user or userWithMissingInfo defined)
@@ -33,8 +32,7 @@ const useUser = () => {
     // since we won't have onboarding jwt anymore, the idea is to just store the user in LS and either use the user state
     // or userWithMissingInfo, depending on the value of missing fields or mfa required.
     // this is just following our existing logic of how we handle authToken vs onboardingOnlyToken.
-    if (!hasFullyLoggedIn.current &&
-        (((_a = userFromStore.missingFields) === null || _a === void 0 ? void 0 : _a.length) || hasPendingMfaAction(userFromStore))) {
+    if (!hasFullyLoggedIn.current && hasPendingRequirements(userFromStore)) {
         return { userWithMissingInfo: userFromStore };
     }
     hasFullyLoggedIn.current = true;

package/src/lib/utils/functions/isCookieEnabled/isCookieEnabled.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+var utils = require('@dynamic-labs/utils');
 require('@dynamic-labs/store');
 require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
@@ -16,7 +17,6 @@ require('react');
 require('@dynamic-labs/wallet-book');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
-require('@dynamic-labs/utils');
 require('../../../shared/consts/index.cjs');
 var projectSettingsActions = require('../../../store/actions/projectSettingsActions/projectSettingsActions.cjs');
 require('../../../../../_virtual/_tslib.cjs');
@@ -91,6 +91,13 @@ require('../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 
 const isCookieEnabled = () => {
     var _a, _b, _c, _d;
+    /**
+     * There is no cookie on native mobile applications
+     * so this feature must be disabled for native mobile
+     */
+    if (utils.PlatformService.isNativeMobile) {
+        return false;
+    }
     const securitySettings = (_b = (_a = projectSettingsActions.getProjectSettings()) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.security;
     if (!securitySettings)
         return false;

package/src/lib/utils/functions/isCookieEnabled/isCookieEnabled.js

@@ -1,5 +1,6 @@
 'use client'
 import { AuthStorageEnum } from '@dynamic-labs/sdk-api-core';
+import { PlatformService } from '@dynamic-labs/utils';
 import '@dynamic-labs/store';
 import '../../constants/colors.js';
 import '../../constants/values.js';
@@ -12,7 +13,6 @@ import 'react';
 import '@dynamic-labs/wallet-book';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
-import '@dynamic-labs/utils';
 import '../../../shared/consts/index.js';
 import { getProjectSettings } from '../../../store/actions/projectSettingsActions/projectSettingsActions.js';
 import '../../../../../_virtual/_tslib.js';
@@ -87,6 +87,13 @@ import '../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 
 const isCookieEnabled = () => {
     var _a, _b, _c, _d;
+    /**
+     * There is no cookie on native mobile applications
+     * so this feature must be disabled for native mobile
+     */
+    if (PlatformService.isNativeMobile) {
+        return false;
+    }
     const securitySettings = (_b = (_a = getProjectSettings()) === null || _a === void 0 ? void 0 : _a.settings) === null || _b === void 0 ? void 0 : _b.security;
     if (!securitySettings)
         return false;

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

@@ -17,6 +17,7 @@ require('../../constants/colors.cjs');
 require('../../constants/values.cjs');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/utils/classes/storage/sessionStorage.cjs');
+var hasPendingRequirements = require('../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.cjs');
 require('../../../shared/consts/index.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -109,7 +110,9 @@ const useExternalAuth = () => {
                 externalJwt,
             });
             setCallback('authSuccess');
-            setShowAuthFlow(false);
+            if (userProfile && !hasPendingRequirements.hasPendingRequirements(userProfile)) {
+                setShowAuthFlow(false);
+            }
             return userProfile;
         }
         catch (e) {

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

@@ -13,6 +13,7 @@ import '../../constants/colors.js';
 import '../../constants/values.js';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/utils/classes/storage/sessionStorage.js';
+import { hasPendingRequirements } from '../../../shared/utils/functions/hasPendingRequirements/hasPendingRequirements.js';
 import '../../../shared/consts/index.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/multi-wallet';
@@ -105,7 +106,9 @@ const useExternalAuth = () => {
                 externalJwt,
             });
             setCallback('authSuccess');
-            setShowAuthFlow(false);
+            if (userProfile && !hasPendingRequirements(userProfile)) {
+                setShowAuthFlow(false);
+            }
             return userProfile;
         }
         catch (e) {

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

@@ -0,0 +1 @@
+export declare const useOnlyConnectedMode: () => boolean;

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

@@ -107,15 +107,16 @@ const CollectUserDataView = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
     const nameService = useFetchNameService.useFetchNameService();
     const { t } = reactI18next.useTranslation();
-    if (!walletConnector || !userWithMissingInfo) {
+    if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
+    const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
-                    'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userWithMissingInfo, children: !_isSupportedNetwork ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxRuntime.jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__network-container', children: [jsxRuntime.jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: 28 })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxRuntime.jsxs("div", { className: classNames.classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': shouldDisplayWrongNetworkState,
+                }), children: [jsxRuntime.jsx("div", { className: 'collect-user-data__success-icon', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-primary', size: 'large', children: jsxRuntime.jsx(checkConnection.ReactComponent, {}) }) }), jsxRuntime.jsx(OnboardingUserDataForm.OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxRuntime.jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         t('dyn_collect_user_data.description') })] })) }), jsxRuntime.jsx(TextButton.TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };

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

@@ -103,15 +103,16 @@ const CollectUserDataView = () => {
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
     const nameService = useFetchNameService();
     const { t } = useTranslation();
-    if (!walletConnector || !userWithMissingInfo) {
+    if (!userWithMissingInfo) {
         return null;
     }
-    const evmNetworks = walletConnector.evmNetworks || [];
+    const evmNetworks = (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.evmNetworks) || [];
     const _isSupportedNetwork = !network || isSupportedNetwork({ network, walletConnector });
+    const shouldDisplayWrongNetworkState = !_isSupportedNetwork && Boolean(walletConnector);
     const walletAddress = (_a = userWithMissingInfo === null || userWithMissingInfo === void 0 ? void 0 : userWithMissingInfo.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userWithMissingInfo.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
-    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' })] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
-                    'collect-user-data__form--error': !_isSupportedNetwork,
-                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: !_isSupportedNetwork, userProfile: userWithMissingInfo, children: !_isSupportedNetwork ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+    return (jsxs("div", { className: 'collect-user-data', "data-testid": 'collect-user-data-view', children: [jsxs("div", { className: 'collect-user-data__network-container', children: [jsxs("div", { className: 'collect-user-data__img-container', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("img", { src: nameService.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(AuthProviderIcon, { iconSize: 28 })), jsx(Typography, { variant: 'body_normal', color: 'primary', weight: 'medium', className: 'collect-user-data__wallet-address', children: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || shortenWalletAddress(walletAddress, 3, 3) })] }), walletConnector && (jsx(NetworkPicker, { currentNetwork: network, evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }))] }), onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), shouldDisplayWrongNetworkState && (jsx(ErrorContainer, { withIcon: false, className: 'collect-user-data__error--not-supported', copykey: 'dyn_collect_user_data.not_supported_network.error_message', children: t('dyn_collect_user_data.not_supported_network.error_message') })), jsxs("div", { className: classNames('collect-user-data__form', {
+                    'collect-user-data__form--error': shouldDisplayWrongNetworkState,
+                }), children: [jsx("div", { className: 'collect-user-data__success-icon', children: jsx(Icon, { color: 'text-primary', size: 'large', children: jsx(SvgCheckConnection, {}) }) }), jsx(OnboardingUserDataForm, { disableSubmit: shouldDisplayWrongNetworkState, userProfile: userWithMissingInfo, children: shouldDisplayWrongNetworkState ? (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.not_supported_network.title', children: t('dyn_collect_user_data.not_supported_network.title') }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.not_supported_network.description', children: t('dyn_collect_user_data.not_supported_network.description') })] })) : (jsxs("div", { className: 'collect-user-data__welcome-container', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title', copykey: 'dyn_collect_user_data.greeting', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
                                         t('dyn_collect_user_data.greeting', { appName }) }), jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', copykey: 'dyn_collect_user_data.description', children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
                                         t('dyn_collect_user_data.description') })] })) }), jsx(TextButton, { className: 'collect-user-data__log-out', onClick: handleLogOut, copykey: 'dyn_collect_user_data.log_out_button', children: t('dyn_collect_user_data.log_out_button') })] })] }));
 };