@dynamic-labs/sdk-react-core 2.0.0-alpha.3 → 2.0.0-alpha.4

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -37,11 +37,11 @@ import '../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateU
 import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.js';
-import '../../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../../components/Typography/Typography.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
@@ -49,30 +49,34 @@ import '../DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../../../context/LoadingContext/LoadingContext.js';
 import { Icon } from '../../../../../components/Icon/Icon.js';
+import { useWalletContext } from '../../../../../context/WalletContext/WalletContext.js';
 import 'i18next';
+import { shortenEmail } from '../../../../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import 'qrcode';
 import { useWidgetContext } from '../../../context/DynamicWidgetContext.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
 import { Button } from '../../../../../components/Button/Button.js';
-import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/Alert/Alert.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../components/Input/Input.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../components/MenuList/Dropdown/Dropdown.js';
-import { shortenEmail } from '../../../../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
-import { SecureTurnkeyWalletCard } from '../../../../../components/SecureTurnkeyWalletCard/SecureTurnkeyWalletCard.js';
 import '../../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import { UserAvatar } from '../../../../../components/UserAvatar/UserAvatar.js';
 import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
+import { SecureEmbeddedWalletCard } from '../../../../../components/SecureEmbeddedWalletCard/SecureEmbeddedWalletCard.js';
 import { useFundingContext } from '../../../../../context/FundingContext/FundingContext.js';
 import { useSendBalance } from '../../../../../context/SendBalanceContext/SendBalanceContext.js';
 import { ActiveWalletInformation } from '../../ActiveWalletInformation/ActiveWalletInformation.js';
@@ -83,13 +87,14 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { open: openSendBalanceModal } = useSendBalance();
     const { supportsFunding, setShowFunding, fundingEnabled } = useFundingContext();
     const { setDynamicWidgetView, setIsOpen } = useWidgetContext();
