@dynamic-labs/sdk-react-core 4.9.3 → 4.9.5

package/src/lib/utils/functions/onrampProviders/index.cjs

@@ -3,22 +3,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var coinbase = require('./coinbase.cjs');
+var sdkApiCore = require('@dynamic-labs/sdk-api-core');
 
-/**
- * Registry of provider-specific URL formatters
- */
-const providerUrlFormatters = {
-    coinbaseOnramp: coinbase.formatCoinbaseOnrampUrl,
-};
 /**
  * Registry of provider display modes (iframe or popup)
+ *
+ * This mapping controls how each onramp provider is displayed in the UI.
+ * - 'popup': Opens in a new browser window/tab
+ * - 'iframe': Embedded directly in the current page
  */
 const providerDisplayModes = {
-    coinbaseOnramp: 'popup',
+    [sdkApiCore.ProviderEnum.CoinbaseOnramp]: 'popup',
     // Default for other providers is iframe
 };
 
-exports.formatCoinbaseOnrampUrl = coinbase.formatCoinbaseOnrampUrl;
 exports.providerDisplayModes = providerDisplayModes;
-exports.providerUrlFormatters = providerUrlFormatters;

package/src/lib/utils/functions/onrampProviders/index.d.ts

@@ -1,11 +1,8 @@
-import type { Wallet } from '@dynamic-labs/wallet-connector-core';
-import { formatCoinbaseOnrampUrl } from './coinbase';
-/**
- * Registry of provider-specific URL formatters
- */
-export declare const providerUrlFormatters: Record<string, (url: string, wallet: Wallet) => string>;
 /**
  * Registry of provider display modes (iframe or popup)
+ *
+ * This mapping controls how each onramp provider is displayed in the UI.
+ * - 'popup': Opens in a new browser window/tab
+ * - 'iframe': Embedded directly in the current page
  */
 export declare const providerDisplayModes: Record<string, 'iframe' | 'popup'>;
-export { formatCoinbaseOnrampUrl };

package/src/lib/utils/functions/onrampProviders/index.js

@@ -1,19 +1,16 @@
 'use client'
-import { formatCoinbaseOnrampUrl } from './coinbase.js';
-export { formatCoinbaseOnrampUrl } from './coinbase.js';
+import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
 
-/**
- * Registry of provider-specific URL formatters
- */
-const providerUrlFormatters = {
-    coinbaseOnramp: formatCoinbaseOnrampUrl,
-};
 /**
  * Registry of provider display modes (iframe or popup)
+ *
+ * This mapping controls how each onramp provider is displayed in the UI.
+ * - 'popup': Opens in a new browser window/tab
+ * - 'iframe': Embedded directly in the current page
  */
 const providerDisplayModes = {
-    coinbaseOnramp: 'popup',
+    [ProviderEnum.CoinbaseOnramp]: 'popup',
     // Default for other providers is iframe
 };
 
-export { providerDisplayModes, providerUrlFormatters };
+export { providerDisplayModes };

package/src/lib/utils/functions/openOnrampPopup.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
-var index = require('./onrampProviders/index.cjs');
 var openPopup = require('./openPopup/openPopup.cjs');
 
 const ONRAMP_POPUP_CONFIG = {
@@ -19,16 +18,30 @@ const ONRAMP_POPUP_CONFIG = {
  * @param setShowOnramp Callback to update the UI state when popup is closed
  * @param provider The onramp provider ID
  * @returns A promise that resolves when the popup is opened
+ * @throws Error if there are issues with URL, wallet compatibility, etc.
  */
 const openOnrampPopup = (url_1, wallet_1, setShowOnramp_1, ...args_1) => _tslib.__awaiter(void 0, [url_1, wallet_1, setShowOnramp_1, ...args_1], void 0, function* (url, wallet, setShowOnramp, provider = sdkApiCore.OnrampProviders.CoinbaseOnramp) {
-    // Format the URL with wallet information if a formatter exists for this provider
-    const formatUrl = index.providerUrlFormatters[provider] || ((url) => url);
-    const formattedUrl = wallet ? formatUrl(url, wallet) : url;
-    // Open the popup - errors will propagate to the caller
-    yield openPopup.openPopup(formattedUrl, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
-        // When the popup is closed (by user or programmatically), update the UI
+    try {
+        // Safety check: don't open popup with empty URL
+        if (!url) {
+            throw new Error('Cannot open onramp popup: Empty URL');
+        }
+        // Open the popup - errors will propagate to the caller
+        yield openPopup.openPopup(url, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
+            // When the popup is closed (by user or programmatically), update the UI
+            setShowOnramp(false);
+        });
+    }
+    catch (error) {
+        // Always set showOnramp to false on any error
         setShowOnramp(false);
-    });
+        // Re-throw any error
+        if (error instanceof Error) {
+            throw error;
+        }
+        // For non-Error objects, wrap in a generic Error
+        throw new Error('Error opening onramp popup');
+    }
 });
 
 exports.ONRAMP_POPUP_CONFIG = ONRAMP_POPUP_CONFIG;

