@layerswap/widget 1.1.0 → 1.1.2

package/dist/esm/components/Select/Selector/SelectItem.js

@@ -13,7 +13,7 @@ const Title = ({ children, className }) => {
     return _jsx("div", { className: `flex justify-between w-full text-base items-center pb-0.5 ${className}`, children: children });
 };
 const DetailedTitle = ({ children, className, title, secondary, secondaryImageAlt, secondaryLogoSrc, logoClassName }) => {
-    return _jsxs(Title, { className: clsx("w-full grid grid-cols-9", className), children: [_jsxs("div", { className: "col-span-5 sm:col-span-7 truncate flex flex-col gap-1 leading-5 align-middle font-medium", children: [_jsx("span", { className: "align-middle leading-5 text-base", children: title }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [secondaryLogoSrc && _jsx(ImageWithFallback, { src: secondaryLogoSrc, alt: secondaryImageAlt, height: "16", width: "16", loading: "eager", className: clsx("h-4 w-4 object-contain rounded", logoClassName) }), _jsx("span", { className: "text-secondary-text text-xs whitespace-nowrap", children: secondary })] })] }), _jsx("div", { className: 'col-span-4 sm:col-span-2 place-self-end self-center', children: children })] });
+    return _jsxs(Title, { className: clsx("w-full grid grid-cols-9", className), children: [_jsx("div", { className: "col-span-9 flex flex-col gap-1 leading-5 align-middle font-medium", children: _jsx("div", { className: "align-middle leading-5 text-base flex items-center justify-between w-full min-w-0", children: title }) }), _jsxs("div", { className: "col-span-5 sm:col-span-6 flex items-center gap-1 min-w-0 overflow-hidden pr-2", children: [secondaryLogoSrc && _jsx(ImageWithFallback, { src: secondaryLogoSrc, alt: secondaryImageAlt, height: "16", width: "16", loading: "eager", className: clsx("h-4 w-4 object-contain rounded shrink-0", logoClassName) }), _jsx("div", { className: "text-secondary-text text-xs min-w-0 whitespace-nowrap", children: secondary })] }), children && _jsx("div", { className: "col-span-4 sm:col-span-3 text-right truncate", children: children })] });
 };
 SelectItem.Logo = Logo;
 SelectItem.Title = Title;

package/dist/esm/components/Wallet/WalletComponents/ConnectedWallets.js

