@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+import IconButton from '../Buttons/iconButton';
+import { ChevronUp, X } from 'lucide-react';
+import { useMeasure } from '@uidotdev/usehooks';
+import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsContext';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Drawer } from './vaul';
+import AppSettings from '../../lib/AppSettings';
+const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd, className }) => {
+    const { isMobileWithPortal: isMobile } = useWindowDimensions();
+    let [headerRef, { height }] = useMeasure();
+    const { setHeaderHeight } = useSnapPoints();
+    const expandRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    const [snap, setSnap] = useState(null);
+    const [snapElement, setSnapElement] = useState(null);
+    const { snapPoints } = useSnapPoints();
+    const snapPointsHeight = snapPoints.map((item) => item.height);
+    const isLastSnap = snapElement?.id === snapPoints[snapPoints.length - 1]?.id;
+    const goToNextSnap = () => {
+        if (!snapElement)
+            return;
+        setSnapElement(snapPoints.find((item) => item.id === snapElement.id + 1) || null);
+    };
+    useEffect(() => {
+        if (show && snapPoints.length > 0) {
+            setSnapElement(snapPoints.find((item) => item.id === snapElement?.id) || snapPoints[0]);
+        }
+    }, [snapPoints, show]);
+    useEffect(() => {
+        if (!snapElement || snapElement.height === snap)
+            return;
+        setSnap(snapElement.height);
+    }, [snapElement]);
+    useEffect(() => {
+        if (!snap || snap === snapElement?.height)
+            return;
+        setSnapElement(snapPoints.find((item) => item.height === snap) || null);
+    }, [snap]);
+    useEffect(() => {
+        if (!height)
+            return;
+        setHeaderHeight(height);
+    }, [height]);
+    const handleOpenChange = (open) => {
+        setSnap(open ? snapPoints[0].height : null);
+        setShow(open);
+        if (!open)
+            return onClose && onClose();
+    };
+    useEffect(() => {
+        setLoaded(true);
+    }, []);
+    if (!loaded)
+        return null;
+    const container = isMobile ? undefined : document.getElementById('widget');
+    return (_jsx(Drawer.Root, { open: show, onOpenChange: handleOpenChange, container: container, snapPoints: snapPointsHeight, activeSnapPoint: snap, setActiveSnapPoint: setSnap, fadeFromIndex: 0, onDrag: (e) => {
+            if (e.movementY < 0 && !expandRef.current?.classList.contains('hidden'))
+                expandRef.current?.classList.add('hidden');
+        }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: (e) => { onAnimationEnd && onAnimationEnd(e); }, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
+                        ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
+                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0.5 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('fixed sm:absolute flex flex-col bg-secondary-700 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-4 text-primary-text ring-0! outline-hidden! ', className, {
+                        'border-none! rounded-none!': snap === 1,
+                        '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
+                    }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobile &&
+                                    _jsx("div", { className: "flex justify-center w-full mt-2 mb-[6px]", children: _jsx(Drawer.Handle, { className: '!w-12 !bg-primary-text-tertiary' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-4 sm:pt-2 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold w-full", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { children: _jsx(IconButton, { className: 'inline-flex active:animate-press-down', icon: _jsx(X, { strokeWidth: 3 }) }) }) })] }), description &&
+                                    _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-4", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-4 styled-scroll overflow-x-hidden relative', {
+                                'overflow-y-auto h-full': snap === 1,
+                                'overflow-hidden': snap !== 1,
+                            }), id: "virtualListContainer", children: [children, _jsx(AnimatePresence, { children: !isLastSnap && snapElement &&
+                                        _jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, ref: expandRef, style: { top: `${Number(snapElement.height?.toString().replace('px', '')) - 88}px` }, className: 'w-full fixed left-0 z-50', children: _jsxs("button", { type: 'button', onClick: goToNextSnap, className: "w-full px-4 pt-10 pb-4 justify-center from-secondary-700 bg-gradient-to-t items-center gap-2 inline-flex text-secondary-text", children: [_jsx(ChevronUp, { className: "w-6 h-6 relative" }), _jsx("div", { className: "text-sm font-medium", children: "Expand" })] }) }) }), _jsx(VaulFooter, { snapElement: snapElement })] })] })] }) }));
+};
+const VaulFooter = ({ snapElement }) => {
+    let [ref, { height }] = useMeasure();
+    const { setFooterHeight } = useSnapPoints();
+    useEffect(() => {
+        setFooterHeight(height || 0);
+    }, [height]);
+    return (_jsx("div", { ref: ref, id: 'walletModalFooter', style: {
+            top: snapElement?.height !== 1 ? `${Number(snapElement?.height?.toString().replace('px', '')) - 50}px` : undefined,
+            bottom: snapElement?.height === 1 ? '12px' : undefined
+        }, className: 'w-full fixed left-0 z-50' }));
+};
+const VaulDrawerSnap = (props) => {
+    const { openFullHeight, ...domProps } = props;
+    let [ref, { height }] = useMeasure();
+    const { setSnapElemenetsHeight } = useSnapPoints();
+    useEffect(() => {
+        if (!height)
+            return;
+        setSnapElemenetsHeight((prev) => {
+            const id = Number(props.id?.replace('item-', ''));
+            return [{ id, height: height, fullHeight: openFullHeight }, ...prev.filter((item) => item.id !== id)];
+        });
+    }, [height]);
+    return (_jsx("div", { ...domProps, className: props.className ?? 'pb-4', id: props.id, ref: ref, children: props.children }));
+};
+const VaulDrawer = (props) => {
+    const { isMobile } = useWindowDimensions();
+    return (_jsx(SnapPointsProvider, { isMobile: isMobile, children: _jsx(Comp, { ...props, children: props.children }) }));
+};
+VaulDrawer.Snap = VaulDrawerSnap;
+export const ModalFooterPortal = ({ children, isWalletModalOpen }) => {
+    const ref = useRef(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        let element = isWalletModalOpen && document.getElementById('walletModalFooter');
+        if (element) {
+            ref.current = element;
+            setMounted(true);
+        }
+    }, [isWalletModalOpen]);
+    return ref.current && mounted ? createPortal(children, ref.current) : null;
+};
+export default VaulDrawer;

