@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Input/CexPicker.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useCallback, useEffect, useState } from "react";
+import { Selector, SelectorContent, SelectorTrigger } from "../Select/Selector/Index";
+import { SelectItem } from "../Select/Selector/SelectItem";
+import useFormRoutes from "../../hooks/useFormRoutes";
+import { LayoutGroup, motion } from "framer-motion";
+import { SearchComponent } from "./Search";
+import { ImageWithFallback } from "../../components/Common/ImageWithFallback";
+import { ChevronDown } from "lucide-react";
+import { updateForm } from "../Pages/Swap/Form/updateForm";
+const CexPicker = () => {
+    const { values, setFieldValue, } = useFormikContext();
+    const direction = "from";
+    const { exchanges, exchangesRoutesLoading: isLoading, selectedRoute, selectedToken, exchangeNetworks } = useFormRoutes({ direction, values });
+    const { fromExchange } = values;
+    const [searchQuery, setSearchQuery] = useState("");
+    useEffect(() => {
+        const updateValues = async () => {
+            if (!fromExchange)
+                return;
+            const sourceRoute = exchangeNetworks?.[0];
+            const sourceRouteToken = sourceRoute?.token;
+            //TODO refactor form types
+            if (sourceRouteToken !== selectedToken) {
+                setFieldValue('from', sourceRoute?.network, true);
+                setFieldValue('fromAsset', sourceRouteToken, true);
+            }
+        };
+        updateValues();
+    }, [selectedRoute, selectedToken, exchangeNetworks, exchanges, values]);
+    const handleSelect = useCallback(async (exchange) => {
+        updateForm({
+            formDataKey: 'fromExchange',
+            formDataValue: exchange,
+            shouldValidate: true,
+            setFieldValue
+        });
+    }, [direction, values]);
+    return (_jsx("div", { className: "flex w-full flex-col self-end relative ml-auto items-center", children: _jsxs(Selector, { children: [_jsx(SelectorTrigger, { disabled: false, className: "bg-secondary-500 !p-3", children: _jsx(SelectedExchangeDisplay, { exchange: fromExchange, placeholder: "Select Exchange" }) }), _jsx(SelectorContent, { isLoading: isLoading, searchHint: "Search", children: ({ closeModal, shouldFocus }) => {
+                        return (_jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus, className: "mb-2" }), _jsx(LayoutGroup, { children: _jsx(motion.div, { layoutScroll: true, className: "select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden styled-scroll pr-3 h-full", children: _jsx("div", { className: "relative", children: exchanges.map((exchange) => {
+                                                return _jsx("div", { className: "py-1 box-border", children: _jsx(ExchangeNetwork, { route: exchange, direction: direction, onSelect: (n) => {
+                                                            handleSelect(n);
+                                                            closeModal();
+                                                        } }) }, exchange.name);
+                                            }) }) }) })] }));
+                    } })] }) }));
+};
+const ExchangeNetwork = (props) => {
+    const { route, onSelect } = props;
+    return _jsx("div", { className: "bg-secondary-500 cursor-pointer hover:bg-secondary-400 rounded-xl outline-none disabled:cursor-not-allowed relative", onClick: () => onSelect(route), children: _jsxs(SelectItem, { children: [_jsx(SelectItem.Logo, { imgSrc: route.logo, altText: `${route.display_name} logo` }), _jsx(SelectItem.Title, { className: "!py-3", children: route.display_name })] }) });
+};
+export const SelectedExchangeDisplay = (props) => {
+    const { exchange, placeholder } = props;
+    return (_jsxs("span", { className: "flex grow text-left items-center text-xs md:text-base relative", children: [exchange ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex items-center relative shrink-0 h-7 w-7", children: _jsx(ImageWithFallback, { src: exchange.logo, alt: "Token Logo", height: "28", width: "28", loading: "eager", fetchPriority: "high", className: "rounded-md object-contain" }) }), _jsx("span", { className: "ml-2 flex flex-col font-medium text-primary-text overflow-hidden min-w-0 max-w-3/5", children: exchange.display_name })] })) : (_jsx(SelectedEchangePlaceholder, { placeholder: placeholder })), _jsx("span", { className: "absolute right-0 px-1 pr-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }));
+};
+export const SelectedEchangePlaceholder = ({ placeholder }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex w-7 h-7 items-center relative", children: _jsx("div", { className: "w-7 h-7 rounded-lg bg-secondary-100" }) }), _jsx("span", { className: "flex text-secondary-text text-base font-normal leading-5 flex-auto items-center max-w-2/3", children: _jsx("span", { className: "ml-2 text-sm sm:text-base sm:leading-5", children: placeholder }) })] }));
+export default CexPicker;

package/dist/esm/components/Input/DestinationPicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon } from "lucide-react";
+import RoutePicker from "./RoutePicker";
+import Address from "./Address";
+import DestinationWalletPicker from "./DestinationWalletPicker";
+import { useFormikContext } from "formik";
+import { ReceiveAmount } from "./Amount/ReceiveAmount";
+import { transformFormValuesToQuoteArgs, useQuoteData } from "../../hooks/useFee";
+import { useMemo } from "react";
+import { useSwapDataState } from "../../context/swap";
+const DestinationPicker = (props) => {
+    const { partner } = props;
+    const { values } = useFormikContext();
+    const { fromAsset: fromCurrency, toAsset: toCurrency } = values;
+    const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
+    const { swapId } = useSwapDataState();
+    const quoteRefreshInterval = !!swapId ? 0 : undefined;
+    const { quote, isQuoteLoading } = useQuoteData(quoteArgs, quoteRefreshInterval);
+    return _jsxs("div", { className: "flex flex-col w-full bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px]", children: [_jsxs("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: [_jsx("label", { htmlFor: "To", className: "block col-span-4 font-normal text-secondary-text text-base leading-5 w-30", children: "Receive at" }), _jsx("div", { className: "col-span-5 justify-self-end", children: _jsx(Address, { partner: partner, children: ({ destination, addressItem, connectedWallet, partner }) => _jsx(DestinationWalletPicker, { destination: destination, addressItem: addressItem, connectedWallet: connectedWallet, partner: partner }) }) })] }), _jsx("div", { className: "items-center space-y-2", children: _jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2 w-full max-w-full", children: [_jsx("div", { className: "min-w-0 overflow-hidden", children: _jsx(ReceiveAmount, { source_token: fromCurrency, destination_token: toCurrency, fee: quote, isFeeLoading: isQuoteLoading }) }), _jsx("div", { className: "justify-self-end self-start", children: _jsx(RoutePicker, { direction: "to" }) })] }) })] });
+};
+export const SecondDestinationWalletPicker = () => {
+    return _jsxs("div", { className: " justify-center w-full pl-3 pr-2 py-2 bg-secondary-400 items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow h-12 ", children: [_jsx(PlusIcon, { className: "stroke-1" }), " ", _jsx("span", { children: "Destination Address" })] });
+};
+export default DestinationPicker;

