@layerswap/widget 1.0.6 → 1.1.0

package/dist/esm/Models/LayerSwapSettings.js

@@ -1,3 +1,2 @@
 export class LayerSwapSettings {
 }
-;

package/dist/esm/Models/Theme.js

@@ -209,5 +209,44 @@ export const THEME_COLORS = {
             '900': '0, 0, 0',
             'text': '182, 182, 182',
         },
+    },
+    "immutablePlay": {
+        tertiary: '182, 182, 182',
+        buttonTextColor: '19, 19, 19',
+        logo: '187, 187, 187',
+        header: {
+            hideMenu: true,
+            hideTabs: true,
+            hideWallets: true,
+        },
+        cardBackgroundStyle: {
+            backgroundColor: 'transparent',
+        },
+        primary: {
+            DEFAULT: '243, 243, 243',
+            '100': '255, 255, 255',
+            '200': '255, 255, 255',
+            '300': '255, 255, 255',
+            '400': '255, 255, 255',
+            '500': '243, 243, 243',
+            '600': '215, 215, 215',
+            '700': '187, 187, 187',
+            '800': '159, 159, 159',
+            '900': '131, 131, 131',
+            'text': '243, 243, 243',
+        },
+        secondary: {
+            DEFAULT: '37, 37, 37',
+            '100': '119, 119, 119',
+            '200': '98, 98, 98',
+            '300': '78, 78, 78',
+            '400': '57, 57, 57',
+            '500': '37, 37, 37',
+            '600': '13, 13, 13',
+            '700': '13, 13, 13',
+            '800': '13, 13, 13',
+            '900': '0, 0, 0',
+            'text': '182, 182, 182',
+        },
     }
 };

package/dist/esm/components/Buttons/submitButton.js

@@ -13,9 +13,10 @@ const SubmitButton = ({ isDisabled, isSubmitting, icon, children, type, onClick,
     return (_jsxs("button", { disabled: isDisabled || isSubmitting, type: type, onClick: onClick, style: style, className: clsx('enabled:active:animate-press-down text-primary focus:outline-none focus:ring-0 items-center space-x-1 disabled:bg-secondary-300 disabled:text-secondary-text/50 disabled:cursor-not-allowed relative w-full flex justify-center font-medium rounded-xl transform hover:brightness-125 transition duration-200 ease-in-out', {
             className,
             'text-primary-buttonTextColor bg-primary-500': buttonStyle === 'filled',
+            'text-primary-text bg-secondary-300 hover:bg-secondary-400': buttonStyle === 'secondary',
             'py-4 px-4': size === 'large',
             'py-3 px-2 md:px-3': size === 'medium',
-            'py-1.5 px-1.5': size === 'small',
+            'py-2.5 px-2.5 text-sm': size === 'small',
         }), children: [_jsxs("span", { className: `${button_align === "right" ? 'order-last' : 'order-first'} ${text_align === 'center' ? "absolute left-0 inset-y-0 flex items-center pl-3" : "relative"}`, children: [(!isDisabled && !isSubmitting) && icon, isSubmitting ?
                         _jsx(SpinIcon, { className: "animate-spin h-5 w-5" })
                         : null] }), _jsx("span", { className: `grow ${text_align === 'left' ? 'text-left' : 'text-center'}`, children: children })] }));

package/dist/esm/components/Common/ConnectWalletButton.js

@@ -7,16 +7,22 @@ import { classNames } from "../../components/utils/classNames";
 const ConnectWalletButton = ({ provider, onConnect, descriptionText, ...rest }) => {
     const [isLoading, setIsLoading] = useState(false);
     const { connect } = useConnectModal();
+    const isProviderReady = typeof provider?.ready === 'boolean' ? provider.ready : true;
     const handleConnect = async () => {
+        if (!isProviderReady)
+            return;
         setIsLoading(true);
         const result = await connect(provider);
         if (onConnect && result)
             onConnect(result);
         setIsLoading(false);
     };
-    return _jsx("button", { ...rest, type: "button", onClick: handleConnect, className: classNames(`py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${isLoading && 'cursor-progress opacity-80'}`, rest.className), children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider?.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: descriptionText ?? 'Connect your wallet to browse and select from your addresses' }), _jsx("div", { className: "bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold", children: isLoading ?
-                                _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })
+    return _jsx("button", { ...rest, type: "button", onClick: handleConnect, disabled: !isProviderReady || rest.disabled, className: classNames(`py-5 px-6 bg-secondary-500 hover:bg-secondary-400 transition-colors duration-200 rounded-xl ${(isLoading || !isProviderReady) && 'cursor-progress opacity-80'} disabled:opacity-50 disabled:cursor-not-allowed`, rest.className), children: _jsxs("div", { className: "flex flex-row justify-between gap-9 items-stretch", children: [_jsx(ResolveConnectorIcon, { connector: provider?.name, iconClassName: "w-10 h-10 p-0.5 rounded-lg bg-secondary-800 border border-secondary-400", className: "grid grid-cols-2 gap-1 min-w-fit" }), _jsxs("div", { className: "h-full space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-secondary-text text-start", children: descriptionText ?? 'Connect your wallet to browse and select from your addresses' }), _jsx("div", { className: "bg-primary-700/30 border-none text-primary! py-2 rounded-lg text-base font-semibold", children: !isProviderReady ?
+                                _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Initializing..." })] })
                                 :
-                                    _jsx(_Fragment, { children: "Connect Now" }) })] })] }) });
+                                    isLoading ?
+                                        _jsxs("div", { className: "flex items-center gap-1 justify-center", children: [_jsx(RefreshCw, { className: "h-3 w-auto animate-spin" }), _jsx("span", { className: "ml-1", children: "Connecting..." })] })
+                                        :
+                                            _jsx(_Fragment, { children: "Connect Now" }) })] })] }) });
 };
 export default ConnectWalletButton;

