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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@dynamic-labs/utils');
+var walletBook = require('@dynamic-labs/wallet-book');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('react');
+var Typography = require('../../../../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../../shared/logger.cjs');
+require('../../../../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('../../../../../context/ViewContext/ViewContext.cjs');
+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');
+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/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../../components/IconButton/IconButton.cjs');
+var Button = require('../../../../../components/Button/Button.cjs');
+require('../../../../../components/Alert/Alert.cjs');
+require('../../../../../context/MockContext/MockContext.cjs');
+require('../../../../../context/CaptchaContext/CaptchaContext.cjs');
+var useConnectAndSignSplitSteps = require('../../../../../utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.cjs');
+require('../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+var DefaultPromptModal = require('../../DefaultPromptModal/DefaultPromptModal.cjs');
+
+const DefaultPendingSignModalContent = () => {
+    const { selectedWalletConnector, setMultiWalletWidgetState } = useInternalDynamicContext.useInternalDynamicContext();
+    const { signAlreadyConnectedUser } = useConnectAndSignSplitSteps.useConnectAndSignSplitSteps();
+    const onClickToSign = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (selectedWalletConnector) {
+                yield signAlreadyConnectedUser({
+                    walletConnector: selectedWalletConnector,
+                });
+            }
+        }
+        catch (e) {
+            walletConnectorCore.logger.error(e);
+        }
+        finally {
+            setMultiWalletWidgetState('idle');
+        }
+    });
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), title: `Sign in with ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), utils.isMobile() &&
+                !(selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaCustodialService) && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onClickToSign, dataTestId: 'click-to-sign-button' }, { children: "Click to Sign" })))] })));
+};
+
+exports.DefaultPendingSignModalContent = DefaultPendingSignModalContent;

package/src/lib/widgets/DynamicWidget/prompts/PendingSignModal/DefaultPendingSignModalContent/DefaultPendingSignModalContent.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultPendingSignModalContent: () => JSX.Element;

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

@@ -0,0 +1,64 @@
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isMobile } from '@dynamic-labs/utils';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { logger } from '@dynamic-labs/wallet-connector-core';
+import 'react';
+import { Typography } from '../../../../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../../shared/logger.js';
+import '../../../../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '../../../../../context/ViewContext/ViewContext.js';
+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 '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/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../../components/IconButton/IconButton.js';
+import { Button } from '../../../../../components/Button/Button.js';
+import '../../../../../components/Alert/Alert.js';
+import '../../../../../context/MockContext/MockContext.js';
+import '../../../../../context/CaptchaContext/CaptchaContext.js';
+import { useConnectAndSignSplitSteps } from '../../../../../utils/hooks/authenticationHooks/useConnectAndSignSplitSteps/useConnectAndSignSplitSteps.js';
+import '../../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../../components/Popper/Popper/Popper.js';
+import '../../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { DefaultPromptModal } from '../../DefaultPromptModal/DefaultPromptModal.js';
+
+const DefaultPendingSignModalContent = () => {
+    const { selectedWalletConnector, setMultiWalletWidgetState } = useInternalDynamicContext();
+    const { signAlreadyConnectedUser } = useConnectAndSignSplitSteps();
+    const onClickToSign = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (selectedWalletConnector) {
+                yield signAlreadyConnectedUser({
+                    walletConnector: selectedWalletConnector,
+                });
+            }
+        }
+        catch (e) {
+            logger.error(e);
+        }
+        finally {
+            setMultiWalletWidgetState('idle');
+        }
+    });
+    return (jsxs(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), title: `Sign in with ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: "Sign the message in your wallet to approve linking this wallet to your account" })), isMobile() &&
+                !(selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.canConnectViaCustodialService) && (jsx(Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onClickToSign, dataTestId: 'click-to-sign-button' }, { children: "Click to Sign" })))] })));
+};
+
+export { DefaultPendingSignModalContent };

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

@@ -2,58 +2,29 @@
 
 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 walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 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('@dynamic-labs/utils');
