@dynamic-labs/sdk-react-core 4.0.0-alpha.8 → 4.0.0

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

@@ -7,13 +7,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactI18next = require('react-i18next');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+require('@dynamic-labs/utils');
 require('../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 var Alert = require('../../../../../components/Alert/Alert.cjs');
 require('../../../../../events/dynamicEvents.cjs');
 require('../../../../../../../_virtual/_tslib.cjs');
-require('@dynamic-labs/utils');
 require('../../../../../context/DynamicContext/DynamicContext.cjs');
-require('@dynamic-labs/sdk-api-core');
 var logger = require('../../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../../context/ViewContext/ViewContext.cjs');
@@ -31,15 +31,19 @@ require('../../../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
 var getUserIdentifier = require('../../../../../utils/functions/getUserIdentifier/getUserIdentifier.cjs');
+require('../../../../../store/state/nonce/nonce.cjs');
 require('../../../../../config/ApiEndpoint.cjs');
 require('../../../../../store/state/user/user.cjs');
 require('../../../../../locale/locale.cjs');
 require('../../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../../store/state/primaryWalletId/primaryWalletId.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');
 var WalletContext = require('../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 require('../../../../../context/ThemeContext/ThemeContext.cjs');
@@ -52,15 +56,14 @@ require('../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../../../../store/state/environmentId.cjs');
-require('../../../../../store/state/walletConnectorOptions.cjs');
+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/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidgetHeader.cjs');
@@ -71,30 +74,33 @@ require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
+require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../../store/state/sendBalances.cjs');
 require('../../../../../components/Input/Input.cjs');
+require('../../../../../components/OverlayCard/OverlayCard.cjs');
 var spinner = require('../../../../../components/Spinner/spinner.cjs');
-require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../index.cjs');
+require('../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+var UserAvatar = require('../../../../../components/UserAvatar/UserAvatar.cjs');
+require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../store/state/tokenBalances.cjs');
 require('../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
-require('../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
-require('@hcaptcha/react-hcaptcha');
-var UserAvatar = require('../../../../../components/UserAvatar/UserAvatar.cjs');
-require('../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 var SecureEmbeddedWalletCard = require('../../../../../components/SecureEmbeddedWalletCard/SecureEmbeddedWalletCard.cjs');
+require('@dynamic-labs/ethereum-aa');
 var FundingContext = require('../../../../../context/FundingContext/FundingContext.cjs');
+var useFunding = require('../../../../../context/FundingContext/useFunding/useFunding.cjs');
 var SendBalanceContext = require('../../../../../context/SendBalanceContext/SendBalanceContext.cjs');
 var ActiveWalletInformation = require('../../ActiveWalletInformation/ActiveWalletInformation.cjs');
-var UnknownWalletInformation = require('../../UnknownWalletInformation/UnknownWalletInformation.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -113,16 +119,18 @@ LinkButton.displayName = 'LinkButton';
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { open: openSendBalanceModal } = SendBalanceContext.useSendBalance();
-    const { supportsFunding, setShowFunding, fundingEnabled } = FundingContext.useFundingContext();
+    const { supportsFunding: _supportsFunding, fundingEnabled } = FundingContext.useFundingContext();
+    const { openExternalFunding } = useFunding.useFunding();
     const { setDynamicWidgetView, setIsOpen } = DynamicWidgetContext.useWidgetContext();
     const { isLoadingEmbeddedWallet } = WalletContext.useWalletContext();
     const { t } = reactI18next.useTranslation();
+    const supportsFunding = _supportsFunding && (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isAvailable);
     const isSendBalanceEnabled = React.useMemo(() => {
         const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         if (!connector)
             return false;
         return walletConnectorCore.isSendBalanceWalletConnector(connector);
-    }, [primaryWallet]);
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     const handleOnClickSend = () => {
         if (variant === 'dropdown') {
             setIsOpen(false);
@@ -133,19 +141,19 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
     };
     const renderWalletHeader = () => {
-        const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
         if (primaryWallet || isLoadingEmbeddedWallet) {
             return jsxRuntime.jsx(ActiveWalletInformation.ActiveWalletInformation, { isLoading: isLoadingEmbeddedWallet });
         }
-        else if (unknownWallet) {
-            return jsxRuntime.jsx(UnknownWalletInformation.UnknownWalletInformation, { address: unknownWallet.address });
-        }
         else {
             return (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: user }) }));
         }
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), isLoadingEmbeddedWallet && (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__wallet-info', children: jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__wallet-loading', children: jsxRuntime.jsx(Alert.Alert, { variant: 'info', icon: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }), children: t('dyn_creating_wallet.loading_message') }) }) })), primaryWallet ? (jsxRuntime.jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsxRuntime.jsx(SecureEmbeddedWalletCard.SecureEmbeddedWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), children: "Send" })), jsxRuntime.jsx(LinkButton, { connector: primaryWallet.connector })] }))] })) : (jsxRuntime.jsx(Typography.Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: !isLoadingEmbeddedWallet && getUserIdentifier.getUserIdentifier(user) }))] }));
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), isLoadingEmbeddedWallet && (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__wallet-info', children: jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__wallet-loading', children: jsxRuntime.jsx(Alert.Alert, { variant: 'info', icon: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }), children: t('dyn_creating_wallet.loading_message') }) }) })), primaryWallet ? (jsxRuntime.jsxs("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: [jsxRuntime.jsx(SecureEmbeddedWalletCard.SecureEmbeddedWalletCard, { className: 'dynamic-widget-wallet-header__wallet-info__secure-wallet' }), isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => {
+                                    openExternalFunding({
+                                        onrampProvider: sdkApiCore.OnrampProviders.Banxa,
+                                    });
+                                }, disabled: !supportsFunding, startSlot: jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(send.ReactComponent, {}) }), children: "Send" })), jsxRuntime.jsx(LinkButton, { connector: primaryWallet.connector })] }))] })) : (jsxRuntime.jsx(Typography.Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: !isLoadingEmbeddedWallet && getUserIdentifier.getUserIdentifier(user) }))] }));
 };
 React__default["default"].memo(DynamicWidgetWalletHeader);
 

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

