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

package/src/lib/widgets/DynamicWidget/hooks/useFetchBalance/useFetchBalance.cjs

@@ -4,42 +4,87 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../../_virtual/_tslib.cjs');
 var React = require('react');
+require('../../../../events/dynamicEvents.cjs');
+var useWalletConnectorEvent = require('../../../../utils/hooks/events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
+require('@dynamic-labs/utils');
+require('../../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
-require('../../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
 require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
-require('@dynamic-labs/utils');
 require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var isWalletConnected = require('../../../../utils/functions/isWalletConnected/isWalletConnected.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+var usePromise = require('../../../../utils/hooks/usePromise/usePromise.cjs');
+require('@dynamic-labs/types');
+require('yup');
+require('react-i18next');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('formik');
+require('i18next');
+require('../../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../../context/FooterAnimationContext/index.cjs');
+require('../../../../context/QrCodeContext/QrCodeContext.cjs');
+require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
+require('../../context/DynamicWidgetContext.cjs');
+require('../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 
 const useFetchBalance = ({ connector, chain, address, network, }) => {
     const [balance, setBalance] = React.useState('0.0');
-    React.useEffect(() => {
-        const fetchBalance = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            if (!chain ||
-                !address ||
-                (connector.supportsNetworkSwitching() && !network))
-                return;
-            const isConnected = yield isWalletConnected.isWalletConnected({
-                address,
-                chain,
-                connector,
-            });
-            /* istanbul ignore else */
-            if (isConnected) {
-                const value = yield connector.getBalance();
-                setBalance(value);
-            }
+    const isFetchBalanceDisabled = !chain || !address || (connector.supportsNetworkSwitching() && !network);
+    const fetchBalance = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (isFetchBalanceDisabled)
+            return;
+        const isConnected = yield isWalletConnected.isWalletConnected({
+            address,
+            chain,
+            connector,
         });
-        fetchBalance();
-    }, [address, chain, connector, network]);
+        /* istanbul ignore else */
+        if (isConnected) {
+            const value = yield connector.getBalance();
+            setBalance(value);
+        }
+    });
+    usePromise.usePromise(fetchBalance, {
+        deps: [address, network === null || network === void 0 ? void 0 : network.toString(), chain],
+        enabled: !isFetchBalanceDisabled,
+    });
+    useWalletConnectorEvent.useWalletConnectorEvent(connector, 'accountChange', fetchBalance);
     return [balance];
 };
 

package/src/lib/widgets/DynamicWidget/hooks/useFetchBalance/useFetchBalance.d.ts

@@ -1,4 +1,4 @@
-import { WalletConnector } from '../../../../..';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
 type Props = {
     address: string | undefined;
     chain: string | undefined;

package/src/lib/widgets/DynamicWidget/hooks/useFetchBalance/useFetchBalance.js

@@ -1,41 +1,86 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import '../../../../events/dynamicEvents.js';
+import { useWalletConnectorEvent } from '../../../../utils/hooks/events/useWalletConnectorEvent/useWalletConnectorEvent.js';
+import '@dynamic-labs/utils';
+import '../../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
-import '../../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
 import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
-import '@dynamic-labs/utils';
 import '../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { isWalletConnected } from '../../../../utils/functions/isWalletConnected/isWalletConnected.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../../config/ApiEndpoint.js';
+import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
+import '@dynamic-labs/types';
+import 'yup';
+import 'react-i18next';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/InlineWidget/InlineWidget.js';
+import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'formik';
+import 'i18next';
+import '../../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../../context/FooterAnimationContext/index.js';
+import '../../../../context/QrCodeContext/QrCodeContext.js';
+import '../../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
+import '../../context/DynamicWidgetContext.js';
+import '../../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/viem-utils';
+import '../../views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 
 const useFetchBalance = ({ connector, chain, address, network, }) => {
     const [balance, setBalance] = useState('0.0');
-    useEffect(() => {
-        const fetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (!chain ||
-                !address ||
-                (connector.supportsNetworkSwitching() && !network))
-                return;
-            const isConnected = yield isWalletConnected({
-                address,
-                chain,
-                connector,
-            });
-            /* istanbul ignore else */
-            if (isConnected) {
-                const value = yield connector.getBalance();
-                setBalance(value);
-            }
+    const isFetchBalanceDisabled = !chain || !address || (connector.supportsNetworkSwitching() && !network);
+    const fetchBalance = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (isFetchBalanceDisabled)
+            return;
+        const isConnected = yield isWalletConnected({
+            address,
+            chain,
+            connector,
         });
-        fetchBalance();
-    }, [address, chain, connector, network]);
+        /* istanbul ignore else */
+        if (isConnected) {
+            const value = yield connector.getBalance();
+            setBalance(value);
+        }
+    });
+    usePromise(fetchBalance, {
+        deps: [address, network === null || network === void 0 ? void 0 : network.toString(), chain],
+        enabled: !isFetchBalanceDisabled,
+    });
+    useWalletConnectorEvent(connector, 'accountChange', fetchBalance);
     return [balance];
 };
 

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

@@ -4,12 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var walletBook = require('@dynamic-labs/wallet-book');
-var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var QRCode = require('../../../../views/QrCodeView/QRCode.cjs');
 require('react');
 require('../../../../events/dynamicEvents.cjs');
 require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/ViewContext/ViewContext.cjs');
@@ -87,7 +87,7 @@ const QrCodeModalView = ({ walletId }) => {
     // can't use theme because it's string instead of 'light' | 'dark'
     const typedTheme = theme.theme.name === 'light' ? 'light' : 'dark';
     const icon = (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: walletKey, style: { height: pixelToRem.pixelToRem(24), width: pixelToRem.pixelToRem(24) } }));
-    return (jsxRuntime.jsxs("div", { className: 'qr-code-modal-view', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title', children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) }), ' ', "to switch active account."] }), jsxRuntime.jsx("div", { className: 'qr-code-modal-view__container', children: jsxRuntime.jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsxRuntime.jsx(QRCode.QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: walletConnectorCore.normalizeWalletName(walletKey) })) : (
+    return (jsxRuntime.jsxs("div", { className: 'qr-code-modal-view', children: [jsxRuntime.jsxs(Typography.Typography, { variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title', children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] }), jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsxRuntime.jsx(Typography.Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress.shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) }), ' ', "to switch active account."] }), jsxRuntime.jsx("div", { className: 'qr-code-modal-view__container', children: jsxRuntime.jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsxRuntime.jsx(QRCode.QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: walletKey })) : (
                     // this div exists to give the parent a child, so that the parent
                     // takes on its given width and height. the result is stable
                     // rendering of this component, without this there is a brief flash

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

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useWalletBookContext, getWalletPrimaryColor, WalletIcon } from '@dynamic-labs/wallet-book';
-import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
 import { QRCode } from '../../../../views/QrCodeView/QRCode.js';
 import 'react';
 import '../../../../events/dynamicEvents.js';
 import '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -83,7 +83,7 @@ const QrCodeModalView = ({ walletId }) => {
     // can't use theme because it's string instead of 'light' | 'dark'
     const typedTheme = theme.theme.name === 'light' ? 'light' : 'dark';
     const icon = (jsx(WalletIcon, { walletKey: walletKey, style: { height: pixelToRem(24), width: pixelToRem(24) } }));
-    return (jsxs("div", { className: 'qr-code-modal-view', children: [jsxs(Typography, { variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title', children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] }), jsxs(Typography, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) }), ' ', "to switch active account."] }), jsx("div", { className: 'qr-code-modal-view__container', children: jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: normalizeWalletName(walletKey) })) : (
+    return (jsxs("div", { className: 'qr-code-modal-view', children: [jsxs(Typography, { variant: 'button_primary', color: 'primary', className: 'qr-code-modal-view__title', children: ["Connect with ", newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.connector.name] }), jsxs(Typography, { variant: 'body_small', color: 'secondary', className: 'qr-code-modal-view__title', children: ["Connect wallet", ' ', jsx(Typography, { as: 'span', weight: 'medium', color: 'primary', children: shortenWalletAddress(newPrimaryWallet === null || newPrimaryWallet === void 0 ? void 0 : newPrimaryWallet.address, 4, 4) }), ' ', "to switch active account."] }), jsx("div", { className: 'qr-code-modal-view__container', children: jsx("div", { className: 'qr-code-modal-view__wrapper', children: qrcodeUri ? (jsx(QRCode, { Icon: icon, accentColor: qrCodeColorsByTheme[typedTheme].accentColor, value: qrcodeUri, size: 175, logoSize: 40, walletKey: walletKey })) : (
                     // this div exists to give the parent a child, so that the parent
                     // takes on its given width and height. the result is stable
                     // rendering of this component, without this there is a brief flash

package/src/lib/widgets/DynamicWidget/views/EditProfileView/EditProfileView.cjs

@@ -66,7 +66,7 @@ require('formik');
 
 const EditProfileView = ({ rootClassName, }) => {
     const { setView } = ViewContext.useViewContext();
-    const { internalSetShowAuthFlow, multiWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowAuthFlow, multiWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const { goToProfileView } = DynamicWidgetContext.useWidgetContext();
     const { updateUser } = useUserUpdateRequest.useUserUpdateRequestInternal({
         validationSchemaStripUnknown: true,
@@ -75,10 +75,14 @@ const EditProfileView = ({ rootClassName, }) => {
         const { isEmailVerificationRequired } = yield updateUser(formValues);
         goToProfileView();
         if (isEmailVerificationRequired) {
-            internalSetShowAuthFlow(true);
+            setShowAuthFlow(true, {
+                ignoreIfIsEmbeddedWidget: false,
+                initializeWalletConnect: false,
+                performMultiWalletChecks: false,
+            });
             setView('verify-email');
         }
-    }), [goToProfileView, internalSetShowAuthFlow, setView, updateUser]);
+    }), [goToProfileView, setShowAuthFlow, setView, updateUser]);
     const isKYCEnabled = useKYCFlag.useKYCFlag();
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiWallet && isKYCEnabled && (jsxRuntime.jsx(Typography.Typography, { weight: 'regular', color: 'secondary', variant: 'body_normal', className: 'dynamic-widget-edit-profile-view__profile-title', children: "My information" })), jsxRuntime.jsx(UserProfileForm.UserProfileForm, { formClassName: rootClassName, onEditProfileSubmit: onEditProfileFormSubmit, onEditProfileCancel: goToProfileView })] }));
 };

package/src/lib/widgets/DynamicWidget/views/EditProfileView/EditProfileView.js

@@ -62,7 +62,7 @@ import 'formik';
 
 const EditProfileView = ({ rootClassName, }) => {
     const { setView } = useViewContext();
-    const { internalSetShowAuthFlow, multiWallet } = useInternalDynamicContext();
+    const { setShowAuthFlow, multiWallet } = useInternalDynamicContext();
     const { goToProfileView } = useWidgetContext();
     const { updateUser } = useUserUpdateRequestInternal({
         validationSchemaStripUnknown: true,
@@ -71,10 +71,14 @@ const EditProfileView = ({ rootClassName, }) => {
         const { isEmailVerificationRequired } = yield updateUser(formValues);
         goToProfileView();
         if (isEmailVerificationRequired) {
-            internalSetShowAuthFlow(true);
+            setShowAuthFlow(true, {
+                ignoreIfIsEmbeddedWidget: false,
+                initializeWalletConnect: false,
+                performMultiWalletChecks: false,
+            });
             setView('verify-email');
         }
-    }), [goToProfileView, internalSetShowAuthFlow, setView, updateUser]);
+    }), [goToProfileView, setShowAuthFlow, setView, updateUser]);
     const isKYCEnabled = useKYCFlag();
     return (jsxs(Fragment, { children: [!multiWallet && isKYCEnabled && (jsx(Typography, { weight: 'regular', color: 'secondary', variant: 'body_normal', className: 'dynamic-widget-edit-profile-view__profile-title', children: "My information" })), jsx(UserProfileForm, { formClassName: rootClassName, onEditProfileSubmit: onEditProfileFormSubmit, onEditProfileCancel: goToProfileView })] }));
 };

package/src/lib/widgets/DynamicWidget/views/WalletSettingsView/WalletSettingsView.cjs

@@ -19,6 +19,7 @@ var chevronLeft = require('../../../../shared/assets/chevron-left.cjs');
 var lock = require('../../../../shared/assets/lock.cjs');
 var altEmbeddedWallet = require('../../../../shared/assets/alt-embedded-wallet.cjs');
 var faceId = require('../../../../shared/assets/face-id.cjs');
+var altKey = require('../../../../shared/assets/alt-key.cjs');
 require('../../../../shared/logger.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../../../utils/constants/colors.cjs');
@@ -32,7 +33,7 @@ require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('react-dom');
-require('../../../../context/ThemeContext/ThemeContext.cjs');
+var ThemeContext = require('../../../../context/ThemeContext/ThemeContext.cjs');
 require('@dynamic-labs/types');
 require('yup');
 require('../../../../context/MockContext/MockContext.cjs');
@@ -76,18 +77,19 @@ const WalletSettingsView = () => {
     const { authToken } = useInternalDynamicContext.useInternalDynamicContext();
     const { initExportProcess } = useEmbeddedReveal.useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet.useIsTurnkeyWallet();
+    const { theme } = ThemeContext.useThemeContext();
     const { t } = reactI18next.useTranslation();
     const decodedJwt = decodeJwt.decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'wallet-settings-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'wallet-settings-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: t('dyn_wallet_settings.title') }) }) }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
+    return (jsxRuntime.jsxs("div", { className: 'wallet-settings-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, children: jsxRuntime.jsx("div", { className: 'wallet-settings-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_wallet_settings.title', children: t('dyn_wallet_settings.title') }) }) }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body', children: [jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-button', onClick: initExportProcess, buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(faceId.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.signing_section.passkey_button', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(checkCircle.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsxRuntime.jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-account-button', onClick: () => initExportProcess(), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altEmbeddedWallet.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon' }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', children: isTurnkeyHDWallet
-                                                ? t('dyn_wallet_settings.export_section.srp_button')
-                                                : t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false })] })] })] }));
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altKey.ReactComponent, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.private_key_button', children: t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }), isTurnkeyHDWallet && (jsxRuntime.jsx(Button.Button, { dataTestId: 'embedded-reveal-button', onClick: () => initExportProcess(true), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxRuntime.jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsxRuntime.jsx(altEmbeddedWallet.ReactComponent, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsxRuntime.jsx(Typography.Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.srp_button', children: t('dyn_wallet_settings.export_section.srp_button') })] }), endSlot: !isTurnkeyWalletWithoutAuthenticator ? (jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsxRuntime.jsx(lock.ReactComponent, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }))] })] })] }));
 };
 
 exports.WalletSettingsView = WalletSettingsView;