package/dist/esm/components/Input/DestinationWalletPicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import shortenAddress from "../../components/utils/ShortenAddress";
+import { ChevronDown, PlusIcon } from "lucide-react";
+import { AddressGroup } from "./Address/AddressPicker";
+import AddressIcon from "../../components/Common/AddressIcon";
+import { ImageWithFallback } from "../../components/Common/ImageWithFallback";
+import clsx from 'clsx';
+const DestinationWalletPicker = (props) => {
+    const { addressItem, connectedWallet, partner, destination } = props;
+    return destination && _jsx("div", { className: clsx("flex items-center space-x-2 text-sm rounded-lg py-1 px-2 justify-self-end", {
+            "hover:bg-secondary-400": addressItem,
+            "bg-secondary-400 hover:bg-secondary-300": !addressItem
+        }), children: _jsxs("div", { className: "rounded-lg flex space-x-1 items-center cursor-pointer", children: [addressItem &&
+                    _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex items-center relative px-0.5", children: _jsx(ResolvedIcon, { addressItem: addressItem, partner: partner, wallet: connectedWallet }) }), _jsx("div", { className: "text-secondary-text", children: shortenAddress(addressItem.address) }), _jsx("div", { className: "w-4 h-4 items-center flex text-secondary-text", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }), !addressItem &&
+                    _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex items-center relative px-0.5", children: _jsx(PlusIcon, { className: "w-5 h-5 p-0.5 text-secondary-text" }) }), _jsx("div", { className: "text-secondary-text break-keep", children: _jsx("p", { children: "Add Address" }) }), _jsx("div", { className: "w-4 h-4 items-center flex text-secondary-text", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] })] }) });
+};
+const ResolvedIcon = (props) => {
+    const { addressItem, wallet, partner } = props;
+    if (partner?.is_wallet && addressItem.group === AddressGroup.FromQuery) {
+        return _jsx(ImageWithFallback, { alt: "Partner logo", className: 'rounded-md object-contain', src: partner.logo, width: "16", height: "26" });
+    }
+    else if (addressItem.group === AddressGroup.ConnectedWallet && wallet) {
+        return _jsx(wallet.icon, { className: "w-4 h-4" });
+    }
+    else {
+        return _jsx(AddressIcon, { className: "h-4 w-4 p-0.5", address: addressItem.address, size: 20 });
+    }
+};
+export default DestinationWalletPicker;

package/dist/esm/components/Input/NumericInput.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+import { forwardRef } from "react";
+import { classNames } from '../utils/classNames';
+import { isScientific } from "../utils/RoundDecimals";
+// Use with Formik
+const NumericInput = forwardRef(function NumericInput({ label, tempValue, disabled, placeholder, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
+    const { handleChange } = useFormikContext();
+    const [field] = useField(name);
+    const formattedTempValue = isScientific(tempValue)
+        ? tempValue?.toFixed(precision ?? 0).replace(/\.?0+$/, '')
+        : tempValue?.toString();
+    return _jsxs("div", { children: [label &&
+                _jsx("label", { htmlFor: name, className: "block font-semibold text-secondary-text text-sm mb-1.5 w-full", children: label }), _jsxs("div", { className: "flex relative w-full", children: [Number(tempValue) > 0 &&
+                        _jsx("span", { className: classNames('py-2 flex text-secondary-text/45 items-center h-12 leading-4 bg-secondary-700 min-w-0 rounded-lg font-semibold border-0 ', className), ref: ref, children: _jsx("span", { children: formattedTempValue }) }), !tempValue &&
+                        _jsx("input", { ...field, inputMode: "decimal", autoComplete: "off", disabled: disabled, placeholder: placeholder, autoCorrect: "off", minLength: minLength, maxLength: maxLength, onInput: (event) => { replaceComma(event); limitDecimalPlaces(event, precision); }, onFocus: onFocus, onBlur: onBlur, type: "text", step: step, name: name, id: name, ref: ref, className: classNames('disabled:cursor-not-allowed h-12 leading-4 border-secondary-500 placeholder:text-secondary-text bg-secondary-700 focus:ring-primary focus:border-primary block min-w-0 rounded-lg font-semibold border-0', className), onChange: onChange ? onChange : e => {
+                                /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
+                            } }), _jsx(_Fragment, { children: children })] })] });
+});
+function limitDecimalPlaces(e, count) {
+    if (e.target.value.indexOf('.') == -1) {
+        return;
+    }
+    if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
+        e.target.value = ParseFloat(e.target.value, count);
+    }
+}
+function ParseFloat(str, val) {
+    str = str.toString();
+    str = str.slice(0, (str.indexOf(".")) + val + 1);
+    return Number(str);
+}
+function replaceComma(e) {
+    var val = e.target.value;
+    if (val.match(/\,/)) {
+        val = val.replace(/\,/g, '.');
+        e.target.value = val;
+    }
+}
+export default NumericInput;

package/dist/esm/components/Input/RoutePicker/Content.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useVirtualizer } from "../../../lib/virtual";
+import { Accordion } from "../../../components/shadcn/accordion";
+import Row from "./Rows";
+import { LayoutGroup, motion } from "framer-motion";
+import { useSelectorState } from "../../../components/Select/Selector/Index";
+import useWallet from "../../../hooks/useWallet";
+import ConnectWalletButton from "../../../components/Common/ConnectWalletButton";
+import { SearchComponent } from "../Search";
+export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedRoute, direction, onSelect, allbalancesLoaded }) => {
+    const parentRef = useRef(null);
+    const [openValues, setOpenValues] = useState(selectedRoute ? [selectedRoute] : []);
+    const { shouldFocus } = useSelectorState();
+    const { wallets } = useWallet();
+    const toggleAccordionItem = (value) => {
+        setOpenValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
+    };
+    const virtualizer = useVirtualizer({
+        count: rowElements.length,
+        estimateSize: () => 50,
+        getScrollElement: () => parentRef.current,
+        overscan: 15
+    });
+    const items = virtualizer.getVirtualItems();
+    useEffect(() => {
+        return () => setSearchQuery('');
+    }, []);
+    return _jsxs("div", { className: "overflow-y-auto flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus, className: "mb-2" }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, className: "select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden styled-scroll pr-3 h-full", ref: parentRef, children: [wallets.length === 0 && direction === 'from' && !searchQuery &&
+                            _jsx(ConnectWalletButton, { descriptionText: "Connect your wallet to browse your assets and choose easier", className: "w-full my-2.5" }), _jsx("div", { className: "relative", children: _jsx(Accordion, { type: "multiple", value: openValues, children: _jsx("div", { children: _jsxs("div", { style: {
+                                            height: virtualizer.getTotalSize(),
+                                            width: '100%',
+                                            position: 'relative',
+                                        }, children: [_jsx("div", { className: "sticky top-0 z-50", id: "sticky_accordion_header" }), _jsx("div", { style: {
+                                                    position: 'absolute',
+                                                    top: 0,
+                                                    left: 0,
+                                                    width: '100%',
+                                                    transform: `translateY(${items[0]?.start ? (items[0]?.start - 0) : 0}px)`,
+                                                }, children: items.map((virtualRow) => {
+                                                    const data = rowElements?.[virtualRow.index];
+                                                    const key = data?.route?.name || virtualRow.key;
+                                                    return _jsx("div", { className: "py-1 box-border w-full overflow-hidden", "data-index": virtualRow.index, ref: virtualizer.measureElement, children: _jsx(Row, { allbalancesLoaded: allbalancesLoaded, scrollContainerRef: parentRef, openValues: openValues, onSelect: onSelect, direction: direction, item: data, selectedRoute: selectedRoute, selectedToken: selectedToken, searchQuery: searchQuery, toggleContent: toggleAccordionItem }) }, key);
+                                                }) })] }) }) }) })] }) })] });
+};

package/dist/esm/components/Input/RoutePicker/RouteTokenSwitch.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import TokenIcon from "../../../components/Icons/TokenIcon";
+import { Globe } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
+import clsx from "clsx";
+import { useRouteTokenSwitchStore } from "../../../stores/routeTokenSwitchStore";
+const switchValues = [
+    { value: false, id: 'network', label: "Group by Network", icon: Globe },
+    { value: true, id: 'token', label: "Group by Token", icon: TokenIcon },
+];
+const RouteTokenSwitch = () => {
+    const showTokens = useRouteTokenSwitchStore((s) => s.showTokens);
+    const setShowTokens = useRouteTokenSwitchStore((s) => s.setShowTokens);
+    const activeTab = switchValues.find(item => item.value === showTokens)?.id || switchValues[0].id;
+    return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "relative flex items-center bg-secondary-500 rounded-lg p-1", children: switchValues.map((item, index) => (_jsxs(Tooltip, { children: [_jsxs(TooltipTrigger, { type: "button", onClick: () => { setShowTokens(item.value); }, className: "z-10 flex items-center justify-center rounded-2xl px-4 py-1 relative", children: [activeTab === item.id && (_jsx(motion.span, { layoutId: "bubble", className: "absolute inset-0 z-10 rounded-md bg-secondary-300 mix-blend-color", transition: { type: "spring", bounce: 0.2, duration: 0.6 } })), _jsx(item.icon, { className: clsx("text-primary-text-tertiary h-5 w-5", {
+                                    "!text-primary-text": activeTab === item.id,
+                                }) })] }), _jsx(TooltipContent, { children: _jsx("p", { children: item.label }) })] }, index))) }) }));
+};
+export default RouteTokenSwitch;

package/dist/esm/components/Input/RoutePicker/RouterPickerWalletConnect.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useConnectModal } from "../../../components/Wallet/WalletModal";
+import VaulDrawer from "../../../components/Modal/vaulModal";
+import { ChevronDown, Plus } from "lucide-react";
+import { WalletItem } from "../../../components/Wallet/WalletComponents/WalletsList";
+import shortenAddress from "../../../components/utils/ShortenAddress";
+import WalletIcon from "../../../components/Icons/WalletIcon";
+import ConnectButton from "../../../components/Buttons/connectButton";
+import { WalletsIcons } from "../../../components/Wallet/WalletComponents/ConnectedWallets";
+import { useFormikContext } from "formik";
+import { isValidAddress } from "../../../lib/address/validator";
+import { useBalanceAccounts, useUpdateBalanceAccount } from "../../../context/balanceAccounts";
+import { addressFormat } from "../../../lib/address/formatter";
+const PickerWalletConnect = ({ direction }) => {
+    const [openModal, setOpenModal] = useState(false);
+    const { values, setFieldValue } = useFormikContext();
+    const balanceAccounts = useBalanceAccounts(direction);
+    const selectBalanceAccount = useUpdateBalanceAccount(direction);
+    const { connect } = useConnectModal();
+    const connectWallet = async () => {
+        const result = await connect();
+        if (result)
+            handleSelectAccount({
+                walletId: result.id,
+                address: result.address,
+                providerName: result.providerName
+            });
+    };
+    const handleSelectAccount = (props) => {
+        const { walletId, address, providerName } = props;
+        if (direction == 'to' && isValidAddress(address, values.to))
+            setFieldValue(`destination_address`, address);
+        selectBalanceAccount({
+            id: walletId,
+            address,
+            providerName,
+        });
+        setOpenModal(false);
+    };
+    return _jsxs(_Fragment, { children: [_jsx(AccountsPickerButton, { accounts: balanceAccounts, onOpenModalClick: () => setOpenModal(true) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: 'Select wallet', modalId: "connectedWallets", children: _jsxs(VaulDrawer.Snap, { id: "item-1", className: "space-y-1 pb-4", 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" })] }) }), balanceAccounts.map((account, index) => {
+                            return (_jsxs("div", { children: [_jsx("div", { className: "flex justify-between items-center px-4 pt-2", children: _jsx("label", { htmlFor: "From", className: "block font-medium text-secondary-text text-sm pl-1 py-1", children: account.provider.name }) }), _jsx(AccountsList, { network: direction === 'from' ? values.from : values.to, onSelect: handleSelectAccount, selectedAccount: account }, index)] }, index));
+                        })] }) })] });
+};
+const AccountsPickerButton = ({ accounts, onOpenModalClick }) => {
+    const firstWallet = useMemo(() => accounts[0], [accounts]);
+    if (accounts.length > 0) {
+        return _jsx("button", { onClick: onOpenModalClick, type: "button", className: "p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center", children: accounts.length === 1 ?
+                _jsxs("div", { className: "flex gap-2 items-center text-sm text-secondary-text", children: [_jsx(firstWallet.icon, { className: 'h-5 w-5' }), firstWallet.address &&
+                            _jsx("p", { children: shortenAddress(firstWallet.address) }), _jsx(ChevronDown, { className: "h-5 w-5" })] })
+                :
+                    _jsx(WalletsIcons, { wallets: accounts }) });
+    }
+    return (_jsx(ConnectButton, { children: _jsx("div", { className: "p-1.5 justify-self-start text-secondary-text hover:bg-secondary-500 hover:text-primary-text focus:outline-hidden inline-flex rounded-lg items-center", children: _jsx(WalletIcon, { className: "h-6 w-6 mx-0.5", strokeWidth: "2" }) }) }));
+};
+const AccountsList = (props) => {
+    const { selectedAccount, onSelect, network } = props;
+    const provider = selectedAccount?.provider;
+    const connectedWallets = provider?.connectedWallets || [];
+    const networkName = provider?.autofillSupportedNetworks ? { name: provider?.autofillSupportedNetworks[0] } : undefined;
+    const walletNetwork = network || networkName;
+    const isAccountDuplicate = selectedAccount && walletNetwork && connectedWallets.some((w) => w.addresses.some((address) => addressFormat(address, walletNetwork) === addressFormat(selectedAccount.address, walletNetwork)));
+    const accounts = [
+        ...connectedWallets,
+        ...(selectedAccount && !isAccountDuplicate ? [selectedAccount] : [])
+    ];
+    return (_jsx("div", { className: "space-y-3", children: accounts.length > 0 &&
+            _jsx("div", { className: "flex flex-col justify-start gap-2 rounded-xl", children: accounts.map((wallet, index) => _jsx(WalletItem, { account: wallet, selectable: true, onWalletSelect: onSelect, selectedAddress: selectedAccount?.address }, `${index}${wallet.providerName}`)) }) }));
+};
+export default PickerWalletConnect;

