@layerswap/widget 1.0.5 → 1.1.0

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", 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

@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { useBalance } from "../../../../../lib/balances/useBalance";
 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 { values, setFieldValue } = useFormikContext();
     const { toAsset: toCurrency, to, destination_address, refuel, amount } = values;
@@ -13,6 +15,7 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
     const destinationNativeBalance = destination_address && balances?.find(b => (b.token === to?.token?.symbol) && (b.network === to.name));
     const needRefuel = toCurrency && toCurrency.refuel && to && to.token && isValidAddress(destination_address, to) && destinationNativeBalance && destinationNativeBalance?.amount == 0;
     const previouslySelectedDestination = useRef(to);
+    const { formValidation } = useValidationContext();
     useEffect(() => {
         if (to && previouslySelectedDestination.current !== to && !!refuel) {
             setFieldValue('refuel', false);
@@ -22,14 +25,13 @@ const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
     const handleConfirmToggleChange = (value) => {
         setFieldValue('refuel', value);
     };
-    const showRefuel = needRefuel && (quote || Number(amount) === Number(minAllowedAmount) || refuel);
-    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", {
-                "!border-primary": needRefuel && !refuel
+    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-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 &&
                                 _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get " }), quote?.refuel ? _jsxs("span", { children: ["~$", quote.refuel.amount_in_usd] }) : _jsx("span", { className: "w-5 h-3 rounded animate-pulse bg-secondary-200 text-transparent", children: "token" }), " ", _jsx("span", { children: "in" }), " ", _jsx("span", { children: to?.display_name }), " ", _jsx("span", { children: "for gas fees" })] }), refuel && !quote &&
-                                _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get" }), " ", _jsx("span", { children: toCurrency.refuel?.token.symbol }), " ", _jsx("span", { children: "for gas fees" })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) })
-        : null);
+                                _jsxs("p", { className: "text-xs", children: [_jsx("span", { children: "You'll get" }), " ", _jsx("span", { children: toCurrency.refuel?.token.symbol }), " ", _jsx("span", { children: "for gas fees" })] })] }), _jsx(ToggleButton, { value: !!refuel, onChange: handleConfirmToggleChange })] }) }));
 };
 export default RefuelToggle;

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

@@ -65,11 +65,16 @@ const SlippageInput = forwardRef(function SlippageInput({ valueDecimal, onDeboun
         }, 300);
         return () => clearTimeout(t);
     }, [localPercent, invalid]);
-    return (_jsxs(Popover, { open: invalid, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: clsx("flex items-center gap-1 text-secondary-text text-sm px-2 py-2 -my-1 border rounded-lg font-normal leading-4 focus-within:outline-none focus-within:ring-0 border-secondary-300", invalid ? "animate-shake" : ""), children: [_jsx("input", { type: "number", ref: ref, autoComplete: "off", autoFocus: false, className: clsx("w-10 bg-transparent border-none outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus:border-transparent focus:shadow-none text-primary-text text-base leading-3.5 p-0 text-right"), value: localPercent, onChange: (e) => {
+    return (_jsxs(Popover, { open: invalid, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: clsx("flex items-center gap-1 text-secondary-text text-sm px-2 py-2 -my-1 border rounded-lg font-normal leading-4 focus-within:outline-none focus-within:ring-0 border-secondary-300", invalid ? "animate-shake" : ""), children: [_jsx("input", { type: "number", ref: ref, autoComplete: "off", autoFocus: false, title: "", className: clsx("w-10 bg-transparent border-none outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus:border-transparent focus:shadow-none text-primary-text text-base leading-3.5 p-0 text-right"), value: localPercent, onChange: (e) => {
                                 const next = e.target.value === "" ? undefined : Number(e.target.value);
                                 if (!Number.isNaN(next)) {
                                     onEditing?.();
                                     setLocalPercent(next);
                                 }
+                            }, onKeyDown: (e) => {
+                                if (e.key == "Enter") {
+                                    e.preventDefault();
+                                    return false;
+                                }
                             } }), _jsx("span", { children: "%" })] }) }), _jsx(PopoverContent, { side: "top", align: "center", className: "text-xs", children: "Slippage can not be out of 0.1% - 5% range." })] }));
 });

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

