@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 FilledCheck from "../../../components/Icons/FilledCheck";
+import { truncateDecimals } from "../../../components/utils/RoundDecimals";
+import { useSettingsState } from "../../../context/settings";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useBalance } from "../../../lib/balances/useBalance";
+const WalletsList = (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({
+                providerName: result.providerName,
+                walletId: result.id,
+                address: result.address
+            });
+        }
+    };
+    const selectedSourceAccount = useSelectedAccount("from", selectedDepositMethod == 'wallet' ? network?.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, account: wallet, network, onWalletSelect, token, selectedAddress, isCompatible = true, ...props }) => {
+    const { networks } = useSettingsState();
+    const balanceNetwork = token ? networks.find(n => n.name === network?.name && n.tokens.some(t => t.symbol === token.symbol)) : undefined;
+    const { balances, isLoading: isBalanceLoading } = useBalance(isCompatible ? wallet.address : undefined, isCompatible ? balanceNetwork : undefined);
+    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-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,
+                                            }) }), 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: [!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-xs animate-pulse' })
+                                                                :
+                                                                    _jsxs(_Fragment, { children: [_jsx("span", { children: walletBalanceAmount }), " ", _jsx("span", { children: token?.symbol })] }) })
+                                                        :
+                                                            _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-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, isCompatible: isCompatible }, index)) })] }));
+};
+const NestedWalletAddress = ({ selectable, address, network, onWalletSelect, token, wallet, selectedAddress, isCompatible, ...props }) => {
+    const { networks } = useSettingsState();
+    const balanceNetwork = token ? networks.find(n => n.name === network?.name && n.tokens.some(t => t.symbol === token.symbol)) : undefined;
+    const { balances, isLoading: isBalanceLoading } = useBalance(isCompatible ? address : undefined, isCompatible ? balanceNetwork : undefined);
+    const isNestedSelected = selectable && address == selectedAddress;
+    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({
+            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/esm/components/Wallet/WalletModal/Connector.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Loader } from "lucide-react";
+import { resolveWalletConnectorIcon } from "../../../lib/wallets/utils/resolveWalletIcon";
+const Connector = ({ connector, connectingConnector, onClick, isRecent, ...props }) => {
+    const connectorName = connector?.name;
+    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-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-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/esm/components/Wallet/WalletModal/ConnectorsList.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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";
+const ConnectorsList = ({ onFinish }) => {
+    const { providers } = useWallet();
+    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 { isMobile: isMobileSize } = useWindowDimensions();
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeout = useRef(null);
+    const handleScroll = () => {
+        setIsScrolling(true);
+        if (scrollTimeout.current)
+            clearTimeout(scrollTimeout.current);
+        scrollTimeout.current = setTimeout(() => {
+            setIsScrolling(false);
+        }, 1000);
+    };
+    useEffect(() => {
+        return () => clearTimeout(scrollTimeout.current);
+    }, []);
+    const connect = async (connector, provider) => {
+        try {
+            setConnectionError(undefined);
+            if (connector?.isMultiChain) {
+                setSelectedMultiChainConnector(connector);
+                return;
+            }
+            setSelectedConnector(connector);
+            if (connector.installUrl)
+                return;
+            const result = provider?.connectWallet && await provider.connectWallet({ connector });
+            if (result && connector && provider) {
+                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);
+        }
+        catch (e) {
+            console.log(e);
+            if (e?.message?.toLowerCase().includes('rejected') || e?.details?.toLowerCase().includes('rejected')) {
+                setConnectionError("You've declined the wallet connection request");
+            }
+            else {
+                setConnectionError(e.message || e.details || 'Something went wrong');
+            }
+        }
+    };
+    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 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-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,
+                                            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, { toCopy: selectedConnector?.qr.value || '', children: "Copy QR URL" }) })] }) })] });
+    }
+    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 });
+    }
+    if (selectedMultiChainConnector) {
+        return _jsx(MultichainConnectorPicker, { selectedConnector: selectedMultiChainConnector, allConnectors: allFeaturedConnectors, providers: featuredProviders, 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 }) => {
+    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]': 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]': 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: 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);
+    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-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", { 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 MultichainConnectorPicker = ({ selectedConnector, allConnectors, providers, connect }) => {
+    const Icon = resolveWalletConnectorIcon({ connector: selectedConnector.id, iconUrl: selectedConnector.icon });
+    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 rounded-lg" }) }), _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 ConnectorsList;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+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 }) => {
+        if (!provider?.availableWalletsForConnect) {
+            await provider?.connectWallet();
+        }
+        setSelectedProvider(provider);
+        setOpen(true);
+        setConnectConfig({ provider, connectCallback });
+        return;
+    };
+    const cancel = () => {
+        if (connectConfig) {
+            connectConfig.connectCallback(undefined);
+            setConnectConfig(undefined);
+        }
+        setOpen(false);
+    };
+    const onFinish = (connectedWallet) => {
+        if (connectConfig) {
+            connectConfig.connectCallback(connectedWallet);
+            setConnectConfig(undefined);
+        }
+        setOpen(false);
+    };
+    const goBack = useCallback(() => {
+        if (selectedConnector) {
+            setSelectedConnector(undefined);
+            setSelectedMultiChainConnector(undefined);
+            return;
+        }
+        else if (selectedMultiChainConnector) {
+            setSelectedMultiChainConnector(undefined);
+            return;
+        }
+    }, [setSelectedConnector, selectedMultiChainConnector, selectedConnector, selectedMultiChainConnector]);
+    useEffect(() => {
+        if (!open && (selectedConnector || selectedMultiChainConnector)) {
+            setSelectedConnector(undefined);
+            setSelectedMultiChainConnector(undefined);
+            setSelectedProvider(undefined);
+        }
+        setIsWalletModalOpen(open);
+    }, [open]);
+    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);
+    if (context === undefined) {
+        throw new Error('useConnectModal must be used within a ConnectModalProvider');
+    }
+    const connect = (provider) => new Promise((res) => {
+        context.connect({ provider, connectCallback: res });
+    });
+    return { ...context, connect };
+};

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

