@dynamic-labs/sdk-react-core 3.0.0-alpha.37 → 3.0.0-alpha.38

package/CHANGELOG.md

@@ -1,4 +1,16 @@
 
+## [3.0.0-alpha.38](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.37...v3.0.0-alpha.38) (2024-08-09)
+
+
+### Features
+
+* add dynamic footer options switcher ([#6528](https://github.com/dynamic-labs/DynamicAuth/issues/6528)) ([7d8a7ff](https://github.com/dynamic-labs/DynamicAuth/commit/7d8a7ff5c7d07e3ac2a916bd8b37e87e7cbfdaa2))
+
+
+### Bug Fixes
+
+* hcaptcha for mobile login ([#6525](https://github.com/dynamic-labs/DynamicAuth/issues/6525)) ([146888e](https://github.com/dynamic-labs/DynamicAuth/commit/146888e91add7f3be3ed4defafc038107648c20a))
+
 ## [3.0.0-alpha.37](https://github.com/dynamic-labs/DynamicAuth/compare/v3.0.0-alpha.36...v3.0.0-alpha.37) (2024-08-08)
 
 

package/package.cjs

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

package/package.js

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

package/package.json

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

package/src/lib/components/EmailForm/EmailForm.cjs

@@ -62,8 +62,8 @@ require('react-focus-lock');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../IconButton/IconButton.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 var Input = require('../Input/Input.cjs');
 require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/components/EmailForm/EmailForm.js

@@ -58,8 +58,8 @@ import 'react-focus-lock';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../IconButton/IconButton.js';
 import '../MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import { Input } from '../Input/Input.js';
 import '../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.cjs

@@ -66,8 +66,8 @@ var useWalletDownloadLinks = require('../../../widgets/DynamicWidget/hooks/useWa
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../MenuList/Dropdown/Dropdown.cjs');
-require('formik');
 var TypographyButton = require('../../TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../Input/Input.cjs');
 require('../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/components/QrCodeWrapper/QrCodeContainer/QrCodeContainer.js

@@ -62,8 +62,8 @@ import { useWalletDownloadLinks } from '../../../widgets/DynamicWidget/hooks/use
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../IconButton/IconButton.js';
 import '../../MenuList/Dropdown/Dropdown.js';
-import 'formik';
 import { TypographyButton } from '../../TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../Input/Input.js';
 import '../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/components/UserProfile/UserProfile.cjs

@@ -73,6 +73,7 @@ var ErrorContainer = require('../ErrorContainer/ErrorContainer.cjs');
 var UserProfileField = require('./parts/UserProfileField/UserProfileField.cjs');
 var UserProfileSection = require('./parts/UserProfileSection/UserProfileSection.cjs');
 var UserProfileSocialAccount = require('./parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs');
+var EditProfileButton = require('./parts/EditProfileButton/EditProfileButton.cjs');
 require('formik');
 var TypographyButton = require('../TypographyButton/TypographyButton.cjs');
 require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
@@ -137,7 +138,7 @@ const UserProfile = ({ rootClassName }) => {
     // if it's multiwallet, the wallet should appear in the wallets tab
     // if there's a primary wallet, it will be displayed in the header
     const wallet = !multiWallet && !primaryWallet && userWallets[0];
-    return (jsxRuntime.jsxs("div", { "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), wallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsxRuntime.jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
+    return (jsxRuntime.jsxs("div", { "data-testid": 'userProfile', className: classNames.classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), wallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.my_information.title'), action: jsxRuntime.jsx(EditProfileButton.EditProfileButton, {}), children: jsxRuntime.jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
                         var _a, _b;
                         if (type === sdkApiCore.KycFieldType.Custom) {
                             const value = (_b = (_a = user.metadata) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : '';

package/src/lib/components/UserProfile/UserProfile.js

@@ -69,6 +69,7 @@ import { ErrorContainer } from '../ErrorContainer/ErrorContainer.js';
 import { UserProfileField } from './parts/UserProfileField/UserProfileField.js';
 import { UserProfileSection } from './parts/UserProfileSection/UserProfileSection.js';
 import { UserProfileSocialAccount } from './parts/UserProfileSocialAccount/UserProfileSocialAccount.js';
+import { EditProfileButton } from './parts/EditProfileButton/EditProfileButton.js';
 import 'formik';
 import { TypographyButton } from '../TypographyButton/TypographyButton.js';
 import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
@@ -133,7 +134,7 @@ const UserProfile = ({ rootClassName }) => {
     // if it's multiwallet, the wallet should appear in the wallets tab
     // if there's a primary wallet, it will be displayed in the header
     const wallet = !multiWallet && !primaryWallet && userWallets[0];
-    return (jsxs("div", { "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsx(ErrorContainer, { children: error }), wallet && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_information.title'), children: jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
+    return (jsxs("div", { "data-testid": 'userProfile', className: classNames('user-profile', rootClassName), ref: containerRef, children: [error && jsx(ErrorContainer, { children: error }), wallet && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_wallet.title'), children: jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id) })), (allUserFields === null || allUserFields === void 0 ? void 0 : allUserFields.length) > 0 && (jsx(UserProfileSection, { title: t('dyn_user_profile.my_information.title'), action: jsx(EditProfileButton, {}), children: jsx("div", { className: 'user-profile__fields', children: allUserFields.map(({ name, validationType, type, label }) => {
                         var _a, _b;
                         if (type === KycFieldType.Custom) {
                             const value = (_b = (_a = user.metadata) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : '';

package/src/lib/components/UserProfile/parts/EditProfileButton/EditProfileButton.cjs

@@ -0,0 +1,112 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+require('react');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var pencil = require('../../../../shared/assets/pencil.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('../../../../shared/utils/classes/storage/sessionStorage.cjs');
+require('@dynamic-labs/utils');
+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('react-international-phone');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/store');
+require('../../../../locale/locale.cjs');
+var getUserProfileFields = require('../../../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../context/WalletContext/WalletContext.cjs');
+require('../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('@dynamic-labs/types');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('yup');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../views/CollectUserDataView/useFields.cjs');
+require('../../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../Alert/Alert.cjs');
+var TypographyButton = require('../../../TypographyButton/TypographyButton.cjs');
+require('../../../ShadowDOM/ShadowDOM.cjs');
+require('../../../IconButton/IconButton.cjs');
+require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../Input/Input.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
+require('../../../MenuList/Dropdown/Dropdown.cjs');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../Popper/Popper/Popper.cjs');
+require('../../../Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../../../../views/WalletList/WalletList.cjs');
+require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+var DynamicWidgetContext = require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../../../polyfills.cjs');
+require('../../../../context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('../../../../context/ErrorBoundary/ErrorBoundaryContext.cjs');
+require('../../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
+require('../../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.cjs');
+require('../../../../context/WidgetRegistry/WidgetRegistryContextProvider.cjs');
+require('../../../../context/FundingContext/FundingContext.cjs');
+require('../../../../context/SendBalanceContext/SendBalanceContext.cjs');
+require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../../context/ConnectWithOtpContext/constants.cjs');
+require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
+
+const EditProfileButton = () => {
+    var _a, _b;
+    const { t } = reactI18next.useTranslation();
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    // Allow to navigate to edit profile view when there are fields what can be edited
+    const editableUserFields = getUserProfileFields.getEditableUserProfileFields([
+        ...((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc) !== null && _a !== void 0 ? _a : []),
+        ...((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.customFields) !== null && _b !== void 0 ? _b : []),
+    ]);
+    if (!(editableUserFields === null || editableUserFields === void 0 ? void 0 : editableUserFields.length))
+        return null;
+    return (jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', typographyProps: {
+            color: 'secondary',
+            variant: 'button_tertiary',
+        }, copykey: 'dyn_user_profile.edit_profile_button', onClick: () => setDynamicWidgetView('edit-profile'), startSlot: jsxRuntime.jsx(pencil.ReactComponent, {}), children: t('dyn_user_profile.edit_profile_button') }));
+};
+
+exports.EditProfileButton = EditProfileButton;

package/src/lib/components/UserProfile/parts/EditProfileButton/EditProfileButton.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const EditProfileButton: FC;

package/src/lib/components/UserProfile/parts/EditProfileButton/EditProfileButton.js

@@ -0,0 +1,108 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import 'react';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgPencil } from '../../../../shared/assets/pencil.js';
+import '@dynamic-labs/wallet-book';
+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 '@dynamic-labs/utils';
+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 'react-international-phone';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/store';
+import '../../../../locale/locale.js';
+import { getEditableUserProfileFields } from '../../../../utils/functions/getUserProfileFields/getUserProfileFields.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../../../context/WalletContext/WalletContext.js';
+import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import '@dynamic-labs/types';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import 'yup';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../views/CollectUserDataView/useFields.js';
+import '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../Alert/Alert.js';
+import { TypographyButton } from '../../../TypographyButton/TypographyButton.js';
+import '../../../ShadowDOM/ShadowDOM.js';
+import '../../../IconButton/IconButton.js';
+import '../../../InlineWidget/InlineWidget.js';
+import '../../../Input/Input.js';
+import '../../../IsBrowser/IsBrowser.js';
+import '../../../MenuList/Dropdown/Dropdown.js';
+import '../../../Transition/ZoomTransition/ZoomTransition.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.js';
+import '../../../OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../Popper/Popper/Popper.js';
+import '../../../Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../../../../views/WalletList/WalletList.js';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import { useWidgetContext } from '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../../../polyfills.js';
+import '../../../../context/ErrorBoundary/ErrorBoundaryBase.js';
+import '../../../../context/ErrorBoundary/ErrorBoundaryContext.js';
+import '../../../../widgets/DynamicBridgeWidget/context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
+import '../../../../widgets/DynamicWidget/components/DynamicWidgetCard/DynamicWidgetCard.js';
+import '../../../../context/WidgetRegistry/WidgetRegistryContextProvider.js';
+import '../../../../context/FundingContext/FundingContext.js';
+import '../../../../context/SendBalanceContext/SendBalanceContext.js';
+import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../../context/ConnectWithOtpContext/constants.js';
+import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
+
+const EditProfileButton = () => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const { projectSettings } = useInternalDynamicContext();
+    const { setDynamicWidgetView } = useWidgetContext();
+    // Allow to navigate to edit profile view when there are fields what can be edited
+    const editableUserFields = getEditableUserProfileFields([
+        ...((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc) !== null && _a !== void 0 ? _a : []),
+        ...((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.customFields) !== null && _b !== void 0 ? _b : []),
+    ]);
+    if (!(editableUserFields === null || editableUserFields === void 0 ? void 0 : editableUserFields.length))
+        return null;
+    return (jsx(TypographyButton, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', typographyProps: {
+            color: 'secondary',
+            variant: 'button_tertiary',
+        }, copykey: 'dyn_user_profile.edit_profile_button', onClick: () => setDynamicWidgetView('edit-profile'), startSlot: jsx(SvgPencil, {}), children: t('dyn_user_profile.edit_profile_button') }));
+};
+
+export { EditProfileButton };

package/src/lib/components/UserProfile/parts/EditProfileButton/index.d.ts

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

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.cjs

@@ -88,6 +88,6 @@ require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs
 require('../../../InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const UserProfileSection = ({ title, children, }) => (jsxRuntime.jsxs("div", { className: 'user-profile-section', children: [title && (jsxRuntime.jsx(Typography.Typography, { as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title', children: title })), children] }));
+const UserProfileSection = ({ title, children, action, }) => (jsxRuntime.jsxs("div", { className: 'user-profile-section', children: [jsxRuntime.jsx("div", { className: 'user-profile-section__header', children: title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title', children: title }), action && (jsxRuntime.jsx("div", { className: 'user-profile-section__action', children: action }))] })) }), children] }));
 
 exports.UserProfileSection = UserProfileSection;

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 export type UserProfileSectionProps = {
     children: React.ReactNode;
     title?: string;
+    action?: React.ReactNode;
 };
-export declare const UserProfileSection: ({ title, children, }: UserProfileSectionProps) => JSX.Element;
+export declare const UserProfileSection: ({ title, children, action, }: UserProfileSectionProps) => JSX.Element;

package/src/lib/components/UserProfile/parts/UserProfileSection/UserProfileSection.js

@@ -1,5 +1,5 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '../../../Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../Alert/Alert.js';
 import 'react';
@@ -84,6 +84,6 @@ import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../../InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const UserProfileSection = ({ title, children, }) => (jsxs("div", { className: 'user-profile-section', children: [title && (jsx(Typography, { as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title', children: title })), children] }));
+const UserProfileSection = ({ title, children, action, }) => (jsxs("div", { className: 'user-profile-section', children: [jsx("div", { className: 'user-profile-section__header', children: title && (jsxs(Fragment, { children: [jsx(Typography, { as: 'h6', color: 'secondary', weight: 'medium', variant: 'body_small', className: 'user-profile-section__title', children: title }), action && (jsx("div", { className: 'user-profile-section__action', children: action }))] })) }), children] }));
 
 export { UserProfileSection };

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -69,8 +69,8 @@ require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 var ConnectedAccountAvatar = require('./components/ConnectedAccountAvatar/ConnectedAccountAvatar.cjs');
-require('formik');
 var TypographyButton = require('../../../TypographyButton/TypographyButton.cjs');
+require('formik');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../Input/Input.cjs');
 require('../../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -65,8 +65,8 @@ import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../IconButton/IconButton.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
 import { ConnectedAccountAvatar } from './components/ConnectedAccountAvatar/ConnectedAccountAvatar.js';
-import 'formik';
 import { TypographyButton } from '../../../TypographyButton/TypographyButton.js';
+import 'formik';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../Input/Input.js';
 import '../../../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';

package/src/lib/components/index.d.ts

@@ -34,7 +34,6 @@ export * from './ModalHeader';
 export * from './ModalHeaderBanner';
 export * from './NeedHelpSection';
 export * from './OTPVerificationView';
-export * from './OptionsSwitcher';
 export * from './PasskeyCreatedSuccessBanner';
 export * from './PhoneNumberField';
 export * from './PinField';
@@ -71,3 +70,4 @@ export * from './TypographyButton';
 export * from './WalletInformationCard';
 export * from './EmailForm';
 export * from './StatusDot';
+export * from './OptionsSwitcher';

package/src/lib/context/CaptchaContext/CaptchaContext.cjs

@@ -6,37 +6,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ViewContext = require('../ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/wallet-book');
+var localStorage = require('../../utils/constants/localStorage.cjs');
+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 useLocalStorage = require('../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
+require('@dynamic-labs/utils');
+require('../../shared/consts/index.cjs');
 
-const CaptchaTokenLocalStorageKey = 'dynamic-captcha-token';
 const CaptchaContext = React.createContext(undefined);
 const CaptchaContextProvider = ({ children, }) => {
     const { setView } = ViewContext.useViewContext();
-    const [captchaToken, setCaptchaToken] = React.useState(undefined);
+    const [captchaToken, setCaptchaToken, removeCaptchaToken] = useLocalStorage.useLocalStorage(localStorage.CAPTCHA_TOKEN, undefined);
     const [captchaAuthState, setCaptchaAuthState] = React.useState();
-    const setCaptchaTokenInLS = React.useCallback((token) => localStorage.setItem(CaptchaTokenLocalStorageKey, token), []);
     const engageCaptcha = React.useCallback(({ authMethod, onCaptchaSuccess, }) => {
         setCaptchaAuthState({ authMethod, onCaptchaSuccess });
         setView('captcha');
     }, [setView, setCaptchaAuthState]);
     const getCaptchaToken = React.useCallback(() => {
-        var _a;
-        return (_a = captchaToken !== null && captchaToken !== void 0 ? captchaToken : localStorage.getItem(CaptchaTokenLocalStorageKey)) !== null && _a !== void 0 ? _a : undefined;
-    }, [captchaToken]);
+        const token = captchaToken;
+        removeCaptchaToken();
+        return token;
+    }, [captchaToken, removeCaptchaToken]);
     const value = React.useMemo(() => ({
         captchaAuthState,
-        captchaToken,
         engageCaptcha,
         getCaptchaToken,
+        removeCaptchaToken,
         setCaptchaAuthState,
         setCaptchaToken,
-        setCaptchaTokenInLS,
     }), [
         captchaAuthState,
-        captchaToken,
+        getCaptchaToken,
         engageCaptcha,
         setCaptchaAuthState,
-        setCaptchaTokenInLS,
-        getCaptchaToken,
+        setCaptchaToken,
+        removeCaptchaToken,
     ]);
     return (jsxRuntime.jsx(CaptchaContext.Provider, { value: value, children: children }));
 };
@@ -50,5 +61,4 @@ const useCaptchaContext = () => {
 
 exports.CaptchaContext = CaptchaContext;
 exports.CaptchaContextProvider = CaptchaContextProvider;
-exports.CaptchaTokenLocalStorageKey = CaptchaTokenLocalStorageKey;
 exports.useCaptchaContext = useCaptchaContext;

package/src/lib/context/CaptchaContext/CaptchaContext.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, SetStateAction, Dispatch } from 'react';
 type CaptchaContextProps = {
-    captchaToken: string | undefined;
+    getCaptchaToken: () => string | undefined;
     setCaptchaToken: Dispatch<SetStateAction<string | undefined>>;
     captchaAuthState: CaptchaAuthenticationState | undefined;
     setCaptchaAuthState: Dispatch<SetStateAction<CaptchaAuthenticationState | undefined>>;
@@ -8,11 +8,8 @@ type CaptchaContextProps = {
         authMethod: AuthMethod;
         onCaptchaSuccess: (captchaToken: string) => Promise<void>;
     }) => void;
-    setCaptchaTokenInLS: (token: string) => void;
-    getCaptchaToken: () => string | undefined;
 };
 export type AuthMethod = 'wallet' | 'email' | 'social' | 'phone';
-export declare const CaptchaTokenLocalStorageKey = "dynamic-captcha-token";
 interface CaptchaAuthenticationState {
     authMethod: AuthMethod;
     onCaptchaSuccess: (captchaToken: string) => Promise<void>;

package/src/lib/context/CaptchaContext/CaptchaContext.js

@@ -2,37 +2,48 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useMemo, useContext } from 'react';
 import { useViewContext } from '../ViewContext/ViewContext.js';
+import '@dynamic-labs/sdk-api-core';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/wallet-book';
+import { CAPTCHA_TOKEN } from '../../utils/constants/localStorage.js';
+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 { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
+import '@dynamic-labs/utils';
+import '../../shared/consts/index.js';
 
-const CaptchaTokenLocalStorageKey = 'dynamic-captcha-token';
 const CaptchaContext = createContext(undefined);
 const CaptchaContextProvider = ({ children, }) => {
     const { setView } = useViewContext();
-    const [captchaToken, setCaptchaToken] = useState(undefined);
+    const [captchaToken, setCaptchaToken, removeCaptchaToken] = useLocalStorage(CAPTCHA_TOKEN, undefined);
     const [captchaAuthState, setCaptchaAuthState] = useState();
-    const setCaptchaTokenInLS = useCallback((token) => localStorage.setItem(CaptchaTokenLocalStorageKey, token), []);
     const engageCaptcha = useCallback(({ authMethod, onCaptchaSuccess, }) => {
         setCaptchaAuthState({ authMethod, onCaptchaSuccess });
         setView('captcha');
     }, [setView, setCaptchaAuthState]);
     const getCaptchaToken = useCallback(() => {
-        var _a;
-        return (_a = captchaToken !== null && captchaToken !== void 0 ? captchaToken : localStorage.getItem(CaptchaTokenLocalStorageKey)) !== null && _a !== void 0 ? _a : undefined;
-    }, [captchaToken]);
+        const token = captchaToken;
+        removeCaptchaToken();
+        return token;
+    }, [captchaToken, removeCaptchaToken]);
     const value = useMemo(() => ({
         captchaAuthState,
-        captchaToken,
         engageCaptcha,
         getCaptchaToken,
+        removeCaptchaToken,
         setCaptchaAuthState,
         setCaptchaToken,
-        setCaptchaTokenInLS,
     }), [
         captchaAuthState,
-        captchaToken,
+        getCaptchaToken,
         engageCaptcha,
         setCaptchaAuthState,
-        setCaptchaTokenInLS,
-        getCaptchaToken,
+        setCaptchaToken,
+        removeCaptchaToken,
     ]);
     return (jsx(CaptchaContext.Provider, { value: value, children: children }));
 };
@@ -44,4 +55,4 @@ const useCaptchaContext = () => {
     return context;
 };
 
-export { CaptchaContext, CaptchaContextProvider, CaptchaTokenLocalStorageKey, useCaptchaContext };
+export { CaptchaContext, CaptchaContextProvider, useCaptchaContext };