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

package/src/lib/modals/MultiWalletStepSelectorModal/MultiWalletStepSelectorModal.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+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 '@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 '@dynamic-labs/multi-wallet';
+import '../../components/ShadowDOM/ShadowDOM.js';
+import '../../context/ThemeContext/ThemeContext.js';
+import { Portal } from '../../components/Portal/Portal.js';
+import 'react-dom';
+import '../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../components/IconButton/IconButton.js';
+import '../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/Alert/Alert.js';
+import { IsBrowser } from '../../components/IsBrowser/IsBrowser.js';
+import { WelcomeView } from './views/WelcomeView/WelcomeView.js';
+import { SelectWalletView } from './views/SelectWalletView/SelectWalletView.js';
+import { ResumeView } from './views/ResumeView/ResumeView.js';
+import '../../context/MockContext/MockContext.js';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+
+const initialView = {
+    name: 'welcome',
+};
+const MultiWalletStepSelectorModal = () => {
+    const { showBridgeAuthFlow, setShowBridgeAuthFlow, primaryWallet } = useInternalDynamicContext();
+    const [view, setView] = useState(initialView);
+    // Set initial view after logout
+    useEffect(() => {
+        if (!primaryWallet && view.name === 'resume') {
+            setView(initialView);
+        }
+    }, [primaryWallet, view]);
+    const closeModal = () => setShowBridgeAuthFlow(false);
+    const goToWelcomeView = () => setView({
+        name: 'welcome',
+    });
+    const goToResumeView = () => {
+        setView({
+            name: 'resume',
+        });
+    };
+    const views = {
+        resume: () => jsx(ResumeView, { onClickClose: closeModal }),
+        'select-wallet': () => (jsx(SelectWalletView, { onClickClose: closeModal, onClickBack: goToWelcomeView, onAllWalletsConnected: goToResumeView })),
+        welcome: () => (jsx(WelcomeView, { onClickClose: closeModal, onClickGetStarted: () => setView({
+                name: 'select-wallet',
+            }) })),
+    };
+    const renderView = () => views[view.name]();
+    return (jsx(IsBrowser, { children: jsx(Portal, Object.assign({ isShown: showBridgeAuthFlow, handleClose: closeModal }, { children: renderView() })) }));
+};
+
+export { MultiWalletStepSelectorModal };

package/src/lib/modals/MultiWalletStepSelectorModal/index.d.ts

@@ -0,0 +1 @@
+export { MultiWalletStepSelectorModal } from './MultiWalletStepSelectorModal';

package/src/lib/modals/MultiWalletStepSelectorModal/views/ResumeView/ResumeView.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.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('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/consts/index.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+var ConnectedWalletsListLayout = require('../../../../layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.cjs');
+var DynamicBridgeWalletCard = require('../../../../widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCard/DynamicBridgeWalletCard.cjs');
+var DynamicBridgeWalletCardBody = require('../../../../widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.cjs');
+var Balance = require('../../../../widgets/DynamicWidget/components/Balance/Balance.cjs');
+var SecondaryWallets = require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+var Modal = require('../../../../components/Modal/Modal.cjs');
+var ModalCard = require('../../../../components/ModalCard/ModalCard.cjs');
+
+const ResumeView = ({ onClickClose }) => {
+    const { primaryWallet, secondaryWallets } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!primaryWallet) {
+        throw new Error('primaryWallet should be defined');
+    }
+    const PrimaryWalletChainIcon = getChainIcon.getChainIcon(primaryWallet.chain);
+    const primaryWalletChainInfo = walletConnectorCore.getChainInfo(primaryWallet.chain);
+    return (jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsxs(ConnectedWalletsListLayout.ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: "Well done, you're connected" }, { children: [jsxRuntime.jsx(DynamicBridgeWalletCard.DynamicBridgeWalletCard, Object.assign({ networkIcon: jsxRuntime.jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsxRuntime.jsx(DynamicBridgeWalletCardBody.DynamicBridgeWalletCardBody, { walletName: primaryWallet.connector.name, walletAddress: primaryWallet.address, walletBalance: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsxRuntime.jsx(Balance.Balance, { address: primaryWallet.address, connector: primaryWallet.connector, network: primaryWallet.chain }) }) })), jsxRuntime.jsx(SecondaryWallets.MemoSecondaryWallets, { wallets: secondaryWallets })] })) }) }));
+};
+
+exports.ResumeView = ResumeView;

