@dynamic-labs/sdk-react-core 0.18.0-RC.8 → 0.18.0-beta.28

package/src/lib/components/Step/Step.js

@@ -1,10 +1,42 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Typography } from '../Typography/Typography.js';
 import { Icon } from '../Icon/Icon.js';
 import { classNames } from '../../utils/functions/classNames/classNames.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 SvgCheck } from '../../shared/assets/check.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';
 
-const Step = ({ children, icon, active = false, }) => (jsxs("div", Object.assign({ className: classNames('step', {
-        step__active: active,
-    }) }, { children: [icon ? (jsx(Icon, Object.assign({ size: 'small', className: 'step__icon' }, { children: icon }))) : (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: active ? undefined : 'secondary' }, { children: jsx("span", { className: 'step__index-label' }) })) }))), jsx(Typography, Object.assign({ variant: 'body_small', color: active ? 'primary' : 'secondary' }, { children: children }))] })));
+const typographyOpacityMap = {
+    current: '1',
+    default: '1',
+    done: '0.4',
+    upcoming: '0.15',
+};
+const Step = ({ children, className, icon, state = 'default', }) => {
+    // Reduce opacity of icon if upcoming
+    const style = useMemo(() => ({ opacity: state === 'upcoming' ? 0.5 : 1 }), [state]);
+    const ComputedIcon = useMemo(() => {
+        // If done use checkmark icon
+        if (state === 'done')
+            return (jsx("div", Object.assign({ className: 'step__icon step__icon--done' }, { children: jsx(Icon, Object.assign({ className: 'step__icon__check-mark' }, { children: jsx(SvgCheck, { style: style }) })) })));
+        // Use provided icon if available
+        else if (icon)
+            return (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: jsx("div", Object.assign({ style: style }, { children: icon })) })));
+        // Otherwise use step index as icon
+        else
+            return (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: style }, { children: jsx("span", { className: 'step__index-label' }) })) })));
+    }, [icon, state, style]);
+    return (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [ComputedIcon, jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: { opacity: typographyOpacityMap[state] } }, { children: children }))] })));
+};
 
 export { Step };

package/src/lib/components/Toolkit/Toolkit.cjs

@@ -21,15 +21,15 @@ require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 var ThemeSwitch = require('./components/ThemeSwitch.cjs');
-var BrandStyleSwitch = require('./components/BrandStyleSwitch.cjs');
 var PrimaryColorInput = require('./components/PrimaryColorInput.cjs');
 var AuthModeSwitch = require('./components/AuthModeSwitch.cjs');
 var LoginWithEmailSwitch = require('./components/LoginWithEmailSwitch.cjs');
 var LoginWithEmailViewDisplayPriorityOrderSwitch = require('./components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs');
 var TemplateSelect = require('./components/TemplateSelect.cjs');
