@dynamic-labs/sdk-react-core 4.25.2 → 4.25.4

package/src/lib/views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js

@@ -0,0 +1,158 @@
+'use client'
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { SocialIcon } from '@dynamic-labs/iconic';
+import { ExchangeKeyEnum } from '@dynamic-labs/sdk-api-core';
+import '@dynamic-labs/utils';
+import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import 'react';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgCopy } from '../../shared/assets/copy.js';
+import { ReactComponent as SvgExternalLink } from '../../shared/assets/externalLink.js';
+import '../../context/ViewContext/ViewContext.js';
+import { Button } from '../../components/Button/Button.js';
+import '../../components/Alert/Alert.js';
+import '../../events/dynamicEvents.js';
+import '../../../../_virtual/_tslib.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
+import '../../shared/consts/index.js';
+import '../../store/state/authMode/authMode.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../store/state/nonce/nonce.js';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
+import '@dynamic-labs-sdk/client/core';
+import '@dynamic-labs-sdk/client';
+import '../../client/client.js';
+import '../../store/state/projectSettings/projectSettings.js';
+import '../../config/ApiEndpoint.js';
+import '../../locale/locale.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.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 '../../utils/functions/compareChains/compareChains.js';
+import '../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import { useIconThemeVariant } from '../../utils/hooks/useIconThemeVariant/useIconThemeVariant.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../context/LoadingContext/LoadingContext.js';
+import '../../context/WalletContext/WalletContext.js';
+import '../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../context/MockContext/MockContext.js';
+import '../CollectUserDataView/useFields.js';
+import '../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../store/state/walletOptions/walletOptions.js';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import { iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import { IconButton } from '../../components/IconButton/IconButton.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import { TypographyButton } from '../../components/TypographyButton/TypographyButton.js';
+import 'formik';
+import '../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
+import '../../store/state/sendBalances.js';
+import { Input } from '../../components/Input/Input.js';
+import '../../components/OverlayCard/OverlayCard.js';
+import '../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../context/PasskeyContext/PasskeyContext.js';
+import '../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
+import '../../context/OnrampContext/OnrampContext.js';
+import { convertExchangeKeytoProviderEnum } from '../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import { CopyButton } from '../../components/CopyButton/CopyButton.js';
+import 'qrcode';
+import '../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../index.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
+import '../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../store/state/tokenBalances.js';
+import '../../store/state/multichainBalances.js';
+import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/IsBrowser/IsBrowser.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+
+const docsLink = (exchange) => {
+    if (exchange === ExchangeKeyEnum.Kraken) {
+        return 'https://support.kraken.com/articles/360000672863-adding-and-confirming-a-new-cryptocurrency-withdrawal-address';
+    }
+    return undefined;
+};
+const exchangeAppUrlMap = {
+    [ExchangeKeyEnum.Kraken]: 'https://www.kraken.com/',
+    [ExchangeKeyEnum.Coinbase]: 'https://www.coinbase.com/',
+};
+const openExchangeApp = (exchange) => {
+    const url = exchangeAppUrlMap[exchange];
+    if (url)
+        window.open(url, '_blank', 'noopener,noreferrer');
+};
+const iconSize = 96;
+const ExchangeWhitelistWarning = ({ onContinue, exchange, onClose, }) => {
+    var _a;
+    const { t } = useTranslation();
+    const iconThemeVariant = useIconThemeVariant();
+    const { primaryWallet } = useInternalDynamicContext();
+    const closeButton = (jsx(IconButton, { onClick: onClose, type: 'button', id: 'close-button', "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
+    const link = docsLink(exchange);
+    const exchangeDisplayName = exchange.charAt(0).toUpperCase() + exchange.slice(1);
+    return (jsxs("div", { className: 'exchange-whitelist-warning', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx(Typography, { variant: 'title', copykey: 'dyn_exchange_whitelist_warning.title', children: t('dyn_exchange_whitelist_warning.title') }) }), jsxs("div", { className: 'exchange-whitelist-warning__content', children: [jsx("div", { className: 'exchange-whitelist-warning__content__icon-holder', children: jsx(SocialIcon, { name: convertExchangeKeytoProviderEnum(exchange), variant: iconThemeVariant, style: {
+                                height: pixelToRem(iconSize * iconRatio),
+                                width: pixelToRem(iconSize * iconRatio),
+                            } }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', className: 'exchange-whitelist-warning__content__description', copykey: 'dyn_exchange_whitelist_warning.description', children: t('dyn_exchange_whitelist_warning.description', {
+                            exchange: exchangeDisplayName,
+                        }) }), jsxs("div", { className: 'exchange-whitelist-warning__content__steps', children: [jsxs("div", { className: 'exchange-whitelist-warning__content__steps__step', children: [jsx("div", { className: 'exchange-whitelist-warning__content__steps__step__number-badge', children: "1" }), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_exchange_whitelist_warning.step1', children: t(`dyn_exchange_whitelist_warning.step1.${exchange}`) })] }), jsxs("div", { className: 'exchange-whitelist-warning__content__steps__step', children: [jsx("div", { className: 'exchange-whitelist-warning__content__steps__step__number-badge', children: "2" }), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_exchange_whitelist_warning.step2', children: t('dyn_exchange_whitelist_warning.step2') })] }), jsxs("div", { className: 'exchange-whitelist-warning__content__steps__step', children: [jsx("div", { className: 'exchange-whitelist-warning__content__steps__step__number-badge', children: "3" }), jsx(Typography, { variant: 'body_small', color: 'primary', copykey: 'dyn_exchange_whitelist_warning.step3', children: t('dyn_exchange_whitelist_warning.step3', {
+                                            exchange: exchangeDisplayName,
+                                        }) })] })] }), jsxs("div", { className: 'exchange-whitelist-warning__content__address', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_exchange_whitelist_warning.address', children: t('dyn_exchange_whitelist_warning.address') }), jsxs("div", { className: 'exchange-whitelist-warning__content__address__copy', children: [jsx("div", { className: 'exchange-whitelist-warning__content__address__copy__copy-input', children: jsx(Input, { id: 'wallet_address', "data-testid": 'wallet_address', label: shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address), disabled: true }) }), jsx(CopyButton, { textToCopy: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address) !== null && _a !== void 0 ? _a : '', children: jsx(SvgCopy, {}) })] })] }), link && (jsxs("div", { className: 'exchange-whitelist-warning__content__instructions', children: [jsx(Typography, { as: 'a', weight: 'bold', href: link, target: '_blank', rel: 'noreferrer', className: 'exchange-whitelist-warning__content__instructions__link', variant: 'body_small', children: t('dyn_exchange_whitelist_warning.view_instructions') }), jsx(SvgExternalLink, { style: {
+                                    height: pixelToRem(12),
+                                    marginLeft: pixelToRem(8),
+                                    width: pixelToRem(12),
+                                }, className: 'exchange-whitelist-warning__content__steps__step__icon' })] })), jsx("div", { className: 'exchange-whitelist-warning__content__open', children: jsxs(Button, { onClick: () => openExchangeApp(exchange), buttonVariant: 'primary', className: 'exchange-whitelist-warning__content__open__button', children: [jsx(Typography, { variant: 'body_normal', children: t('dyn_exchange_whitelist_warning.open', {
+                                        exchange: exchangeDisplayName,
+                                    }) }), jsx(SvgExternalLink, { style: {
+                                        height: pixelToRem(14),
+                                        marginLeft: pixelToRem(8),
+                                        width: pixelToRem(14),
+                                    } })] }) }), jsx("div", { className: 'exchange-whitelist-warning__content__done', children: jsx(TypographyButton, { dataTestId: 'continue-button', buttonVariant: 'brand-primary', typographyProps: { color: 'white', weight: 'regular' }, className: 'exchange-whitelist-warning__content__done__button', onClick: () => {
+                                onContinue();
+                            }, copykey: 'dyn_exchange_whitelist_warning.done', children: t('dyn_exchange_whitelist_warning.done') }) })] })] }));
+};
+
+export { ExchangeWhitelistWarning };

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

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

