@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useEffect, useRef } from "react";
+import { Info } from "lucide-react";
+import clsx from "clsx";
+import { useBalance } from "../../../../../lib/balances/useBalance";
+import { isValidAddress } from "../../../../../lib/address/validator";
+import ToggleButton from "../../../../../components/Buttons/toggleButton";
+const RefuelToggle = ({ onButtonClick, quote, minAllowedAmount }) => {
+    const { values, setFieldValue } = useFormikContext();
+    const { toAsset: toCurrency, to, destination_address, refuel, amount } = values;
+    const { balances } = useBalance(destination_address, to);
+    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);
+    useEffect(() => {
+        if (to && previouslySelectedDestination.current !== to && !!refuel) {
+            setFieldValue('refuel', false);
+        }
+        previouslySelectedDestination.current = to;
+    }, [to, destination_address, toCurrency]);
+    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
+            }), 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);
+};
+export default RefuelToggle;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Modal from '../../../../../components/Modal/modal';
+import { truncateDecimals } from '../../../../../components/utils/RoundDecimals';
+import { useFormikContext } from 'formik';
+import { useBalance } from '../../../../../lib/balances/useBalance';
+import GasIcon from '../../../../../components/Icons/GasIcon';
+const RefuelModal = ({ openModal, setOpenModal, fee }) => {
+    const { values, } = useFormikContext();
+    const { to, toAsset: toCurrency, refuel, destination_address } = values || {};
+    const nativeAsset = to?.token;
+    const { balances } = useBalance(destination_address, to);
+    const destNativeTokenBalance = balances?.find(b => b.token === nativeAsset?.symbol && b.network === to?.name);
+    return (_jsx(Modal, { height: "fit", show: openModal, setShow: setOpenModal, modalId: "refuel", children: _jsxs("div", { className: "flex flex-col items-center gap-2 text-center space-y-3", children: [_jsx("div", { className: "relative z-10 flex items-center justify-center rounded-xl p-3 bg-secondary-500", children: _jsx(GasIcon, { className: "h-[52px] w-[52px] text-primary-200", "aria-hidden": "true" }) }), _jsx("p", { className: "text-2xl", children: "About Refuel" }), _jsx("p", { className: "text-secondary-text max-w-sm", children: fee && refuel ?
+                        _jsx(_Fragment, { children: _jsxs("span", { children: [_jsx("span", { children: "We'll convert" }), " ", _jsxs("span", { children: ["$", fee?.refuel?.amount_in_usd] }), " ", _jsx("span", { children: "of your transfer into" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "so you can start using your funds on the destination chain immediately." })] }) })
+                        :
+                            _jsx(_Fragment, { children: _jsxs("span", { children: [_jsx("span", { children: "We'll convert a small portion of your transfer into" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "so you can start using your funds on the destination chain immediately." })] }) }) }), (refuel || Number(destNativeTokenBalance?.amount) >= 0) ?
+                    _jsxs("div", { className: "flex flex-col space-y-2 w-full bg-secondary-700 overflow-hidden ", children: [Number(destNativeTokenBalance?.amount) >= 0 ?
+                                _jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 rounded-xl", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: "Current balance" }) }), _jsx("p", { className: 'text-end', children: _jsxs("span", { children: [truncateDecimals(destNativeTokenBalance?.amount, nativeAsset?.precision), " ", nativeAsset?.symbol] }) })] }) })
+                                :
+                                    null, (toCurrency?.refuel && nativeAsset) ?
+                                _jsx("div", { className: "gap-4 flex relative items-center outline-hidden w-full text-primary-text px-4 py-3 bg-secondary-500 rounded-xl", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: "You will receive" }), _jsx("p", { children: _jsxs("span", { children: [truncateDecimals(toCurrency.refuel?.amount, nativeAsset.precision), " ", nativeAsset?.symbol] }) })] }) })
+                                :
+                                    null] }) : null] }) }));
+};
+export default RefuelModal;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info, Pencil } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../../components/shadcn/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../../../components/shadcn/popover";
+import { useCallback, useEffect, useRef, useState, forwardRef } from "react";
+import { useClickOutside } from "../../../../../hooks/useClickOutside";
+import clsx from "clsx";
+import { useSlippageStore } from "../../../../../stores/slippageStore";
+export const Slippage = ({ quoteData, values }) => {
+    const [editingSlippage, setEditingSlippage] = useState(false);
+    const { ref, isActive, activate } = useClickOutside();
+    const { slippage, setSlippage } = useSlippageStore();
+    const [autoSlippage, setAutoSlippage] = useState(!slippage);
+    const inputRef = useRef(null);
+    const [editingCustomSlippage, setEditingCustomSlippage] = useState(false);
+    useEffect(() => {
+        if (!isActive && editingSlippage) {
+            setEditingSlippage(false);
+            setEditingCustomSlippage(false);
+        }
+    }, [isActive, editingSlippage]);
+    const handleAutoButtonClick = useCallback(() => {
+        setAutoSlippage(auto => {
+            if (auto) {
+                setEditingCustomSlippage(true);
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+            else {
+                setEditingCustomSlippage(false);
+            }
+            setSlippage(undefined);
+            return !auto;
+        });
+    }, [setAutoSlippage, setEditingCustomSlippage, setSlippage, inputRef]);
+    return (_jsxs("div", { ref: ref, className: clsx("flex items-center w-full justify-between gap-1 text-sm px-2 py-1", { "bg-secondary-700 rounded-xl": editingSlippage }), children: [_jsx("div", { className: "inline-flex items-center text-left text-secondary-text py-2", children: _jsxs("label", { className: "flex items-center gap-1", children: [_jsx("span", { children: "Slippage" }), _jsxs(Tooltip, { openOnClick: true, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Info, { className: 'w-4 h-4' }) }), _jsx(TooltipContent, { className: "pointer-events-none w-80 grow p-2 !border-none !bg-secondary-300 text-xs rounded-xl", side: "top", align: "start", alignOffset: -30, children: _jsx("p", { children: "Your transaction will be refunded if the price moves more than the slippage percentage." }) })] })] }) }), !editingSlippage &&
+                _jsxs("div", { className: "text-right text-primary-text flex items-center gap-1", children: [!slippage && _jsx("div", { className: "text-secondary-text", children: "(Auto)" }), _jsxs("span", { children: [(((slippage ?? quoteData?.slippage) ?? 0) * 100).toFixed(2), "%"] }), _jsx("div", { onClick: () => { setEditingSlippage(true); activate(); }, className: "cursor-pointer hover:bg-secondary-400 p-1 bg-secondary-300 rounded-md text-secondary-text", children: _jsx(Pencil, { className: "h-3 w-3" }) })] }), editingSlippage &&
+                _jsxs("div", { className: "flex items-center gap-1", children: [!autoSlippage && _jsxs("span", { className: "flex items-center gap-1 max-sm:hidden", children: [_jsx(QuickAction, { value: 0.5 }), _jsx(QuickAction, { value: 1 }), _jsx(QuickAction, { value: 2.5 })] }), !editingCustomSlippage &&
+                            _jsxs("div", { className: "flex items-center gap-1 text-secondary-text text-sm px-2 py-2 -my-1 border border-secondary-300 rounded-lg font-normal leading-4 cursor-pointer", onClick: () => {
+                                    setEditingCustomSlippage(true);
+                                    setTimeout(() => inputRef.current?.focus(), 0);
+                                    setAutoSlippage(false);
+                                }, children: [_jsx("span", { children: (((quoteData?.slippage) ?? 0) * 100).toFixed(2) }), _jsx("span", { children: "%" })] }), editingCustomSlippage &&
+                            _jsx(SlippageInput, { ref: inputRef, valueDecimal: slippage, onEditing: () => setAutoSlippage(false), onDebouncedChange: (decimal) => setSlippage(decimal) }), _jsx("div", { onClick: handleAutoButtonClick, className: clsx("rounded-lg  px-3 py-2 -my-1 font-medium leading-4 cursor-pointer border transition-colors duration-300", autoSlippage ? "bg-secondary-300 border-secondary-100" : "bg-secondary-500 border-transparent"), children: "Auto" })] })] }));
+};
+const QuickAction = ({ value, className }) => {
+    const { setSlippage } = useSlippageStore();
+    const [flash, setFlash] = useState(false);
+    return (_jsxs("button", { type: "button", onClick: () => {
+            setSlippage(value / 100);
+            setFlash(true);
+            setTimeout(() => setFlash(false), 600);
+        }, className: clsx("flex items-center text-secondary-text px-2 py-1 border text-xs rounded-lg font-normal leading-4 cursor-pointer transition-colors ease-in-out duration-200", flash ? "bg-secondary-300" : "bg-secondary-500"), children: [_jsx("span", { children: value.toFixed(2) }), _jsx("span", { children: "%" })] }));
+};
+const SlippageInput = forwardRef(function SlippageInput({ valueDecimal, onDebouncedChange, onEditing }, ref) {
+    const [localPercent, setLocalPercent] = useState(valueDecimal !== undefined ? valueDecimal * 100 : undefined);
+    useEffect(() => {
+        setLocalPercent(valueDecimal !== undefined ? Math.round(valueDecimal * 10000) / 100 : undefined);
+    }, [valueDecimal]);
+    const invalid = localPercent !== undefined && (localPercent < 0 || localPercent > 80);
+    useEffect(() => {
+        const t = setTimeout(() => {
+            if (localPercent !== undefined && (localPercent < 0 || localPercent > 80))
+                return;
+            onDebouncedChange(localPercent !== undefined ? Math.round(localPercent * 100) / 10000 : undefined);
+        }, 300);
+        return () => clearTimeout(t);
+    }, [localPercent]);
+    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) => {
+                                const next = e.target.value === "" ? undefined : Number(e.target.value);
+                                if (!Number.isNaN(next)) {
+                                    onEditing?.();
+                                    setLocalPercent(next);
+                                }
+                            } }), _jsx("span", { children: "%" })] }) }), _jsx(PopoverContent, { side: "top", align: "center", className: "text-xs", children: "Slippage can not be out of 0% - 80% range." })] }));
+});

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import AverageCompletionTime from "../../../../../../components/Common/AverageCompletionTime";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "../../../../../../components/shadcn/tooltip";
+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 { 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;
+    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 })] });
+};
+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 })] });
+};
+export const GasFee = ({ values, quote }) => {
+    const isCEX = !!values.fromExchange;
+    const { provider } = useWallet(!isCEX ? values.from : undefined, 'withdrawal');
+    const selectedSourceAccount = useSelectedAccount("from", values.from?.name);
+    const wallet = useMemo(() => provider?.connectedWallets?.find(w => w.id === selectedSourceAccount?.id), [provider?.connectedWallets, selectedSourceAccount]);
+    const { gasData, isGasLoading } = useSWRGas(wallet?.address, values.from, values.fromAsset);
+    const gasTokenPriceInUsd = resolveTokenUsdPrice(gasData?.token, quote);
+    const gasFeeInUsd = gasData?.gas && gasTokenPriceInUsd ? gasData.gas * gasTokenPriceInUsd : null;
+    const displayGasFeeInUsd = gasFeeInUsd != null ? (gasFeeInUsd < 0.01 ? '<$0.01' : `$${gasFeeInUsd.toFixed(2)}`) : null;
+    const gas = gasData?.gas;
+    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 : '' })] })] }) }) });
+};
+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 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 Estimates = ({ quote }) => {
+    return _jsx(RowWrapper, { title: "Estimates", 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 : '' })] })] }) });
+};
+const Rate = ({ fromAsset, toAsset, requestAmount, receiveAmount }) => {
+    return _jsx(RowWrapper, { title: "Rate", children: _jsx(RateElement, { fromAsset: fromAsset, toAsset: toAsset, requestAmount: requestAmount, receiveAmount: receiveAmount }) });
+};
+const LoadingBar = () => (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-xs animate-pulse' }));

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import AddressIcon from '../../../../../../components/Common/AddressIcon';
+import shortenAddress from '../../../../../../components/utils/ShortenAddress';
+import { isValidAddress } from '../../../../../../lib/address/validator';
+import { addressFormat } from '../../../../../../lib/address/formatter';
+import { ExtendedAddress } from '../../../../../../components/Input/Address/AddressPicker/AddressWithIcon';
+import { DetailsButton } from '..';
+import clsx from 'clsx';
+import { Slippage } from '../Slippage';
+import { GasFee } from './DetailedEstimates';
+import NumberFlow from '@number-flow/react';
+export const SummaryRow = ({ quoteData, isQuoteLoading, values, wallet, onOpen, sourceAddress, isOpen, destination, destinationAddress }) => {
+    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" })) : (_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) => {
+                            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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../../../components/shadcn/accordion';
+import { ChevronDown } from 'lucide-react';
+import useWallet from '../../../../../../hooks/useWallet';
+import { SummaryRow } from './SummaryRow';
+import { DetailedEstimates } from './DetailedEstimates';
+import { addressFormat } from '../../../../../../lib/address/formatter';
+import { useSelectedAccount } from '../../../../../../context/balanceAccounts';
+const SwapQuoteComp = ({ swapValues: values, quote: quoteData, isQuoteLoading }) => {
+    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 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 }) }), _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" })] }) }))] }) }));
+};
+export default SwapQuoteComp;

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

