@layerswap/widget 0.1.20 → 1.0.0-alpha1.1

package/dist/esm/components/Input/SourcePicker.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SourceWalletPicker from "./SourceWalletPicker";
+import RoutePicker from "./RoutePicker";
+import AmountField from "./Amount";
+import { useFormikContext } from "formik";
+import MinMax from "./Amount/MinMax";
+import clsx from "clsx";
+import { useClickOutside } from "../../hooks/useClickOutside";
+import { useState } from "react";
+const SourcePicker = ({ minAllowedAmount, maxAllowedAmount: maxAmountFromApi, fee }) => {
+    const { values } = useFormikContext();
+    const { fromAsset: fromCurrency, from, depositMethod } = values || {};
+    const { ref: parentRef, isActive: showQuickActions, activate: setShowQuickActions } = useClickOutside(false);
+    const [actiontempValue, setActionTempValue] = useState(undefined);
+    const handleActionHover = (value) => {
+        setActionTempValue(value);
+    };
+    return _jsxs("div", { className: "flex flex-col w-full bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] group", onClick: setShowQuickActions, ref: parentRef, children: [_jsxs("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: [_jsx("label", { htmlFor: "From", className: "block col-span-5 font-normal text-secondary-text text-base leading-5 mt-0.5", children: "Send from" }), _jsx("div", { className: "col-span-4 justify-self-end", children: _jsx(SourceWalletPicker, {}) })] }), _jsxs("div", { className: "relative", children: [from && fromCurrency &&
+                        _jsx("div", { className: clsx("absolute z-10 -top-[26px] left-0", {
+                                "hidden": !showQuickActions,
+                                "block": showQuickActions
+                            }, "group-hover:block"), children: _jsx(MinMax, { from: from, fromCurrency: fromCurrency, limitsMinAmount: minAllowedAmount, limitsMaxAmount: maxAmountFromApi, onActionHover: handleActionHover, depositMethod: depositMethod }) }), _jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2 w-full max-w-full", children: [_jsx("div", { className: "min-w-0 overflow-hidden", children: _jsx(AmountField, { fee: fee, actionValue: actiontempValue }) }), _jsx("div", { className: "justify-self-end self-start", children: _jsx(RoutePicker, { direction: "from" }) })] })] })] });
+};
+export default SourcePicker;

package/dist/esm/components/Input/SourceWalletPicker.js

@@ -0,0 +1,120 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { useCallback, useState } from "react";
+import useWallet from "../../hooks/useWallet";
+import shortenAddress from "../../components/utils/ShortenAddress";
+import { ChevronDown, CircleHelp, QrCode } from "lucide-react";
+import VaulDrawer, { ModalFooterPortal } from "../../components/Modal/vaulModal";
+import WalletIcon from "../../components/Icons/WalletIcon";
+import SubmitButton from "../../components/Buttons/submitButton";
+import { useConnectModal } from "../../components/Wallet/WalletModal";
+import WalletsList from "../../components/Wallet/WalletComponents/WalletsList";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/shadcn/popover";
+import FilledCheck from "../../components/Icons/FilledCheck";
+import clsx from "clsx";
+import { useSelectedAccount, useUpdateBalanceAccount } from "../../context/balanceAccounts";
+const SourceWalletPicker = () => {
+    const [openModal, setOpenModal] = useState(false);
+    const { values, setFieldValue } = useFormikContext();
+    const source_token = values.fromAsset;
+    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const { provider } = useWallet(values.from, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", values.from?.name);
+    const { selectedConnector } = useConnectModal();
+    const availableWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
+    const handleWalletChange = () => {
+        setOpenModal(true);
+    };
+    const handleSelectWallet = useCallback((props) => {
+        if (props) {
+            selectSourceAccount({
+                id: props.walletId,
+                address: props.address,
+                providerName: props.providerName
+            });
+            setFieldValue('depositMethod', 'wallet');
+        }
+        else {
+            setFieldValue('depositMethod', 'deposit_address');
+        }
+        setOpenModal(false);
+    }, [provider, setFieldValue, selectSourceAccount]);
+    if (!values.from || !source_token)
+        return _jsx(_Fragment, {});
+    return _jsxs(_Fragment, { children: [values.depositMethod === 'deposit_address' ?
+                (provider
+                    ? _jsx("div", { className: "flex items-center space-x-2 text-sm  rounded-lg hover:bg-secondary-400 py-1 pl-2 pr-1", children: _jsxs("div", { onClick: handleWalletChange, className: "flex space-x-1 items-center cursor-pointer", children: [_jsx("div", { className: "text-secondary-text", children: "Manual Transfer" }), _jsx("div", { className: "w-5 h-5 items-center flex text-secondary-text", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) })
+                    : _jsx("div", { className: "text-secondary-text text-sm  rounded-lg hover:bg-secondary-400 py-1 pl-2 pr-1", children: "Manual Transfer" }))
+                :
+                    _jsx("div", { className: "rounded-lg flex items-center space-x-2 text-sm  hover:bg-secondary-400 py-1 pl-2 pr-2", children: selectedSourceAccount && selectedSourceAccount?.address && _jsx(_Fragment, { children: _jsxs("div", { onClick: handleWalletChange, className: "rounded-lg flex space-x-1 items-center cursor-pointer", children: [_jsx("div", { className: "inline-flex items-center relative px-0.5", children: _jsx(selectedSourceAccount.icon, { className: "w-4 h-4" }) }), _jsx("div", { className: "text-secondary-text", children: shortenAddress(selectedSourceAccount.address) }), _jsx("div", { className: "w-4 h-4 items-center flex text-secondary-text", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) }) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: 'Send from', modalId: "connectedWallets", children: _jsxs(VaulDrawer.Snap, { id: "item-1", className: "pb-4 flex flex-col gap-3", children: [_jsx("div", { className: clsx('w-full order-1', {
+                                'order-3 space-y-2': values.depositMethod == 'deposit_address',
+                            }), children: _jsx(WalletsList, { provider: provider, wallets: availableWallets, onSelect: handleSelectWallet, token: source_token, network: values.from, selectedDepositMethod: values.depositMethod, selectable: true }) }), values.from?.deposit_methods?.includes('deposit_address') && !selectedConnector &&
+                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-center gap-2 text-secondary-text order-2", children: [_jsx("hr", { className: "border-secondary-400 w-full" }), _jsx("p", { children: "or" }), _jsx("hr", { className: "border-secondary-400 w-full" })] }), _jsxs("button", { type: "button", onClick: () => handleSelectWallet(), className: clsx('w-full relative flex items-center justify-between gap-2 rounded-lg outline-none bg-secondary-500 p-3 py-4 text-secondary-text hover:bg-secondary-400 cursor-pointer order-1', {
+                                            'order-3': values.depositMethod !== 'deposit_address',
+                                        }), children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(QrCode, { className: "w-5 h-5" }), _jsx("div", { className: "text-base", children: "Transfer Manually" })] }), values.depositMethod == 'deposit_address' &&
+                                                _jsx("div", { className: "flex h-6 items-center px-1", children: _jsx(FilledCheck, {}) })] })] })] }) })] });
+};
+export const FormSourceWalletButton = () => {
+    const [openModal, setOpenModal] = useState(false);
+    const { values, setFieldValue } = useFormikContext();
+    const [mountWalletPortal, setMounWalletPortal] = useState(false);
+    const walletNetwork = values.fromExchange ? undefined : values.from;
+    const { provider } = useWallet(walletNetwork, 'withdrawal');
+    const { isWalletModalOpen, cancel, selectedConnector, connect } = useConnectModal();
+    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const handleWalletChange = () => {
+        setOpenModal(true);
+    };
+    const handleSelectWallet = (props) => {
+        if (props?.address) {
+            selectSourceAccount({
+                address: props.address,
+                id: props.walletId,
+                providerName: props.providerName
+            });
+            setFieldValue('depositMethod', 'wallet');
+        }
+        else {
+            setFieldValue('depositMethod', 'deposit_address');
+        }
+        cancel();
+        setOpenModal(false);
+    };
+    const handleConnect = async () => {
+        setMounWalletPortal(true);
+        const result = await connect(provider);
+        if (result) {
+            selectSourceAccount({
+                id: result.id,
+                address: result.address,
+                providerName: result.providerName
+            });
+        }
+        setMounWalletPortal(false);
+    };
+    const availableWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
+    if (!availableWallets.length && walletNetwork) {
+        return _jsxs(_Fragment, { children: [_jsx(Connect, { connectFn: handleConnect }), mountWalletPortal && values.from?.deposit_methods?.includes('deposit_address') && values.depositMethod !== 'deposit_address' && !selectedConnector &&
+                    _jsx(ModalFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
+    }
+    else if (availableWallets.length > 0 && walletNetwork && values.fromAsset) {
+        return _jsxs(_Fragment, { children: [_jsx("div", { className: "w-full", onClick: handleWalletChange, children: _jsx(Connect, {}) }), _jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, header: `Send from`, modalId: "connectedWallets", children: _jsx(VaulDrawer.Snap, { id: "item-1", className: "space-y-3 pb-3", children: _jsx(WalletsList, { provider: provider, wallets: availableWallets, onSelect: handleSelectWallet, token: values.fromAsset, network: walletNetwork, selectable: true }) }) }), mountWalletPortal && values.from?.deposit_methods?.includes('deposit_address') && values.depositMethod !== 'deposit_address' && !selectedConnector &&
+                    _jsx(ModalFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
+    }
+    return _jsxs(_Fragment, { children: [_jsx(Connect, { setMountWalletPortal: setMounWalletPortal }), mountWalletPortal && !selectedConnector &&
+                _jsx(ModalFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
+};
+const Connect = ({ connectFn, setMountWalletPortal }) => {
+    const { connect } = useConnectModal();
+    const connectWallet = async () => {
+        setMountWalletPortal && setMountWalletPortal(true);
+        await connect();
+        setMountWalletPortal && setMountWalletPortal(false);
+    };
+    return _jsx(SubmitButton, { onClick: () => connectFn ? connectFn() : connectWallet(), type: "button", icon: _jsx(WalletIcon, { className: "h-6 w-6", strokeWidth: 2 }), children: "Connect a wallet" });
+};
+const ContinueWithoutWallet = ({ onClick }) => {
+    //TODO: bg-secondary-700 is a hotfix, should refactor and fix sticky footer for VaulDrawer
+    return (_jsxs("div", { className: "inline-flex items-center gap-1.5 justify-center w-full pt-2 bg-secondary-700", children: [_jsx("button", { type: "button", onClick: onClick, className: "underline hover:no-underline text-base text-center text-secondary-text cursor-pointer ", children: "Continue without a wallet" }), _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx("div", { className: "text-xs text-secondary-text hover:text-primary-text rounded-full transition-colors duration-200 ", children: _jsx(CircleHelp, { className: "h-5 w-5" }) }) }), _jsx(PopoverContent, { side: "top", className: "max-w-[250px] text-xs", children: _jsx("p", { children: "Get a deposit address, send your crypto from any external wallet or exchange, and we'll handle the rest." }) })] })] }));
+};
+export default SourceWalletPicker;

package/dist/esm/components/Input/TransferCEX.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormikContext } from "formik";
+import { ImageWithFallback } from "../Common/ImageWithFallback";
+const TransferCEX = ({ direction }) => {
+    const { values, } = useFormikContext();
+    const { from, to, fromExchange, toExchange } = values;
+    const exchangeNetwork = (direction === 'from' ? from : to);
+    const sourceLogo = fromExchange ? fromExchange.logo : from?.logo;
+    const destinationLogo = toExchange ? toExchange.logo : to?.logo;
+    const learnMoreUrl = fromExchange ? 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-from-cex/' : 'https://docs.layerswap.io/user-docs/layerswap-app/transfer-to-cex/';
+    return (_jsx("div", { className: "font-normal flex flex-col w-full relative z-10 my-3 pb-4 border-b-2 border-b-secondary", children: _jsxs("div", { className: "w-full px-2.5 space-y-2", children: [_jsx("div", { className: "flex items-center mb-", children: _jsxs("p", { className: "text-primary-text-tertiary text-base leading-5", children: [_jsx("span", { children: "Please select an intermediary network available on " }), _jsxs("span", { children: [fromExchange ? fromExchange.display_name : toExchange?.display_name, "\u00A0"] }), _jsx("span", { children: "to be used for " }), _jsx("span", { children: fromExchange ? 'withdrawal' : 'deposit' }), _jsx("span", { children: "." }), _jsx("a", { target: '_blank', href: learnMoreUrl, className: 'text-primary-text-tertiary underline hover:no-underline decoration-primary-text-tertiary ml-1 cursor-pointer', children: "Learn more" })] }) }), _jsxs("div", { className: "relative flex items-center space-x-2 py-2", children: [_jsx("div", { className: "shrink-0 h-6 w-6 relative", children: sourceLogo && _jsx(ImageWithFallback, { src: sourceLogo, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) }), _jsx("div", { className: "w-full h-[2px] bg-primary-text-tertiary my-2 line line-left" }), _jsx("div", { className: "shrink-0 h-8 w-8 relative", children: exchangeNetwork ? _jsx(ImageWithFallback, { src: exchangeNetwork.logo, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) : _jsx("div", { className: "mainImage flex justify-center items-center bg-secondary-400 h-full w-full rounded-md", children: _jsx("span", { className: "font-bold text-primary-text-tertiary text-xl", children: "?" }) }) }), _jsx("div", { className: "w-full h-[2px] bg-primary-text-tertiary my-2 line line-right" }), _jsx("div", { className: "shrink-0 h-6 w-6 relative", children: destinationLogo && _jsx(ImageWithFallback, { src: destinationLogo, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) })] })] }) }));
+};
+export default TransferCEX;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Form, Formik } from 'formik';
+import { useCallback } from 'react';
+import toast from 'react-hot-toast';
+import { useIntercom } from 'react-use-intercom';
+import { SendFeedbackMessage } from '../../lib/telegram';
+import SubmitButton from '../Buttons/submitButton';
+const SendFeedback = ({ onSend }) => {
+    const initialValues = { Feedback: '' };
+    const { boot, show, update } = useIntercom();
+    const handleSendFeedback = useCallback(async (values) => {
+        try {
+            if (values.Feedback.length !== 0) {
+                const sender = "No login";
+                const res = await SendFeedbackMessage(sender, values.Feedback);
+                if (!res.ok) {
+                    throw new Error(res.description || "Could not send feedback, something went wrong");
+                }
+                else {
+                    toast.success("Thank you for reaching out and providing us with valuable feedback.");
+                    onSend();
+                }
+            }
+            else if (values.Feedback.length == 0) {
+                toast.error("This field is required and cannot be empty");
+            }
+        }
+        catch (e) {
+            toast.error(e.message);
+        }
+    }, [onSend]);
+    return (_jsx(Formik, { initialValues: initialValues, onSubmit: handleSendFeedback, validateOnMount: true, validate: (values) => {
+            const errors = {};
+            if (values.Feedback.length === 0) {
+                errors.Feedback = "This field is required and cannot be empty";
+            }
+            return errors;
+        }, children: ({ handleChange, isValid, isSubmitting }) => (_jsxs(Form, { className: 'flex flex-col justify-between', children: [_jsx("div", { className: 'space-y-4 h-full mt-2', children: _jsx("p", { className: 'text-base text-left font-roboto text-secondary-text font-light', children: "Please help us shape the product, catch bugs, and prioritize features. Your feedback will go directly into our Telegram channel." }) }), _jsxs("div", { className: "text-primary-text text-sm space-y-4 flex flex-col pt-8", children: [_jsx("textarea", { id: 'Feedback', name: 'Feedback', onChange: e => {
+                                handleChange(e);
+                            }, className: "h-40 max-h-60 appearance-none block bg-secondary-700 text-primary-text border border-secondary-500 rounded-md py-3 px-4 mb-3 leading-tight focus:ring-0 focus:bg-secondary-500 focus:border-secondary-100 " }), _jsx("button", { type: "button", onClick: () => {
+                                boot();
+                                show();
+                                update();
+                            }, className: "text-center disabled:text-primary-800 text-primary border-0 font-semibold rounded-md focus:outline-hidden transform hover:-translate-y-0.5 transition duration-200 ease-in-out", children: "Need help?" }), _jsx(SubmitButton, { type: 'submit', isDisabled: isSubmitting || !isValid, isSubmitting: isSubmitting, children: "Send" })] })] })) }));
+};
+export default SendFeedback;

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRight, ExternalLink } from "lucide-react";
+import LinkWrapper from "../Common/LinkWrapper";
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+const Menu = ({ children }) => {
+    return _jsx("div", { className: "flex flex-col gap-3", children: children });
+};
+const Group = ({ children }) => {
+    return (_jsx("div", { children: _jsx("div", { className: "divide-y divide-secondary-300 rounded-xl bg-secondary-500 overflow-hidden", children: children }) }));
+};
+const Item = (function Item({ children, pathname, onClick, icon, target = '_self' }) {
+    return (_jsx(_Fragment, { children: pathname ?
+            _jsxs(LinkWrapper, { href: pathname, target: target, className: "gap-4 flex relative cursor-pointer hover:bg-secondary-400 select-none w-full items-center px-4 py-3 outline-hidden text-primary-text", children: [_jsx("div", { children: icon }), _jsx("p", { className: "text-primary-text", children: children }), target === '_self' ?
+                        _jsx(ChevronRight, { className: "h-4 w-4 absolute right-3" })
+                        :
+                            _jsx(ExternalLink, { className: "h-4 w-4 absolute right-3" })] })
+            :
+                _jsxs("button", { type: "button", onClick: onClick, className: `gap-4 flex relative cursor-pointer hover:bg-secondary-400 select-none items-center px-4 py-3 outline-hidden w-full text-primary-text`, children: [_jsx("div", { children: icon }), _jsx("p", { className: "text-primary-text", children: children }), _jsx(ChevronRight, { className: "h-4 w-4 absolute right-3" })] }) }));
+});
+export var ItemType;
+(function (ItemType) {
+    ItemType["button"] = "button";
+    ItemType["link"] = "link";
+})(ItemType || (ItemType = {}));
+const variants = {
+    enter: () => {
+        return ({
+            opacity: 0,
+            y: '100%',
+        });
+    },
+    center: () => {
+        return ({
+            opacity: 1,
+            y: 0,
+        });
+    },
+    exit: () => {
+        return ({
+            y: '100%',
+            zIndex: 0,
+            opacity: 0,
+        });
+    },
+};
+const Footer = ({ children, hidden, sticky = true }) => {
+    const [height, setHeight] = useState(0);
+    const ref = useRef(null);
+    useEffect(() => {
+        setHeight(Number(ref?.current?.clientHeight));
+    }, []);
+    const handleAnimationEnd = (variant) => {
+        if (variant == "center") {
+            setHeight(Number(ref?.current?.clientHeight));
+        }
+    };
+    return (sticky ?
+        _jsxs(_Fragment, { children: [_jsx(motion.div, { onAnimationComplete: handleAnimationEnd, ref: ref, transition: {
+                        duration: 0.15,
+                    }, custom: { direction: -1, width: 100 }, variants: variants, className: `border-t border-secondary-500 text-primary-text text-base mt-3        
+                        fixed
+                        inset-x-0
+                        bottom-0 
+                        z-30
+                        bg-secondary-700 
+                        shadow-widget-footer 
+                        p-4 
+                        pr-6
+                        pl-5 
+                        w-full ${hidden ? 'animation-slide-out' : ''}`, children: children }), _jsx("div", { style: { height: `${height}px` }, className: `text-primary-text text-base        
+                             inset-x-0
+                             bottom-0 
+                             p-4 w-full invisible` })] })
+        :
+            _jsx(_Fragment, { children: children }));
+};
+Menu.Group = Group;
+Menu.Item = Item;
+Menu.Footer = Footer;
+export default Menu;

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

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

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MenuIcon, ChevronLeft } from "lucide-react";
+import { useState } from "react";
+import IconButton from "../Buttons/iconButton";
+import { FormWizardProvider, useFormWizardaUpdate, useFormWizardState } from "../../context/formWizardProvider";
+import { MenuStep } from "../../Models/Wizard";
+import MenuList from "./MenuList";
+import Wizard from "../Wizard/Wizard";
+import WizardItem from "../Wizard/WizardItem";
+import HistoryList from "../Pages/SwapHistory/History";
+import Modal from "../Modal/modal";
+import { CampaignsComponent } from "../Pages/Campaigns";
+import { CampaignDetailsComponent } from "../Pages/Campaigns/Details";
+const Comp = () => {
+    const { goBack, currentStepName } = useFormWizardState();
+    const { goToStep } = useFormWizardaUpdate();
+    const [openTopModal, setOpenTopModal] = useState(false);
+    const [selectedCampaign, setSelectedCampaign] = useState(undefined);
+    const handleModalOpenStateChange = (value) => {
+        setOpenTopModal(value);
+        if (value === false) {
+            goToStep(MenuStep.Menu);
+        }
+    };
+    const goBackToMenuStep = () => { goToStep(MenuStep.Menu, "back"); };
+    const handleGoToStep = (step) => {
+        goToStep(step);
+    };
+    return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx("div", { className: "sm:-mr-2 -mr-0", children: _jsx(IconButton, { className: "inline-flex active:animate-press-down", onClick: () => setOpenTopModal(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }) }), _jsx(Modal, { modalId: "menuModal", show: openTopModal, setShow: handleModalOpenStateChange, header: _jsxs("div", { className: "inline-flex items-center", children: [goBack &&
+                                _jsx(IconButton, { className: "inline-flex", onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }), _jsx("h2", { children: currentStepName })] }), children: _jsxs(Wizard, { wizardId: 'menuWizard', children: [_jsx(WizardItem, { StepName: MenuStep.Menu, inModal: true, children: _jsx(MenuList, { goToStep: handleGoToStep }) }), _jsx(WizardItem, { StepName: MenuStep.Transactions, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(HistoryList, { onNewTransferClick: () => handleModalOpenStateChange(false) }) }), _jsx(WizardItem, { StepName: MenuStep.Campaigns, GoBack: goBackToMenuStep, className: "h-full", inModal: true, children: _jsx(CampaignsComponent, { onCampaignSelect: (campaign) => { handleGoToStep(MenuStep.CampaignDetails); setSelectedCampaign(campaign.name); } }) }), _jsx(WizardItem, { StepName: MenuStep.CampaignDetails, GoBack: () => goToStep(MenuStep.Campaigns, "back"), className: "h-full", inModal: true, children: _jsx(CampaignDetailsComponent, { campaignName: selectedCampaign }) })] }) })] }) });
+};
+const LayerswapMenu = () => {
+    return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));
+};
+export default LayerswapMenu;

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { motion, useAnimation } from "framer-motion";
+import { forwardRef } from 'react';
+import IconButton from '../Buttons/iconButton';
+import { X } from 'lucide-react';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
+// TODO handle overflow when height is set to 'fit'
+export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, title, className, height, position, onClose, walletComp }, topmostRef) {
+    const mobileModalRef = useRef(null);
+    const controls = useAnimation();
+    const transitionProps = { type: "spring", stiffness: 500, damping: 40 };
+    const { isMobile } = useWindowDimensions();
+    const handleDragEnd = useCallback(async (_, info) => {
+        const offset = info.offset.y;
+        const velocity = info.velocity.y;
+        const height = mobileModalRef.current?.getBoundingClientRect().height || 0;
+        if (offset > height / 2 || velocity > 800) {
+            setShow(false);
+            onClose && onClose();
+        }
+        else {
+            controls.start({ y: 0, transition: transitionProps });
+        }
+    }, [controls, setShow, transitionProps]);
+    useEffect(() => {
+        if (isMobile && show) {
+            window.document.body.style.overflow = 'hidden';
+            window.document.body.style.position = 'relative';
+        }
+        return () => {
+            window.document.body.style.overflow = '';
+            window.document.body.style.position = '';
+        };
+    }, [isMobile, show]);
+    useEffect(() => {
+        if (show) {
+            controls.start({
+                y: 0,
+                transition: transitionProps,
+            });
+        }
+    }, [controls, show, transitionProps]);
+    const handleCloseModal = useCallback(async (e) => {
+        await controls.start({ y: "100%", transition: transitionProps, });
+        setShow(false);
+        onClose && onClose();
+    }, [setShow, controls, transitionProps]);
+    let wrapperHeightClass = '';
+    switch (height) {
+        case 'full':
+            wrapperHeightClass = 'h-full';
+            break;
+        case '90%':
+            wrapperHeightClass = 'h-[90%]';
+            break;
+        case '80%':
+            wrapperHeightClass = 'h-[80%]';
+            break;
+        default:
+            wrapperHeightClass = '';
+    }
+    return (_jsxs("div", { ref: topmostRef, children: [_jsx(motion.div, { className: `${position} inset-0 z-40 bg-black/50 block`, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCloseModal }, "backdrop"), _jsx(motion.div, { ref: mobileModalRef, animate: controls, className: `max-h-full overflow-y-hidden group ${position} inset-x-0 bottom-0 z-40 w-full ${height != 'full' ? 'rounded-t-2xl' : ''}  bg-secondary-700 ${wrapperHeightClass} ${className} shadow-lg`, initial: { y: "20%" }, exit: { y: "100%" }, transition: transitionProps, drag: height != 'full' ? "y" : false, dragDirectionLock: true, onDragEnd: handleDragEnd, dragElastic: { top: 0, bottom: 1 }, dragConstraints: { top: 0, bottom: 0 }, children: _jsxs("div", { className: `py-2 overflow-y-auto flex flex-col h-full z-40 ${height != 'full' ? 'bg-secondary-700 rounded-t-2xl ' : ''} pb-4`, children: [_jsxs("div", { className: `px-4 pb-2 flex justify-between items-center ${height != 'full' && 'hover:cursor-grab'}`, children: [_jsx("div", { className: "text-lg text-secondary-text font-semibold w-full", children: _jsx("div", { children: title }) }), _jsxs("div", { className: 'flex space-x-1 active:animate-press-down', children: [walletComp && _jsx("div", { children: walletComp }), _jsx(IconButton, { onClick: handleCloseModal, icon: _jsx(X, { strokeWidth: 3 }) })] })] }), _jsx("div", { className: 'select-text max-h-full in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden styled-scroll px-4 h-full', id: "virtualListContainer", children: children })] }) }, "mobile-modal")] }));
+});

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+import { Leaflet } from "./leaflet";
+import ReactPortal from "../Common/ReactPortal";
+const Modal = (({ header, height, className, children, subHeader, show, setShow, modalId, onClose, walletComp }) => {
+    const { isMobile, isDesktop } = useWindowDimensions();
+    const mobileModalRef = useRef(null);
+    //Fixes draggebles closing
+    const [delayedShow, setDelayedShow] = useState();
+    useEffect(() => {
+        setDelayedShow(show);
+    }, [show]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape" && delayedShow) {
+                setShow(false);
+                onClose && onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [delayedShow, onClose]);
+    return (_jsxs(_Fragment, { children: [isDesktop && (_jsx(ReactPortal, { wrapperId: "widget", children: delayedShow &&
+                    _jsx(Leaflet, { position: "absolute", height: height ?? 'full', show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, walletComp: walletComp, children: children }, modalId) })), isMobile && delayedShow && (_jsx(Leaflet, { position: "fixed", height: height == 'full' ? '80%' : height == 'fit' ? 'fit' : (height == '80%' || height == '90%') ? height : 'full', ref: mobileModalRef, show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, walletComp: walletComp, children: children }, modalId))] }));
+});
+export default Modal;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+import IconButton from "../../components/Buttons/iconButton";
+import { X } from 'lucide-react';
+import clsx from "clsx";
+const ModalContext = createContext({ isOpen: false, setIsOpen: () => { }, shouldFocus: false, setShouldFocus: () => { } });
+export const Modal = ({ children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shouldFocus, setShouldFocus] = useState(false);
+    return (_jsx(ModalContext.Provider, { value: { isOpen, setIsOpen, shouldFocus, setShouldFocus }, children: children }));
+};
+export const useModalState = () => {
+    const context = useContext(ModalContext);
+    if (!context) {
+        throw new Error("useModalState must be used within a Modal");
+    }
+    return context;
+};
+export const ModalContent = (props) => {
+    const { children, header, className = "", showCloseButton = true } = props;
+    const { isOpen, setIsOpen, setShouldFocus, shouldFocus } = useModalState();
+    const closeModal = () => { setIsOpen(false); setShouldFocus(false); };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                closeModal();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    const modalElement = (_jsxs("div", { className: clsx("absolute inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col", className), children: [(header || showCloseButton) && (_jsx("div", { className: "w-full relative", children: _jsxs("div", { className: "flex items-center w-full text-left justify-between px-4 pt-2 pb-2 gap-x-1", children: [_jsx("div", { className: "flex-1 text-lg text-secondary-text font-semibold w-full flex justify-end", children: header }), showCloseButton && (_jsx(IconButton, { onClick: closeModal, className: "active:animate-press-down", icon: _jsx(X, { strokeWidth: 3 }) }))] }) })), _jsx("div", { className: "flex flex-col w-full h-full max-h-[90dvh] px-4 styled-scroll overflow-x-hidden overflow-y-auto relative pb-3", children: typeof children === 'function' ? children({ closeModal, shouldFocus }) : children })] }));
+    const widgetElement = document.getElementById('widget');
+    if (!widgetElement) {
+        console.warn('Widget element not found, modal will not render');
+        return null;
+    }
+    return createPortal(modalElement, widgetElement);
+};
+export const ModalTrigger = (props) => {
+    const { disabled = false, children, className = "", onClick } = props;
+    const { setIsOpen, setShouldFocus } = useContext(ModalContext);
+    const { isDesktop } = useWindowDimensions();
+    function openModal() {
+        setIsOpen(true);
+        isDesktop && setShouldFocus(true);
+        onClick?.();
+    }
+    return (_jsx("div", { className: "shadow-sm/30 rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("button", { type: "button", onClick: openModal, disabled: disabled, className: clsx("rounded-2xl focus-peer:ring-primary focus-peer:border-secondary-400 focus-peer:border focus-peer:ring-1 focus:outline-none disabled:cursor-not-allowed relative grow flex items-center text-left justify-bottom w-full px-2 pr-0 bg-secondary-300 hover:bg-secondary-200 font-semibold", className), children: children }) }));
+};

package/dist/esm/components/Modal/vaul/constants.js

@@ -0,0 +1,11 @@
+export const TRANSITIONS = {
+    DURATION: 0.1,
+    EASE: [0.32, 0.72, 0, 1],
+};
+export const VELOCITY_THRESHOLD = 0.1;
+export const CLOSE_THRESHOLD = 0.1;
+export const SCROLL_LOCK_TIMEOUT = 100;
+export const BORDER_RADIUS = 8;
+export const NESTED_DISPLACEMENT = 16;
+export const WINDOW_TOP_OFFSET = 26;
+export const DRAG_CLASS = 'vaul-dragging';