@dynamic-labs/sdk-react-core 2.1.0-alpha.20 → 2.1.0-alpha.22

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -1,10 +1,10 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DynamicError, AccessBlockedError } from '@dynamic-labs/utils';
 import { dynamicEvents } from '../../events/dynamicEvents.js';
-import '@dynamic-labs/utils';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
@@ -28,6 +28,7 @@ import 'viem';
 import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
@@ -45,9 +46,6 @@ import '../../context/MockContext/MockContext.js';
 import '../../views/CollectUserDataView/useFields.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import 'zustand';
-import 'zustand/middleware';
-import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../context/FooterAnimationContext/index.js';
@@ -93,6 +91,7 @@ import '../../views/WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import { SignMessagePreview } from '../../components/SignMessagePreview/SignMessagePreview.js';
 
 const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
@@ -115,6 +114,23 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
             setShow(false);
         },
     });
+    const errorText = useMemo(() => {
+        if (!signMessageError) {
+            return undefined;
+        }
+        if (signMessageError instanceof DynamicError) {
+            return signMessageError.message;
+        }
+        try {
+            return getProperErrorMessage(signMessageError);
+        }
+        catch (e) {
+            if (e instanceof AccessBlockedError) {
+                setView('access-blocked');
+            }
+            return;
+        }
+    }, [signMessageError, setView]);
     const handleOnModalUnmount = useCallback(() => {
         if (signedMessage) {
             return onSignMessage(signedMessage);
@@ -141,7 +157,7 @@ const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message,
     const closeButton = (jsx(IconButton, { type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading, children: jsx(SvgClose, {}) }));
     return (jsx(Portal, { handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-sign-message', transitionEvents: {
             onUnmount: handleOnModalUnmount,
-        }, children: jsx(Modal, { children: jsxs(ModalCard, { children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'sign-message-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', copykey: 'dyn_sign_message.title', children: t('dyn_sign_message.title') }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: signMessageError && (jsx("div", { className: 'sign-message-confirmation__error', children: jsx(ErrorContainer, { children: getProperErrorMessage(signMessageError) }) })) }), jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsx("div", { className: 'sign-message-confirmation__message', children: jsx(SignMessagePreview, { message: message.toString() }) })] }), jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsx(TypographyButton, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_sign_message.cancel_button', children: t('dyn_sign_message.cancel_button') }), jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleMessageSign, expanded: true, loading: isLoading, copykey: 'dyn_sign_message.sign_button', dataTestId: 'sign-button', children: t('dyn_sign_message.sign_button') })] }), jsx(NeedHelpSection, {}), jsx(PoweredByDynamic, {})] })] }) }) }));
+        }, children: jsx(Modal, { children: jsxs(ModalCard, { children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignCircle, Object.assign({}, props)) })), iconSize: 64, isSpinning: true }) }), jsx(PasskeyCreatedSuccessBanner, {}), jsxs("div", { className: 'sign-message-confirmation__body', children: [jsx(Typography, { variant: 'title', color: 'primary', className: 'sign-message-confirmation__title', copykey: 'dyn_sign_message.title', children: t('dyn_sign_message.title') }), jsx(AnimatePresence, { animationComponent: jsx(VerticalDrawerTransition, {}), children: signMessageError && (jsx("div", { className: 'sign-message-confirmation__error', children: jsx(ErrorContainer, { children: errorText }) })) }), jsxs("div", { className: 'sign-message-confirmation__message-container', children: [jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }), jsx("div", { className: 'sign-message-confirmation__message', children: jsx(SignMessagePreview, { message: message.toString() }) })] }), jsxs("div", { className: 'sign-message-confirmation__actions', children: [jsx(TypographyButton, { buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', disabled: isLoading, copykey: 'dyn_sign_message.cancel_button', children: t('dyn_sign_message.cancel_button') }), jsx(TypographyButton, { buttonVariant: 'primary', buttonPadding: 'large', onClick: handleMessageSign, expanded: true, loading: isLoading, copykey: 'dyn_sign_message.sign_button', dataTestId: 'sign-button', children: t('dyn_sign_message.sign_button') })] }), jsx(NeedHelpSection, {}), jsx(PoweredByDynamic, {})] })] }) }) }));
 };
 
 export { SignMessageConfirmationModal };

package/src/lib/modals/SignMessageConfirmationModal/getProperErrorMessage.cjs

@@ -3,6 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('@dynamic-labs/utils');
+var errors = require('../../utils/constants/errors.cjs');
+
 const TurnkeyErrorMap = {
     0: 'Operation was canceled.',
     16: 'Invalid Passkey signature. Select the passkey for this account and device.',
@@ -30,6 +33,9 @@ const getProperErrorMessage = (originalError) => {
     }
     if ('cause' in originalError) {
         if (((_a = originalError === null || originalError === void 0 ? void 0 : originalError.cause) === null || _a === void 0 ? void 0 : _a.code) !== undefined) {
+            if (originalError.cause.code === errors.ACCESS_BLOCKED_ERROR_CODE) {
+                throw new utils.AccessBlockedError();
+            }
             return TurnkeyErrorMap[originalError.cause.code];
         }
         if (originalError.cause &&
@@ -40,6 +46,9 @@ const getProperErrorMessage = (originalError) => {
         }
     }
     if ('code' in originalError && originalError.code) {
+        if (originalError.code === errors.ACCESS_BLOCKED_ERROR_CODE) {
+            throw new utils.AccessBlockedError();
+        }
         return TurnkeyErrorMap[originalError.code];
     }
     if ('error' in originalError &&

package/src/lib/modals/SignMessageConfirmationModal/getProperErrorMessage.js

@@ -1,4 +1,7 @@
 'use client'
+import { AccessBlockedError } from '@dynamic-labs/utils';
+import { ACCESS_BLOCKED_ERROR_CODE } from '../../utils/constants/errors.js';
+
 const TurnkeyErrorMap = {
     0: 'Operation was canceled.',
     16: 'Invalid Passkey signature. Select the passkey for this account and device.',
@@ -26,6 +29,9 @@ const getProperErrorMessage = (originalError) => {
     }
     if ('cause' in originalError) {
         if (((_a = originalError === null || originalError === void 0 ? void 0 : originalError.cause) === null || _a === void 0 ? void 0 : _a.code) !== undefined) {
+            if (originalError.cause.code === ACCESS_BLOCKED_ERROR_CODE) {
+                throw new AccessBlockedError();
+            }
             return TurnkeyErrorMap[originalError.cause.code];
         }
         if (originalError.cause &&
@@ -36,6 +42,9 @@ const getProperErrorMessage = (originalError) => {
         }
     }
     if ('code' in originalError && originalError.code) {
+        if (originalError.code === ACCESS_BLOCKED_ERROR_CODE) {
+            throw new AccessBlockedError();
+        }
         return TurnkeyErrorMap[originalError.code];
     }
     if ('error' in originalError &&

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -28,6 +28,7 @@ require('viem');
 require('viem/chains');
 require('../../config/ApiEndpoint.cjs');
 require('../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -42,9 +43,6 @@ require('../../context/MockContext/MockContext.cjs');
 require('../../views/CollectUserDataView/useFields.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-require('zustand');
-require('zustand/middleware');
-require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 require('react-i18next');
 require('../../context/FooterAnimationContext/index.cjs');
@@ -79,6 +77,7 @@ require('../../views/WalletList/WalletList.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 
 const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -24,6 +24,7 @@ import 'viem';
 import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
@@ -38,9 +39,6 @@ import '../../context/MockContext/MockContext.js';
 import '../../views/CollectUserDataView/useFields.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import 'zustand';
-import 'zustand/middleware';
-import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import 'react-i18next';
 import '../../context/FooterAnimationContext/index.js';
@@ -75,6 +73,7 @@ import '../../views/WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 
 const TransactionConfirmationModal = ({ title, onReject, onTransactionResponseSuccess, transaction, copykey, walletConnector, }) => {
     usePreventPageScroll(true);

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.cjs

@@ -27,6 +27,7 @@ require('viem');
 require('viem/chains');
 require('../../config/ApiEndpoint.cjs');
 require('../../locale/locale.cjs');
+require('@dynamic-labs/store');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
@@ -41,9 +42,6 @@ require('../../context/MockContext/MockContext.cjs');
 require('../../views/CollectUserDataView/useFields.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
-require('zustand');
-require('zustand/middleware');
-require('zustand/react/shallow');
 require('@dynamic-labs/rpc-providers');
 require('react-i18next');
 require('../../context/FooterAnimationContext/index.cjs');
@@ -79,6 +77,7 @@ require('../../views/WalletList/WalletList.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 require('../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
+require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 
 const UserFieldEditorModal = (_a) => {
     var { onCancel, onSubmit, fields } = _a, textOptions = _tslib.__rest(_a, ["onCancel", "onSubmit", "fields"]);

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.js

@@ -23,6 +23,7 @@ import 'viem';
 import 'viem/chains';
 import '../../config/ApiEndpoint.js';
 import '../../locale/locale.js';
+import '@dynamic-labs/store';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
@@ -37,9 +38,6 @@ import '../../context/MockContext/MockContext.js';
 import '../../views/CollectUserDataView/useFields.js';
 import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
-import 'zustand';
-import 'zustand/middleware';
-import 'zustand/react/shallow';
 import '@dynamic-labs/rpc-providers';
 import 'react-i18next';
 import '../../context/FooterAnimationContext/index.js';
@@ -75,6 +73,7 @@ import '../../views/WalletList/WalletList.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 import '../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
+import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 
 const UserFieldEditorModal = (_a) => {
     var { onCancel, onSubmit, fields } = _a, textOptions = __rest(_a, ["onCancel", "onSubmit", "fields"]);

package/src/lib/shared/assets/access-blocked.cjs

@@ -0,0 +1,102 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _g, _defs;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgAccessBlocked = function SvgAccessBlocked(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 327,
+    height: 112,
+    viewBox: "0 0 327 112",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#access-blocked_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 164,
+    cy: 114,
+    r: 114,
+    fill: "url(#access-blocked_svg__b)",
+    fillOpacity: 0.12
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 220.352,
+    cy: 29.265,
+    r: 15.729,
+    transform: "rotate(15 220.352 29.265)",
+    fill: "#4779FF"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M223.594 23.62a1.573 1.573 0 1 0-3.038-.815l-1.629 6.078a1.573 1.573 0 1 0 3.039.814l1.628-6.077ZM219.225 33.848a1.573 1.573 0 0 0-.814 3.039l.015.004a1.574 1.574 0 0 0 .814-3.039l-.015-.004Z",
+    fill: "#F9F9FB"
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#access-blocked_svg__c)",
+    fill: "#4779FF"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M101.972 36.04a8 8 0 0 1 9.798 5.657l-2.897.777a5 5 0 0 0-9.66 2.588l-2.897.776a8 8 0 0 1 5.656-9.797ZM118.498 47.487a5.333 5.333 0 0 0-6.532-3.772l-14.81 3.969a5.333 5.333 0 0 0-3.772 6.532l1.898 7.084a5.333 5.333 0 0 0 6.532 3.77l14.811-3.968a5.334 5.334 0 0 0 3.771-6.532l-1.898-7.083Z"
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M164.943 32.064a6.216 6.216 0 0 0-1.779 0c-.681.098-1.313.337-1.816.527l-.135.05-16.68 6.256-.407.152c-1.922.718-3.61 1.348-4.909 2.493a9.336 9.336 0 0 0-2.553 3.683c-.616 1.62-.613 3.421-.61 5.473V66.01c0 8.793 4.783 16.125 9.953 21.51 5.204 5.422 11.159 9.252 14.307 11.089l.128.075c.574.337 1.32.775 2.307.987a6.619 6.619 0 0 0 2.609 0c.987-.212 1.733-.65 2.307-.987l.128-.075c3.148-1.837 9.103-5.667 14.307-11.088 5.17-5.386 9.953-12.718 9.953-21.511V50.698c.003-2.052.006-3.854-.611-5.473a9.333 9.333 0 0 0-2.552-3.683c-1.3-1.145-2.987-1.775-4.909-2.493l-.407-.152-16.68-6.255-.135-.05c-.503-.19-1.136-.43-1.816-.528Zm-3.344 46.703c-1.172-2.936-2.026-7.051-2.236-11.797h9.298c-.21 4.746-1.064 8.861-2.236 11.797-.683 1.709-1.393 2.816-1.971 3.428-.198.21-.346.328-.442.393a2.703 2.703 0 0 1-.442-.392c-.578-.613-1.288-1.72-1.971-3.429Zm0-28.13c-1.208 3.025-2.078 7.301-2.253 12.228h9.332c-.175-4.927-1.045-9.203-2.253-12.227-.683-1.709-1.393-2.816-1.971-3.429a2.703 2.703 0 0 0-.442-.392 2.703 2.703 0 0 0-.442.392c-.578.613-1.288 1.72-1.971 3.429Zm-15.106 12.228h8.746c.21-6.38 1.506-11.989 3.423-15.668-6.57 2.184-11.466 8.283-12.169 15.668Zm.046 4.105h8.716c.253 6.201 1.533 11.642 3.407 15.238-6.442-2.141-11.274-8.046-12.123-15.238Zm34.946 0h-8.716c-.253 6.201-1.533 11.642-3.407 15.238 6.442-2.141 11.275-8.046 12.123-15.238Zm.133-2.267v.065-.131.066Zm-8.833-1.838h8.746c-.703-7.385-5.599-13.484-12.169-15.668 1.917 3.68 3.213 9.289 3.423 15.668Zm-8.909 19.795c0-.001.007-.004.023-.008a.077.077 0 0 1-.023.008Zm.25-.008a.064.064 0 0 1 .022.008s-.007-.001-.022-.008Zm.022-35.907c0 .001-.007.004-.023.008a.077.077 0 0 1 .023-.008Zm-.249.008c-.016-.004-.023-.007-.023-.008 0 0 .007.001.023.008Z",
+    fill: "#4779FF"
+  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "access-blocked_svg__a"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 327,
+    height: 112,
+    rx: 12,
+    fill: "#fff"
+  })), /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "access-blocked_svg__c"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(-15 188.268 -307.493)",
+    d: "M0 0h32v32H0z"
+  })), /*#__PURE__*/React__namespace.createElement("linearGradient", {
+    id: "access-blocked_svg__b",
+    x1: 164,
+    y1: 0,
+    x2: 164,
+    y2: 93.5,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__namespace.createElement("stop", {
+    stopColor: "#4779FF"
+  }), /*#__PURE__*/React__namespace.createElement("stop", {
+    offset: 1,
+    stopColor: "#4779FF",
+    stopOpacity: 0
+  })))));
+};
+
+exports.ReactComponent = SvgAccessBlocked;

package/src/lib/shared/assets/access-blocked.js

@@ -0,0 +1,78 @@
+'use client'
+import * as React from 'react';
+
+var _g, _defs;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgAccessBlocked = function SvgAccessBlocked(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 327,
+    height: 112,
+    viewBox: "0 0 327 112",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _g || (_g = /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#access-blocked_svg__a)"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 164,
+    cy: 114,
+    r: 114,
+    fill: "url(#access-blocked_svg__b)",
+    fillOpacity: 0.12
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: 220.352,
+    cy: 29.265,
+    r: 15.729,
+    transform: "rotate(15 220.352 29.265)",
+    fill: "#4779FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M223.594 23.62a1.573 1.573 0 1 0-3.038-.815l-1.629 6.078a1.573 1.573 0 1 0 3.039.814l1.628-6.077ZM219.225 33.848a1.573 1.573 0 0 0-.814 3.039l.015.004a1.574 1.574 0 0 0 .814-3.039l-.015-.004Z",
+    fill: "#F9F9FB"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#access-blocked_svg__c)",
+    fill: "#4779FF"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M101.972 36.04a8 8 0 0 1 9.798 5.657l-2.897.777a5 5 0 0 0-9.66 2.588l-2.897.776a8 8 0 0 1 5.656-9.797ZM118.498 47.487a5.333 5.333 0 0 0-6.532-3.772l-14.81 3.969a5.333 5.333 0 0 0-3.772 6.532l1.898 7.084a5.333 5.333 0 0 0 6.532 3.77l14.811-3.968a5.334 5.334 0 0 0 3.771-6.532l-1.898-7.083Z"
+  })), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M164.943 32.064a6.216 6.216 0 0 0-1.779 0c-.681.098-1.313.337-1.816.527l-.135.05-16.68 6.256-.407.152c-1.922.718-3.61 1.348-4.909 2.493a9.336 9.336 0 0 0-2.553 3.683c-.616 1.62-.613 3.421-.61 5.473V66.01c0 8.793 4.783 16.125 9.953 21.51 5.204 5.422 11.159 9.252 14.307 11.089l.128.075c.574.337 1.32.775 2.307.987a6.619 6.619 0 0 0 2.609 0c.987-.212 1.733-.65 2.307-.987l.128-.075c3.148-1.837 9.103-5.667 14.307-11.088 5.17-5.386 9.953-12.718 9.953-21.511V50.698c.003-2.052.006-3.854-.611-5.473a9.333 9.333 0 0 0-2.552-3.683c-1.3-1.145-2.987-1.775-4.909-2.493l-.407-.152-16.68-6.255-.135-.05c-.503-.19-1.136-.43-1.816-.528Zm-3.344 46.703c-1.172-2.936-2.026-7.051-2.236-11.797h9.298c-.21 4.746-1.064 8.861-2.236 11.797-.683 1.709-1.393 2.816-1.971 3.428-.198.21-.346.328-.442.393a2.703 2.703 0 0 1-.442-.392c-.578-.613-1.288-1.72-1.971-3.429Zm0-28.13c-1.208 3.025-2.078 7.301-2.253 12.228h9.332c-.175-4.927-1.045-9.203-2.253-12.227-.683-1.709-1.393-2.816-1.971-3.429a2.703 2.703 0 0 0-.442-.392 2.703 2.703 0 0 0-.442.392c-.578.613-1.288 1.72-1.971 3.429Zm-15.106 12.228h8.746c.21-6.38 1.506-11.989 3.423-15.668-6.57 2.184-11.466 8.283-12.169 15.668Zm.046 4.105h8.716c.253 6.201 1.533 11.642 3.407 15.238-6.442-2.141-11.274-8.046-12.123-15.238Zm34.946 0h-8.716c-.253 6.201-1.533 11.642-3.407 15.238 6.442-2.141 11.275-8.046 12.123-15.238Zm.133-2.267v.065-.131.066Zm-8.833-1.838h8.746c-.703-7.385-5.599-13.484-12.169-15.668 1.917 3.68 3.213 9.289 3.423 15.668Zm-8.909 19.795c0-.001.007-.004.023-.008a.077.077 0 0 1-.023.008Zm.25-.008a.064.064 0 0 1 .022.008s-.007-.001-.022-.008Zm.022-35.907c0 .001-.007.004-.023.008a.077.077 0 0 1 .023-.008Zm-.249.008c-.016-.004-.023-.007-.023-.008 0 0 .007.001.023.008Z",
+    fill: "#4779FF"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "access-blocked_svg__a"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: 327,
+    height: 112,
+    rx: 12,
+    fill: "#fff"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "access-blocked_svg__c"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    transform: "rotate(-15 188.268 -307.493)",
+    d: "M0 0h32v32H0z"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "access-blocked_svg__b",
+    x1: 164,
+    y1: 0,
+    x2: 164,
+    y2: 93.5,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#4779FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#4779FF",
+    stopOpacity: 0
+  })))));
+};
+
+export { SvgAccessBlocked as ReactComponent };

package/src/lib/shared/assets/index.d.ts

@@ -79,3 +79,4 @@ export { ReactComponent as WalletOutlineIcon } from './wallet-outline.svg';
 export { ReactComponent as WalletV2Icon } from './wallet-v2.svg';
 export { ReactComponent as WorkSuitcaseIcon } from './work-suitcase.svg';
 export { ReactComponent as MfaRecoveryIcon } from './mfa-recovery-icon.svg';
+export { ReactComponent as AccessBlockedIcon } from './access-blocked.svg';

package/src/lib/store/hooks/useStoreWithSelector/index.d.ts

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

package/src/lib/store/hooks/useStoreWithSelector/useStoreWithSelector.cjs

@@ -0,0 +1,31 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Custom hook that provides a slice of the store state based on a selector function.
+ *
+ * @template TState - The type of the store state.
+ * @template StateSlice - The type of the selected slice of the store state.
+ * @param {StoreApi<TState>} api - The store API object.
+ * @param {(state: TState) => StateSlice} selector - The selector function to extract the desired store slice.
+ * @returns {StateSlice} - The selected slice of the store state.
+ *
+ * @example
+ * const store = createStore(() => ({
+ *   count: 0,
+ * }))
+ *
+ * const count = useStoreWithSelector(store, ({ count }) => count);
+ */
+const useStoreWithSelector = (api, selector) => {
+    const getSnapshot = () => selector(api.getState());
+    const getServerSnapshot = () => selector(api.getInitialState());
+    const slice = React.useSyncExternalStore(api.subscribe, getSnapshot, getServerSnapshot);
+    return slice;
+};
+
+exports.useStoreWithSelector = useStoreWithSelector;

package/src/lib/store/hooks/useStoreWithSelector/useStoreWithSelector.d.ts

@@ -0,0 +1,2 @@
+import { StoreApi } from '@dynamic-labs/store';
+export declare const useStoreWithSelector: <TState extends object, StateSlice>(api: StoreApi<TState>, selector: (state: TState) => StateSlice) => StateSlice;

package/src/lib/store/hooks/useStoreWithSelector/useStoreWithSelector.js

@@ -0,0 +1,27 @@
+'use client'
+import { useSyncExternalStore } from 'react';
+
+/**
+ * Custom hook that provides a slice of the store state based on a selector function.
+ *
+ * @template TState - The type of the store state.
+ * @template StateSlice - The type of the selected slice of the store state.
+ * @param {StoreApi<TState>} api - The store API object.
+ * @param {(state: TState) => StateSlice} selector - The selector function to extract the desired store slice.
+ * @returns {StateSlice} - The selected slice of the store state.
+ *
+ * @example
+ * const store = createStore(() => ({
+ *   count: 0,
+ * }))
+ *
+ * const count = useStoreWithSelector(store, ({ count }) => count);
+ */
+const useStoreWithSelector = (api, selector) => {
+    const getSnapshot = () => selector(api.getState());
+    const getServerSnapshot = () => selector(api.getInitialState());
+    const slice = useSyncExternalStore(api.subscribe, getSnapshot, getServerSnapshot);
+    return slice;
+};
+
+export { useStoreWithSelector };

package/src/lib/store/hooks/useUser/useUser.cjs

@@ -3,13 +3,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var zustand = require('zustand');
-var shallow = require('zustand/react/shallow');
 var store = require('../../store.cjs');
+var useStoreWithSelector = require('../useStoreWithSelector/useStoreWithSelector.cjs');
 
 const useUser = () => {
     var _a;
-    const userFromStore = zustand.useStore(store.getStore(), shallow.useShallow((state) => state.user));
+    const userFromStore = useStoreWithSelector.useStoreWithSelector(store.getStore(), ({ user }) => user);
     // adding userWithMissingFields to avoid breaking changes for customer who consider that when we have a user,
     // it means that they already moved passed onboarding.
     // since we won't have onboarding jwt anymore, the idea is to just store the user in LS and either use the user state

package/src/lib/store/hooks/useUser/useUser.js

@@ -1,11 +1,10 @@
 'use client'
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
 import { getStore } from '../../store.js';
+import { useStoreWithSelector } from '../useStoreWithSelector/useStoreWithSelector.js';
 
 const useUser = () => {
     var _a;
-    const userFromStore = useStore(getStore(), useShallow((state) => state.user));
+    const userFromStore = useStoreWithSelector(getStore(), ({ user }) => user);
     // adding userWithMissingFields to avoid breaking changes for customer who consider that when we have a user,
     // it means that they already moved passed onboarding.
     // since we won't have onboarding jwt anymore, the idea is to just store the user in LS and either use the user state

package/src/lib/store/store.cjs

@@ -3,7 +3,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var createStore = require('./utils/createStore/createStore.cjs');
+var store$1 = require('@dynamic-labs/store');
+var localStorage$1 = require('../utils/constants/localStorage.cjs');
+require('../utils/constants/colors.cjs');
+require('../utils/constants/values.cjs');
 var syncLegacyStorage = require('./utils/syncLegacyStorage/syncLegacyStorage.cjs');
 
 let store;
@@ -13,11 +16,29 @@ const getStore = () => {
     }
     return store;
 };
-const initializeStore = (props) => {
+const initializeStore = ({ storageSuffix, } = {}) => {
     if (store) {
         return;
     }
-    store = syncLegacyStorage.syncLegacyStorage(createStore.createStore(props));
+    const persistName = storageSuffix
+        ? `${localStorage$1.STORE_STORAGE_KEY}_${storageSuffix}`
+        : localStorage$1.STORE_STORAGE_KEY;
+    const persist = store$1.createPersist({
+        name: persistName,
+        storage: getStorage(),
+    });
+    store = syncLegacyStorage.syncLegacyStorage(persist(store$1.createStore(() => ({
+        user: undefined,
+    }))));
+};
+const getStorage = () => {
+    if (typeof localStorage === 'undefined') {
+        return {
+            getItem: () => null,
+            setItem: () => { },
+        };
+    }
+    return window.localStorage;
 };
 
 exports.getStore = getStore;

package/src/lib/store/store.d.ts

@@ -1,13 +1,6 @@
-import { CreateStoreProps } from './utils/createStore';
-export declare const getStore: () => Omit<import("zustand").StoreApi<import("./types").Store>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<import("./types").Store, import("./types").Store>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => void | Promise<void>;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: import("./types").Store) => void) => () => void;
-        onFinishHydration: (fn: (state: import("./types").Store) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<import("./types").Store, import("./types").Store>>;
-    };
-};
-export declare const initializeStore: (props?: CreateStoreProps) => void;
+import { StoreApi } from '@dynamic-labs/store';
+import { SdkStore } from './types';
+export declare const getStore: () => StoreApi<SdkStore>;
+export declare const initializeStore: ({ storageSuffix, }?: {
+    storageSuffix?: string;
+}) => void;

package/src/lib/store/store.js

@@ -1,5 +1,8 @@
 'use client'
-import { createStore } from './utils/createStore/createStore.js';
+import { createPersist, createStore } from '@dynamic-labs/store';
+import { STORE_STORAGE_KEY } from '../utils/constants/localStorage.js';
+import '../utils/constants/colors.js';
+import '../utils/constants/values.js';
 import { syncLegacyStorage } from './utils/syncLegacyStorage/syncLegacyStorage.js';
 
 let store;
@@ -9,11 +12,29 @@ const getStore = () => {
     }
     return store;
 };
-const initializeStore = (props) => {
+const initializeStore = ({ storageSuffix, } = {}) => {
     if (store) {
         return;
     }
-    store = syncLegacyStorage(createStore(props));
+    const persistName = storageSuffix
+        ? `${STORE_STORAGE_KEY}_${storageSuffix}`
+        : STORE_STORAGE_KEY;
+    const persist = createPersist({
+        name: persistName,
+        storage: getStorage(),
+    });
+    store = syncLegacyStorage(persist(createStore(() => ({
+        user: undefined,
+    }))));
+};
+const getStorage = () => {
+    if (typeof localStorage === 'undefined') {
+        return {
+            getItem: () => null,
+            setItem: () => { },
+        };
+    }
+    return window.localStorage;
 };
 
 export { getStore, initializeStore };