@layerswap/widget 1.0.6 → 1.1.1

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

@@ -38,10 +38,10 @@ const AmountField = forwardRef(function AmountField({ usdPosition = "bottom", ac
     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] pt-2 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 => {
+            }), 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! group-[.exchange-amount-field]:pt-2! 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",
+                    } }), _jsx("div", { className: clsx("usd-suffix text-base group-[.exchange-amount-field]:text-sm leading-5 font-medium text-secondary-text pointer-events-none", {
+                        "absolute bottom-[11px]": usdPosition === "right",
                         "h-5": usdPosition !== "right",
                         "text-secondary-text/45": !!actionValueInUsd
                     }, "group-hover:block"), ref: suffixRef, children: `${actionValueInUsd ?? requestedAmountInUsd ?? '$0'}` })] }) }));

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

@@ -11,12 +11,12 @@ import { useSwapDataState } from "../../context/swap";
 const DestinationPicker = (props) => {
     const { partner } = props;
     const { values } = useFormikContext();
-    const { fromAsset: fromCurrency, toAsset: toCurrency } = values;
+    const { 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" }) })] }) })] });
+    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, { 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" })] });

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

@@ -8,11 +8,25 @@ 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 }) => {
+import clsx from "clsx";
+export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedRoute, direction, onSelect, partialPublished }) => {
     const parentRef = useRef(null);
     const [openValues, setOpenValues] = useState(selectedRoute ? [selectedRoute] : []);
     const { shouldFocus } = useSelectorState();
     const { wallets } = useWallet();
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeout = useRef(null);
+    const handleScroll = () => {
+        setIsScrolling(true);
+        if (scrollTimeout.current)
+            clearTimeout(scrollTimeout.current);
+        scrollTimeout.current = setTimeout(() => {
+            setIsScrolling(false);
+        }, 1000);
+    };
+    useEffect(() => {
+        return () => clearTimeout(scrollTimeout.current);
+    }, []);
     const toggleAccordionItem = (value) => {
         setOpenValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
     };
@@ -42,7 +56,9 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
     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 &&
+    return _jsxs("div", { className: "overflow-y-auto overflow-x-hidden flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, onScroll: handleScroll, className: clsx("select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! pr-0.5 scrollbar-thumb:bg-transparent h-full", {
+                        "styled-scroll!": isScrolling
+                    }), 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%',
@@ -56,6 +72,6 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
                                                 }, 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);
+                                                    return _jsx("div", { className: "py-1 box-border w-full overflow-hidden select-none", "data-index": virtualRow.index, ref: virtualizer.measureElement, children: _jsx(Row, { index: virtualRow.index, 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

@@ -1,20 +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";
+import GlobeIcon from "../../../components/Icons/GlobeIcon";
 const switchValues = [
-    { value: false, id: 'network', label: "Group by Network", icon: Globe },
+    { value: false, id: 'network', label: "Group by Network", icon: GlobeIcon },
     { 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,
+    return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "relative flex items-center bg-secondary-500 rounded-xl 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-lg px-4 py-1 relative", children: [activeTab === item.id && (_jsx(motion.span, { layoutId: "bubble", className: "absolute inset-0 z-10 rounded-lg 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

@@ -10,13 +10,13 @@ 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 { useSwapAccounts, useSelectSwapAccount } from "../../../context/swapAccounts";
 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 swapAccounts = useSwapAccounts(direction);
+    const selectSwapAccount = useSelectSwapAccount(direction);
     const { connect } = useConnectModal();
     const connectWallet = async () => {
         const result = await connect();
@@ -31,14 +31,14 @@ const PickerWalletConnect = ({ direction }) => {
         const { walletId, address, providerName } = props;
         if (direction == 'to' && isValidAddress(address, values.to))
             setFieldValue(`destination_address`, address);
-        selectBalanceAccount({
+        selectSwapAccount({
             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(_Fragment, { children: [_jsx(AccountsPickerButton, { accounts: swapAccounts, 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" })] }) }), swapAccounts.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));
                         })] }) })] });
 };

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

@@ -1,54 +1,55 @@
 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 { ChevronDown } 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 { useSwapAccounts } from "../../../context/swapAccounts";
 import { formatUsd } from "../../../components/utils/formatUsdAmount";
-import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
 import { getTotalBalanceInUSD } from "../../../helpers/balanceHelper";
 import { useMemo } from "react";
+import { isNewListed, NewBadge } from "../../../lib/isNewListed";
+import { TokenInfoIcon, TokenTitleWithBalance } from "./TokenTitleDetails";
 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 })] });
+    const { item, route, direction, 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, 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 { item, route, direction, type } = props;
+    const swapAccounts = useSwapAccounts(direction);
+    const selectedAccount = swapAccounts?.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-base", { '!text-lg !leading-[22px]': type === 'suggested_token' }), children: formatUsd(usdAmount) })), _jsx("div", { className: 'text-xs leading-4', children: formatted_balance_amount })] })) : !allbalancesLoaded ? (_jsx("span", { className: "px-0.5", children: "-" })) : (_jsx(_Fragment, {})) });
+    const isNewlyListed = isNewListed(item?.listing_date);
+    return _jsx(SelectItem.DetailedTitle, { title: _jsx(TokenTitleWithBalance, { item: item, route: route, tokenbalance: tokenbalance, usdAmount: usdAmount, isNewlyListed: isNewlyListed }), secondaryImageAlt: route.display_name, secondary: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "truncate", children: route.display_name }), _jsx(TokenInfoIcon, { item: item, route: route, className: "xs:hidden transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover shrink-0" })] }), secondaryLogoSrc: route.logo, children: (tokenbalance && Number(tokenbalance?.amount) > 0) ? (_jsx("span", { className: "text-sm text-secondary-text text-right my-auto font-medium block", children: _jsx("div", { className: 'text-xs leading-4 truncate', children: formatted_balance_amount }) })) : _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 { item, direction, hideTokenImages } = props;
+    const swapAccounts = useSwapAccounts(direction);
+    const selectedAccount = swapAccounts?.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 hasLoadedBalances = 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" })] }) })] }));
+    const haveNewlyListedTokens = useMemo(() => item.tokens?.some(t => isNewListed(t.listing_date)), [item]);
+    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: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: item.display_name }), haveNewlyListedTokens &&
+                                        _jsx(NewBadge, {})] }) }), 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, {})] })) : _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);
+export const GroupedTokenHeader = ({ item, direction, hideTokenImages }) => {
+    const swapAccounts = useSwapAccounts(direction);
     const tokens = item.items;
+    const haveNewlyListedTokens = useMemo(() => tokens.some(t => isNewListed(t.route.token.listing_date)), [tokens]);
     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 address = swapAccounts.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;
@@ -58,10 +59,9 @@ export const GroupedTokenHeader = ({ item, direction, allbalancesLoaded, hideTok
     })
         .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 address = swapAccounts.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);
