@dynamic-labs/sdk-react-core/src/lib/components/UserProfile/UserProfile.cjs

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactI18next = require('react-i18next');
var sdkApiCore = require('@dynamic-labs/sdk-api-core');
var classNames = require('../../utils/functions/classNames/classNames.cjs');
require('../Accordion/components/AccordionItem/AccordionItem.cjs');
var add = require('../../shared/assets/add.cjs');
require('@dynamic-labs/iconic');
require('../../context/ViewContext/ViewContext.cjs');
require('../../../../_virtual/_tslib.cjs');
require('../../shared/logger.cjs');
require('@dynamic-labs/wallet-connector-core');
require('@dynamic-labs/wallet-book');
var index$1 = require('../../shared/utils/functions/getValueByKey/index.cjs');
require('@dynamic-labs/utils');
require('../../utils/constants/colors.cjs');
require('../../utils/constants/values.cjs');
var fields = require('../../utils/constants/fields.cjs');
require('../../shared/consts/index.cjs');
require('../Alert/Alert.cjs');
require('../../events/dynamicEvents.cjs');
require('../../context/DynamicContext/DynamicContext.cjs');
require('../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
require('../../store/state/authMode/authMode.cjs');
var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
require('../../context/CaptchaContext/CaptchaContext.cjs');
var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
require('@dynamic-labs/multi-wallet');
require('react-international-phone');
var index = require('../../utils/functions/getEnabledOAuthProviders/index.cjs');
var getUserProfileFields = require('../../utils/functions/getUserProfileFields/getUserProfileFields.cjs');
require('../../store/state/nonce/nonce.cjs');
var isSocialKycEnabled = require('../../utils/functions/isSocialKycEnabled/isSocialKycEnabled.cjs');
require('../../store/state/projectSettings/projectSettings.cjs');
var isAllowedToLinkWallet = require('../../utils/functions/isAllowedToLinkWallet/isAllowedToLinkWallet.cjs');
require('../../config/ApiEndpoint.cjs');
require('../../store/state/user/user.cjs');
require('../../locale/locale.cjs');
require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
require('../../store/state/primaryWalletId/primaryWalletId.cjs');
require('../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
require('../../context/AccountExistsContext/AccountExistsContext.cjs');
var UserWalletsContext = require('../../context/UserWalletsContext/UserWalletsContext.cjs');
require('../../context/VerificationContext/VerificationContext.cjs');
require('react-dom');
require('../../utils/functions/compareChains/compareChains.cjs');
require('../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
require('../../context/ThemeContext/ThemeContext.cjs');
require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
require('bs58');
require('@dynamic-labs/types');
require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
require('../../context/LoadingContext/LoadingContext.cjs');
require('../../context/WalletContext/WalletContext.cjs');
require('../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
require('yup');
require('../../context/MockContext/MockContext.cjs');
var useFields = require('../../views/CollectUserDataView/useFields.cjs');
require('../../context/FieldsStateContext/FieldsStateContext.cjs');
require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
require('@dynamic-labs/rpc-providers');
require('../../store/state/walletOptions/walletOptions.cjs');
var Typography = require('../Typography/Typography.cjs');
require('../../context/FooterAnimationContext/index.cjs');
require('../ShadowDOM/ShadowDOM.cjs');
require('../Transition/ZoomTransition/ZoomTransition.cjs');
require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
require('../Transition/OpacityTransition/OpacityTransition.cjs');
require('../OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
require('../../context/WalletGroupContext/WalletGroupContext.cjs');
require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
require('react-focus-lock');
require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
var getWalletVerifiedCredential = require('../../utils/functions/getWalletVerifiedCredential/getWalletVerifiedCredential.cjs');
var Wallet = require('../../widgets/DynamicWidget/components/Wallet/Wallet.cjs');
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('../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
require('../IconButton/IconButton.cjs');
require('../../store/state/sendBalances.cjs');
require('../Input/Input.cjs');
require('../OverlayCard/OverlayCard.cjs');
require('../MenuList/Dropdown/Dropdown.cjs');
require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
require('../../context/PasskeyContext/PasskeyContext.cjs');
require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
require('../../context/OnrampContext/OnrampContext.cjs');
require('qrcode');
require('../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
require('../../../index.cjs');
require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
require('@hcaptcha/react-hcaptcha');
require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
require('../PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
require('../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
var useDynamicModals = require('../../utils/hooks/useDynamicModals/useDynamicModals.cjs');
require('../../store/state/tokenBalances.cjs');
require('../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
require('../InlineWidget/InlineWidget.cjs');
require('../IsBrowser/IsBrowser.cjs');
require('../Popper/Popper/Popper.cjs');
require('../Popper/PopperContext/PopperContext.cjs');

const UserProfile = ({ rootClassName }) => {
    var _a;
    const { projectSettings, user, setSelectedWalletConnectorKey, multiWallet, primaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
    const { error } = ErrorContext.useErrorContext();
    const { setShowLinkNewWalletModal } = useDynamicModals.useDynamicModals();
    const { userWallets } = UserWalletsContext.useInternalUserWallets();
    const { t } = reactI18next.useTranslation();
    const { fieldsConfig } = useFields.useFields();
    const containerRef = React.useRef(null);
    React.useEffect(() => {
        if (error && containerRef.current) {
            containerRef.current.scrollTop = 0;
        }
    }, [error]);
    const allUserFields = getUserProfileFields.getUserProfileFields({
        customFields: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.customFields,
        projectSettingsKyc: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.kyc,
        user,
    });
    const ensDomain = React.useMemo(() => { var _a; return (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.nameService) === null || _a === void 0 ? void 0 : _a.evm.domain; }, [projectSettings]);
    const showEnsField = React.useMemo(() => (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isEmbeddedWallet) && ensDomain, [primaryWallet, ensDomain]);
    const providers = isSocialKycEnabled.isSocialKycEnabled(projectSettings)
        ? index.getEnabledOAuthProviders(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers)
        : [];
    const canLink = isAllowedToLinkWallet.isAllowedToLinkWallet(projectSettings, user === null || user === void 0 ? void 0 : user.verifiedCredentials, multiWallet);
    const addNewWallet = () => {
        setShowLinkNewWalletModal(true);
        setSelectedWalletConnectorKey(null);
    };
    const mapFieldKeyToValue = (fieldKey) => user === null || user === void 0 ? void 0 : user[fieldKey];
    if (!user)
        return null;
    // 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'), 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 : '';
                            let fieldValue = value;
                            if (validationType === sdkApiCore.CustomFieldType.Checkbox)
                                fieldValue = value.length > 0 ? 'Checked' : 'Unchecked';
                            // Use name instead of label here because the back-end doesn't set label
                            let fieldLabel = name;
                            if (name === fields.NAME_SERVICE_FIELD_NAME) {
                                if (!showEnsField) {
                                    return null;
                                }
                                fieldLabel = t('dyn_subdomain_field.label');
                                if (fieldValue !== '') {
                                    fieldValue = `${fieldValue}.${ensDomain}`;
                                }
                                else {
                                    fieldValue = '';
                                }
                            }
                            return (jsxRuntime.jsx(UserProfileField.UserProfileField, { name: name, label: fieldLabel, value: fieldValue }, name));
                        }
                        const { key } = index$1.getValueByKey(fieldsConfig, name);
                        const value = mapFieldKeyToValue(name);
                        return (jsxRuntime.jsx(UserProfileField.UserProfileField, { copykey: key, name: name, label: t(`${key}`), value: value }, name));
                    }) }) })), canLink && !multiWallet && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.wallets.title'), children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'link-wallet-button', onClick: addNewWallet, startSlot: jsxRuntime.jsx(add.ReactComponent, {}), showInternalLoading: false, children: jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_user_profile.wallets.link_wallet_button', children: t('dyn_user_profile.wallets.link_wallet_button') }) }) })), (providers === null || providers === void 0 ? void 0 : providers.length) > 0 && (jsxRuntime.jsx(UserProfileSection.UserProfileSection, { title: t('dyn_user_profile.social_accounts.title'), children: jsxRuntime.jsx("div", { className: 'user-profile__social-accounts', children: providers.map(({ provider }) => (jsxRuntime.jsx(UserProfileSocialAccount.UserProfileSocialAccount, { provider: provider }, provider))) }) }))] }));
};

exports.UserProfile = UserProfile;