+    const { isLoadingEmbeddedWallet } = useWalletContext();
     const isSendBalanceEnabled = useMemo(() => {
-        var _a;
         const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         if (!connector)
             return false;
         // @todo: QNTM-804 Remove supported chains check to support other chains
-        return (((_a = connector.supportedChains) === null || _a === void 0 ? void 0 : _a.includes('EVM')) &&
+        const supportedChain = connector.supportedChains;
+        return (((supportedChain === null || supportedChain === void 0 ? void 0 : supportedChain.includes('EVM')) || (supportedChain === null || supportedChain === void 0 ? void 0 : supportedChain.includes('SOL'))) &&
             isEmbeddedConnector(connector));
     }, [primaryWallet]);
     const handleOnClickSend = () => {
@@ -110,8 +115,8 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
     };
     const renderWalletHeader = () => {
         const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
-        if (primaryWallet) {
-            return jsx(ActiveWalletInformation, {});
+        if (primaryWallet || isLoadingEmbeddedWallet) {
+            return jsx(ActiveWalletInformation, { isLoading: isLoadingEmbeddedWallet });
         }
         else if (unknownWallet) {
             return jsx(UnknownWalletInformation, { address: unknownWallet.address });
@@ -121,7 +126,7 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsx(SecureTurnkeyWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
+    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), primaryWallet ? (jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsx(SecureEmbeddedWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
                                 jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetDropdown/DynamicWidgetDropdown.cjs

@@ -45,28 +45,32 @@ require('../../../../../../components/Alert/Alert.cjs');
 require('../../../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../../components/Input/Input.cjs');
 require('../../../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../../components/Popper/Popper/Popper.cjs');
 var PopperContext = require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
-require('formik');
-require('i18next');
-require('../../../../../../components/OverlayCard/OverlayCard.context.cjs');
-require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
-require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../../../views/WalletList/WalletList.cjs');
+require('../../../../../../context/WalletContext/WalletContext.cjs');
+require('formik');
 require('qrcode');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../../../context/LoadingContext/LoadingContext.cjs');
 require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('i18next');
 require('../../../../../../context/FooterAnimationContext/index.cjs');
+require('react-international-phone');
+require('../../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
+require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('../../../../context/DynamicWidgetContext.cjs');
 require('../../../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 
 const DynamicWidgetDropdown = ({ zIndex, isShown, onClose, children, className, contentClassName, }) => (jsxRuntime.jsx(ZoomTransition.ZoomTransition, { outDuration: 200, className: classNames.classNames('dynamic-widget-dropdown', className), isShown: isShown, children: jsxRuntime.jsx("div", { "data-testid": 'DynamicWidgetDropdown', style: { zIndex }, className: classNames.classNames('dynamic-widget-dropdown__root', contentClassName), children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) }) }));

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetDropdown/DynamicWidgetDropdown.js

@@ -41,28 +41,32 @@ import '../../../../../../components/Alert/Alert.js';
 import '../../../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../../../components/IconButton/IconButton.js';
 import '../../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../../components/Input/Input.js';
 import '../../../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../../components/Popper/Popper/Popper.js';
 import { PopperProvider } from '../../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import 'formik';
-import 'i18next';
-import '../../../../../../components/OverlayCard/OverlayCard.context.js';
-import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
-import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../../../views/WalletList/WalletList.js';
+import '../../../../../../context/WalletContext/WalletContext.js';
+import 'formik';
 import 'qrcode';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../../../context/LoadingContext/LoadingContext.js';
 import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'i18next';
 import '../../../../../../context/FooterAnimationContext/index.js';
+import 'react-international-phone';
+import '../../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
+import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import '../../../../context/DynamicWidgetContext.js';
 import '../../../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 
 const DynamicWidgetDropdown = ({ zIndex, isShown, onClose, children, className, contentClassName, }) => (jsx(ZoomTransition, { outDuration: 200, className: classNames('dynamic-widget-dropdown', className), isShown: isShown, children: jsx("div", { "data-testid": 'DynamicWidgetDropdown', style: { zIndex }, className: classNames('dynamic-widget-dropdown__root', contentClassName), children: jsx(PopperProvider, { children: children }) }) }));

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetModal/DynamicWidgetModal.cjs

@@ -39,36 +39,40 @@ require('../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpd
 require('../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.cjs');
-require('../../../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var Portal = require('../../../../../../components/Portal/Portal.cjs');
 require('../../../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../../../context/WalletContext/WalletContext.cjs');
 require('i18next');
 require('qrcode');
 require('../../../../context/DynamicWidgetContext.cjs');
+require('../../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
-require('../../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../../components/Alert/Alert.cjs');
 require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../../../components/Input/Input.cjs');
 require('../../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../../../components/Popper/Popper/Popper.cjs');
 var PopperContext = require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('react-international-phone');
+require('../../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, transitionEvents = {}, }) => {
     usePreventPageScroll.usePreventPageScroll(Boolean(isShown));

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetVariants/variants/DynamicWidgetModal/DynamicWidgetModal.js

@@ -35,36 +35,40 @@ import '../../../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpda
 import '../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.js';
-import '../../../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { Portal } from '../../../../../../components/Portal/Portal.js';
 import '../../../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../../../context/WalletContext/WalletContext.js';
 import 'i18next';
 import 'qrcode';
 import '../../../../context/DynamicWidgetContext.js';
+import '../../../../../../components/IconButton/IconButton.js';
+import '../../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
-import '../../../../../../components/IconButton/IconButton.js';
 import '../../../../../../components/Alert/Alert.js';
 import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../../../components/Input/Input.js';
 import '../../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../../../components/Popper/Popper/Popper.js';
 import { PopperProvider } from '../../../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../../../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, transitionEvents = {}, }) => {
     usePreventPageScroll(Boolean(isShown));

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.cjs

@@ -39,17 +39,18 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
 require('i18next');
 require('qrcode');
 var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
@@ -62,9 +63,10 @@ require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
@@ -73,6 +75,8 @@ require('../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('react-international-phone');
+require('../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const DynamicWidgetWallets = () => {
     const { t } = reactI18next.useTranslation();

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.js

@@ -35,17 +35,18 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.js';
-import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
 import 'i18next';
 import 'qrcode';
 import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
@@ -58,9 +59,10 @@ import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Popper/Popper/Popper.js';
@@ -69,6 +71,8 @@ import '../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const DynamicWidgetWallets = () => {
     const { t } = useTranslation();

package/src/lib/widgets/DynamicWidget/components/EmailConnectorPendingSignModalContent/EmailConnectorPendingSignModalContent.cjs

@@ -37,11 +37,11 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
@@ -49,26 +49,30 @@ require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
 require('i18next');
 require('qrcode');
 require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
-require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('react-international-phone');
+require('../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxRuntime.jsxs("div", { className: 'email-connector-pending-sign-modal-content', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxRuntime.jsxs("div", { className: 'email-connector-pending-sign-modal-content__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title', children: "Confirm your email" }), jsxRuntime.jsxs(Typography.Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', children: ["We\u2019ve sent a verification email to", ' ', jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailWalletConnector.email })] }), jsxRuntime.jsx(Typography.Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: "Note: it might take a few seconds to proceed after clicking the link in your email" })] })] }));
 

package/src/lib/widgets/DynamicWidget/components/EmailConnectorPendingSignModalContent/EmailConnectorPendingSignModalContent.js

@@ -33,11 +33,11 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.js';
-import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
@@ -45,26 +45,30 @@ import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
 import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
 import 'i18next';
 import 'qrcode';
 import '../../context/DynamicWidgetContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
-import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxs("div", { className: 'email-connector-pending-sign-modal-content', children: [jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxs("div", { className: 'email-connector-pending-sign-modal-content__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title', children: "Confirm your email" }), jsxs(Typography, { weight: 'regular', variant: 'body_normal', color: 'secondary', children: ["We\u2019ve sent a verification email to", ' ', jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span', children: emailWalletConnector.email })] }), jsx(Typography, { weight: 'regular', variant: 'body_small', color: 'secondary', children: "Note: it might take a few seconds to proceed after clicking the link in your email" })] })] }));
 

package/src/lib/widgets/DynamicWidget/components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.cjs

@@ -39,30 +39,34 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.cjs');
-require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../../context/WalletContext/WalletContext.cjs');
 require('i18next');
+var shortenEmail = require('../../../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
 require('qrcode');
 require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('formik');
-require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
-require('@dynamic-labs/viem-utils');
+require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var EmailIcon = require('../../../../components/EmailIcon/EmailIcon.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/Input/Input.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var OTPVerificationView = require('../../../../components/OTPVerificationView/OTPVerificationView.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
@@ -70,6 +74,8 @@ require('../../../../views/WalletList/WalletList.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('react-international-phone');
+require('../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.cjs');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext.useInternalDynamicContext();
@@ -93,7 +99,7 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             dynamicEvents.dynamicEvents.emit('emailVerificationResult', true, email);
         }),
     });
-    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { email: email, error: error, isLoading: isLoading, onPinComplete: onSubmit, retryHandler: walletConnector.retryOneTimePassword.bind(walletConnector), isValid: isValid === true, onPinChange: () => setError(undefined) }));
+    return (jsxRuntime.jsx(OTPVerificationView.OTPVerificationView, { MainIcon: EmailIcon.EmailIcon, destination: shortenEmail.shortenEmail(email), error: error, isLoading: isLoading, onPinComplete: onSubmit, retryHandler: walletConnector.retryOneTimePassword.bind(walletConnector), isValid: isValid === true, onPinChange: () => setError(undefined) }));
 };
 
 exports.EmailOTPConnectorPendingSignModalContent = EmailOTPConnectorPendingSignModalContent;

package/src/lib/widgets/DynamicWidget/components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.js

@@ -35,30 +35,34 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/UserWalletsContext/UserWalletsContext.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/ShadowDOM/ShadowDOM.js';
-import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../context/FooterAnimationContext/index.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import '../../../../context/LoadingContext/LoadingContext.js';
+import '../../../../context/WalletContext/WalletContext.js';
 import 'i18next';
+import { shortenEmail } from '../../../../shared/utils/functions/shortenEmail/shortenEmail.js';
 import 'qrcode';
 import '../../context/DynamicWidgetContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import 'formik';
-import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
-import '@dynamic-labs/viem-utils';
+import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { EmailIcon } from '../../../../components/EmailIcon/EmailIcon.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/Input/Input.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { OTPVerificationView } from '../../../../components/OTPVerificationView/OTPVerificationView.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
@@ -66,6 +70,8 @@ import '../../../../views/WalletList/WalletList.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import 'react-international-phone';
+import '../../../../views/LoginView/sections/PhoneNumberSignInSection/usePhoneInputLogic/usePhoneInputLogic.js';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, } = useInternalDynamicContext();
@@ -89,7 +95,7 @@ const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
             dynamicEvents.emit('emailVerificationResult', true, email);
         }),
     });
-    return (jsx(OTPVerificationView, { email: email, error: error, isLoading: isLoading, onPinComplete: onSubmit, retryHandler: walletConnector.retryOneTimePassword.bind(walletConnector), isValid: isValid === true, onPinChange: () => setError(undefined) }));
+    return (jsx(OTPVerificationView, { MainIcon: EmailIcon, destination: shortenEmail(email), error: error, isLoading: isLoading, onPinComplete: onSubmit, retryHandler: walletConnector.retryOneTimePassword.bind(walletConnector), isValid: isValid === true, onPinChange: () => setError(undefined) }));
 };
 
 export { EmailOTPConnectorPendingSignModalContent };