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

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.cjs

@@ -21,7 +21,7 @@ var useWalletsConnectionState = require('../useWalletsConnectionState/useWallets
 var createLinkedWalletsFromWalletOptions = require('./utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs');
 var reconnectSocialWallet = require('./reconnectSocialWallet.cjs');
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, canHaveMultipleWalletsConnected, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = React.useState(false);
     const linkedWallets = React.useMemo(() => {
         if (!authToken) {
@@ -60,7 +60,9 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         computeConnectedStateForWallets();
     }, [primaryWalletId, computeConnectedStateForWallets]);
     const getPrimaryWallet = React.useCallback(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
-    const getSecondaryWallets = React.useCallback(() => wallets.filter((wallet) => wallet.id !== primaryWalletId), [primaryWalletId, wallets]);
+    const getSecondaryWallets = React.useCallback(() => canHaveMultipleWalletsConnected
+        ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
+        : [], [primaryWalletId, wallets, canHaveMultipleWalletsConnected]);
     const getSelectedWallet = React.useCallback((walletId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         const newWallet = wallets.find(({ id }) => id === walletId);
         if (!newWallet) {

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.d.ts

@@ -15,6 +15,7 @@ type Props = {
     primaryWalletId: string | undefined;
     user?: UserProfile;
     onboardingOnlyJwt?: string;
+    canHaveMultipleWalletsConnected?: boolean;
 };
 export interface UseWalletConnectors {
     computeConnectedStateForWallets: () => Promise<void>;
@@ -29,5 +30,5 @@ export interface UseWalletConnectors {
     walletConnectors: WalletConnector[];
     wallets: Wallet[];
 }
-export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }: Props) => UseWalletConnectors;
+export declare const useWalletConnectors: ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, canHaveMultipleWalletsConnected, }: Props) => UseWalletConnectors;
 export {};

package/src/lib/utils/hooks/useWalletConnectors/useWalletConnectors.js

@@ -17,7 +17,7 @@ import { useWalletsConnectionState } from '../useWalletsConnectionState/useWalle
 import { createLinkedWalletsFromWalletOptions } from './utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js';
 import { reconnectSocialWallet } from './reconnectSocialWallet.js';
 
-const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, }) => {
+const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: availableWallets, multiWalletWidgetState, setDesktopUri, setMultiWalletWidgetState, setQrcodeUri, primaryWalletId, setPrimaryWalletId, user, onboardingOnlyJwt, canHaveMultipleWalletsConnected, }) => {
     const [showQrcodeModal, setShowQrcodeModal] = useState(false);
     const linkedWallets = useMemo(() => {
         if (!authToken) {
@@ -56,7 +56,9 @@ const useWalletConnectors = ({ authMode, authToken, connectedWallets, wallets: a
         computeConnectedStateForWallets();
     }, [primaryWalletId, computeConnectedStateForWallets]);
     const getPrimaryWallet = useCallback(() => { var _a; return (_a = wallets.find((wallet) => wallet.id === primaryWalletId)) !== null && _a !== void 0 ? _a : null; }, [primaryWalletId, wallets]);
-    const getSecondaryWallets = useCallback(() => wallets.filter((wallet) => wallet.id !== primaryWalletId), [primaryWalletId, wallets]);
+    const getSecondaryWallets = useCallback(() => canHaveMultipleWalletsConnected
+        ? wallets.filter((wallet) => wallet.id !== primaryWalletId)
+        : [], [primaryWalletId, wallets, canHaveMultipleWalletsConnected]);
     const getSelectedWallet = useCallback((walletId) => __awaiter(void 0, void 0, void 0, function* () {
         const newWallet = wallets.find(({ id }) => id === walletId);
         if (!newWallet) {

package/src/lib/utils/types/ClassStyleProps.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export type ClassStyleProps = {
+    className?: string;
+    style?: CSSProperties;
+};

package/src/lib/utils/types/index.d.ts

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

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

@@ -59,7 +59,7 @@ const LoginView = () => {
             default:
                 return null;
         }
-    }), [logingViewSections, isLoading, setView]);
+    }), [logingViewSections, isLoading, numOfWallets, setView]);
     if (showWalletList) {
         return jsxRuntime.jsx(WalletList.WalletList, {});
     }

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

@@ -55,7 +55,7 @@ const LoginView = () => {
             default:
                 return null;
         }
-    }), [logingViewSections, isLoading, setView]);
+    }), [logingViewSections, isLoading, numOfWallets, setView]);
     if (showWalletList) {
         return jsx(WalletList, {});
     }

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.cjs

@@ -53,6 +53,7 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
+var Button = require('../../../../components/Button/Button.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
@@ -63,7 +64,7 @@ var useEmailProvider = require('../../../../utils/hooks/useEmailProvider/useEmai
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
-    var _a;
+    var _a, _b, _c;
     const { t } = reactI18next.useTranslation();
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
     const { setErrorMessage } = ErrorContext.useErrorContext();
@@ -122,7 +123,11 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsxRuntime.jsx("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: emailInputSuffixIcon, disabled: isLoading }) }));
+    return (jsxRuntime.jsxs("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput)
+                    ? emailInputSuffixIcon
+                    : null, disabled: isLoading }), !((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.emailSubmitButtonInsideInput) && (jsxRuntime.jsx(Button.Button, { dataTestId: 'email_submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'brand-primary', buttonPadding: 'large', expanded: true, typographyProps: {
+                    color: 'inherit',
+                }, children: "Continue" }))] }));
 };
 
 exports.EMAIL_REGEX = EMAIL_REGEX;

package/src/lib/views/LoginView/sections/EmailSignInSection/LoginEmailForm.js

@@ -1,5 +1,5 @@
 import { __awaiter } from '../../../../../../_virtual/_tslib.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { isEmailWalletConnector } from '@dynamic-labs/wallet-connector-core';
@@ -49,6 +49,7 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
+import { Button } from '../../../../components/Button/Button.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
 import '../../../../components/Popper/Popper/Popper.js';
@@ -59,7 +60,7 @@ import { useEmailProvider } from '../../../../utils/hooks/useEmailProvider/useEm
 
 const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError, currentEmail, }) => {
-    var _a;
+    var _a, _b, _c;
     const { t } = useTranslation();
     const { environmentId, wallets, projectSettings } = useInternalDynamicContext();
     const { setErrorMessage } = useErrorContext();
@@ -118,7 +119,11 @@ const LoginEmailForm = ({ isLoading: isExternalLoading, onSubmit, onSubmitError,
         }
     });
     // social sign in currently coupled to email... might be better to decouple
-    return (jsx("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: emailInputSuffixIcon, disabled: isLoading }) }));
+    return (jsxs("form", { className: 'login-with-email-form', onSubmit: (e) => handleSubmit(e), children: [jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, label: 'Enter your email', error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: ((_b = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _b === void 0 ? void 0 : _b.emailSubmitButtonInsideInput)
+                    ? emailInputSuffixIcon
+                    : null, disabled: isLoading }), !((_c = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal) === null || _c === void 0 ? void 0 : _c.emailSubmitButtonInsideInput) && (jsx(Button, { dataTestId: 'email_submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading, buttonVariant: 'brand-primary', buttonPadding: 'large', expanded: true, typographyProps: {
+                    color: 'inherit',
+                }, children: "Continue" }))] }));
 };
 
 export { EMAIL_REGEX, LoginEmailForm };

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));
                     }) })) })] }));