@@ -22,9 +22,9 @@ export const WalletsIcons = ({ wallets }) => {
     const firstWallet = uniqueWallets[0];
     const secondWallet = uniqueWallets[1];
     return (_jsxs("div", { className: "-space-x-2 flex", children: [firstWallet?.displayName &&
-                _jsx(firstWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), secondWallet?.displayName &&
-                _jsx(secondWallet.icon, { className: "rounded-full border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), uniqueWallets.length > 2 &&
-                _jsx("div", { className: "h-6 w-6 shrink-0 rounded-full justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs", children: _jsxs("span", { children: [_jsx("span", { children: "+" }), uniqueWallets.length - 2] }) })] }));
+                _jsx(firstWallet.icon, { className: "rounded-md border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), secondWallet?.displayName &&
+                _jsx(secondWallet.icon, { className: "rounded-md border-2 border-secondary-600 bg-secondary-700 shrink-0 h-6 w-6" }), uniqueWallets.length > 2 &&
+                _jsx("div", { className: "h-6 w-6 shrink-0 rounded-md justify-center p-1 bg-secondary-600 text-primary-text overlfow-hidden text-xs", children: _jsxs("span", { children: [_jsx("span", { children: "+" }), uniqueWallets.length - 2] }) })] }));
 };
 export const WalletsMenu = () => {
     const { wallets } = useWallet();
@@ -39,5 +39,5 @@ const WalletsMenuWalletsList = ({ wallets }) => {
     return _jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOpenModal(true), type: "button", className: "py-3 px-4 bg-secondary-500 flex items-center w-full rounded-xl space-x-1 disabled:text-secondary-text/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative font-semibold transform border border-secondary-500 hover:bg-secondary-400 transition duration-200 ease-in-out outline-hidden", children: wallets.length === 1 ?
                     _jsxs("div", { className: "flex gap-4 items-start text-primary-text", children: [_jsx(wallet.icon, { className: 'h-5 w-5' }), !wallet.isLoading && wallet.address && _jsx("p", { children: shortenAddress(wallet.address) })] })
                     :
-                        _jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center w-full", children: "Connected wallets" }), _jsx("div", { className: "place-items-end absolute left-2.5", children: _jsx(WalletsIcons, { wallets: wallets }) })] }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", className: "expandContainerHeight", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
+                        _jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center w-full", children: "Connected wallets" }), _jsx("div", { className: "place-items-end absolute left-2.5", children: _jsx(WalletsIcons, { wallets: wallets }) })] }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Connected wallets`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(WalletsList, { wallets: wallets }) }) })] });
 };

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

@@ -1,23 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useWallet from "../../../hooks/useWallet";
 import { useConnectModal } from ".";
-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 "../../../components/shadcn/popover";
-import LayerSwapLogoSmall from "../../../components/Icons/layerSwapLogoSmall";
-import { Checkbox } from "../../../components/shadcn/checkbox";
-import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
 import { SearchComponent } from "../../../components/Input/Search";
 import { isMobile } from "../../../lib/wallets/utils/isMobile";
 import AppSettings from "../../../lib/AppSettings";
+import { MultichainConnectorPicker } from "./MultichainConnectorPicker";
+import { ProviderPicker } from "./ProviderPicker";
+import { InstalledExtensionNotFound } from "./InstalledExtensionNotFound";
+import { WalletQrCode } from "./WalletQrCode";
+import { LoadingConnect } from "./LoadingConnect";
+import CircularLoader from "../../../components/Icons/CircularLoader";
+import { useConnectors } from "../../../hooks/useConnectors";
+const LAZY_LOAD_CONFIG = {
+    itemsPerLoad: 20,
+    enabled: true
+};
 const ConnectorsList = ({ onFinish }) => {
     const { providers } = useWallet();
     const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector, selectedMultiChainConnector, setSelectedMultiChainConnector } = useConnectModal();
@@ -26,7 +28,11 @@ const ConnectorsList = ({ onFinish }) => {
     const [searchValue, setSearchValue] = useState(undefined);
     const [isScrolling, setIsScrolling] = useState(false);
     const scrollTimeout = useRef(null);
+    const isMobilePlatfrom = isMobile();
     const { isMobile: isMobileSize } = useWindowDimensions();
+    const [displayedCount, setDisplayedCount] = useState(LAZY_LOAD_CONFIG.itemsPerLoad);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const loadMoreTriggerRef = useRef(null);
     const handleScroll = () => {
         setIsScrolling(true);
         if (scrollTimeout.current)
@@ -46,6 +52,8 @@ const ConnectorsList = ({ onFinish }) => {
                 return;
             }
             setSelectedConnector(connector);
+            if (connector?.hasBrowserExtension && !connector?.showQrCode && connector.type == 'walletConnect' && !isMobilePlatfrom)
+                return;
             if (connector.installUrl)
                 return;
             if (provider.ready === false) {
@@ -85,129 +93,70 @@ const ConnectorsList = ({ onFinish }) => {
             }
         }
     };
-    const handleSelectProvider = (providerName) => {
-        const provider = filteredProviders.find(p => p.name === providerName);
-        if (!provider)
-            return setSelectedProvider(undefined);
-        setSelectedProvider({ ...provider, isSelectedFromFilter: true });
+    const [selectedProviderNames, setSelectedProviderNames] = useState([]);
+    const isFiltered = selectedProviderNames.length > 0 || !!searchValue;
+    const handleSelectProvider = (providerNames) => {
+        setSelectedProviderNames(providerNames);
+        if (providerNames.length === 0) {
+            setSelectedProvider(undefined);
+        }
+        else {
+            const provider = filteredProviders.find(p => p.name === providerNames[0]);
+            if (provider) {
+                setSelectedProvider({ ...provider, isSelectedFromFilter: true });
+            }
+        }
     };
     const filteredProviders = providers.filter(p => !p.hideFromList);
-    const featuredProviders = selectedProvider ? [selectedProvider] : filteredProviders;
-    const allFeaturedConnectors = useMemo(() => featuredProviders.filter(g => g.availableWalletsForConnect && g.availableWalletsForConnect?.length > 0).map((provider) => provider.availableWalletsForConnect?.filter(v => searchValue ? (v.name.toLowerCase().includes(searchValue?.toLowerCase())) : 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 ? (v.name.toLowerCase().includes(searchValue?.toLowerCase())) : true) && !featuredWalletsIds.includes(v.id.toLowerCase()))
-        .map((connector) => ({ ...connector, providerName: provider.name, isHidden: true })))
-        .flat(), [featuredProviders, searchValue]);
-    const allConnectors = useMemo(() => removeDuplicatesWithKey([...allFeaturedConnectors, ...allHiddenConnectors].filter(c => searchValue?.length ? true : !c.isHidden).sort((a, b) => sortRecentConnectors(a, b, recentConnectors)), 'name'), [allFeaturedConnectors, allHiddenConnectors, searchValue?.length]);
-    if (selectedConnector?.qr?.state) {
-        const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector, 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-600 py-3 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,
-                                            height: 50,
-                                            width: 50,
-                                            excavate: true,
-                                        }
-                                        : 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-400 text-secondary-text w-full px-2 py-1.5 rounded-md mt-3 flex justify-center items-center', children: _jsx(CopyButton, { disabled: !selectedConnector?.qr.value, toCopy: selectedConnector?.qr.value || '', children: "Copy QR URL" }) })] }) })] });
+    const featuredProviders = selectedProviderNames.length > 0 ? filteredProviders.filter(p => selectedProviderNames.includes(p.name)) : (selectedProvider ? [selectedProvider] : filteredProviders);
+    const { featuredConnectors, hiddenConnectors, initialConnectors, } = useConnectors({
+        featuredProviders,
+        filteredProviders,
+        searchValue,
+        recentConnectors,
+    });
+    const displayedConnectors = useMemo(() => {
+        if (isFiltered)
+            return initialConnectors.slice(0, displayedCount);
+        return initialConnectors.slice(0, Math.max(0, displayedCount - featuredConnectors.length));
+    }, [isFiltered, initialConnectors, featuredConnectors, displayedCount]);
+    const hasMoreToLoad = displayedCount < initialConnectors.length;
+    useEffect(() => setDisplayedCount(isFiltered ? LAZY_LOAD_CONFIG.itemsPerLoad : featuredConnectors.length + LAZY_LOAD_CONFIG.itemsPerLoad), [isFiltered, searchValue, selectedProviderNames, featuredConnectors.length]);
+    const loadMore = useCallback(() => {
+        if (!hasMoreToLoad || isLoadingMore)
+            return;
+        setIsLoadingMore(true);
+        setTimeout(() => { setDisplayedCount(prev => prev + LAZY_LOAD_CONFIG.itemsPerLoad); setIsLoadingMore(false); }, 300);
+    }, [hasMoreToLoad, isLoadingMore]);
+    useEffect(() => {
+        if (!loadMoreTriggerRef.current)
+            return;
+        const observer = new IntersectionObserver((e) => e[0].isIntersecting && hasMoreToLoad && !isLoadingMore && loadMore(), { threshold: 0.1, rootMargin: '100px' });
+        observer.observe(loadMoreTriggerRef.current);
+        return () => observer.disconnect();
+    }, [hasMoreToLoad, isLoadingMore, loadMore, selectedConnector, selectedMultiChainConnector]);
+    if (selectedConnector?.hasBrowserExtension && !selectedConnector?.showQrCode && selectedConnector.type == 'walletConnect' && !isMobilePlatfrom) {
+        const provider = featuredProviders.find(p => p.name === selectedConnector?.providerName);
+        return _jsx(InstalledExtensionNotFound, { selectedConnector: selectedConnector, onConnect: (connector) => { connect(connector, provider); } });
+    }
+    if (selectedConnector?.qr?.state && (!selectedConnector?.hasBrowserExtension || selectedConnector?.showQrCode)) {
+        return _jsx(WalletQrCode, { selectedConnector: selectedConnector });
     }
     if (selectedConnector) {
-        const connector = allFeaturedConnectors.find(c => c?.name === selectedConnector.name);
-        const provider = featuredProviders.find(p => p.name === connector?.providerName);
-        return _jsx(LoadingConnect, { onRetry: () => { (connector && provider) && connect(connector, provider); }, selectedConnector: selectedConnector, connectionError: connectionError });
+        const provider = featuredProviders.find(p => p.name === selectedConnector?.providerName);
+        return _jsx(LoadingConnect, { onRetry: () => { (selectedConnector && provider) && connect(selectedConnector, provider); }, selectedConnector: selectedConnector, connectionError: connectionError });
     }
     if (selectedMultiChainConnector) {
-        return _jsx(MultichainConnectorPicker, { selectedConnector: selectedMultiChainConnector, allConnectors: [...allFeaturedConnectors, ...allHiddenConnectors], providers: featuredProviders, connect: connect });
+        return _jsx(MultichainConnectorPicker, { selectedConnector: selectedMultiChainConnector, allConnectors: [...featuredConnectors, ...hiddenConnectors], providers: featuredProviders, connect: connect });
     }
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "text-primary-text space-y-3 flex flex-col w-full styled-scroll relative h-full", 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 overflow-x-hidden scrollbar-thumb:bg-transparent', {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "text-primary-text space-y-3 flex flex-col w-full styled-scroll relative h-full", children: [_jsxs("div", { className: "flex items-center gap-3 pt-1", children: [_jsx(SearchComponent, { searchQuery: searchValue || "", setSearchQuery: setSearchValue, placeholder: hiddenConnectors.length > 300 ? "Search through 400+ wallets..." : "Search wallet", className: "w-full mb-0!" }), (!selectedProvider || selectedProvider?.isSelectedFromFilter) &&
+                            _jsx(ProviderPicker, { providers: filteredProviders, selectedProviderNames: selectedProviderNames, setSelectedProviderNames: handleSelectProvider })] }), _jsxs("div", { onScroll: handleScroll, className: clsx('overflow-y-scroll -mr-4 pr-2 scrollbar:!w-1.5 scrollbar:!h-1.5 overflow-x-hidden scrollbar-thumb:bg-transparent', {
                         'max-sm:h-[55svh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
                         '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, isProviderReady: typeof provider?.ready === 'boolean' ? provider.ready : true }, item.id));
-                        }) }) })] }) }));
-};
-const LoadingConnect = ({ onRetry, selectedConnector, connectionError }) => {
-    const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
-    const { isMobile: isMobileSize } = useWindowDimensions();
-    const isMobilePlatform = isMobile();
-    if (selectedConnector.installUrl) {
-        return _jsx("div", { className: clsx('w-full sm:h-full flex flex-col justify-center items-center font-semibold relative', {
-                'h-[60vh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
-                'h-[300px]': isMobileSize && !AppSettings.ThemeData?.enablePortal,
-            }), children: _jsx("div", { className: "flex grow items-center", 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]': isMobileSize && AppSettings.ThemeData?.enablePortal,
-            'h-full': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
-            'h-[300px]!': isMobileSize && !AppSettings.ThemeData?.enablePortal,
-        }), children: [selectedConnector &&
-                _jsx("div", { className: "flex grow items-center", children: _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: 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 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-primary-text', 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);
-    const onSelect = (item) => {
-        setOpen(false);
-        if (selectedProviderName === item)
-            return setSelectedProviderName(undefined);
-        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-400 rounded-lg bg-secondary-500 hover:brightness-125', {
-                    '!bg-secondary-400 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", { 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))) })] }));
+                    }), children: [_jsx("div", { className: 'grid grid-cols-2 gap-2', children: displayedConnectors.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, isProviderReady: typeof provider?.ready === 'boolean' ? provider.ready : true }, item.id));
+                            }) }), hasMoreToLoad && (_jsx("div", { ref: loadMoreTriggerRef, className: "col-span-2 flex justify-center items-center pt-2.5", children: _jsx(CircularLoader, { className: "w-8 h-8 animate-spin" }) }))] })] }) }));
 };
