@dynamic-labs/sdk-react-core 0.16.0

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

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { WalletUiUtils } from '@dynamic-labs/multi-wallet';
+import { WalletUiUtilsHookProps } from './useWalletUiUtils.types';
+export declare const useWalletUiUtils: ({ appLogoUrl, appName, getAppOrigin, }: WalletUiUtilsHookProps) => [ReactNode | undefined, WalletUiUtils];

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.es.js

@@ -0,0 +1,42 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.es.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useCallback, useMemo } from 'react';
+import { SignMessageConfirmationModal } from '../../../modals/SignMessageConfirmationModal/SignMessageConfirmationModal.es.js';
+import { TransactionConfirmationModal } from '../../../modals/TransactionConfirmationModal/TransactionConfirmationModal.es.js';
+import { useConfirmationModal } from '../useConfirmationModal/useConfirmationModal.es.js';
+import '../../constants/colors.es.js';
+import '@dynamic-labs/multi-wallet';
+import { getAuthToken } from '../../functions/getAuthToken/getAuthToken.es.js';
+import '@dynamic-labs/sdk-api';
+
+const useWalletUiUtils = ({ appLogoUrl, appName, getAppOrigin, }) => {
+    const fakeSignerRef = useRef('disabled');
+    const { modal: sendTransactionModal, open: openSendTransaction } = useConfirmationModal({
+        elementId: 'dynamic-send-transaction',
+    });
+    const { modal, open: openSignMessage } = useConfirmationModal({
+        elementId: 'dynamic-sign-message',
+    });
+    const signMessage = useCallback(({ message, handler }) => {
+        const jwt = getAuthToken();
+        if (!jwt && fakeSignerRef.current === 'enabled') {
+            fakeSignerRef.current = 'disabled';
+            return handler(message);
+        }
+        return openSignMessage((resolve, reject) => (jsx(SignMessageConfirmationModal, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), message: message, handler: handler, onSignMessage: resolve, onReject: reject })));
+    }, [appLogoUrl, appName, getAppOrigin, openSignMessage]);
+    const sendTransaction = useCallback(({ transaction, handler, provider }) => __awaiter(void 0, void 0, void 0, function* () {
+        return openSendTransaction((resolve, reject) => (jsx(TransactionConfirmationModal, { title: 'Send Transaction', appLogoUrl: appLogoUrl, appName: appName, appOrigin: getAppOrigin(), transaction: transaction, handler: handler, onTransactionResponseSuccess: resolve, onReject: reject, provider: provider })));
+    }), [appLogoUrl, appName, getAppOrigin, openSendTransaction]);
+    const enableInternalSign = useCallback(() => {
+        fakeSignerRef.current = 'enabled';
+    }, []);
+    const walletUiUtils = useMemo(() => ({
+        enableInternalSign,
+        sendTransaction,
+        signMessage,
+    }), [signMessage, enableInternalSign, sendTransaction]);
+    return useMemo(() => [modal || sendTransactionModal, walletUiUtils], [modal, sendTransactionModal, walletUiUtils]);
+};
+
+export { useWalletUiUtils };

package/src/lib/utils/hooks/useWalletUiUtils/useWalletUiUtils.types.d.ts

@@ -0,0 +1,5 @@
+export type WalletUiUtilsHookProps = {
+    appLogoUrl?: string;
+    appName?: string;
+    getAppOrigin: () => string;
+};

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

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

package/src/lib/utils/hooks/useWallets/useWallets.cjs.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs.js');
+var React = require('react');
+var data = require('../../../views/WalletList/data.cjs.js');
+var getMagicLinkApiKeyFromProviders = require('./utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.cjs.js');
+
+const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, vendorCredentials, walletUiUtils, magicLinkConfig, }) => {
+    const [wallets, setWallets] = React.useState([]);
+    React.useEffect(() => {
+        const getWalletList = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            if (projectSettings) {
+                const magicLinkApiKey = getMagicLinkApiKeyFromProviders.getMagicLinkApiKeyFromProviders((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []);
+                const installedWallets = yield data.getInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const notInstalledWallets = yield data.getNotInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const unfilteredWallets = [...installedWallets, ...notInstalledWallets];
+                setWallets(unfilteredWallets);
+            }
+        });
+        getWalletList();
+    }, [
+        projectSettings,
+        appLogoUrl,
+        appName,
+        vendorCredentials,
+        networkConfigurations,
+    ]);
+    return { wallets };
+};
+
+exports.useWallets = useWallets;

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

