@dynamic-labs/sdk-react-core 0.19.0-alpha.25 → 0.19.0-alpha.27

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

@@ -6,6 +6,7 @@ var React = require('react');
 var reactI18next = require('react-i18next');
 var sdkApi = require('@dynamic-labs/sdk-api');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var SocialRedirectContext = require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
@@ -24,7 +25,9 @@ var index = require('../../utils/functions/getEnabledProviders/index.cjs');
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
+    var _a, _b, _c, _d;
     const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
@@ -55,46 +58,51 @@ const useLoginView = () => {
      * build email and social view sections from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const getEmailViewSectionDefinition = () => {
-        var _a, _b, _c, _d;
+    const getEmailViewSectionDefinition = React.useCallback(() => {
+        var _a, _b;
         const loginViewSections = [
             {
                 type: sdkApi.SdkViewSectionType.Email,
             },
         ];
-        const enabledSocialProviders = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled);
         if (enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length) {
-            loginViewSections.push({
+            const socialSection = {
                 numOfItemsToDisplay: 5,
                 type: sdkApi.SdkViewSectionType.Social,
-            });
-            if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
+            };
+            loginViewSections.push(socialSection);
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.splitEmailAndSocial) {
                 loginViewSections.splice(1, 0, {
                     label: t('dyn_login.separators.default'),
                     type: sdkApi.SdkViewSectionType.Separator,
                 });
-                loginViewSections[loginViewSections.length - 1].defaultItem =
-                    enabledSocialProviders[0].provider;
+                // eslint-disable-next-line prefer-destructuring
+                socialSection.defaultItem = enabledSocialProviders[0];
             }
         }
-        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+        if ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.socialAboveEmail) {
             loginViewSections.reverse();
         }
         return loginViewSections;
-    };
+    }, [
+        enabledSocialProviders,
+        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.socialAboveEmail,
+        (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.splitEmailAndSocial,
+        t,
+    ]);
     // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
     /**
      * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
      * @param sections
      * @returns
      */
-    const filterLoginViewSections = (sections) => {
+    const filterLoginViewSections = React.useCallback((sections) => {
         if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    };
-    const addSeparator = (index, loginItem) => {
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length]);
+    const addSeparator = React.useCallback((index) => {
         // if not the first index, no separator is needed
         // if the first index but does not have wallets or providers,
         // it'll show only one view section - no separator is needed
@@ -107,12 +115,12 @@ const useLoginView = () => {
                 type: sdkApi.SdkViewSectionType.Separator,
             },
         ];
-    };
+    }, [hasEnabledProviders, selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, t]);
     /**
      * build login view sections array from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const buildLoginSections = () => {
+    const buildLoginSections = React.useCallback(() => {
         let loginViewSections = [];
         authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
             var _a, _b;
@@ -139,7 +147,14 @@ const useLoginView = () => {
             }
         });
         return loginViewSections;
-    };
+    }, [
+        addSeparator,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+    ]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -156,7 +171,6 @@ const useLoginView = () => {
         return buildLoginSections();
     }, [
         projectSettings,
-        authorizationViewDisplayOrder,
         getEmailViewSectionDefinition,
         filterLoginViewSections,
         buildLoginSections,

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

@@ -1,7 +1,8 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SdkViewType, SdkViewSectionType } from '@dynamic-labs/sdk-api';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import { useSocialRedirectContext } from '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
@@ -20,7 +21,9 @@ import { getEnabledProviders } from '../../utils/functions/getEnabledProviders/i
 /* eslint-disable multiline-comment-style */
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
+    var _a, _b, _c, _d;
     const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, wallets, walletsFilter, } = useInternalDynamicContext();
+    const { enabledSocialProviders } = useSocialRedirectContext();
     /** Takes from wallets only those that can be selected in the wallet list by the user.
      * Should filter out embedded wallets
      * WHY: when we decide whether to show wallets or not, we need to know how many wallets
@@ -51,46 +54,51 @@ const useLoginView = () => {
      * build email and social view sections from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const getEmailViewSectionDefinition = () => {
-        var _a, _b, _c, _d;
+    const getEmailViewSectionDefinition = useCallback(() => {
+        var _a, _b;
         const loginViewSections = [
             {
                 type: SdkViewSectionType.Email,
             },
         ];
-        const enabledSocialProviders = (_b = (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk.socialSignIn) === null || _a === void 0 ? void 0 : _a.providers) === null || _b === void 0 ? void 0 : _b.filter((provider) => provider.enabled);
         if (enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length) {
-            loginViewSections.push({
+            const socialSection = {
                 numOfItemsToDisplay: 5,
                 type: SdkViewSectionType.Social,
-            });
-            if ((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.splitEmailAndSocial) {
+            };
+            loginViewSections.push(socialSection);
+            if ((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.splitEmailAndSocial) {
                 loginViewSections.splice(1, 0, {
                     label: t('dyn_login.separators.default'),
                     type: SdkViewSectionType.Separator,
                 });
-                loginViewSections[loginViewSections.length - 1].defaultItem =
-                    enabledSocialProviders[0].provider;
+                // eslint-disable-next-line prefer-destructuring
+                socialSection.defaultItem = enabledSocialProviders[0];
             }
         }
-        if ((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _d === void 0 ? void 0 : _d.socialAboveEmail) {
+        if ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.socialAboveEmail) {
             loginViewSections.reverse();
         }
         return loginViewSections;
-    };
+    }, [
+        enabledSocialProviders,
+        (_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _a === void 0 ? void 0 : _a.socialAboveEmail,
+        (_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.splitEmailAndSocial,
+        t,
+    ]);
     // TODO: https://linear.app/dynamic-labs/issue/GVTY-212/rethink-or-implement-toolkit-template-for-email-wallet-order
     /**
      * remove wallet view section from projectSettings?.sdk?.views if no wallet defined
      * @param sections
      * @returns
      */
-    const filterLoginViewSections = (sections) => {
+    const filterLoginViewSections = useCallback((sections) => {
         if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    };
-    const addSeparator = (index, loginItem) => {
+    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length]);
+    const addSeparator = useCallback((index) => {
         // if not the first index, no separator is needed
         // if the first index but does not have wallets or providers,
         // it'll show only one view section - no separator is needed
@@ -103,12 +111,12 @@ const useLoginView = () => {
                 type: SdkViewSectionType.Separator,
             },
         ];
-    };
+    }, [hasEnabledProviders, selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, t]);
     /**
      * build login view sections array from project settings design.modal props - backwards compatibility
      * @returns SdkViewSection[]
      */