@@ -15,11 +15,11 @@ import { useInitialSettings } from '../../../../../../context/settings';
 export const SummaryRow = ({ quoteData, isQuoteLoading, values, wallet, onOpen, sourceAddress, isOpen, destination, destinationAddress, partner }) => {
     const { destination_address: destinationAddressFromQuery } = useInitialSettings();
     const addressProviderIcon = destinationAddressFromQuery && partner?.is_wallet && addressFormat(destinationAddressFromQuery, values?.to) === addressFormat(values?.destination_address, values?.to) && partner?.logo;
-    return (_jsxs("div", { className: clsx("flex flex-col w-full p-2", { "!pb-0 !-mb-1": isOpen }), children: [values.destination_address && sourceAddress?.toLowerCase() !== values.destination_address?.toLowerCase() && (_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 gap-1 pr-4", children: _jsx("label", { children: "Send to" }) }), _jsx("div", { className: "text-right text-primary-text", children: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-2", children: [wallet?.icon ? (_jsx(wallet.icon, { className: "w-4 h-4 p-0.5 bg-white rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "rounded-md object-contain h-4 w-4", src: addressProviderIcon, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: values.destination_address, size: 36, rounded: "4px" })), ((isValidAddress(values?.destination_address, values?.to) && values?.to) ?
+    return (_jsxs("div", { className: clsx("flex flex-col w-full p-2", { "!pb-0 !-mb-1": isOpen }), children: [values.destination_address && sourceAddress?.toLowerCase() !== values.destination_address?.toLowerCase() && (_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 gap-1 pr-4", children: _jsx("label", { children: "Send to" }) }), _jsx("div", { className: "text-right text-primary-text", children: _jsxs("span", { className: "cursor-pointer hover:underline flex items-center gap-2", children: [wallet?.icon ? (_jsx(wallet.icon, { className: "w-4 h-4 bg-secondary-700 rounded-sm" })) : addressProviderIcon ? (_jsx(ImageWithFallback, { alt: "Partner logo", className: "rounded-md object-contain h-4 w-4", src: addressProviderIcon, width: "36", height: "36" })) : (_jsx(AddressIcon, { className: "h-4 w-4", address: values.destination_address, size: 36, rounded: "4px" })), ((isValidAddress(values?.destination_address, values?.to) && values?.to) ?
                                     _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 wallet = (values?.to && values?.destination_address) ? destWallets?.find(w => addressFormat(w.address, values?.to) === addressFormat(values?.destination_address, values?.to)) : undefined;
+    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;

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

@@ -13,29 +13,28 @@ import ExchangeGasIcon from '../../../../../components/Icons/ExchangeGasIcon';
 import useSWRNftBalance from '../../../../../lib/nft/useSWRNftBalance';
 import NumberFlow from '@number-flow/react';
 import { resolveTokenUsdPrice } from '../../../../../helpers/tokenHelper';
-import { useSelectedAccount } from '../../../../../context/balanceAccounts';
+import { useSelectedAccount } from '../../../../../context/swapAccounts';
 import { CupIcon } from '../../../../../components/Icons/CupIcon';
 import { DetailedEstimates } from './SwapQuote/DetailedEstimates';
-export default function QuoteDetails({ swapValues: values, quote: quoteData, isQuoteLoading }) {
+export default function QuoteDetails({ swapValues: values, quote, isQuoteLoading, reward, variant = 'extended', triggerClassnames }) {
     const { toAsset, fromAsset: fromCurrency, destination_address } = values || {};
     const [isAccordionOpen, setIsAccordionOpen] = useState(false);
-    return (_jsx(_Fragment, { children: quoteData &&
-            _jsx(Accordion, { type: 'single', collapsible: true, className: 'w-full', value: isAccordionOpen ? 'quote' : '', onValueChange: (value) => { setIsAccordionOpen(value === 'quote'); }, children: _jsxs(AccordionItem, { value: 'quote', className: 'bg-secondary-500 rounded-2xl', children: [_jsxs(AccordionTrigger, { className: clsx('p-3.5 pr-5 w-full rounded-2xl flex items-center justify-between transition-colors duration-200 hover:bg-secondary-400', {
+    return (_jsx(_Fragment, { children: quote &&
+            _jsx(Accordion, { type: 'single', collapsible: true, className: 'w-full', value: isAccordionOpen ? 'quote' : '', onValueChange: (value) => { setIsAccordionOpen(value === 'quote'); }, children: _jsxs(AccordionItem, { value: 'quote', className: 'bg-secondary-500 rounded-2xl', children: [_jsxs(AccordionTrigger, { className: clsx('p-3.5 pr-5 w-full rounded-2xl flex items-center justify-between transition-colors duration-200 hover:bg-secondary-400 mt-3', triggerClassnames, {
                                 'bg-secondary-500': !isAccordionOpen,
                                 'bg-secondary-400': isAccordionOpen,
                                 'animate-pulse-strong': isQuoteLoading && !isAccordionOpen
                             }), children: [(isAccordionOpen) ?
                                     _jsx("p", { className: 'text-sm', children: "Details" })
                                     :
-                                        _jsx(DetailsButton, { quote: quoteData, isQuoteLoading: isQuoteLoading, swapValues: values, destination: values.to, destinationAddress: destination_address }), _jsx(ChevronDown, { className: 'h-3.5 w-3.5 text-secondary-text' })] }), _jsx(AccordionContent, { className: 'rounded-2xl', children: _jsx(ResizablePanel, { children: (quoteData || isQuoteLoading) && fromCurrency && toAsset &&
-                                    _jsx(DetailedEstimates, { swapValues: values, quote: quoteData }) }) })] }) }) }));
+                                        _jsx(DetailsButton, { quote: quote, isQuoteLoading: isQuoteLoading, swapValues: values, destination: values.to, destinationAddress: destination_address, reward: reward }), _jsx(ChevronDown, { className: 'h-3.5 w-3.5 text-secondary-text' })] }), _jsx(AccordionContent, { className: 'rounded-2xl', children: _jsx(ResizablePanel, { children: (quote || isQuoteLoading) && fromCurrency && toAsset &&
+                                    _jsx(DetailedEstimates, { swapValues: values, quote: quote, variant: variant, reward: reward }) }) })] }) }) }));
 }
-export const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
-    const { quote, reward } = quoteData || {};
+export const DetailsButton = ({ quote, reward, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
     const isCEX = !!values.fromExchange;
     const sourceAccountNetwork = !isCEX ? values.from : undefined;
     const selectedSourceAccount = useSelectedAccount("from", sourceAccountNetwork?.name);
-    const { wallets } = useWallet(quoteData?.quote?.source_network, 'withdrawal');
+    const { wallets } = useWallet(quote?.source_network, 'withdrawal');
     const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
     const { gasData: gasData } = useSWRGas(selectedSourceAccount?.address, values.from, values.fromAsset, values.amount, wallet);
     const gasTokenPriceInUsd = resolveTokenUsdPrice(gasData?.token, quote);

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SwapDataProvider } from "../../../../context/swap";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { NetworkExchangeTabs, Tabs, TabsContent } from "./NetworkExchangeTabs";
 import NetworkForm from "./NetworkForm";
 import ExchangeForm from "./ExchangeForm";
@@ -15,15 +15,39 @@ import useSWR from "swr";
 import AppSettings from "../../../../lib/AppSettings";
 import clsx from "clsx";
 export default function Form() {
-    const { from, appName, defaultTab: defaultTabQueryParam } = useInitialSettings();
+    const { from, appName, defaultTab: defaultTabQueryParam, theme: themeName } = useInitialSettings();
     const { sourceExchanges } = useSettingsState();
     const defaultTab = useMemo(() => {
         return defaultTabResolver({ from, sourceExchanges, defaultTabQueryParam });
     }, [from, sourceExchanges]);
+    const [showBanner, setShowBanner] = useState(false);
+    // useEffect(() => {
+    //     if (typeof window === "undefined") return;
+    //     const sessionCountKey = "exchange_banner_session_count";
+    //     const closedKey = "exchange_banner_closed";
+    //     const seenKey = "exchange_banner_seen";
+    //     if (sessionStorage.getItem(closedKey) === "1") return;
+    //     if (!sessionStorage.getItem(seenKey)) {
+    //         sessionStorage.setItem(seenKey, "1");
+    //         const next =
+    //             (parseInt(localStorage.getItem(sessionCountKey) || "0") || 0) + 1;
+    //         localStorage.setItem(sessionCountKey, String(next));
+    //         if (next <= 3) setShowBanner(true);
+    //     } else {
+    //         const count = parseInt(localStorage.getItem(sessionCountKey) || "0") || 0;
+    //         if (count <= 3) setShowBanner(true);
+    //     }
+    // }, []);
+    const dismissBanner = () => {
+        setShowBanner(false);
+        if (typeof window !== "undefined") {
+            sessionStorage.setItem("exchange_banner_closed", "1");
+        }
+    };
     const layerswapApiClient = new LayerSwapApiClient();
     const { data: partnerData } = useSWR(appName && `/internal/apps?name=${appName}`, layerswapApiClient.fetcher);
     const partner = appName && partnerData?.data?.client_id?.toLowerCase() === appName?.toLowerCase() ? partnerData?.data : undefined;
-    return _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx("div", { className: clsx("hidden sm:block", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion !== true }), children: _jsx(NetworkExchangeTabs, {}) }), _jsx(TabsContent, { value: "cross-chain", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "cross-chain", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(NetworkForm, { partner: partner }) }) }) }) }) }), _jsx(TabsContent, { value: "exchange", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "exchange", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, { partner: partner }) }) }) }) }) })] });
+    return _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsx("div", { className: clsx("hidden sm:block", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion !== true }), children: _jsx(NetworkExchangeTabs, {}) }), _jsx(TabsContent, { value: "cross-chain", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "cross-chain", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(NetworkForm, { partner: partner }) }) }) }) }) }), _jsx(TabsContent, { value: "exchange", children: _jsx(SwapDataProvider, { children: _jsx(FormWrapper, { type: "exchange", partner: partner, children: _jsx(Widget, { contextualMenu: _jsx("div", { className: clsx("block w-full", { 'sm:hidden': AppSettings.ThemeData?.enableWideVersion == true }), children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, { partner: partner, showBanner: showBanner, dismissBanner: dismissBanner }) }) }) }) }) })] });
 }
 const defaultTabResolver = ({ from, sourceExchanges, defaultTabQueryParam }) => {
     if (defaultTabQueryParam) {

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

@@ -14,9 +14,9 @@ import VaulDrawer from "../../../../components/Modal/vaulModal";
 import { addressFormat } from "../../../../lib/address/formatter";
 import AddressNote from "../../../../components/Input/Address/AddressNote";
 import { useBalance } from "../../../../lib/balances/useBalance";
-import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../context/swapAccounts";
 import SwapDetails from "../Withdraw/SwapDetails";
-import { useSwapCreateCallback, useSwapModalStateChangeCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 export default function FormWrapper({ children, type, partner }) {
     const formikRef = useRef(null);
     const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
@@ -29,8 +29,7 @@ export default function FormWrapper({ children, type, partner }) {
     const [walletWihdrawDone, setWalletWihdrawDone] = useState(false);
     const selectedSourceAccount = useSelectedAccount("from", swapBasicData?.source_network?.name);
     const { mutate: mutateBalances } = useBalance(selectedSourceAccount?.address, sourceNetworkWithTokens);
-    const triggerSwapModalStateChangeCallback = useSwapModalStateChangeCallback();
-    const triggerSwapCreateCallback = useSwapCreateCallback();
+    const { onSwapModalStateChange } = useCallbacks();
     const { getConfirmation } = useAsyncModal();
     const initialSettings = useInitialSettings();
     const { destination_address: destinationAddressFromQuery } = initialSettings;
@@ -48,7 +47,7 @@ export default function FormWrapper({ children, type, partner }) {
             destinationAddressFromQuery &&
             (addressFormat(destinationAddressFromQuery?.toString(), to) === addressFormat(destination_address, to)) &&
             !isAddressFromQueryConfirmed) {
-            const provider = to && getProvider(to, 'autofil');
+            const provider = to && getProvider(to, 'autofill');
             const isDestAddressConnected = destination_address && provider?.connectedWallets?.some((wallet) => addressFormat(wallet.address, to) === addressFormat(destination_address, to));
             const confirmed = !isDestAddressConnected ? await getConfirmation({
                 content: _jsx(AddressNote, { partner: partner, values: values }),
@@ -71,7 +70,6 @@ export default function FormWrapper({ children, type, partner }) {
                 partner,
                 createSwap: async (...props) => {
                     const response = await createSwap(...props);
-                    triggerSwapCreateCallback(response);
                     return response;
                 },
                 setShowSwapModal: handleShowSwapModal,
@@ -87,7 +85,7 @@ export default function FormWrapper({ children, type, partner }) {
         : generateSwapInitialValues(settings, initialSettings, type);
     const handleShowSwapModal = useCallback((value) => {
         setSwapModalOpen(value);
-        triggerSwapModalStateChangeCallback(value);
+        onSwapModalStateChange(value);
         if (!value) {
             if (walletWihdrawDone) {
                 mutateBalances();
@@ -100,7 +98,7 @@ export default function FormWrapper({ children, type, partner }) {
         setWalletWihdrawDone(true);
     }, []);
     return _jsx(_Fragment, { children: _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, onSubmit: handleSubmit, children: _jsxs(_Fragment, { children: [_jsx(VaulDrawer, { show: showConnectNetworkModal, setShow: setShowConnectNetworkModal, header: `${networkToConnect?.DisplayName} connect`, modalId: "showNetwork", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: networkToConnect &&
-                                _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "openwithdrawalmodal" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner }) }) }), children] }) }) });
+                                _jsx(ConnectNetwork, { NetworkDisplayName: networkToConnect?.DisplayName, AppURL: networkToConnect?.AppURL }) }) }), _jsx(VaulDrawer, { show: swapModalOpen, setShow: handleShowSwapModal, header: `Complete the swap`, modalId: "showSwap", className: !swapBasicData?.use_deposit_address ? "expandContainerHeight" : "", children: _jsx(VaulDrawer.Snap, { id: "item-1", children: _jsx(SwapDetails, { type: "contained", onWalletWithdrawalSuccess: handleWalletWithdrawalSuccess, partner: partner, onCancelWithdrawal: () => handleShowSwapModal(false) }) }) }), children] }) }) });
 }
 const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, createSwap, setNetworkToConnect, setShowConnectNetworkModal, setSwapId, setSubmitedFormValues }) => {
     setSubmitedFormValues(values);
@@ -130,15 +128,11 @@ const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, crea
             setShowConnectNetworkModal(true);
         }
         else if (data?.code === LSAPIKnownErrorCode.NETWORK_CURRENCY_DAILY_LIMIT_REACHED) {
-            const time = data.metadata.RemainingLimitPeriod?.split(':');
-            const hours = Number(time[0]);
-            const minutes = Number(time[1]);
-            const remainingTime = `${hours > 0 ? `${hours.toFixed()} ${(hours > 1 ? 'hours' : 'hour')}` : ''} ${minutes > 0 ? `${minutes.toFixed()} ${(minutes > 1 ? 'minutes' : 'minute')}` : ''}`;
             if (data.metadata.AvailableTransactionAmount) {
-                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromAsset?.symbol} or retry in ${remainingTime}.`);
+                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please try sending up to ${data.metadata.AvailableTransactionAmount} ${values.fromAsset?.symbol}.`);
             }
             else {
-                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please retry in ${remainingTime}.`);
+                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached.`);
             }
         }
         else {

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

@@ -18,12 +18,12 @@ import { transformFormValuesToQuoteArgs, useQuoteData } from "../../../../hooks/
 import { useValidationContext } from "../../../../context/validationContext";
 import { useSwapDataState } from "../../../../context/swap";
 import ReserveGasNote from "../../../../components/Pages/Swap/Form/SecondaryComponents/ReserveGasNote";
-import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useSelectedAccount } from "../../../../context/swapAccounts";
 import QuoteDetails from "./FeeDetails";
 import DepositMethodComponent from "./FeeDetails/DepositMethod";
 import RefuelToggle from "./FeeDetails/Refuel";
 import RefuelModal from "./FeeDetails/RefuelModal";
