@dynamic-labs/sdk-react-core 0.18.0-RC.0 → 0.18.0-RC.10

package/src/lib/views/SocialRedirectView/SocialRedirectView.js

@@ -3,16 +3,16 @@ import 'react';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
-import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
+import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
@@ -24,6 +24,7 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../components/IconButton/IconButton.js';
@@ -33,7 +34,6 @@ import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
 import { useGetSocialIcon } from '../../utils/hooks/useGetSocialIcon/useGetSocialIcon.js';
-import { TosAndPp } from '../../components/TosAndPp/TosAndPp.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
@@ -44,11 +44,10 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const SocialRedirectView = () => {
     const { socialProvider, socialWalletConnector } = useSocialRedirectContext();
     const getSocialIcon = useGetSocialIcon();
-    const { termsOfServiceUrl, privacyPolicyUrl, isAuthenticated } = useInternalDynamicContext();
     if (!socialWalletConnector || !socialProvider) {
         return null;
     }
-    return (jsxs("div", Object.assign({ className: classNames('social-redirect-view__container') }, { children: [jsx(IconWithSpinner, { iconSize: 64, Icon: getSocialIcon(socialProvider), isSpinning: true }), jsxs(Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames('social-redirect-view__title') }, { children: ["Connecting to ", capitalize(socialProvider), "..."] })), jsx(TosAndPp, { mode: isAuthenticated ? 'connecting' : 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })] })));
+    return (jsxs("div", Object.assign({ className: classNames('social-redirect-view__container') }, { children: [jsx(IconWithSpinner, { iconSize: 64, Icon: getSocialIcon(socialProvider), isSpinning: true }), jsxs(Typography, Object.assign({ weight: 'medium', variant: 'title', className: classNames('social-redirect-view__title') }, { children: ["Connecting to ", capitalize(socialProvider), "..."] }))] })));
 };
 
 export { SocialRedirectView };

package/src/lib/views/SocialWrongAccountView/SocialWrongAccountView.cjs