@@ -0,0 +1,16 @@
+import { MagicLinkConfig, NetworkConfigurationMap, VendorCredentials, WalletUiUtils } from '@dynamic-labs/multi-wallet';
+import { ProjectSettings } from '@dynamic-labs/sdk-api';
+import { WalletOption } from '../../../shared';
+type Props = {
+    appLogoUrl?: string;
+    appName?: string;
+    magicLinkConfig?: MagicLinkConfig;
+    networkConfigurations: NetworkConfigurationMap | undefined;
+    projectSettings: ProjectSettings | undefined;
+    vendorCredentials?: VendorCredentials;
+    walletUiUtils: WalletUiUtils;
+};
+export declare const useWallets: ({ projectSettings, appLogoUrl, appName, networkConfigurations, vendorCredentials, walletUiUtils, magicLinkConfig, }: Props) => {
+    wallets: WalletOption[];
+};
+export {};

package/src/lib/utils/hooks/useWallets/useWallets.es.js

@@ -0,0 +1,47 @@
+import { __awaiter } from '../../../../../_virtual/_tslib.es.js';
+import { useState, useEffect } from 'react';
+import { getInstalledWallets, getNotInstalledWallets } from '../../../views/WalletList/data.es.js';
+import { getMagicLinkApiKeyFromProviders } from './utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.es.js';
+
+const useWallets = ({ projectSettings, appLogoUrl, appName, networkConfigurations, vendorCredentials, walletUiUtils, magicLinkConfig, }) => {
+    const [wallets, setWallets] = useState([]);
+    useEffect(() => {
+        const getWalletList = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (projectSettings) {
+                const magicLinkApiKey = getMagicLinkApiKeyFromProviders((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []);
+                const installedWallets = yield getInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const notInstalledWallets = yield getNotInstalledWallets(projectSettings, {
+                    appLogoUrl,
+                    appName,
+                    magicLinkApiKey,
+                    magicLinkConfig,
+                    networkConfigurations,
+                    skipMemo: true,
+                    vendorCredentials,
+                    walletUiUtils,
+                });
+                const unfilteredWallets = [...installedWallets, ...notInstalledWallets];
+                setWallets(unfilteredWallets);
+            }
+        });
+        getWalletList();
+    }, [
+        projectSettings,
+        appLogoUrl,
+        appName,
+        vendorCredentials,
+        networkConfigurations,
+    ]);
+    return { wallets };
+};
+
+export { useWallets };

package/src/lib/utils/hooks/useWallets/utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var sdkApi = require('@dynamic-labs/sdk-api');
+
+const getMagicLinkApiKeyFromProviders = (providers) => {
+    const [magicLinkProvider] = providers.filter(({ provider }) => provider === sdkApi.ProviderEnum.MagicLink);
+    return magicLinkProvider === null || magicLinkProvider === void 0 ? void 0 : magicLinkProvider.providerProjectId;
+};
+
+exports.getMagicLinkApiKeyFromProviders = getMagicLinkApiKeyFromProviders;

package/src/lib/utils/hooks/useWallets/utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.d.ts

@@ -0,0 +1,2 @@
+import { Provider } from '@dynamic-labs/sdk-api';
+export declare const getMagicLinkApiKeyFromProviders: (providers: Provider[]) => string | undefined;

package/src/lib/utils/hooks/useWallets/utils/getMagicLinkApiKeyFromProviders/getMagicLinkApiKeyFromProviders.es.js

@@ -0,0 +1,8 @@
+import { ProviderEnum } from '@dynamic-labs/sdk-api';
+
+const getMagicLinkApiKeyFromProviders = (providers) => {
+    const [magicLinkProvider] = providers.filter(({ provider }) => provider === ProviderEnum.MagicLink);
+    return magicLinkProvider === null || magicLinkProvider === void 0 ? void 0 : magicLinkProvider.providerProjectId;
+};
+
+export { getMagicLinkApiKeyFromProviders };

