@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Input/Amount/index.d.ts

@@ -1,2 +1,9 @@
-declare const AmountField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+import { useQuoteData } from "../../../hooks/useFee";
+interface AmountFieldProps {
+    usdPosition?: "right" | "bottom";
+    fee: ReturnType<typeof useQuoteData>['quote'];
+    actionValue?: number;
+    className?: string;
+}
+declare const AmountField: import("react").ForwardRefExoticComponent<AmountFieldProps & import("react").RefAttributes<unknown>>;
 export default AmountField;

package/dist/components/Input/Amount/index.js

@@ -1,54 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
 import NumericInput from "../NumericInput";
-import { useFee } from "../../../context/feeContext";
-import useSWRGas from "../../../lib/gases/useSWRGas";
-import useSWRBalance from "../../../lib/balances/useSWRBalance";
-import { useSwapDataState } from "../../../context/swap";
-import MinMax from "./MinMax";
-import { resolveMacAllowedAmount } from "./helpers";
-const AmountField = forwardRef(function AmountField(_, ref) {
+import { formatUsd } from "../../../components/utils/formatUsdAmount";
+import clsx from "clsx";
+import { resolveTokenUsdPrice } from "../../../helpers/tokenHelper";
+const AmountField = forwardRef(function AmountField({ usdPosition = "bottom", actionValue, fee, className }, ref) {
     const { values, handleChange } = useFormikContext();
-    const [requestedAmountInUsd, setRequestedAmountInUsd] = useState();
-    const { fromCurrency, from, to, amount, toCurrency, fromExchange, toExchange } = values || {};
-    const { minAllowedAmount, maxAllowedAmount: maxAmountFromApi, fee, isFeeLoading } = useFee();
-    const [isFocused, setIsFocused] = useState(false);
-    const { selectedSourceAccount } = useSwapDataState();
-    const sourceAddress = selectedSourceAccount?.address;
-    const { balance, isBalanceLoading } = useSWRBalance(sourceAddress, from);
-    const { gas, isGasLoading } = useSWRGas(sourceAddress, from, fromCurrency);
-    const gasAmount = gas || 0;
-    const native_currency = from?.token;
+    const { fromAsset: fromCurrency, amount, toAsset: toCurrency, fromExchange } = values || {};
     const name = "amount";
-    const walletBalance = balance?.find(b => b?.network === from?.name && b?.token === fromCurrency?.symbol);
-    let maxAllowedAmount = useMemo(() => {
-        if (!fromCurrency || !minAllowedAmount || !maxAmountFromApi)
-            return 0;
-        return resolveMacAllowedAmount({ fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, walletBalance, gasAmount, native_currency });
-    }, [fromCurrency, minAllowedAmount, maxAmountFromApi, walletBalance, gasAmount, native_currency]);
-    const placeholder = (fromCurrency && toCurrency && from && to && minAllowedAmount && !isBalanceLoading && !isGasLoading) ? `${minAllowedAmount} - ${maxAmountFromApi}` : '0.0';
-    const step = 1 / Math.pow(10, fromCurrency?.precision || 1);
     const amountRef = useRef(ref);
-    const diasbled = Boolean((fromExchange && !toCurrency) || (toExchange && !fromCurrency));
-    const updateRequestedAmountInUsd = useCallback((requestedAmount, fee) => {
-        if (fee?.quote.source_token?.price_in_usd && !isNaN(requestedAmount)) {
-            setRequestedAmountInUsd((fee?.quote.source_token?.price_in_usd * requestedAmount).toFixed(2));
-        }
-        else {
-            setRequestedAmountInUsd(undefined);
-        }
-    }, [requestedAmountInUsd, fee]);
+    const suffixRef = useRef(null);
+    const sourceCurrencyPriceInUsd = resolveTokenUsdPrice(fromCurrency, fee?.quote);
+    const requestedAmountInUsd = useMemo(() => {
+        const amountNumber = Number(amount);
+        if (isNaN(amountNumber) || amountNumber <= 0 || !sourceCurrencyPriceInUsd)
+            return undefined;
+        return formatUsd(sourceCurrencyPriceInUsd * amountNumber);
+    }, [amount, sourceCurrencyPriceInUsd]);
+    const actionValueInUsd = useMemo(() => {
+        const amountNumber = Number(actionValue);
+        if (isNaN(amountNumber) || amountNumber <= 0 || !sourceCurrencyPriceInUsd)
+            return undefined;
+        return formatUsd(sourceCurrencyPriceInUsd * amountNumber);
+    }, [actionValue, sourceCurrencyPriceInUsd]);
     useEffect(() => {
-        if (isFeeLoading)
-            setRequestedAmountInUsd(undefined);
-        else if (fee && amount)
-            updateRequestedAmountInUsd(Number(amount), fee);
-    }, [amount, fromCurrency, fee, isFeeLoading]);
-    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "block font-semibold text-secondary-text text-xs mb-1 p-2", children: "Amount" }), _jsxs("div", { className: "flex w-full justify-between bg-secondary-700 rounded-lg", children: [_jsx("div", { className: "relative w-full", children: _jsx(NumericInput, { disabled: diasbled, placeholder: placeholder, min: minAllowedAmount, max: maxAllowedAmount || 0, step: isNaN(step) ? 0.01 : step, name: name, ref: amountRef, precision: fromCurrency?.precision, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: "text-primary-text pr-0 w-full", onChange: e => {
-                                /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
-                                updateRequestedAmountInUsd(parseFloat(e.target.value), fee);
-                            }, children: requestedAmountInUsd && Number(requestedAmountInUsd) > 0 && !isFocused ? (_jsxs("span", { className: "absolute text-xs right-1 bottom-[16px]", children: ["($", requestedAmountInUsd, ")"] })) : null }) }), from && to && fromCurrency && minAllowedAmount && maxAmountFromApi &&
-                        _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi })] })] }));
+        const input = amountRef.current;
+        const suffix = suffixRef.current;
+        if (!input || !suffix)
+            return;
+        const font = getFontFromElement(input);
+        const width = getTextWidth(actionValue?.toString() || amount || "0", font);
+        suffix.style.left = `${width + 16}px`;
+    }, [amount, requestedAmountInUsd, actionValue]);
+    const placeholder = '0';
+    const step = 1 / Math.pow(10, fromCurrency?.precision || 1);
+    const disabled = Boolean(fromExchange && !toCurrency);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: clsx("flex flex-col bg-secondary-500 space-y-0.5 relative w-full group", className, {
+                'focus-within:[&_.usd-suffix]:invisible': usdPosition === "right"
+            }), children: [_jsx(NumericInput, { disabled: disabled, placeholder: placeholder, step: isNaN(step) ? 0.01 : step, name: name, ref: amountRef, precision: fromCurrency?.precision, tempValue: actionValue, className: "w-full text-[28px] leading-[34px] rounded-xl text-primary-text focus:outline-none focus:border-none focus:ring-0 duration-300 ease-in-out !bg-secondary-500 !font-normal group-[.exchange-amount-field]:px-2.5 group-[.exchange-amount-field]:pb-2 group-[.exchange-amount-field]:pr-2 group-[.exchange-amount-field]:bg-secondary-300! pl-0", onChange: e => {
+                        /^[0-9]*[.,]?[0-9]*$/.test(e.target.value) && handleChange(e);
+                    } }), _jsx("div", { className: clsx("usd-suffix text-base leading-5 font-medium text-secondary-text pointer-events-none", {
+                        "absolute bottom-3": usdPosition === "right",
+                        "h-5": usdPosition !== "right",
+                        "text-secondary-text/45": !!actionValueInUsd
+                    }, "group-hover:block"), ref: suffixRef, children: `${actionValueInUsd ?? requestedAmountInUsd ?? '$0'}` })] }) }));
 });
 export default AmountField;