-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');
+var DefaultPendingSignModalContent = require('./DefaultPendingSignModalContent/DefaultPendingSignModalContent.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)) {
+        if (walletConnectorCore.isEmailOTPWalletConnector(selectedWalletConnector)) {
             return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: handleOnClickBackdrop, disablePadding: true }, { children: jsxRuntime.jsx(EmailOTPConnectorPendingSignModalContent.EmailOTPConnectorPendingSignModalContent, { walletConnector: selectedWalletConnector }) })));
         }
-        if (multiWallet.isEmailWalletConnector(selectedWalletConnector)) {
+        if (walletConnectorCore.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 }) })));
+    return jsxRuntime.jsx(DefaultPendingSignModalContent.DefaultPendingSignModalContent, {});
 };
 
 exports.PendingSignModal = PendingSignModal;

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

@@ -1,42 +1,13 @@
-import { __awaiter } from '../../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { isEmailOTPWalletConnector, isEmailWalletConnector } from '@dynamic-labs/multi-wallet';
+import { isEmailOTPWalletConnector, isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
 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 '@dynamic-labs/utils';
-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';
+import { DefaultPendingSignModalContent } from './DefaultPendingSignModalContent/DefaultPendingSignModalContent.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);
@@ -49,7 +20,7 @@ const PendingSignModal = () => {
             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 }) })));
+    return jsx(DefaultPendingSignModalContent, {});
 };
 
 export { PendingSignModal };

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

@@ -3,19 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var walletBook = require('@dynamic-labs/wallet-book');
+require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+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/utils');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -26,22 +29,24 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('@dynamic-labs/wallet-connector-core');
 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');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+var Divider = require('../../../../components/Divider/Divider.cjs');
+var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.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' })] }));
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptModal, Object.assign({ dataTestId: 'wallet-not-connected', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name }), title: `Switch wallet in ${primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name}` }, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Your active wallet in", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name })), ' ', "is not linked. Please switch to wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) })), ' ', "to log in."] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: "You can link this wallet to this account after you log in." })), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(LogoutButton.LogoutButton, { isTextButton: false, buttonClassName: 'primary-not-connected__log-out-button' })] })));
 };
 
 exports.PrimaryNotConnectedModal = PrimaryNotConnectedModal;

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

@@ -1,17 +1,20 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { WalletIcon } from '@dynamic-labs/wallet-book';
+import 'react';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/multi-wallet';
+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/utils';
+import '@dynamic-labs/multi-wallet';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -22,22 +25,24 @@ import '../../../../components/Transition/OpacityTransition/OpacityTransition.js
 import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
-import '@dynamic-labs/wallet-connector-core';
 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';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { Divider } from '../../../../components/Divider/Divider.js';
+import { DefaultPromptModal } from '../DefaultPromptModal/DefaultPromptModal.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' })] }));
+    return (jsxs(DefaultPromptModal, Object.assign({ dataTestId: 'wallet-not-connected', icon: jsx(WalletIcon, { walletName: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.name }), title: `Switch wallet in ${primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name}` }, { children: [jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Your active wallet in", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name })), ' ', "is not linked. Please switch to wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, 3, 3) })), ' ', "to log in."] })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: "You can link this wallet to this account after you log in." })), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(LogoutButton, { isTextButton: false, buttonClassName: 'primary-not-connected__log-out-button' })] })));
 };
 
 export { PrimaryNotConnectedModal };

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

