@dynamic-labs/sdk-react-core 4.0.0-alpha.47 → 4.0.0-alpha.49

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

@@ -2,31 +2,31 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useWalletBookContext } from '@dynamic-labs/wallet-book';
-import { StorageService } from '@dynamic-labs/utils';
+import { StorageService, pipe } from '@dynamic-labs/utils';
+import { ReactComponent as SvgNoWalletFound } from '../../assets/no-wallet-found.js';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
 import { Search } from '../../components/Search/Search.js';
 import { Skeleton } from '../../components/Skeleton/Skeleton.js';
-import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
-import { WALLET_PICKER_SEARCH_KEY, LAST_USED_WALLET } from '../../utils/constants/localStorage.js';
-import '../../utils/constants/colors.js';
-import '../../utils/constants/values.js';
-import { walletListBuilder } from '../../utils/functions/walletListBuilder/walletListBuilder.js';
-import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import { WALLET_PICKER_SEARCH_KEY, LAST_USED_WALLET } from '../../utils/constants/localStorage.js';
+import '../../utils/constants/colors.js';
+import '../../utils/constants/values.js';
 import { useEffectOnce } from '../../shared/utils/hooks/useEffectOnce/useEffectOnce.js';
 import '../../store/state/loadingAndLifecycle.js';
 import '../../shared/consts/index.js';
 import '../../events/dynamicEvents.js';
 import '../../../../_virtual/_tslib.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
+import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
+import '../../store/state/nonce/nonce.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
 import '../../locale/locale.js';
@@ -34,7 +34,6 @@ import '../../store/state/projectSettings/projectSettings.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { useUserWallets } from '../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../utils/functions/compareChains/compareChains.js';
@@ -50,7 +49,9 @@ import '../CollectUserDataView/useFields.js';
 import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../store/state/walletConnectorOptions.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import { useWalletGroups } from '../../store/state/walletOptions/walletOptions.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
@@ -67,18 +68,18 @@ import '../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'react-focus-lock';
-import { ReactComponent as SvgNoWalletFound } from '../../assets/no-wallet-found.js';
 import 'qrcode';
 import 'formik';
 import '../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
-import { FilterBridgeChainsName } from '../../utils/functions/walletFilters/index.js';
 import { DefaultFooter } from '../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.js';
+import { FilterBridgeChainsName } from '../../utils/functions/walletFilters/index.js';
+import { walletListBuilder } from '../../utils/functions/walletListBuilder/walletListBuilder.js';
 import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { SearchNotFoundMessage } from './SearchNotFoundMessage/SearchNotFoundMessage.js';
-import { WalletListItem } from './WalletListItem/WalletListItem.js';
 import { WalletListGridTabs } from './WalletListGridTabs/WalletListGridTabs.js';
-import { getEffectiveWalletFilter } from './utils/getEffectiveWalletFilter.js';
+import { WalletListItem } from './WalletListItem/WalletListItem.js';
 import { getEffectiveRecommendedWallets } from './utils/getEffectiveRecommendedWallets.js';
+import { getEffectiveWalletFilter } from './utils/getEffectiveWalletFilter.js';
 import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
@@ -87,6 +88,7 @@ import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../context/PasskeyContext/PasskeyContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../store/state/sendBalances.js';
+import '@dynamic-labs/ethereum-aa';
 import '../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../context/FooterAnimationContext/index.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -97,7 +99,7 @@ import '../../store/state/tokenBalances.js';
 import '../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 
