@dynamic-labs/sdk-react-core 3.0.0-alpha.52 → 3.0.0-alpha.54

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

@@ -63,9 +63,9 @@ require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

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

@@ -59,9 +59,9 @@ import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

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

@@ -64,9 +64,9 @@ require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

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

@@ -60,9 +60,9 @@ import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

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

@@ -66,9 +66,9 @@ require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

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

@@ -62,9 +62,9 @@ import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

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

@@ -65,9 +65,9 @@ require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

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

@@ -61,9 +61,9 @@ import '../../context/DynamicWidgetContext.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

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

@@ -65,9 +65,9 @@ require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

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

@@ -61,9 +61,9 @@ import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

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

@@ -63,10 +63,10 @@ require('react-focus-lock');
 require('../../context/DynamicWidgetContext.cjs');
 var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');

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

@@ -59,10 +59,10 @@ import 'react-focus-lock';
 import '../../context/DynamicWidgetContext.js';
 import { DotsMenu } from '../DotsMenu/DotsMenu.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';

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

@@ -141,7 +141,7 @@ const Wallet = ({ wallet, ens }) => {
             text: 'Export private keys',
         });
     }
-    return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: 'wallet__row', children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) })] })) : (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
+    return (jsxRuntime.jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxRuntime.jsxs("div", { className: 'wallet__row', children: [jsxRuntime.jsx("div", { className: 'wallet__icon-container', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showNetworkIcon: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsxRuntime.jsx("div", { className: 'wallet__row__seperator' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress.shortenWalletAddress(address, 3, 3) })] })) : (jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) }))] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
 };
 
 exports.Wallet = Wallet;

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

@@ -137,7 +137,7 @@ const Wallet = ({ wallet, ens }) => {
             text: 'Export private keys',
         });
     }
-    return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: 'wallet__row', children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showStatus: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress(address, 3, 3) })] })) : (jsx(Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
+    return (jsxs("div", { className: 'wallet__container', "data-testid": 'wallet', children: [jsxs("div", { className: 'wallet__row', children: [jsx("div", { className: 'wallet__icon-container', children: jsx(AuthProviderIcon, { iconSize: iconSize, wallet: wallet, showNetworkIcon: true }) }), (ens === null || ens === void 0 ? void 0 : ens.name) ? (jsxs(Fragment, { children: [jsx(Typography, { className: 'wallet__ens-name', variant: 'body_small', color: 'primary', truncate: true, children: ens === null || ens === void 0 ? void 0 : ens.name }), jsx("div", { className: 'wallet__row__seperator' }), jsx(Typography, { variant: 'body_mini', color: 'secondary', children: shortenWalletAddress(address, 3, 3) })] })) : (jsx(Typography, { variant: 'body_small', color: 'primary', children: shortenWalletAddress(address, 4, 4) }))] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'wallet__menu', direction: 'left' })] }));
 };
 
 export { Wallet };

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

@@ -4,7 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-require('@dynamic-labs/wallet-connector-core');
+var walletBook = require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../utils/constants/values.cjs');
 require('@dynamic-labs/utils');
@@ -12,7 +12,7 @@ require('../../../../../../_virtual/_tslib.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../../shared/logger.cjs');
 var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
-require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../../shared/utils/classes/storage/sessionStorage.cjs');
@@ -91,12 +91,15 @@ require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 
-const WalletIconWithNetwork = ({ iconSize = 24, chainName, Icon, showNetwork = true, }) => {
+const WalletIconWithNetwork = ({ iconSize = 24, chainName, Icon, showNetwork = true, walletKey, }) => {
     const ChainIcon = chainName ? getChainIcon.getChainIcon(chainName) : undefined;
-    return (jsxRuntime.jsxs("div", { className: 'wallet-icon-with-network__container', children: [jsxRuntime.jsx(Icon, { style: {
+    return (jsxRuntime.jsxs("div", { className: 'wallet-icon-with-network__container', children: [Icon ? (jsxRuntime.jsx(Icon, { style: {
+                    height: pixelToRem.pixelToRem(iconSize),
+                    width: pixelToRem.pixelToRem(iconSize),
+                } })) : (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, style: {
                     height: pixelToRem.pixelToRem(iconSize),
                     width: pixelToRem.pixelToRem(iconSize),
-                } }), ChainIcon && showNetwork && (jsxRuntime.jsx("div", { "data-testid": 'network-container', className: classNames.classNames('wallet-icon-with-network__network-container'), children: jsxRuntime.jsx(ChainIcon, {}) }))] }));
+                } })), ChainIcon && showNetwork && (jsxRuntime.jsx("div", { "data-testid": 'network-container', className: classNames.classNames('wallet-icon-with-network__network-container'), children: jsxRuntime.jsx(ChainIcon, {}) }))] }));
 };
 
 exports.WalletIconWithNetwork = WalletIconWithNetwork;

