@dynamic-labs/sdk-react-core 0.17.0-RC.15 → 0.17.0-RC.17

package/src/lib/widgets/DynamicWidget/{components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.cjs → prompts/DefaultPromptModal/DefaultPromptModal.cjs}

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var utils = require('@dynamic-labs/utils');
-var walletBook = require('@dynamic-labs/wallet-book');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
@@ -12,14 +12,15 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
 require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -31,19 +32,11 @@ require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var Button = require('../../../../components/Button/Button.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
-var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-var helpers = require('../../helpers/helpers.cjs');
 
-const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
-    const { name = '' } = walletConnector || {};
-    const iconSize = 80;
-    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: name, style: { height: pixelToRem.pixelToRem(iconSize), width: pixelToRem.pixelToRem(iconSize) } }));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", helpers.capitalize(name)] }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), utils.isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsxRuntime.jsx(Button.Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
-};
+const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 
-exports.DefaultPendingSignModalContent = DefaultPendingSignModalContent;
+exports.DefaultPromptModal = DefaultPromptModal;

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

@@ -0,0 +1,13 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { Iconic } from '@dynamic-labs/iconic';
+import { Icon } from '../../../../shared';
+type Props = {
+    children: ReactNode;
+    className?: string;
+    dataTestId?: string;
+    icon?: Icon | Iconic | ReactElement;
+    showCloseButton?: boolean;
+    title?: string;
+};
+export declare const DefaultPromptModal: FC<Props>;
+export {};

