@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.9

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.cjs

@@ -20,6 +20,7 @@ require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -27,7 +28,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -102,7 +102,7 @@ const NetworkNotSupported = () => {
     });
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = isSupportedNetwork.isSupportedNetwork({ network, walletConnector });
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported', "data-testid": 'network-not-supported' }, { children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletName: walletConnector.name }) })), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported', "data-testid": 'network-not-supported' }, { children: [onboardingImageUrl && (jsxRuntime.jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) })), jsxRuntime.jsx(UserAddress.UserAddress, { walletConnector: walletConnector }), jsxRuntime.jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: evmNetworks.length > 1 && (jsxRuntime.jsx(NetworkPicker.NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), evmNetworks.length === 1 && (jsxRuntime.jsx(SelectNetworkButton.SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] }))] })));
 };
 
 exports.NetworkNotSupported = NetworkNotSupported;

package/src/lib/views/NetworkNotSupported/NetworkNotSupported.js

@@ -16,6 +16,7 @@ import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.js';
+import '../../config/ApiEndpoint.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -23,7 +24,6 @@ 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 '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
@@ -98,7 +98,7 @@ const NetworkNotSupported = () => {
     });
     const evmNetworks = walletConnector.evmNetworks || [];
     const _isSupportedNetwork = isSupportedNetwork({ network, walletConnector });
-    return (jsxs("div", Object.assign({ className: 'network-not-supported', "data-testid": 'network-not-supported' }, { children: [onboardingImageUrl && (jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletName: walletConnector.name }) })), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: evmNetworks.length > 1 && (jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) })), jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'network-not-supported', "data-testid": 'network-not-supported' }, { children: [onboardingImageUrl && (jsx("img", { className: 'network-not-supported__main-img', src: onboardingImageUrl, alt: 'onboarding' })), !_isSupportedNetwork && (jsx(ErrorContainer, Object.assign({ variant: 'info', withIcon: false, className: 'network-not-supported__error--not-supported' }, { children: "This network is not available, please update." }))), jsxs("div", Object.assign({ className: 'network-not-supported__content-container' }, { children: [jsx("div", Object.assign({ className: 'network-not-supported__img-container' }, { children: jsx(WalletIcon, { style: { height: 64, width: 64 }, walletKey: walletConnector.key }) })), jsx(UserAddress, { walletConnector: walletConnector }), jsx("div", Object.assign({ className: 'network-not-supported__network-container' }, { children: evmNetworks.length > 1 && (jsx(NetworkPicker, { evmNetworks: evmNetworks, connector: walletConnector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, showNetworkName: true, buttonClassName: 'network-not-supported__network-picker-button', mainClassName: 'network-not-supported__network-picker' })) })), jsxs("div", Object.assign({ className: 'network-not-supported__welcome-container' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'network-not-supported__welcome-title' }, { children: "Update Network" })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Your wallet is not connected to a supported network. Please update before continuing." }))] })), evmNetworks.length === 1 && (jsx(SelectNetworkButton, { onClick: onSelectNetworkButtonClick, networkId: evmNetworks[0].networkId, networkName: evmNetworks[0].vanityName || evmNetworks[0].name, networkIconUrl: evmNetworks[0].iconUrls[0] }))] }))] })));
 };
 
 export { NetworkNotSupported };

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.cjs

@@ -21,6 +21,7 @@ require('@dynamic-labs/multi-wallet');
 var isSupportedNetwork = require('../../utils/functions/isSupportedNetwork/isSupportedNetwork.cjs');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
 var getWalletConnectorNetworks = require('../../utils/functions/getWalletConnectorNetworks/getWalletConnectorNetworks.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -28,7 +29,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -90,7 +90,7 @@ const NetworkNotSupportedSwitchManual = () => {
     // Prevents 'network' from being 'undefined'.
     useApplyWalletConnectorNetwork.useApplyWalletConnectorNetwork({ walletConnector });
     const iconSize = 80;
-    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, style: {
             height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
             width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
         } }));

package/src/lib/views/NetworkNotSupportedSwitchManual/NetworkNotSupportedSwitchManual.js

@@ -17,6 +17,7 @@ import '@dynamic-labs/multi-wallet';
 import { isSupportedNetwork } from '../../utils/functions/isSupportedNetwork/isSupportedNetwork.js';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
 import { getWalletConnectorNetworks } from '../../utils/functions/getWalletConnectorNetworks/getWalletConnectorNetworks.js';
+import '../../config/ApiEndpoint.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -24,7 +25,6 @@ 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 '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
@@ -86,7 +86,7 @@ const NetworkNotSupportedSwitchManual = () => {
     // Prevents 'network' from being 'undefined'.
     useApplyWalletConnectorNetwork({ walletConnector });
     const iconSize = 80;
-    const icon = (jsx(WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+    const icon = (jsx(WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, style: {
             height: pixelToRem(iconSize * iconRatio),
             width: pixelToRem(iconSize * iconRatio),
         } }));

package/src/lib/views/NoAccess/NoAccess.cjs

@@ -21,6 +21,7 @@ require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -28,7 +29,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/views/NoAccess/NoAccess.js

@@ -17,6 +17,7 @@ import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
+import '../../config/ApiEndpoint.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -24,7 +25,6 @@ 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 '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.cjs

@@ -19,6 +19,7 @@ require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -26,7 +27,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -57,13 +57,13 @@ const NoQrNotInstalledView = () => {
     if (!selectedWalletConnector) {
         return null;
     }
-    const downloadLinks = Object.entries(walletBook.getWalletLinks(walletBook$1, selectedWalletConnector.name))
+    const downloadLinks = Object.entries(walletBook.getWalletLinks(walletBook$1, selectedWalletConnector.key))
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsxRuntime.jsx(WalletHelpLink.WalletHelpLink, { name: name, link: link, 
         // justification: we're looping over the keys of walletLinks.desktop
         Icon: getBrowserIcon.getBrowserIcon(name) }, name)));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }) })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install", ' ', walletBook.getWalletBookWallet(walletBook$1, selectedWalletConnector.name).name, ' ', "extension to connect"] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: selectedWalletConnector.key, style: { height: pixelToRem.pixelToRem(64), width: pixelToRem.pixelToRem(64) } }) })), jsxRuntime.jsxs(Typography.Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install", ' ', walletBook.getWalletBookWallet(walletBook$1, selectedWalletConnector.key).name, ' ', "extension to connect"] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsxRuntime.jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 exports.NoQrNotInstalledView = NoQrNotInstalledView;