package/src/lib/widgets/DynamicWidget/components/WalletIconWithNetwork/WalletIconWithNetwork.d.ts

@@ -3,8 +3,9 @@ import { Icon } from '../../../../shared';
 type Props = {
     iconSize?: number;
     chainName: string;
-    Icon: Icon;
+    Icon: Icon | null;
     showNetwork?: boolean;
+    walletKey?: string;
 };
-export declare const WalletIconWithNetwork: ({ iconSize, chainName, Icon, showNetwork, }: Props) => JSX.Element;
+export declare const WalletIconWithNetwork: ({ iconSize, chainName, Icon, showNetwork, walletKey, }: Props) => JSX.Element;
 export {};

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

@@ -1,6 +1,6 @@
 'use client'
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@dynamic-labs/wallet-connector-core';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../utils/constants/values.js';
 import '@dynamic-labs/utils';
@@ -8,7 +8,7 @@ import '../../../../../../_virtual/_tslib.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../../shared/logger.js';
 import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
-import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import '../../../../shared/utils/classes/storage/sessionStorage.js';
@@ -87,12 +87,15 @@ import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 
-const WalletIconWithNetwork = ({ iconSize = 24, chainName, Icon, showNetwork = true, }) => {
+const WalletIconWithNetwork = ({ iconSize = 24, chainName, Icon, showNetwork = true, walletKey, }) => {
     const ChainIcon = chainName ? getChainIcon(chainName) : undefined;
-    return (jsxs("div", { className: 'wallet-icon-with-network__container', children: [jsx(Icon, { style: {
+    return (jsxs("div", { className: 'wallet-icon-with-network__container', children: [Icon ? (jsx(Icon, { style: {
+                    height: pixelToRem(iconSize),
+                    width: pixelToRem(iconSize),
+                } })) : (jsx(WalletIcon, { walletKey: walletKey, style: {
                     height: pixelToRem(iconSize),
                     width: pixelToRem(iconSize),
-                } }), ChainIcon && showNetwork && (jsx("div", { "data-testid": 'network-container', className: classNames('wallet-icon-with-network__network-container'), children: jsx(ChainIcon, {}) }))] }));
+                } })), ChainIcon && showNetwork && (jsx("div", { "data-testid": 'network-container', className: classNames('wallet-icon-with-network__network-container'), children: jsx(ChainIcon, {}) }))] }));
 };
 
 export { WalletIconWithNetwork };

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

@@ -63,9 +63,9 @@ require('../../context/DynamicWidgetContext.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');
@@ -90,7 +90,7 @@ require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const WidgetPortal = ({ children, onClose, disablePadding }) => (jsxRuntime.jsx("div", { className: 'widget-portal', onClick: onClose, "data-testid": 'backdrop', children: jsxRuntime.jsxs("div", { className: classNames.classNames('widget-portal__container', {
+const WidgetPortal = ({ children, onClose, disablePadding, portalClassName, portalContainerClassName, }) => (jsxRuntime.jsx("div", { className: classNames.classNames(portalClassName, 'widget-portal'), onClick: onClose, "data-testid": 'backdrop', children: jsxRuntime.jsxs("div", { className: classNames.classNames(portalContainerClassName, 'widget-portal__container', {
             'widget-portal__container--no-padding': disablePadding,
         }), onClick: (e) => e.stopPropagation(), children: [onClose && (jsxRuntime.jsx("div", { className: 'widget-portal__container__header', children: jsxRuntime.jsx(IconButton.IconButton, { className: 'widget-portal__container__close-button', onClick: (e) => onClose(e), type: 'button', "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }) })), children] }) }));
 

package/src/lib/widgets/DynamicWidget/components/WidgetPortal/WidgetPortal.d.ts

@@ -5,6 +5,8 @@ type Props = {
     onClose?: (e: {
         stopPropagation: VoidFunction;
     }) => void;
+    portalClassName?: string;
+    portalContainerClassName?: string;
 };
-export declare const WidgetPortal: ({ children, onClose, disablePadding }: Props) => JSX.Element;
+export declare const WidgetPortal: ({ children, onClose, disablePadding, portalClassName, portalContainerClassName, }: Props) => JSX.Element;
 export {};

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

@@ -59,9 +59,9 @@ import '../../context/DynamicWidgetContext.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';
@@ -86,7 +86,7 @@ import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const WidgetPortal = ({ children, onClose, disablePadding }) => (jsx("div", { className: 'widget-portal', onClick: onClose, "data-testid": 'backdrop', children: jsxs("div", { className: classNames('widget-portal__container', {
+const WidgetPortal = ({ children, onClose, disablePadding, portalClassName, portalContainerClassName, }) => (jsx("div", { className: classNames(portalClassName, 'widget-portal'), onClick: onClose, "data-testid": 'backdrop', children: jsxs("div", { className: classNames(portalContainerClassName, 'widget-portal__container', {
             'widget-portal__container--no-padding': disablePadding,
         }), onClick: (e) => e.stopPropagation(), children: [onClose && (jsx("div", { className: 'widget-portal__container__header', children: jsx(IconButton, { className: 'widget-portal__container__close-button', onClick: (e) => onClose(e), type: 'button', "data-testid": 'close-button', children: jsx(SvgClose, {}) }) })), children] }) }));
 

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs

@@ -93,11 +93,12 @@ const useFetchChain = (connector) => {
     const fetchChain = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
         if (!connector)
-            return { name: '', symbol: undefined };
+            return { chainId: undefined, name: '', symbol: undefined };
         const chainId = yield connector.getNetwork();
         const { connectedChain } = connector;
         const chainInfo = walletConnectorCore.getChainInfoWithOverrides(connectedChain || '');
         const chainWithIcon = {
+            chainId,
             name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
             symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
         };

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.d.ts

@@ -4,6 +4,7 @@ export type ChainWithIcon = {
     icon?: string;
     name: string | undefined;
     symbol: Chain | undefined;
+    chainId?: string | number;
 };
 export declare const useFetchChain: (connector: WalletConnector | undefined) => {
     chain: ChainWithIcon | undefined;

package/src/lib/widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.js

@@ -89,11 +89,12 @@ const useFetchChain = (connector) => {
     const fetchChain = () => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         if (!connector)
-            return { name: '', symbol: undefined };
+            return { chainId: undefined, name: '', symbol: undefined };
         const chainId = yield connector.getNetwork();
         const { connectedChain } = connector;
         const chainInfo = getChainInfoWithOverrides(connectedChain || '');
         const chainWithIcon = {
+            chainId,
             name: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName,
             symbol: chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.symbol,
         };

package/src/lib/widgets/DynamicWidget/prompts/DefaultPromptModal/DefaultPromptModal.cjs

@@ -65,9 +65,9 @@ require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');
@@ -92,8 +92,8 @@ require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('qrcode');
 
-const DefaultPromptLayout = ({ children, className = '', dataTestId = '', icon, title, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('default-prompt-modal', className), "data-testid": dataTestId, children: [icon && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true, className: 'default-prompt-modal__icon-with-spinner' })), jsxRuntime.jsxs("div", { className: 'default-prompt-modal__content', children: [title && (jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', "data-testid": 'title', children: title })), children] })] }));
-const DefaultPromptModal = (props) => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: props.onClose, children: jsxRuntime.jsx(DefaultPromptLayout, Object.assign({}, props)) }));
+const DefaultPromptLayout = ({ children, className = '', dataTestId = '', icon, showSpinnerInIcon = true, title, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('default-prompt-modal', className), "data-testid": dataTestId, children: [icon && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: showSpinnerInIcon, className: 'default-prompt-modal__icon-with-spinner' })), jsxRuntime.jsxs("div", { className: 'default-prompt-modal__content', children: [title && (jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', "data-testid": 'title', children: title })), children] })] }));
+const DefaultPromptModal = (props) => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: props.onClose, portalClassName: 'prompt-modal-portal', portalContainerClassName: 'prompt-modal-portal__container', children: jsxRuntime.jsx(DefaultPromptLayout, Object.assign({}, props)) }));
 
 exports.DefaultPromptLayout = DefaultPromptLayout;
 exports.DefaultPromptModal = DefaultPromptModal;

package/src/lib/widgets/DynamicWidget/prompts/DefaultPromptModal/DefaultPromptModal.d.ts

@@ -6,6 +6,7 @@ type Props = {
     className?: string;
     dataTestId?: string;
     icon?: Icon | Iconic | ReactElement;
+    showSpinnerInIcon?: boolean;
     onClose?: (e: {
         stopPropagation: VoidFunction;
     }) => void;

package/src/lib/widgets/DynamicWidget/prompts/DefaultPromptModal/DefaultPromptModal.js

@@ -61,9 +61,9 @@ import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';
@@ -88,7 +88,7 @@ import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import 'qrcode';
 
-const DefaultPromptLayout = ({ children, className = '', dataTestId = '', icon, title, }) => (jsxs("div", { className: classNames('default-prompt-modal', className), "data-testid": dataTestId, children: [icon && (jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true, className: 'default-prompt-modal__icon-with-spinner' })), jsxs("div", { className: 'default-prompt-modal__content', children: [title && (jsx(Typography, { variant: 'title', color: 'primary', "data-testid": 'title', children: title })), children] })] }));
-const DefaultPromptModal = (props) => (jsx(WidgetPortal, { onClose: props.onClose, children: jsx(DefaultPromptLayout, Object.assign({}, props)) }));
+const DefaultPromptLayout = ({ children, className = '', dataTestId = '', icon, showSpinnerInIcon = true, title, }) => (jsxs("div", { className: classNames('default-prompt-modal', className), "data-testid": dataTestId, children: [icon && (jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: showSpinnerInIcon, className: 'default-prompt-modal__icon-with-spinner' })), jsxs("div", { className: 'default-prompt-modal__content', children: [title && (jsx(Typography, { variant: 'title', color: 'primary', "data-testid": 'title', children: title })), children] })] }));
+const DefaultPromptModal = (props) => (jsx(WidgetPortal, { onClose: props.onClose, portalClassName: 'prompt-modal-portal', portalContainerClassName: 'prompt-modal-portal__container', children: jsx(DefaultPromptLayout, Object.assign({}, props)) }));
 
 export { DefaultPromptLayout, DefaultPromptModal };

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.cjs

@@ -63,15 +63,14 @@ var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 var useCloseMultiWalletPrompt = require('../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
 var HardwareWalletToggle = require('../../../../components/HardwareWalletToggle/HardwareWalletToggle.cjs');
-var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');
@@ -94,7 +93,6 @@ require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../context/ReinitializeContext/ReinitializeContextProvider.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
-var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
 require('react-focus-lock');
 require('qrcode');
 
@@ -105,13 +103,13 @@ const DetectedNewWalletContent = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
-    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key }), title: t('dyn_detected_new_wallet.title'), children: [jsxRuntime.jsxs("div", { className: 'detected-new-wallet-modal__top-section', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
-                            walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
-                        }) }), walletConnector &&
-                        walletConnectorCore.isHardwareWalletConnector(walletConnector) &&
-                        walletConnector.canConnectWithHardwareWallet() && (jsxRuntime.jsx(HardwareWalletToggle.HardwareWalletToggle, { connectors: [walletConnector], copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
-                            variant: 'button_secondary',
-                        }, children: t('dyn_detected_new_wallet.confirm_button') })] }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(LogoutButton.LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
+    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key }), title: t('dyn_detected_new_wallet.title'), children: jsxRuntime.jsxs("div", { className: 'detected-new-wallet-modal__top-section', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
+                        walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
+                    }) }), walletConnector &&
+                    walletConnectorCore.isHardwareWalletConnector(walletConnector) &&
+                    walletConnector.canConnectWithHardwareWallet() && (jsxRuntime.jsx(HardwareWalletToggle.HardwareWalletToggle, { connectors: [walletConnector], copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') })), jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                        variant: 'button_secondary',
+                    }, children: t('dyn_detected_new_wallet.confirm_button') })] }) }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsxRuntime.jsx(PromptModal.PromptModal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));

package/src/lib/widgets/DynamicWidget/prompts/DetectedNewWalletModal/DetectedNewWalletModal.js

@@ -59,15 +59,14 @@ import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import { useCloseMultiWalletPrompt } from '../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.js';
 import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
 import { HardwareWalletToggle } from '../../../../components/HardwareWalletToggle/HardwareWalletToggle.js';
-import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';
@@ -90,7 +89,6 @@ import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../context/ReinitializeContext/ReinitializeContextProvider.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
-import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
 import 'react-focus-lock';
 import 'qrcode';
 
@@ -101,13 +99,13 @@ const DetectedNewWalletContent = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
     const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
-    return (jsxs(DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key }), title: t('dyn_detected_new_wallet.title'), children: [jsxs("div", { className: 'detected-new-wallet-modal__top-section', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
-                            walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
-                        }) }), walletConnector &&
-                        isHardwareWalletConnector(walletConnector) &&
-                        walletConnector.canConnectWithHardwareWallet() && (jsx(HardwareWalletToggle, { connectors: [walletConnector], copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') })), jsx(TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
-                            variant: 'button_secondary',
-                        }, children: t('dyn_detected_new_wallet.confirm_button') })] }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
+    return (jsx(DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key }), title: t('dyn_detected_new_wallet.title'), children: jsxs("div", { className: 'detected-new-wallet-modal__top-section', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
+                        walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name,
+                    }) }), walletConnector &&
+                    isHardwareWalletConnector(walletConnector) &&
+                    walletConnector.canConnectWithHardwareWallet() && (jsx(HardwareWalletToggle, { connectors: [walletConnector], copykey: 'dyn_select_chain.using_hardware_wallet_toggle_label', label: t('dyn_select_chain.using_hardware_wallet_toggle_label') })), jsx(TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                        variant: 'button_secondary',
+                    }, children: t('dyn_detected_new_wallet.confirm_button') })] }) }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsx(WidgetPortal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsx(PromptModal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));

package/src/lib/widgets/DynamicWidget/prompts/NoQrNotInstalledModalView/NoQrNotInstalledModalView.cjs

@@ -66,9 +66,9 @@ require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../polyfills.cjs');

package/src/lib/widgets/DynamicWidget/prompts/NoQrNotInstalledModalView/NoQrNotInstalledModalView.js

@@ -62,9 +62,9 @@ import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../polyfills.js';

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchAccountView/SwitchAccountView.cjs

@@ -64,9 +64,9 @@ require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../polyfills.cjs');

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchAccountView/SwitchAccountView.js

@@ -60,9 +60,9 @@ import '../../../context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
 import 'formik';
+import '@dynamic-labs/ethereum-core';
 import '../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.js';
 import '../../../../../components/Input/Input.js';
-import '@dynamic-labs/ethereum-core';
 import '../../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../../../polyfills.js';

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs

@@ -67,9 +67,9 @@ require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
 require('formik');
+require('@dynamic-labs/ethereum-core');
 require('../../../../../views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs');
 require('../../../../../components/Input/Input.cjs');
-require('@dynamic-labs/ethereum-core');
 require('../../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../../../polyfills.cjs');