package/src/lib/modals/MultiWalletStepSelectorModal/views/ResumeView/ResumeView.d.ts

@@ -0,0 +1,6 @@
+import { FC, MouseEventHandler } from 'react';
+type ResumeViewProps = {
+    onClickClose: MouseEventHandler<HTMLButtonElement>;
+};
+export declare const ResumeView: FC<ResumeViewProps>;
+export {};

package/src/lib/modals/MultiWalletStepSelectorModal/views/ResumeView/ResumeView.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
+import 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.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 '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/consts/index.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import { ConnectedWalletsListLayout } from '../../../../layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.js';
+import { DynamicBridgeWalletCard } from '../../../../widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCard/DynamicBridgeWalletCard.js';
+import { DynamicBridgeWalletCardBody } from '../../../../widgets/DynamicBridgeWidget/components/DynamicBridgeWalletCardBody/DynamicBridgeWalletCardBody.js';
+import { Balance } from '../../../../widgets/DynamicWidget/components/Balance/Balance.js';
+import { MemoSecondaryWallets } from '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { Modal } from '../../../../components/Modal/Modal.js';
+import { ModalCard } from '../../../../components/ModalCard/ModalCard.js';
+
+const ResumeView = ({ onClickClose }) => {
+    const { primaryWallet, secondaryWallets } = useInternalDynamicContext();
+    if (!primaryWallet) {
+        throw new Error('primaryWallet should be defined');
+    }
+    const PrimaryWalletChainIcon = getChainIcon(primaryWallet.chain);
+    const primaryWalletChainInfo = getChainInfo(primaryWallet.chain);
+    return (jsx(Modal, { children: jsx(ModalCard, { children: jsxs(ConnectedWalletsListLayout, Object.assign({ onClickClose: onClickClose, onClickAction: onClickClose, title: "Well done, you're connected" }, { children: [jsx(DynamicBridgeWalletCard, Object.assign({ networkIcon: jsx(PrimaryWalletChainIcon, {}), networkName: primaryWalletChainInfo === null || primaryWalletChainInfo === void 0 ? void 0 : primaryWalletChainInfo.displayName }, { children: jsx(DynamicBridgeWalletCardBody, { walletName: primaryWallet.connector.name, walletAddress: primaryWallet.address, walletBalance: 
+                            // eslint-disable-next-line react/jsx-wrap-multilines
+                            jsx(Balance, { address: primaryWallet.address, connector: primaryWallet.connector, network: primaryWallet.chain }) }) })), jsx(MemoSecondaryWallets, { wallets: secondaryWallets })] })) }) }));
+};
+
+export { ResumeView };

package/src/lib/modals/MultiWalletStepSelectorModal/views/ResumeView/index.d.ts

@@ -0,0 +1 @@
+export { ResumeView } from './ResumeView';

package/src/lib/modals/MultiWalletStepSelectorModal/views/SelectWalletView/SelectWalletView.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var SelectWalletListLayout = require('../../../../layouts/SelectWalletListLayout/SelectWalletListLayout.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/utils');
+var localStorage$1 = 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');
+require('@dynamic-labs/multi-wallet');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+var Skeleton = require('../../../../components/Skeleton/Skeleton.cjs');
+var walletListBuilder = require('../../../../utils/functions/walletListBuilder/walletListBuilder.cjs');
+var index = require('../../../../utils/functions/walletFilters/index.cjs');
+var WalletListItem = require('../../../../views/WalletList/WalletListItem/WalletListItem.cjs');
+var Search = require('../../../../components/Search/Search.cjs');
+var SearchInstead = require('../../../../views/WalletList/SearchInstead/SearchInstead.cjs');
+require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var ErrorContainer = require('../../../../components/ErrorContainer/ErrorContainer.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+var Modal = require('../../../../components/Modal/Modal.cjs');
+var ModalCard = require('../../../../components/ModalCard/ModalCard.cjs');
+
+const SelectWalletView = ({ onClickClose, onClickBack, onAllWalletsConnected, }) => {
+    var _a, _b;
+    const [filterValue, setFilterValue] = React.useState((_a = localStorage.LocalStorage.getFromLS(localStorage$1.WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
+    const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
+    const { walletsToConnectByChain, wallets, connectedWallets, defaultNumberOfWalletsToShow, walletsFilter, projectSettings, } = useInternalDynamicContext.useInternalDynamicContext();
+    const [chain, setChain] = React.useState((_b = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain[0]) === null || _b === void 0 ? void 0 : _b.chain);
+    const getFilteredWalletsByChain = chain !== undefined && index.FilterWalletsByChainName(chain);
+    const filteredWalletsByChain = getFilteredWalletsByChain && getFilteredWalletsByChain(wallets);
+    const { walletsList, numberOfWallets } = walletListBuilder.walletListBuilder({
+        inputList: filteredWalletsByChain || wallets,
+        isWalletConnectList: false,
+        lastUsedWalletName: '',
+        numberOfWalletsToShow: defaultNumberOfWalletsToShow,
+        searchFilter: filterValue,
+        signWithEmailWalletName: '',
+        walletBook: walletBook$1,
+        walletsFilter: walletsFilter,
+    });
+    React.useEffect(() => {
+        var _a;
+        if (connectedWallets.length === 0) {
+            return;
+        }
+        const allWalletsConnected = (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length) === 0;
+        if (allWalletsConnected) {
+            onAllWalletsConnected();
+            return;
+        }
+        setFilterValue('');
+        setChain((_a = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain[0]) === null || _a === void 0 ? void 0 : _a.chain);
+    }, [walletsToConnectByChain, onAllWalletsConnected, connectedWallets]);
+    const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
+        walletsList.length !== numberOfWallets;
+    return (jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsxs(SelectWalletListLayout.SelectWalletListLayout, Object.assign({ title: 'Select wallet', onClickClose: onClickClose, onClickBack: onClickBack }, { children: [!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('') }))), 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: false }, wallet.key))), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchInstead.SearchInstead, {}))] })) }) }));
+};
+
+exports.SelectWalletView = SelectWalletView;

package/src/lib/modals/MultiWalletStepSelectorModal/views/SelectWalletView/SelectWalletView.d.ts

@@ -0,0 +1,8 @@
+import { FC, MouseEventHandler } from 'react';
+type SelectWalletViewProps = {
+    onClickClose: MouseEventHandler<HTMLButtonElement>;
+    onClickBack: MouseEventHandler<HTMLButtonElement>;
+    onAllWalletsConnected: () => void;
+};
+export declare const SelectWalletView: FC<SelectWalletViewProps>;
+export {};

package/src/lib/modals/MultiWalletStepSelectorModal/views/SelectWalletView/SelectWalletView.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useWalletBookContext } from '@dynamic-labs/wallet-book';
+import { SelectWalletListLayout } from '../../../../layouts/SelectWalletListLayout/SelectWalletListLayout.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/utils';
+import { WALLET_PICKER_SEARCH_KEY } from '../../../../utils/constants/localStorage.js';
+import '../../../../utils/constants/colors.js';
+import { LocalStorage } from '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
+import { walletListBuilder } from '../../../../utils/functions/walletListBuilder/walletListBuilder.js';
+import { FilterWalletsByChainName } from '../../../../utils/functions/walletFilters/index.js';
+import { WalletListItem } from '../../../../views/WalletList/WalletListItem/WalletListItem.js';
+import { Search } from '../../../../components/Search/Search.js';
+import { SearchInstead } from '../../../../views/WalletList/SearchInstead/SearchInstead.js';
+import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { Modal } from '../../../../components/Modal/Modal.js';
+import { ModalCard } from '../../../../components/ModalCard/ModalCard.js';
+
+const SelectWalletView = ({ onClickClose, onClickBack, onAllWalletsConnected, }) => {
+    var _a, _b;
+    const [filterValue, setFilterValue] = useState((_a = LocalStorage.getFromLS(WALLET_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
+    const { walletBook } = useWalletBookContext();
+    const { walletsToConnectByChain, wallets, connectedWallets, defaultNumberOfWalletsToShow, walletsFilter, projectSettings, } = useInternalDynamicContext();
+    const [chain, setChain] = useState((_b = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain[0]) === null || _b === void 0 ? void 0 : _b.chain);
+    const getFilteredWalletsByChain = chain !== undefined && FilterWalletsByChainName(chain);
+    const filteredWalletsByChain = getFilteredWalletsByChain && getFilteredWalletsByChain(wallets);
+    const { walletsList, numberOfWallets } = walletListBuilder({
+        inputList: filteredWalletsByChain || wallets,
+        isWalletConnectList: false,
+        lastUsedWalletName: '',
+        numberOfWalletsToShow: defaultNumberOfWalletsToShow,
+        searchFilter: filterValue,
+        signWithEmailWalletName: '',
+        walletBook,
+        walletsFilter: walletsFilter,
+    });
+    useEffect(() => {
+        var _a;
+        if (connectedWallets.length === 0) {
+            return;
+        }
+        const allWalletsConnected = (walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain.length) === 0;
+        if (allWalletsConnected) {
+            onAllWalletsConnected();
+            return;
+        }
+        setFilterValue('');
+        setChain((_a = walletsToConnectByChain === null || walletsToConnectByChain === void 0 ? void 0 : walletsToConnectByChain[0]) === null || _a === void 0 ? void 0 : _a.chain);
+    }, [walletsToConnectByChain, onAllWalletsConnected, connectedWallets]);
+    const isSearchEnabled = numberOfWallets > defaultNumberOfWalletsToShow &&
+        walletsList.length !== numberOfWallets;
+    return (jsx(Modal, { children: jsx(ModalCard, { children: jsxs(SelectWalletListLayout, Object.assign({ title: 'Select wallet', onClickClose: onClickClose, onClickBack: onClickBack }, { children: [!projectSettings ? (jsx(Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsx(Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => setFilterValue(value), onClickClear: () => setFilterValue('') }))), wallets.length === 0 && (jsx(ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: false }, wallet.key))), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchInstead, {}))] })) }) }));
+};
+
+export { SelectWalletView };

package/src/lib/modals/MultiWalletStepSelectorModal/views/SelectWalletView/index.d.ts

@@ -0,0 +1 @@
+export { SelectWalletView } from './SelectWalletView';

package/src/lib/modals/MultiWalletStepSelectorModal/views/WelcomeView/WelcomeView.cjs