package/src/lib/views/NoQrNotInstalledView/NoQrNotInstalledView.js

@@ -15,6 +15,7 @@ import '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
+import '../../config/ApiEndpoint.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -22,7 +23,6 @@ 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 '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
@@ -53,13 +53,13 @@ const NoQrNotInstalledView = () => {
     if (!selectedWalletConnector) {
         return null;
     }
-    const downloadLinks = Object.entries(getWalletLinks(walletBook, selectedWalletConnector.name))
+    const downloadLinks = Object.entries(getWalletLinks(walletBook, selectedWalletConnector.key))
         .filter(([, link]) => link !== '')
         .filter(([name]) => name !== 'ios' && name !== 'android')
         .map(([name, link]) => (jsx(WalletHelpLink, { name: name, link: link, 
         // justification: we're looping over the keys of walletLinks.desktop
         Icon: getBrowserIcon(name) }, name)));
-    return (jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsx(WalletIcon, { walletName: selectedWalletConnector.name, style: { height: pixelToRem(64), width: pixelToRem(64) } }) })), jsxs(Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install", ' ', getWalletBookWallet(walletBook, selectedWalletConnector.name).name, ' ', "extension to connect"] })), jsx(Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
+    return (jsxs("div", Object.assign({ className: 'no-qr-code-installed__container', "data-testid": 'no-qr-code-installed' }, { children: [jsx("div", Object.assign({ className: 'no-qr-code-installed__img' }, { children: jsx(WalletIcon, { walletKey: selectedWalletConnector.key, style: { height: pixelToRem(64), width: pixelToRem(64) } }) })), jsxs(Typography, Object.assign({ className: 'no-qr-code-installed__typography--title', variant: 'title' }, { children: ["Install", ' ', getWalletBookWallet(walletBook, selectedWalletConnector.key).name, ' ', "extension to connect"] })), jsx(Typography, Object.assign({ variant: 'body_normal', className: 'no-qr-code-installed__typography', color: 'secondary' }, { children: "Select from your preferred options below:" })), jsx("div", Object.assign({ className: 'no-qr-code-installed__links-section' }, { children: downloadLinks })), jsx(Typography, Object.assign({ variant: 'body_mini', className: 'no-qr-code-installed__typography', weight: 'medium', color: 'secondary' }, { children: "Refresh the page once installed" }))] })));
 };
 
 export { NoQrNotInstalledView };

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.cjs