package/dist/esm/components/Input/RoutePicker/Routes.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { truncateDecimals } from "../../../components/utils/RoundDecimals";
+import { SelectItem } from "../../../components/Select/Selector/SelectItem";
+import { ChevronDown, Info } from "lucide-react";
+import RoutePickerIcon from "../../../components/Icons/RoutePickerPlaceholder";
+import { useBalance } from "../../../lib/balances/useBalance";
+import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
+import { getKey, useBalanceStore } from "../../../stores/balanceStore";
+import { useBalanceAccounts } from "../../../context/balanceAccounts";
+import clsx from "clsx";
+import { formatUsd } from "../../../components/utils/formatUsdAmount";
+import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
+import { getTotalBalanceInUSD } from "../../../helpers/balanceHelper";
+import { useMemo } from "react";
+export const CurrencySelectItemDisplay = (props) => {
+    const { item, route, direction, allbalancesLoaded, type } = props;
+    return _jsxs(SelectItem, { className: "group", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.symbol} logo`, className: "rounded-full" }), _jsx(NetworkTokenTitle, { item: item, route: route, direction: direction, allbalancesLoaded: allbalancesLoaded, type: type })] });
+};
+export const NetworkTokenTitle = (props) => {
+    const { item, route, direction, allbalancesLoaded, type } = props;
+    const balanceAccounts = useBalanceAccounts(direction);
+    const selectedAccount = balanceAccounts?.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.name));
+    const { balances } = useBalance(selectedAccount?.address, route);
+    const tokenbalance = balances?.find(b => b.token === item.symbol);
+    const formatted_balance_amount = (tokenbalance?.amount || tokenbalance?.amount === 0) ? truncateDecimals(tokenbalance?.amount, item.precision) : '';
+    const usdAmount = (tokenbalance?.amount && item?.price_in_usd) ? item?.price_in_usd * tokenbalance?.amount : undefined;
+    return _jsx(SelectItem.DetailedTitle, { title: item.symbol, secondaryImageAlt: route.display_name, secondary: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { children: route.display_name }), _jsx("div", { className: "transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover", children: item.contract ?
+                        _jsx(ExtendedAddress, { network: route, isForCurrency: true, showDetails: true, address: item.contract, logo: item.logo, title: item.symbol, description: item.display_asset, children: _jsxs("div", { className: "flex items-center gap-1 text-secondary-text text-xs cursor-pointer hover:text-primary-text", children: [_jsxs("p", { className: "max-w-[90px] truncate", children: [_jsx("span", { children: "\u2022" }), " ", _jsx("span", { children: item.display_asset || item.symbol })] }), _jsx(Info, { className: "h-3 w-3" })] }) })
+                        :
+                            _jsxs("p", { className: "flex items-center gap-1 text-xs text-secondary-text", children: [_jsx("span", { children: "\u2022" }), _jsx("span", { className: "truncate max-w-[80px]", children: item.display_asset || item.symbol })] }) })] }), secondaryLogoSrc: route.logo, children: (allbalancesLoaded && tokenbalance && Number(tokenbalance?.amount) >= 0) ? (_jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [Number(usdAmount) >= 0 && (_jsx("div", { className: clsx("text-primary-text", {
+                        'text-lg leading-[22px]': type === 'suggested_token',
+                    }), children: formatUsd(usdAmount) })), _jsx("div", { className: clsx({
+                        'text-xs leading-4': type == 'suggested_token',
+                    }), children: formatted_balance_amount })] })) : !allbalancesLoaded ? (_jsx("span", { className: "px-0.5", children: "-" })) : (_jsx(_Fragment, {})) });
+};
+export const NetworkRouteSelectItemDisplay = (props) => {
+    const { item, direction, allbalancesLoaded, hideTokenImages } = props;
+    const balanceAccounts = useBalanceAccounts(direction);
+    const selectedAccount = balanceAccounts?.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(item.name));
+    const networkBalances = useBalance(selectedAccount?.address, item);
+    const totalInUSD = useMemo(() => networkBalances ? getTotalBalanceInUSD(networkBalances, item) : undefined, [networkBalances.balances, item]);
+    const tokensWithBalance = networkBalances.balances?.filter(b => b.amount && b.amount > 0)
+        ?.map(b => b.token);
+    const filteredNetworkTokens = item?.tokens?.filter(token => tokensWithBalance?.includes(token.symbol));
+    const hasLoadedBalances = allbalancesLoaded && totalInUSD !== null && Number(totalInUSD) > 0;
+    const showTokenLogos = hasLoadedBalances && filteredNetworkTokens?.length;
+    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.display_name} logo`, className: "rounded-md" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: item.display_name }), hasLoadedBalances ? (_jsxs("div", { className: `${showTokenLogos ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "hidden" : ""}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(totalInUSD) }), showTokenLogos ? (_jsxs("div", { className: "flex justify-end items-center -space-x-2 relative h-4", children: [filteredNetworkTokens.slice(0, 3).map((t, index) => (_jsx(ImageWithFallback, { src: t.logo, alt: `${t.symbol} logo`, height: "16", width: "16", loading: "eager", fetchPriority: 'high', className: "rounded-full object-contain" }, `${t.symbol}-${index}`))), filteredNetworkTokens.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", filteredNetworkTokens.length - 3] }) }))] })) : _jsx(_Fragment, {})] })) : !allbalancesLoaded ? (_jsx("span", { className: "px-0.5", children: "-" })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
+};
+export const GroupedTokenHeader = ({ item, direction, allbalancesLoaded, hideTokenImages }) => {
+    const balanceAccounts = useBalanceAccounts(direction);
+    const tokens = item.items;
+    const balances = useBalanceStore(s => s.balances);
+    const networksWithBalance = Array.from(new Map(tokens
+        .map(({ route }) => {
+        const address = balanceAccounts.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.route.name))?.address;
+        const key = address && route.route ? getKey(address, route.route) : 'unknown';
+        const tokenSymbol = route.token.symbol;
+        const networkRoute = route.route;
+        const networkBalances = balances?.[key];
+        const balanceEntry = networkBalances?.data?.balances?.find((b) => b.token === tokenSymbol && b.amount && b.amount >= 0);
+        return balanceEntry ? [networkRoute.name, networkRoute] : null;
+    })
+        .filter((entry) => !!entry)).values());
+    const tokenBalances = tokens.reduce((acc, { route }) => {
+        const address = balanceAccounts.find(w => (direction == 'from' ? w.provider?.withdrawalSupportedNetworks : w.provider?.autofillSupportedNetworks)?.includes(route.route.name))?.address;
+        const key = address && route.route ? getKey(address, route.route) : 'unknown';
+        const tokenSymbol = route.token.symbol;
+        const networkName = route.route.name;
+        const price = route.token.price_in_usd;
+        const networkBalances = balances?.[key];
+        const balanceEntry = networkBalances?.data?.balances?.find((b) => b.token === tokenSymbol);
+        if (!balanceEntry?.amount)
+            return acc;
+        return { sum: acc.sum + balanceEntry.amount * price, hasVale: true };
+    }, { sum: 0, hasVale: false });
+    const mainToken = tokens[0]?.route.token;
+    const hasLoadedBalances = allbalancesLoaded && tokenBalances.hasVale && Number(tokenBalances.sum) >= 0;
+    const showNetworkIcons = hasLoadedBalances && networksWithBalance.length > 0;
+    return (_jsxs(SelectItem, { className: "bg-secondary-500 group rounded-xl hover:bg-secondary-400 group/item relative pr-7 py-2", children: [_jsx(SelectItem.Logo, { imgSrc: mainToken.logo, altText: `${mainToken.symbol} logo`, className: "rounded-full" }), _jsx(SelectItem.Title, { children: _jsxs(_Fragment, { children: [_jsx("span", { children: mainToken.symbol }), hasLoadedBalances ? (_jsxs("div", { className: `${showNetworkIcons ? "flex flex-col space-y-0.5" : ""} ${hideTokenImages ? "invisible" : "visible"}`, children: [_jsx("span", { className: "text-secondary-text text-sm leading-4 font-medium", children: formatUsd(tokenBalances.sum) }), showNetworkIcons && (_jsxs("div", { className: "flex justify-end items-center -space-x-1.5 relative h-4", children: [networksWithBalance.slice(0, 3).map((network, index) => (_jsx(ImageWithFallback, { src: network.logo, alt: `${network.display_name} logo`, height: "16", width: "16", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }, `${network.display_name}-${index}`))), networksWithBalance.length > 3 && (_jsx("div", { className: "w-4 h-4 bg-secondary-600 text-primary-text text-[8px] rounded-full flex items-center justify-center border-2 border-background", children: _jsxs("span", { children: ["+", networksWithBalance.length - 3] }) }))] }))] })) : balances ? (_jsx("div", { className: "px-0.5", children: "-" })) : _jsx(_Fragment, {}), _jsx(ChevronDown, { className: "!w-3.5 !h-3.5 absolute right-2 top-1/2 -translate-y-1/2 text-secondary-text transition-opacity duration-200 opacity-0 group-hover/item:opacity-100", "aria-hidden": "true" })] }) })] }));
+};
+export const SelectedCurrencyDisplay = (props) => {
+    const { value, placeholder } = props;
+    return _jsxs("span", { className: 'flex flex-col text-left items-center text-xs md:text-base', children: [value?.logo && _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "shrink-0 h-6 w-6 relative", children: _jsx(ImageWithFallback, { src: value.logo, alt: "Project Logo", height: "40", width: "40", loading: "eager", fetchPriority: 'high', className: "rounded-full object-contain" }) }) }), value ?
+                _jsx("span", { className: "ml-3 flex font-medium flex-auto space-x-1 text-primary-text items-center", children: value.symbol })
+                :
+                    _jsx("span", { className: "block font-medium text-primary-text-tertiary flex-auto items-center", children: placeholder })] });
+};
+export const SelectedRouteDisplay = ({ route, token, placeholder }) => {
+    const showContent = token && route;
+    return (_jsxs("span", { className: "flex grow text-left items-center text-xs md:text-base relative", children: [showContent ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "inline-flex items-center relative shrink-0", children: [_jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "24", width: "24", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }), _jsx(ImageWithFallback, { src: route.logo, alt: "Network Logo", height: "12", width: "12", loading: "eager", fetchPriority: "high", className: "h-3.5 w-3.5 absolute left-3.5 top-3.5 object-contain rounded border-1 border-secondary-300" })] }), _jsxs("div", { className: "ml-3 flex flex-col grow font-medium text-primary-text overflow-hidden min-w-0 max-w-3/4 group-[.exchange-picker]:max-w-full", children: [_jsx("p", { className: "leading-5", children: token.symbol }), _jsx("p", { className: "text-secondary-text grow font-normal text-sm leading-4 truncate whitespace-nowrap", children: route.display_name })] })] })) : (_jsx(SelectedRoutePlaceholder, { placeholder: placeholder })), _jsx("span", { className: "px-1 pr-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }));
+};
+export const SelectedRoutePlaceholder = ({ placeholder }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "inline-flex items-center relative py-1", children: _jsx(RoutePickerIcon, { className: "w-7 h-7" }) }), _jsx("span", { className: "flex text-secondary-text text-base font-normal leading-5 flex-auto items-center max-w-3/4 group-[.exchange-picker]:max-w-full", children: _jsx("span", { className: "ml-2 text-sm sm:text-base sm:leading-5 whitespace-nowrap", children: placeholder }) })] }));

package/dist/esm/components/Input/RoutePicker/Rows/CollapsableHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GroupedTokenHeader, NetworkRouteSelectItemDisplay } from "../Routes";
+export const CollapsableHeader = ({ item, direction, allbalancesLoaded, hideTokenImages, }) => {
+    const groupedByToken = item.type === "grouped_token";
+    return groupedByToken ? (_jsx(GroupedTokenHeader, { item: item, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: hideTokenImages })) : (_jsx(NetworkRouteSelectItemDisplay, { item: item.route, selected: false, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: hideTokenImages }));
+};

package/dist/esm/components/Input/RoutePicker/Rows/CollapsibleRow.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useMemo, useRef, useState, } from "react";
+import { AccordionContent, AccordionItem, AccordionTrigger } from "../../../../components/shadcn/accordion";
+import { motion } from "framer-motion";
+import { CurrencySelectItemDisplay } from "../Routes";
+import { CollapsableHeader } from "./CollapsableHeader";
+import { StickyHeader } from "./StickyHeader";
+export const CollapsibleRow = ({ item, toggleContent, direction, onSelect, selectedRoute, selectedToken, searchQuery, openValues, scrollContainerRef, allbalancesLoaded, }) => {
+    const groupName = item.type === "grouped_token" ? item.symbol : item.route.name;
+    const headerId = `${groupName}-header`;
+    const childrenList = useMemo(() => {
+        if (item.type === "grouped_token") {
+            const grouped = item;
+            return grouped.items.map((el) => ({
+                token: el.route.token,
+                route: el.route.route,
+            }));
+        }
+        else {
+            const route = item.route;
+            return route.tokens.map((t) => ({
+                token: t,
+                route: route,
+            }));
+        }
+    }, [item]);
+    const [isSticky, setSticky] = useState(false);
+    const headerRef = useRef(null);
+    const contentRef = useRef(null);
+    const isOpen = openValues?.some((ov) => ov === groupName);
+    const stickyToggle = () => {
+        toggleContent(groupName);
+        headerRef.current?.scrollIntoView({ block: "start", inline: "start" });
+    };
+    return (_createElement(motion.div, { ...(!searchQuery && { layout: "position" }), key: searchQuery ? "search" : "default" },
+        _jsxs(AccordionItem, { value: groupName, children: [_jsx("div", { ref: headerRef, id: headerId, onClick: () => toggleContent(groupName), className: `cursor-pointer bg-secondary-700 rounded-lg hover:bg-secondary-600 relative ${isSticky ? "opacity-0" : ""}`, children: _jsx(AccordionTrigger, { children: _jsx(CollapsableHeader, { item: item, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: isOpen }) }) }), _jsx(StickyHeader, { item: item, direction: direction, scrollContainer: scrollContainerRef.current, open: isOpen, headerRef: headerRef, contentRef: contentRef, allbalancesLoaded: allbalancesLoaded, childrenCount: childrenList?.length, onClick: stickyToggle, isSticky: isSticky, setSticky: setSticky }), _jsx(AccordionContent, { className: "AccordionContent", ref: contentRef, itemsCount: childrenList?.length, children: _jsx("div", { className: "has-[.token-item]:mt-1 bg-secondary-500 rounded-xl overflow-hidden", children: _jsx("div", { className: "overflow-y-auto styled-scroll p-2", children: childrenList?.map(({ token, route }, index) => {
+                                const isSelected = selectedRoute === route.name && selectedToken === token.symbol;
+                                return (_jsx("div", { className: "token-item pl-2 pr-3 cursor-pointer hover:bg-secondary-400 rounded-xl outline-none disabled:cursor-not-allowed", onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { allbalancesLoaded: allbalancesLoaded, item: token, selected: isSelected, route: route, direction: direction }) }, `${groupName}-${index}`));
+                            }) }) }) })] })));
+};

package/dist/esm/components/Input/RoutePicker/Rows/StickyHeader.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import ReactPortal from "../../../../components/Common/ReactPortal";
+import { CollapsableHeader } from "./CollapsableHeader";
+export function StickyHeader({ item, direction, scrollContainer, open, headerRef, contentRef, allbalancesLoaded, childrenCount, onClick, isSticky, setSticky, }) {
+    useEffect(() => {
+        if (!open) {
+            setSticky(false);
+            return;
+        }
+        const onScroll = () => {
+            if (!headerRef.current || !contentRef.current || !scrollContainer)
+                return;
+            const headerRect = headerRef.current.getBoundingClientRect();
+            const contentRect = contentRef.current.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const passedTop = headerRect.top - 3 <= containerRect.top;
+            const contentGone = contentRect.bottom <=
+                containerRect.top + headerRect.height * 1.5;
+            setSticky(passedTop && !contentGone && Boolean(childrenCount && childrenCount > 1));
+        };
+        scrollContainer?.addEventListener("scroll", onScroll, { passive: true });
+        return () => scrollContainer?.removeEventListener("scroll", onScroll);
+    }, [scrollContainer, open, headerRef, contentRef, childrenCount]);
+    if (!isSticky)
+        return null;
+    return (_jsx(ReactPortal, { wrapperId: "sticky_accordion_header", children: _jsx("div", { onClick: onClick, className: "cursor-pointer bg-secondary-700 hover:bg-secondary-600 relative pb-1", children: _jsx(CollapsableHeader, { item: item, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: open }) }) }));
+}

package/dist/esm/components/Input/RoutePicker/Rows/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CurrencySelectItemDisplay } from "../Routes";
+import { CollapsibleRow } from "./CollapsibleRow";
+import RouteTokenSwitch from "../RouteTokenSwitch";
+import clsx from "clsx";
+import { SelectItem } from "../../../../components/Select/Selector/SelectItem";
+export default function Row({ item, direction, selectedRoute, selectedToken, searchQuery, toggleContent, onSelect, openValues, allbalancesLoaded, scrollContainerRef, }) {
+    switch (item.type) {
+        case "network":
+        case "grouped_token":
+            return (_jsx(CollapsibleRow, { item: item, direction: direction, selectedRoute: selectedRoute, selectedToken: selectedToken, searchQuery: searchQuery, toggleContent: toggleContent, onSelect: onSelect, openValues: openValues, scrollContainerRef: scrollContainerRef, allbalancesLoaded: allbalancesLoaded }));
+        case "network_token":
+        case "suggested_token": {
+            const token = item.route.token;
+            const route = item.route.route;
+            const isSelected = selectedRoute === route.name && selectedToken === token.symbol;
+            return (_jsx("div", { className: clsx("cursor-pointer hover:bg-secondary-500 outline-none disabled:cursor-not-allowed rounded-xl"), onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { allbalancesLoaded: allbalancesLoaded, item: token, selected: isSelected, route: route, direction: direction, type: item.type }) }));
+        }
+        case "group_title":
+            return (_jsxs("div", { className: "text-primary-text-tertiary text-base font-normal leading-5 pl-1 sticky top-0 z-50 flex items-baseline", style: { position: "sticky", top: 0, transform: "none" }, children: [_jsx("p", { children: item.text }), item.text.toLowerCase().includes("all") &&
+                        _jsx("div", { className: "relative ml-auto", children: _jsx(RouteTokenSwitch, {}) })] }));
+        case "sceleton_token":
+            return (_jsxs(SelectItem, { className: "animate-pulse", children: [_jsx(SelectItem.Logo, { altText: `sceleton logo `, className: "rounded-full bg-secondary-500" }), _jsxs(SelectItem.Title, { className: "py-0.5", children: [_jsxs("div", { className: "grid gap-0 leading-5 align-middle space-y-0.5 font-medium", children: [_jsx("span", { className: "align-middle h-3.5 my-1 w-12 bg-secondary-500 rounded-sm" }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [_jsx("div", { className: "w-2 h-2 my-1 bg-secondary-500 rounded-[4px]" }), _jsx("span", { className: "bg-secondary-500 text-xs whitespace-nowrap h-2 my-1 w-20 rounded-sm" })] })] }), _jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [_jsx("div", { className: "text-primary-text text-lg leading-[22px] bg-secondary-500 h-3 my-1 w-16 ml-auto rounded-sm" }), _jsx("div", { className: "text-xs leading-4 bg-secondary-500 h-2 my-1 w-10 ml-auto rounded-sm" })] })] })] }));
+        default:
+            return null;
+    }
+}

package/dist/esm/components/Input/RoutePicker/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useCallback, useEffect, useState } from "react";
+import { Selector, SelectorContent, SelectorTrigger } from "../../../components/Select/Selector/Index";
+import { SelectedRouteDisplay } from "./Routes";
+import useFormRoutes from "../../../hooks/useFormRoutes";
+import Balance from "../Amount/Balance";
+import { Content } from "./Content";
+import PickerWalletConnect from "./RouterPickerWalletConnect";
+import { swapInProgress } from "../../../components/utils/swapUtils";
+import { updateForm } from "../../../components/Pages/Swap/Form/updateForm";
+import clsx from "clsx";
+const RoutePicker = ({ direction, isExchange = false, className }) => {
+    const { values, setFieldValue, } = useFormikContext();
+    const [searchQuery, setSearchQuery] = useState("");
+    const { allRoutes, isLoading, routeElements, selectedRoute, selectedToken, allbalancesLoaded } = useFormRoutes({ direction, values }, searchQuery);
+    const currencyFieldName = direction === 'from' ? 'fromAsset' : 'toAsset';
+    useEffect(() => {
+        const updateValues = async () => {
+            if (!selectedRoute || !selectedToken || !allRoutes || swapInProgress.current)
+                return;
+            const updatedRoute = allRoutes.find(r => r.name === selectedRoute.name);
+            const updatedToken = updatedRoute?.tokens?.find(t => t.symbol === selectedToken.symbol);
+            if (updatedToken === selectedToken)
+                return;
+            if (updatedRoute && updatedToken) {
+                await updateForm({
+                    formDataKey: currencyFieldName,
+                    formDataValue: updatedToken,
+                    shouldValidate: true,
+                    setFieldValue
+                });
+            }
+        };
+        updateValues();
+    }, [selectedRoute, selectedToken, allRoutes, direction, setFieldValue]);
+    const handleSelect = useCallback(async (route, token) => {
+        swapInProgress.current = false;
+        await updateForm({
+            formDataKey: currencyFieldName,
+            formDataValue: token,
+            shouldValidate: true,
+            setFieldValue
+        });
+        await updateForm({
+            formDataKey: direction,
+            formDataValue: route,
+            shouldValidate: true,
+            setFieldValue
+        });
+    }, [currencyFieldName, direction, setFieldValue]);
+    const showbalance = !isExchange && (direction === 'to' || values.depositMethod === 'wallet');
+    return (_jsxs("div", { className: clsx("flex flex-col self-end relative items-center", className), children: [_jsxs(Selector, { children: [_jsx(SelectorTrigger, { disabled: false, className: "group-[.exchange-picker]:bg-secondary-500 py-[6px] px-2 group-[.exchange-picker]:!py-2 group-[.exchange-picker]:!px-3 active:animate-press-down group-[.exchange-picker]:active:animate-none", children: _jsx(SelectedRouteDisplay, { route: selectedRoute, token: selectedToken, placeholder: "Select token" }) }), _jsx(SelectorContent, { isLoading: isLoading, searchHint: "Search", header: _jsx(PickerWalletConnect, { direction: direction }), children: ({ closeModal }) => (_jsx(Content, { allbalancesLoaded: allbalancesLoaded, onSelect: (r, t) => { handleSelect(r, t); closeModal(); }, searchQuery: searchQuery, setSearchQuery: setSearchQuery, rowElements: routeElements, direction: direction, selectedRoute: selectedRoute?.name, selectedToken: selectedToken?.symbol })) })] }), showbalance &&
+                _jsx(Balance, { values: values, direction: direction })] }));
+};
+export default RoutePicker;

package/dist/esm/components/Input/Search.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+import { useEffect, useRef } from "react";
+import FilledX from "../Icons/FilledX";
+import SearchIcon from "../Icons/SearchIcon";
+export const SearchComponent = ({ searchQuery, setSearchQuery, isOpen, className, placeholder }) => {
+    const { isDesktop } = useWindowDimensions();
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (isOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen]);
+    return _jsxs("div", { className: `flex items-center bg-secondary-500 focus-within:bg-secondary-300 rounded-lg px-2 h-10 ${className}`, children: [_jsx("div", { className: "w-6 h-6 flex items-center justify-center mr-1", children: _jsx(SearchIcon, { className: "text-primary-text-tertiary" }) }), _jsx("input", { ref: inputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), autoFocus: isDesktop, placeholder: placeholder ?? "Search", autoComplete: "off", className: "placeholder:text-primary-text-tertiary border-0 border-b-0 border-primary-text bg-secondary-500 focus:bg-secondary-300 focus:border-primary-text appearance-none block py-2 px-0 w-full  text-base outline-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50" }), searchQuery && (_jsx(FilledX, { className: "w-4 h-4 text-primary-text-tertiary cursor-pointer ml-2", onMouseDown: (e) => {
+                    e.preventDefault();
+                    setSearchQuery('');
+                } }))] });
+};