@dynamic-labs/sdk-react-core 0.18.0-RC.0 → 0.18.0-RC.10

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs

@@ -8,7 +8,6 @@ require('react');
 var Typography = require('../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
@@ -17,6 +16,7 @@ var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
@@ -31,6 +31,7 @@ require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
@@ -42,7 +43,6 @@ require('../Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var TosAndPp = require('../TosAndPp/TosAndPp.cjs');
 var PinField = require('../PinField/PinField.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
 var shortenEmail = require('../../shared/utils/functions/shortenEmail/shortenEmail.cjs');
@@ -51,9 +51,9 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail.shortenEmail(email) })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }))] })));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -9,8 +9,6 @@ type OtpVerificationLayoutProps = {
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;
-    privacyPolicyUrl?: string;
-    termsOfServiceUrl?: string;
 };
 export declare const OTPVerificationView: FC<OtpVerificationLayoutProps>;
 export {};

package/src/lib/components/OTPVerificationView/OTPVerificationView.js

@@ -4,7 +4,6 @@ import 'react';
 import { Typography } from '../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
@@ -13,6 +12,7 @@ import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-a
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -27,6 +27,7 @@ import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
@@ -38,7 +39,6 @@ import '../Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { TosAndPp } from '../TosAndPp/TosAndPp.js';
 import { PinField } from '../PinField/PinField.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
 import { shortenEmail } from '../../shared/utils/functions/shortenEmail/shortenEmail.js';
@@ -47,9 +47,9 @@ import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, displayPoweredByDynamic = false, }) => {
     const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: shortenEmail(email) })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) }))] })));
 };
 
 export { OTPVerificationView };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export type OptionsSwitcherOption = {
     key: string;
     label?: string;
@@ -8,10 +8,10 @@ export type OptionsSwitcherClassNames = {
     buttonClassName?: string;
     rootClassName?: string;
 };
-export type OptionsSwitcherProps = {
-    onChange?: (key: string) => void;
+export type OptionsSwitcherProps<T> = {
+    onChange?: (key: T) => void;
     options?: OptionsSwitcherOption[];
-    value?: string;
+    value?: T;
 };
-export type Props = OptionsSwitcherClassNames & OptionsSwitcherProps;
-export declare const OptionsSwitcher: React.FC<Props>;
+export type Props<T> = OptionsSwitcherClassNames & OptionsSwitcherProps<T>;
+export declare const OptionsSwitcher: <T extends string>({ onChange, value, options, rootClassName, activeButtonClassName, buttonClassName, }: Props<T>) => JSX.Element;

package/src/lib/components/OverlayCard/OverlayCard.cjs

@@ -13,16 +13,17 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/components/OverlayCard/OverlayCard.js

@@ -9,16 +9,17 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';

package/src/lib/components/Portal/Portal.cjs

@@ -13,16 +13,17 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
@@ -71,7 +72,7 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
                     onBackdropClick(e);
                 }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
                 // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsxRuntime.jsx("div", Object.assign({ className: 'modal', style: { zIndex } }, { children: children }))] })));
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsxRuntime.jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const modalRootElementRef = useElementById.useElementById(elementId);

package/src/lib/components/Portal/Portal.js

@@ -9,16 +9,17 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
@@ -63,7 +64,7 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
                     onBackdropClick(e);
                 }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
                 // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsx("div", Object.assign({ className: 'modal', style: { zIndex } }, { children: children }))] })));
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const modalRootElementRef = useElementById(elementId);

package/src/lib/components/Search/Search.cjs

@@ -7,6 +7,6 @@ require('react');
 var search = require('../../assets/search.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxRuntime.jsxs("label", Object.assign({ htmlFor: id, className: classNames.classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsxRuntime.jsx(search.ReactComponent, {}) })), jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames.classNames('search__input', className) }), value.length > 0 && (jsxRuntime.jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxRuntime.jsxs("label", Object.assign({ htmlFor: id, className: classNames.classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsxRuntime.jsx(search.ReactComponent, {}) })), jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames.classNames('search__input', className), "data-testid": 'Search' }), value.length > 0 && (jsxRuntime.jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
 
 exports.Search = Search;

package/src/lib/components/Search/Search.js

@@ -3,6 +3,6 @@ import 'react';
 import { ReactComponent as SvgSearch } from '../../assets/search.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxs("label", Object.assign({ htmlFor: id, className: classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsx(SvgSearch, {}) })), jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames('search__input', className) }), value.length > 0 && (jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
+const Search = ({ className = '', id, label, type, onChange, onBlur, name, value, onClickClear, }) => (jsxs("label", Object.assign({ htmlFor: id, className: classNames('search__container', value ? 'search__container--active' : undefined) }, { children: [jsx("div", Object.assign({ className: 'search-icon__container' }, { children: jsx(SvgSearch, {}) })), jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, className: classNames('search__input', className), "data-testid": 'Search' }), value.length > 0 && (jsx("button", Object.assign({ type: 'button', onClick: onClickClear, className: 'search__button--clear' }, { children: "Clear" })))] })));
 
 export { Search };