@@ -0,0 +1,58 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { WalletProvidersProvider } from "../../../context/walletProviders";
+import { WalletModalProvider } from "../WalletModal";
+import AppSettings from "../../../lib/AppSettings";
+// Dynamic wrapper component that renders provider wrappers
+const DynamicProviderWrapper = ({ providers, children, basePath, themeData, appName }) => {
+    // Create a nested structure of providers
+    const createNestedProviders = (providers, currentChildren) => {
+        if (providers.length === 0)
+            return currentChildren;
+        const [currentProvider, ...remainingProviders] = providers;
+        if (!currentProvider.wrapper) {
+            return createNestedProviders(remainingProviders, currentChildren);
+        }
+        // Handle special cases for providers that need specific props
+        let wrapperProps = { children: createNestedProviders(remainingProviders, currentChildren) };
+        if (currentProvider.id === 'ton') {
+            wrapperProps = { ...wrapperProps, basePath, themeData, appName };
+        }
+        else if (currentProvider.id === 'imtbl') {
+            wrapperProps = {
+                ...wrapperProps,
+                client_id: AppSettings.ImtblPassportConfig?.clientId,
+                publishable_key: AppSettings.ImtblPassportConfig?.publishableKey,
+                redirect_uri: AppSettings.ImtblPassportConfig?.redirectUri,
+                base_path: AppSettings.ImtblPassportConfig?.appBasePath
+            };
+        }
+        return createElement(currentProvider.wrapper, wrapperProps);
+    };
+    return _jsx(_Fragment, { children: createNestedProviders(providers, children) });
+};
+/**
+ * WalletsProviders - Dynamically renders wallet provider wrappers
+ *
+ * This component can now accept custom walletProviders that define which wrappers to use.
+ * Each provider in the array should have:
+ * - id: unique identifier
+ * - wrapper: React component to wrap children with
+ * - walletConnectionProvider, gasProvider, balanceProvider: optional provider implementations
+ *
+ * Example usage:
+ * const customProviders = [
+ *   { id: 'ton', wrapper: TonConnectProvider },
+ *   { id: 'evm', wrapper: EVMProvider },
+ *   { id: 'custom', wrapper: MyCustomProvider }
+ * ];
+ *
+ * <WalletsProviders walletProviders={customProviders} ...>
+ *   {children}
+ * </WalletsProviders>
+ */
+const WalletsProviders = ({ children, basePath, themeData, appName, walletProviders }) => {
+    return (_jsx(DynamicProviderWrapper, { providers: walletProviders, basePath: basePath, themeData: themeData, appName: appName, children: _jsx(WalletModalProvider, { children: _jsx(WalletProvidersProvider, { walletProviders: walletProviders, children: children }) }) }));
+};
+export default WalletsProviders;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Content = ({ children, center }) => {
+    return center ?
+        _jsx("div", { className: 'flex flex-col self-center grow w-full h-full min-h-0', children: _jsx("div", { className: 'flex self-center grow w-full h-full min-h-0', children: _jsx("div", { className: 'flex flex-col self-center w-full grow h-full min-h-0', children: children }) }) })
+        : children;
+};
+export default Content;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useMeasure } from "@uidotdev/usehooks";
+import AppSettings from "../../lib/AppSettings";
+import LogoWithDetails from "../Common/LogoWithDetails";
+import LayerSwapApiClient from "../../lib/apiClients/layerSwapApiClient";
+const variants = {
+    enter: () => {
+        return ({
+            opacity: 0,
+            y: '100%',
+        });
+    },
+    center: () => {
+        return ({
+            opacity: 1,
+            y: 0,
+        });
+    },
+    exit: () => {
+        return ({
+            y: '100%',
+            zIndex: 0,
+            opacity: 0,
+        });
+    },
+};
+const Comp = ({ children, hidden, sticky = true }) => {
+    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);
+};
+const Footer = ({ children, hidden, sticky }) => {
+    const isFooterVisible = LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['mainnet'] &&
+        LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['testnet'];
+    const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
+    return (_jsxs(Comp, { hidden: hidden, sticky: isFooterSticky ? sticky : false, children: [children, isFooterVisible &&
+                _jsxs("a", { target: "_blank", href: 'https://layerswap.io/', className: "flex justify-center text-primary-text-placeholder mt-3 -mb-1.5 sm:-mb-3", children: [_jsx("span", { className: "text-xs content-center", children: "Powered by" }), " ", _jsx(LogoWithDetails, { className: 'ml-1 fill-primary-text-placeholder h-5 w-auto cursor-pointer' })] })] }));
+};
+export default Footer;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import HeaderWithMenu from "../HeaderWithMenu";
+import { default as Content } from './Content';
+import { default as Footer } from './Footer';
+import { useRef } from "react";
+import AppSettings from "../../lib/AppSettings";
+const Widget = ({ children, hideMenu, goBack, contextualMenu }) => {
+    const wrapper = useRef(null);
+    return _jsxs("div", { className: "relative p-px", children: [_jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" }), _jsxs("div", { id: "widget", className: 'md:shadow-lg sm:pb-4 rounded-3xl w-full sm:overflow-hidden relative bg-gradient-to-b from-secondary-700 to-secondary-700 max-sm:has-openpicker:min-h-svh max-sm:min-h-[99.8svh] sm:has-openpicker:min-h-[79svh] has-openwithdrawalmodal:min-h-[650px] h-full flex flex-col', children: [AppSettings.ApiVersion === 'sandbox' &&
+                        _jsx("div", { className: "relative z-20", children: _jsx("div", { className: "absolute -top-1 right-[calc(50%-68px)] bg-[#D95E1B] 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" })] })] });
+};
+Widget.Content = Content;
+Widget.Footer = Footer;
+export { Widget };

