@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Wallet/WalletComponents/WalletsList.d.ts

@@ -1,22 +1,24 @@
-import { Wallet, WalletProvider } from "../../../Models/WalletProvider";
+import { SelectAccountProps, Wallet, WalletProvider } from "../../../Models/WalletProvider";
 import { FC, HTMLAttributes } from "react";
 import { Network, Token } from "../../../Models/Network";
+import { AccountIdentity } from "../../../context/balanceAccounts";
 type Props = {
     selectable?: boolean;
-    wallets: Wallet[];
+    wallets: (Wallet | AccountIdentity)[];
     token?: Token;
     network?: Network;
     provider?: WalletProvider | undefined;
-    onSelect?: (wallet: Wallet, address: string) => void;
+    onSelect?: (props: SelectAccountProps) => void;
+    selectedDepositMethod?: "wallet" | "deposit_address";
 };
 declare const WalletsList: FC<Props>;
 type WalletItemProps = {
-    wallet: Wallet;
+    account: AccountIdentity | Wallet;
     selectable?: boolean;
     token?: Token;
     network?: Network;
     selectedAddress: string | undefined;
-    onWalletSelect?: (wallet: Wallet, address: string) => void;
+    onWalletSelect?: (props: SelectAccountProps) => void;
 };
 export declare const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps>;
 export default WalletsList;

package/dist/components/Wallet/WalletComponents/WalletsList.js

@@ -1,68 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Plus, Power } from "lucide-react";
-import AddressIcon from "../../Common/AddressIcon";
-import { ExtendedAddress } from "../../Input/Address/AddressPicker/AddressWithIcon";
+import { Plus, Unplug } from "lucide-react";
+import AddressIcon from "../../../components/Common/AddressIcon";
+import { ExtendedAddress } from "../../../components/Input/Address/AddressPicker/AddressWithIcon";
 import { clsx } from 'clsx';
 import { useConnectModal } from "../WalletModal";
-import { useSwapDataState } from "../../../context/swap";
-import FilledCheck from "../../Icons/FilledCheck";
-import { truncateDecimals } from "../../utils/RoundDecimals";
-import useSWRBalance from "../../../lib/balances/useSWRBalance";
+import FilledCheck from "../../../components/Icons/FilledCheck";
+import { truncateDecimals } from "../../../components/utils/RoundDecimals";
 import { useSettingsState } from "../../../context/settings";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../shadcn/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+import useWallet from "../../../hooks/useWallet";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
 const WalletsList = (props) => {
-    const { wallets, token, network, provider, selectable, onSelect } = props;
+    const { wallets, token, network, provider, selectable, onSelect, selectedDepositMethod } = props;
     const { connect } = useConnectModal();
     const connectWallet = async () => {
         const result = await connect(provider);
         if (result && onSelect && result.withdrawalSupportedNetworks?.some(n => n === network?.name)) {
-            onSelect(result, result.address);
+            onSelect({
+                providerName: result.providerName,
+                walletId: result.id,
+                address: result.address
+            });
         }
     };
-    const { selectedSourceAccount } = useSwapDataState();
-    return (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: 'button', onClick: connectWallet, className: "w-full flex justify-center p-2 bg-secondary-700 rounded-md hover:bg-secondary-600", children: _jsxs("div", { className: "flex items-center text-secondary-text gap-1 px-3 py-1", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm", children: "Connect new wallet" })] }) }), wallets.length > 0 &&
-                _jsx("div", { className: "flex flex-col justify-start space-y-3", children: wallets.map((wallet, index) => _jsx(WalletItem, { wallet: wallet, selectable: selectable, token: token, network: network, onWalletSelect: onSelect, selectedAddress: selectedSourceAccount?.address }, `${index}${wallet.providerName}`)) })] }));
+    const { provider: sourceProvider } = useWallet(network, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", selectedDepositMethod == 'wallet' ? sourceProvider?.name : undefined);
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("button", { type: 'button', onClick: connectWallet, className: "w-full flex justify-center p-2 bg-secondary-500 rounded-md hover:bg-secondary-400", children: _jsxs("div", { className: "flex items-center text-secondary-text gap-1 px-3 py-1", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "text-sm", children: "Connect new wallet" })] }) }), wallets.length > 0 &&
+                _jsx("div", { className: "flex flex-col justify-start space-y-3", children: wallets.map((wallet, index) => _jsx(WalletItem, { account: wallet, selectable: selectable, token: token, network: network, onWalletSelect: onSelect, selectedAddress: selectedSourceAccount?.address }, `${index}${wallet.providerName}`)) })] }));
 };