package/src/lib/widgets/DynamicWidget/{components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.js → prompts/DefaultPromptModal/DefaultPromptModal.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { isMobile } from '@dynamic-labs/utils';
-import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import 'react';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
@@ -8,14 +8,15 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
 import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -27,19 +28,11 @@ import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { Button } from '../../../../components/Button/Button.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
-import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
-import { capitalize } from '../../helpers/helpers.js';
 
-const DefaultPendingSignModalContent = ({ walletConnector, onClickToSign }) => {
-    const { name = '' } = walletConnector || {};
-    const iconSize = 80;
-    const icon = (jsx(WalletIcon, { walletName: name, style: { height: pixelToRem(iconSize), width: pixelToRem(iconSize) } }));
-    return (jsxs("div", Object.assign({ className: 'default-pending-sign-modal-content__container' }, { children: [jsx(IconWithSpinner, { iconSize: 80, Icon: icon, isSpinning: true }), name && (jsxs(Typography, Object.assign({ color: 'primary', className: 'default-pending-sign-modal-content__title', variant: 'body_normal', weight: 'medium' }, { children: ["Sign in with ", capitalize(name)] }))), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'medium' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), isMobile() && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaCustodialService) && (jsx(Button, Object.assign({ onClick: onClickToSign }, { children: "Click to Sign" })))] })));
-};
+const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsx(WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxs("div", Object.assign({ className: classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsx(Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 
-export { DefaultPendingSignModalContent };
+export { DefaultPromptModal };

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

@@ -51,7 +51,7 @@ const NoQrNotInstalledModalView = () => {
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsxRuntime.jsx(WalletHelpLink.WalletHelpLink, { name: name, link: link, Icon: getBrowserIcon.getBrowserIcon(name) }, name))));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 exports.NoQrNotInstalledModalView = NoQrNotInstalledModalView;

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

@@ -47,7 +47,7 @@ const NoQrNotInstalledModalView = () => {
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsx(WalletHelpLink, { name: name, link: link, Icon: getBrowserIcon(name) }, name))));
-    return (jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsx(WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }), jsxs(Typography, Object.assign({ variant: 'body_normal' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsx(WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }), jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 export { NoQrNotInstalledModalView };

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

@@ -6,56 +6,31 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var walletBook = require('@dynamic-labs/wallet-book');
-var Typography = require('../../../../components/Typography/Typography.cjs');
-require('@dynamic-labs/sdk-api');
-require('../../../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
-require('../../../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/utils');
-require('../../../../utils/constants/colors.cjs');
-require('ethers');
-require('../../../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
-require('@dynamic-labs/multi-wallet');
-var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
-require('../../../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../../../context/ThemeContext/ThemeContext.cjs');
-require('react-dom');
-require('react-focus-lock');
-require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
-require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
-require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
-require('@dynamic-labs/rpc-providers');
-require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('../../../../context/MockContext/MockContext.cjs');
-require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
-require('../../../../components/Alert/Alert.cjs');
-var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
-require('../../../../components/Popper/Popper/Popper.cjs');
-require('../../../../components/Popper/PopperContext/PopperContext.cjs');
-var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+var useConnectedAccountWallet = require('../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs');
+var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
+var SwitchAccountView = require('./SwitchAccountView/SwitchAccountView.cjs');
+var SwitchOrUseActiveAccountView = require('./SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs');
 
 const PendingAccountSwitchModal = () => {
-    const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    var _a, _b;
+    const { selectedWalletWithAction, primaryWallet, secondaryWallets } = useInternalDynamicContext.useInternalDynamicContext();
+    const selectedConnector = (_a = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.connector;
+    const isSameWallet = (selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name) === (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name);
+    const connectedWallet = useConnectedAccountWallet.useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
     React.useEffect(() => {
+        //flow client library only supports one connected wallet at any given time.
         const disconnectAndConnect = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connectedChain) !== 'FLOW')
+            var _a, _b;
+            if ((selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.connectedChain) !== 'FLOW') {
                 return;
-            yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession());
-            (_a = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connect) === null || _a === void 0 ? void 0 : _a.call(selectedWalletConnector);
+            }
+            yield ((_a = selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(selectedConnector));
+            (_b = selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.connect) === null || _b === void 0 ? void 0 : _b.call(selectedConnector);
         });
         disconnectAndConnect();
-    }, [selectedWalletConnector]);
-    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: {
-            height: pixelToRem.pixelToRem(96 * IconWithSpinner.iconRatio),
-            width: pixelToRem.pixelToRem(96 * IconWithSpinner.iconRatio),
-        } }));
-    return (jsxRuntime.jsxs(WidgetPortal.WidgetPortal, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'pending-account-switch-modal__prompt' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { isSpinning: true, iconSize: 96, Icon: icon }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'pending-account-switch-modal__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'pending-account-switch-modal__title', color: 'primary', variant: 'body_normal', as: 'h6' }, { children: "Switch Connected Account" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', as: 'p', color: 'secondary', weight: 'regular', className: 'pending-account-switch-modal__text' }, { children: "To switch accounts within the same wallet, we need you to first switch the connected account in your wallet." }))] }))] }));
+    }, [selectedConnector]);
+    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsxRuntime.jsx(SwitchAccountView.SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsxRuntime.jsx(SwitchOrUseActiveAccountView.SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
 };
 
 exports.PendingAccountSwitchModal = PendingAccountSwitchModal;

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

@@ -1,57 +1,32 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
-import { Typography } from '../../../../components/Typography/Typography.js';
-import '@dynamic-labs/sdk-api';
-import '../../../../shared/logger.js';
-import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
-import '../../../../context/ViewContext/ViewContext.js';
-import '@dynamic-labs/utils';
-import '../../../../utils/constants/colors.js';
-import 'ethers';
-import '../../../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
-import '@dynamic-labs/multi-wallet';
-import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
-import '../../../../components/ShadowDOM/ShadowDOM.js';
-import '../../../../context/ThemeContext/ThemeContext.js';
-import 'react-dom';
-import 'react-focus-lock';
-import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
-import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
-import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
-import '@dynamic-labs/rpc-providers';
-import '../../../../context/ErrorContext/ErrorContext.js';
-import '../../../../context/MockContext/MockContext.js';
-import '../../../../context/CaptchaContext/CaptchaContext.js';
-import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import '../../../../components/IconButton/IconButton.js';
-import '../../../../components/Alert/Alert.js';
-import { iconRatio, IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
-import '../../../../components/Popper/Popper/Popper.js';
-import '../../../../components/Popper/PopperContext/PopperContext.js';
-import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+import { useConnectedAccountWallet } from '../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js';
+import { DefaultPromptModal } from '../DefaultPromptModal/DefaultPromptModal.js';
+import { SwitchAccountView } from './SwitchAccountView/SwitchAccountView.js';
+import { SwitchOrUseActiveAccountView } from './SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js';
 
 const PendingAccountSwitchModal = () => {
-    const { selectedWalletConnector } = useInternalDynamicContext();
+    var _a, _b;
+    const { selectedWalletWithAction, primaryWallet, secondaryWallets } = useInternalDynamicContext();
+    const selectedConnector = (_a = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _a === void 0 ? void 0 : _a.connector;
+    const isSameWallet = (selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name) === (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name);
+    const connectedWallet = useConnectedAccountWallet((_b = selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet) === null || _b === void 0 ? void 0 : _b.connector, secondaryWallets);
     useEffect(() => {
+        //flow client library only supports one connected wallet at any given time.
         const disconnectAndConnect = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connectedChain) !== 'FLOW')
+            var _a, _b;
+            if ((selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.connectedChain) !== 'FLOW') {
                 return;
-            yield (selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession());
-            (_a = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connect) === null || _a === void 0 ? void 0 : _a.call(selectedWalletConnector);
+            }
+            yield ((_a = selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(selectedConnector));
+            (_b = selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.connect) === null || _b === void 0 ? void 0 : _b.call(selectedConnector);
         });
         disconnectAndConnect();
-    }, [selectedWalletConnector]);
-    const icon = (jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name, style: {
-            height: pixelToRem(96 * iconRatio),
-            width: pixelToRem(96 * iconRatio),
-        } }));
-    return (jsxs(WidgetPortal, { children: [jsx("div", Object.assign({ className: 'pending-account-switch-modal__prompt' }, { children: jsx(IconWithSpinner, { isSpinning: true, iconSize: 96, Icon: icon }) })), jsxs("div", Object.assign({ className: 'pending-account-switch-modal__content' }, { children: [jsx(Typography, Object.assign({ className: 'pending-account-switch-modal__title', color: 'primary', variant: 'body_normal', as: 'h6' }, { children: "Switch Connected Account" })), jsx(Typography, Object.assign({ variant: 'body_small', as: 'p', color: 'secondary', weight: 'regular', className: 'pending-account-switch-modal__text' }, { children: "To switch accounts within the same wallet, we need you to first switch the connected account in your wallet." }))] }))] }));
+    }, [selectedConnector]);
+    return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletName: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsx(SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsx(SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
 };
 
 export { PendingAccountSwitchModal };

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

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+require('../../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../components/Alert/Alert.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+
+const SwitchAccountView = ({ selectedWalletToSwitchTo }) => (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Switch to wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " to make it active."] })));
+
+exports.SwitchAccountView = SwitchAccountView;

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchAccountView/SwitchAccountView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Wallet } from '../../../../../shared';
+type Props = {
+    selectedWalletToSwitchTo: Wallet | undefined;
+};
+export declare const SwitchAccountView: ({ selectedWalletToSwitchTo }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../../context/ViewContext/ViewContext.js';
+import { shortenWalletAddress } from '../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import '../../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/Alert/Alert.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+
+const SwitchAccountView = ({ selectedWalletToSwitchTo }) => (jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Switch to wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " to make it active."] })));
+
+export { SwitchAccountView };

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchAccountView/index.d.ts

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

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

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var Typography = require('../../../../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../../../../utils/constants/colors.cjs');
+require('ethers');
+require('../../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../../../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var Button = require('../../../../../components/Button/Button.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+require('../../../../../components/Alert/Alert.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+var Divider = require('../../../../../components/Divider/Divider.cjs');
+
+const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
+    const { setSelectedWalletWithAction, setSelectedWalletConnector, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const onUseActiveWalletClick = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (!connectedWallet) {
+            return;
+        }
+        if (connectedWallet.connector.connectedChain === 'FLOW') {
+            (_b = (_a = connectedWallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
+        setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
+        computeConnectedStateForWallets();
+        setSelectedWalletConnector(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector);
+    }), [
+        connectedWallet,
+        setSelectedWalletWithAction,
+        setPrimaryWallet,
+        computeConnectedStateForWallets,
+        setSelectedWalletConnector,
+    ]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxRuntime.jsxs(Button.Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'xsmall' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name }) })), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
+};
+
+exports.SwitchOrUseActiveAccountView = SwitchOrUseActiveAccountView;

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Wallet } from '../../../../../shared';
+type Props = {
+    connectedWallet: Wallet;
+    selectedWalletToSwitchTo: Wallet | undefined;
+};
+export declare const SwitchOrUseActiveAccountView: ({ connectedWallet, selectedWalletToSwitchTo, }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,63 @@
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { Typography } from '../../../../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../../context/ViewContext/ViewContext.js';
+import { shortenWalletAddress } from '../../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../../../../utils/constants/colors.js';
+import 'ethers';
+import '../../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../../../../components/Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { Button } from '../../../../../components/Button/Button.js';
+import '../../../../../components/IconButton/IconButton.js';
+import '../../../../../components/Alert/Alert.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import { Divider } from '../../../../../components/Divider/Divider.js';
+
+const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
+    const { setSelectedWalletWithAction, setSelectedWalletConnector, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const onUseActiveWalletClick = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if (!connectedWallet) {
+            return;
+        }
+        if (connectedWallet.connector.connectedChain === 'FLOW') {
+            (_b = (_a = connectedWallet.connector).endSession) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        setSelectedWalletWithAction({ action: 'select', wallet: connectedWallet });
+        setPrimaryWallet(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.id);
+        computeConnectedStateForWallets();
+        setSelectedWalletConnector(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector);
+    }), [
+        connectedWallet,
+        setSelectedWalletWithAction,
+        setPrimaryWallet,
+        computeConnectedStateForWallets,
+        setSelectedWalletConnector,
+    ]);
+    return (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxs(Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsx(Icon, Object.assign({ size: 'xsmall' }, { children: jsx(WalletIcon, { walletName: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name }) })), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
+};
+
+export { SwitchOrUseActiveAccountView };

package/src/lib/widgets/DynamicWidget/prompts/PendingAccountSwitchModal/SwitchOrUseActiveAccountView/index.d.ts

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