@dynamic-labs/sdk-react-core 0.19.0-alpha.6 → 0.19.0-alpha.8

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

@@ -47,6 +47,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title' }, { children: "Confirm your email" })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailWalletConnector.email }))] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" }))] }))] })));
 

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

@@ -43,6 +43,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const EmailConnectorPendingSignModalContent = ({ emailWalletConnector }) => (jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content' }, { children: [jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: true }), jsxs("div", Object.assign({ className: 'email-connector-pending-sign-modal-content__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'email-connector-pending-sign-modal-content__title' }, { children: "Confirm your email" })), jsxs(Typography, Object.assign({ weight: 'regular', variant: 'body_normal', color: 'secondary' }, { children: ["We\u2019ve sent a verification email to", ' ', jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'medium', as: 'span' }, { children: emailWalletConnector.email }))] })), jsx(Typography, Object.assign({ weight: 'regular', variant: 'body_small', color: 'secondary' }, { children: "Note: it might take a few seconds to proceed after clicking the link in your email" }))] }))] })));
 

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

@@ -48,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -44,6 +44,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const EmailOTPConnectorPendingSignModalContent = ({ walletConnector }) => {
     const { setSelectedWalletWithAction, selectedWalletWithAction, setPrimaryWalletId, setMultiWalletWidgetState, computeConnectedStateForWallets, } = useInternalDynamicContext();

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

@@ -48,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const EmptyWallets = () => (jsxRuntime.jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsxRuntime.jsx(addWallet.ReactComponent, {}) })) })), jsxRuntime.jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
 

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

@@ -44,6 +44,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const EmptyWallets = () => (jsxs("div", Object.assign({ className: 'empty-wallet__container' }, { children: [jsx("div", Object.assign({ className: 'empty-wallet__icon-container' }, { children: jsx(Icon, Object.assign({ color: 'text-primary', size: 'medium' }, { children: jsx(SvgAddWallet, {}) })) })), jsx("div", Object.assign({ className: 'empty-wallet__text-container' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: 'primary' }, { children: "Link additional wallets to see them here." })) }))] })));
 

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

@@ -47,6 +47,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 
 const SingleWalletButtons = () => {

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

@@ -43,6 +43,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { copyToClipboard } from '../../helpers/helpers.js';
 
 const SingleWalletButtons = () => {

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

@@ -52,6 +52,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var DotsMenu = require('../DotsMenu/DotsMenu.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');

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

@@ -48,6 +48,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { DotsMenu } from '../DotsMenu/DotsMenu.js';
 import { copyToClipboard, getExportKeysOption } from '../../helpers/helpers.js';
 import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';

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

@@ -20,10 +20,10 @@ require('@dynamic-labs/multi-wallet');
 var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
 
-const WalletIconWithStatus = ({ iconSize = 24, walletName, connected, variant = 'primary', }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-icon-with-status__container' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName, style: {
+const WalletIconWithStatus = ({ iconSize = 24, walletKey, connected, variant = 'primary', }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-icon-with-status__container' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, style: {
                 height: pixelToRem.pixelToRem(iconSize),
                 width: pixelToRem.pixelToRem(iconSize),
-            } }, walletName), jsxRuntime.jsx("div", Object.assign({ "data-testid": 'status-dot-container', className: classNames.classNames('wallet-icon-with-status__dot-container', variant === 'secondary'
+            } }, walletKey), jsxRuntime.jsx("div", Object.assign({ "data-testid": 'status-dot-container', className: classNames.classNames('wallet-icon-with-status__dot-container', variant === 'secondary'
                 ? 'wallet-icon-with-status__dot-container--secondary'
                 : '') }, { children: jsxRuntime.jsx(StatusDot.StatusDot, { variant: connected ? 'green' : 'red' }) }))] })));
 

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

@@ -3,7 +3,7 @@ type Props = {
     connected?: boolean;
     iconSize?: number;
     variant?: 'primary' | 'secondary';
-    walletName: string;
+    walletKey: string;
 };