-    const buildLoginSections = () => {
+    const buildLoginSections = useCallback(() => {
         let loginViewSections = [];
         authorizationViewDisplayOrder === null || authorizationViewDisplayOrder === void 0 ? void 0 : authorizationViewDisplayOrder.forEach((loginItem, index) => {
             var _a, _b;
@@ -135,7 +143,14 @@ const useLoginView = () => {
             }
         });
         return loginViewSections;
-    };
+    }, [
+        addSeparator,
+        authorizationViewDisplayOrder,
+        getEmailViewSectionDefinition,
+        (_d = (_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.showWalletsButton,
+        projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers,
+        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+    ]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -152,7 +167,6 @@ const useLoginView = () => {
         return buildLoginSections();
     }, [
         projectSettings,
-        authorizationViewDisplayOrder,
         getEmailViewSectionDefinition,
         filterLoginViewSections,
         buildLoginSections,

package/src/lib/views/PendingSignatureView/PendingSignatureView.cjs

@@ -94,7 +94,7 @@ const PendingSignatureView = () => {
         } }));
     const typographyBodyCopy = isPhantomLedger
         ? "Click sign in your wallet to confirm you own this wallet (this doesn't cost gas)."
-        : 'Click sign in your wallet to confirm you own this wallet.';
+        : 'Click sign-in in your wallet to confirm you own this wallet.';
     return (jsxRuntime.jsxs("div", { className: 'pending-signature__container', "data-testid": 'pending-signature-view', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true, indicator: 'connected', className: 'pending-signature__icon-with-spinner' }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', className: classNames.classNames('pending-signature__copy'), children: typographyBodyCopy }), isPhantomLedger && (jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', weight: 'regular', className: classNames.classNames('pending-signature__copy', 'pending-signature__copy--mini'), children: [jsxRuntime.jsx("strong", { children: "Note:" }), " Ledger with Phantom doesn\u2019t support message signing. When logging in, a small fee (which should not apply) may appear. See below to learn more."] })), requiresTwoStepAuthentication.requiresTwoStepAuthentication(walletConnector) && (jsxRuntime.jsx(Button.Button, { buttonClassName: 'pending-signature__button', onClick: handleClick, loading: loading, buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {
                     variant: 'button_primary',
                     weight: 'medium',

package/src/lib/views/PendingSignatureView/PendingSignatureView.js

@@ -90,7 +90,7 @@ const PendingSignatureView = () => {
         } }));
     const typographyBodyCopy = isPhantomLedger
         ? "Click sign in your wallet to confirm you own this wallet (this doesn't cost gas)."
-        : 'Click sign in your wallet to confirm you own this wallet.';
+        : 'Click sign-in in your wallet to confirm you own this wallet.';
     return (jsxs("div", { className: 'pending-signature__container', "data-testid": 'pending-signature-view', children: [jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, isSpinning: true, indicator: 'connected', className: 'pending-signature__icon-with-spinner' }), jsx(Typography, { variant: 'body_normal', weight: 'regular', className: classNames('pending-signature__copy'), children: typographyBodyCopy }), isPhantomLedger && (jsxs(Typography, { variant: 'body_small', weight: 'regular', className: classNames('pending-signature__copy', 'pending-signature__copy--mini'), children: [jsx("strong", { children: "Note:" }), " Ledger with Phantom doesn\u2019t support message signing. When logging in, a small fee (which should not apply) may appear. See below to learn more."] })), requiresTwoStepAuthentication(walletConnector) && (jsx(Button, { buttonClassName: 'pending-signature__button', onClick: handleClick, loading: loading, buttonVariant: 'primary', buttonPadding: 'large', expanded: true, typographyProps: {
                     variant: 'button_primary',
                     weight: 'medium',

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs

@@ -61,7 +61,7 @@ var SocialRedirectContext = require('../../../context/SocialRedirectContext/Soci
 require('../../../views/WalletList/WalletList.cjs');
 var viewToComponentMap = require('../../../views/viewToComponentMap.cjs');
 
-const DynamicEmbeddedAuthFlow = ({ background = 'none', }) => {
+const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn.useIsLoggedIn();
     const { projectSettings, internalEvents, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext.useInternalDynamicContext();
     const { view: authView, goToInitialView: resetAuthView } = ViewContext.useViewContext();
@@ -82,7 +82,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', }) => {
     }, [hide]);
     if (hide)
         return null;
-    const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { projectSettings: projectSettings, children: viewToComponentMap.viewToComponentMap[authView] }));
+    const content = (jsxRuntime.jsx(DynamicAuthLayout.DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: viewToComponentMap.viewToComponentMap[authView] }));
     return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(SocialRedirectContext.SocialRedirectContextProvider, { children: jsxRuntime.jsx(index.FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
 };
 

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.d.ts

@@ -1,3 +1,6 @@
 import { FC } from 'react';
 import { EmbedProps } from '../EmbedProps.type';
-export declare const DynamicEmbeddedAuthFlow: FC<EmbedProps>;
+import { ClassStyleProps } from '../../../utils/types';
+type DynamicEmbeddedAuthFlowProps = EmbedProps & ClassStyleProps;
+export declare const DynamicEmbeddedAuthFlow: FC<DynamicEmbeddedAuthFlowProps>;
+export {};

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js

@@ -57,7 +57,7 @@ import { SocialRedirectContextProvider } from '../../../context/SocialRedirectCo
 import '../../../views/WalletList/WalletList.js';
 import { viewToComponentMap } from '../../../views/viewToComponentMap.js';
 
-const DynamicEmbeddedAuthFlow = ({ background = 'none', }) => {
+const DynamicEmbeddedAuthFlow = ({ background = 'none', className, style, }) => {
     const hide = useIsLoggedIn();
     const { projectSettings, internalEvents, isRenderingEmbeddedAuthFlow } = useInternalDynamicContext();
     const { view: authView, goToInitialView: resetAuthView } = useViewContext();
@@ -78,7 +78,7 @@ const DynamicEmbeddedAuthFlow = ({ background = 'none', }) => {
     }, [hide]);
     if (hide)
         return null;
-    const content = (jsx(DynamicAuthLayout, { projectSettings: projectSettings, children: viewToComponentMap[authView] }));
+    const content = (jsx(DynamicAuthLayout, { className: className, style: style, projectSettings: projectSettings, children: viewToComponentMap[authView] }));
     return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: jsx(SocialRedirectContextProvider, { children: jsx(FooterAnimationContextProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }) }) }));
 };
 

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.cjs

@@ -54,11 +54,11 @@ var ModalCard = require('../../../components/ModalCard/ModalCard.cjs');
 require('../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 
-const DynamicEmbeddedUserProfile = ({ background = 'none', }) => {
+const DynamicEmbeddedUserProfile = ({ background = 'none', className, style }) => {
     const show = useIsLoggedIn.useIsLoggedIn();
     if (!show)
         return null;
-    const content = jsxRuntime.jsx(DynamicUserProfileLayout.DynamicUserProfileLayout, { variant: 'modal' });
+    const content = (jsxRuntime.jsx(DynamicUserProfileLayout.DynamicUserProfileLayout, { className: className, style: style, variant: 'modal' }));
     return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { className: 'embedded-widget', children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: background === 'none' ? (content) : (jsxRuntime.jsx(ModalCard.ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }));
 };
 

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.d.ts

@@ -1,3 +1,6 @@
 import { FC } from 'react';
 import { EmbedProps } from '../EmbedProps.type';
-export declare const DynamicEmbeddedUserProfile: FC<EmbedProps>;
+import { ClassStyleProps } from '../../../utils/types';
+type DynamicEmbeddedUserProfileProps = EmbedProps & ClassStyleProps;
+export declare const DynamicEmbeddedUserProfile: FC<DynamicEmbeddedUserProfileProps>;
+export {};

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.js

@@ -50,11 +50,11 @@ import { ModalCard } from '../../../components/ModalCard/ModalCard.js';
 import '../../../components/InlineWidget/InlineWidget.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
 
-const DynamicEmbeddedUserProfile = ({ background = 'none', }) => {
+const DynamicEmbeddedUserProfile = ({ background = 'none', className, style }) => {
     const show = useIsLoggedIn();
     if (!show)
         return null;
-    const content = jsx(DynamicUserProfileLayout, { variant: 'modal' });
+    const content = (jsx(DynamicUserProfileLayout, { className: className, style: style, variant: 'modal' }));
     return (jsx(ShadowDOM, { className: 'embedded-widget', children: jsx(PopperProvider, { children: background === 'none' ? (content) : (jsx(ModalCard, { border: background === 'with-border', sharpBottomRadiusOnMobile: false, children: content })) }) }));
 };
 

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedWidget.cjs

@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var DynamicEmbeddedAuthFlow = require('./DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.cjs');
 var DynamicEmbeddedUserProfile = require('./DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.cjs');
 
-const DynamicEmbeddedWidget = ({ background = 'none', }) => (
+const DynamicEmbeddedWidget = ({ background = 'none', className, style, }) => (
 // Only one of these 2 show at any given time, due these components' own definitions
-jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicEmbeddedAuthFlow.DynamicEmbeddedAuthFlow, { background: background }), jsxRuntime.jsx(DynamicEmbeddedUserProfile.DynamicEmbeddedUserProfile, { background: background })] }));
+jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicEmbeddedAuthFlow.DynamicEmbeddedAuthFlow, { background: background, className: className, style: style }), jsxRuntime.jsx(DynamicEmbeddedUserProfile.DynamicEmbeddedUserProfile, { background: background, className: className, style: style })] }));
 
 exports.DynamicEmbeddedWidget = DynamicEmbeddedWidget;

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedWidget.d.ts