-const MultichainConnectorPicker = ({ selectedConnector, allConnectors, providers, connect }) => {
-    const Icon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
-    return (_jsxs("div", { className: "flex flex-col justify-between h-full min-h-80", children: [_jsx("div", { className: "flex grow py-4", children: _jsxs("div", { className: "flex flex-col gap-2 grow items-center justify-center", children: [_jsx("div", { className: "flex justify-center gap-1", children: _jsx(Icon, { className: "w-14 h-auto rounded-lg" }) }), _jsxs("p", { className: "text-base text-center text-primary-text px-4", 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: Array.from(allConnectors
-                    .filter(c => c?.name === selectedConnector.name)
-                    .reduce((map, connector) => {
-                    if (!connector?.providerName)
-                        return map;
-                    if (!map.has(connector.providerName)) {
-                        map.set(connector.providerName, connector);
-                    }
-                    return map;
-                }, new Map())
-                    .values()).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));
-                }) })] }));
-};
-const featuredWalletsIds = [
-    'metamask',
-    'argent',
-    'rainbow',
-    'bitkeep',
-    'okx-wallet',
-];
-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 ConnectorsList;

package/dist/esm/components/Wallet/WalletModal/InstalledExtensionNotFound.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScanLine } from "lucide-react";
+import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
+import SubmitButton from "../../../components/Buttons/submitButton";
+import { AppSettings } from "../../../exports/internal";
+import clsx from "clsx";
+import useWindowDimensions from "../../../hooks/useWindowDimensions";
+export const InstalledExtensionNotFound = ({ selectedConnector, onConnect }) => {
+    const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
+    const { isMobile: isMobileSize } = useWindowDimensions();
+    return _jsxs("div", { className: clsx('w-full flex flex-col justify-center items-center font-semibold relative', {
+            'h-[60vh]': isMobileSize && AppSettings.ThemeData?.enablePortal,
+            'h-full': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
+            'h-[300px]!': isMobileSize && !AppSettings.ThemeData?.enablePortal,
+        }), children: [_jsx("div", { className: "flex grow items-center justify-center", 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("div", { className: "py-1 text-center text-base font-medium", children: [_jsx("p", { children: "Wallet not found on your browser," }), _jsx("p", { children: "make sure you have the wallet installed" })] })] }) }), _jsx(SubmitButton, { onClick: () => { onConnect({ ...selectedConnector, showQrCode: true }); }, buttonStyle: "secondary", className: "w-full", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(ScanLine, { className: "w-5 h-5" }), _jsx("span", { children: "Connect with your phone" })] }) })] });
+};

