@dynamic-labs/sdk-react-core 1.1.0 → 1.2.0-alpha.1

package/CHANGELOG.md

@@ -1,7 +1,37 @@
 
-## [1.1.0](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.25...v1.1.0) (2024-02-07)
+## [1.2.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v1.2.0-alpha.0...v1.2.0-alpha.1) (2024-02-09)
 
-Check out our changelog here: https://docs.dynamic.xyz/changelog/v1-1
+
+### Features
+
+* add FilterChain helper function ([#4632](https://github.com/dynamic-labs/DynamicAuth/issues/4632)) ([56d474b](https://github.com/dynamic-labs/DynamicAuth/commit/56d474bf50a566774179ae929c4587ef841809bc))
+* add recommendedWallets prop to DynamicContext ([10c79d2](https://github.com/dynamic-labs/DynamicAuth/commit/10c79d2d7d79b3acee52f2feac0ddb6ccb5d9465))
+* allow exporting embedded wallets key/seed using email auth session ([#4580](https://github.com/dynamic-labs/DynamicAuth/issues/4580)) ([7b7a826](https://github.com/dynamic-labs/DynamicAuth/commit/7b7a8265ff16057284a50046f2310e1abdca5e50))
+
+
+### Bug Fixes
+
+* fix the wallet list height ([#4651](https://github.com/dynamic-labs/DynamicAuth/issues/4651)) ([445be11](https://github.com/dynamic-labs/DynamicAuth/commit/445be110044aff2641cb2c8309c7b784d5498645))
+
+## [1.2.0-alpha.0](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.26...v1.2.0-alpha.0) (2024-02-09)
+
+
+### Features
+
+* add retry email otp in headless ([#4639](https://github.com/dynamic-labs/DynamicAuth/issues/4639)) ([70630e2](https://github.com/dynamic-labs/DynamicAuth/commit/70630e28e4b370581add65fc5f69c41c28346cc6))
+* add tabs to wallet list view ([#4619](https://github.com/dynamic-labs/DynamicAuth/issues/4619)) ([c552a8e](https://github.com/dynamic-labs/DynamicAuth/commit/c552a8ec9a484b6015e95e9b3b30cd1cd151a45b))
+
+
+### Bug Fixes
+
+* current wallet being clipped inside a circle ([#4470](https://github.com/dynamic-labs/DynamicAuth/issues/4470)) ([53149c6](https://github.com/dynamic-labs/DynamicAuth/commit/53149c658ccf73b5576f73e8863bab6e9e5f66a7))
+* hydration issues with ShadowDOM ([#4434](https://github.com/dynamic-labs/DynamicAuth/issues/4434)) ([032dae5](https://github.com/dynamic-labs/DynamicAuth/commit/032dae5036bc5b03095b0d3d41f8ab0a8a678dbb))
+* multi wallet disabled shows one chain even if both are enabled ([#4636](https://github.com/dynamic-labs/DynamicAuth/issues/4636)) ([b5baef3](https://github.com/dynamic-labs/DynamicAuth/commit/b5baef38dcceca7927508ef149c2573c9cb02ddf))
+* solana turnkey connector not refreshing account after session expiration ([#4625](https://github.com/dynamic-labs/DynamicAuth/issues/4625)) ([3e6b1f9](https://github.com/dynamic-labs/DynamicAuth/commit/3e6b1f97bb1ca8f70948678748176a77f05f5ef9))
+* use phantom injected when on in-app browser ([#4630](https://github.com/dynamic-labs/DynamicAuth/issues/4630)) ([b4fab5b](https://github.com/dynamic-labs/DynamicAuth/commit/b4fab5b935fc516c864c2e6eb39c946b18c8897f))
+* wait for sdkHasLoaded to process phantom redirect ([#4628](https://github.com/dynamic-labs/DynamicAuth/issues/4628)) ([5f68f65](https://github.com/dynamic-labs/DynamicAuth/commit/5f68f653652c6108bd62d4314974bca18eb683b1))
+
+## [1.1.0-alpha.26](https://github.com/dynamic-labs/DynamicAuth/compare/v1.1.0-alpha.25...v1.1.0-alpha.26) (2024-02-07)
 
 
 ### Features

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "1.1.0";
+var version = "1.2.0-alpha.1";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.52",
 	"@dynamic-labs/sdk-api": "0.0.363",

package/package.js

@@ -1,4 +1,4 @@
-var version = "1.1.0";
+var version = "1.2.0-alpha.1";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.52",
 	"@dynamic-labs/sdk-api": "0.0.363",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,15 +17,15 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.1.0",
-    "@dynamic-labs/logger": "1.1.0",
-    "@dynamic-labs/multi-wallet": "1.1.0",
-    "@dynamic-labs/rpc-providers": "1.1.0",
-    "@dynamic-labs/types": "1.1.0",
-    "@dynamic-labs/utils": "1.1.0",
-    "@dynamic-labs/viem-utils": "1.1.0",
-    "@dynamic-labs/wallet-book": "1.1.0",
-    "@dynamic-labs/wallet-connector-core": "1.1.0",
+    "@dynamic-labs/ethereum": "1.2.0-alpha.1",
+    "@dynamic-labs/logger": "1.2.0-alpha.1",
+    "@dynamic-labs/multi-wallet": "1.2.0-alpha.1",
+    "@dynamic-labs/rpc-providers": "1.2.0-alpha.1",
+    "@dynamic-labs/types": "1.2.0-alpha.1",
+    "@dynamic-labs/utils": "1.2.0-alpha.1",
+    "@dynamic-labs/viem-utils": "1.2.0-alpha.1",
+    "@dynamic-labs/wallet-book": "1.2.0-alpha.1",
+    "@dynamic-labs/wallet-connector-core": "1.2.0-alpha.1",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -378,6 +378,7 @@ exports.isSameWalletName = isSameWalletName.isSameWalletName;
 exports.getNetwork = getNetwork.getNetwork;
 exports.FilterAndSortWallets = index$3.FilterAndSortWallets;
 exports.FilterBridgeChainsName = index$3.FilterBridgeChainsName;
+exports.FilterChain = index$3.FilterChain;
 exports.FilterWallets = index$3.FilterWallets;
 exports.RemoveWallets = index$3.RemoveWallets;
 exports.SortWallets = index$3.SortWallets;

package/src/index.js

@@ -194,7 +194,7 @@ export { DynamicMultiWalletPromptsWidget } from './lib/widgets/DynamicMultiWalle
 export { getDefaultColor, getThemeConfig, themesData } from './lib/context/ThemeContext/themesData.js';
 export { isSameWalletName } from './lib/utils/functions/isSameWalletName/isSameWalletName.js';
 export { getNetwork } from './lib/utils/functions/getNetwork/getNetwork.js';
-export { FilterAndSortWallets, FilterBridgeChainsName, FilterWallets, RemoveWallets, SortWallets, UniswapFilter } from './lib/utils/functions/walletFilters/index.js';
+export { FilterAndSortWallets, FilterBridgeChainsName, FilterChain, FilterWallets, RemoveWallets, SortWallets, UniswapFilter } from './lib/utils/functions/walletFilters/index.js';
 export { useSendBalance } from './lib/context/SendBalanceContext/SendBalanceContext.js';
 import './lib/context/FundingContext/FundingContext.js';
 export { useFunding } from './lib/context/FundingContext/useFunding/useFunding.js';

package/src/lib/Main.cjs

@@ -48,6 +48,7 @@ require('./components/Alert/Alert.cjs');
 require('./components/ShadowDOM/ShadowDOM.cjs');
 require('./components/IconButton/IconButton.cjs');
 require('./components/InlineWidget/InlineWidget.cjs');
+require('./components/IsBrowser/IsBrowser.cjs');
 require('./components/MenuList/Dropdown/Dropdown.cjs');
 require('./components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('./components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/Main.js

@@ -44,6 +44,7 @@ import './components/Alert/Alert.js';
 import './components/ShadowDOM/ShadowDOM.js';
 import './components/IconButton/IconButton.js';
 import './components/InlineWidget/InlineWidget.js';
+import './components/IsBrowser/IsBrowser.js';
 import './components/MenuList/Dropdown/Dropdown.js';
 import './components/Transition/ZoomTransition/ZoomTransition.js';
 import './components/Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.cjs

@@ -43,6 +43,7 @@ require('../../../Alert/Alert.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../IconButton/IconButton.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/Accordion/components/AccordionItem/AccordionItem.js

@@ -39,6 +39,7 @@ import '../../../Alert/Alert.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../IconButton/IconButton.js';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../IsBrowser/IsBrowser.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/AnimatePresence/AnimatePresence.cjs

@@ -43,6 +43,7 @@ require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/AnimatePresence/AnimatePresence.js

@@ -39,6 +39,7 @@ import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.cjs

@@ -46,6 +46,7 @@ require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/AuthProviderIcon/AuthProviderIcon.js

@@ -42,6 +42,7 @@ import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/Badge/Badge.cjs

@@ -5,6 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const Badge = ({ className = '', dot, text, copykey, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('badge__container', className), children: [dot && jsxRuntime.jsx("span", { "data-testid": 'badge__dot', className: 'badge__dot' }), jsxRuntime.jsx("span", { copykey: copykey, children: text })] }));
+const Badge = ({ className = '', dot, text, copykey, variant = 'secondary', }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('badge__container', `badge__container__${variant}`, className), children: [dot && jsxRuntime.jsx("span", { "data-testid": 'badge__dot', className: 'badge__dot' }), jsxRuntime.jsx("span", { copykey: copykey, children: text })] }));
 
 exports.Badge = Badge;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { CopyKey } from '../../shared';
 import { BadgeProps } from './Badge.types';
-export declare const Badge: ({ className, dot, text, copykey, }: BadgeProps & CopyKey) => JSX.Element;
+export declare const Badge: ({ className, dot, text, copykey, variant, }: BadgeProps & CopyKey) => JSX.Element;

package/src/lib/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const Badge = ({ className = '', dot, text, copykey, }) => (jsxs("div", { className: classNames('badge__container', className), children: [dot && jsx("span", { "data-testid": 'badge__dot', className: 'badge__dot' }), jsx("span", { copykey: copykey, children: text })] }));
+const Badge = ({ className = '', dot, text, copykey, variant = 'secondary', }) => (jsxs("div", { className: classNames('badge__container', `badge__container__${variant}`, className), children: [dot && jsx("span", { "data-testid": 'badge__dot', className: 'badge__dot' }), jsx("span", { copykey: copykey, children: text })] }));
 
 export { Badge };

package/src/lib/components/Badge/Badge.types.d.ts

@@ -3,4 +3,5 @@ export interface BadgeProps {
     className?: string;
     dot?: boolean;
     text: ReactNode;
+    variant?: 'primary' | 'secondary';
 }

package/src/lib/components/Captcha/Captcha.cjs

@@ -42,6 +42,7 @@ require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/Captcha/Captcha.js

@@ -38,6 +38,7 @@ import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/Divider/Divider.cjs

@@ -61,6 +61,7 @@ require('../../context/PasskeyContext/PasskeyContext.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');

package/src/lib/components/Divider/Divider.js

@@ -57,6 +57,7 @@ import '../../context/PasskeyContext/PasskeyContext.js';
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';

package/src/lib/components/DynamicBaseWidget/DynamicBaseWidget.cjs

@@ -5,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 require('../Popper/Popper/Popper.cjs');
 var PopperContext = require('../Popper/PopperContext/PopperContext.cjs');
-var IsBrowser = require('../IsBrowser/IsBrowser.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 
-const DynamicBaseWidget = ({ children, shadowDOMProps }) => (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({}, shadowDOMProps, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) })) }));
+const DynamicBaseWidget = ({ children, shadowDOMProps }) => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({}, shadowDOMProps, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: children }) })));
 
 exports.DynamicBaseWidget = DynamicBaseWidget;

package/src/lib/components/DynamicBaseWidget/DynamicBaseWidget.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import '../Popper/Popper/Popper.js';
 import { PopperProvider } from '../Popper/PopperContext/PopperContext.js';
-import { IsBrowser } from '../IsBrowser/IsBrowser.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 
-const DynamicBaseWidget = ({ children, shadowDOMProps }) => (jsx(IsBrowser, { children: jsx(ShadowDOM, Object.assign({}, shadowDOMProps, { children: jsx(PopperProvider, { children: children }) })) }));
+const DynamicBaseWidget = ({ children, shadowDOMProps }) => (jsx(ShadowDOM, Object.assign({}, shadowDOMProps, { children: jsx(PopperProvider, { children: children }) })));
 
 export { DynamicBaseWidget };

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.cjs

@@ -42,6 +42,7 @@ require('../ShadowDOM/ShadowDOM.cjs');
 var ConnectButton = require('./components/ConnectButton.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/DynamicConnectButton/DynamicConnectButton.js

@@ -38,6 +38,7 @@ import '../ShadowDOM/ShadowDOM.js';
 import { ConnectButton } from './components/ConnectButton.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/IconWithSpinner/IconWithSpinner.cjs

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var utils = require('@dynamic-labs/utils');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('@dynamic-labs/wallet-connector-core');
@@ -11,6 +10,7 @@ require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('../../context/ViewContext/ViewContext.cjs');
+require('react');
 require('@dynamic-labs/wallet-book');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
@@ -28,16 +28,6 @@ const iconRatio = 7 / 11;
 const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
     const realIconSize = iconSize * iconRatio;
     const spinnerIconSize = iconSize / 2;
-    const [spinningDegrees, setSpinningDegrees] = React.useState(0);
-    React.useEffect(() => {
-        let currentDegree = 0;
-        const millisecondsForEachSpin = 1300;
-        const spinningInterval = setInterval(() => {
-            setSpinningDegrees(currentDegree);
-            currentDegree = currentDegree < 360 ? currentDegree + 1 : 0;
-        }, millisecondsForEachSpin / 360);
-        return () => clearInterval(spinningInterval);
-    }, []);
     const effectiveContainerClassName = classNames.classNames('icon-with-spinner__container', className);
     const IconAsFC = Icon;
     return (jsxRuntime.jsxs("div", { className: effectiveContainerClassName, style: {
@@ -46,9 +36,8 @@ const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className =
         }, children: [Icon && (jsxRuntime.jsxs("div", { style: {
                     height: pixelToRem.pixelToRem(realIconSize),
                     width: pixelToRem.pixelToRem(realIconSize),
-                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsxRuntime.jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsxRuntime.jsx(Indicator.Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !utils.isLegacySafari() && (jsxRuntime.jsx("div", { className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
+                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsxRuntime.jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsxRuntime.jsx(Indicator.Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !utils.isLegacySafari() && (jsxRuntime.jsx("div", { className: 'icon-with-spinner__spinner-container icon-with-spinner__animation', "data-chromatic": 'ignore', style: {
                     height: pixelToRem.pixelToRem(iconSize),
-                    transform: `rotate(${spinningDegrees}deg)`,
                     width: pixelToRem.pixelToRem(iconSize),
                 }, children: jsxRuntime.jsx(Spinner.Spinner, { className: 'icon-with-spinner__spinner', customSpinnerColor: customSpinnerColor, size: spinnerIconSize }) }))] }));
 };

package/src/lib/components/IconWithSpinner/IconWithSpinner.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import { isLegacySafari } from '@dynamic-labs/utils';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '@dynamic-labs/wallet-connector-core';
@@ -7,6 +6,7 @@ import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '../../context/ViewContext/ViewContext.js';
+import 'react';
 import '@dynamic-labs/wallet-book';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
@@ -24,16 +24,6 @@ const iconRatio = 7 / 11;
 const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className = '', indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
     const realIconSize = iconSize * iconRatio;
     const spinnerIconSize = iconSize / 2;
-    const [spinningDegrees, setSpinningDegrees] = useState(0);
-    useEffect(() => {
-        let currentDegree = 0;
-        const millisecondsForEachSpin = 1300;
-        const spinningInterval = setInterval(() => {
-            setSpinningDegrees(currentDegree);
-            currentDegree = currentDegree < 360 ? currentDegree + 1 : 0;
-        }, millisecondsForEachSpin / 360);
-        return () => clearInterval(spinningInterval);
-    }, []);
     const effectiveContainerClassName = classNames('icon-with-spinner__container', className);
     const IconAsFC = Icon;
     return (jsxs("div", { className: effectiveContainerClassName, style: {
@@ -42,9 +32,8 @@ const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className =
         }, children: [Icon && (jsxs("div", { style: {
                     height: pixelToRem(realIconSize),
                     width: pixelToRem(realIconSize),
-                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsx(Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !isLegacySafari() && (jsx("div", { className: 'icon-with-spinner__spinner-container', "data-chromatic": 'ignore', style: {
+                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsx(Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !isLegacySafari() && (jsx("div", { className: 'icon-with-spinner__spinner-container icon-with-spinner__animation', "data-chromatic": 'ignore', style: {
                     height: pixelToRem(iconSize),
-                    transform: `rotate(${spinningDegrees}deg)`,
                     width: pixelToRem(iconSize),
                 }, children: jsx(Spinner, { className: 'icon-with-spinner__spinner', customSpinnerColor: customSpinnerColor, size: spinnerIconSize }) }))] }));
 };

package/src/lib/components/IsBrowser/IsBrowser.cjs

@@ -5,20 +5,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
+/**
+ * This allows us to ignore nested IsBrowser components.
+ */
+const IsNestedBrowserContext = React.createContext(false);
 const IsBrowser = ({ children }) => {
+    const isNested = React.useContext(IsNestedBrowserContext);
     const [isBrowser, setIsBrowser] = React.useState(false);
     // this useEffect does not run during SSR
     React.useEffect(() => {
         setIsBrowser(true);
     }, []);
-    if (!isBrowser) {
-        // Justification: We specifically need to return an element instead of null
-        // in order to have stable content during SSR
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
+    if (isBrowser || isNested)
+        return (jsxRuntime.jsx(IsNestedBrowserContext.Provider, { value: true, children: children }));
+    // Justification: We specifically need to return an element instead of null
+    // in order to have stable content during SSR
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 exports.IsBrowser = IsBrowser;
+exports.IsNestedBrowserContext = IsNestedBrowserContext;

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

@@ -1,2 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
+/**
+ * This allows us to ignore nested IsBrowser components.
+ */
+export declare const IsNestedBrowserContext: import("react").Context<boolean>;
 export declare const IsBrowser: FC<PropsWithChildren>;

package/src/lib/components/IsBrowser/IsBrowser.js

@@ -1,20 +1,23 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect } from 'react';
 
+/**
+ * This allows us to ignore nested IsBrowser components.
+ */
+const IsNestedBrowserContext = createContext(false);
 const IsBrowser = ({ children }) => {
+    const isNested = useContext(IsNestedBrowserContext);
     const [isBrowser, setIsBrowser] = useState(false);
     // this useEffect does not run during SSR
     useEffect(() => {
         setIsBrowser(true);
     }, []);
-    if (!isBrowser) {
-        // Justification: We specifically need to return an element instead of null
-        // in order to have stable content during SSR
-        // eslint-disable-next-line react/jsx-no-useless-fragment
-        return jsx(Fragment, {});
-    }
+    if (isBrowser || isNested)
+        return (jsx(IsNestedBrowserContext.Provider, { value: true, children: children }));
+    // Justification: We specifically need to return an element instead of null
+    // in order to have stable content during SSR
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx(Fragment, { children: children });
+    return jsx(Fragment, {});
 };
 
-export { IsBrowser };
+export { IsBrowser, IsNestedBrowserContext };

package/src/lib/components/LogoutButton/LogoutButton.cjs

@@ -43,6 +43,7 @@ var Button = require('../Button/Button.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/LogoutButton/LogoutButton.js

@@ -39,6 +39,7 @@ import { Button } from '../Button/Button.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/MenuList/Dropdown/Dropdown.cjs

@@ -48,6 +48,7 @@ require('../../Alert/Alert.cjs');
 require('../../ShadowDOM/ShadowDOM.cjs');
 require('../../IconButton/IconButton.cjs');
 require('../../InlineWidget/InlineWidget.cjs');
+require('../../IsBrowser/IsBrowser.cjs');
 require('../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../Transition/OpacityTransition/OpacityTransition.cjs');

package/src/lib/components/MenuList/Dropdown/Dropdown.js

@@ -44,6 +44,7 @@ import '../../Alert/Alert.js';
 import '../../ShadowDOM/ShadowDOM.js';
 import '../../IconButton/IconButton.js';
 import '../../InlineWidget/InlineWidget.js';
+import '../../IsBrowser/IsBrowser.js';
 import '../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../Transition/OpacityTransition/OpacityTransition.js';

package/src/lib/components/Modal/Modal.cjs

@@ -45,6 +45,7 @@ require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');

package/src/lib/components/Modal/Modal.js

@@ -41,6 +41,7 @@ import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';

package/src/lib/components/NeedHelpSection/NeedHelpSection.cjs

@@ -45,6 +45,7 @@ var TextButton = require('../TextButton/TextButton.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/NeedHelpSection/NeedHelpSection.js

@@ -41,6 +41,7 @@ import { TextButton } from '../TextButton/TextButton.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/NetworkPicker/NetworkPicker.cjs

@@ -44,6 +44,7 @@ require('../Alert/Alert.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../IconButton/IconButton.cjs');
 require('../InlineWidget/InlineWidget.cjs');
+require('../IsBrowser/IsBrowser.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');

package/src/lib/components/NetworkPicker/NetworkPicker.js

@@ -40,6 +40,7 @@ import '../Alert/Alert.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../IconButton/IconButton.js';
 import '../InlineWidget/InlineWidget.js';
+import '../IsBrowser/IsBrowser.js';
 import '../MenuList/Dropdown/Dropdown.js';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs

@@ -63,6 +63,7 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.js

@@ -59,6 +59,7 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '@dynamic-labs/viem-utils';
 import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../IsBrowser/IsBrowser.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';

package/src/lib/components/NetworkPicker/components/Network/Network.cjs

@@ -64,6 +64,7 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');

package/src/lib/components/NetworkPicker/components/Network/Network.js

@@ -60,6 +60,7 @@ import '../../../../context/PasskeyContext/PasskeyContext.js';
 import '@dynamic-labs/viem-utils';
 import '../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../../InlineWidget/InlineWidget.js';
+import '../../../IsBrowser/IsBrowser.js';
 import '../../../MenuList/Dropdown/Dropdown.js';
 import '../../../Popper/Popper/Popper.js';
 import '../../../Popper/PopperContext/PopperContext.js';

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs

@@ -65,6 +65,7 @@ require('../../../../context/PasskeyContext/PasskeyContext.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../../InlineWidget/InlineWidget.cjs');
+require('../../../IsBrowser/IsBrowser.cjs');
 require('../../../MenuList/Dropdown/Dropdown.cjs');
 require('../../../Popper/Popper/Popper.cjs');
 require('../../../Popper/PopperContext/PopperContext.cjs');