package/src/lib/utils/functions/openOnrampPopup.d.ts

@@ -11,5 +11,6 @@ export declare const ONRAMP_POPUP_CONFIG: {
  * @param setShowOnramp Callback to update the UI state when popup is closed
  * @param provider The onramp provider ID
  * @returns A promise that resolves when the popup is opened
+ * @throws Error if there are issues with URL, wallet compatibility, etc.
  */
 export declare const openOnrampPopup: (url: string, wallet: Wallet | undefined, setShowOnramp: (show: boolean) => void, provider?: OnrampProviders) => Promise<void>;

package/src/lib/utils/functions/openOnrampPopup.js

@@ -1,7 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../_virtual/_tslib.js';
 import { OnrampProviders } from '@dynamic-labs/sdk-api-core';
-import { providerUrlFormatters } from './onrampProviders/index.js';
 import { openPopup } from './openPopup/openPopup.js';
 
 const ONRAMP_POPUP_CONFIG = {
@@ -15,16 +14,30 @@ const ONRAMP_POPUP_CONFIG = {
  * @param setShowOnramp Callback to update the UI state when popup is closed
  * @param provider The onramp provider ID
  * @returns A promise that resolves when the popup is opened
+ * @throws Error if there are issues with URL, wallet compatibility, etc.
  */
 const openOnrampPopup = (url_1, wallet_1, setShowOnramp_1, ...args_1) => __awaiter(void 0, [url_1, wallet_1, setShowOnramp_1, ...args_1], void 0, function* (url, wallet, setShowOnramp, provider = OnrampProviders.CoinbaseOnramp) {
-    // Format the URL with wallet information if a formatter exists for this provider
-    const formatUrl = providerUrlFormatters[provider] || ((url) => url);
-    const formattedUrl = wallet ? formatUrl(url, wallet) : url;
-    // Open the popup - errors will propagate to the caller
-    yield openPopup(formattedUrl, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
-        // When the popup is closed (by user or programmatically), update the UI
+    try {
+        // Safety check: don't open popup with empty URL
+        if (!url) {
+            throw new Error('Cannot open onramp popup: Empty URL');
+        }
+        // Open the popup - errors will propagate to the caller
+        yield openPopup(url, ONRAMP_POPUP_CONFIG.width, ONRAMP_POPUP_CONFIG.height, () => {
+            // When the popup is closed (by user or programmatically), update the UI
+            setShowOnramp(false);
+        });
+    }
+    catch (error) {
+        // Always set showOnramp to false on any error
         setShowOnramp(false);
-    });
+        // Re-throw any error
+        if (error instanceof Error) {
+            throw error;
+        }
+        // For non-Error objects, wrap in a generic Error
+        throw new Error('Error opening onramp popup');
+    }
 });
 
 export { ONRAMP_POPUP_CONFIG, openOnrampPopup };

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

@@ -160,7 +160,10 @@ const useTokenBalances = ({ accountAddress, networkId, chainName = sdkApiCore.Ch
             tokenBalances.setTokenBalanceVariable('error', errorMessage);
         }
         finally {
-            tokenBalances.setTokenBalanceVariable('tokenBalances', response);
+            // remove tokens with 0 balance. This should only be required
+            // for native tokens as they are returned in the response even if the balance is 0
+            const filteredResponse = response === null || response === void 0 ? void 0 : response.filter((token) => token.balance !== 0);
+            tokenBalances.setTokenBalanceVariable('tokenBalances', filteredResponse);
             tokenBalances.setTokenBalanceVariable('isLoading', false);
         }
     }), [

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

@@ -156,7 +156,10 @@ const useTokenBalances = ({ accountAddress, networkId, chainName = ChainEnum.Evm
             setTokenBalanceVariable('error', errorMessage);
         }
         finally {
-            setTokenBalanceVariable('tokenBalances', response);
+            // remove tokens with 0 balance. This should only be required
+            // for native tokens as they are returned in the response even if the balance is 0
+            const filteredResponse = response === null || response === void 0 ? void 0 : response.filter((token) => token.balance !== 0);
+            setTokenBalanceVariable('tokenBalances', filteredResponse);
             setTokenBalanceVariable('isLoading', false);
         }
     }), [

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

@@ -7,7 +7,6 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var React = require('react');
 var logger = require('../../../shared/logger.cjs');
 var loadingAndLifecycle = require('../../../store/state/loadingAndLifecycle.cjs');
-var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
 var projectSettings = require('../../../store/state/projectSettings/projectSettings.cjs');
 var handleStoreAndEnvironmentMismatch = require('./handleStoreAndEnvironmentMismatch/handleStoreAndEnvironmentMismatch.cjs');
 var handleUserDataOutOfSync = require('./handleUserDataOutOfSync/handleUserDataOutOfSync.cjs');
@@ -42,11 +41,6 @@ const useValidateSession = ({ environmentId, handleLogOut }) => {
         didRunRef.current = true;
         validateSession(projectSettings$1);
     }, [validateSession, projectSettings$1]);
-    useDynamicEvents.useInternalDynamicEvents('triggerSessionValidation', () => {
-        if (!projectSettings$1)
-            return;
-        validateSession(projectSettings$1);
-    });
 };
 
 exports.useValidateSession = useValidateSession;

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