package/dist/esm/components/WidgetLoading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MenuIcon } from "lucide-react";
+import ColorSchema from "./ColorSchema";
+import AppSettings from "../lib/AppSettings";
+export const WidgetLoading = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: AppSettings.ThemeData }), _jsx("div", { className: "layerswap-styles w-full h-full z-[1] sm:mb-6 mx-auto", 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-full", children: _jsx("div", { className: "bg-secondary-900 rounded-lg w-full sm:overflow-hidden 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-full pb-4 flex flex-col justify-between text-secondary-500 sm:min-h-[500px] h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "w-full grid grid-cols-5 px-6 mt-3 pb-1", children: _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "mx-2 space-y-1 py-1.5", children: _jsx(MenuIcon, { strokeWidth: "2" }) }) }) }), _jsxs("div", { className: "px-6", children: [_jsxs("div", { className: "bg-secondary-700 pt-8 grid grid-cols-6 gap-2 space-y-1 items-end p-3 rounded-xl my-4 mb-12", children: [_jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-start-4 col-span-1 flex justify-start items-center py-2", children: _jsx("div", { className: "w-8 h-8 bg-secondary-600 rounded-lg animate-pulse" }) }), _jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" })] }), _jsx("div", { className: "w-full h-12 bg-secondary-600 rounded-lg animate-pulse mt-2", children: "\u00A0" }), _jsx("div", { className: "mt-10", children: _jsx("div", { className: "w-full h-[50px] bg-primary animate-pulse rounded-lg" }) })] })] }) }) }) }) }) }) }) }) })] }));
+};

package/dist/esm/components/Wizard/Wizard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useFormWizardaUpdate, useFormWizardState } from '../../context/formWizardProvider';
+import { AnimatePresence } from 'framer-motion';
+import HeaderWithMenu from '../HeaderWithMenu';
+const Wizard = ({ children, wizardId }) => {
+    const wrapper = useRef(null);
+    const { setWrapperWidth } = useFormWizardaUpdate();
+    const { wrapperWidth, positionPercent, moving, goBack, noToolBar, hideMenu } = useFormWizardState();
+    useEffect(() => {
+        function handleResize() {
+            if (wrapper.current !== null) {
+                setWrapperWidth(wrapper.current.offsetWidth);
+            }
+        }
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const width = positionPercent || 0;
+    return _jsx(_Fragment, { children: _jsxs("div", { id: 'widget', className: noToolBar ? `w-full h-full` : ` bg-secondary-700 md:shadow-card rounded-lg w-full sm:overflow-hidden relative`, children: [_jsx("div", { className: "relative", children: !noToolBar && _jsx("div", { className: "overflow-hidden h-1 flex rounded-t-lg bg-secondary-500", children: _jsx("div", { style: { width: `${width}%`, transition: 'width 1s' }, className: "shadow-none flex flex-col whitespace-nowrap justify-center bg-primary" }) }) }), !hideMenu && _jsx(HeaderWithMenu, { goBack: goBack }), _jsx("div", { className: noToolBar ? 'relative w-full h-full' : `relative px-4`, children: _jsx("div", { className: "flex items-start w-full h-full", ref: wrapper, children: _jsx(AnimatePresence, { initial: false, custom: { direction: moving === "forward" ? 1 : -1, width: wrapperWidth }, children: _jsx("div", { className: `flex flex-nowrap h-full`, children: children }, wizardId) }) }) }), _jsx("div", { id: "widget_root" })] }) });
+};
+export default Wizard;