@@ -3,13 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isSendBalanceWalletConnector } from '@dynamic-labs/wallet-connector-core';
+import { OnrampProviders } from '@dynamic-labs/sdk-api-core';
+import '@dynamic-labs/utils';
 import '../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import { Alert } from '../../../../../components/Alert/Alert.js';
 import '../../../../../events/dynamicEvents.js';
 import '../../../../../../../_virtual/_tslib.js';
-import '@dynamic-labs/utils';
 import '../../../../../context/DynamicContext/DynamicContext.js';
-import '@dynamic-labs/sdk-api-core';
 import { logger } from '../../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '../../../../../context/ViewContext/ViewContext.js';
@@ -27,15 +27,19 @@ import '../../../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
 import { getUserIdentifier } from '../../../../../utils/functions/getUserIdentifier/getUserIdentifier.js';
+import '../../../../../store/state/nonce/nonce.js';
 import '../../../../../config/ApiEndpoint.js';
 import '../../../../../store/state/user/user.js';
 import '../../../../../locale/locale.js';
 import '../../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../../store/state/primaryWalletId/primaryWalletId.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 { useWalletContext } from '../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import '../../../../../context/ThemeContext/ThemeContext.js';
@@ -48,15 +52,14 @@ import '../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../../../../store/state/environmentId.js';
-import '../../../../../store/state/walletConnectorOptions.js';
+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/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidgetHeader.js';
@@ -67,30 +70,33 @@ import '../../../../../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 '../../../../../store/state/sendBalances.js';
 import '../../../../../components/Input/Input.js';
+import '../../../../../components/OverlayCard/OverlayCard.js';
 import { Spinner } from '../../../../../components/Spinner/spinner.js';
-import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../../index.js';
+import '../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import { UserAvatar } from '../../../../../components/UserAvatar/UserAvatar.js';
+import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../store/state/tokenBalances.js';
 import '../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
-import '../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
-import '@hcaptcha/react-hcaptcha';
-import { UserAvatar } from '../../../../../components/UserAvatar/UserAvatar.js';
-import '../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import { SecureEmbeddedWalletCard } from '../../../../../components/SecureEmbeddedWalletCard/SecureEmbeddedWalletCard.js';
+import '@dynamic-labs/ethereum-aa';
 import { useFundingContext } from '../../../../../context/FundingContext/FundingContext.js';
+import { useFunding } from '../../../../../context/FundingContext/useFunding/useFunding.js';
 import { useSendBalance } from '../../../../../context/SendBalanceContext/SendBalanceContext.js';
 import { ActiveWalletInformation } from '../../ActiveWalletInformation/ActiveWalletInformation.js';