@@ -3,7 +3,6 @@ import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { useRef, useCallback, useEffect } from 'react';
 import { logger } from '../../../shared/logger.js';
 import { setLoadingAndLifecycle } from '../../../store/state/loadingAndLifecycle.js';
-import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
 import { useProjectSettings } from '../../../store/state/projectSettings/projectSettings.js';
 import { handleStoreAndEnvironmentMismatch } from './handleStoreAndEnvironmentMismatch/handleStoreAndEnvironmentMismatch.js';
 import { handleUserDataOutOfSync } from './handleUserDataOutOfSync/handleUserDataOutOfSync.js';
@@ -38,11 +37,6 @@ const useValidateSession = ({ environmentId, handleLogOut }) => {
         didRunRef.current = true;
         validateSession(projectSettings);
     }, [validateSession, projectSettings]);
-    useInternalDynamicEvents('triggerSessionValidation', () => {
-        if (!projectSettings)
-            return;
-        validateSession(projectSettings);
-    });
 };
 
 export { useValidateSession };

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.cjs

@@ -71,6 +71,7 @@ var ListTile = require('../../../../../components/ListTile/ListTile.cjs');
 require('../../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../../../components/Badge/Badge.cjs');
 require('formik');
 require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../../store/state/sendBalances.cjs');