package/dist/esm/components/Wallet/WalletModal/LoadingConnect.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleX, Link2Off, RotateCw } from "lucide-react";
+import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
+import clsx from "clsx";
+import useWindowDimensions from "../../../hooks/useWindowDimensions";
+import LayerSwapLogoSmall from "../../../components/Icons/layerSwapLogoSmall";
+import { isMobile } from "../../../lib/wallets/utils/isMobile";
+import AppSettings from "../../../lib/AppSettings";
+export const LoadingConnect = ({ onRetry, selectedConnector, connectionError }) => {
+    const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
+    const { isMobile: isMobileSize } = useWindowDimensions();
+    const isMobilePlatform = isMobile();
+    if (selectedConnector.installUrl) {
+        return _jsx("div", { className: 'w-full h-[60vh] sm:h-full flex flex-col justify-center items-center font-semibold relative', children: _jsx("div", { className: "flex grow items-center", 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]': isMobileSize && AppSettings.ThemeData?.enablePortal,
+            'h-full': !isMobileSize || !AppSettings.ThemeData?.enablePortal,
+            'h-[300px]!': isMobileSize && !AppSettings.ThemeData?.enablePortal,
+        }), children: [selectedConnector &&
+                _jsx("div", { className: "flex grow items-center", children: _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: 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 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 shrink-0" }), _jsxs("div", { className: 'flex flex-col gap-1', children: [_jsx("p", { className: 'text-base text-primary-text', 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" })] })] })] }));
+};