-const WalletList = ({ isWalletConnectList = false, }) => {
+const WalletList = ({ isWalletConnectList = false, onSelectWallet, viewWalletsFilter, }) => {
     var _a, _b;
     /**
      * Clear search key on unmount
@@ -105,7 +107,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     useEffectOnce(() => () => StorageService === null || StorageService === void 0 ? void 0 : StorageService.setItem(WALLET_PICKER_SEARCH_KEY, ''));
     const { walletsFilter, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, authMode, multiWallet, recommendedWallets, selectedTabIndex, setSelectedTabIndex, selectedTabSettings, tabsItems, } = useInternalDynamicContext();
     const userWallets = useUserWallets();
-    const { walletBook } = useWalletBookContext();
+    const walletGroups = useWalletGroups();
     const { error } = useErrorContext();
     const { showDefaultFooter } = useAuthLayoutChecks();
     const [footerBorderIsVisible, setFooterBorderIsVisible] = useState(true);
@@ -115,6 +117,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         FilterBridgeChainsName(bridgeChainsToConnect[0].chain);
     const filteredBridgeChains = getFilteredBridgeChains && getFilteredBridgeChains(walletConnectorOptions);
     const effectiveRecommendedWallets = getEffectiveRecommendedWallets(selectedTabSettings, recommendedWallets);
+    const effectiveWalletsFilter = getEffectiveWalletFilter(selectedTabSettings, walletsFilter);
     const { numberOfWallets, walletsList } = walletListBuilder({
         authMode,
         groupWallets: true,
@@ -127,8 +130,11 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         searchFilter: filterValue,
         showMoreWalletsWithFilter: true,
         userWallets,
-        walletBook,
-        walletsFilter: getEffectiveWalletFilter(selectedTabSettings, walletsFilter),
+        walletGroups,
+        // use both filters if available, else use the viewWalletsFilter or effectiveWalletsFilter
+        walletsFilter: viewWalletsFilter && effectiveWalletsFilter
+            ? pipe(viewWalletsFilter).pipe(effectiveWalletsFilter)
+            : viewWalletsFilter || effectiveWalletsFilter,
     });
     const isSearchEnabled = Boolean(filterValue) ||
         (numberOfWallets > defaultNumberOfWalletsToShow &&
@@ -164,7 +170,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
                     items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsx(ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsx("div", { className: 'wallet-list__container', children: jsxs("div", { className: classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
                         'wallet-list__scroll-container--fixed-height': isTabsEnabled,
-                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [walletConnectorOptions.length === 0 && (jsx(ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet, index) => (jsx(WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange(''), recommendedWallets: effectiveRecommendedWallets }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsx(DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
+                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [walletConnectorOptions.length === 0 && (jsx(ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet, index) => (jsx(WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange(''), recommendedWallets: effectiveRecommendedWallets, onSelectWallet: onSelectWallet }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsx(DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
 };
 
 export { WalletList };

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

@@ -0,0 +1,15 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useWalletItemActions = require('../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
+var WalletList = require('../WalletList.cjs');
+
+const WalletListForDefaultConnection = ({ isWalletConnectList }) => {
+    const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    return (jsxRuntime.jsx(WalletList.WalletList, { onSelectWallet: handleWalletItemClick, isWalletConnectList: isWalletConnectList }));
+};
+
+exports.WalletListForDefaultConnection = WalletListForDefaultConnection;

package/src/lib/views/WalletList/WalletListForDefaultConnection/WalletListForDefaultConnection.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type WalletListForDefaultConnectionProps = {
+    isWalletConnectList?: boolean;
+};
+export declare const WalletListForDefaultConnection: FC<WalletListForDefaultConnectionProps>;
+export {};

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

@@ -0,0 +1,11 @@
+'use client'
+import { jsx } from 'react/jsx-runtime';
+import { useWalletItemActions } from '../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
+import { WalletList } from '../WalletList.js';
+
+const WalletListForDefaultConnection = ({ isWalletConnectList }) => {
+    const { handleWalletItemClick } = useWalletItemActions();
+    return (jsx(WalletList, { onSelectWallet: handleWalletItemClick, isWalletConnectList: isWalletConnectList }));
+};
+
+export { WalletListForDefaultConnection };

package/src/lib/views/WalletList/WalletListForDefaultConnection/index.d.ts

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

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

@@ -27,6 +27,7 @@ require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
+require('../../../store/state/nonce/nonce.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../store/state/user/user.cjs');
 require('../../../locale/locale.cjs');
@@ -34,7 +35,6 @@ require('../../../store/state/projectSettings/projectSettings.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../utils/functions/compareChains/compareChains.cjs');
@@ -50,7 +50,8 @@ require('../../CollectUserDataView/useFields.cjs');
 require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../../store/state/walletConnectorOptions.cjs');
+require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 var Typography = require('../../../components/Typography/Typography.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
@@ -86,6 +87,7 @@ require('../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
+require('@dynamic-labs/ethereum-aa');
 
 const WalletListGridTabs = ({ items, onSelect, value, }) => (jsxRuntime.jsx("div", { className: 'wallet-list-grid-tabs', children: items.map((item, index) => {
         const selected = value === index;

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

@@ -23,6 +23,7 @@ import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
+import '../../../store/state/nonce/nonce.js';
 import '../../../config/ApiEndpoint.js';
 import '../../../store/state/user/user.js';
 import '../../../locale/locale.js';
@@ -30,7 +31,6 @@ import '../../../store/state/projectSettings/projectSettings.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../utils/functions/compareChains/compareChains.js';
@@ -46,7 +46,8 @@ import '../../CollectUserDataView/useFields.js';
 import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../../store/state/walletConnectorOptions.js';
+import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import { Typography } from '../../../components/Typography/Typography.js';
 import '../../../context/FooterAnimationContext/index.js';
@@ -82,6 +83,7 @@ import '../../../components/IsBrowser/IsBrowser.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
+import '@dynamic-labs/ethereum-aa';
 
 const WalletListGridTabs = ({ items, onSelect, value, }) => (jsx("div", { className: 'wallet-list-grid-tabs', children: items.map((item, index) => {
         const selected = value === index;

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

@@ -7,17 +7,17 @@ var _tslib = require('../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var walletBook = require('@dynamic-labs/wallet-book');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
-require('@dynamic-labs/iconic');
-var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
-require('react');
-var stroke = require('../../../shared/assets/stroke.cjs');
 require('@dynamic-labs/utils');
 require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../../components/Alert/Alert.cjs');
+require('react');
 require('../../../events/dynamicEvents.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var stroke = require('../../../shared/assets/stroke.cjs');
 var getWalletListItemLabel = require('../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.cjs');
 require('../../../store/state/loadingAndLifecycle.cjs');
 require('../../../shared/consts/index.cjs');
@@ -27,6 +27,7 @@ require('../../../utils/constants/colors.cjs');
 require('../../../utils/constants/values.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
+require('../../../store/state/nonce/nonce.cjs');
 var pixelToRem = require('../../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('../../../store/state/user/user.cjs');
@@ -35,7 +36,6 @@ require('../../../store/state/projectSettings/projectSettings.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../../utils/functions/compareChains/compareChains.cjs');
@@ -51,8 +51,8 @@ require('../../CollectUserDataView/useFields.cjs');
 require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../../store/state/walletConnectorOptions.cjs');
-var useWalletItemActions = require('../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
+require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+var walletOptions = require('../../../store/state/walletOptions/walletOptions.cjs');
 require('react-i18next');
 var Typography = require('../../../components/Typography/Typography.cjs');
 require('../../../context/FooterAnimationContext/index.cjs');
@@ -62,9 +62,9 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
 require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
-var isWalletGroup = require('../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
-var WalletGroupContext = require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
 var ListTileAnimatedTrailing = require('../../../components/ListTileAnimatedTrailing/ListTileAnimatedTrailing.cjs');
+var WalletGroupContext = require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+var isWalletGroup = require('../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
 require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
 require('react-focus-lock');
 var Icon = require('../../../components/Icon/Icon.cjs');
@@ -93,14 +93,15 @@ require('../../../components/IsBrowser/IsBrowser.cjs');
 require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
+require('@dynamic-labs/ethereum-aa');
 
-const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommendedWallets, tile = ({ leading, name, onClick, trailing }) => (jsxRuntime.jsx(ListTile.ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name })), }) => {
-    var _a;
+const DefaultTile = ({ leading, name, onClick, trailing, }) => (jsxRuntime.jsx(ListTile.ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name }));
+const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommendedWallets, tile = DefaultTile, onSelectWallet, }) => {
+    var _a, _b, _c, _d, _e;
     const { navigateToWalletGroup } = WalletGroupContext.useWalletGroupContext();
     const { setView } = ViewContext.useViewContext();
     const _isWalletGroup = isWalletGroup.isWalletGroup(wallet);
-    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
-    const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    const walletGroups = walletOptions.useWalletGroups();
     const labelSettings = getWalletListItemLabel.getWalletListItemLabel({
         recommendedWallets,
         wallet,
@@ -112,22 +113,20 @@ const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommen
         }
         onResetSearchValue === null || onResetSearchValue === void 0 ? void 0 : onResetSearchValue('');
         if (_isWalletGroup) {
-            return navigateToWalletGroup(wallet);
+            return navigateToWalletGroup(wallet, { onSelectWallet });
         }
         if (walletConnectorCore.isHardwareWalletConnector(wallet.walletConnector) &&
             wallet.walletConnector.canConnectWithHardwareWallet()) {
-            setView('select-hardware-wallet', {
-                onSelectWallet: handleWalletItemClick,
-                wallet,
-            });
+            setView('select-hardware-wallet', { onSelectWallet, wallet });
             return;
         }
-        yield handleWalletItemClick(wallet);
+        onSelectWallet(wallet);
     });
     const name = _isWalletGroup
-        ? walletBook.getWalletGroup(walletBook$1, wallet.key).name
+        ? (_a = walletGroups[wallet.key]) === null || _a === void 0 ? void 0 : _a.name
         : wallet.walletConnector.metadata.name;
-    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) }, isGroup: _isWalletGroup }));
+    const icon = (_c = (_b = wallet.walletConnector) === null || _b === void 0 ? void 0 : _b.metadata.icon) !== null && _c !== void 0 ? _c : (_e = (_d = walletGroups[wallet.key]) === null || _d === void 0 ? void 0 : _d.brand) === null || _e === void 0 ? void 0 : _e.icon;
+    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { className: 'wallet-list-item__leading', icon: icon, walletKey: wallet.key, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) }, isGroup: _isWalletGroup }));
     const trailing = (jsxRuntime.jsx(ListTileAnimatedTrailing.ListTileAnimatedTrailing, { hoverElement: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', size: 'mini', children: jsxRuntime.jsx(stroke.ReactComponent, {}) }), children: labelSettings && (jsxRuntime.jsx(Badge.Badge, { dot: !labelSettings.isRecommended, variant: labelSettings.isRecommended ? 'primary' : 'secondary', text: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: labelSettings.label }) })) }));

package/src/lib/views/WalletList/WalletListItem/WalletListItem.d.ts

@@ -1,2 +1,18 @@
-import { WalletListItemComponent } from './WalletListItem.types';
-export declare const WalletListItem: WalletListItemComponent;
+import { FC, ReactElement, ReactNode } from 'react';
+import { RecommendedWallet, WalletOption } from '../../../shared';
+export type WalletListItemTileProps = {
+    leading: ReactNode;
+    name: string;
+    onClick: () => void;
+    trailing: ReactNode;
+};
+export type WalletListItemTile = (props: WalletListItemTileProps) => ReactElement;
+export type WalletListItemProps = {
+    onResetSearchValue?: (newSearchValue: string) => void;
+    tile?: WalletListItemTile;
+    wallet: WalletOption;
+    disabled?: boolean;
+    recommendedWallets?: RecommendedWallet[];
+    onSelectWallet: (wallet: WalletOption) => void;
+};
+export declare const WalletListItem: FC<WalletListItemProps>;

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

@@ -1,19 +1,19 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { useWalletBookContext, getWalletGroup, WalletIcon } from '@dynamic-labs/wallet-book';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
 import { isHardwareWalletConnector } from '@dynamic-labs/wallet-connector-core';
-import '@dynamic-labs/iconic';
-import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
-import 'react';
-import { ReactComponent as SvgStroke } from '../../../shared/assets/stroke.js';
 import '@dynamic-labs/utils';
 import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../../components/Alert/Alert.js';
+import 'react';
 import '../../../events/dynamicEvents.js';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgStroke } from '../../../shared/assets/stroke.js';
 import { getWalletListItemLabel } from '../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.js';
 import '../../../store/state/loadingAndLifecycle.js';
 import '../../../shared/consts/index.js';
@@ -23,6 +23,7 @@ import '../../../utils/constants/colors.js';
 import '../../../utils/constants/values.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
+import '../../../store/state/nonce/nonce.js';
 import { pixelToRem } from '../../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../../config/ApiEndpoint.js';
 import '../../../store/state/user/user.js';
@@ -31,7 +32,6 @@ import '../../../store/state/projectSettings/projectSettings.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../../utils/functions/compareChains/compareChains.js';
@@ -47,8 +47,8 @@ import '../../CollectUserDataView/useFields.js';
 import '../../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../../store/state/walletConnectorOptions.js';
-import { useWalletItemActions } from '../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
+import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import { useWalletGroups } from '../../../store/state/walletOptions/walletOptions.js';
 import 'react-i18next';
 import { Typography } from '../../../components/Typography/Typography.js';
 import '../../../context/FooterAnimationContext/index.js';
@@ -58,9 +58,9 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
 import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
-import { isWalletGroup } from '../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
-import { useWalletGroupContext } from '../../../context/WalletGroupContext/WalletGroupContext.js';
 import { ListTileAnimatedTrailing } from '../../../components/ListTileAnimatedTrailing/ListTileAnimatedTrailing.js';
+import { useWalletGroupContext } from '../../../context/WalletGroupContext/WalletGroupContext.js';
+import { isWalletGroup } from '../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
 import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
 import 'react-focus-lock';
 import { Icon } from '../../../components/Icon/Icon.js';
@@ -89,14 +89,15 @@ import '../../../components/IsBrowser/IsBrowser.js';
 import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
+import '@dynamic-labs/ethereum-aa';
 
-const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommendedWallets, tile = ({ leading, name, onClick, trailing }) => (jsx(ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name })), }) => {
-    var _a;
+const DefaultTile = ({ leading, name, onClick, trailing, }) => (jsx(ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name }));
+const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommendedWallets, tile = DefaultTile, onSelectWallet, }) => {
+    var _a, _b, _c, _d, _e;
     const { navigateToWalletGroup } = useWalletGroupContext();
     const { setView } = useViewContext();
     const _isWalletGroup = isWalletGroup(wallet);
-    const { walletBook } = useWalletBookContext();
-    const { handleWalletItemClick } = useWalletItemActions();
+    const walletGroups = useWalletGroups();
     const labelSettings = getWalletListItemLabel({
         recommendedWallets,
         wallet,
@@ -108,22 +109,20 @@ const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommen
         }
         onResetSearchValue === null || onResetSearchValue === void 0 ? void 0 : onResetSearchValue('');
         if (_isWalletGroup) {
-            return navigateToWalletGroup(wallet);
+            return navigateToWalletGroup(wallet, { onSelectWallet });
         }
         if (isHardwareWalletConnector(wallet.walletConnector) &&
             wallet.walletConnector.canConnectWithHardwareWallet()) {
-            setView('select-hardware-wallet', {
-                onSelectWallet: handleWalletItemClick,
-                wallet,
-            });
+            setView('select-hardware-wallet', { onSelectWallet, wallet });
             return;
         }
-        yield handleWalletItemClick(wallet);
+        onSelectWallet(wallet);
     });
     const name = _isWalletGroup
-        ? getWalletGroup(walletBook, wallet.key).name
+        ? (_a = walletGroups[wallet.key]) === null || _a === void 0 ? void 0 : _a.name
         : wallet.walletConnector.metadata.name;
-    const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem(28), width: pixelToRem(28) }, isGroup: _isWalletGroup }));
+    const icon = (_c = (_b = wallet.walletConnector) === null || _b === void 0 ? void 0 : _b.metadata.icon) !== null && _c !== void 0 ? _c : (_e = (_d = walletGroups[wallet.key]) === null || _d === void 0 ? void 0 : _d.brand) === null || _e === void 0 ? void 0 : _e.icon;
+    const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', icon: icon, walletKey: wallet.key, style: { height: pixelToRem(28), width: pixelToRem(28) }, isGroup: _isWalletGroup }));
     const trailing = (jsx(ListTileAnimatedTrailing, { hoverElement: 
         // eslint-disable-next-line react/jsx-wrap-multilines
         jsx(Icon, { color: 'text-tertiary', size: 'mini', children: jsx(SvgStroke, {}) }), children: labelSettings && (jsx(Badge, { dot: !labelSettings.isRecommended, variant: labelSettings.isRecommended ? 'primary' : 'secondary', text: jsx(Typography, { variant: 'body_small', children: labelSettings.label }) })) }));

package/src/lib/views/WalletList/WalletListItem/index.d.ts

@@ -1,2 +1 @@
 export * from './WalletListItem';
-export type { WalletListItemProps } from './WalletListItem.types';

package/src/lib/views/WalletLockedView/WalletLockedView.cjs

@@ -27,6 +27,7 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
+require('../../store/state/nonce/nonce.cjs');
 var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
@@ -35,7 +36,6 @@ require('../../store/state/projectSettings/projectSettings.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../utils/functions/compareChains/compareChains.cjs');
@@ -51,7 +51,8 @@ require('../CollectUserDataView/useFields.cjs');
 require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../store/state/walletConnectorOptions.cjs');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/walletOptions/walletOptions.cjs');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
@@ -91,6 +92,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
+require('@dynamic-labs/ethereum-aa');
 
 const iconSize = 64;
 const WalletLockedView = () => {

package/src/lib/views/WalletLockedView/WalletLockedView.js

@@ -23,6 +23,7 @@ import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';
+import '../../store/state/nonce/nonce.js';
 import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
 import '../../config/ApiEndpoint.js';
 import '../../store/state/user/user.js';
@@ -31,7 +32,6 @@ import '../../store/state/projectSettings/projectSettings.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../context/UserWalletsContext/UserWalletsContext.js';
-import '../../store/state/dynamicContextProps/dynamicContextProps.js';
 import '../../context/VerificationContext/VerificationContext.js';
 import 'react-dom';
 import '../../utils/functions/compareChains/compareChains.js';
@@ -47,7 +47,8 @@ import '../CollectUserDataView/useFields.js';
 import '../../context/FieldsStateContext/FieldsStateContext.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import '@dynamic-labs/rpc-providers';
-import '../../store/state/walletConnectorOptions.js';
+import '../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../store/state/walletOptions/walletOptions.js';
 import { Typography } from '../../components/Typography/Typography.js';
 import '../../context/FooterAnimationContext/index.js';
 import '../../components/ShadowDOM/ShadowDOM.js';
@@ -87,6 +88,7 @@ import '../../components/IsBrowser/IsBrowser.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
+import '@dynamic-labs/ethereum-aa';
 
 const iconSize = 64;
 const WalletLockedView = () => {

package/src/lib/views/WalletRedirectView/WalletRedirectView.cjs

@@ -28,6 +28,7 @@ require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
+require('../../store/state/nonce/nonce.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('../../store/state/user/user.cjs');
 require('../../locale/locale.cjs');
@@ -35,7 +36,6 @@ require('../../store/state/projectSettings/projectSettings.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../context/UserWalletsContext/UserWalletsContext.cjs');
-require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
 require('../../context/VerificationContext/VerificationContext.cjs');
 require('react-dom');
 require('../../utils/functions/compareChains/compareChains.cjs');
@@ -51,7 +51,8 @@ require('../CollectUserDataView/useFields.cjs');
 require('../../context/FieldsStateContext/FieldsStateContext.cjs');
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('@dynamic-labs/rpc-providers');
-require('../../store/state/walletConnectorOptions.cjs');
+require('../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../store/state/walletOptions/walletOptions.cjs');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
 require('../../components/ShadowDOM/ShadowDOM.cjs');
@@ -88,6 +89,7 @@ require('../../components/IsBrowser/IsBrowser.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
+require('@dynamic-labs/ethereum-aa');
 
 const WalletRedirectView = () => {
     const { t } = reactI18next.useTranslation();