@@ -88,7 +89,6 @@ require('../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs'
 require('../../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../../../components/Badge/Badge.cjs');
 require('../../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');

package/src/lib/views/LoginView/sections/WalletSignInSection/ListItemButton/ListItemButton.js

@@ -67,6 +67,7 @@ import { ListTile } from '../../../../../components/ListTile/ListTile.js';
 import '../../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../../components/IconButton/IconButton.js';
 import '../../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../../../components/Badge/Badge.js';
 import 'formik';
 import '../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../../store/state/sendBalances.js';
@@ -84,7 +85,6 @@ import '../../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../../../components/Badge/Badge.js';
 import '../../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../../store/state/connectorsInitializing/connectorsInitializing.js';

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

@@ -74,6 +74,7 @@ require('react-focus-lock');
 require('qrcode');
 require('formik');
 require('../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
+var useWalletList = require('../../../utils/hooks/useWalletList/useWalletList.cjs');
 require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
@@ -103,21 +104,15 @@ var useInternalDynamicContext = require('../../../context/DynamicContext/useDyna
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
     const loginView = useViewSettings.useViewSettings(sdkApiCore.SdkViewType.Login);
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletConnectorOptions, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletsFilter, } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();
     const { enabledSocialProviders } = SocialRedirectContext.useSocialRedirectContext();
+    const { numberOfWallets } = useWalletList.useWalletList({
+        viewWalletsFilter: walletsFilter,
+    });
     const hasSocialProvidersEnabled = Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length);
     const hasEmailProviderEnabled = isEmailProviderEnabled.isEmailProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const hasPhoneProviderEnabled = isPhoneNumberProviderEnabled.isPhoneNumberProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
-    /** 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
-     * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
-     * wallets and then display an empty wallet list (since turnkey doesn't render)
-     */
-    const selectableWallets = (walletsFilter
-        ? walletsFilter(walletConnectorOptions)
-        : walletConnectorOptions).filter(({ key }) => key !== 'turnkey');
     const isWalletOnly = React.useMemo(() => {
         var _a;
         if (!projectSettings) {
@@ -158,11 +153,11 @@ const useLoginView = () => {
             sections.find((section) => section.type === 'wallet')) {
             logger.logger.error('Failed to render WalletSignInSection - no chains enabled');
         }
-        if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
+        if (numberOfWallets > 0) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
+    }, [numberOfWallets, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -185,8 +180,7 @@ const useLoginView = () => {
             showPhone: hasPhoneProviderEnabled,
             showSocial: Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length),
             // is email only is set in the project settings when the "Email (Web2) only" is toggled on in the dashboard
-            showWallets: Boolean(selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) &&
-                !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
+            showWallets: numberOfWallets > 0 && !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
             socialAboveEmail,
             splitEmailAndSocial,
             web3Layout: authorizationViewDisplayOrder === 'web3',
@@ -216,7 +210,7 @@ const useLoginView = () => {
         hasPhoneProviderEnabled,
         loginView === null || loginView === void 0 ? void 0 : loginView.sections,
         projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal,
-        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+        numberOfWallets,
         t,
     ]);
     return {

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

@@ -70,6 +70,7 @@ import 'react-focus-lock';
 import 'qrcode';
 import 'formik';
 import '../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
+import { useWalletList } from '../../../utils/hooks/useWalletList/useWalletList.js';
 import '../../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
@@ -99,21 +100,15 @@ import { useInternalDynamicContext } from '../../../context/DynamicContext/useDy
 const NUMBER_OF_WALLETS = 3;
 const useLoginView = () => {
     const loginView = useViewSettings(SdkViewType.Login);
-    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletConnectorOptions, walletsFilter, } = useInternalDynamicContext();
+    const { projectSettings, authorizationViewDisplayOrder, loginWithEmail, walletsFilter, } = useInternalDynamicContext();
     const { t } = useTranslation();
     const { enabledSocialProviders } = useSocialRedirectContext();
+    const { numberOfWallets } = useWalletList({
+        viewWalletsFilter: walletsFilter,
+    });
     const hasSocialProvidersEnabled = Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length);
     const hasEmailProviderEnabled = isEmailProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
     const hasPhoneProviderEnabled = isPhoneNumberProviderEnabled(projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers);
-    /** 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
-     * will actually be rendered. It would be especially bad to only have for ex "turnkey" in
-     * wallets and then display an empty wallet list (since turnkey doesn't render)
-     */
-    const selectableWallets = (walletsFilter
-        ? walletsFilter(walletConnectorOptions)
-        : walletConnectorOptions).filter(({ key }) => key !== 'turnkey');
     const isWalletOnly = useMemo(() => {
         var _a;
         if (!projectSettings) {
@@ -154,11 +149,11 @@ const useLoginView = () => {
             sections.find((section) => section.type === 'wallet')) {
             logger.error('Failed to render WalletSignInSection - no chains enabled');
         }
-        if (selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) {
+        if (numberOfWallets > 0) {
             return sections;
         }
         return sections.filter((section) => section.type !== 'wallet');
-    }, [selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
+    }, [numberOfWallets, projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.chains]);
     /**
      * returns the login view sections to be displayed in order from projectSettings?.sdk?.views
      * and has backwards compatibility with project settings design.modal props
@@ -181,8 +176,7 @@ const useLoginView = () => {
             showPhone: hasPhoneProviderEnabled,
             showSocial: Boolean(enabledSocialProviders === null || enabledSocialProviders === void 0 ? void 0 : enabledSocialProviders.length),
             // is email only is set in the project settings when the "Email (Web2) only" is toggled on in the dashboard
-            showWallets: Boolean(selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length) &&
-                !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
+            showWallets: numberOfWallets > 0 && !((_f = (_e = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _e === void 0 ? void 0 : _e.modal) === null || _f === void 0 ? void 0 : _f.emailOnly),
             socialAboveEmail,
             splitEmailAndSocial,
             web3Layout: authorizationViewDisplayOrder === 'web3',
@@ -212,7 +206,7 @@ const useLoginView = () => {
         hasPhoneProviderEnabled,
         loginView === null || loginView === void 0 ? void 0 : loginView.sections,
         projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design.modal,
-        selectableWallets === null || selectableWallets === void 0 ? void 0 : selectableWallets.length,
+        numberOfWallets,
         t,
     ]);
     return {

package/src/lib/views/Passkey/EmbeddedAuthChoiceCards/ActionCard/ActionCard.cjs

@@ -71,6 +71,7 @@ var Icon = require('../../../../components/Icon/Icon.cjs');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../../components/Badge/Badge.cjs');
 var spinner = require('../../../../components/Spinner/spinner.cjs');
 require('formik');
 require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
@@ -89,7 +90,6 @@ require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../../components/Badge/Badge.cjs');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');

package/src/lib/views/Passkey/EmbeddedAuthChoiceCards/ActionCard/ActionCard.js

@@ -67,6 +67,7 @@ import { Icon } from '../../../../components/Icon/Icon.js';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../../components/Badge/Badge.js';
 import { Spinner } from '../../../../components/Spinner/spinner.js';
 import 'formik';
 import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
@@ -85,7 +86,6 @@ import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../../components/Badge/Badge.js';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';

package/src/lib/views/SelectWalletInWalletGroupView/components/WalletGroupItem/WalletGroupItem.cjs

@@ -75,6 +75,7 @@ var ListTile = require('../../../../components/ListTile/ListTile.cjs');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../../components/Badge/Badge.cjs');
 require('formik');
 require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../store/state/sendBalances.cjs');
@@ -92,7 +93,6 @@ require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../../components/Badge/Badge.cjs');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');

package/src/lib/views/SelectWalletInWalletGroupView/components/WalletGroupItem/WalletGroupItem.js

@@ -71,6 +71,7 @@ import { ListTile } from '../../../../components/ListTile/ListTile.js';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../../components/Badge/Badge.js';
 import 'formik';
 import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../store/state/sendBalances.js';
@@ -88,7 +89,6 @@ import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../../components/Badge/Badge.js';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';

package/src/lib/views/WalletGroupView/components/WalletGroupItem/WalletGroupItem.cjs

@@ -75,6 +75,7 @@ var ListTile = require('../../../../components/ListTile/ListTile.cjs');
 require('../../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../../components/Badge/Badge.cjs');
 require('formik');
 require('../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../../store/state/sendBalances.cjs');
@@ -92,7 +93,6 @@ require('../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../../components/Badge/Badge.cjs');
 require('../../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../../store/state/connectorsInitializing/connectorsInitializing.cjs');

package/src/lib/views/WalletGroupView/components/WalletGroupItem/WalletGroupItem.js

@@ -71,6 +71,7 @@ import { ListTile } from '../../../../components/ListTile/ListTile.js';
 import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../../components/IconButton/IconButton.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../../components/Badge/Badge.js';
 import 'formik';
 import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../../store/state/sendBalances.js';
@@ -88,7 +89,6 @@ import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../../context/ConnectWithOtpContext/constants.js';
 import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../../components/Badge/Badge.js';
 import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';

package/src/lib/views/WalletList/WalletListItem/WalletListItem.cjs

@@ -75,6 +75,7 @@ var ListTile = require('../../../components/ListTile/ListTile.cjs');
 require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+var Badge = require('../../../components/Badge/Badge.cjs');
 require('formik');
 require('../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
 require('../../../store/state/sendBalances.cjs');
@@ -92,7 +93,6 @@ require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
 require('../../../context/ConnectWithOtpContext/constants.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
-var Badge = require('../../../components/Badge/Badge.cjs');
 require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
 require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
 require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');

package/src/lib/views/WalletList/WalletListItem/WalletListItem.js

@@ -71,6 +71,7 @@ import { ListTile } from '../../../components/ListTile/ListTile.js';
 import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/MenuList/Dropdown/Dropdown.js';
+import { Badge } from '../../../components/Badge/Badge.js';
 import 'formik';
 import '../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
 import '../../../store/state/sendBalances.js';
@@ -88,7 +89,6 @@ import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
 import '../../../context/ConnectWithOtpContext/constants.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
-import { Badge } from '../../../components/Badge/Badge.js';
 import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
 import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
 import '../../../store/state/connectorsInitializing/connectorsInitializing.js';

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceItem/TokenBalanceItem.cjs

@@ -104,6 +104,9 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
 const TokenBalanceItem = ({ tokenBalance, }) => {
     const { showFiat } = useInternalDynamicContext.useInternalDynamicContext();
     const roundToSixDecimal = (value) => {
+        if (value === 0) {
+            return '0';
+        }
         const rounded = Math.round(value * 1e6) / 1e6; // 10^6 is 1000000
         return rounded === 0 ? '<0.000001' : rounded;
     };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletBalance/TokenBalanceItem/TokenBalanceItem.js

@@ -100,6 +100,9 @@ const currencyFormatter = new Intl.NumberFormat('en-US', {
 const TokenBalanceItem = ({ tokenBalance, }) => {
     const { showFiat } = useInternalDynamicContext();
     const roundToSixDecimal = (value) => {
+        if (value === 0) {
+            return '0';
+        }
         const rounded = Math.round(value * 1e6) / 1e6; // 10^6 is 1000000
         return rounded === 0 ? '<0.000001' : rounded;
     };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveBitcoinWalletAddresses/ActiveBitcoinWalletAddresses.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
+import { MenuOption } from '../../../../../components';
 import { Wallet } from '../../../../../shared';
-import { DotsMenuOption } from '../../DotsMenu';
 type Props = {
-    menuOption: DotsMenuOption[];
+    menuOption: MenuOption[];
     wallet?: Wallet;
 };
 export declare const ActiveBitcoinWalletAddresses: ({ menuOption, wallet }: Props) => JSX.Element;

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

@@ -72,7 +72,7 @@ require('react-focus-lock');
 require('../../../context/DynamicWidgetContext.cjs');
 require('../../../../../components/IconButton/IconButton.cjs');
 var Dropdown = require('../../../../../components/MenuList/Dropdown/Dropdown.cjs');
-var DotsMenuDropdown = require('../../DotsMenuDropdown/DotsMenuDropdown.cjs');
+var DropdownMenu = require('../../../../../components/MenuList/DropdownMenu/DropdownMenu.cjs');
 var BaseButton = require('../../../../../components/BaseButton/BaseButton.cjs');
 require('formik');
 require('../../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.cjs');
@@ -144,7 +144,7 @@ const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth =
     const menuIcon = React.useMemo(() => (jsxRuntime.jsx("div", { ref: iconRef, className: 'active-wallet-information__handle-icon', children: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 }), variant: 'yellow' })) : (jsxRuntime.jsx(arrowDown.ReactComponent, { width: 24, height: 24 })) })), [showAlert]);
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs(BaseButton.BaseButton, { onClick: handleMenuOpen, dataTestId: 'active-wallet-information-button', children: [jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
                                     ? 'active-wallet-information__handle--full-width'
-                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsxRuntime.jsx(DotsMenuDropdown.DotsMenuDropdown, { options: menuOption, setShowMenu: setShowMenu }) })] }));
+                                    : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', "data-testid": 'header-text', children: header }), header && menuIcon] }), jsxRuntime.jsxs("div", { className: 'active-wallet-information__handle-row', children: [jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) }), !header && menuIcon] })] }), jsxRuntime.jsx(Dropdown.Dropdown, { isOpen: showMenu, onClickOutside: handleMenuClose, onScroll: handleMenuClose, anchorRef: iconRef, anchorOrigin: 'bottom-right', transformOrigin: 'top-left', children: jsxRuntime.jsx(DropdownMenu.DropdownMenu, { options: menuOption, setShowMenu: setShowMenu }) })] }));
 };
 
 exports.ActiveWalletAddress = ActiveWalletAddress;