@@ -1,3 +1,6 @@
 import { FC } from 'react';
+import { ClassStyleProps } from '../../utils/types';
 import { EmbedProps } from './EmbedProps.type';
-export declare const DynamicEmbeddedWidget: FC<EmbedProps>;
+type DynamicEmbeddedWidgetProps = EmbedProps & ClassStyleProps;
+export declare const DynamicEmbeddedWidget: FC<DynamicEmbeddedWidgetProps>;
+export {};

package/src/lib/widgets/DynamicEmbeddedWidget/DynamicEmbeddedWidget.js

@@ -2,8 +2,8 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { DynamicEmbeddedAuthFlow } from './DynamicEmbeddedAuthFlow/DynamicEmbeddedAuthFlow.js';
 import { DynamicEmbeddedUserProfile } from './DynamicEmbeddedUserProfile/DynamicEmbeddedUserProfile.js';
 
-const DynamicEmbeddedWidget = ({ background = 'none', }) => (
+const DynamicEmbeddedWidget = ({ background = 'none', className, style, }) => (
 // Only one of these 2 show at any given time, due these components' own definitions
-jsxs(Fragment, { children: [jsx(DynamicEmbeddedAuthFlow, { background: background }), jsx(DynamicEmbeddedUserProfile, { background: background })] }));
+jsxs(Fragment, { children: [jsx(DynamicEmbeddedAuthFlow, { background: background, className: className, style: style }), jsx(DynamicEmbeddedUserProfile, { background: background, className: className, style: style })] }));
 
 export { DynamicEmbeddedWidget };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs

@@ -71,7 +71,7 @@ const ICON_SIZE = 28;
 const ActiveWalletInformation = () => {
     const { t } = reactI18next.useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = React.useState(false);
-    const { primaryWallet, authToken, network, handleLogOut, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    const { primaryWallet, authToken, network, projectSettings, handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService.useFetchNameService(address);
     const { data: testnet } = usePromise.usePromise(() => isTestnet.isTestnet(primaryWallet), { deps: [network] });
@@ -105,7 +105,7 @@ const ActiveWalletInformation = () => {
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
-    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
+    return (jsxRuntime.jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__header', children: [jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsxRuntime.jsx("div", { className: 'active-wallet-information__avatar', children: jsxRuntime.jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsxRuntime.jsx("div", { className: 'active-wallet-information__wallet-img', children: jsxRuntime.jsx(AuthProviderIcon.AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__details', children: [jsxRuntime.jsxs("div", { className: classNames.classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
                                         }), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress.shortenWalletAddress(address, 4, 4) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsxRuntime.jsx(NetworkPicker.NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsxRuntime.jsx(Alert.Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxRuntime.jsxs("div", { className: 'balance-container', children: [jsxRuntime.jsx(Typography.Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsxRuntime.jsx(Balance.Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js

@@ -67,7 +67,7 @@ const ICON_SIZE = 28;
 const ActiveWalletInformation = () => {
     const { t } = useTranslation();
     const [isNetworkPickerOpen, setIsNetworkPickerOpen] = useState(false);
-    const { primaryWallet, authToken, network, handleLogOut, projectSettings } = useInternalDynamicContext();
+    const { primaryWallet, authToken, network, projectSettings, handleLogOut } = useInternalDynamicContext();
     const address = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address;
     const nameService = useFetchNameService(address);
     const { data: testnet } = usePromise(() => isTestnet(primaryWallet), { deps: [network] });
@@ -101,7 +101,7 @@ const ActiveWalletInformation = () => {
     const evmNetworks = ((primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector) &&
         (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector).evmNetworks) ||
         [];
-    return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [(nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
+    return (jsxs("div", { className: 'active-wallet-information-container', "data-testid": 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information', children: [jsxs("div", { className: 'active-wallet-information__header', children: [jsx("div", { className: 'active-wallet-information__avatar--centered', children: (nameService === null || nameService === void 0 ? void 0 : nameService.avatar) ? (jsx("div", { className: 'active-wallet-information__avatar', children: jsx("img", { src: nameService === null || nameService === void 0 ? void 0 : nameService.avatar, alt: '' }) })) : (jsx("div", { className: 'active-wallet-information__wallet-img', children: jsx(AuthProviderIcon, { jwt: authToken, iconSize: ICON_SIZE, showStatus: true }) })) }), jsxs("div", { className: 'active-wallet-information__details', children: [jsxs("div", { className: classNames('active-wallet-information__actions-container', {
                                             'active-wallet-information__actions-container--centered': !(nameService === null || nameService === void 0 ? void 0 : nameService.name),
                                         }), children: [jsxs("div", { children: [jsx(Typography, { className: 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameService === null || nameService === void 0 ? void 0 : nameService.name }), jsx(Typography, { className: 'active-wallet-information__address', weight: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'regular' : 'medium', variant: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'body_small' : 'body_normal', color: (nameService === null || nameService === void 0 ? void 0 : nameService.name) ? 'secondary' : 'primary', children: shortenWalletAddress(address, 4, 4) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: options, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu' })] }), jsx(NetworkPicker, { connector: primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, isNetworkPickerOpen: isNetworkPickerOpen, setIsNetworkPickerOpen: setIsNetworkPickerOpen, mainClassName: 'active-wallet-information__network-picker', buttonClassName: 'active-wallet-information__network-picker-button', evmNetworks: evmNetworks, showNetworkName: true })] })] }), testnet && (jsx(Alert, { variant: 'warning', children: t('dyn_active_wallet_info.testnet_warning') }))] }), jsxs("div", { className: 'balance-container', children: [jsx(Typography, { color: 'secondary', variant: 'body_small', children: "Balance" }), primaryWallet && (jsx(Balance, { className: 'balance-container__balance', connector: primaryWallet.connector, address: primaryWallet.address, network: network }))] })] }));
 };

package/src/lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.cjs

@@ -67,7 +67,7 @@ const DynamicUserProfile = ({ variant, }) => {
     }, [variant]);
     if (!projectSettings)
         return null;
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicWidgetCard.DynamicWidgetCard, { ref: widgetRef, children: jsxRuntime.jsx(DynamicUserProfileLayout.DynamicUserProfileLayout, { variant: variant }) }) }) }) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(PopperContext.PopperProvider, { children: jsxRuntime.jsx(DynamicWidgetVariants.DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicWidgetCard.DynamicWidgetCard, { ref: widgetRef, children: jsxRuntime.jsx(DynamicUserProfileLayout.DynamicUserProfileLayout, { className: 'modal-user-profile', variant: variant }) }) }) }) }));
 };
 const ShadowedDynamicUserProfile = () => (jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: index.widgetModalZIndex, children: jsxRuntime.jsx(DynamicUserProfile, {}) }));
 

package/src/lib/widgets/DynamicWidget/components/DynamicUserProfile/DynamicUserProfile.js

@@ -63,7 +63,7 @@ const DynamicUserProfile = ({ variant, }) => {
     }, [variant]);
     if (!projectSettings)
         return null;
-    return (jsx(IsBrowser, { children: jsx(PopperProvider, { children: jsx(DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: widgetModalZIndex, children: jsx(DynamicWidgetCard, { ref: widgetRef, children: jsx(DynamicUserProfileLayout, { variant: variant }) }) }) }) }));
+    return (jsx(IsBrowser, { children: jsx(PopperProvider, { children: jsx(DynamicWidgetVariants, { isOpen: isOpen, setIsOpen: setIsOpen, variant: _variant, zIndex: widgetModalZIndex, children: jsx(DynamicWidgetCard, { ref: widgetRef, children: jsx(DynamicUserProfileLayout, { className: 'modal-user-profile', variant: variant }) }) }) }) }));
 };
 const ShadowedDynamicUserProfile = () => (jsx(ShadowDOM, { zIndex: widgetModalZIndex, children: jsx(DynamicUserProfile, {}) }));
 

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs

@@ -99,7 +99,7 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         return shortenEmail.shortenEmail(user === null || user === void 0 ? void 0 : user.email);
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: "Active wallet" }), jsxRuntime.jsx(ActiveWalletInformation.ActiveWalletInformation, {})] })) : (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: user }) })), primaryWallet ? (jsxRuntime.jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
+    return (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsxRuntime.jsx(ActiveWalletInformation.ActiveWalletInformation, {})) : (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsxRuntime.jsx(UserAvatar.UserAvatar, { user: user }) })), primaryWallet ? (jsxRuntime.jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxRuntime.jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines
                             jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-secondary', children: jsxRuntime.jsx(add.ReactComponent, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsxRuntime.jsx(Button.Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { isEmbeddedConnector } from '@dynamic-labs/wallet-connector-core';
 import { Typography } from '../../../../../components/Typography/Typography.js';
@@ -91,7 +91,7 @@ const DynamicWidgetWalletHeader = ({ variant, }) => {
         return shortenEmail(user === null || user === void 0 ? void 0 : user.email);
     };
     const isActionsVisible = isSendBalanceEnabled || fundingEnabled;
-    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsxs(Fragment, { children: [jsx(Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: "Active wallet" }), jsx(ActiveWalletInformation, {})] })) : (jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsx(UserAvatar, { user: user }) })), primaryWallet ? (jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
+    return (jsxs("div", { className: 'dynamic-widget-wallet-header', "data-testid": 'dynamic-widget-wallet-header', children: [primaryWallet ? (jsx(ActiveWalletInformation, {})) : (jsx("div", { className: 'dynamic-widget-wallet-header__icon-container', children: jsx(UserAvatar, { user: user }) })), primaryWallet ? (jsx("div", { "data-testid": 'primaryWalletStatus', className: 'dynamic-widget-wallet-header__wallet-info', children: isActionsVisible && (jsxs("div", { className: 'dynamic-widget-wallet-header__wallet-actions', children: [fundingEnabled && (jsx(Button, { expanded: true, dataTestId: 'buy-crypto-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: () => setShowFunding(true), disabled: !supportsFunding, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines
                             jsx(Icon, { size: 'small', color: 'text-secondary', children: jsx(SvgAdd, {}) }), children: "Buy" })), isSendBalanceEnabled && (jsx(Button, { expanded: true, dataTestId: 'send-balance-button', buttonPadding: 'small', buttonVariant: 'primary', onClick: handleOnClickSend, startSlot: 
                             // eslint-disable-next-line react/jsx-wrap-multilines

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.cjs

@@ -66,11 +66,11 @@ const DynamicWidgetWallets = () => {
     const { secondaryWallets, user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
     const { availableWalletsContainerRef } = DynamicWidgetContext.useWidgetContext();
     const isEmpty = secondaryWallets.length === 0;
-    return (jsxRuntime.jsxs("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: t('dyn_widget.other_wallets') }), jsxRuntime.jsx("div", { className: classNames.classNames('available-wallets__body', {
+    return (jsxRuntime.jsxs("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: t('dyn_widget.other_wallets') }), jsxRuntime.jsx("div", { className: classNames.classNames('dynamic-widget-wallets__body', {
                     'dynamic-widget-wallets__body--apply-height': !isEmpty,
                 }), children: isEmpty ? (jsxRuntime.jsx(EmptyWallets.EmptyWallets, { text: t('dyn_widget.empty_wallets', {
                         action: authMode === 'connect-and-sign' ? 'Link' : 'Connect',
-                    }) })) : (jsxRuntime.jsx("div", { className: 'available-wallets__wallet-list', children: secondaryWallets.map((wallet, index) => {
+                    }) })) : (jsxRuntime.jsx("div", { className: 'dynamic-widget-wallets__body__wallet-list', children: secondaryWallets.map((wallet, index) => {
                         var _a;
                         return (jsxRuntime.jsx(Wallet.Wallet, { ens: (_a = getWalletVerifiedCredential.getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id));
                     }) })) })] }));

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetWallets/DynamicWidgetWallets.js

@@ -62,11 +62,11 @@ const DynamicWidgetWallets = () => {
     const { secondaryWallets, user, authMode } = useInternalDynamicContext();
     const { availableWalletsContainerRef } = useWidgetContext();
     const isEmpty = secondaryWallets.length === 0;
-    return (jsxs("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: [jsx(Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: t('dyn_widget.other_wallets') }), jsx("div", { className: classNames('available-wallets__body', {
+    return (jsxs("div", { ref: availableWalletsContainerRef, className: 'dynamic-widget-wallets', "data-testid": 'dynamicWidgetWallets', children: [jsx(Typography, { weight: 'medium', variant: 'body_small', color: 'secondary', className: 'dynamic-widget-wallets__title', children: t('dyn_widget.other_wallets') }), jsx("div", { className: classNames('dynamic-widget-wallets__body', {
                     'dynamic-widget-wallets__body--apply-height': !isEmpty,
                 }), children: isEmpty ? (jsx(EmptyWallets, { text: t('dyn_widget.empty_wallets', {
                         action: authMode === 'connect-and-sign' ? 'Link' : 'Connect',
-                    }) })) : (jsx("div", { className: 'available-wallets__wallet-list', children: secondaryWallets.map((wallet, index) => {
+                    }) })) : (jsx("div", { className: 'dynamic-widget-wallets__body__wallet-list', children: secondaryWallets.map((wallet, index) => {
                         var _a;
                         return (jsx(Wallet, { ens: (_a = getWalletVerifiedCredential(wallet.address, user === null || user === void 0 ? void 0 : user.verifiedCredentials, wallet.chain)) === null || _a === void 0 ? void 0 : _a.nameService, wallet: wallet }, wallet.id));
                     }) })) })] }));

package/src/lib/utils/hooks/useWalletEventListeners/utils/index.d.ts

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

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/index.d.ts

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

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
-
-const sortAccountsByPrimaryWallet = (accounts, primaryWallet) => [...accounts].sort((account) => walletConnectorCore.isSameAddress(account, primaryWallet.address, primaryWallet.chain) ? -1 : 1);
-
-exports.sortAccountsByPrimaryWallet = sortAccountsByPrimaryWallet;

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.d.ts

@@ -1,2 +0,0 @@
-import { Wallet } from '../../../../../shared';
-export declare const sortAccountsByPrimaryWallet: (accounts: string[], primaryWallet: Wallet) => string[];

package/src/lib/utils/hooks/useWalletEventListeners/utils/sortAccountsByPrimaryWallet/sortAccountsByPrimaryWallet.js

@@ -1,5 +0,0 @@
-import { isSameAddress } from '@dynamic-labs/wallet-connector-core';
-
-const sortAccountsByPrimaryWallet = (accounts, primaryWallet) => [...accounts].sort((account) => isSameAddress(account, primaryWallet.address, primaryWallet.chain) ? -1 : 1);
-
-export { sortAccountsByPrimaryWallet };