package/src/lib/views/FarcasterConnectView/FarcasterConnectView.cjs

@@ -90,7 +90,9 @@ require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../store/state/multichainBalances.cjs');

package/src/lib/views/FarcasterConnectView/FarcasterConnectView.js

@@ -86,7 +86,9 @@ import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../store/state/tokenBalances.js';
 import '../../store/state/multichainBalances.js';

package/src/lib/views/GlobalWalletConfirmView/GlobalWalletConfirmView.cjs

@@ -91,7 +91,9 @@ require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../store/state/multichainBalances.cjs');

package/src/lib/views/GlobalWalletConfirmView/GlobalWalletConfirmView.js

@@ -87,7 +87,9 @@ import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../store/state/tokenBalances.js';
 import '../../store/state/multichainBalances.js';

package/src/lib/views/GlobalWalletMaliciousView/GlobalWalletMaliciousView.cjs

@@ -97,7 +97,9 @@ require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
+require('../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../store/state/tokenBalances.cjs');
 require('../../store/state/multichainBalances.cjs');

package/src/lib/views/GlobalWalletMaliciousView/GlobalWalletMaliciousView.js

@@ -93,7 +93,9 @@ import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
+import '../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../store/state/tokenBalances.js';
 import '../../store/state/multichainBalances.js';

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