@@ -0,0 +1,21 @@
+import { truncateDecimals } from '../../../../../../components/utils/RoundDecimals';
+export function deriveQuoteComputed({ values, quote, reward, gasData, gasTokenPriceInUsd, }) {
+    const gasFeeInUsd = gasData?.gas && gasTokenPriceInUsd ? gasData.gas * gasTokenPriceInUsd : null;
+    const lsFeeAmountInUsd = quote?.total_fee_in_usd;
+    const displayLsFeeInUsd = lsFeeAmountInUsd != null ? (lsFeeAmountInUsd < 0.01 ? '<$0.01' : `$${lsFeeAmountInUsd.toFixed(2)}`) : null;
+    const displayGasFeeInUsd = gasFeeInUsd != null ? (gasFeeInUsd < 0.01 ? '<$0.01' : `$${gasFeeInUsd.toFixed(2)}`) : null;
+    const displayLsFee = quote?.total_fee !== undefined ? truncateDecimals(quote.total_fee, values.fromAsset?.decimals) : undefined;
+    const currencyName = values.fromAsset?.symbol || '';
+    const receiveAtLeast = quote?.min_receive_amount;
+    return {
+        gasFeeInUsd,
+        lsFeeAmountInUsd,
+        displayLsFeeInUsd,
+        displayGasFeeInUsd,
+        displayLsFee,
+        currencyName,
+        receiveAtLeast,
+        avgCompletionTime: quote?.avg_completion_time,
+        reward,
+    };
+}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import ResizablePanel from '../../../../../components/Common/ResizablePanel';
+import { useState } from 'react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../../../components/shadcn/accordion';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import AverageCompletionTime from '../../../../../components/Common/AverageCompletionTime';
+import useSWRGas from "../../../../../lib/gases/useSWRGas";
+import useWallet from "../../../../../hooks/useWallet";
+import GasIcon from '../../../../../components/Icons/GasIcon';
+import Clock from '../../../../../components/Icons/Clock';
+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 { CupIcon } from '../../../../../components/Icons/CupIcon';
+import { DetailedEstimates } from './SwapQuote/DetailedEstimates';
+export default function QuoteDetails({ swapValues: values, quote: quoteData, isQuoteLoading }) {
+    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', {
+                                '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 }) }) })] }) }) }));
+}
+export const DetailsButton = ({ quote: quoteData, isQuoteLoading, swapValues: values, destination, destinationAddress }) => {
+    const { quote, reward } = quoteData || {};
+    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 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);
+    const gasFeeInUsd = (gasData && gasTokenPriceInUsd) ? gasData.gas * gasTokenPriceInUsd : null;
+    const averageCompletionTime = quote?.avg_completion_time;
+    const shouldCheckNFT = reward?.campaign_type === "for_nft_holders" && !!reward?.nft_contract_address;
+    const { balance: nftBalance, isLoading, error } = useSWRNftBalance(destinationAddress || '', destination, reward?.nft_contract_address || '');
+    return (_jsxs("div", { className: 'flex items-center gap-1 space-x-3', children: [gasFeeInUsd &&
+                _jsxs(_Fragment, { children: [_jsxs("div", { className: clsx("inline-flex items-center gap-1", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: !values.fromExchange ?
+                                        _jsx(GasIcon, { className: 'h-4 w-4 text-secondary-text' }) : _jsx(ExchangeGasIcon, { className: 'h-5 w-5 text-secondary-text' }) }), _jsx(NumberFlow, { className: "text-primary-text text-sm leading-6", value: gasFeeInUsd < 0.01 ? '0.01' : gasFeeInUsd, format: { style: 'currency', currency: 'USD' }, prefix: gasFeeInUsd < 0.01 ? '<' : undefined })] }), _jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" })] }), averageCompletionTime &&
+                _jsx(_Fragment, { children: _jsxs("div", { className: clsx("text-right inline-flex items-center gap-1 text-sm", { "animate-pulse-strong": isQuoteLoading }), children: [_jsx("div", { className: 'p-0.5', children: _jsx(Clock, { className: 'h-4 w-4 text-secondary-text' }) }), _jsx(AverageCompletionTime, { className: "text-primary-text", avgCompletionTime: quote.avg_completion_time })] }) }), reward &&
+                (!shouldCheckNFT || (!isLoading && !error && nftBalance !== undefined && nftBalance > 0)) &&
+                _jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-3 bg-primary-text-tertiary rounded-2xl" }), _jsxs("div", { className: 'text-right text-primary-text inline-flex items-center gap-1', children: [_jsx(CupIcon, { alt: "Reward", width: 16, height: 16 }), _jsx(NumberFlow, { value: reward?.amount_in_usd < 0.01 ? '0.01' : reward?.amount_in_usd, format: { style: 'currency', currency: 'USD' }, prefix: reward?.amount_in_usd < 0.01 ? '<' : undefined })] })] })] }));
+};

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SwapDataProvider } from "../../../../context/swap";
+import { useMemo } from "react";
+import { NetworkExchangeTabs, Tabs, TabsContent } from "./NetworkExchangeTabs";
+import NetworkForm from "./NetworkForm";
+import ExchangeForm from "./ExchangeForm";
+import FormWrapper from "./FormWrapper";
+import { Widget } from "../../../../components/Widget/Index";
+import { ValidationProvider } from "../../../../context/validationContext";
+import { useInitialSettings } from "../../../../context/settings";
+import { useSettingsState } from "../../../../context/settings";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import useSWR from "swr";
+export default function Form({ formValues }) {
+    const { from, appName } = useInitialSettings();
+    const { sourceExchanges } = useSettingsState();
+    const defaultTab = useMemo(() => {
+        return defaultTabResolver({ from, sourceExchanges });
+    }, [from, sourceExchanges]);
+    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: "hidden sm:block", 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: "block sm:hidden", 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: "block sm:hidden", children: _jsx(NetworkExchangeTabs, {}) }), children: _jsx(ValidationProvider, { children: _jsx(ExchangeForm, { partner: partner }) }) }) }) }) })] });
+}
+const defaultTabResolver = ({ from, sourceExchanges }) => {
+    if (from) {
+        const isCex = sourceExchanges.some(exchange => exchange.name === from);
+        if (isCex) {
+            return "exchange";
+        }
+    }
+    return "cross-chain";
+};

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Formik } from "formik";
+import { useCallback, useRef, useState } from "react";
+import { useSettingsState } from "../../../../context/settings";
+import { useSwapDataState, useSwapDataUpdate } from "../../../../context/swap";
+import ConnectNetwork from "../../../../components/Pages/Swap/Form/SecondaryComponents/ConnectNetwork";
+import toast from "react-hot-toast";
+import { generateSwapInitialValues, generateSwapInitialValuesFromSwap } from "../../../../lib/generateSwapInitialValues";
+import Modal from "../../../../components/Modal/modal";
+import { LSAPIKnownErrorCode } from "../../../../Models/ApiError";
+import { useInitialSettings } from "../../../../context/settings";
+import useWallet from "../../../../hooks/useWallet";
+import { useAsyncModal } from "../../../../context/asyncModal";
+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 SwapDetails from "../Withdraw/SwapDetails";
+import { useSwapCreateCallback, useSwapModalStateChangeCallback } from "../../../../context/callbackProvider";
+export default function FormWrapper({ children, type, partner }) {
+    const formikRef = useRef(null);
+    const [showConnectNetworkModal, setShowConnectNetworkModal] = useState(false);
+    const [isAddressFromQueryConfirmed, setIsAddressFromQueryConfirmed] = useState(false);
+    const [networkToConnect, setNetworkToConnect] = useState();
+    const settings = useSettingsState();
+    const { swapBasicData, swapDetails, swapModalOpen } = useSwapDataState();
+    const sourceNetworkWithTokens = settings.networks.find(n => n.name === swapBasicData?.source_network.name);
+    const { getProvider } = useWallet(sourceNetworkWithTokens, "withdrawal");
+    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 { getConfirmation } = useAsyncModal();
+    const initialSettings = useInitialSettings();
+    const { destination_address: destinationAddressFromQuery } = initialSettings;
+    const { createSwap, setSwapId, setSubmitedFormValues, setSwapModalOpen } = useSwapDataUpdate();
+    const { setSwapError } = useSwapDataState();
+    const handleSubmit = useCallback(async (values) => {
+        setSwapError && setSwapError('');
+        const { destination_address, to } = values;
+        setWalletWihdrawDone(false);
+        if (!walletWihdrawDone) {
+            setWalletWihdrawDone(false);
+        }
+        if (to &&
+            destination_address &&
+            destinationAddressFromQuery &&
+            (addressFormat(destinationAddressFromQuery?.toString(), to) === addressFormat(destination_address, to)) &&
+            !isAddressFromQueryConfirmed) {
+            const provider = to && getProvider(to, 'autofil');
+            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 }),
+                submitText: 'Confirm address',
+                dismissText: 'Cancel address'
+            }) : true;
+            if (confirmed) {
+                setIsAddressFromQueryConfirmed(true);
+            }
+            else if (!confirmed) {
+                return;
+            }
+        }
+        try {
+            await handleCreateSwap({
+                setSwapId,
+                values,
+                setSubmitedFormValues,
+                query: initialSettings,
+                partner,
+                createSwap: async (...props) => {
+                    const response = await createSwap(...props);
+                    triggerSwapCreateCallback(response);
+                    return response;
+                },
+                setShowSwapModal: handleShowSwapModal,
+                setNetworkToConnect,
+                setShowConnectNetworkModal,
+            });
+        }
+        catch (error) {
+            toast.error(error?.message);
+        }
+    }, [createSwap, initialSettings, partner, swapBasicData, getProvider, settings]);
+    const initialValues = swapBasicData ? generateSwapInitialValuesFromSwap(swapBasicData, swapBasicData.refuel, settings, type)
+        : generateSwapInitialValues(settings, initialSettings, type);
+    const handleShowSwapModal = useCallback((value) => {
+        setSwapModalOpen(value);
+        triggerSwapModalStateChangeCallback(value);
+        if (!value) {
+            if (walletWihdrawDone) {
+                mutateBalances();
+                setWalletWihdrawDone(false);
+                formikRef?.current?.setFieldValue('amount', 0, true);
+            }
+        }
+    }, [swapDetails, walletWihdrawDone, mutateBalances]);
+    const handleWalletWithdrawalSuccess = useCallback(() => {
+        setWalletWihdrawDone(true);
+    }, []);
+    return _jsx(_Fragment, { children: _jsx(Formik, { innerRef: formikRef, initialValues: initialValues, validateOnMount: true, onSubmit: handleSubmit, children: _jsxs(_Fragment, { children: [_jsx(Modal, { height: "fit", show: showConnectNetworkModal, setShow: setShowConnectNetworkModal, header: `${networkToConnect?.DisplayName} connect`, modalId: "showNetwork", 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 }) }) }), children] }) }) });
+}
+const handleCreateSwap = async ({ query, values, partner, setShowSwapModal, createSwap, setNetworkToConnect, setShowConnectNetworkModal, setSwapId, setSubmitedFormValues }) => {
+    setSubmitedFormValues(values);
+    if (values.depositMethod == 'wallet') {
+        setSwapId(undefined);
+        setShowSwapModal(true);
+        return;
+    }
+    try {
+        const swap = await createSwap(values, query, partner);
+        setSwapId(swap.swap.id);
+        setShowSwapModal(true);
+    }
+    catch (error) {
+        const data = error?.response?.data?.error;
+        if (data?.code === LSAPIKnownErrorCode.BLACKLISTED_ADDRESS) {
+            throw new Error("You can't transfer to that address. Please double check.");
+        }
+        else if (data?.code === LSAPIKnownErrorCode.INVALID_ADDRESS_ERROR) {
+            throw new Error(`Enter a valid ${values.to?.display_name} address`);
+        }
+        else if (data?.code === LSAPIKnownErrorCode.UNACTIVATED_ADDRESS_ERROR && values.to) {
+            setNetworkToConnect({
+                DisplayName: values.to.display_name,
+                AppURL: data.metadata.ActivationUrl
+            });
+            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}.`);
+            }
+            else {
+                throw new Error(`Daily limit of ${values.fromAsset?.symbol} transfers from ${values.from?.display_name} is reached. Please retry in ${remainingTime}.`);
+            }
+        }
+        else {
+            throw new Error(data?.message || error?.message);
+        }
+    }
+};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useState } from 'react';
+import { motion } from 'framer-motion';
+import clsx from 'clsx';
+import useWindowDimensions from '../../../../hooks/useWindowDimensions';
+import NetworkTabIcon from '../../../../components/Icons/NetworkTabIcon';
+import ExchangeTabIcon from '../../../../components/Icons/ExchangeTabIcon';
+const TabsContext = createContext(undefined);
+export const Tabs = ({ defaultValue, children }) => {
+    const [activeId, setActiveId] = useState(defaultValue);
+    return (_jsx(TabsContext.Provider, { value: { activeId, setActiveId }, children: children }));
+};
+export const TabsList = ({ children }) => {
+    const { isDesktop } = useWindowDimensions();
+    const [hovered, setHovered] = useState(false);
+    const hoveredOnDesktop = isDesktop && hovered;
+    return (_jsx("div", { className: "relative", children: _jsx(motion.div, { onHoverStart: () => setHovered(true), onHoverEnd: () => setHovered(false), animate: { width: hoveredOnDesktop ? 180 : 48 }, className: "sm:absolute right-full top-24 overflow-hidden rounded-l-xl max-sm:right-19 max-sm:z-20 max-sm:top-[9px] max-sm:w-fit! max-sm:rounded-lg", transition: { type: 'spring', bounce: 0.2, duration: 0.6 }, children: _jsx("div", { className: "flex flex-col bg-secondary-500 h-full p-1.5 sm:p-2 w-full space-y-2 max-sm:flex-row max-sm:space-y-0 max-sm:space-x-2", children: React.Children.map(children, child => React.isValidElement(child)
+                    ? React.cloneElement(child, { isHovered: hoveredOnDesktop })
+                    : child) }) }) }));
+};
+export const TabsTrigger = ({ value, isHovered, label, Icon }) => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('TabsTrigger must be used within <Tabs>');
+    const isActive = ctx.activeId === value;
+    return (_jsxs("button", { type: "button", onClick: () => ctx.setActiveId(value), className: clsx('w-full flex items-center justify-start !p-1 hover:bg-secondary-100 text-secondary-text hover:text-primary-text overflow-hidden rounded-md max-sm:justify-center max-sm:px-0 gap-1.5', { 'bg-secondary-300 !text-primary-text': isActive }), children: [_jsx("div", { className: "h-6 w-6 max-sm:h-5 max-sm:w-5", children: _jsx(Icon, { className: 'h-6 w-6 max-sm:h-5 max-sm:w-5' }) }), isHovered && _jsx("span", { className: "text-sm whitespace-nowrap", children: label })] }));
+};
+export const TabsContent = ({ value, children }) => {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('TabsContent must be used within <Tabs>');
+    return _jsx(_Fragment, { children: value === ctx.activeId && (_jsx("div", { className: "transition-all duration-200", children: children })) });
+};
+export const NetworkExchangeTabs = () => {
+    return _jsxs(TabsList, { children: [_jsx(TabsTrigger, { label: "Swap", Icon: NetworkTabIcon, value: "cross-chain" }), _jsx(TabsTrigger, { label: "Deposit from CEX", Icon: ExchangeTabIcon, value: "exchange" })] });
+};