+var MultiWalletSwitch = require('./components/MultiWalletSwitch.cjs');
 
 const Toolkit = () => {
-    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, multiWallet, setMultiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const isToolkitVisible = React.useMemo(() => {
         if (!toolkitEnabled)
             return false;
@@ -37,7 +37,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Brand" })), jsxRuntime.jsx(BrandStyleSwitch.BrandStyleSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsxRuntime.jsx(MultiWalletSwitch.MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 exports.Toolkit = Toolkit;

package/src/lib/components/Toolkit/Toolkit.js

@@ -17,15 +17,15 @@ import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import { ThemeSwitch } from './components/ThemeSwitch.js';
-import { BrandStyleSwitch } from './components/BrandStyleSwitch.js';
 import { PrimaryColorInput } from './components/PrimaryColorInput.js';
 import { AuthModeSwitch } from './components/AuthModeSwitch.js';
 import { LoginWithEmailSwitch } from './components/LoginWithEmailSwitch.js';
 import { LoginWithEmailViewDisplayPriorityOrderSwitch } from './components/LoginWithEmailViewDisplayPriorityOrderSwitch.js';
 import { TemplateSelect } from './components/TemplateSelect.js';
+import { MultiWalletSwitch } from './components/MultiWalletSwitch.js';
 
 const Toolkit = () => {
-    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, } = useInternalDynamicContext();
+    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, multiWallet, setMultiWallet, } = useInternalDynamicContext();
     const isToolkitVisible = useMemo(() => {
         if (!toolkitEnabled)
             return false;
@@ -33,7 +33,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Brand" })), jsx(BrandStyleSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsx(MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 export { Toolkit };

package/src/lib/components/Toolkit/components/MultiWalletSwitch.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Switch = require('../../Switch/Switch.cjs');
+
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsxRuntime.jsx(Switch.Switch, { disabled: disabled, firstButton: {
+        active: multiWallet,
+        handleButtonClick: () => setMultiWallet(true),
+        name: 'True',
+    }, secondButton: {
+        active: !multiWallet,
+        handleButtonClick: () => setMultiWallet(false),
+        name: 'False',
+    } }));
+
+exports.MultiWalletSwitch = MultiWalletSwitch;

package/src/lib/components/Toolkit/components/MultiWalletSwitch.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    multiWallet: boolean;
+    setMultiWallet: (multiWallet: boolean) => void;
+    disabled: boolean;
+};
+export declare const MultiWalletSwitch: ({ multiWallet, setMultiWallet, disabled, }: Props) => JSX.Element;
+export {};

package/src/lib/components/Toolkit/components/MultiWalletSwitch.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { Switch } from '../../Switch/Switch.js';
+
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsx(Switch, { disabled: disabled, firstButton: {
+        active: multiWallet,
+        handleButtonClick: () => setMultiWallet(true),
+        name: 'True',
+    }, secondButton: {
+        active: !multiWallet,
+        handleButtonClick: () => setMultiWallet(false),
+        name: 'False',
+    } }));
+
+export { MultiWalletSwitch };

package/src/lib/components/Toolkit/components/index.d.ts

@@ -1,7 +1,7 @@
 export { ThemeSwitch } from './ThemeSwitch';
-export { BrandStyleSwitch } from './BrandStyleSwitch';
 export { PrimaryColorInput } from './PrimaryColorInput';
 export { AuthModeSwitch } from './AuthModeSwitch';
 export { LoginWithEmailSwitch } from './LoginWithEmailSwitch';
 export { LoginWithEmailViewDisplayPriorityOrderSwitch } from './LoginWithEmailViewDisplayPriorityOrderSwitch';
 export { TemplateSelect } from './TemplateSelect';
+export { MultiWalletSwitch } from './MultiWalletSwitch';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -22,9 +22,11 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
@@ -40,8 +42,8 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -18,9 +18,11 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
@@ -36,8 +38,8 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TosAndPp/TosAndPp.cjs

@@ -8,9 +8,24 @@ require('@dynamic-labs/utils');
 var isConnectOnly = require('../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly.isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const connectionType = isConnectOnly.isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [termsOfServiceUrl && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0&\u00A0" }), jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 exports.TosAndPp = TosAndPp;

package/src/lib/components/TosAndPp/TosAndPp.d.ts

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-type Props = {
-    privacyPolicyUrl: string;
-    termsOfServiceUrl: string;
-};
-export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, }: Props) => JSX.Element | null;
-export {};
+export declare const TosAndPp: () => JSX.Element | null;

package/src/lib/components/TosAndPp/TosAndPp.js

