@layerswap/widget 1.0.5 → 1.1.0

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

@@ -8,7 +8,7 @@ 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 }) => {
+export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToken, selectedRoute, direction, onSelect, partialPublished }) => {
     const parentRef = useRef(null);
     const [openValues, setOpenValues] = useState(selectedRoute ? [selectedRoute] : []);
     const { shouldFocus } = useSelectorState();
@@ -18,10 +18,26 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
     };
     const virtualizer = useVirtualizer({
         count: rowElements.length,
-        estimateSize: () => 50,
+        estimateSize: (index) => {
+            const item = rowElements[index];
+            const key = item?.route?.name || item?.symbol;
+            const isOpen = openValues.includes(key);
+            // Better size estimation based on open state
+            if (isOpen && (item.type === 'network' || item.type === 'grouped_token')) {
+                const tokenCount = item.type === 'network'
+                    ? item.route.tokens.length
+                    : item.items.length;
+                // Base header (52) + tokens (each ~52px) + padding
+                return 52 + (tokenCount * 52) + 20;
+            }
+            return 52;
+        },
         getScrollElement: () => parentRef.current,
         overscan: 15
     });
+    useEffect(() => {
+        virtualizer.measure();
+    }, [openValues]);
     const items = virtualizer.getVirtualItems();
     useEffect(() => {
         return () => setSearchQuery('');
@@ -40,6 +56,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/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

@@ -6,20 +6,20 @@ 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 { useSwapAccounts } from "../../../context/swapAccounts";
 import clsx from "clsx";
 import { formatUsd } from "../../../components/utils/formatUsdAmount";
 import { ExtendedAddress } from "../Address/AddressPicker/AddressWithIcon";
 import { getTotalBalanceInUSD } from "../../../helpers/balanceHelper";
 import { useMemo } from "react";
 export const CurrencySelectItemDisplay = (props) => {
-    const { item, route, direction, allbalancesLoaded, type } = props;
-    return _jsxs(SelectItem, { className: "group", children: [_jsx(SelectItem.Logo, { imgSrc: item.logo, altText: `${item.symbol} logo`, className: "rounded-full" }), _jsx(NetworkTokenTitle, { item: item, route: route, direction: direction, allbalancesLoaded: allbalancesLoaded, type: type })] });
+    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) : '';
@@ -27,28 +27,28 @@ export const NetworkTokenTitle = (props) => {
     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, {})) });
+                            _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: (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 })] })) : _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" })] }) })] }));
+    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, {})] })) : _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 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,7 +58,7 @@ 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;
@@ -70,9 +70,9 @@ 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: 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] }) }))] }))] })) : _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;

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,26 +1,25 @@
 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-[4px]" }), _jsx("span", { className: "bg-secondary-500 text-xs whitespace-nowrap h-2 my-1 w-20 rounded-sm" })] })] }), _jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [_jsx("div", { className: "text-primary-text text-lg leading-[22px] bg-secondary-500 h-3 my-1 w-16 ml-auto rounded-sm" }), _jsx("div", { className: "text-xs leading-4 bg-secondary-500 h-2 my-1 w-10 ml-auto rounded-sm" })] })] })] }));
+            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:
             return null;
     }

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-[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, { 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,15 +106,17 @@ 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
-    return (_jsxs("div", { className: "inline-flex items-center gap-1.5 justify-center w-full pt-2 bg-secondary-700", children: [_jsx("button", { type: "button", onClick: onClick, className: "underline hover:no-underline text-base text-center text-secondary-text cursor-pointer ", children: "Continue without a wallet" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx("div", { className: "text-xs text-secondary-text hover:text-primary-text rounded-full transition-colors duration-200 ", children: _jsx(CircleHelp, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { side: "top", className: "max-w-[250px] text-xs", children: _jsx("p", { children: "Get a deposit address, send your crypto from any external wallet or exchange, and we'll handle the rest." }) })] })] }));
+    return (_jsxs("div", { className: "inline-flex items-center max-sm:pb-2 gap-1.5 justify-center w-full pt-2 bg-secondary-700", children: [_jsx("button", { type: "button", onClick: onClick, className: "underline hover:no-underline text-base text-center text-secondary-text cursor-pointer ", children: "Continue without a wallet" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx("div", { className: "text-xs text-secondary-text hover:text-primary-text rounded-full transition-colors duration-200 ", children: _jsx(CircleHelp, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { side: "top", className: "max-w-[250px] text-xs", children: _jsx("p", { children: "Get a deposit address, send your crypto from any external wallet or exchange, and we'll handle the rest." }) })] })] }));
 };
 export default SourceWalletPicker;

package/dist/esm/components/Menu/index.js

@@ -26,8 +26,8 @@ const Comp = () => {
     const handleGoToStep = (step) => {
         goToStep(step);
     };
-    return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx("div", { className: "sm:-mr-2 -mr-0", children: _jsx(IconButton, { className: "inline-flex active:animate-press-down", onClick: () => setOpenTopModal(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(VaulDrawer, { modalId: "menuModal", show: openTopModal, setShow: handleModalOpenStateChange, header: _jsxs("div", { className: "inline-flex items-center", children: [goBack &&
-                                _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }), _jsx("h2", { children: currentStepName })] }), children: _jsx(VaulDrawer.Snap, { openFullHeight: true, id: "item-1", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => handleModalOpenStateChange(false) }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => goToStep(MenuStep.Campaigns, "back"), className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) }) })] }) });
+    return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx("div", { className: "sm:-mr-2 mr-0", children: _jsx(IconButton, { className: "inline-flex active:animate-press-down", onClick: () => setOpenTopModal(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(VaulDrawer, { modalId: "menuModal", show: openTopModal, setShow: handleModalOpenStateChange, header: _jsxs("div", { className: "inline-flex items-center", children: [goBack &&
+                                _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }), _jsx("h2", { children: currentStepName })] }), children: _jsx(VaulDrawer.Snap, { openFullHeight: true, className: "h-full pb-0!", id: "item-1", children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => handleModalOpenStateChange(false) }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => goToStep(MenuStep.Campaigns, "back"), className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) }) })] }) });
 };
 const LayerswapMenu = () => {
     return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));

