@dynamic-labs/sdk-react-core 3.0.0-alpha.10 → 3.0.0-alpha.12

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
+var walletBook = require('@dynamic-labs/wallet-book');
 require('../../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('react');
@@ -17,8 +18,6 @@ require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
-var promptAccountSwitch = require('../../../../shared/assets/prompt-account-switch.cjs');
-require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../utils/constants/values.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
@@ -62,6 +61,8 @@ require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var PromptModal = require('../../components/PromptModal/PromptModal.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
 var useCloseMultiWalletPrompt = require('../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.cjs');
+var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
+var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
@@ -74,6 +75,7 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/IsBrowser/IsBrowser.cjs');
+var LogoutButton = require('../../../../components/LogoutButton/LogoutButton.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('react-focus-lock');
@@ -84,16 +86,17 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 
 const DetectedNewWalletContent = () => {
+    var _a;
     const { t } = reactI18next.useTranslation();
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const handleClick = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
-    return (jsxRuntime.jsxs("div", { className: 'detected-new-wallet-modal__content', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: t('dyn_detected_new_wallet.title') }), jsxRuntime.jsx(promptAccountSwitch.ReactComponent, {}), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_detected_new_wallet.description', {
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key }), title: t('dyn_detected_new_wallet.title'), children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
                     walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name,
-                }) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                }) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonClassName: 'detected-new-wallet-modal__confirm-button', expanded: true, onClick: handleClick, typographyProps: {
                     variant: 'button_secondary',
-                }, children: t('dyn_detected_new_wallet.confirm_button') })] }));
+                }, children: t('dyn_detected_new_wallet.confirm_button') }), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(LogoutButton.LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsxRuntime.jsx(PromptModal.PromptModal, { onClose: useCloseMultiWalletPrompt.useCloseMultiWalletPrompt(), children: jsxRuntime.jsx(DetectedNewWalletContent, {}) }));

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

@@ -1,6 +1,7 @@
 'use client'
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../../components/Alert/Alert.js';
 import 'react';
@@ -13,8 +14,6 @@ import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgPromptAccountSwitch } from '../../../../shared/assets/prompt-account-switch.js';
-import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../utils/constants/values.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
@@ -58,6 +57,8 @@ import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { PromptModal } from '../../components/PromptModal/PromptModal.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
 import { useCloseMultiWalletPrompt } from '../../hooks/useCloseMultiWalletPrompt/useCloseMultiWalletPrompt.js';
+import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
+import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
@@ -70,6 +71,7 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/IsBrowser/IsBrowser.js';
+import { LogoutButton } from '../../../../components/LogoutButton/LogoutButton.js';
 import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
@@ -80,16 +82,17 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
 
 const DetectedNewWalletContent = () => {
+    var _a;
     const { t } = useTranslation();
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext();
     const handleClick = () => {
         setMultiWalletWidgetState('awaiting_signature', undefined, 'linking_new_wallet');
     };
-    return (jsxs("div", { className: 'detected-new-wallet-modal__content', children: [jsx(Typography, { variant: 'body_normal', color: 'primary', children: t('dyn_detected_new_wallet.title') }), jsx(SvgPromptAccountSwitch, {}), jsx(Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_detected_new_wallet.description', {
+    return (jsxs(DefaultPromptLayout, { dataTestId: 'detected-new-wallet-modal', icon: jsx(WalletIcon, { walletKey: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key }), title: t('dyn_detected_new_wallet.title'), children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content', children: t('dyn_detected_new_wallet.description', {
                     walletName: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.name,
-                }) }), jsx(TypographyButton, { expanded: true, onClick: handleClick, typographyProps: {
+                }) }), jsx(TypographyButton, { buttonClassName: 'detected-new-wallet-modal__confirm-button', expanded: true, onClick: handleClick, typographyProps: {
                     variant: 'button_secondary',
-                }, children: t('dyn_detected_new_wallet.confirm_button') })] }));
+                }, children: t('dyn_detected_new_wallet.confirm_button') }), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(LogoutButton, { isTextButton: false, buttonClassName: 'detected-new-wallet-modal__log-out-button' })] }));
 };
 const DetectedNewWalletWidgetPortal = () => (jsx(WidgetPortal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));
 const DetectedNewWalletModal = () => (jsx(PromptModal, { onClose: useCloseMultiWalletPrompt(), children: jsx(DetectedNewWalletContent, {}) }));

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

@@ -74,8 +74,8 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 var PromptModal = require('../../components/PromptModal/PromptModal.cjs');
 var WidgetPortal = require('../../components/WidgetPortal/WidgetPortal.cjs');