-export declare const WalletIconWithStatus: ({ iconSize, walletName, connected, variant, }: Props) => JSX.Element;
+export declare const WalletIconWithStatus: ({ iconSize, walletKey, connected, variant, }: Props) => JSX.Element;
 export {};

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

@@ -16,10 +16,10 @@ import '@dynamic-labs/multi-wallet';
 import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
 
-const WalletIconWithStatus = ({ iconSize = 24, walletName, connected, variant = 'primary', }) => (jsxs("div", Object.assign({ className: 'wallet-icon-with-status__container' }, { children: [jsx(WalletIcon, { walletName: walletName, style: {
+const WalletIconWithStatus = ({ iconSize = 24, walletKey, connected, variant = 'primary', }) => (jsxs("div", Object.assign({ className: 'wallet-icon-with-status__container' }, { children: [jsx(WalletIcon, { walletKey: walletKey, style: {
                 height: pixelToRem(iconSize),
                 width: pixelToRem(iconSize),
-            } }, walletName), jsx("div", Object.assign({ "data-testid": 'status-dot-container', className: classNames('wallet-icon-with-status__dot-container', variant === 'secondary'
+            } }, walletKey), jsx("div", Object.assign({ "data-testid": 'status-dot-container', className: classNames('wallet-icon-with-status__dot-container', variant === 'secondary'
                 ? 'wallet-icon-with-status__dot-container--secondary'
                 : '') }, { children: jsx(StatusDot, { variant: connected ? 'green' : 'red' }) }))] })));
 

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

@@ -47,6 +47,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const WidgetPortal = ({ children, onBackdropClick, disablePadding, showCloseButton, }) => {
     const { accountSwitchState, setMultiWalletWidgetState, setSelectedWalletWithAction, selectedWalletWithAction, } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -43,6 +43,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const WidgetPortal = ({ children, onBackdropClick, disablePadding, showCloseButton, }) => {
     const { accountSwitchState, setMultiWalletWidgetState, setSelectedWalletWithAction, selectedWalletWithAction, } = useInternalDynamicContext();

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.cjs

@@ -38,6 +38,7 @@ require('formik');
 require('yup');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../../views/CollectUserDataView/fieldsConfig.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 var useKYCFlag = require('../../../utils/hooks/useKYCFlag/useKYCFlag.cjs');

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -34,6 +34,7 @@ import 'formik';
 import 'yup';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.context.js';
 import '../../../views/CollectUserDataView/fieldsConfig.js';
 import '../../../context/MockContext/MockContext.js';
 import { useKYCFlag } from '../../../utils/hooks/useKYCFlag/useKYCFlag.js';

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

@@ -49,6 +49,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsxRuntime.jsx(WidgetPortal.WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 

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

@@ -45,6 +45,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const DefaultPromptModal = ({ children, className = '', dataTestId = '', icon, showCloseButton = false, title, }) => (jsx(WidgetPortal, Object.assign({ showCloseButton: showCloseButton }, { children: jsxs("div", Object.assign({ className: classNames('default-prompt-modal', className), "data-testid": dataTestId }, { children: [icon && jsx(IconWithSpinner, { Icon: icon, iconSize: 96, isSpinning: true }), jsxs("div", Object.assign({ className: 'default-prompt-modal__content' }, { children: [title && (jsx(Typography, Object.assign({ variant: 'title', color: 'primary', "data-testid": 'title' }, { children: title }))), children] }))] })) })));
 

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

@@ -49,6 +49,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const DetectedNewWalletModal = () => {
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();

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

@@ -45,6 +45,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 
 const DetectedNewWalletModal = () => {
     const { setMultiWalletWidgetState, primaryWallet } = useInternalDynamicContext();

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

@@ -47,6 +47,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var getBrowserIcon = require('../../../../shared/utils/functions/getBrowserIcon/getBrowserIcon.cjs');
 var WalletHelpLink = require('../../../../views/NoQrNotInstalledView/WalletHelpLink.cjs');
 var parseWalletLinks = require('../../../../utils/functions/parseWalletLinks/parseWalletLinks.cjs');
@@ -57,14 +58,14 @@ const NoQrNotInstalledModalView = () => {
     if (!selectedWalletConnector) {
         return null;
     }
-    const walletName = walletBook.getWalletBookWallet(walletBook$1, selectedWalletConnector.name).name;
-    const walletLinks = walletBook.getWalletLinks(walletBook$1, selectedWalletConnector.name);
+    const walletName = walletBook.getWalletBookWallet(walletBook$1, selectedWalletConnector.key).name;
+    const walletLinks = walletBook.getWalletLinks(walletBook$1, selectedWalletConnector.key);
     const { currentDesktopUrl, userBrowser } = parseWalletLinks.parseWalletLinks(walletLinks);
     const downloadLinks = userBrowser && currentDesktopUrl ? (jsxRuntime.jsx(WalletHelpLink.WalletHelpLink, { name: userBrowser, link: currentDesktopUrl, Icon: getBrowserIcon.getBrowserIcon(userBrowser) }, userBrowser)) : (Object.entries(walletLinks)
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsxRuntime.jsx(WalletHelpLink.WalletHelpLink, { name: name, link: link, Icon: getBrowserIcon.getBrowserIcon(name) }, name))));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector.key, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }), jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 exports.NoQrNotInstalledModalView = NoQrNotInstalledModalView;

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

@@ -43,6 +43,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { getBrowserIcon } from '../../../../shared/utils/functions/getBrowserIcon/getBrowserIcon.js';
 import { WalletHelpLink } from '../../../../views/NoQrNotInstalledView/WalletHelpLink.js';
 import { parseWalletLinks } from '../../../../utils/functions/parseWalletLinks/parseWalletLinks.js';
@@ -53,14 +54,14 @@ const NoQrNotInstalledModalView = () => {
     if (!selectedWalletConnector) {
         return null;
     }
-    const walletName = getWalletBookWallet(walletBook, selectedWalletConnector.name).name;
-    const walletLinks = getWalletLinks(walletBook, selectedWalletConnector.name);
+    const walletName = getWalletBookWallet(walletBook, selectedWalletConnector.key).name;
+    const walletLinks = getWalletLinks(walletBook, selectedWalletConnector.key);
     const { currentDesktopUrl, userBrowser } = parseWalletLinks(walletLinks);
     const downloadLinks = userBrowser && currentDesktopUrl ? (jsx(WalletHelpLink, { name: userBrowser, link: currentDesktopUrl, Icon: getBrowserIcon(userBrowser) }, userBrowser)) : (Object.entries(walletLinks)
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsx(WalletHelpLink, { name: name, link: link, Icon: getBrowserIcon(name) }, name))));
-    return (jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsx(WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }), jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxs("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view', "data-testid": 'no-qr-code-not-installed' }, { children: [jsx(WalletIcon, { walletKey: selectedWalletConnector.key, style: { height: pixelToRem(64), width: pixelToRem(64) } }), jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: ["We can\u2019t detect ", walletName, " extension"] })), Array.isArray(downloadLinks) && (jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary' }, { children: "Select from your preferred options below:" }))), jsx("div", Object.assign({ className: 'no-qr-code-not-installed-modal-view__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 export { NoQrNotInstalledModalView };

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

@@ -30,7 +30,7 @@ const PendingAccountSwitchModal = () => {
         });
         disconnectAndConnect();
     }, [selectedConnector]);
-    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsxRuntime.jsx(SwitchAccountView.SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsxRuntime.jsx(SwitchOrUseActiveAccountView.SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
+    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.key }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsxRuntime.jsx(SwitchAccountView.SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsxRuntime.jsx(SwitchOrUseActiveAccountView.SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
 };
 
 exports.PendingAccountSwitchModal = PendingAccountSwitchModal;

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

@@ -26,7 +26,7 @@ const PendingAccountSwitchModal = () => {
         });
         disconnectAndConnect();
     }, [selectedConnector]);
-    return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletName: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.name }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsx(SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsx(SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
+    return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletKey: selectedConnector === null || selectedConnector === void 0 ? void 0 : selectedConnector.key }), title: `Switch wallet in ${selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.connector.name}` }, { children: isSameWallet || !connectedWallet ? (jsx(SwitchAccountView, { selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) : (jsx(SwitchOrUseActiveAccountView, { connectedWallet: connectedWallet, selectedWalletToSwitchTo: selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet })) })));
 };
 
 export { PendingAccountSwitchModal };

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

@@ -47,6 +47,7 @@ require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const SwitchAccountView = ({ selectedWalletToSwitchTo }) => (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Switch to wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " to make it active."] })));
 

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