+function getTextWidth(text = '', font) {
+    if (typeof document === "undefined")
+        return 0;
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context)
+        return 0;
+    context.font = font;
+    return context.measureText(text).width;
+}
+function getFontFromElement(el) {
+    if (!el)
+        return '28px sans-serif';
+    const style = window.getComputedStyle(el);
+    return `${style.fontSize} ${style.fontFamily}`;
+}

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

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { Exchange } from "../../Models/Exchange";
+declare const CexPicker: FC;
+type SelectedNetworkDisplayProps = {
+    exchange?: Exchange;
+    placeholder: string;
+};
+export declare const SelectedExchangeDisplay: (props: SelectedNetworkDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectedEchangePlaceholder: ({ placeholder }: {
+    placeholder: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CexPicker;

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

@@ -0,0 +1,10 @@
+import { Partner } from "../../Models/Partner";
+import { useQuoteData } from "../../hooks/useFee";
+type Props = {
+    partner?: Partner;
+    fee: ReturnType<typeof useQuoteData>['quote'];
+    isFeeLoading: boolean;
+};
+declare const DestinationPicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SecondDestinationWalletPicker: () => import("react/jsx-runtime").JSX.Element;
+export default DestinationPicker;

package/dist/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 justify-between items-center h-7", children: [_jsx("label", { htmlFor: "To", className: "block col-span-5 font-normal text-secondary-text text-base leading-5 w-30", children: "Receive at" }), _jsx("div", { className: "col-span-4", children: _jsx(Address, { partner: partner, children: ({ destination, disabled, addressItem, connectedWallet, partner }) => _jsx(DestinationWalletPicker, { destination: destination, disabled: disabled, 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/components/Input/DestinationWalletPicker.d.ts

@@ -1,3 +1,3 @@
 import { AddressTriggerProps } from "./Address/AddressPicker";
-declare const Component: (props: AddressTriggerProps) => import("react/jsx-runtime").JSX.Element;
-export default Component;
+declare const DestinationWalletPicker: (props: AddressTriggerProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default DestinationWalletPicker;

package/dist/components/Input/DestinationWalletPicker.js

@@ -1,24 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import shortenAddress from "../utils/ShortenAddress";
-import { ChevronDown } from "lucide-react";
+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 "../Common/AddressIcon";
-const Component = (props) => {
-    const { addressItem, connectedWallet, partner } = props;
-    return _jsx(_Fragment, { children: addressItem &&
-            _jsx("div", { className: "flex items-center space-x-2 text-sm leading-4", children: _jsx(_Fragment, { children: _jsxs("div", { className: "rounded-lg bg-secondary-500 flex space-x-1 items-center py-0.5 pl-2 pr-1 cursor-pointer", children: [_jsx("div", { className: "inline-flex items-center relative p-0.5", children: _jsx(ResolvedIcon, { addressItem: addressItem, partner: partner, wallet: connectedWallet }) }), _jsx("div", { className: "text-primary-text", children: shortenAddress(addressItem.address) }), _jsx("div", { className: "w-5 h-5 items-center flex", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }) }) });
+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", 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("div", { className: "rounded-lg bg-secondary-700 pl-2 flex items-center space-x-2 text-sm leading-4", children: partner?.logo &&
-                _jsx("img", { alt: "Partner logo", className: 'rounded-md object-contain', src: partner.logo, width: "20", height: "20" }) });
+                _jsx(ImageWithFallback, { alt: "Partner logo", className: 'rounded-md object-contain', src: partner.logo, width: "20", height: "20" }) });
     }
     else if (addressItem.group === AddressGroup.ConnectedWallet && wallet) {
-        return _jsx(wallet.icon, { className: "w-5 h-5" });
+        return _jsx(wallet.icon, { className: "w-4 h-4" });
     }
     else {
-        return _jsx(AddressIcon, { className: "h-5 w-5 p-0.5", address: addressItem.address, size: 20 });
+        return _jsx(AddressIcon, { className: "h-4 w-4 p-0.5", address: addressItem.address, size: 20 });
     }
 };
-export default Component;
+export default DestinationWalletPicker;

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

@@ -1,11 +1,10 @@
 import { ChangeEvent, FC } from "react";
 type Input = {
+    tempValue?: number;
     label?: JSX.Element | JSX.Element[];
     pattern?: string;
     disabled?: boolean;
     placeholder: string;
-    min?: number;
-    max?: number;
     minLength?: number;
     maxLength?: number;
     precision?: number;

package/dist/components/Input/NumericInput.js

@@ -2,14 +2,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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, pattern, disabled, placeholder, min, max, minLength, maxLength, precision, step, name, className, children, onChange, onFocus, onBlur }, ref) {
+const NumericInput = forwardRef(function NumericInput({ label, pattern, 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: [_jsx("input", { ...field, pattern: pattern ? pattern : "^[0-9]*[.,]?[0-9]*$", inputMode: "decimal", autoComplete: "off", disabled: disabled, placeholder: placeholder, autoCorrect: "off", min: min, max: max, 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 shadow-sm border-secondary-500 placeholder:text-primary-text-placeholder 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 })] })] });
+                _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, pattern: pattern ? pattern : "^[0-9]*[.,]?[0-9]*$", 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) {

package/dist/components/Input/RouteIcon.js

@@ -4,9 +4,9 @@ import { Info, RouteOff } from "lucide-react";
 const RouteIcon = (props) => {
     const { isAvailable, routeNotFound, direction, type } = props;
     if (!isAvailable)
-        return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-1 top-0.5 z-50", children: _jsx(Info, { className: "!w-4 text-primary-text-placeholder hover:text-primary-text icoooooooooon" }) }) }), _jsx(TooltipContent, { children: _jsxs("p", { className: "max-w-72", children: [_jsx("span", { children: "Transfers" }), " ", _jsx("span", { children: direction }), " ", _jsx("span", { children: "this" }), " ", _jsx("span", { children: type }), " ", _jsx("span", { children: "are not available at the moment. Please try later." })] }) })] });
+        return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-1 top-0.5 z-50", children: _jsx(Info, { className: "w-4! text-primary-text-tertiary hover:text-primary-text" }) }) }), _jsx(TooltipContent, { children: _jsxs("p", { className: "max-w-72", children: [_jsx("span", { children: "Transfers" }), " ", _jsx("span", { children: direction }), " ", _jsx("span", { children: "this" }), " ", _jsx("span", { children: type }), " ", _jsx("span", { children: "are not available at the moment. Please try later." })] }) })] });
     if (routeNotFound)
-        return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-0.5 top-0.5 z-50", children: _jsx(RouteOff, { className: "!w-3 text-primary-text-placeholder hover:text-primary-text icoooooooooon" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "max-w-72", children: "Route unavailable" }) })] });
-    return null;
+        return _jsxs(Tooltip, { delayDuration: 200, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "absolute -left-0.5 top-0.5 z-50", children: _jsx(RouteOff, { className: "w-3! text-primary-text-tertiary hover:text-primary-text" }) }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "max-w-72", children: "Route unavailable" }) })] });
+    return undefined;
 };
 export default RouteIcon;