-export const WalletItem = ({ selectable, wallet, network, onWalletSelect, token, selectedAddress, ...props }) => {
+export const WalletItem = ({ selectable, account: wallet, network, onWalletSelect, token, selectedAddress, ...props }) => {
     const { networks } = useSettingsState();
-    const networkWithTokens = networks.find(n => n.name === network?.name);
-    const { balance, isBalanceLoading } = useSWRBalance(wallet.address, networkWithTokens);
-    const walletBalance = balance?.find(b => b?.token === token?.symbol);
+    const balanceNetwork = token ? networks.find(n => n.name === network?.name && n.tokens.some(t => t.symbol === token.symbol)) : undefined;
+    const { balances, isLoading: isBalanceLoading } = useBalance(wallet.address, balanceNetwork);
+    const walletBalance = balances?.find(b => b?.token === token?.symbol);
     const isSelected = selectable && (wallet.addresses.length == 1 && wallet.address == selectedAddress);
     const walletBalanceAmount = walletBalance?.amount !== undefined ? truncateDecimals(walletBalance.amount, token?.precision) : '';
-    return (_jsxs("div", { ...props, className: "rounded-md outline-none text-primary-tex", children: [_jsxs("div", { onClick: () => (selectable && wallet.addresses.length == 1 && onWalletSelect) && onWalletSelect(wallet, wallet.address), className: clsx('w-full relative items-center justify-between gap-2 flex rounded-lg outline-none bg-secondary-700 text-primary-text p-3 group/addressItem', {
-                    'hover:bg-secondary-600 cursor-pointer': selectable && wallet.addresses.length == 1,
-                    'bg-secondary-800 py-2': wallet.addresses.length > 1
+    return (_jsxs("div", { ...props, className: "rounded-md outline-hidden text-primary-tex", children: [_jsxs("div", { onClick: () => (selectable && wallet.addresses.length == 1 && onWalletSelect) && onWalletSelect({
+                    providerName: wallet.providerName,
+                    walletId: wallet.id,
+                    address: wallet.address
+                }), className: clsx('w-full relative items-center justify-between gap-2 flex rounded-lg outline-hidden bg-secondary-500 text-primary-text p-3 group/addressItem', {
+                    'hover:bg-secondary-400 cursor-pointer': selectable && wallet.addresses.length == 1,
+                    'bg-secondary-600 py-2': wallet.addresses.length > 1
                 }), children: [_jsxs("div", { className: "flex space-x-2 items-center grow", children: [wallet &&
                                 _jsxs("div", { className: "inline-flex items-center relative", children: [_jsx(wallet.icon, { className: clsx('w-9 h-9 p-0.5 rounded-md bg-secondary-800', {
-                                                '!w-6 !h-6': wallet.addresses.length > 1,
-                                            }) }), wallet?.networkIcon && _jsx("div", { className: "h-5 w-5 absolute -right-1 -bottom-1", children: _jsx("img", { src: wallet?.networkIcon || '', alt: "Wallet default network icon", height: "40", width: "40", loading: "eager", className: "object-contain rounded-md border-2 border-secondary-800" }) })] }), wallet.addresses.length > 1 ?
-                                _jsx("div", { children: _jsx("span", { className: "text-sm", children: wallet.displayName }) })
+                                                'w-6! h-6!': wallet.addresses.length > 1,
+                                            }) }), hasNetworkIcon(wallet) && _jsx("div", { className: "h-5 w-5 absolute -right-1 -bottom-1", children: _jsx(ImageWithFallback, { src: wallet?.networkIcon || '', alt: "Wallet default network icon", height: "40", width: "40", loading: "eager", className: "object-contain rounded-md border-2 border-secondary-800" }) })] }), wallet.addresses.length > 1 ?
+                                _jsx("div", { className: "text-sm", children: wallet.displayName })
                                 :
-                                    _jsxs("div", { className: "w-full inline-flex items-center justify-between grow", children: [_jsxs("div", { children: [!wallet.isLoading && wallet.address &&
-                                                        _jsx(ExtendedAddress, { address: wallet.address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => wallet && wallet.disconnect() }), _jsx("p", { className: "text-xs text-secondary-text", children: wallet.displayName })] }), walletBalanceAmount !== undefined && token &&
+                                    _jsxs("div", { className: "w-full inline-flex items-center justify-between grow", children: [_jsxs("div", { children: [!isLoading(wallet) && wallet.address &&
+                                                        _jsx(ExtendedAddress, { address: wallet.address, network: network, title: wallet.displayName?.split("-")[0], description: wallet.providerName, logo: wallet.icon, showDetails: true, addressClassNames: "font-normal text-sm", onDisconnect: () => hasDisconnect(wallet) && wallet.disconnect() }), _jsx("p", { className: "text-xs text-secondary-text", children: wallet.displayName })] }), walletBalanceAmount !== undefined && token &&
                                                 _jsx("span", { className: "text-sm flex space-x-2 justif-end", children: walletBalanceAmount ?
                                                         _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ?
-                                                                _jsx("div", { className: 'h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse' })
+                                                                _jsx("div", { className: 'h-[14px] w-20 inline-flex bg-gray-500 rounded-xs animate-pulse' })
                                                                 :
                                                                     _jsxs(_Fragment, { children: [_jsx("span", { children: walletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] }) })
                                                         :
-                                                            _jsx(_Fragment, {}) })] })] }), !selectable &&
-                        _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: wallet.disconnect, className: "text-xs text-secondary-text hover:text-primary-text rounded-full p-1.5 bg-secondary-900 hover:bg-secondary-950 transition-colors duration-200 ", children: _jsx(Power, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Disconnect" }) })] }), isSelected &&
+                                                            _jsx(_Fragment, {}) })] })] }), !selectable && hasDisconnect(wallet) &&
+                        _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: wallet.disconnect, className: "text-xs text-secondary-text hover:text-primary-text rounded-full p-1.5 bg-secondary-700 transition-colors duration-200 ", children: _jsx(Unplug, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Disconnect" }) })] }), isSelected &&
                         _jsx("div", { className: "flex h-6 items-center px-1", children: _jsx(FilledCheck, {}) })] }), wallet.addresses.length > 1 &&
-                _jsx("div", { className: 'w-full grow py-1 mt-1 bg-secondary-700 rounded-lg', children: wallet.addresses.map((address, index) => _jsx(NestedWalletAddress, { address: address, selectable: selectable, wallet: wallet, network: network, onWalletSelect: onWalletSelect, selectedAddress: selectedAddress, token: token }, index)) })] }));
+                _jsx("div", { className: 'w-full grow py-1 mt-1 bg-secondary-500 rounded-lg', children: wallet.addresses.map((address, index) => _jsx(NestedWalletAddress, { address: address, selectable: selectable, wallet: wallet, network: network, onWalletSelect: onWalletSelect, selectedAddress: selectedAddress, token: token }, index)) })] }));
 };
 const NestedWalletAddress = ({ selectable, address, network, onWalletSelect, token, wallet, selectedAddress, ...props }) => {
     const { networks } = useSettingsState();
-    const networkWithTokens = networks.find(n => n.name === network?.name);
-    const { balance, isBalanceLoading } = useSWRBalance(address, networkWithTokens);
+    const balanceNetwork = token ? networks.find(n => n.name === network?.name && n.tokens.some(t => t.symbol === token.symbol)) : undefined;
+    const { balances, isLoading: isBalanceLoading } = useBalance(address, balanceNetwork);
     const isNestedSelected = selectable && address == selectedAddress;
-    const nestedWalletBalance = balance?.find(b => b?.token === token?.symbol);
+    const nestedWalletBalance = balances?.find(b => b?.token === token?.symbol);
     const nestedWalletBalanceAmount = nestedWalletBalance?.amount !== undefined ? truncateDecimals(nestedWalletBalance.amount, token?.precision) : '';
-    return (_jsxs("div", { ...props, onClick: () => (selectable && onWalletSelect) && onWalletSelect(wallet, address), className: clsx('flex w-full justify-between gap-3 items-center pl-6 pr-4 py-2 group/addressItem', {
-            'hover:bg-secondary-600 cursor-pointer': selectable
-        }), children: [_jsxs("div", { className: 'flex items-center w-fit gap-3', children: [_jsx("div", { className: "flex bg-secondary-400  items-center justify-center rounded-md h-8 w-8 overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-8 w-8 p-0.5", address: address, size: 32 }) }), _jsx("div", { children: !wallet.isLoading && address &&
-                            _jsx(ExtendedAddress, { address: address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => wallet && wallet.disconnect() }) })] }), _jsxs("div", { className: "inline-flex gap-2", children: [nestedWalletBalanceAmount && token && (_jsx("span", { className: "text-sm flex space-x-2 justify-end", children: _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ? (_jsx("div", { className: "h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: nestedWalletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] })) }) })), isNestedSelected &&
+    return (_jsxs("div", { ...props, onClick: () => (selectable && onWalletSelect) && onWalletSelect({
+            providerName: wallet.providerName,
+            walletId: wallet.id,
+            address: address
+        }), className: clsx('flex w-full justify-between gap-3 items-center pl-6 pr-4 py-2 group/addressItem', {
+            'hover:bg-secondary-400 cursor-pointer': selectable
+        }), children: [_jsxs("div", { className: 'flex items-center w-fit gap-3', children: [_jsx("div", { className: "flex bg-secondary-400 items-center justify-center rounded-md h-8 w-8 overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-8 w-8 p-0.5", address: address, size: 32 }) }), _jsx("div", { children: !isLoading(wallet) && address &&
+                            _jsx(ExtendedAddress, { address: address, network: network, addressClassNames: "font-normal text-sm", onDisconnect: () => hasDisconnect(wallet) && wallet?.disconnect() }) })] }), _jsxs("div", { className: "inline-flex gap-2", children: [nestedWalletBalanceAmount && token && (_jsx("span", { className: "text-sm flex space-x-2 justify-end", children: _jsx("div", { className: "text-right text-secondary-text font-normal text-sm", children: isBalanceLoading ? (_jsx("div", { className: "h-[14px] w-20 inline-flex bg-gray-500 rounded-sm animate-pulse" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: nestedWalletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] })) }) })), isNestedSelected &&
                         _jsx("div", { className: "flex h-6 items-center", children: _jsx(FilledCheck, {}) })] })] }));
 };
+function hasNetworkIcon(w) {
+    return 'networkIcon' in w && typeof w.networkIcon === 'string' && w.networkIcon !== '';
+}
+function hasDisconnect(w) {
+    return 'disconnect' in w && typeof w.disconnect === 'function';
+}
+function isLoading(w) {
+    return 'isLoading' in w && typeof w.isLoading === 'boolean' && w.isLoading;
+}
 export default WalletsList;

package/dist/components/Wallet/WalletModal/Connector.js

@@ -6,9 +6,9 @@ const Connector = ({ connector, connectingConnector, onClick, isRecent, ...props
     const connectorId = connector?.id;
     const Icon = resolveWalletConnectorIcon({ connector: connectorId, iconUrl: connector.icon });
     const isLoading = connectingConnector?.name === connectorName;
-    return (_jsx(_Fragment, { children: _jsx("button", { type: "button", disabled: !!connectingConnector, className: "w-full h-fit flex items-center justify-between bg-secondary-700 hover:bg-secondary-500 transition-colors duration-200 rounded-xl p-3", onClick: onClick, ...props, children: _jsxs("div", { className: "grid grid-cols-3 gap-3 items-center font-medium w-full", children: [_jsx(Icon, { className: "w-9 sm:w-11 h-auto p-0.5 rounded-[10px] bg-secondary-800" }), _jsxs("div", { className: 'flex flex-col items-start justify-center col-start-2 col-span-3 min-h-[40px]', children: [_jsx("p", { className: 'text-base text-left truncate w-full', children: connectorName }), connector.type === 'injected' && !isRecent &&
+    return (_jsx(_Fragment, { children: _jsx("button", { type: "button", disabled: !!connectingConnector, className: "w-full h-fit flex items-center justify-between bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl p-3", onClick: onClick, ...props, children: _jsxs("div", { className: "flex gap-2.5 items-center font-medium w-full", children: [_jsx("div", { className: "w-11", children: _jsx(Icon, { className: "w-11 h-auto p-0.5 rounded-[10px] bg-secondary-800" }) }), _jsxs("div", { className: 'flex flex-col items-start justify-center col-start-2 col-span-3 min-h-[40px] truncate', children: [_jsx("p", { className: 'text-base text-left truncate w-full', children: connectorName }), connector.type === 'injected' && !isRecent &&
                                 _jsx("p", { className: 'text-xs text-secondary-text font-medium', children: "Installed" }), isRecent &&
-                                _jsx("p", { className: 'text-xs text-primary-actionButtonText font-semibold bg-primary-700 px-1.5 py-0.5 rounded-md', children: "Recent" })] }), isLoading &&
+                                _jsx("p", { className: 'text-xs text-primary-buttonTextColor font-semibold bg-primary-700 px-1 py-0.5 rounded-md', children: "Recent" })] }), isLoading &&
                         _jsx("div", { className: 'absolute right-0 bg-secondary-800 rounded-lg p-1', children: _jsx(Loader, { className: 'h-4 w-4 animate-spin' }) })] }) }) }));
 };
 export default Connector;

package/dist/components/Wallet/WalletModal/ConnectorsList.js

@@ -2,29 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import useWallet from "../../../hooks/useWallet";
 import { useConnectModal } from ".";
-import { CircleX, Link2Off, RotateCw, Search, SlidersHorizontal, XCircle } from "lucide-react";
+import { CircleX, Link2Off, RotateCw, SlidersHorizontal } from "lucide-react";
 import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
 import { QRCodeSVG } from "qrcode.react";
+import CopyButton from "../../../components/Buttons/copyButton";
 import clsx from "clsx";
 import useWindowDimensions from "../../../hooks/useWindowDimensions";
 import Connector from "./Connector";
 import { removeDuplicatesWithKey } from "./utils";
 import { usePersistedState } from "../../../hooks/usePersistedState";
-import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover";
-import { Checkbox } from "../../shadcn/checkbox";
-import VaulDrawer from "../../Modal/vaulModal";
-import CopyButton from "../../Buttons/copyButton";
-import LayerSwapLogoSmall from "../../Icons/layerSwapLogoSmall";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/shadcn/popover";
+import LayerSwapLogoSmall from "../../../components/Icons/layerSwapLogoSmall";
+import { Checkbox } from "../../../components/shadcn/checkbox";
+import { isMobile } from "../../../lib/wallets/connectors/utils/isMobile";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+import { SearchComponent } from "../../../components/Input/Search";
 const ConnectorsLsit = ({ onFinish }) => {
-    const { isMobileWithPortal: isMobile } = useWindowDimensions();
     const { providers } = useWallet();
-    const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector } = useConnectModal();
+    const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector, selectedMultiChainConnector, setSelectedMultiChainConnector } = useConnectModal();
     let [recentConnectors, setRecentConnectors] = usePersistedState([], 'recentConnectors', 'localStorage');
     const [connectionError, setConnectionError] = useState(undefined);
     const [searchValue, setSearchValue] = useState(undefined);
-    const [isFocused, setIsFocused] = useState(false);
-    const [showEcosystemSeletion, setShowEcosystemSelection] = useState(false);
-    const [selectedMultiChainConnector, setSelectedMultiChainConnector] = useState(undefined);
+    const { isMobile: isMobileSize } = useWindowDimensions();
     const [isScrolling, setIsScrolling] = useState(false);
     const scrollTimeout = useRef(null);
     const handleScroll = () => {
@@ -41,16 +40,32 @@ const ConnectorsLsit = ({ onFinish }) => {
     const connect = async (connector, provider) => {
         try {
             setConnectionError(undefined);
-            if (connector.isMultiChain) {
+            if (connector?.isMultiChain) {
                 setSelectedMultiChainConnector(connector);
-                return setShowEcosystemSelection(true);
+                return;
             }
             setSelectedConnector(connector);
             if (connector.installUrl)
                 return;
-            const result = provider?.connectConnector && await provider.connectConnector({ connector });
+            const result = provider?.connectWallet && await provider.connectWallet({ connector });
             if (result && connector && provider) {
-                setRecentConnectors((prev) => [...(prev?.filter(v => v.providerName !== provider.name) || []), { providerName: provider.name, connectorName: connector.name }]);
+                setRecentConnectors((prev) => {
+                    const next = [{ providerName: provider.name, connectorName: connector.name }];
+                    const counts = new Map();
+                    counts.set(provider.name, 1);
+                    (prev || []).forEach(item => {
+                        if (item.providerName &&
+                            item.connectorName &&
+                            !(item.providerName === provider.name && item.connectorName === connector.name)) {
+                            const count = counts.get(item.providerName) ?? 0;
+                            if (count < 3) {
+                                next.push({ providerName: item.providerName, connectorName: item.connectorName });
+                                counts.set(item.providerName, count + 1);
+                            }
+                        }
+                    });
+                    return next;
+                });
                 onFinish(result);
             }
             setSelectedConnector(undefined);
@@ -65,13 +80,20 @@ const ConnectorsLsit = ({ onFinish }) => {
             }
         }
     };
+    const handleSelectProvider = (providerName) => {
+        const provider = filteredProviders.find(p => p.name === providerName);
+        if (!provider)
+            return setSelectedProvider(undefined);
+        setSelectedProvider({ ...provider, isSelectedFromFilter: true });
+    };
     const filteredProviders = providers.filter(p => !p.hideFromList);
     const featuredProviders = selectedProvider ? [selectedProvider] : filteredProviders;
-    const allConnectors = featuredProviders.filter(g => g.availableWalletsForConnect && g.availableWalletsForConnect?.length > 0).map((provider) => provider.availableWalletsForConnect?.filter(v => (isFocused || searchValue) ? (searchValue ? v.name.toLowerCase().includes(searchValue?.toLowerCase()) : false) : true).map((connector) => ({ ...connector, providerName: provider.name }))).flat();
-    const resolvedConnectors = useMemo(() => removeDuplicatesWithKey(allConnectors, 'name'), [allConnectors]);
+    const allFeaturedConnectors = useMemo(() => featuredProviders.filter(g => g.availableWalletsForConnect && g.availableWalletsForConnect?.length > 0).map((provider) => provider.availableWalletsForConnect?.filter(v => searchValue ? (searchValue ? v.name.toLowerCase().includes(searchValue?.toLowerCase()) : false) : true).map((connector) => ({ ...connector, providerName: provider.name }))).flat(), [featuredProviders, searchValue]);
+    const allHiddenConnectors = useMemo(() => featuredProviders.filter(g => g.availableHiddenWalletsForConnect && g.availableHiddenWalletsForConnect?.length > 0).map((provider) => provider.availableHiddenWalletsForConnect?.filter(v => searchValue ? (searchValue ? v.name.toLowerCase().includes(searchValue?.toLowerCase()) : false) : true).map((connector) => ({ ...connector, providerName: provider.name }))).flat(), [featuredProviders, searchValue]);
+    const allConnectors = useMemo(() => removeDuplicatesWithKey([...allFeaturedConnectors, ...(searchValue ? allHiddenConnectors : [])].sort((a, b) => sortRecentConnectors(a, b, recentConnectors)), 'name'), [allFeaturedConnectors, allHiddenConnectors, searchValue]);
     if (selectedConnector?.qr?.state) {
         const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector?.name, iconUrl: selectedConnector.icon });
-        return _jsxs("div", { className: "flex flex-col justify-start space-y-2", children: [_jsx("p", { className: "text-secondary-text", children: "Scan the QR code with your phone" }), _jsx("div", { className: "w-full h-full bg-secondary-700 pb-3 pt-5 rounded-lg", children: _jsxs("div", { className: 'flex flex-col justify-center items-center pt-2 w-fit mx-auto', children: [selectedConnector?.qr.state == 'fetched' ?
+        return _jsxs("div", { className: "flex flex-col justify-start space-y-2", children: [_jsx("p", { className: "text-secondary-text", children: "Scan the QR code with your phone" }), _jsx("div", { className: "w-full h-full bg-secondary-600 pb-3 pt-5 rounded-lg", children: _jsxs("div", { className: 'flex flex-col justify-center items-center pt-2 w-fit mx-auto', children: [selectedConnector?.qr.state == 'fetched' ?
                                 _jsx(QRCodeSVG, { className: "rounded-lg", value: selectedConnector?.qr.value, includeMargin: true, size: 264, level: "H", imageSettings: selectedConnector.icon
                                         ? {
                                             src: selectedConnector.icon,
@@ -81,44 +103,48 @@ const ConnectorsLsit = ({ onFinish }) => {
                                         }
                                         : undefined })
                                 :
-                                    _jsxs("div", { className: "w-[264px] h-[264px] relative", children: [_jsx("div", { className: "w-full h-full bg-secondary-500 animate-pulse rounded-xl" }), _jsx(ConnectorIcon, { className: 'h-[50px] w-[50px] absolute top-[calc(50%-25px)] right-[calc(50%-25px)]' })] }), _jsx("div", { className: 'bg-secondary-500 text-secondary-text w-full px-2 py-1.5 rounded-md mt-3 flex justify-center items-center', children: _jsx(CopyButton, { toCopy: selectedConnector?.qr.value || '', children: "Copy QR URL" }) })] }) })] });
+                                    _jsxs("div", { className: "w-[264px] h-[264px] relative", children: [_jsx("div", { className: "w-full h-full bg-secondary-500 animate-pulse rounded-xl" }), _jsx(ConnectorIcon, { className: 'h-[50px] w-[50px] absolute top-[calc(50%-25px)] right-[calc(50%-25px)]' })] }), _jsx("div", { className: 'bg-secondary-400 text-secondary-text w-full px-2 py-1.5 rounded-md mt-3 flex justify-center items-center', children: _jsx(CopyButton, { toCopy: selectedConnector?.qr.value || '', children: "Copy QR URL" }) })] }) })] });
     }
     if (selectedConnector) {
-        const connector = allConnectors.find(c => c?.name === selectedConnector.name);
+        const connector = allFeaturedConnectors.find(c => c?.name === selectedConnector.name);
         const provider = featuredProviders.find(p => p.name === connector?.providerName);
-        return _jsx(LoadingConnect, { isMobile: isMobile, onRetry: () => { connect(connector, provider); }, selectedConnector: selectedConnector, connectionError: connectionError });
+        return _jsx(LoadingConnect, { onRetry: () => { (connector && provider) && connect(connector, provider); }, selectedConnector: selectedConnector, connectionError: connectionError });
+    }
+    if (selectedMultiChainConnector) {
+        return _jsx(MultichainConnectorPicker, { selectedConnector: selectedMultiChainConnector, allConnectors: allFeaturedConnectors, providers: featuredProviders, connect: connect });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-primary-text space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative z-0 flex items-center px-3 rounded-lg bg-secondary-700 border border-secondary-500 w-full", children: [_jsx(Search, { className: "w-6 h-6 mr-2 text-primary-text-placeholder" }), _jsx("input", { value: searchValue, onChange: (e) => setSearchValue(e.target.value), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), placeholder: "Search wallet", autoComplete: "off", className: "placeholder:text-primary-text-placeholder border-0 border-b-0 border-primary-text focus:border-primary-text appearance-none block py-2.5 px-0 w-full h-10 bg-transparent text-base outline-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50" }), searchValue &&
-                                        _jsx("button", { type: "button", onClick: () => setSearchValue(''), className: "absolute right-3", children: _jsx(XCircle, { className: "w-4 h-4 text-primary-text-placeholder" }) })] }), _jsx(ProviderPicker, { providers: filteredProviders, selectedProviderName: selectedProvider?.name, setSelectedProviderName: (v) => setSelectedProvider(filteredProviders.find(p => p.name === v)) })] }), _jsx("div", { onScroll: handleScroll, className: clsx('overflow-y-scroll -mr-4 pr-2 scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar-thumb:bg-transparent', {
-                            'h-[55vh]': isMobile,
-                            'h-[265px]': !isMobile,
-                            'styled-scroll': isScrolling
-                        }), children: _jsx("div", { className: 'grid grid-cols-2 gap-2', children: resolvedConnectors.sort((a, b) => a.type && b.type ? a.type.localeCompare(b.type) : 0)?.map(item => {
-                                const provider = featuredProviders.find(p => p.name === item.providerName);
-                                const isRecent = recentConnectors?.some(v => v.connectorName === item.name);
-                                return (_jsx(Connector, { connector: item, onClick: () => connect(item, provider), connectingConnector: selectedConnector, isRecent: isRecent }, item.id));
-                            }) }) })] }), selectedMultiChainConnector &&
-                _jsx(MultichainConnectorModal, { selectedConnector: selectedMultiChainConnector, allConnectors: allConnectors, providers: featuredProviders, showEcosystemSelection: showEcosystemSeletion, setShowEcosystemSelection: setShowEcosystemSelection, connect: connect })] }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "text-primary-text space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SearchComponent, { searchQuery: searchValue || "", setSearchQuery: setSearchValue, placeholder: allHiddenConnectors.length > 300 ? "Search through 400+ wallets..." : "Search wallet", className: "w-full" }), (!selectedProvider || selectedProvider?.isSelectedFromFilter) &&
+                            _jsx(ProviderPicker, { providers: filteredProviders, selectedProviderName: selectedProvider?.name, setSelectedProviderName: handleSelectProvider })] }), _jsx("div", { onScroll: handleScroll, className: clsx('overflow-y-scroll -mr-4 pr-2 scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar-thumb:bg-transparent', {
+                        'h-[55vh]': isMobileSize,
+                        'h-[265px]': !isMobileSize,
+                        'styled-scroll': isScrolling
+                    }), children: _jsx("div", { className: 'grid grid-cols-2 gap-2', children: allConnectors.map(item => {
+                            const provider = featuredProviders.find(p => p.name === item.providerName);
+                            const isRecent = recentConnectors?.some(v => v.connectorName === item.name);
+                            return (_jsx(Connector, { connector: item, onClick: () => connect(item, provider), connectingConnector: selectedConnector, isRecent: isRecent }, item.id));
+                        }) }) })] }) }));
 };