package/dist/esm/components/Wallet/WalletModal/MultichainConnectorPicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+export const MultichainConnectorPicker = ({ selectedConnector, allConnectors, providers, connect }) => {
+    const Icon = resolveWalletConnectorIcon({ connector: selectedConnector, iconUrl: selectedConnector.icon });
+    return (_jsxs("div", { className: "flex flex-col justify-between h-full min-h-80", children: [_jsx("div", { className: "flex grow py-4", children: _jsxs("div", { className: "flex flex-col gap-2 grow items-center justify-center", children: [_jsx("div", { className: "flex justify-center gap-1", children: _jsx(Icon, { className: "w-14 h-auto rounded-lg" }) }), _jsxs("p", { className: "text-base text-center text-primary-text px-4", 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: Array.from(allConnectors
+                    .filter(c => c?.name === selectedConnector.name)
+                    .reduce((map, connector) => {
+                    if (!connector?.providerName)
+                        return map;
+                    if (!map.has(connector.providerName)) {
+                        map.set(connector.providerName, connector);
+                    }
+                    return map;
+                }, new Map())
+                    .values()).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));
+                }) })] }));
+};

package/dist/esm/components/Wallet/WalletModal/ProviderPicker.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import clsx from "clsx";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/shadcn/popover";
+import { Checkbox } from "../../../components/shadcn/checkbox";
+import MenuIcon from "../../../components/Icons/MenuIcon";
+export const ProviderPicker = ({ providers, selectedProviderNames, setSelectedProviderNames }) => {
+    const values = useMemo(() => providers.map(p => p.name).sort(), [providers]);
+    const [open, setOpen] = useState(false);
+    const onSelect = (item) => {
+        if (selectedProviderNames.includes(item)) {
+            const next = selectedProviderNames.filter(p => p !== item);
+            setSelectedProviderNames(next);
+        }
+        else {
+            setSelectedProviderNames([...selectedProviderNames, item]);
+        }
+    };
+    const handleClear = () => {
+        setSelectedProviderNames([]);
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: () => setOpen(!open), children: [_jsxs(PopoverTrigger, { className: clsx('p-2 border border-secondary-500 rounded-lg bg-secondary-600 hover:brightness-125  relative overflow-visible z-50', {
+                    'bg-secondary-300! brightness-125': selectedProviderNames.length > 0,
+                }), children: [_jsx(MenuIcon, { className: "h-6 w-6 text-secondary-text" }), selectedProviderNames.length > 0 && (_jsx("div", { className: "absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-secondary-300 border border-secondary-700 flex items-center justify-center text-[10px] font-medium text-primary-text z-50", children: selectedProviderNames.length }))] }), _jsxs(PopoverContent, { align: "end", className: "w-[130px]! text-primary-text! p-2 space-y-1 bg-secondary-500! rounded-xl!", style: { width: '130px', minWidth: '130px', maxWidth: '130px' }, children: [values.map((item, index) => (_jsxs("div", { onClick: () => onSelect(item), className: "px-2 py-1 text-left flex items-center w-full gap-2.5 hover:bg-secondary-400 rounded-lg transition-colors duration-200 text-secondary-text cursor-pointer", children: [_jsx(Checkbox, { id: item, checked: selectedProviderNames.includes(item), onClick: (e) => e.stopPropagation(), onCheckedChange: () => onSelect(item) }), _jsx("label", { htmlFor: item, className: "w-full cursor-pointer text-sm leading-[17px]", onClick: (e) => e.preventDefault(), children: item })] }, index))), selectedProviderNames.length > 0 && (_jsx("button", { onClick: handleClear, className: "w-full px-3 py-1 mt-1 text-sm font-medium text-secondary-text hover:text-primary-text bg-secondary-300 hover:bg-secondary-200 rounded-lg transition-colors duration-200", children: "Clear" }))] })] }));
+};