package/src/lib/utils/hooks/useWallets/utils/getMagicLinkApiKeyFromProviders/index.d.ts

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

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

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

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.cjs.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/multi-wallet');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var requiresTwoStepAuthentication = require('../../utils/functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+var useVerifyWallet = require('../../utils/hooks/useVerifyWallet/useVerifyWallet.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+var CaptchaContext = require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs.js');
+var Captcha = require('../../components/Captcha/Captcha.cjs.js');
+
+const CaptchaVerifyUser = () => {
+    const { consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setView } = ViewContext.useViewContext();
+    const { setCaptchaToken } = CaptchaContext.useCaptchaContext();
+    const verifyWallet = useVerifyWallet.useVerifyWallet({
+        consumeNonce,
+        displayTermsOfService,
+        environmentId,
+        projectSettings,
+        setIsSingleWalletAccount,
+    });
+    if (!walletConnector) {
+        return null;
+    }
+    const handleSuccess = (captchaToken) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        const publicWalletAddress = yield walletConnector.fetchPublicAddress();
+        if (!publicWalletAddress) {
+            return;
+        }
+        setView('pending-signature');
+        if (requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector)) {
+            setCaptchaToken(captchaToken);
+            return;
+        }
+        yield verifyWallet({
+            captchaToken,
+            publicWalletAddress,
+            walletConnector,
+        });
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'captcha-verify-user__container' }, { children: [jsxRuntime.jsx(iconic.CaptchaWaveIcon, { className: 'captcha-verify-user__icon' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'captcha-verify-user__title' }, { children: "Let\u2019s verify you\u2019re human" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'captcha-verify-user__subtitle' }, { children: "We need to quickly verify you\u2019re human before we proceed." })), jsxRuntime.jsx(Captcha.Captcha, { handleSuccess: handleSuccess }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'captcha-verify-user__dynamic-logo' })] })));
+};
+
+exports.CaptchaVerifyUser = CaptchaVerifyUser;

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CaptchaVerifyUser: () => JSX.Element | null;

package/src/lib/views/CaptchaVerifyUser/CaptchaVerifyUser.es.js

@@ -0,0 +1,65 @@
+import { __awaiter } from '../../../../_virtual/_tslib.es.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CaptchaWaveIcon } from '@dynamic-labs/iconic';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/multi-wallet';
+import { useViewContext } from '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { requiresTwoStepAuthentication } from '../../utils/functions/requiresTwoStepAuthentication/requiresTwoStepAuthentication.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import { useVerifyWallet } from '../../utils/hooks/useVerifyWallet/useVerifyWallet.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import { useCaptchaContext } from '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.es.js';
+import { Captcha } from '../../components/Captcha/Captcha.es.js';
+
+const CaptchaVerifyUser = () => {
+    const { consumeNonce, displayTermsOfService, environmentId, projectSettings, setIsSingleWalletAccount, selectedWalletConnector: walletConnector, } = useInternalDynamicContext();
+    const { setView } = useViewContext();
+    const { setCaptchaToken } = useCaptchaContext();
+    const verifyWallet = useVerifyWallet({
+        consumeNonce,
+        displayTermsOfService,
+        environmentId,
+        projectSettings,
+        setIsSingleWalletAccount,
+    });
+    if (!walletConnector) {
+        return null;
+    }
+    const handleSuccess = (captchaToken) => __awaiter(void 0, void 0, void 0, function* () {
+        const publicWalletAddress = yield walletConnector.fetchPublicAddress();
+        if (!publicWalletAddress) {
+            return;
+        }
+        setView('pending-signature');
+        if (requiresTwoStepAuthentication(walletConnector)) {
+            setCaptchaToken(captchaToken);
+            return;
+        }
+        yield verifyWallet({
+            captchaToken,
+            publicWalletAddress,
+            walletConnector,
+        });
+    });
+    return (jsxs("div", Object.assign({ className: 'captcha-verify-user__container' }, { children: [jsx(CaptchaWaveIcon, { className: 'captcha-verify-user__icon' }), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'captcha-verify-user__title' }, { children: "Let\u2019s verify you\u2019re human" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'captcha-verify-user__subtitle' }, { children: "We need to quickly verify you\u2019re human before we proceed." })), jsx(Captcha, { handleSuccess: handleSuccess }), jsx(PoweredByDynamic, { classNameRoot: 'captcha-verify-user__dynamic-logo' })] })));
+};
+
+export { CaptchaVerifyUser };

