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

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+## [2.0.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2024-02-12)
+
+
+### Bug Fixes
+
+* fix make tabs style attribute optional ([#4667](https://github.com/dynamic-labs/DynamicAuth/issues/4667))
+
+## [2.0.0-alpha.0](https://github.com/dynamic-labs/DynamicAuth/compare/v1.2.0-alpha.1...v2.0.0-alpha.0) (2024-02-12)
+
+
+### Features
+
+* use recommended wallets when using wallet list tabs ([#4662](https://github.com/dynamic-labs/DynamicAuth/issues/4662)) ([eae0318](https://github.com/dynamic-labs/DynamicAuth/commit/eae0318b30fa61d0b30f733ff0d632dfde132181))
+
 ## [1.2.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v1.2.0-alpha.0...v1.2.0-alpha.1) (2024-02-09)
 
 

package/package.cjs

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

package/package.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "1.2.0-alpha.1",
+  "version": "2.0.0-alpha.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,23 +17,23 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/ethereum": "1.2.0-alpha.1",
-    "@dynamic-labs/logger": "1.2.0-alpha.1",
-    "@dynamic-labs/multi-wallet": "1.2.0-alpha.1",
-    "@dynamic-labs/rpc-providers": "1.2.0-alpha.1",
-    "@dynamic-labs/types": "1.2.0-alpha.1",
-    "@dynamic-labs/utils": "1.2.0-alpha.1",
-    "@dynamic-labs/viem-utils": "1.2.0-alpha.1",
-    "@dynamic-labs/wallet-book": "1.2.0-alpha.1",
-    "@dynamic-labs/wallet-connector-core": "1.2.0-alpha.1",
+    "@dynamic-labs/ethereum": "2.0.0-alpha.1",
+    "@dynamic-labs/logger": "2.0.0-alpha.1",
+    "@dynamic-labs/multi-wallet": "2.0.0-alpha.1",
+    "@dynamic-labs/rpc-providers": "2.0.0-alpha.1",
+    "@dynamic-labs/types": "2.0.0-alpha.1",
+    "@dynamic-labs/utils": "2.0.0-alpha.1",
+    "@dynamic-labs/viem-utils": "2.0.0-alpha.1",
+    "@dynamic-labs/wallet-book": "2.0.0-alpha.1",
+    "@dynamic-labs/wallet-connector-core": "2.0.0-alpha.1",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {
     "semver": "7.5.4"
   },
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "viem": "^1.19.13 || ^2.2.0"
   },
   "description": "A React SDK for implementing wallet web3 authentication and authorization to your website.",

package/src/lib/context/DynamicContext/types/index.d.ts

@@ -21,11 +21,12 @@ export type WalletListViewTabItem = {
         icon?: string;
     };
     walletsFilter?: WalletsFilter;
+    recommendedWallets?: RecommendedWallet[];
 };
 export type WalletListViewSettings = {
     type: 'wallet-list';
     tabs?: {
-        style: 'grid';
+        style?: 'grid';
         items: WalletListViewTabItem[];
     };
 };

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

@@ -76,39 +76,32 @@ require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
 require('@dynamic-labs/viem-utils');
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
-var useViewSettings = require('../../utils/hooks/useViewSettings/useViewSettings.cjs');
 var useInternalDynamicContext = require('../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 var index = require('../../utils/functions/walletFilters/index.cjs');
 var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
 var SearchNotFoundMessage = require('./SearchNotFoundMessage/SearchNotFoundMessage.cjs');
 var WalletListGridTabs = require('./WalletListGridTabs/WalletListGridTabs.cjs');
+var useTabState = require('./hooks/useTabState.cjs');
+var getEffectiveWalletFilter = require('./utils/getEffectiveWalletFilter.cjs');
+var getEffectiveRecommendedWallets = require('./utils/getEffectiveRecommendedWallets.cjs');
 
 localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
-    var _a, _b;
+    var _a;
     const { walletsFilter, signWithEmailWalletName, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, user, recommendedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { view } = ViewContext.useViewContext();
-    const [selectedTabIndex, setSelectedTabIndex] = React.useState(null);
+    const { selectedTabIndex, setSelectedTabIndex, selectedTabSettings, tabsItems, } = useTabState.useTabState();
     const isLinkingWallet = isUserLinkingWallet.isUserLinkingWallet(user, view.type, false);
-    const walletListViewSettings = useViewSettings.useViewSettings('wallet-list');
-    const selectedTabSettings = selectedTabIndex === null
-        ? undefined
-        : (_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items[selectedTabIndex];
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { error } = ErrorContext.useErrorContext();
     const { showDefaultFooter } = useAuthLayoutChecks.useAuthLayoutChecks();
     const [footerBorderIsVisible, setFooterBorderIsVisible] = React.useState(true);
     const { t } = reactI18next.useTranslation();
-    const [filterValue, setFilterValue] = React.useState((_b = localStorage.LocalStorage.getFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY)) !== null && _b !== void 0 ? _b : '');
+    const [filterValue, setFilterValue] = React.useState((_a = localStorage.LocalStorage.getFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
     const getFilteredBridgeChains = (bridgeChainsToConnect === null || bridgeChainsToConnect === void 0 ? void 0 : bridgeChainsToConnect.length) &&
         index.FilterBridgeChainsName(bridgeChainsToConnect[0].chain);
     const filteredBridgeChains = getFilteredBridgeChains && getFilteredBridgeChains(walletConnectorOptions);
-    const effectiveWalletFilter = React.useMemo(() => {
-        if (selectedTabSettings) {
-            return selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.walletsFilter;
-        }
-        return walletsFilter;
-    }, [selectedTabSettings, walletsFilter]);
+    const effectiveRecommendedWallets = getEffectiveRecommendedWallets.getEffectiveRecommendedWallets(selectedTabSettings, recommendedWallets);
     const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
         authMode,
         connectedWallets,
@@ -118,12 +111,12 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         lastUsedWalletKey: localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET),
         multiWallet,
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
-        recommendedWallets,
+        recommendedWallets: effectiveRecommendedWallets,
         searchFilter: filterValue,
         showMoreWalletsWithFilter: true,
         signWithEmailWalletName,
         walletBook: walletBook$1,
-        walletsFilter: effectiveWalletFilter,
+        walletsFilter: getEffectiveWalletFilter.getEffectiveWalletFilter(selectedTabSettings, walletsFilter),
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
@@ -148,9 +141,9 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     const searchContainer = !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__search-container', {
             'wallet-list__search-container--scroll': !error,
         }), children: jsxRuntime.jsx(Search.Search, { copykey: 'dyn_wallet_list.search.label', label: t('dyn_wallet_list.search.label', { numberOfWallets }), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) && !isLinkingWallet && (jsxRuntime.jsx("div", { className: 'wallet-list__tabs-container', children: jsxRuntime.jsx(WalletListGridTabs.WalletListGridTabs, { items: walletListViewSettings.tabs.items, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: 'wallet-list__container', children: jsxRuntime.jsxs("div", { className: classNames.classNames('wallet-list__scroll-container', {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet && (jsxRuntime.jsx("div", { className: 'wallet-list__tabs-container', children: jsxRuntime.jsx(WalletListGridTabs.WalletListGridTabs, { items: tabsItems, value: selectedTabIndex || 0, onSelect: setSelectedTabIndex }) })), searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'wallet-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: 'wallet-list__container', children: jsxRuntime.jsxs("div", { className: classNames.classNames('wallet-list__scroll-container', {
                         'wallet-list__scroll-container--error': Boolean(error),
-                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [walletConnectorOptions.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet, index) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange('') }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsxRuntime.jsx(DefaultFooter.DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
+                    }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll, children: [!projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [walletConnectorOptions.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_wallet_list.configuration_mismatch', children: t('dyn_wallet_list.configuration_mismatch') })), walletConnectorOptions.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_wallet_list.search.not_found.title'), subtitle: t('dyn_wallet_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet, index) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, onResetSearchValue: () => handleFilterValueChange(''), recommendedWallets: effectiveRecommendedWallets }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsxRuntime.jsx(DefaultFooter.DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
 };
 
 exports.WalletList = WalletList;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useMemo, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useWalletBookContext } from '@dynamic-labs/wallet-book';
 import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.js';
@@ -72,39 +72,32 @@ import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
 import '@dynamic-labs/viem-utils';
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
-import { useViewSettings } from '../../utils/hooks/useViewSettings/useViewSettings.js';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import { FilterBridgeChainsName } from '../../utils/functions/walletFilters/index.js';
 import { isUserLinkingWallet } from '../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
 import { SearchNotFoundMessage } from './SearchNotFoundMessage/SearchNotFoundMessage.js';
 import { WalletListGridTabs } from './WalletListGridTabs/WalletListGridTabs.js';
+import { useTabState } from './hooks/useTabState.js';
+import { getEffectiveWalletFilter } from './utils/getEffectiveWalletFilter.js';
+import { getEffectiveRecommendedWallets } from './utils/getEffectiveRecommendedWallets.js';
 
 LocalStorage.setToLS(WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
-    var _a, _b;
+    var _a;
     const { walletsFilter, signWithEmailWalletName, walletConnectorOptions, projectSettings, defaultNumberOfWalletsToShow, bridgeChainsToConnect, connectedWallets, authMode, multiWallet, user, recommendedWallets, } = useInternalDynamicContext();
     const { view } = useViewContext();
-    const [selectedTabIndex, setSelectedTabIndex] = useState(null);
+    const { selectedTabIndex, setSelectedTabIndex, selectedTabSettings, tabsItems, } = useTabState();
     const isLinkingWallet = isUserLinkingWallet(user, view.type, false);
-    const walletListViewSettings = useViewSettings('wallet-list');
-    const selectedTabSettings = selectedTabIndex === null
-        ? undefined
-        : (_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items[selectedTabIndex];
     const { walletBook } = useWalletBookContext();
     const { error } = useErrorContext();
     const { showDefaultFooter } = useAuthLayoutChecks();
     const [footerBorderIsVisible, setFooterBorderIsVisible] = useState(true);
     const { t } = useTranslation();
-    const [filterValue, setFilterValue] = useState((_b = LocalStorage.getFromLS(WALLET_PICKER_SEARCH_KEY)) !== null && _b !== void 0 ? _b : '');
+    const [filterValue, setFilterValue] = useState((_a = LocalStorage.getFromLS(WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
     const getFilteredBridgeChains = (bridgeChainsToConnect === null || bridgeChainsToConnect === void 0 ? void 0 : bridgeChainsToConnect.length) &&
         FilterBridgeChainsName(bridgeChainsToConnect[0].chain);
     const filteredBridgeChains = getFilteredBridgeChains && getFilteredBridgeChains(walletConnectorOptions);
-    const effectiveWalletFilter = useMemo(() => {
-        if (selectedTabSettings) {
-            return selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.walletsFilter;
-        }
-        return walletsFilter;
-    }, [selectedTabSettings, walletsFilter]);
+    const effectiveRecommendedWallets = getEffectiveRecommendedWallets(selectedTabSettings, recommendedWallets);
     const { numberOfWallets, walletsList } = walletListBuilder({
         authMode,
         connectedWallets,
@@ -114,12 +107,12 @@ const WalletList = ({ isWalletConnectList = false, }) => {
         lastUsedWalletKey: LocalStorage.getFromLS(LAST_USED_WALLET),
         multiWallet,
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
-        recommendedWallets,
+        recommendedWallets: effectiveRecommendedWallets,
         searchFilter: filterValue,
         showMoreWalletsWithFilter: true,
         signWithEmailWalletName,
         walletBook,
-        walletsFilter: effectiveWalletFilter,
+        walletsFilter: getEffectiveWalletFilter(selectedTabSettings, walletsFilter),
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
         walletsList.length !== numberOfWallets;
@@ -144,9 +137,9 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     const searchContainer = !projectSettings ? (jsx(Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsx("div", { className: classNames('wallet-list__search-container', {
             'wallet-list__search-container--scroll': !error,
         }), children: jsx(Search, { copykey: 'dyn_wallet_list.search.label', label: t('dyn_wallet_list.search.label', { numberOfWallets }), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) })));
-    return (jsxs(Fragment, { children: [(walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) && !isLinkingWallet && (jsx("div", { className: 'wallet-list__tabs-container', children: jsx(WalletListGridTabs, { items: walletListViewSettings.tabs.items, 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', {
+    return (jsxs(Fragment, { children: [(tabsItems === null || tabsItems === void 0 ? void 0 : tabsItems.length) && !isLinkingWallet && (jsx("div", { className: 'wallet-list__tabs-container', children: jsx(WalletListGridTabs, { 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),
-                    }), "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('') }, `${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 }, `${wallet.key}_${index}`))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }) }), showDefaultFooter && (jsx(DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
 };
 
 export { WalletList };

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

@@ -19,7 +19,6 @@ var getWalletListItemLabel = require('../../../shared/utils/functions/getWalletL
 require('viem');
 require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../shared/consts/index.cjs');
-var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../utils/constants/colors.cjs');
@@ -79,8 +78,7 @@ require('@hcaptcha/react-hcaptcha');
 require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 
-const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsxRuntime.jsx(ListTile.ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name })), }) => {
-    const { recommendedWallets } = useInternalDynamicContext.useInternalDynamicContext();
+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 })), }) => {
     const { navigateToWalletGroup } = WalletGroupContext.useWalletGroupContext();
     const { setView } = ViewContext.useViewContext();
     const _isWalletGroup = isWalletGroup.isWalletGroup(wallet);

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

@@ -15,7 +15,6 @@ import { getWalletListItemLabel } from '../../../shared/utils/functions/getWalle
 import 'viem';
 import '../../../shared/utils/classes/storage/localStorage.js';
 import '../../../shared/consts/index.js';
-import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../utils/constants/colors.js';
@@ -75,8 +74,7 @@ import '@hcaptcha/react-hcaptcha';
 import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 
-const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, tile = ({ leading, name, onClick, trailing }) => (jsx(ListTile, { leading: leading, trailing: trailing, onClick: onClick, className: 'wallet-list-item__tile', dataTestId: 'ListTile', children: name })), }) => {
-    const { recommendedWallets } = useInternalDynamicContext();
+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 })), }) => {
     const { navigateToWalletGroup } = useWalletGroupContext();
     const { setView } = useViewContext();
     const _isWalletGroup = isWalletGroup(wallet);

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

@@ -1,10 +1,11 @@
 import { ReactElement, ReactNode } from 'react';
-import { WalletOption } from '../../../shared';
+import { RecommendedWallet, WalletOption } from '../../../shared';
 export type WalletListItemProps = {
     onResetSearchValue?: (newSearchValue: string) => void;
     tile?: WalletListItemTile;
     wallet: WalletOption;
     disabled?: boolean;
+    recommendedWallets?: RecommendedWallet[];
 };
 export type WalletListItemComponent = (props: WalletListItemProps) => ReactElement;
 export type WalletListItemTileProps = {

package/src/lib/views/WalletList/hooks/useTabState.cjs

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../../../events/dynamicEvents.cjs');
+require('../../../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('../../../utils/constants/colors.cjs');
+require('../../../utils/constants/values.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('viem');
+require('../../../shared/consts/index.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('viem/chains');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('yup');
+require('react-i18next');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('formik');
+require('i18next');
+require('../../../components/OverlayCard/OverlayCard.context.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../WalletList.cjs');
+require('qrcode');
+require('@hcaptcha/react-hcaptcha');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+var useViewSettings = require('../../../utils/hooks/useViewSettings/useViewSettings.cjs');
+
+const useTabState = () => {
+    var _a, _b;
+    const walletListViewSettings = useViewSettings.useViewSettings('wallet-list');
+    const [selectedTabIndex, setSelectedTabIndex] = React.useState(() => { var _a; return ((_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items.length) ? 0 : null; });
+    const selectedTabSettings = selectedTabIndex === null
+        ? undefined
+        : (_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items[selectedTabIndex];
+    return {
+        selectedTabIndex,
+        selectedTabSettings,
+        setSelectedTabIndex,
+        tabsItems: (_b = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _b === void 0 ? void 0 : _b.items,
+    };
+};
+
+exports.useTabState = useTabState;

package/src/lib/views/WalletList/hooks/useTabState.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useTabState: () => {
+    selectedTabIndex: number | null;
+    selectedTabSettings: import("../../../context/DynamicContext/types").WalletListViewTabItem | undefined;
+    setSelectedTabIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    tabsItems: import("../../../context/DynamicContext/types").WalletListViewTabItem[] | undefined;
+};

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

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import '../../../events/dynamicEvents.js';
+import '../../../../../_virtual/_tslib.js';
+import '@dynamic-labs/utils';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '../../../utils/constants/colors.js';
+import '../../../utils/constants/values.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'viem';
+import '../../../shared/consts/index.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'viem/chains';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import 'yup';
+import 'react-i18next';
+import '../../../context/MockContext/MockContext.js';
+import '../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'formik';
+import 'i18next';
+import '../../../components/OverlayCard/OverlayCard.context.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../WalletList.js';
+import 'qrcode';
+import '@hcaptcha/react-hcaptcha';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
+import '@dynamic-labs/viem-utils';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import { useViewSettings } from '../../../utils/hooks/useViewSettings/useViewSettings.js';
+
+const useTabState = () => {
+    var _a, _b;
+    const walletListViewSettings = useViewSettings('wallet-list');
+    const [selectedTabIndex, setSelectedTabIndex] = useState(() => { var _a; return ((_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items.length) ? 0 : null; });
+    const selectedTabSettings = selectedTabIndex === null
+        ? undefined
+        : (_a = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _a === void 0 ? void 0 : _a.items[selectedTabIndex];
+    return {
+        selectedTabIndex,
+        selectedTabSettings,
+        setSelectedTabIndex,
+        tabsItems: (_b = walletListViewSettings === null || walletListViewSettings === void 0 ? void 0 : walletListViewSettings.tabs) === null || _b === void 0 ? void 0 : _b.items,
+    };
+};
+
+export { useTabState };

package/src/lib/views/WalletList/utils/getEffectiveRecommendedWallets.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getEffectiveRecommendedWallets = (selectedTabSettings, recommendedWallets) => {
+    if (selectedTabSettings && (selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.recommendedWallets)) {
+        return selectedTabSettings.recommendedWallets;
+    }
+    return recommendedWallets;
+};
+
+exports.getEffectiveRecommendedWallets = getEffectiveRecommendedWallets;

package/src/lib/views/WalletList/utils/getEffectiveRecommendedWallets.d.ts

@@ -0,0 +1,3 @@
+import { WalletListViewTabItem } from '../../../context/DynamicContext/types';
+import { RecommendedWallet } from '../../../shared';
+export declare const getEffectiveRecommendedWallets: (selectedTabSettings: WalletListViewTabItem | undefined, recommendedWallets: RecommendedWallet[] | undefined) => RecommendedWallet[] | undefined;

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

@@ -0,0 +1,8 @@
+const getEffectiveRecommendedWallets = (selectedTabSettings, recommendedWallets) => {
+    if (selectedTabSettings && (selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.recommendedWallets)) {
+        return selectedTabSettings.recommendedWallets;
+    }
+    return recommendedWallets;
+};
+
+export { getEffectiveRecommendedWallets };

package/src/lib/views/WalletList/utils/getEffectiveWalletFilter.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getEffectiveWalletFilter = (selectedTabSettings, walletsFilter) => {
+    if (selectedTabSettings && (selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.walletsFilter)) {
+        return selectedTabSettings.walletsFilter;
+    }
+    return walletsFilter;
+};
+
+exports.getEffectiveWalletFilter = getEffectiveWalletFilter;

package/src/lib/views/WalletList/utils/getEffectiveWalletFilter.d.ts

@@ -0,0 +1,2 @@
+import { WalletListViewTabItem, WalletsFilter } from '../../../context/DynamicContext/types';
+export declare const getEffectiveWalletFilter: (selectedTabSettings: WalletListViewTabItem | undefined, walletsFilter: WalletsFilter | undefined) => WalletsFilter | undefined;

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

@@ -0,0 +1,8 @@
+const getEffectiveWalletFilter = (selectedTabSettings, walletsFilter) => {
+    if (selectedTabSettings && (selectedTabSettings === null || selectedTabSettings === void 0 ? void 0 : selectedTabSettings.walletsFilter)) {
+        return selectedTabSettings.walletsFilter;
+    }
+    return walletsFilter;
+};
+
+export { getEffectiveWalletFilter };