-import { UnknownWalletInformation } from '../../UnknownWalletInformation/UnknownWalletInformation.js';
 
 const LinkButton = React__default.memo(({ connector }) => {
     const { setDynamicWidgetView } = useWidgetContext();
@@ -105,16 +111,18 @@ LinkButton.displayName = 'LinkButton';
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext();
     const { open: openSendBalanceModal } = useSendBalance();
-    const { supportsFunding, setShowFunding, fundingEnabled } = useFundingContext();
+    const { supportsFunding: _supportsFunding, fundingEnabled } = useFundingContext();
+    const { openExternalFunding } = useFunding();
     const { setDynamicWidgetView, setIsOpen } = useWidgetContext();
     const { isLoadingEmbeddedWallet } = useWalletContext();
     const { t } = useTranslation();
+    const supportsFunding = _supportsFunding && (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isAvailable);
     const isSendBalanceEnabled = useMemo(() => {
         const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         if (!connector)
             return false;
         return isSendBalanceWalletConnector(connector);
-    }, [primaryWallet]);
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     const handleOnClickSend = () => {
         if (variant === 'dropdown') {
             setIsOpen(false);
@@ -125,19 +133,19 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         }
     };
     const renderWalletHeader = () => {
-        const unknownWallet = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((credential) => credential.walletName === 'unknown');
         if (primaryWallet || isLoadingEmbeddedWallet) {
             return jsx(ActiveWalletInformation, { isLoading: isLoadingEmbeddedWallet });
         }
-        else if (unknownWallet) {
-            return jsx(UnknownWalletInformation, { address: unknownWallet.address });
-        }
         else {
             return (jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsx(UserAvatar, { user: user }) }));
         }
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), isLoadingEmbeddedWallet && (jsx("div", { className: 'dynamic-widget-wallet-header__wallet-info', children: jsx("div", { className: 'dynamic-widget-wallet-header__wallet-loading', children: jsx(Alert, { variant: 'info', icon: jsx(Spinner, { className: 'button__spinner' }), children: t('dyn_creating_wallet.loading_message') }) }) })), 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(TypographyButton, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(TypographyButton, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), children: "Send" })), jsx(LinkButton, { connector: primaryWallet.connector })] }))] })) : (jsx(Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: !isLoadingEmbeddedWallet && getUserIdentifier(user) }))] }));
+    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [renderWalletHeader(), isLoadingEmbeddedWallet && (jsx("div", { className: 'dynamic-widget-wallet-header__wallet-info', children: jsx("div", { className: 'dynamic-widget-wallet-header__wallet-loading', children: jsx(Alert, { variant: 'info', icon: jsx(Spinner, { className: 'button__spinner' }), children: t('dyn_creating_wallet.loading_message') }) }) })), 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(TypographyButton, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => {
+                                    openExternalFunding({
+                                        onrampProvider: OnrampProviders.Banxa,
+                                    });
+                                }, disabled: !supportsFunding, startSlot: jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(TypographyButton, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgSend, {}) }), children: "Send" })), jsx(LinkButton, { connector: primaryWallet.connector })] }))] })) : (jsx(Typography, { className: 'dynamic-widget-wallet-header__email', variant: 'body_normal', weight: 'regular', children: !isLoadingEmbeddedWallet && getUserIdentifier(user) }))] }));
 };
 React__default.memo(DynamicWidgetWalletHeader);
 

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

