@layerswap/widget 1.0.6 → 1.1.1

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Gift, Map, ScrollText, LibraryIcon, Shield, Users, MessageSquarePlus } from "lucide-react";
 import { useState } from "react";
 import { useIntercom } from "react-use-intercom";
@@ -7,64 +7,56 @@ import DiscordLogo from "../Icons/DiscordLogo";
 import GitHubLogo from "../Icons/GitHubLogo";
 import SubstackLogo from "../Icons/SubstackLogo";
 import TwitterLogo from "../Icons/TwitterLogo";
-import Popover from "../Modal/popover";
 import SendFeedback from "./Feedback";
 import YoutubeLogo from "../Icons/YoutubeLogo";
 import Menu from "./Menu";
 import { MenuStep } from "../../Models/Wizard";
 import { WalletsMenu } from "../Wallet/WalletComponents/ConnectedWallets";
+import VaulDrawer from "../Modal/vaulModal";
 const MenuList = ({ goToStep }) => {
     const { boot, show, update } = useIntercom();
     const [openFeedbackModal, setOpenFeedbackModal] = useState(false);
     const handleCloseFeedback = () => {
         setOpenFeedbackModal(false);
     };
-    return _jsx("div", { className: "text-sm font-medium focus:outline-hidden h-full", children: _jsxs(Menu, { children: [_jsx(WalletsMenu, {}), _jsx(Menu.Group, { children: _jsxs(_Fragment, { children: [window.location.pathname != '/transactions' &&
-                                _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }), window.location.pathname != '/campaigns' &&
-                                _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Campaigns, '/campaigns'), icon: _jsx(Gift, { className: "h-5 w-5" }), children: "Campaigns" })] }) }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => {
+    return _jsx("div", { className: "text-sm font-medium focus:outline-hidden h-full", children: _jsxs(Menu, { children: [_jsx(WalletsMenu, {}), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Transactions, "/transactions"), icon: _jsx(ScrollText, { className: "h-5 w-5" }), children: "Transactions" }), _jsx(Menu.Item, { onClick: () => goToStep(MenuStep.Campaigns, '/campaigns'), icon: _jsx(Gift, { className: "h-5 w-5" }), children: "Campaigns" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => {
                                 boot();
                                 show();
                                 update();
-                            }, target: "_blank", icon: _jsx(ChatIcon, { strokeWidth: 2, className: "h-5 w-5" }), children: "Help" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs for Users" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/partners-and-integrations/', target: "_blank", icon: _jsx(Users, { className: "h-5 w-5" }), children: "Docs for Partners" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] }), _jsx(Menu.Group, { children: _jsx(Popover, { opener: _jsx(Menu.Item, { onClick: () => setOpenFeedbackModal(true), target: "_blank", icon: _jsx(MessageSquarePlus, { className: "h-5 w-5" }), children: "Suggest a Feature" }), isNested: true, show: openFeedbackModal, header: "Suggest a Feature", setShow: setOpenFeedbackModal, popoverId: "feedback", children: _jsx("div", { className: "p-0 md:max-w-md", children: _jsx(SendFeedback, { onSend: handleCloseFeedback }) }) }) }), _jsxs("div", { className: "space-y-3 w-full", children: [_jsx("hr", { className: "border-secondary-500" }), _jsx("p", { className: "text-primary-text-tertiary flex justify-center my-3", children: "Media links & suggestions:" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 justify-center", children: navigation.social.map((item, index) => (_jsx("a", { target: "_blank", href: item.href, className: `flex relative bg-secondary-500 hover:bg-secondary-400 rounded-xl cursor-pointer select-none items-center outline-hidden text-primary-text ${item.className}`, rel: "noopener noreferrer", children: _jsxs("div", { className: "p-2 w-full flex justify-center gap-1", children: [_jsx(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("p", { children: item.name })] }) }, index))) })] }) });
+                            }, target: "_blank", icon: _jsx(ChatIcon, { strokeWidth: 2, className: "h-5 w-5" }), children: "Help" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/', target: "_blank", icon: _jsx(BookOpen, { className: "h-5 w-5" }), children: "Docs for Users" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/partners-and-integrations/', target: "_blank", icon: _jsx(Users, { className: "h-5 w-5" }), children: "Docs for Partners" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/privacy-policy/', target: "_blank", icon: _jsx(Shield, { className: "h-5 w-5" }), children: "Privacy Policy" }), _jsx(Menu.Item, { pathname: 'https://learn.layerswap.io/user-docs/more-information/terms-of-services/', target: "_blank", icon: _jsx(LibraryIcon, { className: "h-5 w-5" }), children: "Terms of Service" })] }), _jsxs(Menu.Group, { children: [_jsx(Menu.Item, { onClick: () => setOpenFeedbackModal(true), target: "_blank", icon: _jsx(MessageSquarePlus, { className: "h-5 w-5" }), children: "Suggest a Feature" }), _jsx(VaulDrawer, { show: openFeedbackModal, header: "Suggest a Feature", setShow: setOpenFeedbackModal, modalId: "suggestFeature", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx("div", { className: "p-0 md:max-w-md", children: _jsx(SendFeedback, { onSend: handleCloseFeedback }) }) }) })] }), _jsxs("div", { className: "space-y-3 w-full", children: [_jsx("hr", { className: "border-secondary-500" }), _jsx("p", { className: "text-primary-text-tertiary flex justify-center my-3", children: "Media links & suggestions:" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 justify-center", children: navigation.social.map((item, index) => (_jsx("a", { target: "_blank", href: item.href, className: "flex relative bg-secondary-500 hover:bg-secondary-400 rounded-xl cursor-pointer select-none items-center outline-hidden text-primary-text", rel: "noopener noreferrer", children: _jsxs("div", { className: "p-2 w-full flex justify-center gap-1", children: [_jsx(item.icon, { className: "h-5 w-5", "aria-hidden": "true" }), _jsx("p", { children: item.name })] }) }, index))) })] }) });
 };
 const navigation = {
     social: [
         {
             name: 'Twitter',
             href: 'https://twitter.com/layerswap/',
-            icon: (props) => TwitterLogo(props),
-            className: 'plausible-event-name=Twitter'
+            icon: (props) => TwitterLogo(props)
         },
         {
             name: 'GitHub',
             href: 'https://github.com/layerswap/layerswapapp/',
-            icon: (props) => GitHubLogo(props),
-            className: 'plausible-event-name=GitHub'
+            icon: (props) => GitHubLogo(props)
         },
         {
             name: 'Discord',
             href: 'https://discord.com/invite/KhwYN35sHy/',
-            icon: (props) => DiscordLogo(props),
-            className: 'plausible-event-name=Discord'
+            icon: (props) => DiscordLogo(props)
         },
         {
             name: 'YouTube',
             href: 'https://www.youtube.com/@layerswaphq/',
-            icon: (props) => YoutubeLogo(props),
-            className: 'plausible-event-name=Youtube'
+            icon: (props) => YoutubeLogo(props)
         },
         {
             name: 'Substack',
             href: 'https://layerswap.substack.com/',
-            icon: (props) => SubstackLogo(props),
-            className: 'plausible-event-name=Substack'
+            icon: (props) => SubstackLogo(props)
         },
         {
             name: 'Roadmap',
             href: 'https://layerswap.ducalis.io/roadmap/summary/',
-            icon: (props) => _jsx(Map, { ...props }),
-            className: 'plausible-event-name=Roadmap'
-        },
+            icon: (props) => _jsx(Map, { ...props })
+        }
     ]
 };
 export default MenuList;

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

@@ -10,24 +10,33 @@ import WizardItem from "../Wizard/WizardItem";
 import HistoryList from "../Pages/SwapHistory/History";
 import { CampaignsComponent } from "../Pages/Campaigns";
 import { CampaignDetailsComponent } from "../Pages/Campaigns/Details";
-import VaulDrawer from "../Modal/vaulModal";
+import { Modal, ModalContent } from "../Modal/modalWithoutAnimation";
+import { useCallbacks } from "../../context/callbackProvider";
 const Comp = () => {
     const { goBack, currentStepName } = useFormWizardState();
     const { goToStep } = useFormWizardaUpdate();
-    const [openTopModal, setOpenTopModal] = useState(false);
+    const { onMenuNavigationChange } = useCallbacks();
+    const [isOpen, setIsOpen] = useState(false);
     const [selectedCampaign, setSelectedCampaign] = useState(undefined);
     const handleModalOpenStateChange = (value) => {
-        setOpenTopModal(value);
+        setIsOpen(value);
         if (value === false) {
             goToStep(MenuStep.Menu);
+            onMenuNavigationChange("/");
         }
     };
-    const goBackToMenuStep = () => { goToStep(MenuStep.Menu, "back"); };
-    const handleGoToStep = (step) => {
+    const goBackToMenuStep = () => {
+        goToStep(MenuStep.Menu, "back");
+        onMenuNavigationChange("/");
+    };
+    const handleGoToStep = (step, path) => {
         goToStep(step);
+        if (path) {
+            onMenuNavigationChange(path);
+        }
     };
-    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 }) })] }) }) })] }) });
+    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: () => setIsOpen(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(Modal, { isOpen: isOpen, setIsOpen: handleModalOpenStateChange, children: _jsx(ModalContent, { className: "pb-4", header: _jsxs("div", { className: "inline-flex items-center w-full", children: [goBack &&
+                                    _jsx("div", { className: "-ml-2", children: _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }) }), _jsx("h2", { className: "flex-1", children: currentStepName })] }), children: ({ closeModal }) => (_jsx("div", { className: "openpicker h-full", id: "virtualListContainer", 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: closeModal }) }), _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"); onMenuNavigationChange("/campaigns"); }, className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) })) }) })] }) });
 };
 const LayerswapMenu = () => {
     return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));

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

@@ -6,10 +6,10 @@ import IconButton from "../../components/Buttons/iconButton";
 import { X } from 'lucide-react';
 import clsx from "clsx";
 const ModalContext = createContext({ isOpen: false, setIsOpen: () => { }, shouldFocus: false, setShouldFocus: () => { } });
-export const Modal = ({ children }) => {
+export const Modal = ({ children, isOpen: _isOpen, setIsOpen: _setIsOpen }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [shouldFocus, setShouldFocus] = useState(false);
-    return (_jsx(ModalContext.Provider, { value: { isOpen, setIsOpen, shouldFocus, setShouldFocus }, children: children }));
+    return (_jsx(ModalContext.Provider, { value: { isOpen: _isOpen || isOpen, setIsOpen: _setIsOpen || setIsOpen, shouldFocus, setShouldFocus }, children: children }));
 };
 export const useModalState = () => {
     const context = useContext(ModalContext);
@@ -35,7 +35,7 @@ export const ModalContent = (props) => {
     }, [isOpen]);
     if (!isOpen)
         return null;
-    const modalElement = (_jsxs("div", { className: clsx("absolute inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col", className), children: [(header || showCloseButton) && (_jsx("div", { className: "w-full relative", children: _jsxs("div", { className: "flex items-center w-full text-left justify-between px-4 pt-2 pb-2 gap-x-2 sm:gap-x-1", children: [_jsx("div", { className: "flex-1 text-lg text-secondary-text font-semibold w-full flex justify-end", children: header }), showCloseButton && (_jsx(IconButton, { onClick: closeModal, className: "active:animate-press-down", icon: _jsx(X, { strokeWidth: 2 }) }))] }) })), _jsx("div", { className: "flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden overflow-y-auto relative pb-3", children: typeof children === 'function' ? children({ closeModal, shouldFocus }) : children })] }));
+    const modalElement = (_jsxs("div", { className: clsx("fixed sm:absolute inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col overscroll-none", className), children: [(header || showCloseButton) && (_jsx("div", { className: "w-full relative", children: _jsxs("div", { className: "flex items-center w-full text-left justify-between px-4 pt-2 pb-2 gap-x-2 sm:gap-x-1", children: [_jsx("div", { className: "flex-1 text-lg text-secondary-text font-semibold w-full flex justify-end", children: header }), showCloseButton && (_jsx(IconButton, { onClick: closeModal, className: "active:animate-press-down", icon: _jsx(X, { strokeWidth: 2 }) }))] }) })), _jsx("div", { className: "flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden overflow-y-auto relative pb-3", children: typeof children === 'function' ? children({ closeModal, shouldFocus }) : children })] }));
     const widgetElement = document.getElementById('widget');
     if (!widgetElement) {
         console.warn('Widget element not found, modal will not render');

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);
@@ -33,7 +32,7 @@ export const CampaignDetailsComponent = ({ campaignName }) => {
     if (!campaign) {
         return _jsx(NotFound, {});
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-7 w-7 relative", children: (campaign.logo_url || network?.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || network?.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { className: "font-bold text-xl text-left flex items-center text-primary-text", children: campaign.display_name })] }), isConnected ?
+    return (_jsxs("div", { className: "h-full flex flex-col justify-between gap-3", children: [_jsx(Widget.Content, { fitContent: true, children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-7 w-7 relative", children: (campaign.logo_url || network?.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || network?.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { className: "font-bold text-xl text-left flex items-center text-primary-text", children: campaign.display_name })] }), isConnected ?
                             _jsx(Rewards, { campaign: campaign })
                             :
                                 _jsx(BriefInformation, { campaign: campaign }), _jsx(Leaderboard, { campaign: campaign })] }) }), _jsx(_Fragment, { children: !isConnected &&
@@ -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,15 @@ 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 totalAmount = receiveAmount + totalFee;
+    const fromRate = totalAmount / requestAmount;
+    const toRate = requestAmount / totalAmount;
     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

@@ -8,7 +8,7 @@ import { isValidAddress } from "../../../../../lib/address/validator";
 import ToggleButton from "../../../../../components/Buttons/toggleButton";
 import { useValidationContext } from "../../../../../context/validationContext";
 import { FORM_VALIDATION_ERROR_CODES } from "../../../../../hooks/useFormValidation";
-const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
+const RefuelToggle = ({ onButtonClick, quote }) => {
     const { values, setFieldValue } = useFormikContext();
     const { toAsset: toCurrency, to, destination_address, refuel, amount } = values;
     const { balances } = useBalance(destination_address, to);
@@ -22,12 +22,17 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
         }
         previouslySelectedDestination.current = to;
     }, [to, destination_address, toCurrency]);
+    useEffect(() => {
+        if (!needRefuel && refuel) {
+            setFieldValue('refuel', false);
+        }
+    }, [needRefuel, refuel, setFieldValue]);
     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;