@dynamic-labs/sdk-react-core 0.18.0-RC.14 → 0.18.0-RC.16

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/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

@@ -53,7 +53,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

@@ -49,7 +49,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/context/DynamicContext/DynamicContext.cjs

@@ -19,6 +19,7 @@ var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs'
 require('ethers');
 var useLocalStorage = require('../../shared/utils/hooks/useLocalStorage/useLocalStorage.cjs');
 var useGlobalLoading = require('../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.cjs');
+var useEffectOnce = require('../../shared/utils/hooks/useEffectOnce/useEffectOnce.cjs');
 require('../../shared/consts/index.cjs');
 var useFetchProjectSettings = require('../../utils/hooks/useFetchProjectSettings/useFetchProjectSettings.cjs');
 var useFetchNonce = require('../../utils/hooks/useFetchNonce/useFetchNonce.cjs');
@@ -36,6 +37,8 @@ require('../MockContext/MockContext.cjs');
 var CaptchaContext = require('../CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
 var ThemeContext = require('../ThemeContext/ThemeContext.cjs');
+var useValidateSession = require('../../utils/hooks/useValidateSession/useValidateSession.cjs');
+var useEventListener = require('../../utils/hooks/useEventListener/useEventListener.cjs');
 var ApiEndpoint = require('../../config/ApiEndpoint.cjs');
 var useFetchNetworkConfigurations = require('../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.cjs');
 var useMultiWalletWidgetState = require('../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.cjs');
@@ -78,8 +81,8 @@ var SendBalanceContext = require('../SendBalanceContext/SendBalanceContext.cjs')
 var usePrimaryWalletId = require('../../utils/hooks/usePrimaryWalletId/usePrimaryWalletId.cjs');
 var WalletGroupContext = require('../WalletGroupContext/WalletGroupContext.cjs');
 var WalletContext = require('../WalletContext/WalletContext.cjs');
-var useValidateSession = require('../../utils/hooks/useValidateSession/useValidateSession.cjs');
 var getMissingChains = require('../../utils/functions/getMissingChains/getMissingChains.cjs');
+var useMultiWallet = require('../../utils/hooks/multiWallet/useMultiWallet/useMultiWallet.cjs');
 var helpers = require('./helpers.cjs');
 var validators = require('./validators.cjs');
 var useCustomerCallbacks = require('./useCustomerCallbacks/useCustomerCallbacks.cjs');
@@ -89,15 +92,19 @@ var useDisplayOrderState = require('./hooks/useDisplayOrderState/useDisplayOrder
 var useNameService = require('./hooks/useNameService/useNameService.cjs');
 var useSetShowAuthFlowWithInit = require('./hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.cjs');
 
+const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = React.createContext(undefined);
 const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = values.DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, socialProvidersFilter, }, children, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!environmentId) {
         throw new utils.MissingEnvironmentIdError();
     }
     logger.logger.setLogLevel(logLevel);
     walletConnectorCore.logger.setLogLevel(logLevel);
+    if (environmentId === PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID) {
+        logger.logger.warn(`WARNING: DYNAMIC is using a test environment ID ${environmentId}. Please sign up on https://app.dynamic.xyz/ to get your production environment ID.`);
+    }
     ApiEndpoint.setBaseUrl((_a = process.env.DYNAMIC_API_BASE_URL) !== null && _a !== void 0 ? _a : apiBaseUrl);
     localStorage.LocalStorage.setSuffix(localStorageSuffix);
     const isAuthenticated = Boolean(getAuthToken.getAuthToken());
@@ -119,7 +126,18 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [multiWalletWidgetState, setMultiWalletWidgetState, { awaiting_account_switch: [accountSwitchState], awaiting_signature: [awaitingSignatureState], },] = useMultiWalletWidgetState.useMultiWalletWidgetState();
     const [isVerifying, setIsVerifying] = React.useState(false);
     const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings.useFetchProjectSettings({ authToken: getAuthToken.getAuthToken(), environmentId });
