@dynamic-labs/sdk-react-core 0.16.0 → 0.16.2

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

@@ -0,0 +1,51 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isSameAddress } from '@dynamic-labs/multi-wallet';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgPromptAccountSwitch } from '../../../../shared/assets/prompt-account-switch.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+import { Typography } from '../../../../components/Typography/Typography.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 '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+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';
+
+const DetectedKnownSecondaryWalletModal = ({ setNewWalletId, }) => {
+    const { setMultiWalletWidgetState, primaryWallet, secondaryWallets, setPrimaryWallet, } = useInternalDynamicContext();
+    const handleButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        const publicAddress = yield (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.fetchPublicAddress());
+        if (!publicAddress) {
+            return;
+        }
+        const wallet = secondaryWallets.find((wallet) => isSameAddress(wallet.address, publicAddress, wallet.chain));
+        if (!wallet) {
+            return;
+        }
+        setMultiWalletWidgetState('idle');
+        setNewWalletId(wallet.id);
+        setPrimaryWallet(wallet.id);
+    });
+    return (jsx(WidgetPortal, Object.assign({ onBackdropClick: handleButtonClick }, { children: jsxs("div", Object.assign({ className: 'detected-known-secondary-wallet-modal__content' }, { children: [jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: "Account Change Detected" })), jsx(SvgPromptAccountSwitch, {}), jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: `Your active account in ${primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name} has changed. We’re updating the primary account here to match your wallet status.` })), jsx(Button, Object.assign({ onClick: handleButtonClick, buttonVariant: 'primary', expanded: true, buttonRounded: 'default', typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Sounds good!" }))] })) })));
+};
+
+export { DetectedKnownSecondaryWalletModal };

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+var promptAccountSwitch = require('../../../../shared/assets/prompt-account-switch.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+var Typography = require('../../../../components/Typography/Typography.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('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+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');
+
+const DetectedNewWalletModal = () => {
+    const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const handleClick = () => {
+        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+    };
+    return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'detected-new-wallet-modal__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Account Change Detected" })), jsxRuntime.jsx(promptAccountSwitch.ReactComponent, {}), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Your active account in ", primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name, " has changed. This account is not currently linked to this app. Do you want to add it?"] })), jsxRuntime.jsx(Button.Button, Object.assign({ expanded: true, buttonRounded: 'default', onClick: handleClick, typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Yes, link this wallet" }))] })) }));
+};
+
+exports.DetectedNewWalletModal = DetectedNewWalletModal;

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgPromptAccountSwitch } from '../../../../shared/assets/prompt-account-switch.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+import { Typography } from '../../../../components/Typography/Typography.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 '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+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';
+
+const DetectedNewWalletModal = () => {
+    const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext();
+    const handleClick = () => {
+        setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
+    };
+    return (jsx(WidgetPortal, { children: jsxs("div", Object.assign({ className: 'detected-new-wallet-modal__content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Account Change Detected" })), jsx(SvgPromptAccountSwitch, {}), jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: ["Your active account in ", primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name, " has changed. This account is not currently linked to this app. Do you want to add it?"] })), jsx(Button, Object.assign({ expanded: true, buttonRounded: 'default', onClick: handleClick, typographyProps: {
+                        variant: 'button_secondary',
+                    } }, { children: "Yes, link this wallet" }))] })) }));
+};
+
+export { DetectedNewWalletModal };

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

@@ -0,0 +1,55 @@
+'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/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+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('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+
+const PendingAccountSwitchModal = () => {
+    const { selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
+    React.useEffect(() => {
+        const disconnectAndConnect = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connectedChain) !== 'FLOW')
+                return;
+            yield ((_a = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(selectedWalletConnector));
+            (_b = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connect) === null || _b === void 0 ? void 0 : _b.call(selectedWalletConnector);
+        });
+        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." }))] }))] }));
+};
+
+exports.PendingAccountSwitchModal = PendingAccountSwitchModal;

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