@@ -43,6 +43,7 @@ import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../../components/OverlayCard/OverlayCard.context.js';
 
 const SwitchAccountView = ({ selectedWalletToSwitchTo }) => (jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Switch to wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " to make it active."] })));
 

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

@@ -51,6 +51,7 @@ require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 var Divider = require('../../../../../components/Divider/Divider.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
     const { setSelectedWalletWithAction, setSelectedWalletConnector, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext.useInternalDynamicContext();
@@ -73,7 +74,7 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         computeConnectedStateForWallets,
         setSelectedWalletConnector,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxRuntime.jsxs(Button.Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'xsmall' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name }) })), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress.shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsxRuntime.jsx(Divider.Divider, { fullWidth: true, text: 'Or' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxRuntime.jsxs(Button.Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'xsmall' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) })), ' ', shortenWalletAddress.shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
 };
 
 exports.SwitchOrUseActiveAccountView = SwitchOrUseActiveAccountView;

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

@@ -47,6 +47,7 @@ import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import { Divider } from '../../../../../components/Divider/Divider.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../../components/OverlayCard/OverlayCard.context.js';
 
 const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchTo, }) => {
     const { setSelectedWalletWithAction, setSelectedWalletConnector, computeConnectedStateForWallets, setPrimaryWallet, } = useInternalDynamicContext();
@@ -69,7 +70,7 @@ const SwitchOrUseActiveAccountView = ({ connectedWallet, selectedWalletToSwitchT
         computeConnectedStateForWallets,
         setSelectedWalletConnector,
     ]);
-    return (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxs(Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsx(Icon, Object.assign({ size: 'xsmall' }, { children: jsx(WalletIcon, { walletName: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name }) })), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
+    return (jsxs(Fragment, { children: [jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["Wallet", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: shortenWalletAddress(selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.address, 3, 3) })), ' ', "is not active in ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, ". To make active, open your ", selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.name, " wallet and switch to this account."] })), jsx(Divider, { fullWidth: true, text: 'Or' }), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: "Use your active wallet" })), jsxs(Button, Object.assign({ buttonClassName: 'default-prompt-modal__button', buttonRounded: 'small', expanded: true, type: 'button', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, onClick: onUseActiveWalletClick, dataTestId: 'use-active-wallet-button' }, { children: ["Select", ' ', jsx(Icon, Object.assign({ size: 'xsmall' }, { children: jsx(WalletIcon, { walletKey: selectedWalletToSwitchTo === null || selectedWalletToSwitchTo === void 0 ? void 0 : selectedWalletToSwitchTo.connector.key }) })), ' ', shortenWalletAddress(connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.address, 3, 3)] }))] }));
 };
 
 export { SwitchOrUseActiveAccountView };

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

@@ -47,6 +47,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
 
 const PendingAccountSwitchToLinkModal = () => {
@@ -63,7 +64,7 @@ const PendingAccountSwitchToLinkModal = () => {
         });
         disconnectAndConnect();
     }, [selectedWalletConnector]);
-    return (jsxRuntime.jsx(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: `Switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["To link a new wallet, open", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "and switch to the account you want to link."] })) })));
+    return (jsxRuntime.jsx(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: `Switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["To link a new wallet, open", ' ', jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "and switch to the account you want to link."] })) })));
 };
 
 exports.PendingAccountSwitchToLinkModal = PendingAccountSwitchToLinkModal;

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

@@ -43,6 +43,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { DefaultPromptModal } from '../DefaultPromptModal/DefaultPromptModal.js';
 
 const PendingAccountSwitchToLinkModal = () => {
@@ -59,7 +60,7 @@ const PendingAccountSwitchToLinkModal = () => {
         });
         disconnectAndConnect();
     }, [selectedWalletConnector]);
-    return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletName: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name }), title: `Switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["To link a new wallet, open", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "and switch to the account you want to link."] })) })));
+    return (jsx(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), title: `Switch wallet in ${selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name}` }, { children: jsxs(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', "data-testid": 'content' }, { children: ["To link a new wallet, open", ' ', jsx(Typography, Object.assign({ as: 'span', weight: 'medium', color: 'primary' }, { children: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name })), ' ', "and switch to the account you want to link."] })) })));
 };
 
 export { PendingAccountSwitchToLinkModal };

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

@@ -48,6 +48,7 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var AuthProviderIcon = require('../../../../components/AuthProviderIcon/AuthProviderIcon.cjs');
 var helpers = require('../../helpers/helpers.cjs');
 

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

@@ -44,6 +44,7 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { AuthProviderIcon } from '../../../../components/AuthProviderIcon/AuthProviderIcon.js';
 import { capitalize } from '../../helpers/helpers.js';
 

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

@@ -49,6 +49,7 @@ require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../../components/OverlayCard/OverlayCard.context.cjs');
 var DefaultPromptModal = require('../../DefaultPromptModal/DefaultPromptModal.cjs');
 
 const DefaultPendingSignModalContent = () => {
@@ -69,7 +70,7 @@ const DefaultPendingSignModalContent = () => {
             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() &&
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), 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" })))] })));
 };
 

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

@@ -45,6 +45,7 @@ import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import '../../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../../components/OverlayCard/OverlayCard.context.js';
 import { DefaultPromptModal } from '../../DefaultPromptModal/DefaultPromptModal.js';
 
 const DefaultPendingSignModalContent = () => {
@@ -65,7 +66,7 @@ const DefaultPendingSignModalContent = () => {
             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() &&
+    return (jsxs(DefaultPromptModal, Object.assign({ showCloseButton: true, dataTestId: 'pending-account-switch', icon: jsx(WalletIcon, { walletKey: selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.key }), 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" })))] })));
 };
 

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

@@ -49,12 +49,13 @@ require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 var Divider = require('../../../../components/Divider/Divider.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var DefaultPromptModal = require('../DefaultPromptModal/DefaultPromptModal.cjs');
 
 const PrimaryNotConnectedModal = () => {
     var _a;
     const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
-    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' })] })));
+    return (jsxRuntime.jsxs(DefaultPromptModal.DefaultPromptModal, Object.assign({ dataTestId: 'wallet-not-connected', 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: `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