@@ -70,9 +70,10 @@ export const GroupedTokenHeader = ({ item, direction, allbalancesLoaded, hideTok
         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 hasLoadedBalances = 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" })] }) })] }));
+    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: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: mainToken.symbol }), haveNewlyListedTokens &&
+                                        _jsx(NewBadge, {})] }) }), 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] }) }))] }))] })) : _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;
@@ -83,6 +84,6 @@ export const SelectedCurrencyDisplay = (props) => {
 };
 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" }) })] }));
+    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 h-7 w-7", children: [_jsx("div", { className: "h-6 w-6", children: _jsx(ImageWithFallback, { src: token.logo, alt: "Token Logo", height: "24", width: "24", loading: "eager", fetchPriority: "high", className: "rounded-full object-contain" }) }), _jsx("div", { className: "absolute left-[13px] top-3.5 h-4 w-4 rounded border border-secondary-500 bg-secondary-400 overflow-hidden", children: _jsx(ImageWithFallback, { src: route.logo, alt: "Network Logo", height: "14", width: "14", loading: "eager", fetchPriority: "high", className: "object-contain" }) })] }), _jsxs("div", { className: "ml-2 flex flex-col grow text-primary-text overflow-hidden min-w-0 max-w-3/4 group-[.exchange-picker]:max-w-full xs:max-w-[60px]", children: [_jsx("p", { className: "text-base leading-5 font-medium", children: token.symbol }), _jsx("p", { className: "text-secondary-text grow text-sm font-normal leading-4 truncate whitespace-nowrap", children: route.display_name })] })] })) : (_jsx(SelectedRoutePlaceholder, { placeholder: placeholder })), _jsx("span", { className: "px-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

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

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