@@ -0,0 +1,51 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx, jsxs } 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/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+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 '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../components/IconButton/IconButton.js';
+import { iconRatio, IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+
+const PendingAccountSwitchModal = () => {
+    const { selectedWalletConnector } = useInternalDynamicContext();
+    useEffect(() => {
+        const disconnectAndConnect = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b;
+            if ((selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connectedChain) !== 'FLOW')
+                return;
+            yield ((_a = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.endSession) === null || _a === void 0 ? void 0 : _a.call(selectedWalletConnector));
+            (_b = selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.connect) === null || _b === void 0 ? void 0 : _b.call(selectedWalletConnector);
+        });
+        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." }))] }))] }));
+};
+
+export { PendingAccountSwitchModal };

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

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+var useConnectAndSignSplitSteps = require('../../../../utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
+var DefaultPendingSignModalContent = require('../../components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.cjs');
+var EmailConnectorPendingSignModalContent = require('../../components/EmailConnectorPendingSignModalContent/EmailConnectorPendingSignModalContent.cjs');
+var EmailOTPConnectorPendingSignModalContent = require('../../components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.cjs');
+
+const PendingSignModal = () => {
+    const { selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { signAlreadyConnectedUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
+    const handleClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (selectedWalletConnector) {
+                yield signAlreadyConnectedUser({
+                    walletConnector: selectedWalletConnector,
+                });
+            }
+        }
+        catch (e) {
+            logger.logger.error(e);
+        }
+        finally {
+            setMultiWalletWidgetState('idle');
+        }
+    });
+    const handleOnClickBackdrop = () => {
+        setMultiWalletWidgetState('idle');
+        setSelectedWalletConnector(null);
+    };
+    if (selectedWalletConnector !== null) {
+        if (multiWallet.isEmailOTPWalletConnector(selectedWalletConnector)) {
+            return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop, disablePadding: true }, { children: jsxRuntime.jsx(EmailOTPConnectorPendingSignModalContent.EmailOTPConnectorPendingSignModalContent, { walletConnector: selectedWalletConnector }) })));
+        }
+        if (multiWallet.isEmailWalletConnector(selectedWalletConnector)) {
+            return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop }, { children: jsxRuntime.jsx(EmailConnectorPendingSignModalContent.EmailConnectorPendingSignModalContent, { emailWalletConnector: selectedWalletConnector }) })));
+        }
+    }
+    return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop }, { children: jsxRuntime.jsx(DefaultPendingSignModalContent.DefaultPendingSignModalContent, { walletConnector: selectedWalletConnector, onClickToSign: handleClick }) })));
+};
+
+exports.PendingSignModal = PendingSignModal;

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

