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

package/src/lib/views/EmbeddedReveal/utils/turnkeyExport/turnkeyExport.js

@@ -28,8 +28,8 @@ const initExport = ({ iframeContainer, iframeElementId, wallet, }) => __awaiter(
     }
     return turnkeyExportHandler;
 });
-const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => __awaiter(void 0, void 0, void 0, function* () {
-    var _b, _c;
+const handleExportInitCheck = ({ authToken, userEmail, wallet, }) => {
+    var _a, _b;
     if (!authToken) {
         throw new DynamicError('User must be logged in');
     }
@@ -44,7 +44,7 @@ const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => _
     }
     const connector = wallet.connector;
     connector.setEmail(userEmail);
-    const walletProperties = (_c = (_b = decodedJwt.verifiedCredentials) === null || _b === void 0 ? void 0 : _b.find(({ walletName }) => walletName === null || walletName === void 0 ? void 0 : walletName.startsWith('turnkey'))) === null || _c === void 0 ? void 0 : _c.walletProperties;
+    const walletProperties = (_b = (_a = 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 turnkeyHDWalletId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyHDWalletId;
     const privateKeyId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeyPrivateKeyId;
     const organizationId = walletProperties === null || walletProperties === void 0 ? void 0 : walletProperties.turnkeySubOrganizationId;
@@ -52,57 +52,81 @@ const exportCredential = ({ authToken, userEmail, wallet, environmentId, }) => _
         (turnkeyHDWalletId === undefined && privateKeyId === undefined)) {
         throw new DynamicError('Invalid token!');
     }
+    return {
+        connector,
+        organizationId,
+        privateKeyId,
+        turnkeyHDWalletId,
+    };
+};
+const extractExportBundle = ({ address, privateKeyId, activity, }) => {
+    var _a, _b, _c;
+    const exportWalletResult = address
+        ? (_a = activity.result) === null || _a === void 0 ? void 0 : _a.exportWalletAccountResult
+        : (_b = activity.result) === null || _b === void 0 ? void 0 : _b.exportWalletResult;
+    const result = privateKeyId
+        ? (_c = activity.result) === null || _c === void 0 ? void 0 : _c.exportPrivateKeyResult
+        : exportWalletResult;
+    return result === null || result === void 0 ? void 0 : result.exportBundle;
+};
+const exportCredential = ({ authToken, userEmail, wallet, environmentId, address, }) => __awaiter(void 0, void 0, void 0, function* () {
+    const { connector, turnkeyHDWalletId, privateKeyId, organizationId } = handleExportInitCheck({
+        authToken,
+        userEmail,
+        wallet,
+    });
     const turnkeyExportHandler = connector.getExportHandler();
     const targetPublicKey = turnkeyExportHandler.publicKey;
     if (!targetPublicKey) {
         throw new DynamicError('Must initialize export first');
     }
     // calls turnkey export api
+    let newActivity;
     if (turnkeyHDWalletId) {
-        const newActivity = yield turnkeyExportHandler.exportWallet({
+        newActivity = yield turnkeyExportHandler.exportWallet({
+            address,
             organizationId,
             walletId: turnkeyHDWalletId,
         });
-        const activityId = newActivity.id;
-        const res = yield exportEmbeddedWallet({
-            activityId,
-            environmentId,
-            userJwt: authToken,
-            walletId: wallet.id,
-        });
-        const exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
-        if (!exportBundle) {
-            throw new DynamicError('Invalid export response');
-        }
-        const injected = yield turnkeyExportHandler.verifyExportWallet(exportBundle);
-        return injected;
     }
     else if (privateKeyId) {
-        const newActivity = yield turnkeyExportHandler.exportPrivateKey({
+        newActivity = yield turnkeyExportHandler.exportPrivateKey({
             organizationId,
             privateKeyId,
         });
-        const activityId = newActivity.id;
+    }
+    const activityId = newActivity.id;
+    const activityStatus = newActivity.status;
+    let exportBundle;
+    if (activityStatus === 'ACTIVITY_STATUS_COMPLETED') {
+        exportBundle = extractExportBundle({
+            activity: newActivity,
+            address,
+            privateKeyId,
+        });
+    }
+    else {
         const res = yield exportEmbeddedWallet({
             activityId,
             environmentId,
-            userJwt: authToken,
-            walletId: wallet.id,
+            userJwt: authToken || '',
+            walletId: (wallet === null || wallet === void 0 ? void 0 : wallet.id) || '',
         });
-        const exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
-        if (!exportBundle) {
-            throw new DynamicError('Invalid export response');
-        }
-        const injected = yield turnkeyExportHandler.verifyExportPrivateKey(exportBundle);
-        return injected;
+        exportBundle = res === null || res === void 0 ? void 0 : res.exportBundle;
+    }
+    if (!exportBundle) {
+        throw new DynamicError('Invalid export response');
+    }
+    if (address || privateKeyId) {
+        return turnkeyExportHandler.verifyExportPrivateKey(exportBundle);
     }
-    throw new DynamicError('Invalid token!');
+    return turnkeyExportHandler.verifyExportWallet(exportBundle);
 });
 const cleanupExport = ({ wallet }) => __awaiter(void 0, void 0, void 0, function* () {
-    var _d;
+    var _b;
     const connector = wallet === null || wallet === void 0 ? void 0 : wallet.connector;
     // clear iframeStamper and its reference
-    (_d = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _d === void 0 ? void 0 : _d.clear();
+    (_b = connector === null || connector === void 0 ? void 0 : connector.getExportHandler()) === null || _b === void 0 ? void 0 : _b.clear();
 });
 
-export { cleanupExport, exportCredential, initExport };
+export { cleanupExport, exportCredential, extractExportBundle, initExport };

package/src/lib/views/LoginView/LoginView.cjs

@@ -12,6 +12,57 @@ var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 var WalletList = require('../WalletList/WalletList.cjs');
+require('../../events/dynamicEvents.cjs');
+require('@dynamic-labs/utils');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-book');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+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');
+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/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../context/QrCodeContext/QrCodeContext.cjs');
+var Typography = require('../../components/Typography/Typography.cjs');
+require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('i18next');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('formik');
+require('../../components/IconButton/IconButton.cjs');
+require('../../components/Alert/Alert.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
 var LoginEmailForm = require('./sections/EmailSignInSection/LoginEmailForm.cjs');
 var WalletSignInSection = require('./sections/WalletSignInSection/WalletSignInSection.cjs');
 var SocialSignInSection = require('./sections/SocialSignInSection/SocialSignInSection.cjs');
@@ -45,17 +96,19 @@ const LoginView = () => {
     const numOfWallets = ((_a = logingViewSections.find((section) => section.type === sdkApi.SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
     const renderViewSections = React.useMemo(() => logingViewSections.map((viewSection, index) => {
         switch (viewSection.type) {
-            case 'separator':
+            case sdkApi.SdkViewSectionType.Separator:
                 return (jsxRuntime.jsx(Divider.Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
-            case 'email':
+            case sdkApi.SdkViewSectionType.Email:
                 return (jsxRuntime.jsx(LoginEmailForm.LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
-            case 'wallet':
+            case sdkApi.SdkViewSectionType.Wallet:
                 return (jsxRuntime.jsx(WalletSignInSection.WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
                         setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
-            case 'social':
+            case sdkApi.SdkViewSectionType.Social:
                 return (jsxRuntime.jsx(SocialSignInSection.SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
+            case sdkApi.SdkViewSectionType.Text:
+                return (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }, `${viewSection.type}_${index}`));
             default:
                 return null;
         }
@@ -63,9 +116,9 @@ const LoginView = () => {
     if (showWalletList) {
         return jsxRuntime.jsx(WalletList.WalletList, {});
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'login-with-email__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: classNames.classNames('login-with-email__container', {
-                    'login-with-email__container--error': Boolean(error),
-                }), children: jsxRuntime.jsx("div", { className: 'login-with-email__scroll', "data-testid": 'login-with-email-scroll', children: renderViewSections }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [error && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'login-view__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: classNames.classNames('login-view__container', {
+                    'login-view__container--error': Boolean(error),
+                }), children: jsxRuntime.jsx("div", { className: 'login-view__scroll', "data-testid": 'login-view-scroll', children: renderViewSections }) })] }));
 };
 
 exports.LoginView = LoginView;

package/src/lib/views/LoginView/LoginView.js

@@ -8,6 +8,57 @@ import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.j
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import { WalletList } from '../WalletList/WalletList.js';
+import '../../events/dynamicEvents.js';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-book';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+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 '@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/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../components/OverlayCard/OverlayCard.context.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../context/QrCodeContext/QrCodeContext.js';
+import { Typography } from '../../components/Typography/Typography.js';
+import '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'i18next';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import 'formik';
+import '../../components/IconButton/IconButton.js';
+import '../../components/Alert/Alert.js';
+import '@dynamic-labs/viem-utils';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
 import { LoginEmailForm } from './sections/EmailSignInSection/LoginEmailForm.js';
 import { WalletSignInSection } from './sections/WalletSignInSection/WalletSignInSection.js';
 import { SocialSignInSection } from './sections/SocialSignInSection/SocialSignInSection.js';
@@ -41,17 +92,19 @@ const LoginView = () => {
     const numOfWallets = ((_a = logingViewSections.find((section) => section.type === SdkViewSectionType.Wallet)) === null || _a === void 0 ? void 0 : _a.numOfItemsToDisplay) || 0;
     const renderViewSections = useMemo(() => logingViewSections.map((viewSection, index) => {
         switch (viewSection.type) {
-            case 'separator':
+            case SdkViewSectionType.Separator:
                 return (jsx(Divider, { text: viewSection.label }, `${viewSection.type}_${index}`));
-            case 'email':
+            case SdkViewSectionType.Email:
                 return (jsx(LoginEmailForm, { onSubmit: () => setIsLoading(true), onSubmitError: () => setIsLoading(false), isLoading: isLoading }, `${viewSection.type}_${index}`));
-            case 'wallet':
+            case SdkViewSectionType.Wallet:
                 return (jsx(WalletSignInSection, { numberOfItensToShow: viewSection.numOfItemsToDisplay || 0, onSubmit: () => {
                         setView('login-with-email-or-wallet-full-wallet-list'); // this view is just to show the back button
                         setShowWalletList(true);
                     }, isLoading: isLoading }, `${viewSection.type}_${index}`));
-            case 'social':
+            case SdkViewSectionType.Social:
                 return (jsx(SocialSignInSection, { collapsedLayout: numOfWallets > 1, sectionData: viewSection }, `${viewSection.type}_${index}`));
+            case SdkViewSectionType.Text:
+                return (jsx(Typography, { variant: 'body_normal', color: 'secondary', align: viewSection.alignment, className: 'login-view__text', children: viewSection.label }, `${viewSection.type}_${index}`));
             default:
                 return null;
         }
@@ -59,9 +112,9 @@ const LoginView = () => {
     if (showWalletList) {
         return jsx(WalletList, {});
     }
-    return (jsxs(Fragment, { children: [error && (jsx(ErrorContainer, { className: 'login-with-email__error-container', withIcon: false, children: error })), jsx("div", { className: classNames('login-with-email__container', {
-                    'login-with-email__container--error': Boolean(error),
-                }), children: jsx("div", { className: 'login-with-email__scroll', "data-testid": 'login-with-email-scroll', children: renderViewSections }) })] }));
+    return (jsxs(Fragment, { children: [error && (jsx(ErrorContainer, { className: 'login-view__error-container', withIcon: false, children: error })), jsx("div", { className: classNames('login-view__container', {
+                    'login-view__container--error': Boolean(error),
+                }), children: jsx("div", { className: 'login-view__scroll', "data-testid": 'login-view-scroll', children: renderViewSections }) })] }));
 };
 
 export { LoginView };

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

@@ -31,7 +31,6 @@ require('../../context/CaptchaContext/CaptchaContext.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('../../context/MockContext/MockContext.cjs');
@@ -61,6 +60,7 @@ require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useWalletConnectorNetwork = require('../../utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
@@ -70,10 +70,9 @@ var UserAddress = require('../../components/UserAddress/UserAddress.cjs');
 var SelectNetworkButton = require('../../components/SelectNetworkButton/SelectNetworkButton.cjs');
 
 const NetworkNotSupported = () => {
-    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
+    const { network: walletConnectorNetwork } = useWalletConnectorNetwork.useWalletConnectorNetwork(walletConnector);
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
         shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected ||

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

@@ -27,7 +27,6 @@ import '../../context/CaptchaContext/CaptchaContext.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 '../../context/MockContext/MockContext.js';
@@ -57,6 +56,7 @@ import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useWalletConnectorNetwork } from '../../utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/Popper/Popper/Popper.js';
@@ -66,10 +66,9 @@ import { UserAddress } from '../../components/UserAddress/UserAddress.js';
 import { SelectNetworkButton } from '../../components/SelectNetworkButton/SelectNetworkButton.js';
 
 const NetworkNotSupported = () => {
-    const { onboardingImageUrl, selectedWalletConnector: walletConnector, connectedWallets, primaryWallet, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
+    const { onboardingImageUrl, selectedWalletConnector: walletConnector, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
     const { t } = useTranslation();
-    // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), { deps: [primaryWallet, walletConnector, connectedWallets] });
+    const { network: walletConnectorNetwork } = useWalletConnectorNetwork(walletConnector);
     const finishConnectAndSign = useConnectAndSign({
         shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected ||

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

@@ -31,7 +31,6 @@ require('../../context/CaptchaContext/CaptchaContext.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('../../context/MockContext/MockContext.cjs');
@@ -61,6 +60,7 @@ require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useWalletConnectorNetwork = require('../../utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
@@ -70,12 +70,9 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, selectedWalletConnector: walletConnector, connectedWallets, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { user, selectedWalletConnector: walletConnector, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
-    // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise.usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
-        deps: [walletConnector, connectedWallets],
-    });
+    const { network: walletConnectorNetwork } = useWalletConnectorNetwork.useWalletConnectorNetwork(walletConnector);
     const finishConnectAndSign = useConnectAndSign.useConnectAndSign({
         shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected ||

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

@@ -27,7 +27,6 @@ import '../../context/CaptchaContext/CaptchaContext.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 '../../context/MockContext/MockContext.js';
@@ -57,6 +56,7 @@ import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useWalletConnectorNetwork } from '../../utils/hooks/useWalletConnectorNetwork/useWalletConnectorNetwork.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
 import '../../components/Popper/Popper/Popper.js';
@@ -66,12 +66,9 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 //   as the wallet does not support programmatic network change.
 const NetworkNotSupportedSwitchManual = () => {
     var _a, _b;
-    const { user, selectedWalletConnector: walletConnector, connectedWallets, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
+    const { user, selectedWalletConnector: walletConnector, isFullyConnected, setShowAuthFlow, bridgeChainsToConnect, } = useInternalDynamicContext();
     const { t } = useTranslation();
-    // Refresh selectedWalletConnector network when primaryWallet or connectedWallets updates
-    const { data: walletConnectorNetwork } = usePromise(() => walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(), {
-        deps: [walletConnector, connectedWallets],
-    });
+    const { network: walletConnectorNetwork } = useWalletConnectorNetwork(walletConnector);
     const finishConnectAndSign = useConnectAndSign({
         shouldCallCallback: false,
         shouldUpdateWallets: !isFullyConnected ||

package/src/lib/views/WalletGroupView/WalletGroupView.cjs

@@ -3,19 +3,88 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var walletBook = require('@dynamic-labs/wallet-book');
 var SelectWalletChainLayout = require('../../components/SelectWalletChainLayout/SelectWalletChainLayout.cjs');
 var WalletGroupContext = require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../events/dynamicEvents.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('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+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');
+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');
+var useWalletItemActions = require('../../utils/hooks/useWalletItemActions/useWalletItemActions.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');
+var Divider = require('../../components/Divider/Divider.cjs');
+require('../../context/FooterAnimationContext/index.cjs');
+require('../../context/QrCodeContext/QrCodeContext.cjs');
+require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../context/LoadingContext/LoadingContext.cjs');
+require('qrcode');
+require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var WalletGroupItem = require('./components/WalletGroupItem/WalletGroupItem.cjs');
+var HardwareWalletToggle = require('./components/HardwareWalletToggle/HardwareWalletToggle.cjs');
 
+const hardwareWallets = ['phantomledger'];
+const isHardwareWallet = (wallet) => hardwareWallets.includes(wallet.key);
 const WalletGroupView = () => {
     var _a;
     const { selectedWalletGroup } = WalletGroupContext.useWalletGroupContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    const [isHardwareWalletEnabled, setIsHardwareWalletEnabled] = React.useState(false);
     if (!selectedWalletGroup)
         throw new Error('Could not access WalletGroup view without selected group');
     const walletBookData = walletBook.getWalletGroup(walletBook$1, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
-    return (jsxRuntime.jsx(SelectWalletChainLayout.SelectWalletChainLayout, { HeaderIcon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }), children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { wallet: wallet }, `${wallet.key}_${index}`))) }));
+    const wallets = selectedWalletGroup.groupedWallets.filter((wallet) => !isHardwareWallet(wallet));
+    const hardwareWallet = selectedWalletGroup.groupedWallets.find(isHardwareWallet);
+    const isHardwareWalletPresent = Boolean(hardwareWallet);
+    return (jsxRuntime.jsx(SelectWalletChainLayout.SelectWalletChainLayout, { HeaderIcon: jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }), children: jsxRuntime.jsxs("div", { className: 'wallet-group__list', children: [isHardwareWalletPresent && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HardwareWalletToggle.HardwareWalletToggle, { checked: isHardwareWalletEnabled, onChecked: setIsHardwareWalletEnabled }), jsxRuntime.jsx(Divider.Divider, {})] })), jsxRuntime.jsx("div", { className: 'select-wallet-chain-layout__list', children: wallets.map((wallet, index) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { wallet: wallet, onClick: () => {
+                            if (isHardwareWalletEnabled && hardwareWallet) {
+                                handleWalletItemClick(hardwareWallet);
+                                return;
+                            }
+                            handleWalletItemClick(wallet);
+                        } }, `${wallet.key}_${index}`))) })] }) }));
 };
 
 exports.WalletGroupView = WalletGroupView;

package/src/lib/views/WalletGroupView/WalletGroupView.js

@@ -1,17 +1,86 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useWalletBookContext, getWalletGroup, WalletIcon } from '@dynamic-labs/wallet-book';
 import { SelectWalletChainLayout } from '../../components/SelectWalletChainLayout/SelectWalletChainLayout.js';
 import { useWalletGroupContext } from '../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../events/dynamicEvents.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 '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+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 '@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 { useWalletItemActions } from '../../utils/hooks/useWalletItemActions/useWalletItemActions.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 { Divider } from '../../components/Divider/Divider.js';
+import '../../context/FooterAnimationContext/index.js';
+import '../../context/QrCodeContext/QrCodeContext.js';
+import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../context/LoadingContext/LoadingContext.js';
+import 'qrcode';
+import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/viem-utils';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { WalletGroupItem } from './components/WalletGroupItem/WalletGroupItem.js';
+import { HardwareWalletToggle } from './components/HardwareWalletToggle/HardwareWalletToggle.js';
 
+const hardwareWallets = ['phantomledger'];
+const isHardwareWallet = (wallet) => hardwareWallets.includes(wallet.key);
 const WalletGroupView = () => {
     var _a;
     const { selectedWalletGroup } = useWalletGroupContext();
     const { walletBook } = useWalletBookContext();
+    const { handleWalletItemClick } = useWalletItemActions();
+    const [isHardwareWalletEnabled, setIsHardwareWalletEnabled] = useState(false);
     if (!selectedWalletGroup)
         throw new Error('Could not access WalletGroup view without selected group');
     const walletBookData = getWalletGroup(walletBook, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
-    return (jsx(SelectWalletChainLayout, { HeaderIcon: jsx(WalletIcon, { walletKey: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }), children: selectedWalletGroup.groupedWallets.map((wallet, index) => (jsx(WalletGroupItem, { wallet: wallet }, `${wallet.key}_${index}`))) }));
+    const wallets = selectedWalletGroup.groupedWallets.filter((wallet) => !isHardwareWallet(wallet));
+    const hardwareWallet = selectedWalletGroup.groupedWallets.find(isHardwareWallet);
+    const isHardwareWalletPresent = Boolean(hardwareWallet);
+    return (jsx(SelectWalletChainLayout, { HeaderIcon: jsx(WalletIcon, { walletKey: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }), children: jsxs("div", { className: 'wallet-group__list', children: [isHardwareWalletPresent && (jsxs(Fragment, { children: [jsx(HardwareWalletToggle, { checked: isHardwareWalletEnabled, onChecked: setIsHardwareWalletEnabled }), jsx(Divider, {})] })), jsx("div", { className: 'select-wallet-chain-layout__list', children: wallets.map((wallet, index) => (jsx(WalletGroupItem, { wallet: wallet, onClick: () => {
+                            if (isHardwareWalletEnabled && hardwareWallet) {
+                                handleWalletItemClick(hardwareWallet);
+                                return;
+                            }
+                            handleWalletItemClick(wallet);
+                        } }, `${wallet.key}_${index}`))) })] }) }));
 };
 
 export { WalletGroupView };