package/dist/esm/components/Modal/vaulModal.js

@@ -10,7 +10,7 @@ import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsConte
 import { AnimatePresence, motion } from 'framer-motion';
 import { Drawer } from './vaul';
 import AppSettings from '../../lib/AppSettings';
-const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className }) => {
+const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className, modalId }) => {
     const { isMobileWithPortal: isMobile, isMobile: isMobileWithoutPortal } = useWindowDimensions();
     let [headerRef, { height }] = useMeasure();
     const { setHeaderHeight } = useSnapPoints();
@@ -81,18 +81,13 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
     return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
             if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
                 expandRef.current?.classList.add('hidden');
-        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobileWithoutPortal, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
-                        ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
-                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
+        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobileWithoutPortal, children: _jsxs(Drawer.Portal, { children: [isMobile ? (_jsx(Drawer.Close, { asChild: true, children: _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' }) })) : (_jsx(AnimatePresence, { children: show && (_jsx(Drawer.Close, { asChild: true, children: _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block pointer-events-auto', initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 } }) }, `backdrop-${modalId}`)) })), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
                         'border-none! rounded-none!': snap === 1,
-                        '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
+                        'fixed! sm:absolute!': AppSettings.ThemeData?.enablePortal == true,
                     }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobileWithoutPortal &&
                                     _jsx("div", { className: "flex justify-center w-full mt-2 mb-[6px]", children: _jsx(Drawer.Handle, { className: '!w-12 !bg-primary-text-tertiary' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-4 sm:pt-2 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold w-full", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { children: _jsx(IconButton, { className: 'inline-flex active:animate-press-down', icon: _jsx(X, { strokeWidth: 2 }) }) }) })] }), description &&
-                                    _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', {
-                                'overflow-y-auto h-full': snap === 1,
-                                'overflow-hidden': snap !== 1,
-                            }), id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
-                                        _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), _jsx(VaulFooter, { snapElement: snapElement })] })] })] }) }));
+                                    _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: 'flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
+                                        _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), isMobile && _jsx(VaulFooter, { snapElement: snapElement })] }), !isMobile && _jsx(VaulFooter, { snapElement: snapElement })] })] }) }));
 };
 const VaulFooter = ({ snapElement }) => {
     let [ref, { height }] = useMeasure();
@@ -100,10 +95,10 @@ const VaulFooter = ({ snapElement }) => {
     useEffect(() => {
         setFooterHeight(height || 0);
     }, [height]);
-    return (_jsx("div", { ref: ref, id: 'walletModalFooter', style: {
+    return _jsx("div", { ref: ref, id: 'walletModalFooter', style: {
             top: snapElement?.height !== 1 ? `${Number(snapElement?.height?.toString().replace('px', '')) - 50}px` : undefined,
             bottom: snapElement?.height === 1 ? '12px' : undefined
-        }, className: 'w-full fixed left-0 z-50' }));
+        }, className: 'w-full left-0 z-50 max-sm:absolute' });
 };
 const VaulDrawerSnap = (props) => {
     const { openFullHeight, ...domProps } = props;
@@ -141,8 +136,8 @@ const vaulStyles = `
 [data-vaul-drawer] {
     touch-action: none;
     will-change: transform;
-    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-    animation-duration: 0.5s;
+    transition: transform 0.1s cubic-bezier(0.32, 0.72, 0, 1);
+    animation-duration: 0.1s;
     animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 }
 [data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
@@ -158,7 +153,7 @@ const vaulStyles = `
     transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
 [data-vaul-overlay][data-vaul-snap-points='false'] {
-    animation-duration: 0.5s;
+    animation-duration: 0.1s;
     animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 }
 [data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
@@ -169,7 +164,7 @@ const vaulStyles = `
 }
 [data-vaul-overlay][data-vaul-snap-points='true'] {
     opacity: 0;
-    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    transition: opacity 0.1s cubic-bezier(0.32, 0.72, 0, 1);
 }
 [data-vaul-overlay][data-vaul-snap-points='true'] {
     opacity: 1;

package/dist/esm/components/Pages/Campaigns/Details/Leaderboard.js

@@ -9,13 +9,13 @@ import shortenAddress from "../../../../components/utils/ShortenAddress";
 import { truncateDecimals } from "../../../../components/utils/RoundDecimals";
 import AddressIcon from "../../../../components/Common/AddressIcon";
 import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
-import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../context/swapAccounts";
 import { useWallet } from "../../../../exports";
 import VaulDrawer from "../../../../components/Modal/vaulModal";
 const Component = ({ campaign }) => {
     const [openTopModal, setOpenTopModal] = useState(false);
     const selectedSourceAccount = useSelectedAccount("from", campaign.network?.name);
-    const { wallets } = useWallet(campaign.network, 'autofil');
+    const { wallets } = useWallet(campaign.network, 'autofill');
     const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
     const address = wallet?.address;
     const handleOpenTopModal = () => {

package/dist/esm/components/Pages/Campaigns/Details/Rewards.js

@@ -12,7 +12,7 @@ import useWallet from "../../../../hooks/useWallet";
 import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
 const Rewards = ({ campaign }) => {
     const network = campaign?.network;
-    const { provider } = useWallet(network, 'autofil');
+    const { provider } = useWallet(network, 'autofill');
     const wallet = provider?.activeWallet;
     const address = wallet?.address;
     const apiClient = new LayerSwapApiClient();
@@ -42,7 +42,7 @@ const Rewards = ({ campaign }) => {
 const ProgressComponent = ({ campaign, rewardsData }) => {
     if (campaign.max_payout_amount) {
         const weeklyEarned = rewardsData?.user_reward.period_pending_amount || 0;
-        return _jsx("div", { className: "bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx(BackgroundField, { header: _jsx("p", { children: "Weekly reward earned" }), withoutBorder: true, children: _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx(Progress, { value: weeklyEarned === Infinity ? 0 : weeklyEarned }), _jsxs("div", { className: "flex justify-between w-full font-semibold text-sm ", children: [_jsxs("div", { className: "text-primary", children: [_jsx("span", { className: "text-primary-text", children: weeklyEarned.toFixed(0) }), " ", _jsx("span", { children: "/" }), " ", campaign.max_payout_amount, " ", campaign.token.symbol] }), _jsx("div", { children: "Refreshes every 7 days" })] })] }) }) });
+        return _jsx("div", { className: "bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx(BackgroundField, { header: _jsx("p", { children: "Weekly reward earned" }), withoutBorder: true, children: _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx(Progress, { value: weeklyEarned === Infinity ? 0 : weeklyEarned }), _jsxs("div", { className: "flex justify-between w-full font-semibold text-sm ", children: [_jsxs("div", { className: "text-primary", children: [_jsx("span", { className: "text-primary-text", children: weeklyEarned.toFixed(0) }), " ", _jsx("span", { children: "/" }), " ", campaign.max_payout_amount, " ", campaign.token.symbol] }), _jsxs("div", { children: [_jsx("span", { children: "Refreshes every " }), " ", _jsx("span", { className: "font-semibold", children: campaign.reward_limit_period }), " ", _jsx("span", { children: " days" })] })] })] }) }) });
     }
     const DistributedAmount = ((campaign.distributed_amount / campaign.total_budget) * 100);
     const totalBudget = campaign.total_budget;

package/dist/esm/components/Pages/Campaigns/Details/index.js

@@ -14,13 +14,12 @@ import SpinIcon from "../../../../components/Icons/spinIcon";
 import useWallet from "../../../../hooks/useWallet";
 import { useConnectModal } from "../../../../components/Wallet/WalletModal";
 import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
-import { LayerswapProvider } from "../../../../context/LayerswapProvider";
 export const CampaignDetailsComponent = ({ campaignName }) => {
     const apiClient = new LayerSwapApiClient();
     const { data: campaignsData, isLoading } = useSWR('/campaigns', apiClient.fetcher);
     const campaign = campaignsData?.data?.find(c => c.name === campaignName);
     const network = campaign?.network;
-    const { provider } = useWallet(network, 'autofil');
+    const { provider } = useWallet(network, 'autofill');
     const { connect } = useConnectModal();
     const handleConnect = useCallback(async () => {
         await connect(provider);
@@ -46,5 +45,5 @@ const BriefInformation = ({ campaign }) => _jsx("p", { className: "text-secondar
 const Loading = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) });
 const NotFound = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsxs("div", { className: "h-[364px] flex flex-col items-center justify-center space-y-4", children: [_jsx(Gift, { className: "h-20 w-20 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "Campaign not found" }), _jsx(LinkWrapper, { className: "text-xs underline hover:no-underline", href: '/campaigns', children: "See all campaigns" })] }) }) });
 export const CampaignDetails = (props) => {
-    return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { goBack: props.goBack, children: _jsx(CampaignDetailsComponent, { campaignName: props.campaignName }) }) }));
+    return (_jsx(Widget, { goBack: props.goBack, children: _jsx(CampaignDetailsComponent, { campaignName: props.campaignName }) }));
 };