-    const multiWallet = (_c = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet) !== null && _c !== void 0 ? _c : false;
+    const { multiWallet, setMultiWallet } = useMultiWallet.useMultiWallet({
+        deprecatedMultiWallet,
+        multiWalletSettings: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet,
+    });
+    // for demo proposes when running single wallet
+    // it should not use bridge even having walletConnectV1Bridge set on settings
+    // but v2 if enabled
+    if (toolkitEnabled &&
+        ((_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.walletConnect) === null || _d === void 0 ? void 0 : _d.v2Enabled) &&
+        !multiWallet) {
+        walletConnectV1Bridge = undefined;
+    }
     // ensures that when user comes back to site and primary wallet is out of sync, we don't show widget popup
     const [showWidgetStatePopup, setShowWidgetStatePopup] = React.useState(!multiWallet);
     const walletBook$1 = walletBook.useWalletBookCdn();
@@ -151,19 +169,23 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     });
     const [authMode, setAuthMode] = useLocalStorage.useLocalStorage(localStorage$1.AUTH_MODE, initialAuthenticationMode);
     const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId.usePrimaryWalletId();
-    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, } = useConnectWallet.useConnectWallet({
+    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, updateConnectedWalletById, } = useConnectWallet.useConnectWallet({
         authMode,
         clearPrimaryWalletId,
         enableVisitTrackingOnConnectOnly,
         environmentId,
+        onUnlink: (walletId, connectedWalletsInfo) => {
+            const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
+            setWalletsToConnectByChain(missingChains);
+        },
         primaryWalletId,
         setPrimaryWalletId,
         wallets,
     });
-    React.useEffect(() => {
+    useEffectOnce.useEffectOnce(() => {
         const missingChains = getMissingChains.getMissingChains(walletsByChain, connectedWalletsInfo);
         setWalletsToConnectByChain(missingChains);
-    }, [connectedWalletsInfo, walletsByChain]);
+    });
     const [selectedWalletConnector, setSelectedWalletConnector] = React.useState(null);
     //selected wallet to perform an action (become primary, unlink, etc)
     const [selectedWalletWithAction, setSelectedWalletWithAction] = React.useState(null);
@@ -197,7 +219,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         wallets,
     });
     // until user completes onboarding, jwt is only stored in onboardingOnlyJwt