@@ -18,6 +18,7 @@ require('ethers');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -25,7 +26,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/views/NoQrNotInstalledView/WalletHelpLink.js

@@ -14,6 +14,7 @@ import 'ethers';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../config/ApiEndpoint.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import 'react-dom';
@@ -21,7 +22,6 @@ 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 '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+var utils = require('@dynamic-labs/utils');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
+var footerInfoIcon = require('../../shared/assets/footer-info-icon.cjs');
+var passkeyIntroIcon = require('../../shared/assets/passkey-intro-icon.cjs');
+var androidFaceId = require('../../shared/assets/android-face-id.cjs');
+var iphoneFaceId = require('../../shared/assets/iphone-face-id.cjs');
+var iphoneTouchId = require('../../shared/assets/iphone-touch-id.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../config/ApiEndpoint.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../components/Icon/Icon.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
+var IconButton = require('../../components/IconButton/IconButton.cjs');
+var Button = require('../../components/Button/Button.cjs');
+require('../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../CollectUserDataView/fieldsConfig.cjs');
+require('../../context/MockContext/MockContext.cjs');
+var Tooltip = require('../../components/Tooltip/Tooltip.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+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 index = require('../../context/FooterAnimationContext/index.cjs');
+
+const PasskeyIntroView = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setIsFooterExpanded } = index.useFooterAnimationContext();
+    const { t } = reactI18next.useTranslation();
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false) }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const infoIconButton = (jsxRuntime.jsx(Tooltip.Tooltip, Object.assign({ content: t('dyn_passkey_intro.helper.tooltip'), className: 'header__tooltip' }, { children: jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', "data-testid": 'info-button', onClick: () => setIsFooterExpanded((prev) => !prev), className: 'header__icon' }, { children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) })) }), 'info-button'));
+    const renderIcon = () => {
+        let IdIcon;
+        if (utils.isIPhone()) {
+            if (utils.isIPhone8OrEarlier()) {
+                IdIcon = jsxRuntime.jsx(iphoneTouchId.ReactComponent, { "data-testid": 'iphone-8-icon' });
+            }
+            else {
+                IdIcon = jsxRuntime.jsx(iphoneFaceId.ReactComponent, { "data-testid": 'iphone-icon' });
+            }
+        }
+        if (utils.isAndroid()) {
+            IdIcon = jsxRuntime.jsx(androidFaceId.ReactComponent, { "data-testid": 'android-icon' });
+        }
+        if (!IdIcon) {
+            return;
+        }
+        return jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: IdIcon }));
+    };
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'passkey-intro-modal-wrapper' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: infoIconButton, trailing: closeButton }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'passkey-intro-view__header' }, { children: jsxRuntime.jsx(passkeyIntroIcon.ReactComponent, {}) })) })), jsxRuntime.jsx("div", Object.assign({ className: 'passkey-intro-view' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'passkey-intro-view__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'passkey-intro-view__title' }, { children: t('dyn_passkey_intro.title') })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle' }, { children: t('dyn_passkey_intro.subtitle') })), jsxRuntime.jsx("div", Object.assign({ className: 'passkey-intro-view__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonPadding: 'large', disabled: false }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'passkey-intro-view__inline-button' }, { children: [renderIcon(), jsxRuntime.jsx(Typography.Typography, { children: t('dyn_passkey_intro.button') })] })) })) }))] })) }))] })));
+};
+
+exports.PasskeyIntroView = PasskeyIntroView;

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PasskeyIntroView: FC;

package/src/lib/views/PasskeyIntroView/PasskeyIntroView.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import { isIPhone, isIPhone8OrEarlier, isAndroid } from '@dynamic-labs/utils';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgFooterInfoIcon } from '../../shared/assets/footer-info-icon.js';
+import { ReactComponent as SvgPasskeyIntroIcon } from '../../shared/assets/passkey-intro-icon.js';
+import { ReactComponent as SvgAndroidFaceId } from '../../shared/assets/android-face-id.js';
+import { ReactComponent as SvgIphoneFaceId } from '../../shared/assets/iphone-face-id.js';
+import { ReactComponent as SvgIphoneTouchId } from '../../shared/assets/iphone-touch-id.js';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '../../config/ApiEndpoint.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../components/Icon/Icon.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
+import { IconButton } from '../../components/IconButton/IconButton.js';
+import { Button } from '../../components/Button/Button.js';
+import '../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../CollectUserDataView/fieldsConfig.js';
+import '../../context/MockContext/MockContext.js';
+import { Tooltip } from '../../components/Tooltip/Tooltip.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+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 { useFooterAnimationContext } from '../../context/FooterAnimationContext/index.js';
+
+const PasskeyIntroView = () => {
+    const { setShowAuthFlow } = useInternalDynamicContext();
+    const { setIsFooterExpanded } = useFooterAnimationContext();
+    const { t } = useTranslation();
+    const closeButton = (jsx(IconButton, Object.assign({ type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false) }, { children: jsx(SvgClose, {}) })));
+    const infoIconButton = (jsx(Tooltip, Object.assign({ content: t('dyn_passkey_intro.helper.tooltip'), className: 'header__tooltip' }, { children: jsx(IconButton, Object.assign({ type: 'button', "data-testid": 'info-button', onClick: () => setIsFooterExpanded((prev) => !prev), className: 'header__icon' }, { children: jsx(SvgFooterInfoIcon, {}) })) }), 'info-button'));
+    const renderIcon = () => {
+        let IdIcon;
+        if (isIPhone()) {
+            if (isIPhone8OrEarlier()) {
+                IdIcon = jsx(SvgIphoneTouchId, { "data-testid": 'iphone-8-icon' });
+            }
+            else {
+                IdIcon = jsx(SvgIphoneFaceId, { "data-testid": 'iphone-icon' });
+            }
+        }
+        if (isAndroid()) {
+            IdIcon = jsx(SvgAndroidFaceId, { "data-testid": 'android-icon' });
+        }
+        if (!IdIcon) {
+            return;
+        }
+        return jsx(Icon, Object.assign({ size: 'small' }, { children: IdIcon }));
+    };
+    return (jsxs("div", Object.assign({ className: 'passkey-intro-modal-wrapper' }, { children: [jsx(ModalHeader, Object.assign({ leading: infoIconButton, trailing: closeButton }, { children: jsx("div", Object.assign({ className: 'passkey-intro-view__header' }, { children: jsx(SvgPasskeyIntroIcon, {}) })) })), jsx("div", Object.assign({ className: 'passkey-intro-view' }, { children: jsxs("div", Object.assign({ className: 'passkey-intro-view__content' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'passkey-intro-view__title' }, { children: t('dyn_passkey_intro.title') })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-intro-view__subtitle' }, { children: t('dyn_passkey_intro.subtitle') })), jsx("div", Object.assign({ className: 'passkey-intro-view__actions' }, { children: jsx(Button, Object.assign({ buttonPadding: 'large', disabled: false }, { children: jsxs("div", Object.assign({ className: 'passkey-intro-view__inline-button' }, { children: [renderIcon(), jsx(Typography, { children: t('dyn_passkey_intro.button') })] })) })) }))] })) }))] })));
+};
+
+export { PasskeyIntroView };

package/src/lib/views/PasskeyIntroView/index.d.ts

@@ -0,0 +1 @@
+export { PasskeyIntroView } from './PasskeyIntroView';

package/src/lib/views/PasskeySuccessView/PasskeySuccessView.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactI18next = require('react-i18next');
+require('react');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
+var passkeySuccessIcon = require('../../shared/assets/passkey-success-icon.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../config/ApiEndpoint.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
+var IconButton = require('../../components/IconButton/IconButton.cjs');
+var Button = require('../../components/Button/Button.cjs');
+require('../../components/Alert/Alert.cjs');
+require('formik');
+require('yup');
+require('../CollectUserDataView/fieldsConfig.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('@dynamic-labs/types');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+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 PasskeySuccessView = () => {
+    const { setShowAuthFlow, appName } = useInternalDynamicContext.useInternalDynamicContext();
+    const { t } = reactI18next.useTranslation();
+    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false) }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx("div", Object.assign({ className: 'passkey-success-view__header' }, { children: jsxRuntime.jsx(passkeySuccessIcon.ReactComponent, {}) })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'passkey-success-view' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'passkey-success-view__content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'passkey-success-view__title' }, { children: t('dyn_passkey_success.title') })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-success-view__subtitle' }, { children: t('dyn_passkey_success.subtitle', { appName }) }))] })), jsxRuntime.jsx("div", Object.assign({ className: 'passkey-success-view__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', onClick: () => setShowAuthFlow(false) }, { children: t('dyn_passkey_success.button') })) }))] }))] }));
+};
+
+exports.PasskeySuccessView = PasskeySuccessView;