package/src/lib/components/Select/Select.cjs

@@ -7,7 +7,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -15,6 +14,7 @@ var arrowDown = require('../../shared/assets/arrow-down.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');

package/src/lib/components/Select/Select.js

@@ -3,7 +3,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useLayoutEffect } from 'react';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
@@ -11,6 +10,7 @@ import { ReactComponent as SvgArrowDown } from '../../shared/assets/arrow-down.j
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsxRuntime.jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+
+exports.SelectWalletChainLayout = SelectWalletChainLayout;

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

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
 type SelectWalletChainLayoutProps = {
     HeaderIcon?: ReactElement;
-    onClose?: () => void;
-    onBack?: () => void;
 };
 export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
 export {};

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+
+export { SelectWalletChainLayout };

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -8,7 +8,6 @@ var walletBook = require('@dynamic-labs/wallet-book');
 var IconButton = require('../IconButton/IconButton.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -17,6 +16,7 @@ var chevronLeft = require('../../shared/assets/chevron-left.cjs');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -4,7 +4,6 @@ import { WalletIcon } from '@dynamic-labs/wallet-book';
 import { IconButton } from '../IconButton/IconButton.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
@@ -13,6 +12,7 @@ import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-le
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.cjs

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 require('@dynamic-labs/sdk-api');
 require('../../../../shared/logger.cjs');
-require('../../../../config/LSSuffix.cjs');
 var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('react');
 require('@dynamic-labs/iconic');

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api';
 import '../../../../shared/logger.js';
-import '../../../../config/LSSuffix.js';
 import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import 'react';
 import '@dynamic-labs/iconic';

package/src/lib/components/ShadowDOM/utils.cjs

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');
@@ -14,6 +13,7 @@ require('@dynamic-labs/wallet-book');
 var isSSR = require('../../shared/utils/functions/isSSR/isSSR.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 

package/src/lib/components/ShadowDOM/utils.js

@@ -1,6 +1,5 @@
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';
@@ -10,6 +9,7 @@ import '@dynamic-labs/wallet-book';
 import { isSSR } from '../../shared/utils/functions/isSSR/isSSR.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 

package/src/lib/components/Spinner/spinner.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -14,6 +13,7 @@ var spinner = require('../../shared/assets/spinner.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');

package/src/lib/components/Spinner/spinner.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
@@ -10,6 +9,7 @@ import { ReactComponent as SvgSpinner } from '../../shared/assets/spinner.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';

package/src/lib/components/Step/Step.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var check = require('../../shared/assets/check.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+
+const Step = ({ children, className, icon, checked = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', className) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__check-mark' }, { children: jsxRuntime.jsx(check.ReactComponent, {}) })))] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+
+exports.Step = Step;

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

@@ -1,7 +1,8 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
 type StepProps = {
     icon?: ReactElement;
-    active?: boolean;
+    checked?: boolean;
+    className?: string;
 };
 export declare const Step: FC<PropsWithChildren<StepProps>>;
 export {};

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

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { Icon } from '../Icon/Icon.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+
+const Step = ({ children, className, icon, checked = false, }) => (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsx(Icon, Object.assign({ className: 'step__check-mark' }, { children: jsx(SvgCheck, {}) })))] })), jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+
+export { Step };

package/src/lib/components/Stepper/Stepper.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Divider = require('../Divider/Divider.cjs');
+
+const Stepper = ({ children }) => (jsxRuntime.jsx("div", Object.assign({ className: 'stepper' }, { children: React.Children.map(children, (step, index) => {
+        const divider = index === 0 ? undefined : jsxRuntime.jsx(Divider.Divider, { className: 'stepper__divider' });
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [divider, step] }));
+    }) })));
+
+exports.Stepper = Stepper;

package/src/lib/components/Stepper/Stepper.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Children } from 'react';
+import { Divider } from '../Divider/Divider.js';
+
+const Stepper = ({ children }) => (jsx("div", Object.assign({ className: 'stepper' }, { children: Children.map(children, (step, index) => {
+        const divider = index === 0 ? undefined : jsx(Divider, { className: 'stepper__divider' });
+        return (jsxs(Fragment, { children: [divider, step] }));
+    }) })));
+
+export { Stepper };

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

@@ -7,13 +7,13 @@ var React = require('react');
 var Typography = require('../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 var index = require('../../shared/consts/index.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');

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

@@ -3,13 +3,13 @@ import { useMemo } from 'react';
 import { Typography } from '../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import { toolkitZIndex } from '../../shared/consts/index.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';

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

@@ -6,7 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
-require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
@@ -16,6 +15,7 @@ var isDisplayOrderPriorityForWeb3 = require('../../../shared/utils/functions/isD
 var isDisplayOrderPriorityForWeb2 = require('../../../shared/utils/functions/isDisplayOrderPriorityForWeb2/isDisplayOrderPriorityForWeb2.cjs');
 require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 var Switch = require('../../Switch/Switch.cjs');