-    const authToken = (_d = getAuthToken.getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+    const authToken = (_e = getAuthToken.getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
     const { getNameService, removeConnectedNameService } = useNameService.useNameService({
         authToken,
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
@@ -209,7 +231,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j;
+        var _j, _k;
         clearAllWalletConnectSessions();
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
@@ -222,7 +244,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         for (const connector of walletConnectors) {
             yield connector.endSession();
         }
-        yield ((_h = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _h === void 0 ? void 0 : _h.endSession());
+        yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
@@ -233,7 +255,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         removeConnectedUser();
         clearPrimaryWalletId();
         removeConnectedNameService();
-        (_j = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _j === void 0 ? void 0 : _j.call(eventsCallbacks, user);
+        (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         walletsByChain,
@@ -252,10 +274,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         environmentId,
         walletConnectors,
     ]);
+    useEventListener.useEventListener('logOut', handleLogOut);
     let wcVersion;
     if (projectSettings) {
         wcVersion =
-            ((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _e === void 0 ? void 0 : _e.walletConnect) === null || _f === void 0 ? void 0 : _f.v2Enabled) && !walletConnectV1Bridge
+            ((_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _f === void 0 ? void 0 : _f.walletConnect) === null || _g === void 0 ? void 0 : _g.v2Enabled) && !walletConnectV1Bridge
                 ? 2
                 : 1;
     }
@@ -307,6 +330,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },
+        connectedWallets,
         handleLogOut,
         isAuthenticated,
         primaryWallet,
@@ -417,6 +441,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setIsSingleWalletAccount,
             setIsVerifying,
             setLogInWithEmail,
+            setMultiWallet,
             setMultiWalletWidgetState,
             setNetwork,
             setOnboardingOnlyJwt,
@@ -449,6 +474,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             theme,
             toolkitEnabled,
             unlinkConnectedWallet,
+            updateConnectedWalletById,
             user,
             walletConnector: (_b = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) !== null && _b !== void 0 ? _b : null,
             walletUiUtils,
@@ -523,6 +549,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setCallback,
         setConnectedUser,
         setLogInWithEmail,
+        setMultiWallet,
         setMultiWalletWidgetState,
         setNetwork,
         setPrimaryWallet,
@@ -552,6 +579,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         walletsByChain,
         walletsFilter,
         walletsToConnectByChain,
+        updateConnectedWalletById,
     ]);
     React.useEffect(() => {
         const addPrefetch = (attr) => {
@@ -595,7 +623,8 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, Object.assign({ walletBook: walletBook$1 }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.parseTheme(theme, ((_g = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _g === void 0 ? void 0 : _g.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ initialView: helpers.getInitialView({
+    return (jsxRuntime.jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, Object.assign({ walletBook: walletBook$1 }, { children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, Object.assign({ customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, Object.assign({ initialView: helpers.getInitialView({
+                            connectedWallets,
                             isBridgeFlow,
                             isUserConnected,
                             loginWithEmail,
@@ -604,3 +633,4 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
 
 exports.DynamicContext = DynamicContext;
 exports.DynamicContextProvider = DynamicContextProvider;
+exports.PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID;

package/src/lib/context/DynamicContext/DynamicContext.d.ts

@@ -7,8 +7,10 @@ import { WalletOption, UserProfile, Wallet, MultiWalletWidgetState, AccountSwitc
 import { ThemeData, ThemeSetting } from '../ThemeContext';
 import { MultiWalletWidgetStateSetter } from '../../utils/hooks/multiWallet';
 import { SocialNetworkIconType } from '../../utils/functions/getSocialNetworkIcon';
+import type { ConnectedWalletConnectorType } from '../../utils/hooks/useConnectWallet/useConnectWallet';
 import { Callback } from './useCustomerCallbacks';
 import { DisplayOrder, SetDisplayOrderPriority } from './hooks';
+export declare const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = "2762a57b-faa4-41ce-9f16-abff9300e2c9";
 export type ChainsToConnect = {
     chain: Chain;
     numberOfWallets: number;
@@ -87,6 +89,7 @@ export interface IDynamicContext {
     setIsSingleWalletAccount: Dispatch<SetStateAction<boolean>>;
     setIsVerifying: Dispatch<SetStateAction<boolean>>;
     setLogInWithEmail: Dispatch<SetStateAction<boolean>>;
+    setMultiWallet: (value: boolean) => void;
     setMultiWalletWidgetState: MultiWalletWidgetStateSetter;
     setNetwork: Dispatch<SetStateAction<number | string | undefined>>;
     setOnboardingOnlyJwt: Dispatch<SetStateAction<string | undefined>>;
@@ -129,6 +132,7 @@ export interface IDynamicContext {
     walletsFilter?: (options: WalletOption[]) => WalletOption[];
     socialProvidersFilter?: SocialProviderFilter;
     removeConnectedWalletsInfo: () => void;
+    updateConnectedWalletById: (walletId: string, payload: Partial<ConnectedWalletConnectorType>) => void;
 }
 export interface DynamicContextProps {
     children: ReactNode;
@@ -159,7 +163,7 @@ export interface DynamicContextProps {
          * @default WARN
          */
         logLevel?: keyof typeof LogLevel;
-        /** @deprecated enable multi wallet in the bashboard settings instead */
+        /** @deprecated enable multi wallet in the dashboard settings instead */
         multiWallet?: boolean;
         newToWeb3WalletChainMap?: ChainToWalletMap;
         notInTheListImageUrl?: string;

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -1,6 +1,6 @@
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { createContext, useState, useCallback, useEffect, useMemo } from 'react';
 import { useWalletBookCdn, getWalletBookCdnUrl, WalletBookContextProvider } from '@dynamic-labs/wallet-book';
 import { logger as logger$1 } from '@dynamic-labs/wallet-connector-core';
 import { ICONIC_SPRITE_URL } from '@dynamic-labs/iconic';
@@ -15,6 +15,7 @@ import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js
 import 'ethers';
 import { useLocalStorage } from '../../shared/utils/hooks/useLocalStorage/useLocalStorage.js';
 import { useGlobalLoading } from '../../shared/utils/hooks/useGlobalLoading/useGlobalLoading.js';
+import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import '../../shared/consts/index.js';
 import { useFetchProjectSettings } from '../../utils/hooks/useFetchProjectSettings/useFetchProjectSettings.js';
 import { useFetchNonce } from '../../utils/hooks/useFetchNonce/useFetchNonce.js';
@@ -32,6 +33,8 @@ import '../MockContext/MockContext.js';
 import { CaptchaContextProvider } from '../CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { ThemeContextProvider } from '../ThemeContext/ThemeContext.js';
+import { useValidateSession } from '../../utils/hooks/useValidateSession/useValidateSession.js';
+import { useEventListener } from '../../utils/hooks/useEventListener/useEventListener.js';
 import ApiEndpoint from '../../config/ApiEndpoint.js';
 import { useFetchNetworkConfigurations } from '../../utils/hooks/useFetchNetworkConfigurations/useFetchNetworkConfigurations.js';
 import { useMultiWalletWidgetState } from '../../utils/hooks/multiWallet/useMultiWalletWidgetState/useMultiWalletWidgetState.js';
@@ -74,8 +77,8 @@ import { SendBalanceContextProvider } from '../SendBalanceContext/SendBalanceCon
 import { usePrimaryWalletId } from '../../utils/hooks/usePrimaryWalletId/usePrimaryWalletId.js';
 import { WalletGroupContextProvider } from '../WalletGroupContext/WalletGroupContext.js';
 import { WalletContextProvider } from '../WalletContext/WalletContext.js';
-import { useValidateSession } from '../../utils/hooks/useValidateSession/useValidateSession.js';
 import { getMissingChains } from '../../utils/functions/getMissingChains/getMissingChains.js';
+import { useMultiWallet } from '../../utils/hooks/multiWallet/useMultiWallet/useMultiWallet.js';
 import { initExpirationTime, getInitialView } from './helpers.js';
 import { validateAuthUser } from './validators.js';
 import { useCustomerCallbacks } from './useCustomerCallbacks/useCustomerCallbacks.js';
@@ -85,15 +88,19 @@ import { useDisplayOrderState } from './hooks/useDisplayOrderState/useDisplayOrd
 import { useNameService } from './hooks/useNameService/useNameService.js';
 import { useSetShowAuthFlowWithInit } from './hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.js';
 
+const PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID = '2762a57b-faa4-41ce-9f16-abff9300e2c9';
 const EMPTY_INITIAL_USER = undefined;
 const DynamicContext = createContext(undefined);
 const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, accessDeniedMessageSecondary, accessDeniedButton, apiBaseUrl, appLogoUrl = 'https://demo.dynamic.xyz/assets/dynamic-logo.svg', appName = 'Dynamic Example', walletsByChain, cssOverrides, defaultNumberOfWalletsToShow = DEFAULT_NUMBER_OF_WALLETS_TO_SHOW, flowNetwork, initialAuthenticationMode = 'connect-and-sign', debugError = false, displayTermsOfService = true, newToWeb3WalletChainMap, enableVisitTrackingOnConnectOnly = true, environmentId, localStorageSuffix, eventsCallbacks, evmNetworks, walletsFilter, logLevel = 'WARN', multiWallet: deprecatedMultiWallet, notInTheListImageUrl, onboardingImageUrl, policiesConsentInnerComponent, customPrivacyPolicy, privacyPolicyUrl, signWithEmailWalletName, socialMediaLinkText, socialMediaIconUrl, socialMediaUrl, customTermsOfServices, termsOfServiceUrl, toolkitEnabled, siweStatement, shadowDOMEnabled = true, walletConnectV1Bridge, walletConnectors: walletConnectorsProp, socialProvidersFilter, }, children, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (!environmentId) {
         throw new MissingEnvironmentIdError();
     }
     logger.setLogLevel(logLevel);
     logger$1.setLogLevel(logLevel);
+    if (environmentId === PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID) {
+        logger.warn(`WARNING: DYNAMIC is using a test environment ID ${environmentId}. Please sign up on https://app.dynamic.xyz/ to get your production environment ID.`);
+    }
     ApiEndpoint.setBaseUrl((_a = process.env.DYNAMIC_API_BASE_URL) !== null && _a !== void 0 ? _a : apiBaseUrl);
     LocalStorage.setSuffix(localStorageSuffix);
     const isAuthenticated = Boolean(getAuthToken());
@@ -115,7 +122,18 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     const [multiWalletWidgetState, setMultiWalletWidgetState, { awaiting_account_switch: [accountSwitchState], awaiting_signature: [awaitingSignatureState], },] = useMultiWalletWidgetState();
     const [isVerifying, setIsVerifying] = useState(false);
     const { projectSettings, isLoading: isProjectSettingsLoading } = useFetchProjectSettings({ authToken: getAuthToken(), environmentId });
-    const multiWallet = (_c = deprecatedMultiWallet !== null && deprecatedMultiWallet !== void 0 ? deprecatedMultiWallet : (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet) !== null && _c !== void 0 ? _c : false;
+    const { multiWallet, setMultiWallet } = useMultiWallet({
+        deprecatedMultiWallet,
+        multiWalletSettings: (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _b === void 0 ? void 0 : _b.multiWallet,
+    });
+    // for demo proposes when running single wallet
+    // it should not use bridge even having walletConnectV1Bridge set on settings
+    // but v2 if enabled
+    if (toolkitEnabled &&
+        ((_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _c === void 0 ? void 0 : _c.walletConnect) === null || _d === void 0 ? void 0 : _d.v2Enabled) &&
+        !multiWallet) {
+        walletConnectV1Bridge = undefined;
+    }
     // ensures that when user comes back to site and primary wallet is out of sync, we don't show widget popup
     const [showWidgetStatePopup, setShowWidgetStatePopup] = useState(!multiWallet);
     const walletBook = useWalletBookCdn();
@@ -147,19 +165,23 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
     });
     const [authMode, setAuthMode] = useLocalStorage(AUTH_MODE, initialAuthenticationMode);
     const { clearPrimaryWalletId, primaryWalletId, setPrimaryWalletId } = usePrimaryWalletId();
-    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, } = useConnectWallet({
+    const { connectWallet, removeConnectedWalletsInfo, connectedWalletsInfo, connectedWallet, getConnectedWalletById, connectedWallets, connectWalletByAddressAndChain, unlinkConnectedWallet, updateConnectedWalletById, } = useConnectWallet({
         authMode,
         clearPrimaryWalletId,
         enableVisitTrackingOnConnectOnly,
         environmentId,
+        onUnlink: (walletId, connectedWalletsInfo) => {
+            const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
+            setWalletsToConnectByChain(missingChains);
+        },
         primaryWalletId,
         setPrimaryWalletId,
         wallets,
     });
-    useEffect(() => {
+    useEffectOnce(() => {
         const missingChains = getMissingChains(walletsByChain, connectedWalletsInfo);
         setWalletsToConnectByChain(missingChains);
-    }, [connectedWalletsInfo, walletsByChain]);
+    });
     const [selectedWalletConnector, setSelectedWalletConnector] = useState(null);
     //selected wallet to perform an action (become primary, unlink, etc)
     const [selectedWalletWithAction, setSelectedWalletWithAction] = useState(null);
@@ -193,7 +215,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         wallets,
     });
     // until user completes onboarding, jwt is only stored in onboardingOnlyJwt
-    const authToken = (_d = getAuthToken()) !== null && _d !== void 0 ? _d : onboardingOnlyJwt;
+    const authToken = (_e = getAuthToken()) !== null && _e !== void 0 ? _e : onboardingOnlyJwt;
     const { getNameService, removeConnectedNameService } = useNameService({
         authToken,
         currentWallet: primaryWallet !== null && primaryWallet !== void 0 ? primaryWallet : connectedWallet,
@@ -205,7 +227,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         clearOphanedWalletConnectSessions,
     ]);
     const handleLogOut = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j;
+        var _j, _k;
         clearAllWalletConnectSessions();
         setWalletsToConnectByChain(walletsByChain);
         setShowBridgeWidget(false);
@@ -218,7 +240,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         for (const connector of walletConnectors) {
             yield connector.endSession();
         }
-        yield ((_h = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _h === void 0 ? void 0 : _h.endSession());
+        yield ((_j = connectedWallet === null || connectedWallet === void 0 ? void 0 : connectedWallet.connector) === null || _j === void 0 ? void 0 : _j.endSession());
         setAuthMode(initialAuthenticationMode);
         setShowAuthFlow(false);
         setMultiWalletWidgetState('idle');
@@ -229,7 +251,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         removeConnectedUser();
         clearPrimaryWalletId();
         removeConnectedNameService();
-        (_j = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _j === void 0 ? void 0 : _j.call(eventsCallbacks, user);
+        (_k = eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLogout) === null || _k === void 0 ? void 0 : _k.call(eventsCallbacks, user);
     }), [
         clearAllWalletConnectSessions,
         walletsByChain,
@@ -248,10 +270,11 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         environmentId,
         walletConnectors,
     ]);
+    useEventListener('logOut', handleLogOut);
     let wcVersion;
     if (projectSettings) {
         wcVersion =
-            ((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _e === void 0 ? void 0 : _e.walletConnect) === null || _f === void 0 ? void 0 : _f.v2Enabled) && !walletConnectV1Bridge
+            ((_g = (_f = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _f === void 0 ? void 0 : _f.walletConnect) === null || _g === void 0 ? void 0 : _g.v2Enabled) && !walletConnectV1Bridge
                 ? 2
                 : 1;
     }
@@ -303,6 +326,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             onLinkSuccess: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onLinkSuccess,
             onUserProfileUpdate: eventsCallbacks === null || eventsCallbacks === void 0 ? void 0 : eventsCallbacks.onUserProfileUpdate,
         },
+        connectedWallets,
         handleLogOut,
         isAuthenticated,
         primaryWallet,
@@ -413,6 +437,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setIsSingleWalletAccount,
             setIsVerifying,
             setLogInWithEmail,
+            setMultiWallet,
             setMultiWalletWidgetState,
             setNetwork,
             setOnboardingOnlyJwt,
@@ -445,6 +470,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             theme,
             toolkitEnabled,
             unlinkConnectedWallet,
+            updateConnectedWalletById,
             user,
             walletConnector: (_b = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) !== null && _b !== void 0 ? _b : null,
             walletUiUtils,
@@ -519,6 +545,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         setCallback,
         setConnectedUser,
         setLogInWithEmail,
+        setMultiWallet,
         setMultiWalletWidgetState,
         setNetwork,
         setPrimaryWallet,
@@ -548,6 +575,7 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
         walletsByChain,
         walletsFilter,
         walletsToConnectByChain,
+        updateConnectedWalletById,
     ]);
     useEffect(() => {
         const addPrefetch = (attr) => {
@@ -591,11 +619,12 @@ const DynamicContextProvider = ({ settings: { accessDeniedMessagePrimary, access
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(WalletBookContextProvider, Object.assign({ walletBook: walletBook }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_g = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _g === void 0 ? void 0 : _g.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ initialView: getInitialView({
+    return (jsx(DynamicContext.Provider, Object.assign({ value: value }, { children: jsx(WalletBookContextProvider, Object.assign({ walletBook: walletBook }, { children: jsx(ThemeContextProvider, Object.assign({ customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design }, { children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, Object.assign({ initialView: getInitialView({
+                            connectedWallets,
                             isBridgeFlow,
                             isUserConnected,
                             loginWithEmail,
                         }) }, { children: jsx(WalletContextProvider, Object.assign({ canSync: didConnectedStateLoad, connectWalletByAddressAndChain: connectWalletByAddressAndChain }, { children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsxs(WalletGroupContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) })) })) }) })) })) })));
 };
 
-export { DynamicContext, DynamicContextProvider };
+export { DynamicContext, DynamicContextProvider, PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID };