@dynamic-labs/sdk-react-core 0.18.0-RC.9 → 0.18.0-beta.29

package/src/lib/views/WalletList/{SearchInstead/SearchInstead.cjs → SearchNotFoundMessage/SearchNotFoundMessage.cjs}

@@ -20,6 +20,7 @@ require('../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../../context/ThemeContext/ThemeContext.cjs');
+var Icon = require('../../../components/Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
 require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -30,6 +31,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
 require('../../../context/MockContext/MockContext.cjs');
@@ -39,7 +41,9 @@ require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 
-const SearchInstead = () => (jsxRuntime.jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: "Don't see your wallet?" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: "Try search instead" }))] })));
+const SearchNotFoundMessage = ({ title, subtitle, image, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [image && (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'search-instead__container__image', color: 'text-tertiary' }, { children: image }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: title || "Don't see your wallet?" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: subtitle || 'Try search instead' }))] })));
 
-exports.SearchInstead = SearchInstead;
+exports.SearchNotFoundMessage = SearchNotFoundMessage;

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

@@ -0,0 +1,8 @@
+import { FC, ReactElement } from 'react';
+interface Props {
+    title?: string;
+    subtitle?: string;
+    image?: ReactElement;
+}
+export declare const SearchNotFoundMessage: FC<Props>;
+export {};

package/src/lib/views/WalletList/{SearchInstead/SearchInstead.js → SearchNotFoundMessage/SearchNotFoundMessage.js}

@@ -16,6 +16,7 @@ import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../../../components/ShadowDOM/ShadowDOM.js';
 import '../../../context/ThemeContext/ThemeContext.js';
+import { Icon } from '../../../components/Icon/Icon.js';
 import 'react-dom';
 import 'react-focus-lock';
 import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -26,6 +27,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
 import '../../../context/MockContext/MockContext.js';
@@ -35,7 +37,9 @@ import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 
-const SearchInstead = () => (jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: "Don't see your wallet?" })), jsx(Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: "Try search instead" }))] })));
+const SearchNotFoundMessage = ({ title, subtitle, image, }) => (jsxs("div", Object.assign({ className: 'search-instead__container' }, { children: [image && (jsx(Icon, Object.assign({ className: 'search-instead__container__image', color: 'text-tertiary' }, { children: image }))), jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_small', weight: 'regular' }, { children: title || "Don't see your wallet?" })), jsx(Typography, Object.assign({ color: 'primary', variant: 'button_primary', weight: 'regular' }, { children: subtitle || 'Try search instead' }))] })));
 
-export { SearchInstead };
+export { SearchNotFoundMessage };

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

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

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

@@ -26,13 +26,14 @@ require('@dynamic-labs/utils');
 var localStorage = require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
-var SearchInstead = require('./SearchInstead/SearchInstead.cjs');
+var noWalletFound = require('../../assets/no-wallet-found.cjs');
+var SearchNotFoundMessage = require('./SearchNotFoundMessage/SearchNotFoundMessage.cjs');
 var WalletListItem = require('./WalletListItem/WalletListItem.cjs');
 
 localStorage.LocalStorage.setToLS(localStorage$1.WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
     var _a;
-    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, connectedWallets, defaultNumberOfWalletsToShow, walletsToConnectByChain, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, defaultNumberOfWalletsToShow, walletsToConnectByChain, } = useInternalDynamicContext.useInternalDynamicContext();
     const { walletBook: walletBook$1 } = walletBook.useWalletBookContext();
     const { error } = ErrorContext.useErrorContext();
     const { view } = ViewContext.useViewContext();
@@ -77,7 +78,7 @@ const WalletList = ({ isWalletConnectList = 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 } }) => 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: () => handleFilterValueChange('') }, 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." })), wallets.length && walletsList.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: 'No wallet found.', subtitle: 'Try searching for a different wallet', image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (walletsList.map((wallet) => (jsxRuntime.jsx(WalletListItem.WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key))))] })), isSearchEnabled && !filterValue && projectSettings && (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, {}))] }))] })), noDefaultFooter && (jsxRuntime.jsx("div", { className: classNames.classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };

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

@@ -22,13 +22,14 @@ import '@dynamic-labs/utils';
 import { LocalStorage } from '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
-import { SearchInstead } from './SearchInstead/SearchInstead.js';
+import { ReactComponent as SvgNoWalletFound } from '../../assets/no-wallet-found.js';
+import { SearchNotFoundMessage } from './SearchNotFoundMessage/SearchNotFoundMessage.js';
 import { WalletListItem } from './WalletListItem/WalletListItem.js';
 
 LocalStorage.setToLS(WALLET_PICKER_SEARCH_KEY, '');
 const WalletList = ({ isWalletConnectList = false, }) => {
     var _a;
-    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, connectedWallets, defaultNumberOfWalletsToShow, walletsToConnectByChain, } = useInternalDynamicContext();
+    const { walletsFilter, signWithEmailWalletName, user, wallets, projectSettings, defaultNumberOfWalletsToShow, walletsToConnectByChain, } = useInternalDynamicContext();
     const { walletBook } = useWalletBookContext();
     const { error } = useErrorContext();
     const { view } = useViewContext();
@@ -73,7 +74,7 @@ const WalletList = ({ isWalletConnectList = false, }) => {
     };
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'wallet-list__container' }, { children: [error && jsx(ErrorContainer, { children: error }), !projectSettings ? (jsx(Skeleton, { className: 'wallet-list__search-skeleton' })) : (isSearchEnabled && (jsx(Search, { label: `Search through ${numberOfWallets} wallets...`, value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }))), jsxs("div", Object.assign({ className: classNames('wallet-list__scroll-container', {
                             'wallet-list__scroll-container--full-height': isSearchEnabled,
-                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [wallets.length === 0 && (jsx(ErrorContainer, { children: "Oops, no login methods have been configured." })), walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, connectedWallets: connectedWallets, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key)))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchInstead, {}))] }))] })), noDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
+                        }), "data-testid": 'wallet-list-scroll-container', ref: walletListScrollRef, onScroll: handleScroll }, { children: [!projectSettings ? (jsx(Skeleton, { count: 10, className: 'wallet-list__tile-skeleton' })) : (jsxs(Fragment, { children: [wallets.length === 0 && (jsx(ErrorContainer, { children: "Oops, no login methods have been configured." })), wallets.length && walletsList.length === 0 ? (jsx(SearchNotFoundMessage, { title: 'No wallet found.', subtitle: 'Try searching for a different wallet', image: jsx(SvgNoWalletFound, {}) })) : (walletsList.map((wallet) => (jsx(WalletListItem, { wallet: wallet, usingMultiWallet: isUsingMultiWallet, onResetSearchValue: () => handleFilterValueChange('') }, wallet.key))))] })), isSearchEnabled && !filterValue && projectSettings && (jsx(SearchNotFoundMessage, {}))] }))] })), noDefaultFooter && (jsx("div", { className: classNames('wallet-list__tiny-footer', {
                     'wallet-list__tiny-footer--hidden': footerIsVisible,
                 }), "data-testid": 'wallet-list-tiny-footer' }))] }));
 };

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

@@ -35,6 +35,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../components/IconButton/IconButton.cjs');
 require('../../../components/Alert/Alert.cjs');
 var useWalletItemActions = require('../../../utils/hooks/useWalletItemActions/useWalletItemActions.cjs');
@@ -44,6 +45,8 @@ require('../../../components/Popper/Popper/Popper.cjs');
 require('../../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
 var Badge = require('../../../components/Badge/Badge.cjs');
 var isWalletGroup = require('../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.cjs');
 var WalletGroupContext = require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
@@ -72,10 +75,10 @@ const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = (
     const name = _isWalletGroup
         ? walletBook.getWalletGroup(walletBook$1, wallet.key).name
         : walletBook.getWalletBookWallet(walletBook$1, wallet.name).name;
-    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { walletName: wallet.name, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) } }));
+    const leading = (jsxRuntime.jsx(walletBook.WalletIcon, { className: 'wallet-list-item__leading', walletName: wallet.name, style: { height: pixelToRem.pixelToRem(28), width: pixelToRem.pixelToRem(28) } }));
     const trailing = (jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-list-item__trailing' }, { children: [label && (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('trailing__child', {
                     trailing__label: !isComingSoon,
-                }) }, { children: jsxRuntime.jsx(Badge.Badge, { dot: !isComingSoon && !_isWalletGroup, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsxRuntime.jsx("div", Object.assign({ className: 'trailing__child trailing__arrow' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) })))] })));
+                }) }, { children: jsxRuntime.jsx(Badge.Badge, { dot: !isComingSoon, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsxRuntime.jsx("div", Object.assign({ className: 'trailing__child trailing__arrow' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsxRuntime.jsx(stroke.ReactComponent, {}) })) })))] })));
     return (jsxRuntime.jsx(Tile, { leading: leading, trailing: trailing, name: name, onClick: handleClick }));
 };
 

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

@@ -31,6 +31,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../components/IconButton/IconButton.js';
 import '../../../components/Alert/Alert.js';
 import { useWalletItemActions } from '../../../utils/hooks/useWalletItemActions/useWalletItemActions.js';
@@ -40,6 +41,8 @@ import '../../../components/Popper/Popper/Popper.js';
 import '../../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
 import { Badge } from '../../../components/Badge/Badge.js';
 import { isWalletGroup } from '../../../utils/functions/walletListBuilder/utils/isWalletGroup/isWalletGroup.js';
 import { useWalletGroupContext } from '../../../context/WalletGroupContext/WalletGroupContext.js';
@@ -68,10 +71,10 @@ const WalletListItem = ({ usingMultiWallet, wallet, onResetSearchValue, tile = (
     const name = _isWalletGroup
         ? getWalletGroup(walletBook, wallet.key).name
         : getWalletBookWallet(walletBook, wallet.name).name;
-    const leading = (jsx(WalletIcon, { walletName: wallet.name, style: { height: pixelToRem(28), width: pixelToRem(28) } }));
+    const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', walletName: wallet.name, style: { height: pixelToRem(28), width: pixelToRem(28) } }));
     const trailing = (jsxs("div", Object.assign({ className: 'wallet-list-item__trailing' }, { children: [label && (jsx("div", Object.assign({ className: classNames('trailing__child', {
                     trailing__label: !isComingSoon,
-                }) }, { children: jsx(Badge, { dot: !isComingSoon && !_isWalletGroup, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsx("div", Object.assign({ className: 'trailing__child trailing__arrow' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsx(SvgStroke, {}) })) })))] })));
+                }) }, { children: jsx(Badge, { dot: !isComingSoon, text: label, className: 'trailing__badge' }) }))), !isComingSoon && (jsx("div", Object.assign({ className: 'trailing__child trailing__arrow' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary', size: 'small' }, { children: jsx(SvgStroke, {}) })) })))] })));
     return (jsx(Tile, { leading: leading, trailing: trailing, name: name, onClick: handleClick }));
 };
 

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

@@ -1,7 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
-import { Wallet, WalletOption } from '../../../shared';
+import { WalletOption } from '../../../shared';
 export type WalletListItemProps = {
-    connectedWallets: Wallet[];
     onResetSearchValue?: (newSearchValue: string) => void;
     tile?: WalletListItemTile;
     usingMultiWallet: boolean;

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

@@ -31,6 +31,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var Button = require('../../components/Button/Button.cjs');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
@@ -45,6 +46,8 @@ require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
 var Divider = require('../../components/Divider/Divider.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const iconSize = 64;
 const WalletLockedView = () => {
@@ -56,7 +59,7 @@ const WalletLockedView = () => {
             height: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
             width: pixelToRem.pixelToRem(iconSize * IconWithSpinner.iconRatio),
         } }));
-    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'wallet-locked-view' }, { children: [jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'wallet-locked-view__error-container' }, { children: "We cannot connect to your wallet" })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-locked-view__content' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, className: 'wallet-locked-view__icon', isSpinning: true }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', weight: 'medium', className: 'wallet-locked-view__title' }, { children: "Unlock your Wallet extension" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: "Your wallet extension is locked. To continue, open your extension and unlock your wallet." })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'wallet-locked-view__button-header' }, { children: "Once unlocked, click here" })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonRounded: 'default', onClick: () => setShowAuthFlow(false), buttonClassName: 'wallet-locked-view__button' }, { children: "I unlocked the wallet" })), jsxRuntime.jsx(Divider.Divider, { text: 'Or' }), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'wallet-locked-view__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'wallet-locked-view' }, { children: [jsxRuntime.jsx(ErrorContainer.ErrorContainer, Object.assign({ withIcon: false, className: 'wallet-locked-view__error-container' }, { children: "We cannot connect to your wallet" })), jsxRuntime.jsxs("div", Object.assign({ className: 'wallet-locked-view__content' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: icon, iconSize: iconSize, className: 'wallet-locked-view__icon', isSpinning: true }), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', weight: 'medium', className: 'wallet-locked-view__title' }, { children: "Unlock your Wallet extension" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: "Your wallet extension is locked. To continue, open your extension and unlock your wallet." })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'wallet-locked-view__button-header' }, { children: "Once unlocked, click here" })), jsxRuntime.jsx(Button.Button, Object.assign({ buttonRounded: 'default', onClick: () => setShowAuthFlow(false), buttonClassName: 'wallet-locked-view__button' }, { children: "I unlocked the wallet" })), jsxRuntime.jsx(Divider.Divider, { text: 'Or' }), jsxRuntime.jsx(TextButton.TextButton, Object.assign({ className: 'wallet-locked-view__log-out', onClick: handleLogOut }, { children: "Log out" }))] }))] })));
 };
 
 exports.WalletLockedView = WalletLockedView;

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

@@ -27,6 +27,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../components/IconButton/IconButton.js';
 import { Button } from '../../components/Button/Button.js';
 import { IconWithSpinner, iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.js';
@@ -41,6 +42,8 @@ import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
 import { Divider } from '../../components/Divider/Divider.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const iconSize = 64;
 const WalletLockedView = () => {
@@ -52,7 +55,7 @@ const WalletLockedView = () => {
             height: pixelToRem(iconSize * iconRatio),
             width: pixelToRem(iconSize * iconRatio),
         } }));
-    return (jsxs("div", Object.assign({ "data-testid": 'wallet-locked-view' }, { children: [jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'wallet-locked-view__error-container' }, { children: "We cannot connect to your wallet" })), jsxs("div", Object.assign({ className: 'wallet-locked-view__content' }, { children: [jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, className: 'wallet-locked-view__icon', isSpinning: true }), jsx(Typography, Object.assign({ variant: 'title', color: 'primary', weight: 'medium', className: 'wallet-locked-view__title' }, { children: "Unlock your Wallet extension" })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: "Your wallet extension is locked. To continue, open your extension and unlock your wallet." })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'wallet-locked-view__button-header' }, { children: "Once unlocked, click here" })), jsx(Button, Object.assign({ buttonRounded: 'default', onClick: () => setShowAuthFlow(false), buttonClassName: 'wallet-locked-view__button' }, { children: "I unlocked the wallet" })), jsx(Divider, { text: 'Or' }), jsx(TextButton, Object.assign({ className: 'wallet-locked-view__log-out', onClick: () => handleLogOut() }, { children: "Log out" }))] }))] })));
+    return (jsxs("div", Object.assign({ "data-testid": 'wallet-locked-view' }, { children: [jsx(ErrorContainer, Object.assign({ withIcon: false, className: 'wallet-locked-view__error-container' }, { children: "We cannot connect to your wallet" })), jsxs("div", Object.assign({ className: 'wallet-locked-view__content' }, { children: [jsx(IconWithSpinner, { Icon: icon, iconSize: iconSize, className: 'wallet-locked-view__icon', isSpinning: true }), jsx(Typography, Object.assign({ variant: 'title', color: 'primary', weight: 'medium', className: 'wallet-locked-view__title' }, { children: "Unlock your Wallet extension" })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular' }, { children: "Your wallet extension is locked. To continue, open your extension and unlock your wallet." })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'wallet-locked-view__button-header' }, { children: "Once unlocked, click here" })), jsx(Button, Object.assign({ buttonRounded: 'default', onClick: () => setShowAuthFlow(false), buttonClassName: 'wallet-locked-view__button' }, { children: "I unlocked the wallet" })), jsx(Divider, { text: 'Or' }), jsx(TextButton, Object.assign({ className: 'wallet-locked-view__log-out', onClick: handleLogOut }, { children: "Log out" }))] }))] })));
 };
 
 export { WalletLockedView };

package/src/lib/views/WalletSignSpinnerView/WalletSignSpinnerView.cjs

@@ -33,6 +33,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var Button = require('../../components/Button/Button.cjs');
 var IconWithSpinner = require('../../components/IconWithSpinner/IconWithSpinner.cjs');
@@ -44,6 +45,8 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const WalletSignSpinnerView = () => {
     const { goToInitialView } = ViewContext.useViewContext();

package/src/lib/views/WalletSignSpinnerView/WalletSignSpinnerView.js

@@ -29,6 +29,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../components/IconButton/IconButton.js';
 import { Button } from '../../components/Button/Button.js';
 import { IconWithSpinner, iconRatio } from '../../components/IconWithSpinner/IconWithSpinner.js';
@@ -40,6 +41,8 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const WalletSignSpinnerView = () => {
     const { goToInitialView } = useViewContext();

package/src/lib/views/WalletUsedView/WalletUsedView.cjs

@@ -40,6 +40,7 @@ var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
 var getSiweStatement = require('../../utils/functions/getSiweStatement/getSiweStatement.cjs');
 var getWalletProvider = require('../../utils/functions/getWalletProvider/getWalletProvider.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 var Button = require('../../components/Button/Button.cjs');
 require('../../components/Alert/Alert.cjs');
@@ -50,6 +51,8 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var LoadingContext = require('../../context/LoadingContext/LoadingContext.cjs');
 
 const WalletUsedView = () => {
@@ -58,7 +61,7 @@ const WalletUsedView = () => {
     const { setErrorMessage } = ErrorContext.useErrorContext();
     const { loading, setLoading } = LoadingContext.useLoadingContext();
     const { setView, goToInitialView } = ViewContext.useViewContext();
-    const { environmentId, displayTermsOfService, authToken, setCallback, setShowAuthFlow, setUser, appName, siweStatement, setPrimaryWalletId, primaryWallet, setMultiWalletWidgetState, connectWallet, selectedWalletConnector: walletConnector, isSingleWalletAccount, consumeNonce, handleLogOut, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { environmentId, displaySiweStatement, authToken, setCallback, setShowAuthFlow, setUser, appName, siweStatement, setPrimaryWalletId, primaryWallet, setMultiWalletWidgetState, connectWallet, selectedWalletConnector: walletConnector, isSingleWalletAccount, consumeNonce, handleLogOut, } = useInternalDynamicContext.useInternalDynamicContext();
     React.useEffect(() => {
         const _fetchPublicAddress = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
             const address = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress());
@@ -102,9 +105,12 @@ const WalletUsedView = () => {
         // TODO refactor this block
         try {
             const publicWalletAddress = yield connectWallet(walletConnector);
+            if (!publicWalletAddress) {
+                return;
+            }
             const walletProvider = getWalletProvider.getWalletProvider(walletConnector);
             const verifyArgs = yield getVerifyArgs.getVerifyArgs({
-                displayTermsOfService,
+                displaySiweStatement,
                 environmentId,
                 nonce,
                 publicWalletAddress,

package/src/lib/views/WalletUsedView/WalletUsedView.js

@@ -36,6 +36,7 @@ import { useErrorContext } from '../../context/ErrorContext/ErrorContext.js';
 import { getSiweStatement } from '../../utils/functions/getSiweStatement/getSiweStatement.js';
 import { getWalletProvider } from '../../utils/functions/getWalletProvider/getWalletProvider.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../components/IconButton/IconButton.js';
 import { Button } from '../../components/Button/Button.js';
 import '../../components/Alert/Alert.js';
@@ -46,6 +47,8 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import { useLoadingContext } from '../../context/LoadingContext/LoadingContext.js';
 
 const WalletUsedView = () => {
@@ -54,7 +57,7 @@ const WalletUsedView = () => {
     const { setErrorMessage } = useErrorContext();
     const { loading, setLoading } = useLoadingContext();
     const { setView, goToInitialView } = useViewContext();
-    const { environmentId, displayTermsOfService, authToken, setCallback, setShowAuthFlow, setUser, appName, siweStatement, setPrimaryWalletId, primaryWallet, setMultiWalletWidgetState, connectWallet, selectedWalletConnector: walletConnector, isSingleWalletAccount, consumeNonce, handleLogOut, } = useInternalDynamicContext();
+    const { environmentId, displaySiweStatement, authToken, setCallback, setShowAuthFlow, setUser, appName, siweStatement, setPrimaryWalletId, primaryWallet, setMultiWalletWidgetState, connectWallet, selectedWalletConnector: walletConnector, isSingleWalletAccount, consumeNonce, handleLogOut, } = useInternalDynamicContext();
     useEffect(() => {
         const _fetchPublicAddress = () => __awaiter(void 0, void 0, void 0, function* () {
             const address = yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.fetchPublicAddress());
@@ -98,9 +101,12 @@ const WalletUsedView = () => {
         // TODO refactor this block
         try {
             const publicWalletAddress = yield connectWallet(walletConnector);
+            if (!publicWalletAddress) {
+                return;
+            }
             const walletProvider = getWalletProvider(walletConnector);
             const verifyArgs = yield getVerifyArgs({
-                displayTermsOfService,
+                displaySiweStatement,
                 environmentId,
                 nonce,
                 publicWalletAddress,

package/src/lib/views/viewToComponentMap.cjs

@@ -27,8 +27,12 @@ var WalletGroupView = require('./WalletGroupView/WalletGroupView.cjs');
 var WalletLockedView = require('./WalletLockedView/WalletLockedView.cjs');
 var BridgeWelcomeView = require('./BridgeWelcomeView/BridgeWelcomeView.cjs');
 var BridgeSummaryView = require('./BridgeSummaryView/BridgeSummaryView.cjs');
+var BridgeNextWalletConnectionView = require('./BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.cjs');
+var AccountExistsView = require('./AccountExistsView/AccountExistsView.cjs');
 
 const viewToComponentMap = {
+    'account-exists': jsxRuntime.jsx(AccountExistsView.AccountExistsView, {}),
+    'bridge-next-wallet-connection': jsxRuntime.jsx(BridgeNextWalletConnectionView.BridgeNextWalletConnectionView, {}),
     'bridge-summary': jsxRuntime.jsx(BridgeSummaryView.BridgeSummaryView, {}),
     'bridge-welcome': jsxRuntime.jsx(BridgeWelcomeView.BridgeWelcomeView, {}),
     captcha: jsxRuntime.jsx(CaptchaVerifyUser.CaptchaVerifyUser, {}),
@@ -36,6 +40,7 @@ const viewToComponentMap = {
     'collect-user-data': jsxRuntime.jsx(CollectUserDataView.CollectUserDataView, {}),
     'collect-user-data-login-with-email': jsxRuntime.jsx(CollectUserDataViewLoginWithEmail.CollectUserDataViewLoginWithEmail, {}),
     'email-wallet-otp-verification-view': jsxRuntime.jsx(EmailWalletOTPVerificationView.EmailWalletOTPVerificationView, {}),
+    'gate-blocked-wallet': jsxRuntime.jsx(NoAccess.NoAccess, {}),
     'login-with-email-or-wallet': jsxRuntime.jsx(LoginWithEmailView.LoginWithEmailView, {}),
     'login-with-email-or-wallet-full-wallet-list': jsxRuntime.jsx(WalletList.WalletList, {}),
     'login-with-email-verification': jsxRuntime.jsx(EmailVerification.EmailVerification, {}),

package/src/lib/views/viewToComponentMap.js

@@ -23,8 +23,12 @@ import { WalletGroupView } from './WalletGroupView/WalletGroupView.js';
 import { WalletLockedView } from './WalletLockedView/WalletLockedView.js';
 import { BridgeWelcomeView } from './BridgeWelcomeView/BridgeWelcomeView.js';
 import { BridgeSummaryView } from './BridgeSummaryView/BridgeSummaryView.js';
+import { BridgeNextWalletConnectionView } from './BridgeNextWalletConnectionView/BridgeNextWalletConnectionView.js';
+import { AccountExistsView } from './AccountExistsView/AccountExistsView.js';
 
 const viewToComponentMap = {
+    'account-exists': jsx(AccountExistsView, {}),
+    'bridge-next-wallet-connection': jsx(BridgeNextWalletConnectionView, {}),
     'bridge-summary': jsx(BridgeSummaryView, {}),
     'bridge-welcome': jsx(BridgeWelcomeView, {}),
     captcha: jsx(CaptchaVerifyUser, {}),
@@ -32,6 +36,7 @@ const viewToComponentMap = {
     'collect-user-data': jsx(CollectUserDataView, {}),
     'collect-user-data-login-with-email': jsx(CollectUserDataViewLoginWithEmail, {}),
     'email-wallet-otp-verification-view': jsx(EmailWalletOTPVerificationView, {}),
+    'gate-blocked-wallet': jsx(NoAccess, {}),
     'login-with-email-or-wallet': jsx(LoginWithEmailView, {}),
     'login-with-email-or-wallet-full-wallet-list': jsx(WalletList, {}),
     'login-with-email-verification': jsx(EmailVerification, {}),

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs

@@ -7,15 +7,17 @@ var React = require('react');
 var IsBrowser = require('../../components/IsBrowser/IsBrowser.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
-require('@dynamic-labs/iconic');
+var getChainIcon = require('../../shared/utils/functions/chain/getChainIcon.cjs');
 require('@dynamic-labs/wallet-connector-core');
-require('../../context/ViewContext/ViewContext.cjs');
 require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
 require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 var index = require('../../shared/utils/hooks/useOnClickOutside/index.cjs');
+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');
@@ -31,22 +33,24 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
-var DynamicConnectButton = require('../../components/DynamicConnectButton/DynamicConnectButton.cjs');
 require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+var InlineWidgetButton = require('../../components/InlineWidget/components/InlineWidgetButton/InlineWidgetButton.cjs');
+var InlineWidget = require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 var DynamicBridgeUserProfile = require('./components/DynamicBridgeUserProfile/DynamicBridgeUserProfile.cjs');
-var DynamicBridgeWidgetNav = require('./components/DynamicBridgeWidgetNav/DynamicBridgeWidgetNav.cjs');
 var DynamicBridgeWidgetContext = require('./context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 
-const DynamicBridgeWidget = ({ buttonClassName, buttonContainerClassName, innerButtonComponent = 'Connect your wallet', variant = 'modal', }) => {
-    const { showAuthFlow, setShowBridgeWidget, isUserConnected } = useInternalDynamicContext.useInternalDynamicContext();
+const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
+    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
     const closeOnOutsideClick = React.useCallback((e) => {
         var _a;
@@ -58,7 +62,14 @@ const DynamicBridgeWidget = ({ buttonClassName, buttonContainerClassName, innerB
         }
     }, [inlineControlsRef, variant, showAuthFlow, setShowBridgeWidget]);
     index.useOnClickOutside(widgetRef, closeOnOutsideClick);
-    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isUserConnected && (jsxRuntime.jsx(DynamicConnectButton.DynamicConnectButton, Object.assign({ buttonClassName: buttonClassName, buttonContainerClassName: buttonContainerClassName }, { children: innerButtonComponent }))), isUserConnected && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DynamicBridgeWidgetNav.DynamicBridgeWidgetNav, { ref: inlineControlsRef, onPrimaryWalletClick: () => setShowBridgeWidget(true), onSecondaryWalletClick: () => setShowBridgeWidget(true) }), jsxRuntime.jsx(DynamicBridgeUserProfile.DynamicBridgeUserProfile, { variant: variant })] }))] }) })) }));
+    return (jsxRuntime.jsx(IsBrowser.IsBrowser, { children: jsxRuntime.jsxs(ShadowDOM.ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsxRuntime.jsx(InlineWidget.InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
+                        const ChainIcon = getChainIcon.getChainIcon(chain);
+                        const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
+                        if (connectedChainWallets.length > 0) {
+                            return connectedChainWallets.map((wallet) => (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, Object.assign({ icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress.shortenWalletAddress(wallet.address, 3, 3) }), wallet.id)));
+                        }
+                        return (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, Object.assign({ icon: jsxRuntime.jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true) }, { children: "Connect wallet" }), chain));
+                    }) })), jsxRuntime.jsx(DynamicBridgeUserProfile.DynamicBridgeUserProfile, { variant: variant })] })) }));
 };
 
 exports.DynamicBridgeWidget = DynamicBridgeWidget;

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.d.ts

@@ -1,9 +1,7 @@
-import { FC, ReactNode } from 'react';
+import { FC } from 'react';
 export type DynamicBridgeWidgetVariant = 'modal' | 'dropdown';
 export type DynamicBridgeWidgetProps = {
-    buttonClassName?: string;
-    buttonContainerClassName?: string;
-    innerButtonComponent?: ReactNode;
+    className?: string;
     variant?: DynamicBridgeWidgetVariant;
 };
 export declare const DynamicBridgeWidget: FC<DynamicBridgeWidgetProps>;

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js

@@ -1,17 +1,19 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { IsBrowser } from '../../components/IsBrowser/IsBrowser.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
-import '@dynamic-labs/iconic';
+import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.js';
 import '@dynamic-labs/wallet-connector-core';
-import '../../context/ViewContext/ViewContext.js';
 import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
 import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import { useOnClickOutside } from '../../shared/utils/hooks/useOnClickOutside/index.js';
+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';
@@ -27,22 +29,24 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
-import { DynamicConnectButton } from '../../components/DynamicConnectButton/DynamicConnectButton.js';
 import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import { InlineWidgetButton } from '../../components/InlineWidget/components/InlineWidgetButton/InlineWidgetButton.js';
+import { InlineWidget } from '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 import { DynamicBridgeUserProfile } from './components/DynamicBridgeUserProfile/DynamicBridgeUserProfile.js';
-import { DynamicBridgeWidgetNav } from './components/DynamicBridgeWidgetNav/DynamicBridgeWidgetNav.js';
 import { useDynamicBridgeWidgetContext } from './context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
 
-const DynamicBridgeWidget = ({ buttonClassName, buttonContainerClassName, innerButtonComponent = 'Connect your wallet', variant = 'modal', }) => {
-    const { showAuthFlow, setShowBridgeWidget, isUserConnected } = useInternalDynamicContext();
+const DynamicBridgeWidget = ({ className, variant = 'modal', }) => {
+    const { showAuthFlow, setShowBridgeWidget, walletsByChain, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
     const closeOnOutsideClick = useCallback((e) => {
         var _a;
@@ -54,7 +58,14 @@ const DynamicBridgeWidget = ({ buttonClassName, buttonContainerClassName, innerB
         }
     }, [inlineControlsRef, variant, showAuthFlow, setShowBridgeWidget]);
     useOnClickOutside(widgetRef, closeOnOutsideClick);
-    return (jsx(IsBrowser, { children: jsx(ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: jsxs(Fragment, { children: [!isUserConnected && (jsx(DynamicConnectButton, Object.assign({ buttonClassName: buttonClassName, buttonContainerClassName: buttonContainerClassName }, { children: innerButtonComponent }))), isUserConnected && (jsxs(Fragment, { children: [jsx(DynamicBridgeWidgetNav, { ref: inlineControlsRef, onPrimaryWalletClick: () => setShowBridgeWidget(true), onSecondaryWalletClick: () => setShowBridgeWidget(true) }), jsx(DynamicBridgeUserProfile, { variant: variant })] }))] }) })) }));
+    return (jsx(IsBrowser, { children: jsxs(ShadowDOM, Object.assign({ id: 'dynamic-bridge-widget', className: 'dynamic-widget__container' }, { children: [jsx(InlineWidget, Object.assign({ ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav' }, { children: walletsByChain === null || walletsByChain === void 0 ? void 0 : walletsByChain.map(({ chain }) => {
+                        const ChainIcon = getChainIcon(chain);
+                        const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
+                        if (connectedChainWallets.length > 0) {
+                            return connectedChainWallets.map((wallet) => (jsx(InlineWidgetButton, Object.assign({ icon: jsx(ChainIcon, {}), onClick: () => setShowBridgeWidget(true) }, { children: shortenWalletAddress(wallet.address, 3, 3) }), wallet.id)));
+                        }
+                        return (jsx(InlineWidgetButton, Object.assign({ icon: jsx(ChainIcon, {}), onClick: () => setShowAuthFlow(true) }, { children: "Connect wallet" }), chain));
+                    }) })), jsx(DynamicBridgeUserProfile, { variant: variant })] })) }));
 };
 
 export { DynamicBridgeWidget };