package/dist/esm/components/Wallet/WalletModal/WalletQrCode.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
+import { QRCodeSVG } from "qrcode.react";
+import CopyButton from "../../../components/Buttons/copyButton";
+export const WalletQrCode = ({ selectedConnector }) => {
+    const ConnectorIcon = resolveWalletConnectorIcon({ connector: selectedConnector, 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-600 py-3 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,
+                                        height: 50,
+                                        width: 50,
+                                        excavate: true,
+                                    }
+                                    : 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-400 text-secondary-text w-full px-2 py-1.5 rounded-md mt-3 flex justify-center items-center', children: _jsx(CopyButton, { disabled: !selectedConnector?.qr?.value, toCopy: selectedConnector?.qr?.value || '', children: "Copy QR URL" }) })] }) })] });
+};

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

@@ -57,7 +57,7 @@ export function WalletModalProvider({ children }) {
 }
 export const useConnectModal = () => {
     const context = useContext(ConnectModalContext);
-    if (context === undefined) {
+    if (!context) {
         throw new Error('useConnectModal must be used within a ConnectModalProvider');
     }
     const connect = (provider) => new Promise((res) => {

package/dist/esm/components/Wallet/WalletProviders/index.js

@@ -38,7 +38,7 @@ const DynamicProviderWrapper = ({ providers, children, themeData, appName }) =>
  */
 const WalletsProviders = ({ children, themeData, appName, walletProviders }) => {
     const providersWithWalletConnectionProvider = useMemo(() => walletProviders.filter(provider => typeof provider === 'object' && 'walletConnectionProvider' in provider), [walletProviders]);
-    return (_jsx(WalletProvidersListContext.Provider, { value: walletProviders, children: _jsx(DynamicProviderWrapper, { providers: walletProviders, themeData: themeData, appName: appName, children: _jsx(WalletModalProvider, { children: _jsx(WalletProvidersProvider, { walletProviders: providersWithWalletConnectionProvider, children: children }) }) }) }));
+    return (_jsx(WalletProvidersListContext.Provider, { value: walletProviders, children: _jsx(WalletModalProvider, { children: _jsx(DynamicProviderWrapper, { providers: walletProviders, themeData: themeData, appName: appName, children: _jsx(WalletProvidersProvider, { walletProviders: providersWithWalletConnectionProvider, children: children }) }) }) }));
 };
 export default WalletsProviders;
 export const WalletProvidersListContext = createContext([]);

package/dist/esm/components/Widget/Footer.js

@@ -24,31 +24,31 @@ const variants = {
         });
     },
 };
-const Comp = ({ children, hidden, sticky = true }) => {
+const Comp = ({ children, hidden, sticky = true, showPoweredBy }) => {
     let [footerRef, { height }] = useMeasure();
-    return (sticky ?
-        _jsxs(_Fragment, { children: [_jsx(motion.div, { ref: footerRef, transition: {
-                        duration: 0.15,
-                    }, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base
-                        max-sm:fixed
-                        max-sm:inset-x-0
-                        max-sm:bottom-0 
-                        max-sm:z-30
-                        max-sm:bg-secondary-700 
-                        max-sm:shadow-widget-footer 
-                        max-sm:p-4 
-                        max-sm:px-4 
-                        max-sm:w-full ${hidden ? 'animation-slide-out' : ''} w-full`, children: children }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base      
-                             max-sm:inset-x-0
-                             max-sm:bottom-0 
-                             max-sm:p-4 max-sm:w-full invisible sm:hidden w-full` })] })
-        :
-            children);
+    return (_jsx(_Fragment, { children: sticky ?
+            _jsxs(_Fragment, { children: [_jsx(motion.div, { ref: footerRef, transition: {
+                            duration: 0.15,
+                        }, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base
+            max-sm:fixed
+            max-sm:inset-x-0
+            max-sm:bottom-0 
+            max-sm:z-30
+            max-sm:bg-secondary-700 
+            max-sm:shadow-widget-footer 
+            max-sm:p-4 
+            max-sm:px-4 
+            max-sm:w-full ${hidden ? 'animation-slide-out' : ''} w-full`, children: children }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base      
+                 max-sm:inset-x-0
+                 max-sm:bottom-0 
+                 max-sm:p-4 max-sm:w-full invisible sm:hidden w-full` })] })
+            :
+                _jsx("div", { className: clsx('space-y-3', { 'mb-3 sm:mb-0': !showPoweredBy }), children: children }) }));
 };
 const Footer = ({ children, hidden, sticky, showPoweredBy }) => {
     const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
     const isPoweredByVisible = !AppSettings.ThemeData?.hidePoweredBy && showPoweredBy;
-    return (_jsxs(Comp, { hidden: hidden, sticky: isFooterSticky ? sticky : false, children: [children, isPoweredByVisible &&
+    return (_jsxs(Comp, { hidden: hidden, sticky: isFooterSticky ? sticky : false, showPoweredBy: isPoweredByVisible, children: [children, isPoweredByVisible &&
                 _jsx("div", { className: clsx("flex justify-center text-secondary-text", {
                         'mt-3 sm:!mb-0': isFooterSticky,
                         'mb-3 sm:!mb-0': !isFooterSticky,

package/dist/esm/components/Widget/Index.js

@@ -11,7 +11,7 @@ const Widget = ({ children, hideMenu, goBack, contextualMenu }) => {
     return _jsxs("div", { className: "relative p-px h-full", children: [AppSettings.ThemeData?.enableWideVersion &&
                 _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-linear-to-t from-secondary-800 to-secondary-300 pointer-events-none" }), _jsxs("div", { id: "widget", style: AppSettings.ThemeData?.cardBackgroundStyle, className: clsx("sm:pb-4 rounded-3xl w-full overflow-hidden relative bg-secondary-700 h-full flex flex-col has-expandContainerHeight:min-h-[650px]", {
                     "max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh]": AppSettings.ThemeData?.enableWideVersion,
-                    "has-openpicker:min-h-[650px]": !AppSettings.ThemeData?.enableWideVersion
+                    "has-openpicker:min-h-[675px]": !AppSettings.ThemeData?.enableWideVersion
                 }), children: [AppSettings.ApiVersion === 'testnet' &&
                         _jsx("div", { className: "relative z-20", children: _jsx("div", { className: "absolute -top-1 right-[calc(50%-68px)] bg-warning-foreground py-0.5 px-10 rounded-b-md text-xs scale-75", children: "TESTNET" }) }), !hideMenu &&
                         _jsx(HeaderWithMenu, { goBack: goBack, contextualMenu: contextualMenu }), _jsx("div", { className: "relative flex-col px-4 h-full min-h-0 flex flex-1", children: _jsx("div", { className: "flex flex-col flex-1 items-start h-full min-h-0 w-full gap-3", ref: wrapper, children: children }) }), _jsx("div", { id: "widget_root" })] })] });

package/dist/esm/components/WidgetLoading.js

@@ -8,7 +8,7 @@ import clsx from "clsx";
 export const WidgetLoading = () => {
     const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
     return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: AppSettings.ThemeData }), _jsxs("div", { className: "relative w-fit h-fit max-w-lg mx-auto", children: [AppSettings.ThemeData?.enableWideVersion &&
-                        _jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-24 -translate-x-[100%] z-20 w-12 h-22 rounded-l-xl", children: _jsx("div", { className: "flex flex-col bg-secondary-400 h-full p-1.5 sm:p-2 w-full space-y-2 animate-pulse rounded-l-xl" }) }), _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] sm:pb-4 bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" })] }), _jsx("div", { className: "layerswap-styles w-full sm:pb-4 z-[1] mx-auto rounded-3xl md:shadow-lg  relative bg-gradient-to-b from-secondary-700 to-secondary-700 ", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-wit", children: _jsx("div", { className: "w-full overflow-visible relative text-left", children: _jsx("div", { className: "relative", children: _jsx("div", { className: "flex items-start", children: _jsx("div", { className: "flex flex-nowrap grow w-full", children: _jsx("div", { className: "w-fit flex flex-col justify-between text-secondary-500 h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "w-full grid grid-cols-5 px-4 pb-2 mt-2", children: [!AppSettings.ThemeData?.header?.hideTabs && _jsxs("div", { className: "col-start-1 justify-self-start self-center flex items-center w-[76px] h-[40px] bg-secondary-500 rounded-lg p-1.5", children: [_jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md mr-2" }), _jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md" })] }), _jsxs("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-2 sm:gap-x-1 sm:mr-2", children: [!AppSettings.ThemeData?.header?.hideWallets && _jsx("div", { className: "p-1.5 max-sm:p-2 ", children: _jsx(WalletIcon, { className: "w-6 h-6", strokeWidth: "2" }) }), !AppSettings.ThemeData?.header?.hideMenu && _jsx("div", { className: "p-1.5 max-sm:p-2 sm:-mr-2 -mr-0", children: _jsx(MenuIcon, { className: "w-6 h-6", strokeWidth: "2" }) })] })] }), _jsxs("div", { className: "px-4 h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsxs("div", { className: "flex-col relative flex justify-between gap-2 w-full leading-4", children: [_jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded-lg w-7 h-7 bg-secondary-400 animate-pulse" }), _jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] })] }), _jsx("div", { className: "", children: _jsx("div", { className: "w-full h-12 bg-primary animate-pulse rounded-xl py-3 px-2 md:px-3" }) }), !AppSettings.ThemeData?.hidePoweredBy &&
+                        _jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-24 -translate-x-[100%] z-20 w-12 h-22 rounded-l-xl", children: _jsx("div", { className: "flex flex-col bg-secondary-400 h-full p-1.5 sm:p-2 w-full space-y-2 animate-pulse rounded-l-xl" }) }), _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] sm:pb-4 bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" })] }), _jsx("div", { className: "layerswap-styles w-full sm:pb-4 z-[1] mx-auto rounded-3xl md:shadow-lg relative bg-gradient-to-b from-secondary-700 to-secondary-700 ", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-wit", children: _jsx("div", { className: "w-full overflow-visible relative text-left", children: _jsx("div", { className: "relative", children: _jsx("div", { className: "flex items-start", children: _jsx("div", { className: "flex flex-nowrap grow w-full", children: _jsx("div", { className: "w-fit flex flex-col justify-between text-secondary-500 h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "w-full grid grid-cols-5 px-4 pb-2 mt-2", children: [!AppSettings.ThemeData?.header?.hideTabs && _jsxs("div", { className: "col-start-1 justify-self-start self-center flex items-center w-[76px] h-[40px] bg-secondary-500 rounded-lg p-1.5", children: [_jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md mr-2" }), _jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md" })] }), _jsxs("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-2 sm:gap-x-1 sm:mr-2", children: [!AppSettings.ThemeData?.header?.hideWallets && _jsx("div", { className: "p-1.5 max-sm:p-2 ", children: _jsx(WalletIcon, { className: "w-6 h-6", strokeWidth: "2" }) }), !AppSettings.ThemeData?.header?.hideMenu && _jsx("div", { className: "p-1.5 max-sm:p-2 sm:-mr-2 -mr-0", children: _jsx(MenuIcon, { className: "w-6 h-6", strokeWidth: "2" }) })] })] }), _jsxs("div", { className: "px-4 h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsxs("div", { className: "flex-col relative flex justify-between gap-2 w-full leading-4", children: [_jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] max-sm:w-full h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded-lg w-7 h-7 bg-secondary-400 animate-pulse" }), _jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] max-sm:w-full h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] })] }), _jsx("div", { className: "", children: _jsx("div", { className: "w-full h-12 bg-primary animate-pulse rounded-xl py-3 px-2 md:px-3" }) }), !AppSettings.ThemeData?.hidePoweredBy &&
                                                                         _jsx("div", { className: clsx("flex justify-center text-secondary-text", {
                                                                                 'mt-3 sm:!mb-0': isFooterSticky,
                                                                                 'mb-3 sm:!mb-0': !isFooterSticky,

package/dist/esm/components/shadcn/checkbox.js

@@ -4,6 +4,6 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import { classNames } from "../utils/classNames";
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: classNames("peer h-4 w-4 shrink-0 rounded border border-secondary-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary-text data-[state=checked]:text-secondary-800", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: classNames("flex items-center justify-center text-current"), children: _jsx(Check, { className: "h-4 w-4" }) }) })));
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: classNames("peer h-3 w-3 shrink-0 rounded border border-secondary-text data-[state=checked]:border-primary-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-text data-[state=checked]:text-secondary-800", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: classNames("flex items-center justify-center text-current"), children: _jsx(Check, { className: "h-3 w-3" }) }) })));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/esm/components/themeWrapper.js