@@ -7,13 +7,13 @@ var React = require('react');
 var Typography = require('../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
@@ -28,6 +28,7 @@ require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../components/IconButton/IconButton.cjs');

package/src/lib/views/SocialWrongAccountView/SocialWrongAccountView.js

@@ -3,13 +3,13 @@ import { useState } from 'react';
 import { Typography } from '../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
@@ -24,6 +24,7 @@ import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../components/IconButton/IconButton.js';

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.cjs

@@ -10,12 +10,12 @@ var useInternalDynamicContext = require('../../context/DynamicContext/useInterna
 require('@dynamic-labs/sdk-api');
 require('../../config/ApiEndpoint.cjs');
 require('../../shared/logger.cjs');
-require('../../config/LSSuffix.cjs');
 var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-connector-core');
 require('@dynamic-labs/wallet-book');
 var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
 var formatBigNumber = require('../../shared/utils/functions/formatBigNumber/formatBigNumber.cjs');
 require('@dynamic-labs/iconic');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -23,6 +23,7 @@ require('../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 var getAppOrigin = require('../../utils/functions/getAppOrigin/getAppOrigin.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('react-dom');

package/src/lib/views/TransactionConfirmationView/TransactionConfirmationView.js

@@ -6,12 +6,12 @@ import { useInternalDynamicContext } from '../../context/DynamicContext/useInter
 import '@dynamic-labs/sdk-api';
 import '../../config/ApiEndpoint.js';
 import '../../shared/logger.js';
-import '../../config/LSSuffix.js';
 import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/wallet-book';
 import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
 import { formatBigNumber } from '../../shared/utils/functions/formatBigNumber/formatBigNumber.js';
 import '@dynamic-labs/iconic';
 import '../../context/ViewContext/ViewContext.js';
@@ -19,6 +19,7 @@ import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import { getAppOrigin } from '../../utils/functions/getAppOrigin/getAppOrigin.js';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import 'react-dom';

package/src/lib/views/TransactionConfirmationView/helpers/transactionErrorMessage.cjs

@@ -2,6 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('@dynamic-labs/sdk-api');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../../utils/constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
+
 const errorCodesMapping = {
     '-32603': 'Could not replace existing transaction',
     INSUFFICIENT_FUNDS: 'Insufficient funds for this transaction.',
@@ -10,6 +24,7 @@ const errorReasonsMapping = {
     'provided ENS name resolves to null': 'Invalid address. Please check that the entered address is correct.',
 };
 const transactionErrorMessage = (error) => {
+    logger.logger.debug('transaction error]:', error);
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     if (!code)

package/src/lib/views/TransactionConfirmationView/helpers/transactionErrorMessage.js

@@ -1,3 +1,17 @@
+import '@dynamic-labs/sdk-api';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../../utils/constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
+
 const errorCodesMapping = {
     '-32603': 'Could not replace existing transaction',
     INSUFFICIENT_FUNDS: 'Insufficient funds for this transaction.',
@@ -6,6 +20,7 @@ const errorReasonsMapping = {
     'provided ENS name resolves to null': 'Invalid address. Please check that the entered address is correct.',
 };
 const transactionErrorMessage = (error) => {
+    logger.debug('transaction error]:', error);
     const { code } = error;
     const defaultMessage = 'Something went wrong.';
     if (!code)

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.cjs

@@ -9,16 +9,17 @@ require('@dynamic-labs/utils');
 require('@dynamic-labs/sdk-api');
 require('../../../../config/ApiEndpoint.cjs');
 require('../../../../shared/logger.cjs');
-require('../../../../config/LSSuffix.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('../../../../shared/utils/classes/storage/localStorage.cjs');
 require('../../../../shared/consts/index.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');

package/src/lib/views/TransactionConfirmationView/hooks/useTransactionData/useTransactionData.js

@@ -5,16 +5,17 @@ import '@dynamic-labs/utils';
 import '@dynamic-labs/sdk-api';
 import '../../../../config/ApiEndpoint.js';
 import '../../../../shared/logger.js';
-import '../../../../config/LSSuffix.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 '../../../../shared/utils/classes/storage/localStorage.js';
 import '../../../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '../../../../context/ErrorContext/ErrorContext.js';
 import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletBook = require('@dynamic-labs/wallet-book');
+var SelectWalletChainLayout = require('../../components/SelectWalletChainLayout/SelectWalletChainLayout.cjs');
+var WalletGroupContext = require('../../context/WalletGroupContext/WalletGroupContext.cjs');
+var WalletGroupItem = require('./components/WalletGroupItem/WalletGroupItem.cjs');
+
+const WalletGroupView = () => {
+    var _a;
+    const { selectedWalletGroup } = WalletGroupContext.useWalletGroupContext();
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    if (!selectedWalletGroup)
+        throw new Error('Could not access WalletGroup view without selected group');
+    const walletBookData = walletBook.getWalletGroup(walletBook$1, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
+    return (jsxRuntime.jsx(SelectWalletChainLayout.SelectWalletChainLayout, Object.assign({ HeaderIcon: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }) }, { children: selectedWalletGroup.groupedWallets.map((wallet) => (jsxRuntime.jsx(WalletGroupItem.WalletGroupItem, { wallet: wallet }, wallet.key))) })));
+};
+
+exports.WalletGroupView = WalletGroupView;

package/src/lib/views/WalletGroupView/WalletGroupView.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const WalletGroupView: FC;

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

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { useWalletBookContext, getWalletGroup, WalletIcon } from '@dynamic-labs/wallet-book';
+import { SelectWalletChainLayout } from '../../components/SelectWalletChainLayout/SelectWalletChainLayout.js';
+import { useWalletGroupContext } from '../../context/WalletGroupContext/WalletGroupContext.js';
+import { WalletGroupItem } from './components/WalletGroupItem/WalletGroupItem.js';
+
+const WalletGroupView = () => {
+    var _a;
+    const { selectedWalletGroup } = useWalletGroupContext();
+    const { walletBook } = useWalletBookContext();
+    if (!selectedWalletGroup)
+        throw new Error('Could not access WalletGroup view without selected group');
+    const walletBookData = getWalletGroup(walletBook, selectedWalletGroup === null || selectedWalletGroup === void 0 ? void 0 : selectedWalletGroup.key);
+    return (jsx(SelectWalletChainLayout, Object.assign({ HeaderIcon: jsx(WalletIcon, { walletName: (_a = walletBookData.brand) === null || _a === void 0 ? void 0 : _a.spriteId }) }, { children: selectedWalletGroup.groupedWallets.map((wallet) => (jsx(WalletGroupItem, { wallet: wallet }, wallet.key))) })));
+};
+
+export { WalletGroupView };

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+var iconic = require('@dynamic-labs/iconic');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
+require('@dynamic-labs/wallet-book');
+var getWalletListItemLabel = require('../../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.cjs');
+require('ethers');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('../../../../context/ViewContext/ViewContext.cjs');
+var stroke = require('../../../../shared/assets/stroke.cjs');
+require('../../../../shared/consts/index.cjs');
+var localStorage$1 = require('../../../../utils/constants/localStorage.cjs');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
+var Badge = require('../../../../components/Badge/Badge.cjs');
+var Icon = require('../../../../components/Icon/Icon.cjs');
+var ChainCard = require('../../../../components/ChainCard/ChainCard.cjs');
+var useWalletItemActions = require('../../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
+var pixelToRem = require('../../../../utils/functions/pixelToRem/pixelToRem.cjs');
+
+const WalletGroupItem = ({ wallet }) => {
+    const [supportedChain] = wallet.walletConnector.supportedChains;
+    const ChainIcon = getChainIcon.getChainIcon(supportedChain);
+    const chainInfo = walletConnectorCore.getChainInfo(supportedChain);
+    const { handleWalletItemClick } = useWalletItemActions.useWalletItemActions();
+    const isUsingMultiWallet = Boolean(localStorage.getItem(localStorage$1.AUTH_USER));
+    const label = getWalletListItemLabel.getWalletListItemLabel({
+        usingMultiWallet: isUsingMultiWallet,
+        wallet,
+    });
+    const isPhantomLedger = wallet.key === 'phantomledger';
+    const isComingSoon = label === 'Coming soon';
+    const trailing = (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('wallet-list-item__trailing', 'wallet-group__item-label') }, { children: [label && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('trailing__child', {
+                    trailing__label: !isComingSoon,
+                }) }, { children: jsxRuntime.jsx(Badge.Badge, { dot: !isComingSoon, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsxRuntime.jsx("div", Object.assign({ "data-testid": 'trailing__arrow', className: 'trailing__child trailing__arrow' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) })))] })));
+    const renderChainIcon = React.useMemo(() => {
+        if (isPhantomLedger)
+            return (jsxRuntime.jsx(iconic.LedgerIcon, { style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) } }));
+        return (jsxRuntime.jsx(ChainIcon, { style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) } }));
+    }, [ChainIcon, isPhantomLedger]);
+    const renderChainName = React.useMemo(() => {
+        if (isPhantomLedger)
+            return 'Ledger (Solana)';
+        return (chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName) || wallet.name;
+    }, [chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName, isPhantomLedger, wallet.name]);
+    return (jsxRuntime.jsx(ChainCard.ChainCard, { className: 'wallet-group__item', onClick: () => handleWalletItemClick(wallet), chainName: renderChainName, startSlot: renderChainIcon, endSlot: trailing }, wallet.key));
+};
+
+exports.WalletGroupItem = WalletGroupItem;

package/src/lib/views/WalletGroupView/components/WalletGroupItem/WalletGroupItem.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { WalletOption } from '../../../../shared';
+export type WalletGroupItemProps = {
+    wallet: WalletOption;
+};
+export declare const WalletGroupItem: FC<WalletGroupItemProps>;

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
+import { LedgerIcon } from '@dynamic-labs/iconic';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
+import '@dynamic-labs/wallet-book';
+import { getWalletListItemLabel } from '../../../../shared/utils/functions/getWalletListItemLabel/getWalletListItemLabel.js';
+import 'ethers';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import '../../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgStroke } from '../../../../shared/assets/stroke.js';
+import '../../../../shared/consts/index.js';
+import { AUTH_USER } from '../../../../utils/constants/localStorage.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.js';
+import { Badge } from '../../../../components/Badge/Badge.js';
+import { Icon } from '../../../../components/Icon/Icon.js';
+import { ChainCard } from '../../../../components/ChainCard/ChainCard.js';
+import { useWalletItemActions } from '../../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
+import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
+
+const WalletGroupItem = ({ wallet }) => {
+    const [supportedChain] = wallet.walletConnector.supportedChains;
+    const ChainIcon = getChainIcon(supportedChain);
+    const chainInfo = getChainInfo(supportedChain);
+    const { handleWalletItemClick } = useWalletItemActions();
+    const isUsingMultiWallet = Boolean(localStorage.getItem(AUTH_USER));
+    const label = getWalletListItemLabel({
+        usingMultiWallet: isUsingMultiWallet,
+        wallet,
+    });
+    const isPhantomLedger = wallet.key === 'phantomledger';
+    const isComingSoon = label === 'Coming soon';
+    const trailing = (jsxs("div", Object.assign({ className: classNames('wallet-list-item__trailing', 'wallet-group__item-label') }, { children: [label && (jsx("div", Object.assign({ className: classNames('trailing__child', {
+                    trailing__label: !isComingSoon,
+                }) }, { children: jsx(Badge, { dot: !isComingSoon, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsx("div", Object.assign({ "data-testid": 'trailing__arrow', className: 'trailing__child trailing__arrow' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsx(SvgStroke, {}) })) })))] })));
+    const renderChainIcon = useMemo(() => {
+        if (isPhantomLedger)
+            return (jsx(LedgerIcon, { style: { height: pixelToRem(28), width: pixelToRem(28) } }));
+        return (jsx(ChainIcon, { style: { height: pixelToRem(28), width: pixelToRem(28) } }));
+    }, [ChainIcon, isPhantomLedger]);
+    const renderChainName = useMemo(() => {
+        if (isPhantomLedger)
+            return 'Ledger (Solana)';
+        return (chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName) || wallet.name;
+    }, [chainInfo === null || chainInfo === void 0 ? void 0 : chainInfo.displayName, isPhantomLedger, wallet.name]);
+    return (jsx(ChainCard, { className: 'wallet-group__item', onClick: () => handleWalletItemClick(wallet), chainName: renderChainName, startSlot: renderChainIcon, endSlot: trailing }, wallet.key));
+};
+
+export { WalletGroupItem };

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

@@ -7,13 +7,13 @@ require('react');
 var Typography = require('../../../components/Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
-require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
 require('../../../utils/constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../../shared/consts/index.cjs');
 require('../../../context/DynamicContext/DynamicContext.cjs');
@@ -27,6 +27,7 @@ require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.
 require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
+require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../components/IconButton/IconButton.cjs');

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

@@ -3,13 +3,13 @@ import 'react';
 import { Typography } from '../../../components/Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
-import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
 import '../../../utils/constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../../shared/consts/index.js';
 import '../../../context/DynamicContext/DynamicContext.js';
@@ -23,6 +23,7 @@ import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.j
 import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
+import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../components/IconButton/IconButton.js';

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

@@ -4,54 +4,54 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
 var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
 var Search = require('../../components/Search/Search.cjs');
 var Skeleton = require('../../components/Skeleton/Skeleton.cjs');
 var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
+var localStorage$1 = require('../../utils/constants/localStorage.cjs');
+require('../../utils/constants/colors.cjs');
+var walletListBuilder = require('../../utils/functions/walletListBuilder/walletListBuilder.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+var MockContext = require('../../context/MockContext/MockContext.cjs');
+var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
+var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
+var index = require('../../utils/functions/walletFilters/index.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-var getFromLS = require('../../shared/utils/functions/storage/getFromLS.cjs');
-require('../../config/LSSuffix.cjs');
-var setToLS = require('../../shared/utils/functions/storage/setToLS.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
-var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
-require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
-var localStorage = require('../../utils/constants/localStorage.cjs');
-require('../../utils/constants/colors.cjs');
+var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
-var walletListBuilder = require('../../utils/functions/walletListBuilder/walletListBuilder.cjs');
-var classNames = require('../../utils/functions/classNames/classNames.cjs');
-var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
-var MockContext = require('../../context/MockContext/MockContext.cjs');
-var isUserLinkingWallet = require('../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
-var hasWalletGroupFlag = require('../../utils/functions/hasWalletGroupFlag/hasWalletGroupFlag.cjs');
 var SearchInstead = require('./SearchInstead/SearchInstead.cjs');
 var WalletListItem = require('./WalletListItem/WalletListItem.cjs');
 
-setToLS.setToLS(localStorage.WALLET_PICKER_SEARCH_KEY, '');
+localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
     var _a;
-    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, connectedWallets, defaultNumberOfWalletsToShow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, connectedWallets, defaultNumberOfWalletsToShow, walletsToConnectByChain, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { error } = ErrorContext.useErrorContext();
     const { view } = ViewContext.useViewContext();
     const { mockedSDK } = MockContext.useMockContext();
-    const isUsingMultiWallet = Boolean(getFromLS.getFromLS(localStorage.AUTH_USER));
-    const [filterValue, setFilterValue] = React.useState((_a = getFromLS.getFromLS(localStorage.WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
+    const isUsingMultiWallet = Boolean(localStorage.LocalStorage.getFromLS(localStorage$1.AUTH_USER));
+    const [filterValue, setFilterValue] = React.useState((_a = localStorage.LocalStorage.getFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
     const [footerIsVisible, setFooterIsVisibile] = React.useState(false);
-    React.useEffect(() => {
-        setToLS.setToLS(localStorage.WALLET_PICKER_SEARCH_KEY, filterValue);
-    }, [filterValue]);
+    const getFilteredWalletsByChain = (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length) &&
+        index.FilterWalletsByChainName(walletsToConnectByChain[0].chain);
+    const filteredWalletsByChain = getFilteredWalletsByChain && getFilteredWalletsByChain(wallets);
     const { numberOfWallets, walletsList } = walletListBuilder.walletListBuilder({
-        groupWallets: hasWalletGroupFlag.hasWalletGroupFlag(),
-        inputList: wallets,
+        groupWallets: true,
+        inputList: filteredWalletsByChain || wallets,
         isWalletConnectList,
-        lastUsedWalletName: getFromLS.getFromLS(localStorage.LAST_USED_WALLET),
+        lastUsedWalletName: localStorage.LocalStorage.getFromLS(localStorage$1.LAST_USED_WALLET),
         numberOfWalletsToShow: defaultNumberOfWalletsToShow,
         searchFilter: filterValue,
         signWithEmailWalletName,
+        walletBook: walletBook$1,
         walletsFilter: walletsFilter,
     });
     const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
@@ -71,9 +71,13 @@ const WalletList = ({ isWalletConnectList = false, }) => {
             setFooterIsVisibile(false);
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-list__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsxRuntime.jsx(Search.Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => setFilterValue(value), onClickClear: () => setFilterValue('') }))), jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('wallet-list__scroll-container', {
+    const handleFilterValueChange = (value) => {
+        localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, value);
+        setFilterValue(value);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-list__container' }, { children: [error && jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: error }), !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsxRuntime.jsx(Search.Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }))), jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('wallet-list__scroll-container', {
                             'wallet-list__scroll-container--full-height': isSearchEnabled,
-                        }), "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: [wallets.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: setFilterValue }, wallet.key)))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchInstead.SearchInstead, {}))] }))] })), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
+                        }), "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: [wallets.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key)))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchInstead.SearchInstead, {}))] }))] })), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };