@layerswap/widget 1.0.6 → 1.1.0

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

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

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

@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
 import { CurrencySelectItemDisplay } from "../Routes";
 import { CollapsableHeader } from "./CollapsableHeader";
 import { StickyHeader } from "./StickyHeader";
-export const CollapsibleRow = ({ item, toggleContent, direction, onSelect, selectedRoute, selectedToken, searchQuery, openValues, scrollContainerRef, allbalancesLoaded, }) => {
+export const CollapsibleRow = ({ item, index, toggleContent, direction, onSelect, selectedRoute, selectedToken, searchQuery, openValues, scrollContainerRef }) => {
     const groupName = item.type === "grouped_token" ? item.symbol : item.route.name;
     const headerId = `${groupName}-header`;
     const childrenList = useMemo(() => {
@@ -34,8 +34,8 @@ export const CollapsibleRow = ({ item, toggleContent, direction, onSelect, selec
         headerRef.current?.scrollIntoView({ block: "start", inline: "start" });
     };
     return (_createElement(motion.div, { ...(!searchQuery && { layout: "position" }), key: searchQuery ? "search" : "default" },
-        _jsxs(AccordionItem, { value: groupName, children: [_jsx("div", { ref: headerRef, id: headerId, onClick: () => toggleContent(groupName), className: `cursor-pointer bg-secondary-700 rounded-lg hover:bg-secondary-600 relative ${isSticky ? "opacity-0" : ""}`, children: _jsx(AccordionTrigger, { children: _jsx(CollapsableHeader, { item: item, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: isOpen }) }) }), _jsx(StickyHeader, { item: item, direction: direction, scrollContainer: scrollContainerRef.current, open: isOpen, headerRef: headerRef, contentRef: contentRef, allbalancesLoaded: allbalancesLoaded, childrenCount: childrenList?.length, onClick: stickyToggle, isSticky: isSticky, setSticky: setSticky }), _jsx(AccordionContent, { className: "AccordionContent", ref: contentRef, itemsCount: childrenList?.length, children: _jsx("div", { className: "has-[.token-item]:mt-1 bg-secondary-500 rounded-xl overflow-hidden", children: _jsx("div", { className: "overflow-y-auto styled-scroll p-2", children: childrenList?.map(({ token, route }, index) => {
+        _jsxs(AccordionItem, { value: groupName, children: [_jsx("div", { ref: headerRef, id: headerId, onClick: () => toggleContent(groupName), className: `cursor-pointer bg-secondary-700 rounded-lg hover:bg-secondary-600 relative ${isSticky ? "opacity-0" : ""}`, children: _jsx(AccordionTrigger, { children: _jsx(CollapsableHeader, { item: item, direction: direction, hideTokenImages: isOpen }) }) }), _jsx(StickyHeader, { item: item, direction: direction, scrollContainer: scrollContainerRef.current, open: isOpen, headerRef: headerRef, contentRef: contentRef, childrenCount: childrenList?.length, onClick: stickyToggle, isSticky: isSticky, setSticky: setSticky }), _jsx(AccordionContent, { className: "AccordionContent", ref: contentRef, itemsCount: childrenList?.length, children: _jsx("div", { className: "has-[.token-item]:mt-1 bg-secondary-500 rounded-xl overflow-hidden", children: _jsx("div", { className: "overflow-y-auto styled-scroll p-2", children: childrenList?.map(({ token, route }, index) => {
                                 const isSelected = selectedRoute === route.name && selectedToken === token.symbol;
-                                return (_jsx("div", { className: "token-item pl-2 pr-3 cursor-pointer hover:bg-secondary-400 rounded-xl outline-none disabled:cursor-not-allowed", onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { allbalancesLoaded: allbalancesLoaded, item: token, selected: isSelected, route: route, direction: direction }) }, `${groupName}-${index}`));
+                                return (_jsx("div", { className: "token-item pl-2 pr-3 cursor-pointer hover:bg-secondary-400 rounded-xl outline-none disabled:cursor-not-allowed", onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { item: token, selected: isSelected, route: route, direction: direction }) }, `${groupName}-${index}`));
                             }) }) }) })] })));
 };

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import ReactPortal from "../../../../components/Common/ReactPortal";
 import { CollapsableHeader } from "./CollapsableHeader";
-export function StickyHeader({ item, direction, scrollContainer, open, headerRef, contentRef, allbalancesLoaded, childrenCount, onClick, isSticky, setSticky, }) {
+export function StickyHeader({ item, direction, scrollContainer, open, headerRef, contentRef, childrenCount, onClick, isSticky, setSticky, }) {
     useEffect(() => {
         if (!open) {
             setSticky(false);
@@ -24,5 +24,5 @@ export function StickyHeader({ item, direction, scrollContainer, open, headerRef
     }, [scrollContainer, open, headerRef, contentRef, childrenCount]);
     if (!isSticky)
         return null;
-    return (_jsx(ReactPortal, { wrapperId: "sticky_accordion_header", children: _jsx("div", { onClick: onClick, className: "cursor-pointer bg-secondary-700 hover:bg-secondary-600 relative pb-1", children: _jsx(CollapsableHeader, { item: item, direction: direction, allbalancesLoaded: allbalancesLoaded, hideTokenImages: open }) }) }));
+    return (_jsx(ReactPortal, { wrapperId: "sticky_accordion_header", children: _jsx("div", { onClick: onClick, className: "cursor-pointer bg-secondary-700 hover:bg-secondary-600 relative pb-1", children: _jsx(CollapsableHeader, { item: item, direction: direction, hideTokenImages: open }) }) }));
 }

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

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

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

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

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

@@ -1,24 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CurrencySelectItemDisplay } from "../Routes";
 import { CollapsibleRow } from "./CollapsibleRow";
-import RouteTokenSwitch from "../RouteTokenSwitch";
 import clsx from "clsx";
 import { SelectItem } from "../../../../components/Select/Selector/SelectItem";
-export default function Row({ item, direction, selectedRoute, selectedToken, searchQuery, toggleContent, onSelect, openValues, allbalancesLoaded, scrollContainerRef, }) {
+import TitleRow from "./TitleRow";
+export default function Row({ item, direction, selectedRoute, selectedToken, searchQuery, toggleContent, onSelect, openValues, scrollContainerRef, index, }) {
     switch (item.type) {
         case "network":
         case "grouped_token":
-            return (_jsx(CollapsibleRow, { item: item, direction: direction, selectedRoute: selectedRoute, selectedToken: selectedToken, searchQuery: searchQuery, toggleContent: toggleContent, onSelect: onSelect, openValues: openValues, scrollContainerRef: scrollContainerRef, allbalancesLoaded: allbalancesLoaded }));
+            return (_jsx(CollapsibleRow, { index: index, item: item, direction: direction, selectedRoute: selectedRoute, selectedToken: selectedToken, searchQuery: searchQuery, toggleContent: toggleContent, onSelect: onSelect, openValues: openValues, scrollContainerRef: scrollContainerRef }));
         case "network_token":
         case "suggested_token": {
             const token = item.route.token;
             const route = item.route.route;
             const isSelected = selectedRoute === route.name && selectedToken === token.symbol;
-            return (_jsx("div", { className: clsx("cursor-pointer hover:bg-secondary-500 outline-none disabled:cursor-not-allowed rounded-xl"), onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { allbalancesLoaded: allbalancesLoaded, item: token, selected: isSelected, route: route, direction: direction, type: item.type }) }));
+            return (_jsx("div", { className: clsx("cursor-pointer hover:bg-secondary-500 outline-none disabled:cursor-not-allowed rounded-xl"), onClick: () => onSelect(route, token), children: _jsx(CurrencySelectItemDisplay, { item: token, selected: isSelected, route: route, direction: direction, type: item.type }) }));
         }
         case "group_title":
-            return (_jsxs("div", { className: "text-primary-text-tertiary text-base font-normal leading-5 pl-1 sticky top-0 z-50 flex items-baseline", style: { position: "sticky", top: 0, transform: "none" }, children: [_jsx("p", { children: item.text }), item.text.toLowerCase().includes("all") &&
-                        _jsx("div", { className: "relative ml-auto", children: _jsx(RouteTokenSwitch, {}) })] }));
+            return _jsx(TitleRow, { item: item });
         case "sceleton_token":
             return (_jsxs(SelectItem, { className: "animate-pulse", children: [_jsx(SelectItem.Logo, { altText: `sceleton logo `, className: "rounded-full bg-secondary-500" }), _jsxs(SelectItem.Title, { className: "py-0.5", children: [_jsxs("div", { className: "grid gap-0 leading-5 align-middle space-y-0.5 font-medium", children: [_jsx("span", { className: "align-middle h-3.5 my-1 w-12 bg-secondary-500 rounded-sm" }), _jsxs("div", { className: "flex items-center space-x-1 align-middle", children: [_jsx("div", { className: "w-2 h-2 my-1 bg-secondary-500 rounded-sm" }), _jsx("span", { className: "bg-secondary-500 text-xs whitespace-nowrap h-2 my-1 w-20 rounded-sm" })] })] }), _jsxs("span", { className: "text-sm text-secondary-text text-right my-auto leading-4 font-medium", children: [_jsx("div", { className: "text-primary-text text-lg leading-[22px] bg-secondary-500 h-3 my-1 w-16 ml-auto rounded-sm" }), _jsx("div", { className: "text-xs leading-4 bg-secondary-500 h-2 my-1 w-10 ml-auto rounded-sm" })] })] })] }));
         default:

package/dist/esm/components/Input/RoutePicker/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,12 +106,14 @@ export const FormSourceWalletButton = () => {
 };
 const Connect = ({ connectFn, setMountWalletPortal }) => {
     const { connect } = useConnectModal();
+    const { providers } = useWallet();
+    const isProvidersReady = providers.every(p => typeof p.ready === 'boolean' ? p.ready : true);
     const connectWallet = async () => {
         setMountWalletPortal && setMountWalletPortal(true);
         await connect();
         setMountWalletPortal && setMountWalletPortal(false);
     };
-    return _jsx(SubmitButton, { onClick: () => connectFn ? connectFn() : connectWallet(), type: "button", icon: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: 2 }), children: "Connect a wallet" });
+    return _jsx(SubmitButton, { onClick: () => connectFn ? connectFn() : connectWallet(), type: "button", icon: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: 2 }), isDisabled: !isProvidersReady, children: "Connect a wallet" });
 };
 const ContinueWithoutWallet = ({ onClick }) => {
     //TODO: bg-secondary-700 is a hotfix, should refactor and fix sticky footer for VaulDrawer

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

@@ -26,7 +26,7 @@ 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 &&
+    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 = () => {

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 }) }));
 };

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

@@ -6,7 +6,6 @@ import SpinIcon from "../../../components/Icons/spinIcon";
 import useSWR from 'swr';
 import { Widget } from "../../../components/Widget/Index";
 import { ImageWithFallback } from "../../../components/Common/ImageWithFallback";
-import { LayerswapProvider } from "../../../context/LayerswapProvider";
 export const CampaignsComponent = ({ onCampaignSelect }) => {
     const apiClient = new LayerSwapApiClient();
     const { data: campaignsData, isLoading } = useSWR('/campaigns', apiClient.fetcher);
@@ -19,13 +18,13 @@ export const CampaignsComponent = ({ onCampaignSelect }) => {
     const activeCampaigns = sortedCampaigns?.filter(IsCampaignActive) || [];
     const inactiveCampaigns = sortedCampaigns?.filter(c => !IsCampaignActive(c)) || [];
     return (_jsx(_Fragment, { children: _jsx(Widget.Content, { children: !isLoading ?
-                _jsxs("div", { className: "space-y-5 h-full text-primary-text sm:min-h-[350px]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Campaigns" }), _jsx("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: _jsx("div", { className: "p-3 space-y-4", children: activeCampaigns.length > 0 ?
+                _jsxs("div", { className: "space-y-5 h-full w-full text-primary-text sm:min-h-[350px]", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Campaigns" }), _jsx("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: _jsx("div", { className: "p-3 space-y-4", children: activeCampaigns.length > 0 ?
                                             activeCampaigns.map(c => _jsx(CampaignItem, { onCampaignSelect: onCampaignSelect, campaign: c }, c.id))
                                             :
                                                 _jsxs("div", { className: "flex flex-col items-center justify-center space-y-2 w-full", children: [_jsx(Gift, { className: "h-10 w-10 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "There are no active campaigns right now" })] }) }) })] }), inactiveCampaigns.length > 0 &&
                             _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "font-bold text-left leading-5", children: "Old campaigns" }), _jsx("div", { className: "bg-secondary-500 divide-y divide-secondary-500 rounded-lg shadow-lg border border-secondary-500 hover:border-secondary-400 transition duration-200", children: _jsx("div", { className: "p-3 dpsv flex flex-col space-y-4", children: inactiveCampaigns?.map(c => _jsx(CampaignItem, { onCampaignSelect: onCampaignSelect, campaign: c }, c.id)) }) })] })] })
                 :
-                    _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) }));
+                    _jsx("div", { className: "h-full w-full relative min-h-[350px]", children: _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) }) }));
 };
 const CampaignItem = ({ campaign, onCampaignSelect }) => {
     const campaignDaysLeft = ((new Date(campaign.end_date).getTime() - new Date().getTime()) / 86400000).toFixed();
@@ -38,5 +37,5 @@ function IsCampaignActive(campaign) {
     return (new Date(campaign?.end_date).getTime() > now.getTime());
 }
 export const Campaigns = (props) => {
-    return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { goBack: props.goBack, hideMenu: props.hideMenu, children: _jsx(CampaignsComponent, { onCampaignSelect: props.onCampaignSelect }) }) }));
+    return (_jsx(Widget, { goBack: props.goBack, hideMenu: props.hideMenu, children: _jsx(CampaignsComponent, { onCampaignSelect: props.onCampaignSelect }) }));
 };

package/dist/esm/components/Pages/Swap/Form/ExchangeForm.js

@@ -18,18 +18,19 @@ import useWallet from "../../../../hooks/useWallet";
 import clsx from "clsx";
 import { useSwapDataState } from "../../../../context/swap";
 import { useClickOutside } from "../../../../hooks/useClickOutside";
-import { useFormChangeCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 import QuoteDetails from "./FeeDetails";
 import DepositMethodComponent from "./FeeDetails/DepositMethod";
 import { AddressGroup } from "../../../../components/Input/Address/AddressPicker";
 import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
-const ExchangeForm = ({ partner }) => {
+import { ExchangeReceiveAmount } from "../../../../components/Input/Amount/ExchangeReceiveAmount";
+const ExchangeForm = ({ partner, showBanner, dismissBanner }) => {
     const { values, isSubmitting } = useFormikContext();
-    const triggerFormChangeCallback = useFormChangeCallback();
+    const { onFormChange } = useCallbacks();
     useEffect(() => {
-        triggerFormChangeCallback(values);
-    }, [values, triggerFormChangeCallback]);
-    const { fromAsset: fromCurrency, from, to: destination, destination_address, amount } = values || {};
+        onFormChange?.(values);
+    }, [values, onFormChange]);
+    const { fromAsset: fromCurrency, from, to: destination, destination_address, amount, toAsset: toCurrency } = values || {};
     const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
     const [actionTempValue, setActionTempValue] = useState(undefined);
     const { wallets } = useWallet();
@@ -44,19 +45,20 @@ const ExchangeForm = ({ partner }) => {
     const handleActionHover = (value) => {
         setActionTempValue(value);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "flex flex-col w-full space-y-3 relative", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2 leading-4", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3 h-[52px]", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
-                                                    const addressProviderIcon = (partner?.is_wallet && addressItem?.group === AddressGroup.FromQuery && partner?.logo) ? partner.logo : undefined;
-                                                    return _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet, addressProviderIcon: addressProviderIcon }) })
-                                                            : destination_address ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: destination_address }) })
-                                                                :
-                                                                    _jsxs("span", { className: "flex items-center", children: [_jsx(SelectedEchangePlaceholder, { placeholder: 'Enter destination address' }), _jsx("span", { className: "absolute right-0 px-1 pr-5 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }) });
-                                                } }) })] }), _jsxs("div", { className: "bg-secondary-500 rounded-2xl p-3 group space-y-2", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base ml-2 leading-5", children: "Enter amount" }), from && fromCurrency && minAllowedAmount && maxAmountFromApi &&
-                                                    _jsx("div", { className: clsx({
-                                                            "hidden": !showQuickActions,
-                                                            "block": showQuickActions,
-                                                        }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: "deposit_address" }) })] }), _jsx("div", { className: "relative group exchange-amount-field", children: _jsx(AmountField, { className: "pb-0! rounded-xl!", fee: quote, usdPosition: "right", actionValue: actionTempValue }) })] }), routeValidation.message
-                                    ? _jsx(ValidationError, {})
-                                    : null, _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: false, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DepositMethodComponent, {}), _jsxs(Form, { className: "h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "w-full flex flex-col justify-between flex-1 relative", children: [_jsxs("div", { className: "flex flex-col w-full gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send from" }), _jsx("div", { className: "relative", children: _jsx(CexPicker, {}) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base leading-5", children: "Send to" }), _jsx("div", { className: "relative group exchange-picker", children: _jsx(RoutePicker, { direction: "to", isExchange: true }) }), _jsx("div", { className: "hover:bg-secondary-300 bg-secondary-500 rounded-2xl p-3 h-[52px]", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => {
+                                                            const addressProviderIcon = (partner?.is_wallet && addressItem?.group === AddressGroup.FromQuery && partner?.logo) ? partner.logo : undefined;
+                                                            return _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet, addressProviderIcon: addressProviderIcon }) })
+                                                                    : destination_address ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: destination_address }) })
+                                                                        :
+                                                                            _jsxs("span", { className: "flex items-center", children: [_jsx(SelectedEchangePlaceholder, { placeholder: 'Enter destination address' }), _jsx("span", { className: "absolute right-0 px-1 pr-5 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) })] }) });
+                                                        } }) })] }), _jsxs("div", { className: "bg-secondary-500 rounded-2xl p-3 group space-y-2", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("label", { htmlFor: "From", className: "block font-normal text-secondary-text text-base ml-2 leading-5", children: "Enter amount" }), from && fromCurrency && minAllowedAmount && maxAmountFromApi &&
+                                                            _jsx("div", { className: clsx({
+                                                                    "hidden": !showQuickActions,
+                                                                    "block": showQuickActions,
+                                                                }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: "deposit_address" }) })] }), _jsxs("div", { className: "relative group exchange-amount-field", children: [_jsx(AmountField, { className: "pb-0! rounded-xl!", fee: quote, usdPosition: "right", actionValue: actionTempValue }), quote &&
+                                                            _jsxs("div", { className: "mt-3 ml-2", children: [_jsx("span", { className: "text-base leading-5 text-secondary-text", children: "You will receive" }), _jsx(ExchangeReceiveAmount, { destination_token: toCurrency, fee: quote, isFeeLoading: isQuoteLoading })] })] })] })] }), _jsxs("div", { children: [routeValidation.message
+                                            ? _jsx(ValidationError, {})
+                                            : null, _jsx(QuoteDetails, { swapValues: values, quote: quote?.quote, isQuoteLoading: isQuoteLoading, reward: quote?.reward, variant: "base" })] })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: false, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) })] })] }));
 };
 export default ExchangeForm;
 const AddressButton = ({ address, network, wallet, addressProviderIcon }) => {

package/dist/esm/components/Pages/Swap/Form/FeeDetails/Rate.js

@@ -2,13 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { ArrowRight } from "lucide-react";
 import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
-export const RateElement = ({ fromAsset, toAsset, requestAmount, receiveAmount, }) => {
+export const RateElement = ({ fromAsset, toAsset, requestAmount, receiveAmount, totalFeeInUsd }) => {
     const [flipped, setFlipped] = useState(false);
-    if (!requestAmount || !receiveAmount) {
+    if (toAsset.price_in_usd === 0) {
         return null;
     }
-    const fromRate = receiveAmount / requestAmount;
-    const toRate = requestAmount / receiveAmount;
+    const totalFee = totalFeeInUsd ? totalFeeInUsd / toAsset.price_in_usd : 0;
+    const fromRate = (receiveAmount + totalFee) / requestAmount;
+    const toRate = requestAmount / (receiveAmount + totalFee);
     const fromRateTruncated = truncateDecimals(fromRate, fromAsset?.precision || 6);
     const toRateTruncated = truncateDecimals(toRate, toAsset?.precision || 6);
     return (_jsx("div", { className: "flex text-sm ml-1 font-small items-center cursor-pointer", onClick: () => setFlipped(!flipped), children: !flipped ? (_jsxs(_Fragment, { children: [_jsxs("p", { children: [_jsx("span", { children: "1" }), " ", _jsx("span", { children: fromAsset?.symbol })] }), _jsx(ArrowRight, { className: "w-3 h-3 mx-1" }), _jsxs("span", { children: [fromRateTruncated, " ", toAsset?.symbol] })] })) : (_jsxs(_Fragment, { children: [_jsxs("p", { children: [_jsx("span", { children: "1" }), " ", _jsx("span", { children: toAsset?.symbol })] }), _jsx(ArrowRight, { className: "w-3 h-3 mx-1" }), _jsxs("span", { children: [toRateTruncated, " ", fromAsset?.symbol] })] })) }));

package/dist/esm/components/Pages/Swap/Form/FeeDetails/Refuel.js

@@ -25,9 +25,9 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
     const handleConfirmToggleChange = (value) => {
         setFieldValue('refuel', value);
     };
-    const showRefuel = needRefuel && (quote && (Number(amount) === Number(minAllowedAmount) || refuel) || (refuel && formValidation.code === FORM_VALIDATION_ERROR_CODES.MIN_AMOUNT_ERROR));
+    const showRefuel = needRefuel && formValidation.code !== FORM_VALIDATION_ERROR_CODES.ROUTE_NOT_FOUND;
     return (showRefuel &&
-        _jsx("div", { className: clsx("gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 border border-transparent transition-colors duration-200 rounded-2xl mt-auto", {
+        _jsx("div", { className: clsx("gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 border border-transparent transition-colors duration-200 rounded-2xl mt-3", {
                 "border-primary!": needRefuel && !refuel
             }), children: _jsxs("div", { className: "flex justify-between w-full text-secondary-text ", children: [_jsxs("button", { className: "space-y-1 mt-1 mb-0.5", type: "button", onClick: () => onButtonClick(), children: [_jsxs("div", { className: "flex items-center text-base space-x-1", children: [_jsx("p", { className: "leading-4", children: "Refuel" }), _jsx("div", { className: "p-0.5", children: _jsx(Info, { className: "h-3 w-3 text-secondary-text hover:text-primary-text", "aria-hidden": "true", strokeWidth: 2.5 }) })] }), needRefuel && !refuel &&
                                 _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You need gas on" }), " ", _jsx("span", { children: to.display_name })] }), refuel && quote &&

package/dist/esm/components/Pages/Swap/Form/FeeDetails/SwapQuote/DetailedEstimates.js

@@ -6,17 +6,19 @@ import useSWRGas from "../../../../../../lib/gases/useSWRGas";
 import useWallet from "../../../../../../hooks/useWallet";
 import useSWRNftBalance from "../../../../../../lib/nft/useSWRNftBalance";
 import { resolveTokenUsdPrice } from "../../../../../../helpers/tokenHelper";
-import { useSelectedAccount } from "../../../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../../../context/swapAccounts";
 import { RateElement } from "../Rate";
 import { Slippage } from "../Slippage";
 import { truncateDecimals } from "../../../../../../components/utils/RoundDecimals";
-export const DetailedEstimates = ({ quote: quoteData, swapValues: values, variant }) => {
-    const quote = quoteData?.quote;
-    const reward = quoteData?.reward;
+import { isValidAddress } from "../../../../../../lib/address/validator";
+import { addressFormat } from "../../../../../../lib/address/formatter";
+import { ExtendedAddress } from "../../../../../../components/Input/Address/AddressPicker/AddressWithIcon";
+import shortenAddress from "../../../../../../components/utils/ShortenAddress";
+export const DetailedEstimates = ({ quote, reward, swapValues: values, variant }) => {
     const shouldCheckNFT = reward?.campaign_type === "for_nft_holders" && reward?.nft_contract_address;
     const { balance: nftBalance, isLoading, error } = useSWRNftBalance(values.destination_address || '', values.to, reward?.nft_contract_address || '');
     const showReward = !(!reward || !values.destination_address || shouldCheckNFT && (isLoading || error || nftBalance === undefined || nftBalance <= 0));
-    return _jsxs("div", { className: "flex flex-col w-full px-2", children: [variant === "extended" && _jsx(GasFee, { values: values, quote: quote }), _jsx(Fees, { quote: quote, values: values }), _jsx(Rate, { fromAsset: values?.fromAsset, toAsset: values?.toAsset, requestAmount: quote?.requested_amount, receiveAmount: quote?.receive_amount }), variant === "extended" && values.depositMethod === "wallet" && _jsx(Slippage, { quoteData: quote, values: values }), _jsx(Estimates, { quote: quote }), showReward && _jsx(Reward, { reward: reward })] });
+    return _jsxs("div", { className: "flex flex-col w-full px-2", children: [variant === "extended" && _jsx(GasFee, { values: values, quote: quote }), _jsx(Fees, { quote: quote, values: values }), values.depositMethod !== "deposit_address" && _jsx(Rate, { fromAsset: values?.fromAsset, toAsset: values?.toAsset, requestAmount: quote?.requested_amount, receiveAmount: quote?.receive_amount, totalFeeInUsd: quote?.total_fee_in_usd }), values.depositMethod === "deposit_address" && variant === "extended" && values?.fromAsset?.contract && _jsx(ExchangeTokenContract, { fromAsset: values?.fromAsset, network: values?.from }), variant === "extended" && values.depositMethod === "wallet" && _jsx(Slippage, { quoteData: quote, values: values }), _jsx(Estimates, { quote: quote }), showReward && _jsx(Reward, { reward: reward })] });
 };
 const RowWrapper = ({ children, title }) => {
     return _jsxs("div", { className: "flex items-center w-full justify-between gap-1 py-3 px-2 text-sm", children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text gap-1 pr-4", children: _jsx("label", { children: title }) }), _jsx("div", { className: "text-right text-primary-text", children: children })] });
@@ -34,22 +36,57 @@ export const GasFee = ({ values, quote }) => {
     const gasCurrencyName = gasData?.token?.symbol;
     if (!gasFeeInUsd || !gasFeeInUsd)
         return null;
-    return _jsx(RowWrapper, { title: "Gas Fee", children: isGasLoading ? (_jsx(LoadingBar, {})) : _jsx("div", { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: gas !== undefined && (_jsx("span", { className: "text-sm ml-1 font-small", children: displayGasFeeInUsd })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-secondary-300 !text-primary-text", children: [_jsxs("span", { children: [gas || '-', " "] }), _jsx("span", { children: gas ? gasCurrencyName : '' })] })] }) }) });
+    return _jsx(RowWrapper, { title: "Gas Fee", children: isGasLoading ? (_jsx(LoadingBar, {})) : _jsx("div", { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: gas !== undefined && (_jsx("span", { className: "text-sm ml-1 font-small", children: displayGasFeeInUsd })) }), _jsxs(TooltipContent, { className: "bg-secondary-300! border-secondary-300! text-primary-text!", children: [_jsxs("span", { children: [gas || '-', " "] }), _jsx("span", { children: gas ? gasCurrencyName : '' })] })] }) }) });
 };
 const Fees = ({ quote, values }) => {
     const lsFeeAmountInUsd = quote?.total_fee_in_usd;
-    const displayLsFeeInUsd = lsFeeAmountInUsd != null ? (lsFeeAmountInUsd < 0.01 ? '<$0.01' : `$${lsFeeAmountInUsd.toFixed(2)}`) : null;
+    const feeDiscount = quote?.fee_discount;
+    const hasDiscount = feeDiscount != null && feeDiscount > 0;
+    // total_fee is the original fee, discounted fee is total_fee - fee_discount
+    const originalFee = quote?.total_fee;
+    const discountedFee = hasDiscount && originalFee !== undefined
+        ? originalFee - feeDiscount
+        : originalFee;
+    // Calculate fees in USD
+    const sourceTokenPriceInUsd = resolveTokenUsdPrice(values.fromAsset, quote);
+    const originalFeeInUsd = originalFee !== undefined && sourceTokenPriceInUsd != null
+        ? originalFee * sourceTokenPriceInUsd
+        : null;
+    // Calculate discounted fee in USD
+    const discountedFeeInUsd = discountedFee !== undefined && sourceTokenPriceInUsd != null
+        ? discountedFee * sourceTokenPriceInUsd
+        : null;
+    const displayOriginalFeeInUsd = originalFeeInUsd != null
+        ? (originalFeeInUsd < 0.01 ? '<$0.01' : `$${originalFeeInUsd.toFixed(2)}`)
+        : null;
+    const isFree = discountedFee !== undefined && discountedFee === 0;
+    const displayLsFeeInUsd = isFree
+        ? "Free"
+        : (discountedFeeInUsd != null
+            ? (discountedFeeInUsd < 0.01 ? '<$0.01' : `$${discountedFeeInUsd.toFixed(2)}`)
+            : null);
     const currencyName = values.fromAsset?.symbol || '';
-    const displayLsFee = quote?.total_fee !== undefined ? truncateDecimals(quote.total_fee, values.fromAsset?.decimals) : undefined;
-    return _jsx(RowWrapper, { title: "Fees", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: displayLsFeeInUsd !== undefined && (_jsx("span", { className: "text-sm ml-1 font-small", children: displayLsFeeInUsd })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-ssecondary-300 !text-primart-text", children: [_jsxs("span", { children: [displayLsFee || '-', " "] }), _jsx("span", { children: displayLsFee ? currencyName : '' })] })] }) });
+    const displayLsFee = discountedFee !== undefined
+        ? truncateDecimals(discountedFee, values.fromAsset?.decimals)
+        : undefined;
+    return _jsx(RowWrapper, { title: "Fees", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: displayLsFeeInUsd !== undefined && (_jsxs("div", { className: "flex items-center gap-2 text-sm ml-1 font-small", children: [hasDiscount && displayOriginalFeeInUsd && (_jsx("span", { className: "line-through text-primary-text-tertiary", children: displayOriginalFeeInUsd })), _jsx("span", { className: hasDiscount || isFree ? "text-primary-text" : "", children: displayLsFeeInUsd })] })) }), _jsxs(TooltipContent, { className: "bg-secondary-300! border-ssecondary-300! text-primart-text!", children: [_jsxs("span", { children: [displayLsFee || '-', " "] }), _jsx("span", { children: displayLsFee ? currencyName : '' })] })] }) });
 };
 const Estimates = ({ quote }) => {
-    return _jsx(RowWrapper, { title: "Estimates", children: _jsx(AverageCompletionTime, { avgCompletionTime: quote?.avg_completion_time }) });
+    return _jsx(RowWrapper, { title: "Est. time", children: _jsx(AverageCompletionTime, { avgCompletionTime: quote?.avg_completion_time }) });
 };
 const Reward = ({ reward }) => {
-    return _jsx(RowWrapper, { title: "Reward", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: reward?.amount_in_usd !== undefined && (_jsxs("span", { className: "text-sm ml-1 font-small", children: ["$", reward.amount_in_usd.toFixed(2)] })) }), _jsxs(TooltipContent, { className: "!bg-secondary-300 !border-secondary-300 !text-primart-text", children: [_jsxs("span", { children: [reward?.amount || '-', " "] }), _jsx("span", { children: reward?.amount ? reward.token.symbol : '' })] })] }) });
+    return _jsx(RowWrapper, { title: "Reward", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: reward?.amount_in_usd !== undefined && (_jsxs("span", { className: "text-sm ml-1 font-small", children: ["$", reward.amount_in_usd.toFixed(2)] })) }), _jsxs(TooltipContent, { className: "bg-secondary-300! border-secondary-300! text-primart-text!", children: [_jsxs("span", { children: [reward?.amount || '-', " "] }), _jsx("span", { children: reward?.amount ? reward.token.symbol : '' })] })] }) });
 };
-const Rate = ({ fromAsset, toAsset, requestAmount, receiveAmount }) => {
-    return _jsx(RowWrapper, { title: "Rate", children: _jsx(RateElement, { fromAsset: fromAsset, toAsset: toAsset, requestAmount: requestAmount, receiveAmount: receiveAmount }) });
+const Rate = ({ fromAsset, toAsset, requestAmount, receiveAmount, totalFeeInUsd }) => {
+    if (!fromAsset || !toAsset || !requestAmount || !receiveAmount || !totalFeeInUsd) {
+        return null;
+    }
+    return _jsx(RowWrapper, { title: "Rate", children: _jsx(RateElement, { fromAsset: fromAsset, toAsset: toAsset, requestAmount: requestAmount, receiveAmount: receiveAmount, totalFeeInUsd: totalFeeInUsd }) });
+};
+const ExchangeTokenContract = ({ fromAsset, network }) => {
+    return _jsx(RowWrapper, { title: `${network?.display_name} - ${fromAsset?.symbol}`, children: (fromAsset?.contract && network && (isValidAddress(fromAsset?.contract, network)) ?
+            _jsx("div", { className: "text-sm group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(fromAsset?.contract, network), network: network, showDetails: false, shouldShowChevron: false }) })
+            :
+                _jsx("p", { className: "text-sm text-secondary-text", children: fromAsset?.contract ? shortenAddress(fromAsset.contract) : '' })) });
 };
-const LoadingBar = () => (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-xs animate-pulse' }));
+const LoadingBar = () => (_jsx("div", { className: 'h-2.5 w-16 inline-flex bg-gray-500 rounded-xs animate-pulse' }));

package/dist/esm/components/Pages/Swap/Form/FeeDetails/SwapQuote/SummaryRow.js

@@ -19,7 +19,7 @@ export const SummaryRow = ({ quoteData, isQuoteLoading, values, wallet, onOpen,
                                     _jsx("div", { className: "text-sm group/addressItem text-secondary-text", children: _jsx(ExtendedAddress, { address: addressFormat(values?.destination_address, values?.to), network: values?.to, showDetails: wallet ? true : false, title: wallet?.displayName?.split("-")[0], description: wallet?.providerName, logo: wallet?.icon, shouldShowChevron: false }) })
                                     :
                                         _jsx("p", { className: "text-sm text-secondary-text", children: shortenAddress(values?.destination_address) }))] }) })] })), _jsxs("div", { className: "flex items-center w-full justify-between gap-1 text-sm px-2 py-3", children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text", children: _jsx("label", { children: "Receive at least" }) }), _jsx("div", { className: "text-right text-primary-text h-5", children: quoteData?.quote?.min_receive_amount !== undefined && !isNaN(quoteData?.quote?.min_receive_amount) && (_jsx(NumberFlow, { value: quoteData?.quote?.min_receive_amount, trend: 0, format: { maximumFractionDigits: quoteData?.quote.destination_token?.decimals || 2 }, suffix: ` ${values?.toAsset?.symbol}` })) })] }), _jsx(Slippage, { quoteData: quoteData.quote, values: values }), isOpen &&
-                _jsx(GasFee, { values: values, quote: quoteData.quote }), _jsxs("div", { className: `${isOpen ? "hidden" : ""} flex items-center w-full justify-between px-2 py-3`, children: [_jsx(DetailsButton, { quote: quoteData, isQuoteLoading: isQuoteLoading, swapValues: values, destination: destination, destinationAddress: destinationAddress }), _jsxs("button", { type: "button", onClick: (e) => {
+                _jsx(GasFee, { values: values, quote: quoteData.quote }), _jsxs("div", { className: `${isOpen ? "hidden" : ""} flex items-center w-full justify-between px-2 py-3`, children: [_jsx(DetailsButton, { quote: quoteData?.quote, isQuoteLoading: isQuoteLoading, swapValues: values, destination: destination, destinationAddress: destinationAddress, reward: quoteData?.reward }), _jsxs("button", { type: "button", onClick: (e) => {
                             e.stopPropagation();
                             onOpen?.();
                         }, className: "flex items-center text-secondary-text text-sm whitespace-nowrap gap-0.5 hover:text-primary-text", "aria-label": "See details", children: [_jsx("span", { children: "See details" }), _jsx(ChevronDown, { className: "h-3.5 w-3.5" })] })] })] }));

package/dist/esm/components/Pages/Swap/Form/FeeDetails/SwapQuote/index.js

@@ -6,12 +6,12 @@ import useWallet from '../../../../../../hooks/useWallet';
 import { SummaryRow } from './SummaryRow';
 import { DetailedEstimates } from './DetailedEstimates';
 import { addressFormat } from '../../../../../../lib/address/formatter';
-import { useSelectedAccount } from '../../../../../../context/balanceAccounts';
+import { useSelectedAccount } from '../../../../../../context/swapAccounts';
 const SwapQuoteComp = ({ swapValues: values, quote: quoteData, isQuoteLoading, partner }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const { wallets: destWallets } = useWallet(values.to, 'autofil');
+    const { wallets: destWallets } = useWallet(values.to, 'autofill');
     const wallet = (values?.to && values?.destination_address) ? destWallets?.find(w => w.addresses?.some(a => addressFormat(a, values.to) === addressFormat(values.destination_address, values.to))) : undefined;
     const selectedSourceAccount = useSelectedAccount("from", values?.from?.name);
-    return (_jsx(Accordion, { type: "single", collapsible: true, className: "w-full", value: isOpen ? 'quote' : '', onValueChange: (v) => setIsOpen(v === 'quote'), children: _jsxs(AccordionItem, { value: "quote", className: "bg-secondary-500 rounded-2xl", children: [_jsx(AccordionTrigger, { onClick: (e) => e.preventDefault(), className: "w-full rounded-2xl flex items-center justify-between cursor-auto", children: _jsx(SummaryRow, { isQuoteLoading: isQuoteLoading, values: values, wallet: wallet, quoteData: quoteData, destination: values.to, destinationAddress: values.destination_address, onOpen: () => setIsOpen(true), isOpen: isOpen, sourceAddress: selectedSourceAccount?.address, partner: partner }) }), _jsx(AccordionContent, { className: "rounded-2xl", children: _jsx(DetailedEstimates, { swapValues: values, quote: quoteData, variant: 'base' }) }), isOpen && (_jsx("div", { className: "px-3.5 pb-3", children: _jsxs("button", { type: "button", onClick: () => setIsOpen(false), className: "mx-auto flex items-center justify-center gap-1 text-sm text-secondary-text hover:text-primary-text", children: [_jsx("span", { children: "Close details" }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 rotate-180 transition-transform" })] }) }))] }) }));
+    return (_jsx(Accordion, { type: "single", collapsible: true, className: "w-full", value: isOpen ? 'quote' : '', onValueChange: (v) => setIsOpen(v === 'quote'), children: _jsxs(AccordionItem, { value: "quote", className: "bg-secondary-500 rounded-2xl", children: [_jsx(AccordionTrigger, { onClick: (e) => e.preventDefault(), className: "w-full rounded-2xl flex items-center justify-between cursor-auto", children: _jsx(SummaryRow, { isQuoteLoading: isQuoteLoading, values: values, wallet: wallet, quoteData: quoteData, destination: values.to, destinationAddress: values.destination_address, onOpen: () => setIsOpen(true), isOpen: isOpen, sourceAddress: selectedSourceAccount?.address, partner: partner }) }), _jsx(AccordionContent, { className: "rounded-2xl", children: _jsx(DetailedEstimates, { swapValues: values, quote: quoteData?.quote, reward: quoteData?.reward, variant: 'base' }) }), isOpen && (_jsx("div", { className: "px-3.5 pb-3", children: _jsxs("button", { type: "button", onClick: () => setIsOpen(false), className: "mx-auto flex items-center justify-center gap-1 text-sm text-secondary-text hover:text-primary-text", children: [_jsx("span", { children: "Close details" }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 rotate-180 transition-transform" })] }) }))] }) }));
 };
 export default SwapQuoteComp;