@@ -13,5 +13,5 @@ export default function ThemeWrapper({ children }) {
                             error: {
                                 duration: Infinity,
                             },
-                        }, children: (t) => (_jsx(ToastBar, { toast: t, children: ({ icon, message }) => (_jsxs(_Fragment, { children: [icon, message, t.type !== 'loading' && (_jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), children: _jsx(X, { className: "h-5" }) }))] })) })) }), _jsx("div", { className: "w-full h-full max-w-[472px] z-auto", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col container", children: _jsx("div", { className: "h-full w-full text-primary-text", children: children }) }) }), _jsx("div", { id: "offset-for-stickyness", className: "block md:hidden" })] }) }) });
+                        }, children: (t) => (_jsx(ToastBar, { toast: t, children: ({ icon, message }) => (_jsxs(_Fragment, { children: [icon, message, t.type !== 'loading' && (_jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), children: _jsx(X, { className: "h-5" }) }))] })) })) }), _jsx("div", { className: "w-full h-full sm:max-w-[472px] z-auto", children: _jsx("div", { className: "flex h-full w-full content-center items-center justify-center flex-col", children: _jsx("div", { className: "h-full w-full text-primary-text", children: children }) }) }), _jsx("div", { id: "offset-for-stickyness", className: "block md:hidden" })] }) }) });
 }