package/dist/components/Input/RoutePicker/Content.d.ts

@@ -0,0 +1,15 @@
+import { RowElement } from "../../../Models/Route";
+import { NetworkRoute, NetworkRouteToken } from "../../../Models/Network";
+import { SwapDirection } from "../../../components/Pages/Swap/Form/SwapFormValues";
+type ContentProps = {
+    onSelect: (route: NetworkRoute, token: NetworkRouteToken) => Promise<void> | void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    rowElements: RowElement[];
+    selectedRoute: string | undefined;
+    selectedToken: string | undefined;
+    direction: SwapDirection;
+    allbalancesLoaded?: boolean;
+};
+export declare const Content: ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedRoute, direction, onSelect, allbalancesLoaded }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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, toggleContent: toggleAccordionItem }) }, key);
+                                                }) })] }) }) }) })] }) })] });
+};

package/dist/components/Input/RoutePicker/RouteTokenSwitch.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const RouteTokenSwitch: FC;
+export default RouteTokenSwitch;

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { SwapDirection } from "../../../components/Pages/Swap/Form/SwapFormValues";
+declare const PickerWalletConnect: FC<{
+    direction: SwapDirection;
+}>;
+export default PickerWalletConnect;

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

@@ -0,0 +1,52 @@
+import { NetworkRoute, NetworkRouteToken } from "../../../Models/Network";
+import { GroupedTokenElement, RowElement } from "../../../Models/Route";
+import { SwapDirection } from "../../../components/Pages/Swap/Form/SwapFormValues";
+type TokenItemProps = {
+    route: NetworkRoute;
+    item: NetworkRouteToken;
+    type?: RowElement['type'];
+    selected: boolean;
+    direction: SwapDirection;
+    allbalancesLoaded?: boolean;
+};
+export declare const CurrencySelectItemDisplay: (props: TokenItemProps) => import("react/jsx-runtime").JSX.Element;
+type NetworkTokenItemProps = {
+    route: NetworkRoute;
+    item: NetworkRouteToken;
+    direction: SwapDirection;
+    type?: RowElement['type'];
+    allbalancesLoaded?: boolean;
+};
+export declare const NetworkTokenTitle: (props: NetworkTokenItemProps) => import("react/jsx-runtime").JSX.Element;
+type NetworkRouteItemProps = {
+    item: NetworkRoute;
+    selected: boolean;
+    direction: SwapDirection;
+    allbalancesLoaded?: boolean;
+    hideTokenImages?: boolean;
+};
+export declare const NetworkRouteSelectItemDisplay: (props: NetworkRouteItemProps) => import("react/jsx-runtime").JSX.Element;
+type SelectedCurrencyDisplayProps = {
+    value: {
+        logo: string;
+        symbol: string;
+    } | undefined;
+    placeholder: string;
+};
+export declare const GroupedTokenHeader: ({ item, direction, allbalancesLoaded, hideTokenImages }: {
+    item: GroupedTokenElement;
+    direction: SwapDirection;
+    allbalancesLoaded?: boolean;
+    hideTokenImages?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectedCurrencyDisplay: (props: SelectedCurrencyDisplayProps) => import("react/jsx-runtime").JSX.Element;
+type SelectedRouteDisplayProps = {
+    route?: NetworkRoute;
+    token?: NetworkRouteToken;
+    placeholder: string;
+};
+export declare const SelectedRouteDisplay: ({ route, token, placeholder }: SelectedRouteDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectedRoutePlaceholder: ({ placeholder }: {
+    placeholder: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};