package/src/lib/widgets/DynamicWidget/views/WalletSettingsView/WalletSettingsView.js

@@ -15,6 +15,7 @@ import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chev
 import { ReactComponent as SvgLock } from '../../../../shared/assets/lock.js';
 import { ReactComponent as SvgAltEmbeddedWallet } from '../../../../shared/assets/alt-embedded-wallet.js';
 import { ReactComponent as SvgFaceId } from '../../../../shared/assets/face-id.js';
+import { ReactComponent as SvgAltKey } from '../../../../shared/assets/alt-key.js';
 import '../../../../shared/logger.js';
 import '@dynamic-labs/wallet-book';
 import '../../../../utils/constants/colors.js';
@@ -28,7 +29,7 @@ import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'react-dom';
-import '../../../../context/ThemeContext/ThemeContext.js';
+import { useThemeContext } from '../../../../context/ThemeContext/ThemeContext.js';
 import '@dynamic-labs/types';
 import 'yup';
 import '../../../../context/MockContext/MockContext.js';
@@ -72,18 +73,19 @@ const WalletSettingsView = () => {
     const { authToken } = useInternalDynamicContext();
     const { initExportProcess } = useEmbeddedReveal();
     const { isTurnkeyWallet, isTurnkeyWalletWithoutAuthenticator } = useIsTurnkeyWallet();
+    const { theme } = useThemeContext();
     const { t } = useTranslation();
     const decodedJwt = decodeJwt(authToken);
     const walletProperties = (_b = (_a = decodedJwt === null || decodedJwt === void 0 ? void 0 : decodedJwt.verifiedCredentials) === null || _a === void 0 ? void 0 : _a.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _b === void 0 ? void 0 : _b.walletProperties;
     const isTurnkeyHDWallet = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const backButton = (jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'wallet-settings-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'wallet-settings-view__header', children: jsx(Typography, { variant: 'title', color: 'primary', children: t('dyn_wallet_settings.title') }) }) }), jsxs("div", { className: 'wallet-settings-view__body', children: [jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsx(Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
+    return (jsxs("div", { className: 'wallet-settings-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx("div", { className: 'wallet-settings-view__header', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_wallet_settings.title', children: t('dyn_wallet_settings.title') }) }) }), jsxs("div", { className: 'wallet-settings-view__body', children: [jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.signing_section.title') }), jsx(Button, { dataTestId: 'manage-passkeys-button', onClick: () => setDynamicWidgetView('manage-passkeys'), buttonClassName: 'wallet-settings-view__body__section__button', startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { weight: 'medium', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgCheckCircle, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsx(Button, { dataTestId: 'embedded-reveal-button', onClick: initExportProcess, buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgFaceId, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.signing_section.passkey_button', children: t('dyn_wallet_settings.signing_section.passkey_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgCheckCircle, { className: 'wallet-settings-view__body__section__button__icon-secondary--success' })) : undefined, showInternalLoading: false })] }), jsxs("div", { className: 'wallet-settings-view__body__section', children: [jsx("div", { className: 'wallet-settings-view__body__section__title', children: t('dyn_wallet_settings.export_section.title') }), jsx(Button, { dataTestId: 'embedded-reveal-account-button', onClick: () => initExportProcess(), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
                                 // eslint-disable-next-line react/jsx-wrap-multilines
-                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltEmbeddedWallet, { className: 'wallet-settings-view__body__section__button__icon' }), jsx(Typography, { weight: 'medium', children: isTurnkeyHDWallet
-                                                ? t('dyn_wallet_settings.export_section.srp_button')
-                                                : t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false })] })] })] }));
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltKey, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.private_key_button', children: t('dyn_wallet_settings.export_section.private_key_button') })] }), endSlot: isTurnkeyWallet && !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }), isTurnkeyHDWallet && (jsx(Button, { dataTestId: 'embedded-reveal-button', onClick: () => initExportProcess(true), buttonClassName: 'wallet-settings-view__body__section__button', disabled: !isTurnkeyWallet || isTurnkeyWalletWithoutAuthenticator, startSlot: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsxs("div", { className: 'wallet-settings-view__body__section__button__start-slot', children: [jsx(SvgAltEmbeddedWallet, { className: `wallet-settings-view__body__section__button__icon${theme.theme.name === 'dark' ? '__stroke' : ''}` }), jsx(Typography, { color: 'primary', weight: 'medium', copykey: 'dyn_wallet_settings.export_section.srp_button', children: t('dyn_wallet_settings.export_section.srp_button') })] }), endSlot: !isTurnkeyWalletWithoutAuthenticator ? (jsx(SvgChevronLeft, { className: 'wallet-settings-view__body__section__button__icon-secondary--rotate' })) : (jsx(SvgLock, { className: 'wallet-settings-view__body__section__button__icon-secondary' })), showInternalLoading: false }))] })] })] }));
 };
 
 export { WalletSettingsView };

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.cjs