@@ -3,22 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var multiWallet = require('@dynamic-labs/multi-wallet');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 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('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var link = require('../../../../shared/assets/link.cjs');
 var externalLink = require('../../../../shared/assets/externalLink.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/utils');
+require('@dynamic-labs/multi-wallet');
 var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 var ThemeContext = require('../../../../context/ThemeContext/ThemeContext.cjs');
@@ -31,14 +34,18 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('@dynamic-labs/wallet-connector-core');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var CopyButton = require('../../../../components/CopyButton/CopyButton.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
 var TextButton = require('../../../../components/TextButton/TextButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
 const QrCodeModalView = ({ walletId }) => {
     var _a;
@@ -57,7 +64,7 @@ const QrCodeModalView = ({ walletId }) => {
     // 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', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'bold', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), 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) })) : (
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), 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: walletConnectorCore.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

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

@@ -1,20 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { normalizeWalletName } from '@dynamic-labs/multi-wallet';
+import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
 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 '../../../../config/LSSuffix.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 { 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/utils';
+import '@dynamic-labs/multi-wallet';
 import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../../../components/ShadowDOM/ShadowDOM.js';
 import { useThemeContext } from '../../../../context/ThemeContext/ThemeContext.js';
@@ -27,14 +30,18 @@ import '../../../../components/Transition/OpacityTransition/OpacityTransition.js
 import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../context/ErrorContext/ErrorContext.js';
-import 'ethers';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
 import '../../../../context/MockContext/MockContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
-import '@dynamic-labs/wallet-connector-core';
 import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
-import '../../../../components/IconButton/IconButton.js';
 import { TextButton } from '../../../../components/TextButton/TextButton.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 
 const QrCodeModalView = ({ walletId }) => {
     var _a;
@@ -53,7 +60,7 @@ const QrCodeModalView = ({ walletId }) => {
     // 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', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'bold', color: 'primary' }, { children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), 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) })) : (
+    return (jsxs("div", Object.assign({ className: 'qr-code-modal-view' }, { children: [jsxs(Typography, Object.assign({ variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title' }, { children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] })), jsxs(Typography, Object.assign({ variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title' }, { children: ["Connect wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) })), ' ', "to switch active account."] })), 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

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

@@ -6,18 +6,20 @@ var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
 var LoadingContext = require('../../../../context/LoadingContext/LoadingContext.cjs');
-var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 require('react');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 var logger = require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/multi-wallet');
+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('@dynamic-labs/utils');
+require('@dynamic-labs/multi-wallet');
 require('../../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -28,24 +30,28 @@ require('../../../../components/Transition/OpacityTransition/OpacityTransition.c
 require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
-require('ethers');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('@dynamic-labs/wallet-book');
+var Button = require('../../../../components/Button/Button.cjs');
+require('../../../../components/Alert/Alert.cjs');
 require('../../../../context/MockContext/MockContext.cjs');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
-require('@dynamic-labs/wallet-connector-core');
 require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var Button = require('../../../../components/Button/Button.cjs');
-require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 
 const UnlinkWalletPopUp = ({ walletId }) => {
-    const { setWalletIdToUnlink } = DynamicWidgetContext.useWidgetContext();
-    const { handleUnlinkWallet, eventsCallbacks, user } = useInternalDynamicContext.useInternalDynamicContext();
+    const { handleUnlinkWallet, eventsCallbacks, setSelectedWalletWithAction, user, } = useInternalDynamicContext.useInternalDynamicContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const onConfirmClick = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
         try {
             setLoading(true);
             yield handleUnlinkWallet(walletId);
-            setWalletIdToUnlink(undefined);
+            setSelectedWalletWithAction(null);
             const walletFromId = user === null || user === void 0 ? void 0 : user.verifiedCredentials.find((wallet) => wallet.id === walletId);
             if (walletFromId) {
                 (_a = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUnlinkSuccess) === null || _a === void 0 ? void 0 : _a.call(eventsCallbacks, walletFromId);
@@ -59,7 +65,7 @@ const UnlinkWalletPopUp = ({ walletId }) => {
         }
     });
     const onCancelClick = () => {
-        setWalletIdToUnlink(undefined);
+        setSelectedWalletWithAction(null);
     };
     return (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ onBackdropClick: onCancelClick }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'unlink-wallet-popup__container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', className: 'unlink-wallet-popup__title', variant: 'body_normal', as: 'h6' }, { children: "Unlink your wallet?" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'unlink-wallet-popup__label', variant: 'body_small', color: 'secondary' }, { children: "Are you sure you want to unlink your wallet?" })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonPadding: 'small', onClick: onConfirmClick, disabled: loading, buttonClassName: 'unlink-wallet-popup__button unlink-wallet-popup__button--shadow', color: 'primary', expanded: true, buttonRounded: 'small', typographyProps: {
                         variant: 'button_secondary',