package/dist/esm/components/Common/CountDownTimer.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { SwapStatus } from "../../Models/SwapStatus";
 import { TransactionType } from "../../lib/apiClients/layerSwapApiClient";
-// import posthog from "posthog-js";
 const CountdownTimer = ({ initialTime, swapDetails, onThresholdChange }) => {
     const [elapsedTimer, setElapsedTimer] = useState(0);
     const [thresholdElapsed, setThresholdElapsed] = useState(false);

package/dist/esm/components/Common/WarningMessage.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertOctagon, Scroll } from "lucide-react";
+import { Scroll } from "lucide-react";
+import InfoIcon from "../../components/Icons/InfoIcon";
+import { ICON_CLASSES_WARNING } from "../../components/Pages/Swap/Form/SecondaryComponents/validationError/constants";
 function constructIcons(messageType) {
     let iconStyle;
     switch (messageType) {
         case 'warning':
-            iconStyle = _jsx(AlertOctagon, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });
+            iconStyle = _jsx(InfoIcon, { className: ICON_CLASSES_WARNING });
             break;
         case 'informing':
             iconStyle = _jsx(Scroll, { className: "sm:h-5 h-4 text-primary-text inline sm:block" });

package/dist/esm/components/Common/guideLink.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import SecondaryButton from "../Buttons/secondaryButton";
-import { DocIframe } from "./docInIframe";
-import Modal from "../Modal/modal";
 export default function GuideLink({ userGuideUrl, text, button, buttonClassNames }) {
     const [showGuide, setShowGuide] = useState(false);
-    return (_jsxs(_Fragment, { children: [button ?
-                _jsx(SecondaryButton, { onClick: () => setShowGuide(true), className: buttonClassNames, children: button })
-                :
-                    _jsxs("span", { className: 'text-primary cursor-pointer hover:text-primary-400', onClick: () => setShowGuide(true), children: ["\u00A0", _jsx("span", { children: text })] }), _jsx(Modal, { className: "bg-[#181c1f]", height: "full", header: text || button, show: showGuide, setShow: setShowGuide, modalId: "guide", children: _jsx(DocIframe, { onConfirm: () => setShowGuide(false), URl: userGuideUrl }) })] }));
+    return (_jsx(_Fragment, { children: button ?
+            _jsx(SecondaryButton, { onClick: () => setShowGuide(true), className: buttonClassNames, children: button })
+            :
+                _jsxs("a", { target: "_blank", href: userGuideUrl, className: 'text-primary cursor-pointer hover:text-primary-400', children: ["\u00A0", _jsx("span", { children: text })] }) }));
 }

package/dist/esm/components/ErrorFallback.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useIntercom } from "react-use-intercom";
 import { Home, RotateCcw } from "lucide-react";