-const LoadingConnect = ({ onRetry, selectedConnector, connectionError, isMobile }) => {
+const LoadingConnect = ({ onRetry, selectedConnector, connectionError }) => {
     const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector?.name, iconUrl: selectedConnector.icon });
+    const { isMobile: isMobileSize } = useWindowDimensions();
+    const isMobilePlatform = isMobile();
     if (selectedConnector.installUrl) {
         return _jsx("div", { className: clsx('w-full flex flex-col justify-center items-center font-semibold relative', {
-                'h-[60vh]': isMobile,
-                'h-[360px]': !isMobile,
-            }), children: _jsxs("div", { className: "flex flex-col gap-4 items-center justify-end row-start-2 row-span-1", children: [_jsxs("div", { className: "flex-col flex items-center gap-1", children: [_jsx(ConnectorIcon, { className: "w-11 h-auto p-0.5 rounded-md bg-secondary-800" }), _jsxs("p", { className: 'text-base font-semibold', children: [_jsx("span", { children: selectedConnector?.name }), " ", _jsx("span", { children: "is not installed" })] })] }), _jsx("button", { onClick: () => window.open(selectedConnector.installUrl, '_blank'), className: "px-3 py-1 rounded-full bg-secondary-600 text-primary-500 font-semibold text-base hover:brightness-125 transition-all duration-200", children: "INSTALL" })] }) });
+                'h-[60vh]': isMobileSize,
+                'h-[360px]': !isMobileSize,
+            }), children: _jsxs("div", { className: "flex flex-col gap-4 items-center justify-end row-start-2 row-span-1", children: [_jsxs("div", { className: "flex-col flex items-center gap-1", children: [_jsx(ConnectorIcon, { className: "w-11 h-auto p-0.5 rounded-md bg-secondary-800" }), _jsxs("p", { className: 'text-base font-semibold', children: [_jsx("span", { children: selectedConnector?.name }), " ", _jsx("span", { children: "is not installed" })] })] }), _jsx("button", { onClick: () => window.open(selectedConnector.installUrl, '_blank'), type: "button", className: "px-3 py-1 rounded-full bg-secondary-600 text-primary-500 font-semibold text-base hover:brightness-125 transition-all duration-200", children: "INSTALL" })] }) });
     }
     return (_jsxs("div", { className: clsx('w-full flex flex-col justify-center items-center font-semibold relative', {
-            'h-[60vh]': isMobile,
-            'h-[360px]': !isMobile,
+            'h-[60vh]': isMobileSize,
+            'h-[360px]': !isMobileSize,
             'pb-20': connectionError
         }), children: [selectedConnector &&
                 _jsxs("div", { className: "flex flex-col gap-3 items-center justify-end row-start-2 row-span-1", children: [_jsx("div", { className: "flex-col flex items-center", children: _jsxs("div", { className: "grid grid-cols-3 items-center gap-2", children: [_jsx("div", { className: "p-3 bg-secondary-700 rounded-lg z-10", children: _jsx(LayerSwapLogoSmall, { className: "w-11 h-auto" }) }), connectionError ?
                                         _jsx(Link2Off, { className: "w-auto h-auto place-self-center" })
                                         :
                                             _jsx("div", { className: "loader !text-[3px] place-self-center" }), _jsx("div", { className: "p-3 bg-secondary-700 rounded-lg z-10", children: _jsx(ConnectorIcon, { className: "w-11 h-auto" }) })] }) }), !connectionError &&
-                            _jsxs("div", { className: "py-1 text-center", children: [_jsx("p", { className: "text-base font-medium", children: "Click connect in your wallet popup" }), _jsx("p", { className: "text-sm font-normal text-secondary-text", children: "Don't see a pop up? Check your other browser windows" })] })] }), connectionError &&
-                _jsxs("div", { className: `bg-secondary-700 rounded-lg flex flex-col gap-1.5 items-center p-3 w-full absolute bottom-0`, children: [_jsxs("div", { className: "flex w-full gap-1 text-sm text-secondary-text justify-start", children: [_jsx(CircleX, { className: "w-5 h-5 stroke-primary-500 mr-1 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base text-white', children: "Failed to connect" }), _jsx("p", { className: "text-sm font-normal", children: connectionError })] })] }), _jsxs("button", { type: "button", className: "flex gap-1.5 items-center justify-center bg-secondary-500 w-full text-primary-text p-4 border-none rounded-lg cursor-pointer text-sm font-medium leading-4", onClick: onRetry, children: [_jsx(RotateCw, { className: 'h-4 w-4' }), _jsx("span", { children: "Try again" })] })] })] }));
+                            _jsxs("div", { className: "py-1 text-center", children: [_jsx("p", { className: "text-base font-medium", children: isMobilePlatform ? 'Approve connection in your wallet' : 'Approve connection in your wallet pop-up' }), _jsx("p", { className: "text-sm font-normal text-secondary-text", children: isMobilePlatform ? "Don't see the request? Check your wallet app." : "Don't see a pop-up? Check your browser windows." })] })] }), connectionError &&
+                _jsxs("div", { className: `bg-secondary-500 rounded-lg flex flex-col gap-1.5 items-center p-3 w-full absolute bottom-0`, children: [_jsxs("div", { className: "flex w-full gap-1 text-sm text-secondary-text justify-start", children: [_jsx(CircleX, { className: "w-5 h-5 stroke-primary-500 mr-1 mt-0.5 flex-shrink-0" }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base text-white', children: "Failed to connect" }), _jsx("p", { className: "text-sm font-normal", children: connectionError })] })] }), _jsxs("button", { type: "button", className: "flex gap-1.5 items-center justify-center bg-secondary-400 w-full text-primary-text p-4 border-none rounded-lg cursor-pointer text-sm font-medium leading-4", onClick: onRetry, children: [_jsx(RotateCw, { className: 'h-4 w-4' }), _jsx("span", { children: "Try again" })] })] })] }));
 };
 const ProviderPicker = ({ providers, selectedProviderName, setSelectedProviderName }) => {
     const values = providers.map(p => p.name);
@@ -129,19 +155,33 @@ const ProviderPicker = ({ providers, selectedProviderName, setSelectedProviderNa
         setSelectedProviderName(item);
     };
     const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onOpenChange: () => setOpen(!open), children: [_jsx(PopoverTrigger, { className: clsx('p-3 border border-secondary-500 rounded-lg bg-secondary-700 hover:brightness-125', {
+    return (_jsxs(Popover, { open: open, onOpenChange: () => setOpen(!open), children: [_jsx(PopoverTrigger, { className: clsx('p-3 border border-secondary-500 rounded-lg bg-secondary-600 hover:brightness-125', {
                     '!bg-secondary-500 brightness-125': !!selectedProviderName,
-                }), children: _jsx(SlidersHorizontal, { className: "h-4 w-4 text-secondary-text" }) }), _jsx(PopoverContent, { align: "end", className: "min-w-40 !text-primary-text p-2 space-y-1 !bg-secondary-600 !rounded-xl", children: values.sort().map((item, index) => (_jsxs("div", { onClick: () => onSelect(item), className: "px-3 py-1 text-left flex items-center w-full gap-3 hover:bg-secondary-800 rounded-lg transition-colors duration-200 text-secondary-text cursor-pointer", children: [_jsx(Checkbox, { id: item, checked: selectedProviderName === item }), item] }, index))) })] }));
+                }), children: _jsx(SlidersHorizontal, { className: "h-4 w-4 text-secondary-text" }) }), _jsx(PopoverContent, { align: "end", className: "min-w-40 !text-primary-text p-2 space-y-1 !bg-secondary-600 !rounded-xl", children: values.sort().map((item, index) => (_jsxs("div", { className: "px-3 py-1 text-left flex items-center w-full gap-3 hover:bg-secondary-800 rounded-lg transition-colors duration-200 text-secondary-text cursor-pointer", children: [_jsx(Checkbox, { id: item, checked: selectedProviderName === item, onClick: () => onSelect(item) }), _jsx("label", { htmlFor: item, className: "w-full cursor-pointer", children: item })] }, index))) })] }));
 };
-const MultichainConnectorModal = ({ selectedConnector, allConnectors, providers, setShowEcosystemSelection, showEcosystemSelection, connect }) => {
+const MultichainConnectorPicker = ({ selectedConnector, allConnectors, providers, connect }) => {
     const Icon = resolveWalletConnectorIcon({ connector: selectedConnector.name, iconUrl: selectedConnector.icon });
-    return (_jsx(VaulDrawer, { show: showEcosystemSelection, setShow: setShowEcosystemSelection, modalId: "selectEcosystem", header: _jsx("div", { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Icon, { className: "w-5 h-auto" }), _jsxs("p", { className: "text-xl font-semibold", children: [_jsx("span", { children: "Connect" }), " ", _jsx("span", { children: selectedConnector.name })] })] }) }), children: _jsxs(VaulDrawer.Snap, { id: "item-1", className: "flex flex-col items-center gap-4 pb-6", children: [_jsxs("p", { className: "text-base text-left text-secondary-text", children: [_jsx("span", { children: selectedConnector.name }), " ", _jsx("span", { children: "supports multiple network types. Please select the one you'd like to use." })] }), _jsx("div", { className: "flex flex-col gap-2 w-full", children: allConnectors.filter(c => c?.name === selectedConnector.name)?.map((connector, index) => {
-                        const provider = providers.find(p => p.name === connector?.providerName);
-                        return (_jsxs("button", { onClick: async () => {
-                                setShowEcosystemSelection(false);
-                                await connect(connector, provider);
-                            }, className: "w-full h-fit flex items-center gap-3 bg-secondary-700 hover:bg-secondary-500 transition-colors duration-200 rounded-xl p-3", children: [provider?.providerIcon &&
-                                    _jsx("img", { className: "w-8 h-8 rounded-md", width: 30, height: 30, src: provider.providerIcon, alt: provider.name }), _jsx("p", { children: connector?.providerName })] }, index));
-                    }) })] }) }));
+    return (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-col gap-4 py-15", children: [_jsx("div", { className: "flex justify-center gap-1", children: _jsx(Icon, { className: "w-14 h-auto" }) }), _jsxs("p", { className: "text-base text-center text-primary-text", children: [_jsx("span", { children: selectedConnector.name }), " ", _jsx("span", { children: "supports multiple network types. Please select the one you'd like to use." })] })] }), _jsx("div", { className: "flex flex-col gap-2 w-full", children: allConnectors.filter(c => c?.name === selectedConnector.name)?.map((connector, index) => {
+                    const provider = providers.find(p => p.name === connector?.providerName);
+                    return (_jsxs("button", { type: "button", onClick: async () => {
+                            await connect(connector, provider);
+                        }, className: "w-full h-fit flex items-center gap-3 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl p-3", children: [provider?.providerIcon &&
+                                _jsx(ImageWithFallback, { className: "w-8 h-8 rounded-md", width: 30, height: 30, src: provider.providerIcon, alt: provider.name }), _jsx("p", { children: connector?.providerName })] }, index));
+                }) })] }));
 };
+function sortRecentConnectors(a, b, recentConnectors) {
+    function getIndex(c) {
+        const idx = recentConnectors?.findIndex(v => v.connectorName === c.name);
+        return idx === -1 ? Infinity : idx;
+    }
+    const indexA = getIndex(a);
+    const indexB = getIndex(b);
+    if (indexA !== indexB) {
+        return indexA - indexB;
+    }
+    if (a.type && b.type) {
+        return a.type.localeCompare(b.type);
+    }
+    return 0;
+}
 export default ConnectorsLsit;

package/dist/components/Wallet/WalletModal/index.d.ts

@@ -8,15 +8,24 @@ export type WalletModalConnector = InternalConnector & {
         value: string;
     });
 };
+export type ModalWalletProvider = WalletProvider & {
+    isSelectedFromFilter?: boolean;
+};
 export declare function WalletModalProvider({ children }: {
     children: any;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const useConnectModal: () => {
     connect: (provider?: WalletProvider) => Promise<Wallet | undefined>;
     cancel: () => void;
-    selectedProvider: WalletProvider | undefined;
-    setSelectedProvider: (value: WalletProvider | undefined) => void;
+    selectedProvider: ModalWalletProvider | undefined;
+    setSelectedProvider: (value: ModalWalletProvider | undefined) => void;
     isWalletModalOpen?: boolean;
     selectedConnector: WalletModalConnector | undefined;
     setSelectedConnector: (value: WalletModalConnector | undefined) => void;
+    selectedMultiChainConnector: InternalConnector | undefined;
+    setSelectedMultiChainConnector: (value: InternalConnector | undefined) => void;
+    goBack: () => void;
+    onFinish: (connectedWallet?: Wallet | undefined) => void;
+    setOpen: (value: boolean) => void;
+    open: boolean;
 };

package/dist/components/Wallet/WalletModal/index.js

@@ -1,14 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { ChevronLeft } from 'lucide-react';
-import ConnectorsList from './ConnectorsList';
-import VaulDrawer from '../../Modal/vaulModal';
-import IconButton from '../../Buttons/iconButton';
 const ConnectModalContext = createContext(null);
 export function WalletModalProvider({ children }) {
     const [connectConfig, setConnectConfig] = useState(undefined);
     const [selectedProvider, setSelectedProvider] = useState(undefined);
     const [selectedConnector, setSelectedConnector] = useState(undefined);
+    const [selectedMultiChainConnector, setSelectedMultiChainConnector] = useState(undefined);
     const [open, setOpen] = useState(false);
     const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
     const connect = async ({ provider, connectCallback }) => {
@@ -37,18 +34,23 @@ export function WalletModalProvider({ children }) {
     const goBack = useCallback(() => {
         if (selectedConnector) {
             setSelectedConnector(undefined);
+            setSelectedMultiChainConnector(undefined);
             return;
         }
-    }, [setSelectedConnector, selectedConnector]);
+        else if (selectedMultiChainConnector) {
+            setSelectedMultiChainConnector(undefined);
+            return;
+        }
+    }, [setSelectedConnector, selectedMultiChainConnector, selectedConnector, selectedMultiChainConnector]);
     useEffect(() => {
-        if (!open && selectedConnector) {
+        if (!open && (selectedConnector || selectedMultiChainConnector)) {
             setSelectedConnector(undefined);
+            setSelectedMultiChainConnector(undefined);
             setSelectedProvider(undefined);
         }
         setIsWalletModalOpen(open);
     }, [open]);
-    return (_jsxs(ConnectModalContext.Provider, { value: { connect, cancel, selectedProvider, setSelectedProvider, selectedConnector, setSelectedConnector, isWalletModalOpen }, children: [children, _jsx(VaulDrawer, { show: open, setShow: setOpen, onClose: onFinish, modalId: "connectNewWallet", header: _jsxs("div", { className: "flex items-center gap-1", children: [selectedConnector &&
-                            _jsx("div", { className: '-ml-2', children: _jsx(IconButton, { onClick: goBack, icon: _jsx(ChevronLeft, { className: "h-6 w-6" }) }) }), _jsx("p", { children: "Connect wallet" })] }), children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsx(ConnectorsList, { onFinish: onFinish }) }) })] }));
+    return (_jsx(ConnectModalContext.Provider, { value: { connect, cancel, selectedProvider, setSelectedProvider, selectedConnector, setSelectedConnector, selectedMultiChainConnector, setSelectedMultiChainConnector, isWalletModalOpen, goBack, onFinish, setOpen, open }, children: children }));
 }
 export const useConnectModal = () => {
     const context = useContext(ConnectModalContext);

package/dist/components/Wallet/WalletProviders/ActiveEvmAccount.d.ts

@@ -0,0 +1,15 @@
+import { Context, FC } from 'react';
+type ActiveAccountState = {
+    activeConnection?: {
+        id: string | undefined;
+        address: string | undefined;
+    };
+    setActiveAddress: (address: string) => void;
+};
+export declare const ActiveEvmAccountContext: Context<ActiveAccountState | undefined>;
+type Props = {
+    children?: JSX.Element | JSX.Element[];
+};
+export declare const ActiveEvmAccountProvider: FC<Props>;
+export declare function useActiveEvmAccount(): ActiveAccountState;
+export {};

package/dist/components/Wallet/WalletProviders/ActiveEvmAccount.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { useAccount } from 'wagmi';
+export const ActiveEvmAccountContext = createContext(undefined);
+export const ActiveEvmAccountProvider = ({ children }) => {
+    const activeAccount = useAccount();
+    const [selectedAddress, setSelectedAddress] = useState();
+    const activeConnection = useMemo(() => {
+        const isSelectedAddressActive = activeAccount.addresses && activeAccount.addresses.some(addr => addr === selectedAddress);
+        return {
+            id: activeAccount.connector?.id,
+            address: isSelectedAddressActive ? selectedAddress : activeAccount.address
+        };
+    }, [activeAccount, selectedAddress]);
+    const setActiveAddress = useCallback((address) => {
+        setSelectedAddress(address);
+    }, []);
+    return (_jsx(ActiveEvmAccountContext.Provider, { value: { activeConnection, setActiveAddress }, children: children }));
+};
+export function useActiveEvmAccount() {
+    const data = useContext(ActiveEvmAccountContext);
+    if (data === null) {
+        throw new Error('useActiveEvmAccount must be used within a ActiveEvmAccountProvider');
+    }
+    return data;
+}

package/dist/components/Wallet/WalletProviders/ActiveParadexAccount.d.ts

@@ -0,0 +1,17 @@
+import { Context, FC } from 'react';
+type ActiveAccountState = {
+    activeConnection?: Account;
+    setActiveAddress: (account: Account) => void;
+};
+export declare const ActiveParadexAccountContext: Context<ActiveAccountState | undefined>;
+type Account = {
+    id: string;
+    address: string;
+    providerName: "Starknet" | "EVM";
+};
+type Props = {
+    children?: JSX.Element | JSX.Element[];
+};
+export declare const ActiveParadexAccountProvider: FC<Props>;
+export declare function useActiveParadexAccount(): ActiveAccountState;
+export {};