-import { useFormChangeCallback } from "../../../../context/callbackProvider";
+import { useCallbacks } from "../../../../context/callbackProvider";
 const NetworkForm = ({ partner }) => {
     const [openRefuelModal, setOpenRefuelModal] = useState(false);
     const { values, setValues, isSubmitting, setFieldValue, } = useFormikContext();
@@ -40,10 +40,10 @@ const NetworkForm = ({ partner }) => {
     const initialSettings = useInitialSettings();
     const isValid = !formValidation.message;
     const error = formValidation.message;
-    const triggerFormChangeCallback = useFormChangeCallback();
+    const { onFormChange } = useCallbacks();
     useEffect(() => {
-        triggerFormChangeCallback(values);
-    }, [values, triggerFormChangeCallback]);
+        onFormChange(values);
+    }, [values, onFormChange]);
     useEffect(() => {
         if (!source || !toAsset || !toAsset.refuel) {
             setFieldValue('refuel', false, true);
@@ -54,14 +54,12 @@ const NetworkForm = ({ partner }) => {
             setFieldValue('amount', (nativeTokenBalance?.amount - networkGas).toString(), true);
     }, [setFieldValue]);
     const shouldConnectWallet = (source && source?.deposit_methods?.includes('wallet') && depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!source && !wallets.length && depositMethod !== 'deposit_address');
-    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 gap-3", children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-2 w-full leading-4', children: [!(initialSettings?.hideFrom && values?.from) && _jsx(SourcePicker, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, fee: quote }), !initialSettings?.hideFrom && !initialSettings?.hideTo &&
-                                            _jsx(ValueSwapperButton, { values: values, setValues: setValues, providers: providers, query: initialSettings }), !(initialSettings?.hideTo && values?.to) && _jsx(DestinationPicker, { isFeeLoading: isQuoteLoading, fee: quote, partner: partner })] }), Number(values.amount) > 0 ?
-                                    _jsx(ReserveGasNote, { maxAllowedAmount: minAllowedAmount, minAllowedAmount: maxAllowedAmount, onSubmit: handleReserveGas })
-                                    : null, (values.toAsset?.refuel && !initialSettings.hideRefuel) ?
-                                    _jsx(RefuelToggle, { quote: quote, onButtonClick: () => setOpenRefuelModal(true), minAllowedAmount: minAllowedAmount })
-                                    : null, routeValidation.message
-                                    ? _jsx(ValidationError, {})
-                                    : null, _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: shouldConnectWallet, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) }), _jsx(RefuelModal, { openModal: openRefuelModal, setOpenModal: setOpenRefuelModal, fee: quote })] })] }));
+    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", children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-2 w-full leading-4', children: [!(initialSettings?.hideFrom && values?.from) && _jsx(SourcePicker, { minAllowedAmount: minAllowedAmount, maxAllowedAmount: maxAllowedAmount, fee: quote }), !initialSettings?.hideFrom && !initialSettings?.hideTo &&
+                                            _jsx(ValueSwapperButton, { values: values, setValues: setValues, providers: providers, query: initialSettings }), !(initialSettings?.hideTo && values?.to) && _jsx(DestinationPicker, { isFeeLoading: isQuoteLoading, fee: quote, partner: partner })] }), _jsxs("div", { children: [Number(values.amount) > 0 &&
+                                            _jsx(ReserveGasNote, { maxAllowedAmount: maxAllowedAmount, minAllowedAmount: minAllowedAmount, onSubmit: handleReserveGas }), values.toAsset?.refuel && !initialSettings.hideRefuel &&
+                                            _jsx(RefuelToggle, { quote: quote, onButtonClick: () => setOpenRefuelModal(true), minAllowedAmount: minAllowedAmount }), routeValidation.message
+                                            ? _jsx("div", { className: "mt-3", children: _jsx(ValidationError, {}) })
+                                            : null, _jsx(QuoteDetails, { swapValues: values, quote: quote?.quote, reward: quote?.reward, isQuoteLoading: isQuoteLoading })] })] }) }), _jsx(Widget.Footer, { showPoweredBy: true, children: _jsx(FormButton, { shouldConnectWallet: shouldConnectWallet, values: values, disabled: !isValid || isSubmitting || !quote || isQuoteLoading, error: error, isSubmitting: isSubmitting, partner: partner }) }), _jsx(RefuelModal, { openModal: openRefuelModal, setOpenModal: setOpenRefuelModal, fee: quote })] })] }));
 };
 const ValueSwapperButton = ({ values, setValues, providers, query }) => {
     const [animate, cycle] = useCycle({ rotateX: 0 }, { rotateX: 180 });