-// import posthog from "posthog-js";
 import MessageComponent from "./Common/MessageComponent";
 import NotFoundIcon from "./Icons/NotFoundIcon";
 import SubmitButton from "./Buttons/submitButton";
+import { ErrorHandler } from "../lib/ErrorHandler";
 export default function ErrorFallback({ error, resetErrorBoundary }) {
     const { boot, show } = useIntercom();
-    // useEffect(() => {
-    //     posthog.capture('$exception', {
-    //         name: error?.name,
-    //         $layerswap_exception_type: "Error Fallback",
-    //         message: error?.message,
-    //         where: 'ErrorFallback',
-    //         severity: 'error',
-    //     });
-    // }, [])
+    useEffect(() => {
+        ErrorHandler({
+            type: "ErrorFallback",
+            message: error.message,
+            name: error.name,
+            stack: error.stack,
+            cause: error.cause
+        });
+    }, [error]);
     const startIntercom = useCallback(() => {
         boot();
         show();

package/dist/esm/components/HeaderWithMenu.js

@@ -13,7 +13,7 @@ function HeaderWithMenu({ goBack, contextualMenu }) {
         LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['testnet'];
     const headerConfigs = AppSettings.ThemeData?.header;
     return (_jsxs("div", { className: "items-center justify-between sm:flex sm:items-center grid grid-cols-5 w-full sm:grid-cols-none sm:grid-none mt-2 pb-2 px-4", children: [_jsx("div", { className: "self-center col-start-1 md:col-start-2 md:col-span-3 justify-self-start md:justify-self-center flex items-center gap-2", children: goBack ?
-                    _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2 inline-flex", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) })
+                    _jsx("div", { className: "ml-0", children: _jsx(IconButton, { onClick: goBack, "aria-label": "Go back", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }) })
                     :
                         headerConfigs?.hideTabs ? null :
                             AppSettings.ThemeData?.enableWideVersion == true ?

package/dist/esm/components/Icons/Wallets/Xverse.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Xverse = (props) => _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "300", height: "300", viewBox: "0 0 300 300", fill: "none", ...props, children: [_jsx("rect", { width: "300", height: "300", fill: "#0F0F0F" }), _jsx("path", { d: "M266 265.11V221.791C266 220.073 265.329 218.435 264.132 217.218L82.9028 32.8997C81.7061 31.6825 80.0952 31 78.4064 31H35.8141C33.7113 31 32 32.7405 32 34.8791V75.1258C32 76.8435 32.6711 78.4815 33.8679 79.6987L98.9197 145.859C100.407 147.372 100.407 149.829 98.9197 151.342L33.1185 218.264C32.4027 218.992 32 219.982 32 221.006V265.11C32 267.246 33.7113 268.989 35.8141 268.989H106.984C109.087 268.989 110.798 267.246 110.798 265.11V239.127C110.798 238.103 111.201 237.114 111.917 236.386L147.216 200.484C148.704 198.971 151.12 198.971 152.608 200.484L218.107 267.1C219.303 268.317 220.914 269 222.603 269H262.175C264.278 269 265.989 267.258 265.989 265.121L266 265.11Z", fill: "white" }), _jsx("path", { d: "M170.853 88.6326H206.533C208.648 88.6326 210.372 90.3964 210.372 92.5611V129.062C210.372 132.567 214.515 134.32 216.933 131.834L265.879 81.6807C266.595 80.9475 267 79.9512 267 78.9089V34.9857C267 32.8211 265.285 31.0573 263.159 31.0573L219.586 31C218.568 31 217.594 31.4123 216.866 32.1453L168.132 81.9211C165.714 84.395 167.427 88.6326 170.842 88.6326H170.853Z", fill: "#EE7A30" })] });
+export default Xverse;

package/dist/esm/components/Icons/Wallets/index.js

@@ -22,3 +22,4 @@ export { default as BraavosIcon } from "./Braavos";
 export { default as ArgentXIcon } from "./ArgentX";
 export { default as FueletIcon } from "./Fuelet";
 export { default as KeplrIcon } from "./Keplr";
+export { default as XverseIcon } from "./Xverse";

package/dist/esm/components/Input/Address/AddressPicker/index.js

@@ -10,7 +10,7 @@ import AddressBook from "./AddressBook";
 import AddressButton from "./AddressButton";
 import { useInitialSettings } from "../../../../context/settings";
 import ConnectedWallets from "./ConnectedWallets";
-import { useSelectedAccount, useUpdateBalanceAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount, useSelectSwapAccount } from "../../../../context/swapAccounts";
 import VaulDrawer from "../../../../components/Modal/vaulModal";
 export var AddressGroup;
 (function (AddressGroup) {
@@ -22,14 +22,15 @@ export var AddressGroup;
 const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAddressModal, name, canFocus, close, address_book, partner, children }, ref) {
     const { values, setFieldValue } = useFormikContext();
     const initialSettings = useInitialSettings();
-    const { destination_address, to: destination } = values;
-    const selectDestinationAccount = useUpdateBalanceAccount("to");
-    const { provider, unAvailableWallets } = useWallet(destination, 'autofil');
+    const { destination_address, to: destination, toExchange } = values;
+    const selectDestinationAccount = useSelectSwapAccount("to");
+    const { provider, unAvailableWallets } = useWallet(destination, 'autofill');
     const connectedWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
     const defaultAccount = useSelectedAccount("to", values.to?.name);
     const connectedWalletskey = connectedWallets?.map(w => w.addresses.join('')).join('');
     const [manualAddress, setManualAddress] = useState('');
-    const [newAddress, setNewAddress] = useState();
+    // Get manually added address from context (shared across all AddressPicker instances)
+    const manualAddressFromContext = defaultAccount?.id === 'manually_added' ? defaultAccount.address : undefined;
     useEffect(() => {
         if (destination_address && destination && !isValidAddress(destination_address, destination)) {
             updateDestAddress('');
@@ -42,10 +43,11 @@ const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAdd
             address_book,
             destination,
             wallets: connectedWallets,
-            newAddress,
-            addressFromQuery: initialSettings.destination_address
+            manualAddressFromContext,
+            addressFromQuery: initialSettings.destination_address,
+            destination_address
         });
-    }, [address_book, destination, connectedWallets, newAddress, initialSettings.destination_address, connectedWalletskey]);
+    }, [address_book, destination, connectedWallets, manualAddressFromContext, initialSettings.destination_address, connectedWalletskey]);
     const destinationAddressItem = destination && destination_address ?
         groupedAddresses?.find(a => a.address.toLowerCase() === destination_address.toLowerCase())
         : undefined;
@@ -102,13 +104,13 @@ const AddressPicker = forwardRef(function Address({ showAddressModal, setShowAdd
     return (_jsxs(_Fragment, { children: [_jsx(AddressButton, { addressItem: destinationAddressItem, openAddressModal: () => setShowAddressModal(true), connectedWallet: connectedWallet, partner: partner, destination: destination, children: children({ destination, addressItem: destinationAddressItem, connectedWallet: connectedWallet, partner }) }), _jsx(VaulDrawer, { header: 'Send To', show: showAddressModal, setShow: setShowAddressModal, modalId: "address", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx("div", { className: 'w-full flex flex-col justify-between h-full text-primary-text min-h-[200px]', children: _jsxs("div", { className: 'flex flex-col self-center grow w-full space-y-5 h-full', children: [destination
                                     && provider
                                     && !connectedWallets.length &&
-                                    _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, setNewAddress: (props) => { setNewAddress(props); updateDestAddress(props?.address); }, values: values, partner: partner, name: name, inputReference: inputReference, setFieldValue: setFieldValue, close: close, addresses: groupedAddresses, connectedWallet: connectedWallet }), destination
+                                    _jsx(ConnectWalletButton, { provider: provider, onConnect: onConnect }), _jsx(ManualAddressInput, { manualAddress: manualAddress, setManualAddress: setManualAddress, setNewAddress: (props) => updateDestAddress(props?.address), values: values, partner: partner, name: name, inputReference: inputReference, setFieldValue: setFieldValue, close: close, addresses: groupedAddresses, connectedWallet: connectedWallet }), destination
                                     && provider
                                     && !manualAddress &&
                                     _jsx(ConnectedWallets, { provider: provider, notCompatibleWallets: unAvailableWallets, onClick: (props) => handleSelectAddress(props.address), onConnect: onConnect, destination: destination, destination_address: destination_address }), addressBookAddresses && addressBookAddresses?.length > 0 && !manualAddress && destination &&
                                     _jsx(AddressBook, { addressBook: addressBookAddresses, onSelectAddress: handleSelectAddress, destination: destination, destination_address: destination_address, partner: partner })] }) }) }) })] }));
 });
-const resolveAddressGroups = ({ address_book, destination, wallets, newAddress, addressFromQuery, }) => {
+const resolveAddressGroups = ({ address_book, destination, wallets, manualAddressFromContext, addressFromQuery, destination_address, }) => {
     if (!destination)
         return;
     const filteredAddressBook = address_book?.filter(a => a.networks?.some(n => destination?.name === n) && isValidAddress(a.address, destination)) || [];
@@ -125,8 +127,9 @@ const resolveAddressGroups = ({ address_book, destination, wallets, newAddress,
     if (recentlyUsedAddresses.length > 0) {
         addresses = [...addresses, ...recentlyUsedAddresses];
     }
-    if (newAddress?.address && newAddress.networkType === destination?.type) {
-        addresses.push({ address: newAddress.address, group: AddressGroup.ManualAdded });
+    // Include manually added address from context (shared across all instances)
+    if (manualAddressFromContext && isValidAddress(manualAddressFromContext, destination)) {
+        addresses.push({ address: manualAddressFromContext, group: AddressGroup.ManualAdded });
     }
     const uniqueAddresses = addresses.filter((a, index, self) => self.findIndex(t => addressFormat(t.address, destination) === addressFormat(a.address, destination)) === index);
     return uniqueAddresses;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { truncateDecimals } from "../../../components/utils/RoundDecimals";
-import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../context/swapAccounts";
 import { useBalance } from "../../../lib/balances/useBalance";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 import InfoIcon from "../../../components/Icons/InfoIcon";

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import NumberFlow from "@number-flow/react";
+import clsx from "clsx";
+export const ExchangeReceiveAmount = ({ destination_token, fee, isFeeLoading }) => {
+    const receive_amount = fee?.quote.receive_amount;
+    const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full flex min-w-0 font-normal border-0 text-xl text-primary-text relative truncate items-baseline flex-row", children: [_jsx("div", { className: "flex items-center justify-start relative w-fit", children: _jsxs("div", { className: clsx("w-full flex items-center py-[3px] pr-2", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: [_jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }), _jsx("span", { className: "ml-1", children: destination_token?.symbol })] }) }), _jsx("div", { className: "flex items-baseline space-x-2 mt-1.5", children: _jsx("span", { className: "text-sm leading-4 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }) })] }) }));
+};

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

@@ -4,7 +4,7 @@ import useSWRGas from "../../../lib/gases/useSWRGas";
 import { useMemo } from "react";
 import { resolveMaxAllowedAmount } from "./helpers";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
-import { useSelectedAccount } from "../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../context/swapAccounts";
 import { useBalance } from "../../../lib/balances/useBalance";
 import useWallet from "../../../hooks/useWallet";
 const MinMax = (props) => {

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

@@ -3,45 +3,12 @@ import { useMemo } from "react";
 import { Triangle } from "lucide-react";
 import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "../../../components/shadcn/tooltip";
 import clsx from 'clsx';
-export const PriceImpact = ({ receiveAmount, requestedAmount, sourceTokenPriceUsd, destinationTokenPriceUsd, serviceFee, bridgeFee, className, }) => {
-    const toAmountUSD = useMemo(() => {
-        if (!receiveAmount || !destinationTokenPriceUsd)
-            return undefined;
-        return receiveAmount * destinationTokenPriceUsd;
-    }, [receiveAmount, destinationTokenPriceUsd]);
-    const fromAmountUSD = useMemo(() => {
-        if (!requestedAmount || !sourceTokenPriceUsd)
-            return undefined;
-        return requestedAmount * sourceTokenPriceUsd;
-    }, [requestedAmount, sourceTokenPriceUsd]);
-    const priceImpact = useMemo(() => {
-        if (fromAmountUSD === undefined || toAmountUSD === undefined)
-            return undefined;
-        return (toAmountUSD - fromAmountUSD);
-    }, [fromAmountUSD, toAmountUSD]);
-    const layerswapFees = useMemo(() => {
-        if (serviceFee == null || sourceTokenPriceUsd == null)
-            return undefined;
-        return (serviceFee * sourceTokenPriceUsd);
-    }, [serviceFee, sourceTokenPriceUsd]);
-    const bridgeExpenses = useMemo(() => {
-        if (bridgeFee == null || sourceTokenPriceUsd == null)
-            return undefined;
-        return (bridgeFee * sourceTokenPriceUsd);
-    }, [bridgeFee, sourceTokenPriceUsd]);
-    const marketImpact = useMemo(() => {
-        if (priceImpact === undefined || layerswapFees === undefined || bridgeExpenses === undefined)
-            return undefined;
-        return (priceImpact + Number(layerswapFees) + Number(bridgeExpenses));
-    }, [priceImpact, layerswapFees, bridgeExpenses]);
-    const priceImpactPercentage = useMemo(() => {
-        if (fromAmountUSD === undefined || toAmountUSD === undefined)
-            return undefined;
-        return Number((((toAmountUSD - fromAmountUSD) / fromAmountUSD) * 100).toFixed(2));
-    }, [fromAmountUSD, toAmountUSD]);
-    if (priceImpact === undefined)
+import { resolvePriceImpactValues } from "../../../lib/fees";
+export const PriceImpact = ({ quote, className }) => {
+    const priceImpactValues = useMemo(() => quote ? resolvePriceImpactValues(quote) : undefined, [quote]);
+    if (priceImpactValues === undefined)
         return null;
-    return (_jsx(_Fragment, { children: _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: clsx("flex text-secondary-text items-center cursor-default hover:text-primary-text", className), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3.5 h-3.5 stroke-1 fill-current transition-transform ${priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpact).toFixed(2)] }), _jsx("span", { children: ")" })] }) }) }), _jsxs(TooltipContent, { arrowClasses: "!bg-secondary-500 !fill-secondary-500", side: "top", align: "center", className: "!bg-secondary-500 !border-secondary-500 !text-secondary-text text-xs font-normal rounded-xl !p-4 shadow-card", children: [_jsxs("p", { className: "text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", children: [_jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpact) }), _jsx("span", { className: "text-secondary-text text-xs font-normal", children: priceImpactPercentage ? `(${priceImpact < 0 ? "-" : "+"}${Math.abs(priceImpactPercentage)}%)` : "" })] }), _jsx("p", { children: "This is the difference in total USD value" }), _jsx("p", { children: "between the assets you send and the assets you receive." }), _jsxs("ul", { className: "mt-3 space-y-2 ", children: [_jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Market impact" }), _jsx("span", { className: "text-primary-text", children: _jsx("span", { children: formatCurrency(marketImpact) }) })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Bridge expenses" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(bridgeExpenses)).toFixed(2) })] })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Layerswap fees" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(layerswapFees)).toFixed(2) })] })] })] }), _jsx(TooltipArrow, { className: "!bg-secondary-500 !fill-secondary-500" })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: clsx("flex text-secondary-text items-center cursor-default hover:text-primary-text", className, { "text-warning-foreground hover:text-warning-foreground/80": priceImpactValues.highMarketPriceImpact }), children: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { children: "(" }), _jsx(Triangle, { fill: "currentColor", className: `w-3 h-3 stroke-1 fill-current transition-transform ${priceImpactValues.priceImpact !== undefined && priceImpactValues.priceImpact < 0 ? "rotate-180" : ""}` }), _jsxs("span", { children: ["$", Math.abs(priceImpactValues.priceImpact || 0).toFixed(2)] }), _jsx("span", { children: ")" })] }) }) }), _jsxs(TooltipContent, { arrowClasses: "!bg-secondary-500 !fill-secondary-500", side: "top", align: "center", className: "bg-secondary-500! border-secondary-500! text-secondary-text! text-xs font-normal rounded-xl p-4! shadow-card", children: [_jsxs("p", { className: clsx("text-primary-text font-medium text-sm flex items-baseline space-x-0.5 mb-1", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: [priceImpactValues.highMarketPriceImpact ? (priceImpactValues.criticalMarketPriceImpact ? _jsx("span", { children: "Critical price impact:" }) : _jsx("span", { children: "High price impact:" })) : _jsx("span", { children: "Price impact:" }), _jsx("span", { children: formatCurrency(priceImpactValues.priceImpact) }), _jsx("span", { className: clsx("text-secondary-text text-xs font-normal", { "text-warning-foreground": priceImpactValues.highMarketPriceImpact }), children: priceImpactValues.priceImpactPercentage ? `(${priceImpactValues.priceImpactPercentage < 0 ? "-" : "+"}${Math.abs(priceImpactValues.priceImpactPercentage)}%)` : "" })] }), _jsx("p", { children: "This is the difference in total USD value" }), _jsx("p", { children: "between the assets you send and the assets you receive." }), _jsxs("ul", { className: "mt-3 space-y-2 ", children: [_jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Market impact" }), _jsx("span", { className: "text-primary-text", children: _jsx("span", { children: formatCurrency(priceImpactValues.marketImpact) }) })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Bridge expenses" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.bridgeExpenses?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.bridgeExpenses)).toFixed(2) })] })] }), _jsxs("li", { className: "list-none flex justify-between", children: [_jsx("span", { children: "Layerswap fees" }), _jsxs("span", { className: "text-primary-text", children: [_jsx("span", { children: priceImpactValues.layerswapFees?.toFixed(2) !== (0).toFixed(2) ? "-$" : "$" }), _jsx("span", { children: Math.abs(Number(priceImpactValues.layerswapFees)).toFixed(2) })] })] })] }), _jsx(TooltipArrow, { className: "bg-secondary-500! fill-secondary-500!" })] })] }) }));
 };
 const formatCurrency = (value, decimals = 2) => {
     if (value === undefined || isNaN(value))

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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import NumberFlow from "@number-flow/react";
 import clsx from "clsx";
 import { PriceImpact } from "./PriceImpact";
-export const ReceiveAmount = ({ source_token, destination_token, fee, isFeeLoading }) => {
+export const ReceiveAmount = ({ destination_token, fee, isFeeLoading }) => {
     const receive_amount = fee?.quote.receive_amount;
     const receiveAmountInUsd = receive_amount && destination_token && fee.quote?.destination_token?.price_in_usd ? (receive_amount * fee.quote.destination_token.price_in_usd).toFixed(2) : undefined;
     const quote = fee?.quote;
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex flex-col min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text w-full relative truncate", children: [_jsx("div", { className: "flex items-center justify-start w-full relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", bridgeFee: quote?.blockchain_fee, destinationTokenPriceUsd: quote?.destination_token?.price_in_usd, receiveAmount: quote?.receive_amount, requestedAmount: quote?.requested_amount, serviceFee: quote?.service_fee, sourceTokenPriceUsd: quote?.source_token?.price_in_usd })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex-col w-full flex min-w-0 font-normal border-0 text-[28px] leading-7 text-primary-text relative truncate", children: [_jsx("div", { className: "w-full flex items-center justify-start relative", children: _jsx("div", { className: clsx("w-full flex items-center pt-2 pr-3", { "animate-pulse-stronger": isFeeLoading }, { "text-secondary-text": !receive_amount }), children: _jsx(NumberFlow, { value: receive_amount || 0, trend: 0, format: { maximumFractionDigits: fee?.quote.destination_token?.decimals || 2 } }) }) }), _jsxs("div", { className: "flex items-baseline space-x-2 h-5", children: [_jsx("span", { className: "text-base leading-5 font-medium text-secondary-text h-5", children: _jsx(NumberFlow, { className: "p-0", value: Number(receiveAmountInUsd) || 0, format: { style: 'currency', currency: 'USD', maximumFractionDigits: receiveAmountInUsd ? 2 : 0 }, trend: 0 }) }), _jsx(PriceImpact, { className: "h-5 text-base leading-5", quote: quote })] })] }) }));
 };

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,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();
@@ -56,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;