@@ -0,0 +1,54 @@
+import { __awaiter } from '../../../../../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { isEmailOTPWalletConnector, isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import { useConnectAndSignSplitSteps } from '../../../../utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
+import { DefaultPendingSignModalContent } from '../../components/DefaultPendingSignModalContent/DefaultPendingSignModalContent.js';
+import { EmailConnectorPendingSignModalContent } from '../../components/EmailConnectorPendingSignModalContent/EmailConnectorPendingSignModalContent.js';
+import { EmailOTPConnectorPendingSignModalContent } from '../../components/EmailOTPConnectorPendingSignModalContent/EmailOTPConnectorPendingSignModalContent.js';
+
+const PendingSignModal = () => {
+    const { selectedWalletConnector, setSelectedWalletConnector, setMultiWalletWidgetState, } = useInternalDynamicContext();
+    const { signAlreadyConnectedUser } = useConnectAndSignSplitSteps();
+    const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (selectedWalletConnector) {
+                yield signAlreadyConnectedUser({
+                    walletConnector: selectedWalletConnector,
+                });
+            }
+        }
+        catch (e) {
+            logger.error(e);
+        }
+        finally {
+            setMultiWalletWidgetState('idle');
+        }
+    });
+    const handleOnClickBackdrop = () => {
+        setMultiWalletWidgetState('idle');
+        setSelectedWalletConnector(null);
+    };
+    if (selectedWalletConnector !== null) {
+        if (isEmailOTPWalletConnector(selectedWalletConnector)) {
+            return (jsx(WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop, disablePadding: true }, { children: jsx(EmailOTPConnectorPendingSignModalContent, { walletConnector: selectedWalletConnector }) })));
+        }
+        if (isEmailWalletConnector(selectedWalletConnector)) {
+            return (jsx(WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop }, { children: jsx(EmailConnectorPendingSignModalContent, { emailWalletConnector: selectedWalletConnector }) })));
+        }
+    }
+    return (jsx(WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop }, { children: jsx(DefaultPendingSignModalContent, { walletConnector: selectedWalletConnector, onClickToSign: handleClick }) })));
+};
+
+export { PendingSignModal };

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

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.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('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+var IconWithSpinner = require('../../../../components/IconWithSpinner/IconWithSpinner.cjs');
+var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
+var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
+
+const PrimaryNotConnectedModal = () => {
+    var _a;
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const icon = jsxRuntime.jsx(walletBook.WalletIcon, { walletName: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name });
+    const primaryWalletCopy = React.useMemo(() => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["to", ' ', jsxRuntime.jsx("span", Object.assign({ className: 'primary-not-connected__content-bold' }, { children: shortenWalletAddress.shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 4, 4) })), ' ', "in", ' ', jsxRuntime.jsx("span", Object.assign({ className: 'primary-not-connected__content-bold' }, { children: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name })), ' '] })), [primaryWallet]);
+    return (jsxRuntime.jsxs(WidgetPortal.WidgetPortal, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'primary-not-connected__prompt-container' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }) })), jsxRuntime.jsx("div", Object.assign({ className: 'primary-not-connected__content-container' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'primary-not-connected__content', "data-testid": 'wallet-not-connected' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: "Update your active wallet" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: ["Update your active wallet ", primaryWallet && primaryWalletCopy, "to reconnect."] }))] })) })), jsxRuntime.jsx(LogoutButton.LogoutButton, { buttonClassName: 'primary-not-connected__logout-button' })] }));
+};
+
+exports.PrimaryNotConnectedModal = PrimaryNotConnectedModal;

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } 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/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.js';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.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 '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../components/IconButton/IconButton.js';
+import { IconWithSpinner } from '../../../../components/IconWithSpinner/IconWithSpinner.js';
+import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
+import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
+
+const PrimaryNotConnectedModal = () => {
+    var _a;
+    const { primaryWallet } = useInternalDynamicContext();
+    const icon = jsx(WalletIcon, { walletName: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name });
+    const primaryWalletCopy = useMemo(() => (jsxs(Fragment, { children: ["to", ' ', jsx("span", Object.assign({ className: 'primary-not-connected__content-bold' }, { children: shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 4, 4) })), ' ', "in", ' ', jsx("span", Object.assign({ className: 'primary-not-connected__content-bold' }, { children: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name })), ' '] })), [primaryWallet]);
+    return (jsxs(WidgetPortal, { children: [jsx("div", Object.assign({ className: 'primary-not-connected__prompt-container' }, { children: jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }) })), jsx("div", Object.assign({ className: 'primary-not-connected__content-container' }, { children: jsxs("div", Object.assign({ className: 'primary-not-connected__content', "data-testid": 'wallet-not-connected' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: "Update your active wallet" })), jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: ["Update your active wallet ", primaryWallet && primaryWalletCopy, "to reconnect."] }))] })) })), jsx(LogoutButton, { buttonClassName: 'primary-not-connected__logout-button' })] }));
+};
+
+export { PrimaryNotConnectedModal };

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

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var multiWallet = require('@dynamic-labs/multi-wallet');
+var walletBook = require('@dynamic-labs/wallet-book');
+var QRCode = require('../../../../views/QrCodeView/QRCode.cjs');
+require('react');
+var Typography = require('../../../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var link = require('../../../../shared/assets/link.cjs');
+var externalLink = require('../../../../shared/assets/externalLink.cjs');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+var ThemeContext = 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');
+var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+var TextButton = require('../../../../components/TextButton/TextButton.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('ethers');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+
+const QrCodeModalView = ({ walletId }) => {
+    var _a;
+    const { secondaryWallets, qrcodeUri, desktopUri } = useInternalDynamicContext.useInternalDynamicContext();
+    const newPrimaryWallet = secondaryWallets.find(({ id }) => id === walletId);
+    const walletName = ((_a = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name) || '';
+    const { theme } = ThemeContext.useThemeContext();
+    const qrCodeColorsByTheme = {
+        dark: {
+            accentColor: 'var(--dynamic-text-primary)',
+        },
+        light: {
+            accentColor: walletBook.getWalletPrimaryColor(walletName) || 'var(--dynamic-text-primary)',
+        },
+    };
+    // can't use theme because it's string instead of 'light' | 'dark'
+    const typedTheme = theme.theme.name === 'light' ? 'light' : 'dark';
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName, style: { height: pixelToRem.pixelToRem(24), width: pixelToRem.pixelToRem(24) } }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxRuntime.jsx("div", Object.assign({ className: 'qr-code-modal-view__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'qr-code-modal-view__wrapper' }, { children: qrcodeUri ? (jsxRuntime.jsx(QRCode.QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletName: multiWallet.normalizeWalletName(walletName) })) : (
+                    // this div exists to give the parent a child, so that the parent
+                    // takes on its given width and height. the result is stable
+                    // rendering of this component, without this there is a brief flash
+                    jsxRuntime.jsx("div", { "data-testid": 'no-qrcode' })) })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'button__container' }, { children: [(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.isWalletConnect) && qrcodeUri && (jsxRuntime.jsxs(CopyButton.CopyButton, Object.assign({ textToCopy: qrcodeUri }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small', color: 'text-tertiary' }, { children: jsxRuntime.jsx(link.ReactComponent, {}) })), "Copy QR URI"] }))), desktopUri && (jsxRuntime.jsxs(TextButton.TextButton, Object.assign({ className: 'button--open-app', onClick: () => window.open(desktopUri) }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'xsmall', color: 'text-tertiary' }, { children: jsxRuntime.jsx(externalLink.ReactComponent, {}) })), "Open ", walletName, " App"] })))] }))] })));
+};
+
+exports.QrCodeModalView = QrCodeModalView;

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { normalizeWalletName } from '@dynamic-labs/multi-wallet';
+import { getWalletPrimaryColor, WalletIcon } from '@dynamic-labs/wallet-book';
+import { QRCode } from '../../../../views/QrCodeView/QRCode.js';
+import 'react';
+import { Typography } from '../../../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgLink } from '../../../../shared/assets/link.js';
+import { ReactComponent as SvgExternalLink } from '../../../../shared/assets/externalLink.js';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import { useThemeContext } from '../../../../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 { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
+import '../../../../components/IconButton/IconButton.js';
+import { TextButton } from '../../../../components/TextButton/TextButton.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import 'ethers';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+
+const QrCodeModalView = ({ walletId }) => {
+    var _a;
+    const { secondaryWallets, qrcodeUri, desktopUri } = useInternalDynamicContext();
+    const newPrimaryWallet = secondaryWallets.find(({ id }) => id === walletId);
+    const walletName = ((_a = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name) || '';
+    const { theme } = useThemeContext();
+    const qrCodeColorsByTheme = {
+        dark: {
+            accentColor: 'var(--dynamic-text-primary)',
+        },
+        light: {
+            accentColor: getWalletPrimaryColor(walletName) || 'var(--dynamic-text-primary)',
+        },
+    };
+    // can't use theme because it's string instead of 'light' | 'dark'
+    const typedTheme = theme.theme.name === 'light' ? 'light' : 'dark';
+    const icon = (jsx(WalletIcon, { walletName: walletName, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
+    return (jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxs(Typography, Object.assign({ variant: 'button_primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsx("div", Object.assign({ className: 'qr-code-modal-view__container' }, { children: jsx("div", Object.assign({ className: 'qr-code-modal-view__wrapper' }, { children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletName: normalizeWalletName(walletName) })) : (
+                    // this div exists to give the parent a child, so that the parent
+                    // takes on its given width and height. the result is stable
+                    // rendering of this component, without this there is a brief flash
+                    jsx("div", { "data-testid": 'no-qrcode' })) })) })), jsxs("div", Object.assign({ className: 'button__container' }, { children: [(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.isWalletConnect) && qrcodeUri && (jsxs(CopyButton, Object.assign({ textToCopy: qrcodeUri }, { children: [jsx(Icon, Object.assign({ size: 'small', color: 'text-tertiary' }, { children: jsx(SvgLink, {}) })), "Copy QR URI"] }))), desktopUri && (jsxs(TextButton, Object.assign({ className: 'button--open-app', onClick: () => window.open(desktopUri) }, { children: [jsx(Icon, Object.assign({ size: 'xsmall', color: 'text-tertiary' }, { children: jsx(SvgExternalLink, {}) })), "Open ", walletName, " App"] })))] }))] })));
+};
+
+export { QrCodeModalView };