-var useConnectedAccountWallet = require('../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
+var useConnectedAccountWallet = require('../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.cjs');
 var SwitchAccountView = require('./SwitchAccountView/SwitchAccountView.cjs');
 var SwitchOrUseActiveAccountView = require('./SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.cjs');
 require('../../context/DynamicWidgetContext.cjs');

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

@@ -70,8 +70,8 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import { PromptModal } from '../../components/PromptModal/PromptModal.js';
 import { WidgetPortal } from '../../components/WidgetPortal/WidgetPortal.js';
-import { useConnectedAccountWallet } from '../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js';
 import { DefaultPromptLayout } from '../DefaultPromptModal/DefaultPromptModal.js';
+import { useConnectedAccountWallet } from '../../../../utils/hooks/useConnectedAccountWallet/useConnectedAccountWallet.js';
 import { SwitchAccountView } from './SwitchAccountView/SwitchAccountView.js';
 import { SwitchOrUseActiveAccountView } from './SwitchOrUseActiveAccountView/SwitchOrUseActiveAccountView.js';
 import '../../context/DynamicWidgetContext.js';

package/src/lib/shared/assets/prompt-account-switch.cjs

@@ -1,64 +0,0 @@
-'use client'
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var _path, _path2, _path3, _path4;
-var _excluded = ["title", "titleId"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgPromptAccountSwitch = function SvgPromptAccountSwitch(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: 40,
-    height: 40,
-    viewBox: "0 0 42 42",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
-    id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M31.583 11.75a7.617 7.617 0 0 0-1.25-.083H13.667c-.467 0-.917.033-1.35.1.233-.467.566-.9.966-1.3L18.7 5.033a5.875 5.875 0 0 1 8.267 0l2.916 2.95a5.623 5.623 0 0 1 1.7 3.767Z",
-    fill: "#2660FF"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
-    opacity: 0.4,
-    d: "M38.667 20v8.333c0 5-3.334 8.334-8.334 8.334H14.717a5.988 5.988 0 0 0 1.316-1.567c.617-1 .967-2.184.967-3.434A6.665 6.665 0 0 0 10.333 25c-2 0-3.783.883-5 2.267V20c0-4.534 2.734-7.7 6.984-8.233.433-.067.883-.1 1.35-.1h16.666c.434 0 .85.016 1.25.083 4.3.5 7.084 3.683 7.084 8.25Z",
-    fill: "#2660FF"
-  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M38.667 20.833h-5a3.343 3.343 0 0 0-3.334 3.334c0 1.833 1.5 3.333 3.334 3.333h5",
-    fill: "#2660FF"
-  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10.333 25a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333ZM2 31.667a8.333 8.333 0 1 1 16.667 0 8.333 8.333 0 0 1-16.667 0Zm8.577-3.09a.833.833 0 0 1 1.179 0l2.5 2.5a.833.833 0 0 1 0 1.18l-2.5 2.5a.833.833 0 0 1-1.179-1.18l1.078-1.077H7a.833.833 0 0 1 0-1.666h4.655l-1.078-1.078a.833.833 0 0 1 0-1.178Z",
-    fill: "#2660FF"
-  })));
-};
-
-exports.ReactComponent = SvgPromptAccountSwitch;

package/src/lib/shared/assets/prompt-account-switch.js

@@ -1,40 +0,0 @@
-'use client'
-import * as React from 'react';
-
-var _path, _path2, _path3, _path4;
-var _excluded = ["title", "titleId"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgPromptAccountSwitch = function SvgPromptAccountSwitch(_ref) {
-  var title = _ref.title,
-    titleId = _ref.titleId,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 40,
-    height: 40,
-    viewBox: "0 0 42 42",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": titleId
-  }, props), title ? /*#__PURE__*/React.createElement("title", {
-    id: titleId
-  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
-    d: "M31.583 11.75a7.617 7.617 0 0 0-1.25-.083H13.667c-.467 0-.917.033-1.35.1.233-.467.566-.9.966-1.3L18.7 5.033a5.875 5.875 0 0 1 8.267 0l2.916 2.95a5.623 5.623 0 0 1 1.7 3.767Z",
-    fill: "#2660FF"
-  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
-    opacity: 0.4,
-    d: "M38.667 20v8.333c0 5-3.334 8.334-8.334 8.334H14.717a5.988 5.988 0 0 0 1.316-1.567c.617-1 .967-2.184.967-3.434A6.665 6.665 0 0 0 10.333 25c-2 0-3.783.883-5 2.267V20c0-4.534 2.734-7.7 6.984-8.233.433-.067.883-.1 1.35-.1h16.666c.434 0 .85.016 1.25.083 4.3.5 7.084 3.683 7.084 8.25Z",
-    fill: "#2660FF"
-  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
-    d: "M38.667 20.833h-5a3.343 3.343 0 0 0-3.334 3.334c0 1.833 1.5 3.333 3.334 3.333h5",
-    fill: "#2660FF"
-  })), _path4 || (_path4 = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10.333 25a6.667 6.667 0 1 0 0 13.333 6.667 6.667 0 0 0 0-13.333ZM2 31.667a8.333 8.333 0 1 1 16.667 0 8.333 8.333 0 0 1-16.667 0Zm8.577-3.09a.833.833 0 0 1 1.179 0l2.5 2.5a.833.833 0 0 1 0 1.18l-2.5 2.5a.833.833 0 0 1-1.179-1.18l1.078-1.077H7a.833.833 0 0 1 0-1.666h4.655l-1.078-1.078a.833.833 0 0 1 0-1.178Z",
-    fill: "#2660FF"
-  })));
-};
-
-export { SvgPromptAccountSwitch as ReactComponent };