@@ -45,12 +45,13 @@ import '../../../../components/Popper/PopperContext/PopperContext.js';
 import { Divider } from '../../../../components/Divider/Divider.js';
 import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { DefaultPromptModal } from '../DefaultPromptModal/DefaultPromptModal.js';
 
 const PrimaryNotConnectedModal = () => {
     var _a;
     const { primaryWallet } = useInternalDynamicContext();
-    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' })] })));
+    return (jsxs(DefaultPromptModal, Object.assign({ dataTestId: 'wallet-not-connected', icon: jsx(WalletIcon, { walletKey: (_a = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key }), 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

@@ -54,27 +54,29 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 
 const QrCodeModalView = ({ walletId }) => {
-    var _a;
+    var _a, _b;
     const { secondaryWallets, qrcodeUri, desktopUri } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     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 walletKey = ((_a = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _a === void 0 ? void 0 : _a.key) || '';
+    const walletName = ((_b = newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector) === null || _b === void 0 ? void 0 : _b.name) || '';
     const { theme } = ThemeContext.useThemeContext();
     const qrCodeColorsByTheme = {
         dark: {
             accentColor: 'var(--dynamic-text-primary)',
         },
         light: {
-            accentColor: walletBook.getWalletPrimaryColor(walletBook$1, walletName) ||
+            accentColor: walletBook.getWalletPrimaryColor(walletBook$1, walletKey) ||
                 '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', 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) })) : (
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, 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: '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, walletKey: walletConnectorCore.normalizeWalletName(walletKey) })) : (
                     // 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