@@ -8,6 +8,7 @@ var React = require('react');
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 var utils = require('@dynamic-labs/utils');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
+var useErrorText = require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var DefaultFooter = require('../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.cjs');
@@ -16,7 +17,6 @@ var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuth
 var useWalletItemActions = require('../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
 var FarcasterQrCodeView = require('../FarcasterQrCodeView/FarcasterQrCodeView.cjs');
 var WalletList = require('../WalletList/WalletList.cjs');
-var useErrorText = require('../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 var LoginViewSection = require('./LoginViewSection/LoginViewSection.cjs');
 var useLoginView = require('./useLoginView/useLoginView.cjs');
 var showFarcasterQrCodeView = require('./utils/showFarcasterQrCodeView/showFarcasterQrCodeView.cjs');

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

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { SdkViewSectionType } from '@dynamic-labs/sdk-api-core';
 import { isMobile } from '@dynamic-labs/utils';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
+import { useErrorText } from '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { DefaultFooter } from '../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.js';
@@ -12,7 +13,6 @@ import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAu
 import { useWalletItemActions } from '../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
 import { FarcasterQrCodeView } from '../FarcasterQrCodeView/FarcasterQrCodeView.js';
 import { WalletList } from '../WalletList/WalletList.js';
-import { useErrorText } from '../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import { LoginViewSection } from './LoginViewSection/LoginViewSection.js';
 import { useLoginView } from './useLoginView/useLoginView.js';
 import { showFarcasterQrCodeView } from './utils/showFarcasterQrCodeView/showFarcasterQrCodeView.js';

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

@@ -92,11 +92,14 @@ var LoginEmailForm = require('../sections/EmailSignInSection/LoginEmailForm.cjs'
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+var PasskeySignInSection = require('../sections/PasskeySignInSection/PasskeySignInSection.cjs');
 var PhoneNumberSignInSection = require('../sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 var SocialSignInSection = require('../sections/SocialSignInSection/SocialSignInSection.cjs');
 var ToggleableSection = require('../sections/ToggleableSection/ToggleableSection.cjs');
 var WalletSignInSection = require('../sections/WalletSignInSection/WalletSignInSection.cjs');
+require('../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../store/state/tokenBalances.cjs');
 require('../../../store/state/multichainBalances.cjs');
@@ -142,6 +145,8 @@ const LoginViewSection = ({ viewSection, index, walletCount, gotToWalletList, })
             return (jsxRuntime.jsx(WalletSignInSection.WalletSignInSection, { numberOfItemsToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: gotToWalletList, isLoading: isLoading }));
         case sdkApiCore.SdkViewSectionType.Social:
             return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { collapsedLayout: walletCount > 1, sectionData: viewSection }));
+        case sdkApiCore.SdkViewSectionType.Passkey:
+            return (jsxRuntime.jsx(PasskeySignInSection.PasskeySignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
         case sdkApiCore.SdkViewSectionType.Text:
             return viewSection.label ? (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', "data-testid": 'login-view-section__text', children: viewSection.label })) : null;
     }

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

@@ -88,11 +88,14 @@ import { LoginEmailForm } from '../sections/EmailSignInSection/LoginEmailForm.js
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import { PasskeySignInSection } from '../sections/PasskeySignInSection/PasskeySignInSection.js';
 import { PhoneNumberSignInSection } from '../sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 import { SocialSignInSection } from '../sections/SocialSignInSection/SocialSignInSection.js';
 import { ToggleableSection } from '../sections/ToggleableSection/ToggleableSection.js';
 import { WalletSignInSection } from '../sections/WalletSignInSection/WalletSignInSection.js';
+import '../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../store/state/tokenBalances.js';
 import '../../../store/state/multichainBalances.js';
@@ -138,6 +141,8 @@ const LoginViewSection = ({ viewSection, index, walletCount, gotToWalletList, })
             return (jsx(WalletSignInSection, { numberOfItemsToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: gotToWalletList, isLoading: isLoading }));
         case SdkViewSectionType.Social:
             return (jsx(SocialSignInSection, { collapsedLayout: walletCount > 1, sectionData: viewSection }));
+        case SdkViewSectionType.Passkey:
+            return (jsx(PasskeySignInSection, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }));
         case SdkViewSectionType.Text:
             return viewSection.label ? (jsx(Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', "data-testid": 'login-view-section__text', children: viewSection.label })) : null;
     }

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs

@@ -92,7 +92,9 @@ var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmai
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
 require('../../../../store/state/tokenBalances.cjs');
 require('../../../../store/state/multichainBalances.cjs');

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js

@@ -88,7 +88,9 @@ import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEm
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
 import '../../../../store/state/tokenBalances.js';
 import '../../../../store/state/multichainBalances.js';

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

@@ -0,0 +1,124 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/utils');
+require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('react-i18next');
+require('react');
+var faceId = require('../../../../shared/assets/face-id.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/sdk-api-core');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/wallet-book');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../utils/constants/values.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../events/dynamicEvents.cjs');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('../../../../store/state/authMode/authMode.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../../store/state/nonce/nonce.cjs');
+require('@dynamic-labs-sdk/client/core');
+require('@dynamic-labs-sdk/client');
+require('../../../../client/client.cjs');
+require('../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../config/ApiEndpoint.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');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../../../utils/functions/compareChains/compareChains.cjs');
+require('../../../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+var useMutation = require('../../../../utils/hooks/useMutation/useMutation.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');
+require('../../../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('../../../../components/Typography/Typography.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/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');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('formik');
+require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../../store/state/sendBalances.cjs');
+require('../../../../components/Input/Input.cjs');
+require('../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.cjs');
+require('../../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.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('../../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.cjs');
+require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+var useSignInWithPasskey = require('../../../../utils/hooks/useSignInWithPasskey/useSignInWithPasskey.cjs');
+require('../../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.cjs');
+require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../../store/state/tokenBalances.cjs');
+require('../../../../store/state/multichainBalances.cjs');
+require('../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var IconListTile = require('../../../../components/IconListTile/IconListTile.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+
+const PasskeySignInSection = ({ isLoading: externalLoading, onSubmit, onSubmitError, }) => {
+    const signInWithPasskey = useSignInWithPasskey.useSignInWithPasskey();
+    const { isLoading, mutate: handlePasskeySignIn } = useMutation.useMutation(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+        yield signInWithPasskey();
+    }), {
+        onFailure: (error) => {
+            logger.logger.error('Passkey sign in failed:', error);
+            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
+        },
+    });
+    const isLoadingState = externalLoading || isLoading;
+    return (jsxRuntime.jsxs(IconListTile.IconListTile, { onClick: () => handlePasskeySignIn(), disabled: isLoadingState, dataTestId: 'passkey-sign-in-button', className: 'connect-with-passkey-button', children: [jsxRuntime.jsx(faceId.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'button_primary', children: "Continue with Passkey" })] }));
+};
+
+exports.PasskeySignInSection = PasskeySignInSection;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { LoginWidgetProps } from '../LoginWidget';
+export declare const PasskeySignInSection: React.FC<LoginWidgetProps>;

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

@@ -0,0 +1,120 @@
+'use client'
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/utils';
+import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import 'react-i18next';
+import 'react';
+import { ReactComponent as SvgFaceId } from '../../../../shared/assets/face-id.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/sdk-api-core';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/wallet-book';
+import '../../../../utils/constants/colors.js';
+import '../../../../utils/constants/values.js';
+import '../../../../shared/consts/index.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../events/dynamicEvents.js';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '../../../../store/state/authMode/authMode.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../../store/state/nonce/nonce.js';
+import '@dynamic-labs-sdk/client/core';
+import '@dynamic-labs-sdk/client';
+import '../../../../client/client.js';
+import '../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../locale/locale.js';
+import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.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 '../../../../utils/functions/compareChains/compareChains.js';
+import '../../../Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import { useMutation } from '../../../../utils/hooks/useMutation/useMutation.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
+import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../CollectUserDataView/useFields.js';
+import '../../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../store/state/walletOptions/walletOptions.js';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import 'formik';
+import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import '../../../../store/state/sendBalances.js';
+import '../../../../components/Input/Input.js';
+import '../../../../components/OverlayCard/OverlayCard.js';
+import '../../../TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
+import '../../../../context/OnrampContext/OnrampContext.js';
+import '../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
+import 'qrcode';
+import '../../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../../../index.js';
+import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
+import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import { useSignInWithPasskey } from '../../../../utils/hooks/useSignInWithPasskey/useSignInWithPasskey.js';
+import '../../../MfaChooseDeviceView/getMfaOptions/getMfaOptions.js';
+import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../../store/state/tokenBalances.js';
+import '../../../../store/state/multichainBalances.js';
+import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { IconListTile } from '../../../../components/IconListTile/IconListTile.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/IsBrowser/IsBrowser.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+
+const PasskeySignInSection = ({ isLoading: externalLoading, onSubmit, onSubmitError, }) => {
+    const signInWithPasskey = useSignInWithPasskey();
+    const { isLoading, mutate: handlePasskeySignIn } = useMutation(() => __awaiter(void 0, void 0, void 0, function* () {
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+        yield signInWithPasskey();
+    }), {
+        onFailure: (error) => {
+            logger.error('Passkey sign in failed:', error);
+            onSubmitError === null || onSubmitError === void 0 ? void 0 : onSubmitError();
+        },
+    });
+    const isLoadingState = externalLoading || isLoading;
+    return (jsxs(IconListTile, { onClick: () => handlePasskeySignIn(), disabled: isLoadingState, dataTestId: 'passkey-sign-in-button', className: 'connect-with-passkey-button', children: [jsx(SvgFaceId, {}), jsx(Typography, { variant: 'button_primary', children: "Continue with Passkey" })] }));
+};
+
+export { PasskeySignInSection };

package/src/lib/views/LoginView/sections/PasskeySignInSection/index.d.ts

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