@@ -6,7 +6,7 @@ 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, }) => {
+export const CollapsibleRow = ({ item, index, toggleContent, direction, onSelect, selectedRoute, selectedToken, searchQuery, openValues, scrollContainerRef }) => {
     const groupName = item.type === "grouped_token" ? item.symbol : item.route.name;
     const headerId = `${groupName}-header`;
     const childrenList = useMemo(() => {
@@ -34,8 +34,8 @@ export const CollapsibleRow = ({ item, toggleContent, direction, onSelect, selec
         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) => {
+        _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, hideTokenImages: isOpen }) }) }), _jsx(StickyHeader, { item: item, direction: direction, scrollContainer: scrollContainerRef.current, open: isOpen, headerRef: headerRef, contentRef: contentRef, 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}`));
+                                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, { item: token, selected: isSelected, route: route, direction: direction }) }, `${groupName}-${index}`));
                             }) }) }) })] })));
 };

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

@@ -2,7 +2,7 @@ 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, }) {
+export function StickyHeader({ item, direction, scrollContainer, open, headerRef, contentRef, childrenCount, onClick, isSticky, setSticky, }) {
     useEffect(() => {
         if (!open) {
             setSticky(false);
@@ -24,5 +24,5 @@ export function StickyHeader({ item, direction, scrollContainer, open, headerRef
     }, [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 }) }) }));
+    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, hideTokenImages: open }) }) }));
 }

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBalanceStore } from "../../../../stores/balanceStore";
+import { motion, useInView } from "framer-motion";
+import { useEffect, useMemo, useRef, useState } from "react";
+const randomWords = [
+    'Marinading',
+    "Fermenting",
+    "Steeping",
+    "Infusing",
+    "Polishing",
+    "Spicing",
+    "Compiling",
+    "Brewing",
+    "Spinning",
+    "Booting",
+    "Rendering",
+    "Synthesizing",
+    "Inferring",
+    "Neuralizing",
+    "Augmenting",
+    "Finalizing",
+    "Cooking"
+];
+const SuggestionsHeader = () => {
+    const isLoading = useBalanceStore(s => s.sortingDataIsLoading);
+    const partialPublished = useBalanceStore(s => s.partialPublished);
+    const suggestionsTitle = useMemo(() => isLoading ? `${randomWords[Math.floor(Math.random() * randomWords.length)]}` : '', [isLoading, partialPublished]);
+    const [typingComplete, setTypingComplete] = useState(!isLoading);
+    const [textToType, setTextToType] = useState(suggestionsTitle);
+    useEffect(() => {
+        if (isLoading) {
+            setTypingComplete(false);
+            setTextToType(suggestionsTitle);
+        }
+    }, [isLoading, suggestionsTitle]);
+    if (!isLoading && typingComplete) {
+        return _jsx("div", { className: "text-primary-text-tertiary text-base font-normal leading-5 pl-1 sticky top-0 z-50 flex items-baseline", children: "Suggestions" });
+    }
+    return _jsx(TypingEffect, { text: `${textToType} Suggestions`, onComplete: () => setTypingComplete(true) });
+};
+export function TypingEffect({ text = 'Typing Effect', onComplete }) {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true });
+    useEffect(() => {
+        if (isInView && onComplete) {
+            const totalDuration = (text.length - 1) * 0.1 + 0.05;
+            const timeout = setTimeout(() => {
+                onComplete();
+            }, totalDuration * 1000);
+            return () => clearTimeout(timeout);
+        }
+    }, [isInView, text.length, onComplete]);
+    return (_jsx("div", { ref: ref, className: "text-transparent text-base font-normal leading-5 pl-1  top-0 z-50  items-baseline bg-[linear-gradient(120deg,var(--color-primary-text-tertiary)_40%,var(--color-primary-text),var(--color-primary-text-tertiary)_60%)]\n         bg-[length:200%_100%]\n         bg-clip-text\n         animate-shine", children: text.split('').map((letter, index) => (_jsx(motion.span, { initial: { opacity: 0 }, animate: isInView ? { opacity: 1 } : {}, transition: { duration: 0.01, delay: index * 0.08 }, children: letter }, index))) }, text));
+}
+export default SuggestionsHeader;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SuggestionsHeader from "./SuggestionsHeader";
+import RouteTokenSwitch from "../RouteTokenSwitch";
+const TitleRow = ({ item }) => {
+    if (item.text.toLowerCase().includes("suggestions")) {
+        return _jsx(SuggestionsHeader, {});
+    }
+    return (_jsxs("div", { className: "text-primary-text-tertiary text-base font-normal leading-5 pl-1 sticky top-0 z-50 flex items-baseline", children: [_jsx("p", { children: item.text }), item.text.toLowerCase().includes("all") &&
+                _jsx("div", { className: "relative ml-auto", children: _jsx(RouteTokenSwitch, {}) })] }));
+};
+export default TitleRow;

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

@@ -1,24 +1,23 @@
 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, }) {
+import TitleRow from "./TitleRow";
+export default function Row({ item, direction, selectedRoute, selectedToken, searchQuery, toggleContent, onSelect, openValues, scrollContainerRef, index, }) {
     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 }));
+            return (_jsx(CollapsibleRow, { index: index, item: item, direction: direction, selectedRoute: selectedRoute, selectedToken: selectedToken, searchQuery: searchQuery, toggleContent: toggleContent, onSelect: onSelect, openValues: openValues, scrollContainerRef: scrollContainerRef }));
         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 }) }));
+            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, { 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, {}) })] }));
+            return _jsx(TitleRow, { item: item });
         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-sm" }), _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:

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
+import { formatUsd } from "../../../components/utils/formatUsdAmount";
+import { NewBadge } from "../../../lib/isNewListed";
+export const TokenInfoIcon = ({ item, route, className, iconOnly = false }) => (_jsx("div", { className: className, children: _jsx(ExtendedAddress, { network: item.contract ? route : undefined, isForCurrency: true, showDetails: true, address: item.contract || `${route.display_name} native coin`, logo: item.logo, title: item.symbol, description: item.display_asset, isNativeToken: !item.contract, children: _jsxs("div", { className: `flex items-center gap-1 text-secondary-text cursor-pointer hover:text-primary-text ${iconOnly ? '' : 'text-xs'}`, children: [!iconOnly && (_jsxs("p", { className: "max-w-[90px] truncate", children: [_jsx("span", { children: "\u2022" }), " ", _jsx("span", { children: item.display_asset || item.symbol })] })), _jsx(Info, { className: iconOnly ? "h-4 w-4" : "h-3 w-3" })] }) }) }));
+export const TokenTitleWithBalance = ({ item, route, tokenbalance, usdAmount, isNewlyListed }) => {
+    return (_jsxs("div", { className: "flex items-center gap-2 justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { children: item.symbol }), isNewlyListed &&
+                        _jsx(NewBadge, {}), _jsx(TokenInfoIcon, { item: item, route: route, iconOnly: true, className: "hidden xs:block transition-all duration-300 opacity-0 group-hover:opacity-100 group-hover:delay-400 click-delay-on-hover" })] }), (tokenbalance && Number(tokenbalance?.amount) > 0 && Number(usdAmount) > 0) && (_jsx("div", { className: "text-primary-text text-lg leading-[22px] font-medium", children: formatUsd(usdAmount) }))] }));
+};

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

@@ -13,7 +13,7 @@ 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 { allRoutes, isLoading, routeElements, selectedRoute, selectedToken } = useFormRoutes({ direction, values }, searchQuery);
     const currencyFieldName = direction === 'from' ? 'fromAsset' : 'toAsset';
     useEffect(() => {
         const updateValues = async () => {
@@ -50,7 +50,7 @@ const RoutePicker = ({ direction, isExchange = false, className }) => {
         });
     }, [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 &&
+    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-1.5 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, { 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/SourceWalletPicker.js

@@ -12,12 +12,12 @@ import WalletsList from "../../components/Wallet/WalletComponents/WalletsList";
 import { Popover, PopoverContent, PopoverTrigger } from "../../components/shadcn/popover";
 import FilledCheck from "../../components/Icons/FilledCheck";
 import clsx from "clsx";
-import { useSelectedAccount, useUpdateBalanceAccount } from "../../context/balanceAccounts";
+import { useSelectedAccount, useSelectSwapAccount } from "../../context/swapAccounts";
 const SourceWalletPicker = () => {
     const [openModal, setOpenModal] = useState(false);
     const { values, setFieldValue } = useFormikContext();
     const source_token = values.fromAsset;
-    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const selectSourceAccount = useSelectSwapAccount("from");
     const { provider } = useWallet(values.from, "withdrawal");
     const selectedSourceAccount = useSelectedAccount("from", values.from?.name);
     const { selectedConnector } = useConnectModal();
@@ -61,7 +61,7 @@ export const FormSourceWalletButton = () => {
     const walletNetwork = values.fromExchange ? undefined : values.from;
     const { provider } = useWallet(walletNetwork, 'withdrawal');
     const { isWalletModalOpen, cancel, selectedConnector, connect } = useConnectModal();
-    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const selectSourceAccount = useSelectSwapAccount("from");
     const handleWalletChange = () => {
         setOpenModal(true);
     };
@@ -106,12 +106,14 @@ export const FormSourceWalletButton = () => {
 };
 const Connect = ({ connectFn, setMountWalletPortal }) => {
     const { connect } = useConnectModal();
+    const { providers } = useWallet();
+    const isProvidersReady = providers.every(p => typeof p.ready === 'boolean' ? p.ready : true);
     const connectWallet = async () => {
         setMountWalletPortal && setMountWalletPortal(true);
         await connect();
         setMountWalletPortal && setMountWalletPortal(false);
     };
-    return _jsx(SubmitButton, { onClick: () => connectFn ? connectFn() : connectWallet(), type: "button", icon: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: 2 }), children: "Connect a wallet" });
+    return _jsx(SubmitButton, { onClick: () => connectFn ? connectFn() : connectWallet(), type: "button", icon: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: 2 }), isDisabled: !isProvidersReady, children: "Connect a wallet" });
 };
 const ContinueWithoutWallet = ({ onClick }) => {
     //TODO: bg-secondary-700 is a hotfix, should refactor and fix sticky footer for VaulDrawer