package/src/lib/views/PasskeySuccessView/PasskeySuccessView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PasskeySuccessView: FC;

package/src/lib/views/PasskeySuccessView/PasskeySuccessView.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTranslation } from 'react-i18next';
+import 'react';
+import { Typography } from '../../components/Typography/Typography.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgPasskeySuccessIcon } from '../../shared/assets/passkey-success-icon.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../config/ApiEndpoint.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
+import { IconButton } from '../../components/IconButton/IconButton.js';
+import { Button } from '../../components/Button/Button.js';
+import '../../components/Alert/Alert.js';
+import 'formik';
+import 'yup';
+import '../CollectUserDataView/fieldsConfig.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import '@dynamic-labs/types';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+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 PasskeySuccessView = () => {
+    const { setShowAuthFlow, appName } = useInternalDynamicContext();
+    const { t } = useTranslation();
+    const closeButton = (jsx(IconButton, Object.assign({ type: 'button', "data-testid": 'close-button', onClick: () => setShowAuthFlow(false) }, { children: jsx(SvgClose, {}) })));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx("div", Object.assign({ className: 'passkey-success-view__header' }, { children: jsx(SvgPasskeySuccessIcon, {}) })) })), jsxs("div", Object.assign({ className: 'passkey-success-view' }, { children: [jsxs("div", Object.assign({ className: 'passkey-success-view__content' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'passkey-success-view__title' }, { children: t('dyn_passkey_success.title') })), jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'passkey-success-view__subtitle' }, { children: t('dyn_passkey_success.subtitle', { appName }) }))] })), jsx("div", Object.assign({ className: 'passkey-success-view__actions' }, { children: jsx(Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', onClick: () => setShowAuthFlow(false) }, { children: t('dyn_passkey_success.button') })) }))] }))] }));
+};
+
+export { PasskeySuccessView };

package/src/lib/views/PasskeySuccessView/index.d.ts

@@ -0,0 +1 @@
+export { PasskeySuccessView } from './PasskeySuccessView';

package/src/lib/views/PendingConnectView/PendingConnectView.cjs

@@ -19,6 +19,7 @@ require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
+require('../../config/ApiEndpoint.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('react-dom');
@@ -26,7 +27,6 @@ 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('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
@@ -54,7 +54,7 @@ require('../../components/OverlayCard/OverlayCard.context.cjs');
 const PendingConnectView = () => {
     const { selectedWalletConnector: walletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const iconSize = 94;
-    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.name, style: {
+    const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.key, style: {
             height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
             width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
         } }));