package/src/lib/views/CaptchaVerifyUser/index.d.ts

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

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Typography = require('../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+var createUserProfile = require('../../utils/functions/createUserProfile/createUserProfile.cjs.js');
+var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs.js');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+require('../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+var TextButton = require('../../components/TextButton/TextButton.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../components/IconButton/IconButton.cjs.js');
+var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs.js');
+var NetworkPicker = require('../../components/NetworkPicker/NetworkPicker.cjs.js');
+var UserAddress = require('../../components/UserAddress/UserAddress.cjs.js');
+var UserDataForm = require('./UserDataForm/UserDataForm.cjs.js');
+
+const CollectUserDataView = () => {
+    var _a, _b;
+    const { appName, handleLogOut, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, onboardingImageUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
+    if (!walletConnector || !decodedOnboardingOnlyToken) {
+        return null;
+    }
+    const userProfile = createUserProfile.createUserProfile(decodedOnboardingOnlyToken);
+    const evmNetworks = walletConnector.evmNetworks || [];
+    const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data', "data-testid": 'collect-user-data-view' }, { children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'collect-user-data__error--not-supported' }, { children: "This network is not available, please update." }))), jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data__form' }, { children: [jsxRuntime.jsxs(UserDataForm.UserDataForm, Object.assign({ disableSubmit: !_isSupportedNetwork, userProfile: userProfile }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'collect-user-data__img-container' }, { children: ((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsxRuntime.jsx("img", { src: (_b = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } })) })), jsxRuntime.jsx(UserAddress.UserAddress, { userProfile: userProfile }), jsxRuntime.jsx("div", Object.assign({ className: 'collect-user-data__network-container' }, { children: jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }) })), !_isSupportedNetwork ? (jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data__welcome-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title' }, { children: "Update Network" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] }))) : (jsxRuntime.jsxs("div", Object.assign({ className: 'collect-user-data__welcome-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                            `Welcome to ${appName}` })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                            'We need a bit of information to get started' }))] })))] })), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'collect-user-data__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+};
+
+exports.CollectUserDataView = CollectUserDataView;