package/dist/esm/context/callbackProvider.js

@@ -47,6 +47,12 @@ export function CallbackProvider({ children, callbacks }) {
             catch (error) {
                 ErrorHandler(error);
             } },
+            onMenuNavigationChange: (path) => { try {
+                callbacks?.onMenuNavigationChange?.(path);
+            }
+            catch (error) {
+                ErrorHandler(error);
+            } },
         };
     }, [callbacks]);
     return (_jsx(CallbackContext.Provider, { value: value, children: children }));

package/dist/esm/context/resolverContext.js

@@ -8,6 +8,10 @@ export const ResolverProviders = ({ children, walletProviders }) => {
         .flat()
         .filter((provider) => Boolean(provider))
         .map(provider => provider());
+    const contractAddressProviders = walletProviders
+        .map(provider => provider.contractAddressProvider)
+        .flat()
+        .filter((provider) => Boolean(provider));
     const isInitialized = useMemo(() => {
         // Extract balance providers from wallet providers
         const balanceProviders = walletProviders
@@ -28,7 +32,7 @@ export const ResolverProviders = ({ children, walletProviders }) => {
             .map(provider => provider.nftProvider)
             .flat()
             .filter((provider) => Boolean(provider));
-        resolverService.setProviders(balanceProviders, gasProviders, addressUtilsProviders, nftProviders, transferProviders);
+        resolverService.setProviders(balanceProviders, gasProviders, addressUtilsProviders, nftProviders, transferProviders, contractAddressProviders);
         return true;
     }, [walletProviders, transferProviders]);
     return (_jsx(ResolverContext.Provider, { value: { isInitialized }, children: children }));