@@ -1,12 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/utils';
 import { isConnectOnly } from '../../utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
 import { Typography } from '../Typography/Typography.js';
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext();
-    return (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsx("br", {}), "our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext();
+    const connectionType = isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxs(Fragment, { children: [termsOfServiceUrl && jsx(Fragment, { children: "\u00A0&\u00A0" }), jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxs(Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 export { TosAndPp };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -36,7 +36,7 @@ var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -32,7 +32,7 @@ import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
     const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -29,9 +29,11 @@ require('@dynamic-labs/multi-wallet');
 require('../../context/ThemeContext/ThemeContext.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('react-dom');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('react-focus-lock');
@@ -43,8 +45,8 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -53,7 +55,7 @@ var TransactionRow = require('../TransactionConfirmationPageLayout/components/Tr
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -25,9 +25,11 @@ import '@dynamic-labs/multi-wallet';
 import '../../context/ThemeContext/ThemeContext.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import 'react-dom';
 import '../ShadowDOM/ShadowDOM.js';
 import 'react-focus-lock';
@@ -39,8 +41,8 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
@@ -49,7 +51,7 @@ import { TransactionRow } from '../TransactionConfirmationPageLayout/components/
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsx(SvgClose, {}) })));
     const networkIcon = (jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) })), jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsx(TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress(destinationAddress, 3, 3) })), jsxs(TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxs(TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsx(Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 export { TransactionStatusLayout };

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs

@@ -19,9 +19,11 @@ require('ethers');
 require('../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 var useResizeObserver = require('../../../utils/hooks/useResizeObserver/useResizeObserver.cjs');
 var useTransition = require('../../../utils/hooks/useTransition/useTransition.cjs');
 require('react-dom');
@@ -38,8 +40,8 @@ require('../../Popper/Popper/Popper.cjs');
 require('../../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
-require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../InlineWidget/InlineWidget.cjs');
+require('../../MenuList/Dropdown/Dropdown.cjs');
 require('../../../context/MockContext/MockContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Transition/VerticalDrawerTransition/VerticalDrawerTransition.js

@@ -15,9 +15,11 @@ import 'ethers';
 import '../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import { useResizeObserver } from '../../../utils/hooks/useResizeObserver/useResizeObserver.js';
 import { useTransition } from '../../../utils/hooks/useTransition/useTransition.js';
 import 'react-dom';
@@ -34,8 +36,8 @@ import '../../Popper/Popper/Popper.js';
 import '../../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../InlineWidget/InlineWidget.js';
+import '../../MenuList/Dropdown/Dropdown.js';
 import '../../../context/MockContext/MockContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/UserAddress/UserAddress.cjs

@@ -19,12 +19,42 @@ require('../../shared/consts/index.cjs');
 var useFetchNameService = require('../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.cjs');
 var StatusDot = require('../StatusDot/StatusDot.cjs');
 var Typography = require('../Typography/Typography.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('react-dom');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../IconButton/IconButton.cjs');
+require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+var usePromise = require('../../utils/hooks/usePromise/usePromise.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 
-const UserAddress = ({ userProfile }) => {
+const UserAddress = ({ userProfile, walletConnector }) => {
     var _a;
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
     const nameService = useFetchNameService.useFetchNameService(walletAddress);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 4, 4) })))] })));
+    const { data: walletConnectorAddress } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), {
+        enabled: !userProfile && Boolean(walletConnector),
+    });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsxRuntime.jsx(StatusDot.StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress || walletConnectorAddress, 4, 4) })))] })));
 };
 
 exports.UserAddress = UserAddress;

package/src/lib/components/UserAddress/UserAddress.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { UserProfile } from '../../shared';
 type Props = {
-    userProfile: UserProfile | undefined;
+    userProfile?: UserProfile;
+    walletConnector?: WalletConnector;
 };
-export declare const UserAddress: ({ userProfile }: Props) => JSX.Element;
+export declare const UserAddress: ({ userProfile, walletConnector }: Props) => JSX.Element;
 export {};

package/src/lib/components/UserAddress/UserAddress.js

@@ -15,12 +15,42 @@ import '../../shared/consts/index.js';
 import { useFetchNameService } from '../../widgets/DynamicWidget/hooks/useFetchNameService/useFetchNameService.js';
 import { StatusDot } from '../StatusDot/StatusDot.js';
 import { Typography } from '../Typography/Typography.js';
+import '../../config/ApiEndpoint.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
+import '../../context/DynamicContext/DynamicContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
+import 'react-dom';
+import '../ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import '../IconButton/IconButton.js';
+import '../Alert/Alert.js';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import { usePromise } from '../../utils/hooks/usePromise/usePromise.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 
-const UserAddress = ({ userProfile }) => {
+const UserAddress = ({ userProfile, walletConnector }) => {
     var _a;
     const walletAddress = (_a = userProfile === null || userProfile === void 0 ? void 0 : userProfile.verifiedCredentials.find((verifiedCredential) => verifiedCredential.id === userProfile.lastVerifiedCredentialId)) === null || _a === void 0 ? void 0 : _a.address;
     const nameService = useFetchNameService(walletAddress);
-    return (jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsx(StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsx(Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress, 4, 4) })))] })));
+    const { data: walletConnectorAddress } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress(), {
+        enabled: !userProfile && Boolean(walletConnector),
+    });
+    return (jsxs("div", Object.assign({ className: 'user-address__container' }, { children: [jsx(StatusDot, { variant: 'green', containerClassName: 'user-address__status-dot' }), (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: nameService.name })), jsx("div", { className: 'dynamic-widget-wallet-header__seperator' }), jsx(Typography, Object.assign({ variant: 'numbers_medium', color: 'secondary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) : (jsx(Typography, Object.assign({ variant: 'numbers_big', color: 'primary', className: 'user-address' }, { children: shortenWalletAddress(walletAddress || walletConnectorAddress, 4, 4) })))] })));
 };
 
 export { UserAddress };