@@ -26,15 +26,19 @@ 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('../../../../../../config/ApiEndpoint.cjs');
 require('../../../../../../store/state/user/user.cjs');
 require('../../../../../../locale/locale.cjs');
 require('../../../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../../../store/state/primaryWalletId/primaryWalletId.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('../../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 require('../../../../../../context/ThemeContext/ThemeContext.cjs');
@@ -47,8 +51,7 @@ require('../../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../../../../../store/state/environmentId.cjs');
-require('../../../../../../store/state/walletConnectorOptions.cjs');
+require('../../../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 var classNames = require('../../../../../../utils/functions/classNames/classNames.cjs');
 require('../../../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
@@ -59,24 +62,27 @@ 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/OverlayCard/OverlayCard.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('qrcode');
 require('formik');
+require('../../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../../../context/FooterAnimationContext/index.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../../../context/DynamicWidgetContext.cjs');
-require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../../../store/state/sendBalances.cjs');
+require('@dynamic-labs/ethereum-aa');
+require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../../index.cjs');
 require('../../../../../../store/state/tokenBalances.cjs');

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

@@ -22,15 +22,19 @@ 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 '../../../../../../config/ApiEndpoint.js';
 import '../../../../../../store/state/user/user.js';
 import '../../../../../../locale/locale.js';
 import '../../../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../../../store/state/primaryWalletId/primaryWalletId.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 '../../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import '../../../../../../context/ThemeContext/ThemeContext.js';
@@ -43,8 +47,7 @@ import '../../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../../../../../store/state/environmentId.js';
-import '../../../../../../store/state/walletConnectorOptions.js';
+import '../../../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import { classNames } from '../../../../../../utils/functions/classNames/classNames.js';
 import '../../../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
@@ -55,24 +58,27 @@ 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/OverlayCard/OverlayCard.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 'qrcode';
 import 'formik';
+import '../../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../../../context/FooterAnimationContext/index.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../../../context/DynamicWidgetContext.js';
-import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../../../store/state/sendBalances.js';
+import '@dynamic-labs/ethereum-aa';
+import '../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../../../index.js';
 import '../../../../../../store/state/tokenBalances.js';

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

@@ -27,15 +27,19 @@ 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('../../../../../../config/ApiEndpoint.cjs');
 require('../../../../../../store/state/user/user.cjs');
 require('../../../../../../locale/locale.cjs');
 require('../../../../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../../../../store/state/primaryWalletId/primaryWalletId.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('../../../../../../context/WalletContext/WalletContext.cjs');
 require('../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
 require('../../../../../../context/ThemeContext/ThemeContext.cjs');
@@ -48,15 +52,14 @@ require('../../../../../../views/CollectUserDataView/useFields.cjs');
 require('../../../../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../../../../../store/state/environmentId.cjs');
-require('../../../../../../store/state/walletConnectorOptions.cjs');
+require('../../../../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 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/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -65,27 +68,30 @@ require('../../../../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('../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
+require('../../../../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../../index.cjs');
+require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../../store/state/tokenBalances.cjs');
 require('../../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
 require('../../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../../components/IsBrowser/IsBrowser.cjs');
-require('../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../../components/Popper/Popper/Popper.cjs');
 var PopperContext = require('../../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
-require('../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
-require('@hcaptcha/react-hcaptcha');
-require('../../../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('@dynamic-labs/ethereum-aa');
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, transitionEvents = {}, }) => {
     usePreventPageScroll.usePreventPageScroll(Boolean(isShown));
-    return (jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, transitionEvents, { children: jsxRuntime.jsx("div", { className: classNames.classNames('dynamic-widget-modal', className), children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) }) })));
+    return (jsxRuntime.jsx(Portal.Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, transitionEvents, { children: jsxRuntime.jsx("div", { className: classNames.classNames('dynamic-widget-modal', className), "data-testid": 'modal-card', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) }) })));
 };
 
 exports.DynamicWidgetModal = DynamicWidgetModal;

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

@@ -23,15 +23,19 @@ 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 '../../../../../../config/ApiEndpoint.js';
 import '../../../../../../store/state/user/user.js';
 import '../../../../../../locale/locale.js';
 import '../../../../../../store/state/projectSettings/projectSettings.js';
+import '../../../../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../../../../store/state/primaryWalletId/primaryWalletId.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 '../../../../../../context/WalletContext/WalletContext.js';
 import '../../../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
 import '../../../../../../context/ThemeContext/ThemeContext.js';
@@ -44,15 +48,14 @@ import '../../../../../../views/CollectUserDataView/useFields.js';
 import '../../../../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../../../../../store/state/environmentId.js';
-import '../../../../../../store/state/walletConnectorOptions.js';
+import '../../../../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 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/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -61,27 +64,30 @@ import '../../../../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 '../../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
+import '../../../../../../components/OverlayCard/OverlayCard.js';
+import '../../../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../../../index.js';
+import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../../store/state/tokenBalances.js';
 import '../../../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import '../../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../../components/IsBrowser/IsBrowser.js';
-import '../../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../../components/Popper/Popper/Popper.js';
 import { PopperProvider } from '../../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
-import '../../../../../DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
-import '@hcaptcha/react-hcaptcha';
-import '../../../../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '@dynamic-labs/ethereum-aa';
 
 const DynamicWidgetModal = ({ children, isShown, onClose, zIndex, className, transitionEvents = {}, }) => {
     usePreventPageScroll(Boolean(isShown));
-    return (jsx(Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, transitionEvents, { children: jsx("div", { className: classNames('dynamic-widget-modal', className), children: jsx(PopperProvider, { children: children }) }) })));
+    return (jsx(Portal, Object.assign({ zIndex: zIndex, handleClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), isShown: isShown, withBackdrop: true }, transitionEvents, { children: jsx("div", { className: classNames('dynamic-widget-modal', className), "data-testid": 'modal-card', children: jsx(PopperProvider, { children: children }) }) })));
 };
 
 export { DynamicWidgetModal };