@@ -0,0 +1,71 @@
+'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 BridgeWelcomeLayout = require('../../../../layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.cjs');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.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('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/consts/index.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../../context/ThemeContext/ThemeContext.cjs');
+require('react-dom');
+require('react-focus-lock');
+require('../../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../../context/ErrorContext/ErrorContext.cjs');
+require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../../components/IconButton/IconButton.cjs');
+require('../../../../components/Alert/Alert.cjs');
+require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('../../../../context/MockContext/MockContext.cjs');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+require('../../../../components/Popper/Popper/Popper.cjs');
+require('../../../../components/Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
+var Modal = require('../../../../components/Modal/Modal.cjs');
+var ModalCard = require('../../../../components/ModalCard/ModalCard.cjs');
+
+const isChainInfoDefined = (chainInfo) => chainInfo !== undefined;
+const WelcomeView = ({ onClickGetStarted, onClickClose, }) => {
+    const { appName, walletsByChain = [] } = useInternalDynamicContext.useInternalDynamicContext();
+    const body = React.useMemo(() => {
+        const blockchainNames = walletsByChain.map(({ chain }) => { var _a; return (_a = walletConnectorCore.getChainInfo(chain)) === null || _a === void 0 ? void 0 : _a.blockchainName; });
+        const [firstBlockchainName, secondBlockchainName] = blockchainNames;
+        return `You’ll need to connect both an ${firstBlockchainName} and a ${secondBlockchainName} wallet to get started`;
+    }, [walletsByChain]);
+    const chains = React.useMemo(() => walletsByChain
+        .map(({ chain }, index) => {
+        const chainInfo = walletConnectorCore.getChainInfo(chain);
+        const ChainIcon = getChainIcon.getChainIcon(chain);
+        if (chainInfo && ChainIcon) {
+            return {
+                icon: jsxRuntime.jsx(ChainIcon, {}),
+                id: index,
+                name: chainInfo.blockchainName,
+            };
+        }
+        return undefined;
+    })
+        .filter(isChainInfoDefined), [walletsByChain]);
+    return (jsxRuntime.jsx(Modal.Modal, { children: jsxRuntime.jsx(ModalCard.ModalCard, { children: jsxRuntime.jsx(BridgeWelcomeLayout.BridgeWelcomeLayout, { onClickClose: onClickClose, title: `Welcome ${appName}`, body: body, chains: chains, actionButtonText: 'Get started', onClickAction: onClickGetStarted }) }) }));
+};
+
+exports.WelcomeView = WelcomeView;

package/src/lib/modals/MultiWalletStepSelectorModal/views/WelcomeView/WelcomeView.d.ts

@@ -0,0 +1,7 @@
+import { FC, MouseEventHandler } from 'react';
+type WelcomeViewProps = {
+    onClickGetStarted: MouseEventHandler<HTMLButtonElement>;
+    onClickClose: MouseEventHandler<HTMLButtonElement>;
+};
+export declare const WelcomeView: FC<WelcomeViewProps>;
+export {};

package/src/lib/modals/MultiWalletStepSelectorModal/views/WelcomeView/WelcomeView.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { getChainInfo } from '@dynamic-labs/wallet-connector-core';
+import { BridgeWelcomeLayout } from '../../../../layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.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 '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/consts/index.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../../context/ThemeContext/ThemeContext.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../../config/ApiEndpoint.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../../context/ErrorContext/ErrorContext.js';
+import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../../components/IconButton/IconButton.js';
+import '../../../../components/Alert/Alert.js';
+import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '../../../../context/MockContext/MockContext.js';
+import '../../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
+import '../../../../components/Popper/Popper/Popper.js';
+import '../../../../components/Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
+import { Modal } from '../../../../components/Modal/Modal.js';
+import { ModalCard } from '../../../../components/ModalCard/ModalCard.js';
+
+const isChainInfoDefined = (chainInfo) => chainInfo !== undefined;
+const WelcomeView = ({ onClickGetStarted, onClickClose, }) => {
+    const { appName, walletsByChain = [] } = useInternalDynamicContext();
+    const body = useMemo(() => {
+        const blockchainNames = walletsByChain.map(({ chain }) => { var _a; return (_a = getChainInfo(chain)) === null || _a === void 0 ? void 0 : _a.blockchainName; });
+        const [firstBlockchainName, secondBlockchainName] = blockchainNames;
+        return `You’ll need to connect both an ${firstBlockchainName} and a ${secondBlockchainName} wallet to get started`;
+    }, [walletsByChain]);
+    const chains = useMemo(() => walletsByChain
+        .map(({ chain }, index) => {
+        const chainInfo = getChainInfo(chain);
+        const ChainIcon = getChainIcon(chain);
+        if (chainInfo && ChainIcon) {
+            return {
+                icon: jsx(ChainIcon, {}),
+                id: index,
+                name: chainInfo.blockchainName,
+            };
+        }
+        return undefined;
+    })
+        .filter(isChainInfoDefined), [walletsByChain]);
+    return (jsx(Modal, { children: jsx(ModalCard, { children: jsx(BridgeWelcomeLayout, { onClickClose: onClickClose, title: `Welcome ${appName}`, body: body, chains: chains, actionButtonText: 'Get started', onClickAction: onClickGetStarted }) }) }));
+};
+
+export { WelcomeView };

package/src/lib/modals/MultiWalletStepSelectorModal/views/WelcomeView/index.d.ts

@@ -0,0 +1 @@
+export { WelcomeView } from './WelcomeView';

package/src/lib/modals/MultiWalletStepSelectorModal/views/index.d.ts

@@ -0,0 +1,3 @@
+export * from './WelcomeView';
+export * from './SelectWalletView';
+export * from './ResumeView';

package/src/lib/modals/SendBalanceModal/SendBalanceModal.cjs

@@ -6,13 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 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');
 var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 var index = require('../../shared/consts/index.cjs');
@@ -27,6 +27,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var SendBalanceView = require('../../views/SendBalanceView/SendBalanceView.cjs');
+require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/modals/SendBalanceModal/SendBalanceModal.js

@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 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 { usePreventPageScroll } from '../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import { authModalZIndex } from '../../shared/consts/index.js';
@@ -23,6 +23,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { SendBalanceView } from '../../views/SendBalanceView/SendBalanceView.js';
+import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';