package/src/lib/views/CollectUserDataView/CollectUserDataView.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CollectUserDataView: () => JSX.Element | null;

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import { createUserProfile } from '../../utils/functions/createUserProfile/createUserProfile.es.js';
+import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.es.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import { TextButton } from '../../components/TextButton/TextButton.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../components/IconButton/IconButton.es.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.es.js';
+import { NetworkPicker } from '../../components/NetworkPicker/NetworkPicker.es.js';
+import { UserAddress } from '../../components/UserAddress/UserAddress.es.js';
+import { UserDataForm } from './UserDataForm/UserDataForm.es.js';
+
+const CollectUserDataView = () => {
+    var _a, _b;
+    const { appName, handleLogOut, projectSettings, network, decodedOnboardingOnlyToken, selectedWalletConnector: walletConnector, onboardingImageUrl, } = useInternalDynamicContext();
+    const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
+    if (!walletConnector || !decodedOnboardingOnlyToken) {
+        return null;
+    }
+    const userProfile = createUserProfile(decodedOnboardingOnlyToken);
+    const evmNetworks = walletConnector.evmNetworks || [];
+    const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
+    return (jsxs("div", Object.assign({ className: 'collect-user-data', "data-testid": 'collect-user-data-view' }, { children: [onboardingImageUrl && (jsx("img", { className: 'collect-user-data__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'collect-user-data__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'collect-user-data__form' }, { children: [jsxs(UserDataForm, Object.assign({ disableSubmit: !_isSupportedNetwork, userProfile: userProfile }, { children: [jsx("div", Object.assign({ className: 'collect-user-data__img-container' }, { children: ((_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _a === void 0 ? void 0 : _a.avatar) ? (jsx("img", { src: (_b = userProfile === null || userProfile === void 0 ? void 0 : userProfile.ens) === null || _b === void 0 ? void 0 : _b.avatar, alt: '', className: 'collect-user-data__img collect-user-data__img--rounded' })) : (jsx(WalletIcon, { walletName: walletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } })) })), jsx(UserAddress, { userProfile: userProfile }), jsx("div", Object.assign({ className: 'collect-user-data__network-container' }, { children: jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, showNetworkName: true, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, buttonClassName: 'collect-user-data__network-picker-button', mainClassName: 'collect-user-data__network-picker' }) })), !_isSupportedNetwork ? (jsxs("div", Object.assign({ className: 'collect-user-data__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] }))) : (jsxs("div", Object.assign({ className: 'collect-user-data__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'collect-user-data__welcome-title' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeHeader) ||
+                                            `Welcome to ${appName}` })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: (projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.general.collectUserDataWelcomeMessage) ||
+                                            'We need a bit of information to get started' }))] })))] })), jsx(TextButton, Object.assign({ className: 'collect-user-data__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+};
+
+export { CollectUserDataView };

package/src/lib/views/CollectUserDataView/UserDataFields/index.cjs.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var formik = require('formik');
+require('react');
+var Typography = require('../../../components/Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../context/ViewContext/ViewContext.cjs.js');
+var index = require('../../../shared/utils/functions/getValueByKey/index.cjs.js');
+require('../../../utils/constants/colors.cjs.js');
+var index$1 = require('../../../shared/consts/index.cjs.js');
+require('../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../components/ShadowDOM/ShadowDOM.cjs.js');
+require('../../../context/ThemeContext/ThemeContext.cjs.js');
+var Input = require('../../../components/Input/Input.cjs.js');
+var Checkbox = require('../../../components/Checkbox/Checkbox.cjs.js');
+var Select = require('../../../components/Select/Select.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../config/ApiEndpoint.cjs.js');
+require('../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../../context/MockContext/MockContext.cjs.js');
+require('../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../components/IconButton/IconButton.cjs.js');
+var fieldsConfig = require('../fieldsConfig.cjs.js');
+var getDisplayErrorMessage = require('./utils/getDisplayErrorMessage/getDisplayErrorMessage.cjs.js');
+
+const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsxRuntime.jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required }) => {
+        const { label, type } = index.getValueByKey(fieldsConfig.fieldsConfig, name);
+        if (name === 'tShirtSize') {
+            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.tShirtSizes.map((size) => (jsxRuntime.jsx("option", Object.assign({ value: size }, { children: size }), size))) }), name));
+        }
+        else if (name === 'team') {
+            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.teamNames.map((teamName) => (jsxRuntime.jsx("option", Object.assign({ value: teamName }, { children: teamName }), teamName))) }), name));
+        }
+        else if (name === 'country') {
+            return (jsxRuntime.jsx(formik.Field, Object.assign({ as: Select.Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, { children: index$1.countryCodes.map((countryCode) => (jsxRuntime.jsx("option", Object.assign({ value: countryCode.code }, { children: countryCode.name }), countryCode.code))) }), name));
+        }
+        else if (name === 'policiesConsent') {
+            return (jsxRuntime.jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxRuntime.jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsxRuntime.jsx(formik.Field, { as: Checkbox.Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsxRuntime.jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
+        }
+        else {
+            return (jsxRuntime.jsx(formik.Field, { as: Input.Input, type: type, id: name, name: name, label: label, optional: !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage.getDisplayErrorMessage(label, errors[name]) }, name));
+        }
+    }) })));
+
+exports.UserDataFields = UserDataFields;

package/src/lib/views/CollectUserDataView/UserDataFields/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { FormikErrors, FormikTouched } from 'formik';
+import { ProjectSettingsKyc } from '@dynamic-labs/sdk-api';
+type UserDataFieldsProps = {
+    errors: FormikErrors<Record<string, string>>;
+    fields?: ProjectSettingsKyc[];
+    policiesConsentInnerComponentArray?: ReactNode[];
+    touched: FormikTouched<Record<string, string>>;
+};
+export declare const UserDataFields: ({ errors, policiesConsentInnerComponentArray, fields, touched, }: UserDataFieldsProps) => JSX.Element;
+export {};

package/src/lib/views/CollectUserDataView/UserDataFields/index.es.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Field } from 'formik';
+import 'react';
+import { Typography } from '../../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../context/ViewContext/ViewContext.es.js';
+import { getValueByKey } from '../../../shared/utils/functions/getValueByKey/index.es.js';
+import '../../../utils/constants/colors.es.js';
+import { tShirtSizes, teamNames, countryCodes } from '../../../shared/consts/index.es.js';
+import '../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../../context/ThemeContext/ThemeContext.es.js';
+import { Input } from '../../../components/Input/Input.es.js';
+import { Checkbox } from '../../../components/Checkbox/Checkbox.es.js';
+import { Select } from '../../../components/Select/Select.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../config/ApiEndpoint.es.js';
+import '../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../../context/MockContext/MockContext.es.js';
+import '../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../components/IconButton/IconButton.es.js';
+import { fieldsConfig } from '../fieldsConfig.es.js';
+import { getDisplayErrorMessage } from './utils/getDisplayErrorMessage/getDisplayErrorMessage.es.js';
+
+const UserDataFields = ({ errors, policiesConsentInnerComponentArray, fields, touched, }) => (jsx("div", Object.assign({ className: 'user-data-fields__fields-column' }, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ name, required }) => {
+        const { label, type } = getValueByKey(fieldsConfig, name);
+        if (name === 'tShirtSize') {
+            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'tShirtSizeSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: tShirtSizes.map((size) => (jsx("option", Object.assign({ value: size }, { children: size }), size))) }), name));
+        }
+        else if (name === 'team') {
+            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'teamSelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: teamNames.map((teamName) => (jsx("option", Object.assign({ value: teamName }, { children: teamName }), teamName))) }), name));
+        }
+        else if (name === 'country') {
+            return (jsx(Field, Object.assign({ as: Select, type: type, id: name, name: name, label: label, error: errors[name] && touched[name], selectDataTestId: 'countrySelect', message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, { children: countryCodes.map((countryCode) => (jsx("option", Object.assign({ value: countryCode.code }, { children: countryCode.name }), countryCode.code))) }), name));
+        }
+        else if (name === 'policiesConsent') {
+            return (jsx("div", Object.assign({ role: 'group', "aria-labelledby": 'checkbox-group', className: 'user-data-fields__checkbox-container' }, { children: policiesConsentInnerComponentArray === null || policiesConsentInnerComponentArray === void 0 ? void 0 : policiesConsentInnerComponentArray.map((component, index) => (jsxs("div", Object.assign({ className: 'user-data-fields__consent-checkbox' }, { children: [jsx(Field, { as: Checkbox, id: `policiesConsent_${index}`, name: 'policiesConsentArray', type: 'checkbox', value: `${index}` }, `policiesConsent_${index}`), jsx("label", Object.assign({ htmlFor: `policiesConsent_${index}`, className: 'user-data-fields__checkbox-label' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: component })) }))] }), `policiesConsent_${index}`))) }), 'policiesConsentGroup'));
+        }
+        else {
+            return (jsx(Field, { as: Input, type: type, id: name, name: name, label: label, optional: !required, error: errors[name] && touched[name], message: touched[name] && getDisplayErrorMessage(label, errors[name]) }, name));
+        }
+    }) })));
+
+export { UserDataFields };

package/src/lib/views/CollectUserDataView/UserDataFields/utils/getDisplayErrorMessage/getDisplayErrorMessage.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getDisplayErrorMessage = (fieldName, error) => {
+    var _a;
+    if (!error)
+        return;
+    const mapErrorToTemplate = {
+        required: (fieldName) => `${fieldName} is required`,
+    };
+    return ((_a = mapErrorToTemplate[error]) === null || _a === void 0 ? void 0 : _a.call(mapErrorToTemplate, fieldName)) || error;
+};
+
+exports.getDisplayErrorMessage = getDisplayErrorMessage;