@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

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

@@ -0,0 +1,89 @@
+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";
+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-200", 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("p", { 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 { balances, totalInUSD } = useBalance(selectedAccount?.address, item);
+    const tokensWithBalance = 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 && 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/components/Input/RoutePicker/Rows/CollapsableHeader.d.ts

@@ -0,0 +1,10 @@
+import { GroupedTokenElement, NetworkElement } from "../../../../Models/Route";
+import { SwapDirection } from "../../../../components/Pages/Swap/Form/SwapFormValues";
+type Props = {
+    item: GroupedTokenElement | NetworkElement;
+    direction: SwapDirection;
+    allbalancesLoaded?: boolean;
+    hideTokenImages?: boolean;
+};
+export declare const CollapsableHeader: ({ item, direction, allbalancesLoaded, hideTokenImages, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/components/Input/RoutePicker/Rows/CollapsibleRow.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from "react";
+import { NetworkElement, GroupedTokenElement } from "../../../../Models/Route";
+import { NetworkRoute, NetworkRouteToken } from "../../../../Models/Network";
+import { SwapDirection } from "../../../../components/Pages/Swap/Form/SwapFormValues";
+type GenericAccordionRowProps = {
+    item: NetworkElement | GroupedTokenElement;
+    direction: SwapDirection;
+    onSelect: (route: NetworkRoute, token: NetworkRouteToken) => void;
+    selectedRoute: string | undefined;
+    selectedToken: string | undefined;
+    toggleContent: (itemName: string) => void;
+    openValues?: string[];
+    scrollContainerRef: RefObject<HTMLDivElement>;
+    allbalancesLoaded?: boolean;
+};
+export declare const CollapsibleRow: ({ item, toggleContent, direction, onSelect, selectedRoute, selectedToken, openValues, scrollContainerRef, allbalancesLoaded, }: GenericAccordionRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, 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 (_jsx(motion.div, { layout: "position", children: _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/components/Input/RoutePicker/Rows/StickyHeader.d.ts

@@ -0,0 +1,17 @@
+import { GroupedTokenElement, NetworkElement } from "../../../../Models/Route";
+import { SwapDirection } from "../../../../components/Pages/Swap/Form/SwapFormValues";
+type StickyHeaderProps = {
+    item: NetworkElement | GroupedTokenElement;
+    direction: SwapDirection;
+    scrollContainer: HTMLDivElement | null;
+    open: boolean | undefined;
+    headerRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    allbalancesLoaded?: boolean;
+    childrenCount?: number;
+    onClick: () => void;
+    isSticky: boolean;
+    setSticky: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare function StickyHeader({ item, direction, scrollContainer, open, headerRef, contentRef, allbalancesLoaded, childrenCount, onClick, isSticky, setSticky, }: StickyHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/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/components/Input/RoutePicker/Rows/index.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from "react";
+import { RowElement } from "../../../../Models/Route";
+import { NetworkRoute, NetworkRouteToken } from "../../../../Models/Network";
+import { SwapDirection } from "../../../../components/Pages/Swap/Form/SwapFormValues";
+type Props = {
+    item: RowElement;
+    selectedRoute: string | undefined;
+    selectedToken: string | undefined;
+    direction: SwapDirection;
+    toggleContent: (itemName: string) => void;
+    onSelect: (route: NetworkRoute, token: NetworkRouteToken) => void;
+    openValues: string[];
+    scrollContainerRef: RefObject<HTMLDivElement>;
+    allbalancesLoaded?: boolean;
+};
+export default function Row({ item, direction, selectedRoute, selectedToken, toggleContent, onSelect, openValues, allbalancesLoaded, scrollContainerRef, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/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, toggleContent, onSelect, openValues, allbalancesLoaded, scrollContainerRef, }) {
+    switch (item.type) {
+        case "network":
+        case "grouped_token":
+            return (_jsx(CollapsibleRow, { item: item, direction: direction, selectedRoute: selectedRoute, selectedToken: selectedToken, 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/components/Input/RoutePicker/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { SwapDirection } from "../../../components/Pages/Swap/Form/SwapFormValues";
+declare const RoutePicker: FC<{
+    direction: SwapDirection;
+    isExchange?: boolean;
+    className?: string;
+}>;
+export default RoutePicker;

package/dist/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/components/Input/Search.d.ts

@@ -0,0 +1,9 @@
+type SearchComponentProps = {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    isOpen?: boolean;
+    className?: string;
+    placeholder?: string;
+};
+export declare const SearchComponent: ({ searchQuery, setSearchQuery, isOpen, className, placeholder }: SearchComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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('');
+                } }))] });
+};

package/dist/components/Input/SourcePicker.d.ts

@@ -0,0 +1,8 @@
+import { useQuoteData } from "../../hooks/useFee";
+type Props = {
+    minAllowedAmount: ReturnType<typeof useQuoteData>['minAllowedAmount'];
+    maxAllowedAmount: ReturnType<typeof useQuoteData>['maxAllowedAmount'];
+    fee: ReturnType<typeof useQuoteData>['quote'];
+};
+declare const SourcePicker: ({ minAllowedAmount, maxAllowedAmount: maxAmountFromApi, fee }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SourcePicker;

package/dist/components/Input/SourcePicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SourceWalletPicker from "./SourceWalletPicker";
+import RoutePicker from "./RoutePicker";
+import AmountField from "./Amount";
+import { useFormikContext } from "formik";
+import MinMax from "./Amount/MinMax";
+import clsx from "clsx";
+import { useClickOutside } from "../../hooks/useClickOutside";
+import { useState } from "react";
+const SourcePicker = ({ minAllowedAmount, maxAllowedAmount: maxAmountFromApi, fee }) => {
+    const { values } = useFormikContext();
+    const { fromAsset: fromCurrency, from, depositMethod } = values || {};
+    const { ref: parentRef, isActive: showQuickActions, activate: setShowQuickActions } = useClickOutside(false);
+    const [actiontempValue, setActionTempValue] = useState(undefined);
+    const handleActionHover = (value) => {
+        setActionTempValue(value);
+    };
+    return _jsxs("div", { className: "flex flex-col w-full bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] group", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: [_jsx("label", { htmlFor: "From", className: "block col-span-5 font-normal text-secondary-text text-base leading-5 mt-0.5", children: "Send from" }), _jsx("div", { className: "col-span-4 justify-self-end", children: _jsx(SourceWalletPicker, {}) })] }), _jsxs("div", { className: "relative", children: [from && fromCurrency &&
+                        _jsx("div", { className: clsx("absolute z-10 -top-[26px] left-0", {
+                                "hidden": !showQuickActions,
+                                "block": showQuickActions
+                            }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: depositMethod }) }), _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(AmountField, { fee: fee, actionValue: actiontempValue }) }), _jsx("div", { className: "justify-self-end self-start", children: _jsx(RoutePicker, { direction: "from" }) })] })] })] });
+};
+export default SourcePicker;

package/dist/components/Input/SourceWalletPicker.d.ts

@@ -1,4 +1,4 @@
 import { FC } from "react";
-declare const Component: FC;
+declare const SourceWalletPicker: FC;
 export declare const FormSourceWalletButton: FC;
-export default Component;
+export default SourceWalletPicker;