@@ -68,12 +68,12 @@ require('../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../components/Popper/PopperContext/PopperContext.cjs');
 
 const WalletsView = () => {
-    const { setShowAuthFlow, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { setShowLinkNewWalletModal, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag.useKYCFlag();
     const { setView } = ViewContext.useViewContext();
     const addNewWallet = () => {
         setView('multi-wallet-wallet-list');
-        setShowAuthFlow(true);
+        setShowLinkNewWalletModal(true);
         setSelectedWalletConnectorKey(null);
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!multiWallet && !isKYCEnabled && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-index-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { children: user === null || user === void 0 ? void 0 : user.email }), jsxRuntime.jsx(SingleWalletButtons.SingleWalletButtons, {})] })), multiWallet && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicWidgetWallets.DynamicWidgetWallets, {}), jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: jsxRuntime.jsxs("div", { className: 'dynamic-widget-index-view__footer', children: [jsxRuntime.jsxs(Button.Button, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {

package/src/lib/widgets/DynamicWidget/views/WalletsView/WalletsView.js

@@ -64,12 +64,12 @@ import '../../../../components/Popper/Popper/Popper.js';
 import '../../../../components/Popper/PopperContext/PopperContext.js';
 
 const WalletsView = () => {
-    const { setShowAuthFlow, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext();
+    const { setShowLinkNewWalletModal, setSelectedWalletConnectorKey, user, authMode, multiWallet, } = useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag();
     const { setView } = useViewContext();
     const addNewWallet = () => {
         setView('multi-wallet-wallet-list');
-        setShowAuthFlow(true);
+        setShowLinkNewWalletModal(true);
         setSelectedWalletConnectorKey(null);
     };
     return (jsxs(Fragment, { children: [!multiWallet && !isKYCEnabled && (jsxs("div", { className: 'dynamic-widget-index-view__email-container', children: [jsx(Typography, { children: user === null || user === void 0 ? void 0 : user.email }), jsx(SingleWalletButtons, {})] })), multiWallet && (jsxs(Fragment, { children: [jsx(DynamicWidgetWallets, {}), jsx(DynamicWidgetFooter, { children: jsxs("div", { className: 'dynamic-widget-index-view__footer', children: [jsxs(Button, { buttonClassName: 'dynamic-widget-footer__button', buttonVariant: 'tertiary', buttonPadding: 'none', onClick: addNewWallet, typographyProps: {

package/src/lib/context/DynamicContext/hooks/useSetShowAuthFlowWithInit/index.d.ts

@@ -1 +0,0 @@
-export * from './useSetShowAuthFlowWithInit';

package/src/lib/context/DynamicContext/hooks/useSetShowAuthFlowWithInit/useSetShowAuthFlowWithInit.cjs

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-/**
- * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
- * before we can connect a wallet. The goal here is that when a user clicks
- * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
- * and will prime it for connection. This way, when the user clicks on the
- * "Connect" button in the WalletConnect modal, there is a uri ready to go
- * to immediately trigger the deep link on mobile
- */
-const useSetShowAuthFlowWithInit = ({ setShowAuthFlow, walletConnectorOptions, user, isMultiWalletEnabled, isRenderingEmbeddedAuthFlow, }) => {
-    const setShowAuthFlowWithInit = React.useCallback((value) => {
-        var _a;
-        if (value) {
-            // Do not change state if:
-            // 1. The user is already signed in and multi-wallet is not enabled
-            // 2. An embedded auth flow is already being rendered
-            if ((user && !isMultiWalletEnabled) ||
-                isRenderingEmbeddedAuthFlow.current)
-                return;
-            (_a = walletConnectorOptions
-                .find((wallet) => wallet.walletConnector.key === 'walletconnect')) === null || _a === void 0 ? void 0 : _a.walletConnector.init();
-        }
-        setShowAuthFlow(value);
-    }, [setShowAuthFlow, walletConnectorOptions, user, isMultiWalletEnabled]);
-    return setShowAuthFlowWithInit;
-};
-
-exports.useSetShowAuthFlowWithInit = useSetShowAuthFlowWithInit;

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

@@ -1,29 +0,0 @@
-import { useCallback } from 'react';
-
-/**
- * this hook wraps `setShowAuthFlow`. WalletConnect requires initialization
- * before we can connect a wallet. The goal here is that when a user clicks
- * on the "Connect your wallet" button, the SDK starts initializing WalletConnect
- * and will prime it for connection. This way, when the user clicks on the
- * "Connect" button in the WalletConnect modal, there is a uri ready to go
- * to immediately trigger the deep link on mobile
- */
-const useSetShowAuthFlowWithInit = ({ setShowAuthFlow, walletConnectorOptions, user, isMultiWalletEnabled, isRenderingEmbeddedAuthFlow, }) => {
-    const setShowAuthFlowWithInit = useCallback((value) => {
-        var _a;
-        if (value) {
-            // Do not change state if:
-            // 1. The user is already signed in and multi-wallet is not enabled
-            // 2. An embedded auth flow is already being rendered
-            if ((user && !isMultiWalletEnabled) ||
-                isRenderingEmbeddedAuthFlow.current)
-                return;
-            (_a = walletConnectorOptions
-                .find((wallet) => wallet.walletConnector.key === 'walletconnect')) === null || _a === void 0 ? void 0 : _a.walletConnector.init();
-        }
-        setShowAuthFlow(value);
-    }, [setShowAuthFlow, walletConnectorOptions, user, isMultiWalletEnabled]);
-    return setShowAuthFlowWithInit;
-};
-
-export { useSetShowAuthFlowWithInit };