package/dist/esm/components/Pages/Campaigns/Details/Leaderboard.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import { RewardsComponentLeaderboardSceleton } from "../../../../components/Common/Sceletons";
+import useSWR from "swr";
+import ClickTooltip from "../../../../components/Common/ClickTooltip";
+import shortenAddress from "../../../../components/utils/ShortenAddress";
+import { truncateDecimals } from "../../../../components/utils/RoundDecimals";
+import AddressIcon from "../../../../components/Common/AddressIcon";
+import Modal from "../../../../components/Modal/modal";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
+import { useSelectedAccount } from "../../../../context/balanceAccounts";
+import { useWallet } from "../../../../exports";
+const Component = ({ campaign }) => {
+    const [openTopModal, setOpenTopModal] = useState(false);
+    const selectedSourceAccount = useSelectedAccount("from", campaign.network?.name);
+    const { wallets } = useWallet(campaign.network, 'autofil');
+    const wallet = wallets.find(w => w.id === selectedSourceAccount?.id);
+    const address = wallet?.address;
+    const handleOpenTopModal = () => {
+        setOpenTopModal(true);
+    };
+    const apiClient = new LayerSwapApiClient();
+    const { data: leaderboardData, isLoading } = useSWR(`/campaigns/${campaign?.id}/leaderboard`, apiClient.fetcher, { dedupingInterval: 60000 });
+    const { data: rewardsData } = useSWR(`/campaigns/${campaign.id}/rewards/${address}`, apiClient.fetcher, { dedupingInterval: 60000 });
+    const leaderboard = leaderboardData?.data;
+    if (isLoading) {
+        return _jsx(RewardsComponentLeaderboardSceleton, {});
+    }
+    if (!leaderboard) {
+        //TODO handle
+        return _jsx(_Fragment, {});
+    }
+    return _jsxs("div", { className: "space-y-2", children: [leaderboard?.leaderboard?.length > 0 &&
+                _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-bold text-left leading-5 text-primary-text", children: "Leaderboard" }), _jsx("button", { onClick: handleOpenTopModal, type: "button", className: " leading-4 text-base text-primary underline hover:no-underline hover:text-primary/80", children: "Top 10" })] }), _jsx("p", { className: "text-sm text-secondary-text", children: "Users who earn the most throughout the program will be featured here." }), _jsx(LeaderbordComponent, { campaign: campaign, leaderboardData: leaderboardData, rewardsData: rewardsData, address: address, lines: 3 }), _jsx(Modal, { height: "full", header: 'Leaderboard', show: openTopModal, setShow: setOpenTopModal, modalId: "leaderBoard", children: _jsx(LeaderbordComponent, { campaign: campaign, leaderboardData: leaderboardData, rewardsData: rewardsData, address: address, className: "text-secondary-text" }) })] });
+};
+const LeaderbordComponent = ({ campaign, leaderboardData, rewardsData, address, lines, className }) => {
+    const leaderboard = leaderboardData?.data;
+    if (!leaderboard) {
+        //TODO handle
+        return _jsx(_Fragment, {});
+    }
+    const rewards = rewardsData?.data;
+    const network = campaign.network;
+    const position = rewards?.user_reward.position || NaN;
+    const token = campaign.token;
+    const leaderboardRewards = [
+        leaderboard.leaderboard_budget * 0.6,
+        leaderboard.leaderboard_budget * 0.3,
+        leaderboard.leaderboard_budget * 0.1
+    ];
+    return (_jsx("div", { className: `bg-secondary-500 border border-secondary-500 hover:border-secondary-400 transition duration-200 rounded-lg shadow-lg${className || ''}`, children: _jsx("div", { className: "p-3", children: _jsxs("div", { className: "space-y-6", children: [leaderboard?.leaderboard?.filter(u => (lines !== undefined ? u.position <= lines : true)).map(user => (_jsxs("div", { className: "items-center flex justify-between", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [user.position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: user.address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: user?.address && network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", user?.address), rel: "noopener noreferrer", children: user.position === rewards?.user_reward?.position ? _jsx("span", { className: "text-primary", children: "You" }) : shortenAddress(user.address) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(user.amount, token?.precision), " ", token?.symbol] })] })] })] }), user.position <= 3 && leaderboard.leaderboard_budget > 0 &&
+                                _jsx("div", { className: "text-right flex items-center space-x-2", children: _jsx(ClickTooltip, { text: _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("span", { children: "+" }), _jsx("div", { className: "h-3.5 w-3.5 relative", children: _jsx(ImageWithFallback, { src: network?.logo || '', alt: "Address Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsx("p", { children: _jsxs("span", { children: [leaderboardRewards[user.position - 1], " ", token?.symbol] }) })] }) }) })] }, user.position))), lines !== undefined && position > lines && address && rewards?.user_reward &&
+                        _jsxs("div", { className: position > lines ? "mt-0! pt-0!" : "", children: [position > lines + 1 && _jsx("div", { className: "text-2xl text-center leading-3 text-secondary-text my-3", children: "..." }), _jsx("div", { className: "items-center flex justify-between", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("p", { className: "text-xl font-medium text-primary-text w-fit mr-1", children: [position, "."] }), _jsxs("div", { className: "cols-start-2 flex items-center space-x-2", children: [_jsx(AddressIcon, { address: address, size: 25 }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-bold text-primary-text leading-3", children: network?.account_explorer_template && _jsx("a", { target: "_blank", className: "hover:opacity-80", href: network?.account_explorer_template?.replace("{0}", address), rel: "noopener noreferrer", children: _jsx("span", { className: "text-primary", children: "You" }) }) }), _jsxs("p", { className: "mt-1 text-sm font-medium text-secondary-text leading-3", children: [truncateDecimals(rewards.user_reward.total_amount, token?.precision), " ", token?.symbol] })] })] })] }) }, position)] })] }) }) }));
+};
+export default Component;

package/dist/esm/components/Pages/Campaigns/Details/Rewards.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import BackgroundField from "../../../../components/Common/backgroundField";
+import { Clock } from "lucide-react";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import { RewardsComponentSceleton } from "../../../../components/Common/Sceletons";
+import useSWR from "swr";
+import ClickTooltip from "../../../../components/Common/ClickTooltip";
+import shortenAddress from "../../../../components/utils/ShortenAddress";
+import { Progress } from "../../../../components/shadcn/progressBar";
+import useWallet from "../../../../hooks/useWallet";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
+const Rewards = ({ campaign }) => {
+    const network = campaign?.network;
+    const { provider } = useWallet(network, 'autofil');
+    const wallet = provider?.activeWallet;
+    const address = wallet?.address;
+    const apiClient = new LayerSwapApiClient();
+    const { data: rewardsData, isLoading: rewardsIsLoading } = useSWR(`/campaigns/${campaign.id}/rewards/${address}`, apiClient.fetcher, { dedupingInterval: 60000 });
+    const { data: payoutsData, isLoading: payoutsIsLoading } = useSWR(`/campaigns/${campaign.id}/payouts/${address}`, apiClient.fetcher, { dedupingInterval: 60000 });
+    if (rewardsIsLoading || payoutsIsLoading) {
+        return _jsx(RewardsComponentSceleton, {});
+    }
+    const payouts = payoutsData?.data || [];
+    const rewards = rewardsData?.data;
+    const campaignEndDate = new Date(campaign.end_date);
+    const now = new Date();
+    const next = rewards?.next_airdrop_date ? new Date(rewards?.next_airdrop_date) : null;
+    const difference_in_days = next ?
+        Math.floor(Math.abs(((next.getTime() - now.getTime())) / (1000 * 3600 * 24))) : null;
+    const difference_in_hours = (next && difference_in_days) ?
+        Math.round(Math.abs(((next.getTime() - now.getTime())) / (1000 * 3600) - (difference_in_days * 24)))
+        : null;
+    const campaignIsEnded = (campaignEndDate.getTime() - now.getTime()) < 0;
+    return _jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: campaign.description ?
+                                _jsx("span", { children: campaign.description })
+                                :
+                                    _jsxs(_Fragment, { children: [_jsx("span", { children: "Onboarding incentives that are earned by transferring to\u00A0" }), network?.display_name, _jsx("span", { children: ".\u00A0" })] }) }) }), _jsxs("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: [!campaignIsEnded &&
+                                _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Pending Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that will be airdropped periodically.` }), " "] }), _jsx("span", { children: "Next Airdrop" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx(ImageWithFallback, { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_pending_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("div", { className: "flex items-center space-x-1", children: [_jsx(Clock, { className: "h-5" }), _jsxs("p", { children: [difference_in_days, "d ", difference_in_hours, "h"] })] })] }) }), _jsx(BackgroundField, { header: _jsxs("span", { className: "flex justify-between", children: [_jsxs("span", { className: "flex items-center", children: [_jsx("span", { children: "Total Earnings\u00A0" }), _jsx(ClickTooltip, { text: `${campaign.token.symbol} tokens that you've earned so far (including Pending Earnings).` })] }), _jsx("span", { children: "Current Value" })] }), withoutBorder: true, children: _jsxs("div", { className: "flex justify-between w-full text-slate-300 text-2xl", children: [_jsxs("div", { className: "flex items-center space-x-1", children: [_jsx("div", { className: "h-5 w-5 relative", children: _jsx(ImageWithFallback, { src: campaign.token?.logo || '', alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-full object-contain" }) }), _jsxs("p", { children: [rewards?.user_reward.total_amount, " ", _jsx("span", { className: "text-base sm:text-2xl", children: campaign.token.symbol })] })] }), _jsxs("p", { children: [_jsx("span", { children: "$" }), _jsx("span", { children: rewards?.user_reward?.total_amount_in_usd.toFixed(rewards?.user_reward?.total_amount_in_usd > 0 ? 2 : 0) || 0 })] })] }) })] })] }), _jsx(ProgressComponent, { campaign: campaign, rewardsData: rewardsData?.data }), payouts.length > 0 &&
+                _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "font-bold text-lg text-left", children: "Payouts" }), _jsx("div", { className: " bg-secondary-700 divide-y divide-secondary-300 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx("div", { className: "inline-block min-w-full align-middle", children: _jsx("div", { className: "overflow-hidden shadow-sm ring-1 ring-black/5 sm:rounded-lg", children: _jsxs("table", { className: "min-w-full divide-y divide-secondary-500", children: [_jsx("thead", { className: "bg-secondary-800/70", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "py-3.5 pl-4 text-left text-sm font-semibold  sm:pl-6", children: "Tx Id" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Amount" }), _jsx("th", { scope: "col", className: "px-3 py-3.5 text-left text-sm font-semibold ", children: "Date" })] }) }), _jsx("tbody", { className: "divide-y divide-secondary-600", children: payouts.map((payout) => (_jsxs("tr", { children: [_jsx("td", { className: "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-primary-text sm:pl-6 underline hover:no-underline", children: _jsx("a", { target: "_blank", href: network?.transaction_explorer_template?.replace("{0}", payout.transaction_id), children: shortenAddress(payout.transaction_id) }) }), _jsx("td", { className: "whitespace-nowrap px-3 py-4 text-sm text-gray-100", children: payout.amount }), _jsx("td", { className: "px-3 py-4 text-sm text-gray-100", children: new Date(payout.date).toLocaleString() })] }, payout.transaction_id))) })] }) }) }) })] })] });
+};
+const ProgressComponent = ({ campaign, rewardsData }) => {
+    if (campaign.max_payout_amount) {
+        const weeklyEarned = rewardsData?.user_reward.period_pending_amount || 0;
+        return _jsx("div", { className: "bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx(BackgroundField, { header: _jsx("p", { children: "Weekly reward earned" }), withoutBorder: true, children: _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx(Progress, { value: weeklyEarned === Infinity ? 0 : weeklyEarned }), _jsxs("div", { className: "flex justify-between w-full font-semibold text-sm ", children: [_jsxs("div", { className: "text-primary", children: [_jsx("span", { className: "text-primary-text", children: weeklyEarned.toFixed(0) }), " ", _jsx("span", { children: "/" }), " ", campaign.max_payout_amount, " ", campaign.token.symbol] }), _jsx("div", { children: "Refreshes every 7 days" })] })] }) }) });
+    }
+    const DistributedAmount = ((campaign.distributed_amount / campaign.total_budget) * 100);
+    const totalBudget = campaign.total_budget;
+    return (_jsx("div", { className: "bg-secondary-700 rounded-lg shadow-lg border border-secondary-700 hover:border-secondary-500 transition duration-200", children: _jsx(BackgroundField, { header: _jsx(_Fragment, { children: _jsxs("div", { className: "flex items-center", children: [_jsxs("span", { children: [campaign.token.symbol, " pool"] }), _jsx(ClickTooltip, { text: `The amount of ${campaign.token.symbol} to be distributed during this round of the campaign.` })] }) }), withoutBorder: true, children: _jsxs("div", { className: "flex flex-col w-full gap-2", children: [_jsx(Progress, { value: DistributedAmount === Infinity ? 0 : DistributedAmount }), _jsx("div", { className: "flex justify-between w-full font-semibold text-sm ", children: _jsxs("div", { className: "text-primary", children: [_jsx("span", { className: "text-primary-text", children: campaign?.distributed_amount.toFixed(0) }), " ", _jsx("span", { children: "/" }), " ", totalBudget, " ", campaign.token.symbol] }) })] }) }) }));
+};
+export default Rewards;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Gift } from "lucide-react";
+import LayerSwapApiClient from "../../../../lib/apiClients/layerSwapApiClient";
+import useSWR from "swr";
+import SubmitButton from "../../../../components/Buttons/submitButton";
+import WalletIcon from "../../../../components/Icons/WalletIcon";
+import LinkWrapper from "../../../../components/Common/LinkWrapper";
+import { Widget } from "../../../../components/Widget/Index";
+import Leaderboard from "./Leaderboard";
+import Rewards from "./Rewards";
+import SpinIcon from "../../../../components/Icons/spinIcon";
+import useWallet from "../../../../hooks/useWallet";
+import { useConnectModal } from "../../../../components/Wallet/WalletModal";
+import { ImageWithFallback } from "../../../../components/Common/ImageWithFallback";
+import { LayerswapProvider } from "../../../../context/LayerswapProvider";
+export const CampaignDetailsComponent = ({ campaignName }) => {
+    const apiClient = new LayerSwapApiClient();
+    const { data: campaignsData, isLoading } = useSWR('/campaigns', apiClient.fetcher);
+    const campaign = campaignsData?.data?.find(c => c.name === campaignName);
+    const network = campaign?.network;
+    const { provider } = useWallet(network, 'autofil');
+    const { connect } = useConnectModal();
+    const handleConnect = useCallback(async () => {
+        await connect(provider);
+    }, [provider, network]);
+    const wallet = provider?.activeWallet;
+    const isConnected = !!wallet?.address;
+    if (isLoading) {
+        return _jsx(Loading, {});
+    }
+    if (!campaign) {
+        return _jsx(NotFound, {});
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Widget.Content, { children: _jsxs("div", { className: "space-y-5", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "h-7 w-7 relative", children: (campaign.logo_url || network?.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || network?.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("p", { className: "font-bold text-xl text-left flex items-center text-primary-text", children: campaign.display_name })] }), isConnected ?
+                            _jsx(Rewards, { campaign: campaign })
+                            :
+                                _jsx(BriefInformation, { campaign: campaign }), _jsx(Leaderboard, { campaign: campaign })] }) }), _jsx(_Fragment, { children: !isConnected &&
+                    _jsx(Widget.Footer, { children: _jsx(SubmitButton, { isDisabled: false, isSubmitting: false, onClick: handleConnect, icon: _jsx(WalletIcon, { className: "stroke-2 w-6 h-6" }), children: "Connect a wallet" }) }) })] }));
+};
+const BriefInformation = ({ campaign }) => _jsx("p", { className: "text-secondary-text text-base", children: campaign.description ?
+        campaign.description
+        :
+            _jsxs(_Fragment, { children: [_jsx("span", { children: "You can earn $" }), _jsx("span", { children: campaign?.token.symbol }), _jsx("span", { children: "\u00A0tokens by transferring assets to\u00A0" }), _jsxs("span", { children: [campaign.network.display_name, "."] }), _jsx("span", { children: " For each transaction, you'll receive\u00A0" }), _jsx("span", { children: campaign?.percentage }), _jsx("span", { children: "% of paid fees back.\u00A0" })] }) });
+const Loading = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsx("div", { className: "absolute top-[calc(50%-5px)] left-[calc(50%-5px)]", children: _jsx(SpinIcon, { className: "animate-spin h-5 w-5" }) }) }) });
+const NotFound = () => _jsx(Widget, { children: _jsx(Widget.Content, { children: _jsxs("div", { className: "h-[364px] flex flex-col items-center justify-center space-y-4", children: [_jsx(Gift, { className: "h-20 w-20 text-primary" }), _jsx("p", { className: "font-bold text-center", children: "Campaign not found" }), _jsx(LinkWrapper, { className: "text-xs underline hover:no-underline", href: '/campaigns', children: "See all campaigns" })] }) }) });
+export const CampaignDetails = (props) => {
+    return (_jsx(LayerswapProvider, { ...props, children: _jsx(Widget, { goBack: props.goBack, children: _jsx(CampaignDetailsComponent, { campaignName: props.campaignName }) }) }));
+};

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Gift } from "lucide-react";
+import LayerSwapApiClient from "../../../lib/apiClients/layerSwapApiClient";
+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);
+    const campaigns = campaignsData?.data;
+    const sortedCampaigns = campaigns?.sort((a, b) => {
+        const dateA = new Date(a.end_date).getTime();
+        const dateB = new Date(b.end_date).getTime();
+        return dateA - dateB;
+    });
+    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 ?
+                                            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" }) }) }) }));
+};
+const CampaignItem = ({ campaign, onCampaignSelect }) => {
+    const campaignDaysLeft = ((new Date(campaign.end_date).getTime() - new Date().getTime()) / 86400000).toFixed();
+    const campaignIsActive = IsCampaignActive(campaign);
+    return _jsxs("div", { onClick: () => onCampaignSelect(campaign), className: "flex justify-between items-center", children: [_jsxs("span", { className: "flex items-center gap-1 hover:opacity-70 active:scale-90 duration-200 transition-all", children: [_jsx("span", { className: "h-5 w-5 relative", children: (campaign.logo_url || campaign.network.logo) && _jsx(ImageWithFallback, { src: (campaign.logo_url || campaign.network.logo), alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsxs("span", { className: "font-semibold text-base text-left flex items-center", children: [campaign?.display_name, " "] })] }), campaignIsActive &&
+                _jsxs("span", { className: "text-primary-text-tertiary text-right text-sm", children: [campaignDaysLeft, " days left"] })] });
+};
+function IsCampaignActive(campaign) {
+    const now = new Date();
+    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 }) }) }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useIntercom } from "react-use-intercom";
+import SubmitButton from "../../../components/Buttons/submitButton";
+import LayerSwapLogo from "../../../components/Icons/layerSwapLogo";
+import TwitterLogo from "../../../components/Icons/TwitterLogo";
+function MaintananceContent(props) {
+    const { boot, update } = useIntercom();
+    useEffect(() => {
+        boot();
+        update();
+    });
+    const twitterLogo = _jsx(TwitterLogo, { className: "text-primary-text h-6 w-6" });
+    return (_jsxs("div", { className: "flex items-stretch flex-col", children: [_jsx(LayerSwapLogo, { className: "h-8 mt-4 md:hidden w-auto text-primary-logoColor fill-primary-text" }), _jsx("div", { ...props, children: _jsxs("div", { className: "bg-secondary-700 shadow-card rounded-lg w-full mt-10 overflow-hidden relative", children: [_jsx("div", { className: "relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500" }), _jsx("div", { className: "p-2", children: _jsxs("div", { className: "flex flex-col justify-center space-y-12 p-10 text-primary-text md:min-h-fit min-h-[400px]", children: [_jsxs("h1", { className: "text-xl tracking-tight text-gray-200", children: [_jsx("p", { className: "mb-4 text-secondary-text", children: "We're upgrading our systems and infrastructure to give you the best experience yet." }), _jsxs("span", { className: "block font-bold text-2xl xl:inline", children: [_jsx("span", { children: "We'll be back at" }), " ", _jsx("span", { children: new Date(1748448000000).toLocaleTimeString() })] })] }), _jsx(SubmitButton, { onClick: () => window.open('https://twitter.com/layerswap', '_blank'), icon: twitterLogo, isDisabled: false, isSubmitting: false, children: "Follow for updates" })] }) })] }) })] }));
+}
+export default MaintananceContent;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import MessageComponent from "../../Common/MessageComponent";
+import inIframe from "../../utils/inIframe";
+function NoCookies(props) {
+    const [embedded, setEmbedded] = useState();
+    useEffect(() => {
+        setEmbedded(inIframe());
+    }, []);
+    return (_jsx("div", { className: "styled-scroll", children: _jsx("div", { className: "min-h-screen overflow-hidden relative font-robo", children: _jsx("div", { className: "mx-auto max-w-xl bg-secondary-700 shadow-card rounded-lg w-full overflow-hidden relative px-0 md:px-8 py-6 h-[500px] min-h-[550px]", children: _jsx(MessageComponent, { children: _jsxs(MessageComponent.Content, { icon: "red", children: [_jsx(MessageComponent.Header, { children: "Sorry" }), _jsxs(MessageComponent.Description, { children: [_jsxs("div", { className: "text-secondary-text space-y-5 text-left", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-primary-text", children: "It seems like you\u2019ve either:" }), _jsxs("ul", { className: "text-secondary-text list-disc ml-4 mt-0 ", children: [_jsx("li", { children: "Disabled cookies" }), _jsx("li", { children: "Or using Layerswap in a partner\u2019s page in Incognito mode" })] })] }), _jsx("p", { className: "text-secondary-text", children: "Unforunately, we can\u2019t run in those conditions \uD83D\uDE41" })] }), embedded &&
+                                        _jsx("a", { target: "_blank", href: window?.location?.href, className: "bg-primary text-primary-buttonTextColor py-3 px-3 border border-primary disabled:border-primary-900 shadowed-button items-center space-x-1 disabled:text-primary/40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md shadow-md hover:shadow-xl transform hover:-translate-y-0.5 transition duration-200 ease-in-out", rel: "noopener noreferrer", children: "Try on Layerswap" })] })] }) }) }) }) }));
+}
+export default NoCookies;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import ValidationError from "../../../../components/Pages/Swap/Form/SecondaryComponents/validationError";
+import CexPicker, { SelectedEchangePlaceholder } from "../../../../components/Input/CexPicker";
+import { Widget } from "../../../../components/Widget/Index";
+import FormButton from "./SecondaryComponents/FormButton";
+import { Form, useFormikContext } from "formik";
+import RoutePicker from "../../../../components/Input/RoutePicker";
+import AmountField from "../../../../components/Input/Amount";
+import Address from "../../../../components/Input/Address";
+import { ChevronDown } from "lucide-react";
+import AddressIcon from "../../../../components/Common/AddressIcon";
+import { ExtendedAddress } from "../../../../components/Input/Address/AddressPicker/AddressWithIcon";
+import MinMax from "../../../../components/Input/Amount/MinMax";
+import { transformFormValuesToQuoteArgs, useQuoteData } from "../../../../hooks/useFee";
+import { useValidationContext } from "../../../../context/validationContext";
+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 QuoteDetails from "./FeeDetails";
+import DepositMethodComponent from "./FeeDetails/DepositMethod";
+const ExchangeForm = ({ partner }) => {
+    const { values, isSubmitting } = useFormikContext();
+    const triggerFormChangeCallback = useFormChangeCallback();
+    useEffect(() => {
+        triggerFormChangeCallback(values);
+    }, [values, triggerFormChangeCallback]);
+    const { fromAsset: fromCurrency, from, to: destination, destination_address, amount } = values || {};
+    const quoteArgs = useMemo(() => transformFormValuesToQuoteArgs(values, true), [values]);
+    const [actionTempValue, setActionTempValue] = useState(undefined);
+    const { wallets } = useWallet();
+    const wallet = wallets.find(wallet => wallet.address.toLowerCase() == destination_address?.toLowerCase());
+    const { swapId } = useSwapDataState();
+    const quoteRefreshInterval = !!swapId ? 0 : undefined;
+    const { isQuoteLoading, quote, minAllowedAmount, maxAllowedAmount: maxAmountFromApi } = useQuoteData(quoteArgs, quoteRefreshInterval);
+    const { routeValidation, formValidation } = useValidationContext();
+    const isValid = !formValidation.message;
+    const error = formValidation.message;
+    const { ref: parentRef, isActive: showQuickActions, activate: setShowQuickActions } = useClickOutside(false);
+    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: _jsx("div", { className: "w-full max-sm:min-h-[79svh] flex flex-col justify-between mt-2 sm:mt-0", children: _jsx("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full leading-4', children: _jsxs("div", { className: "flex flex-col w-full space-y-4", 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", children: _jsx(Address, { partner: partner, children: ({ addressItem }) => _jsx(_Fragment, { children: addressItem ? _jsx(_Fragment, { children: _jsx(AddressButton, { address: addressItem.address, network: destination, wallet: wallet }) })
+                                                                : 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 }) })] })] }) }) }) }), _jsxs(Widget.Footer, { children: [_jsxs("div", { className: "space-y-3", children: [routeValidation.message
+                                        ? _jsx(ValidationError, {})
+                                        : null, _jsx(QuoteDetails, { swapValues: values, quote: quote, isQuoteLoading: isQuoteLoading })] }), _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 }) => {
+    return _jsxs("div", { className: "justify-between w-full items-center flex font-light space-x-2 mx-auto rounded-lg focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex bg-secondary-400 text-primary-text items-center justify-center rounded-md h-7 w-7 overflow-hidden", children: wallet?.icon ? (_jsx(wallet.icon, { className: "h-7 w-7 object-contain" })) : (_jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: address, size: 36 })) }), _jsx(ExtendedAddress, { address: address, network: network, showDetails: wallet ? true : false, title: wallet?.displayName?.split("-")[0], description: wallet?.providerName, logo: wallet?.icon })] }), _jsx("span", { className: "justify-self-end right-0 flex items-center pointer-events-none  text-primary-text", children: _jsx("span", { className: "absolute right-0 pr-2 pointer-events-none text-primary-text", children: _jsx(ChevronDown, { className: "h-4 w-4 text-secondary-text", "aria-hidden": "true" }) }) })] });
+};

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

@@ -0,0 +1,89 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useEffect, useRef } from "react";
+import { useInitialSettings } from "../../../../../../context/settings";
+import useWallet from "../../../../../../hooks/useWallet";
+const depositMethods = [
+    {
+        id: 'wallet',
+        display_name: 'Wallet'
+    },
+    {
+        id: 'deposit_address',
+        display_name: 'Deposit address'
+    }
+];
+const DepositMethodComponent = () => {
+    const { values, setFieldValue, } = useFormikContext();
+    const { depositMethod: defaultDepositMethod, hideDepositMethod } = useInitialSettings();
+    const { from, depositMethod, fromExchange, fromAsset } = values;
+    const { provider } = useWallet(from, 'withdrawal');
+    const name = 'depositMethod';
+    const menuItems = from && GenerateDepositMethodMenuItems(from, depositMethods, provider);
+    const defaultMethod = menuItems?.find(i => i.id === defaultDepositMethod);
+    const menuItemsRef = useRef();
+    menuItemsRef.current = menuItems;
+    useEffect(() => {
+        const first = menuItemsRef.current?.[0]?.id;
+        if (fromExchange) {
+            setFieldValue(name, 'deposit_address', true);
+            return;
+        }
+        else if (defaultMethod) {
+            setFieldValue(name, defaultMethod?.id, true);
+            return;
+        }
+        else if (!(menuItems?.find(i => i.id === depositMethod))) {
+            setFieldValue(name, first, true);
+            return;
+        }
+    }, [from, fromExchange, fromAsset]);
+    const hasOptions = Number(menuItems?.length) > 1 && !fromExchange;
+    if (!hasOptions || (defaultMethod && hideDepositMethod))
+        return null;
+    return (_jsx(_Fragment, {})
+    // <div className="relative w-full mb-1">
+    //     <Popover open={showModal} onOpenChange={setShowModal}>
+    //         <PopoverTrigger className="font-semibold text-secondary-text text-xs flex items-center space-x-1 p-2">
+    //             <span> Transfer via </span> <span>{selectedMethod?.toLowerCase()}</span> <motion.div
+    //                 animate={showModal ? "open" : "closed"}
+    //                 variants={variants}
+    //             >
+    //                 <ChevronDown className="w-4 h-4" />
+    //             </motion.div>
+    //         </PopoverTrigger>
+    //         <PopoverContent className='ml-2 mt-1 space-y-1 text-sm p-2 max-w border-none rounded-xl bg-secondary-800 max-w-72 md:max-w-96' align="start">
+    //             <DepositMethod
+    //                 onselect={handleSelect}
+    //                 value="wallet"
+    //                 icon={<WalletIcon
+    //                     strokeWidth={2} className="w-6 h-6" />}
+    //                 description="Connect your wallet and transfer instantly"
+    //                 title="Wallet"
+    //                 selectedValue={depositMethod}
+    //             />
+    //             <DepositMethod
+    //                 onselect={handleSelect}
+    //                 value="deposit_address"
+    //                 icon={<AlignLeft strokeWidth={2} className="w-6 h-6" />}
+    //                 description="Manually transfer to a Deposit Address generated specifically for you"
+    //                 title="Deposit address"
+    //                 selectedValue={depositMethod}
+    //             />
+    //         </PopoverContent>
+    //     </Popover>
+    // </div>
+    );
+};
+const DepositMethod = ({ icon, title, description, selectedValue, value, onselect }) => {
+    const selected = selectedValue === value;
+    return (_jsx("div", { className: `p-3 ${selected ? 'text-primary-text bg-secondary-600' : 'text-secondary-text'} flex rounded-lg cursor-pointer hover:bg-secondary-500`, onClick: () => onselect(value), children: _jsxs("div", { className: "grid grid-cols-9 gap-2 md:gap-0 w-full", children: [_jsx("div", { children: icon }), _jsxs("div", { className: " col-span-8   flex", children: [_jsxs("div", { className: "w-full", children: [_jsx("div", { className: `font-semibold text-base`, children: title }), _jsx("div", { className: "text-secondary-text text-xs", children: description })] }), selected &&
+                            _jsx("div", { className: "flex items-center justify-center", children: _jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }) })] })] }) }));
+};
+function GenerateDepositMethodMenuItems(network, depositMethods, walletProvider) {
+    if (!walletProvider) {
+        return depositMethods.filter(m => m.id === 'deposit_address');
+    }
+    return depositMethods.filter(m => network?.deposit_methods?.some(dm => dm === m.id));
+}
+export default DepositMethodComponent;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
+export const RateElement = ({ fromAsset, toAsset, requestAmount, receiveAmount, }) => {
+    const [flipped, setFlipped] = useState(false);
+    if (!requestAmount || !receiveAmount) {
+        return null;
+    }
+    const fromRate = receiveAmount / requestAmount;
+    const toRate = requestAmount / receiveAmount;
+    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/ReceiveAmounts.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { truncateDecimals } from "../../../../../components/utils/RoundDecimals";
+import { resolveTokenUsdPrice } from "../../../../../helpers/tokenHelper";
+export const ReceiveAmounts = ({ source_token, destination_token, fee, isFeeLoading }) => {
+    const receive_amount = fee?.quote.receive_amount;
+    const parsedReceiveAmount = truncateDecimals(receive_amount ?? 0, destination_token?.precision);
+    const receiveTokenPriceInUsd = resolveTokenUsdPrice(destination_token, fee?.quote);
+    const receiveAmountInUsd = receive_amount && receiveTokenPriceInUsd ? (receive_amount * receiveTokenPriceInUsd).toFixed(2) : undefined;
+    return _jsx("div", { className: "w-full h-full mt-3", children: _jsxs("div", { className: "flex flex-col justify-between w-full px-2 pb-2", children: [_jsx("span", { className: "block font-normal text-secondary-text text-base leading-5", children: "You will receive" }), isFeeLoading ? (_jsx("div", { className: 'h-[10px] w-16 inline-flex bg-gray-500 rounded-xs animate-pulse self-center' })) :
+                    _jsx("div", { className: "flex", children: source_token && destination_token && Number(parsedReceiveAmount) > 0 ?
+                            _jsx("div", { className: "flex items-center justify-end", children: _jsxs("p", { className: "text-primary-text text-base leading-5 mt-2.5 font-medium", children: [_jsx(_Fragment, { children: parsedReceiveAmount }), "\u00A0", _jsx("span", { children: destination_token?.symbol }), receiveAmountInUsd !== undefined && Number(receiveAmountInUsd) > 0 &&
+                                            _jsxs("span", { className: "text-secondary-text text-sm font-medium ml-2", children: ["$", receiveAmountInUsd] })] }) })
+                            : '-' })] }) });
+};