@layerswap/widget 0.1.18 → 1.0.0-alpha0.1

package/dist/components/Input/SourceWalletPicker.js

@@ -1,73 +1,55 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFormikContext } from "formik";
-import { useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import useWallet from "../../hooks/useWallet";
-import shortenAddress from "../utils/ShortenAddress";
+import shortenAddress from "../../components/utils/ShortenAddress";
 import { ChevronDown, CircleHelp, QrCode } from "lucide-react";
-import Balance from "./Amount/Balance";
-import { useSwapDataState, useSwapDataUpdate } from "../../context/swap";
-import VaulDrawer, { WalletFooterPortal } from "../Modal/vaulModal";
-import WalletIcon from "../Icons/WalletIcon";
-import SubmitButton from "../Buttons/submitButton";
-import { useConnectModal } from "../Wallet/WalletModal";
-import WalletsList from "../Wallet/WalletComponents/WalletsList";
-import { Popover, PopoverContent, PopoverTrigger } from "../shadcn/popover";
+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 FilledCheck from "../Icons/FilledCheck";
-const Component = () => {
+import { useSelectedAccount, useUpdateBalanceAccount } from "../../context/balanceAccounts";
+const SourceWalletPicker = () => {
     const [openModal, setOpenModal] = useState(false);
     const { values, setFieldValue } = useFormikContext();
-    const { setSelectedSourceAccount } = useSwapDataUpdate();
-    const { selectedSourceAccount } = useSwapDataState();
-    const walletNetwork = values.fromExchange ? undefined : values.from;
-    const source_token = values.fromCurrency;
-    const destination_address = values.destination_address;
-    const { provider } = useWallet(walletNetwork, 'withdrawal');
+    const source_token = values.fromAsset;
+    const selectSourceAccount = useUpdateBalanceAccount("from");
+    const { provider } = useWallet(values.from, "withdrawal");
+    const selectedSourceAccount = useSelectedAccount("from", provider?.name);
     const { selectedConnector } = useConnectModal();
     const availableWallets = provider?.connectedWallets?.filter(w => !w.isNotAvailable) || [];
-    const selectedWallet = selectedSourceAccount?.wallet;
-    //TODO: sort by active wallet
-    const defaultWallet = walletNetwork && availableWallets?.find(w => !w.isNotAvailable);
-    const source_addsress = selectedSourceAccount?.address;
-    useEffect(() => {
-        if (!source_addsress && defaultWallet && values.depositMethod !== 'deposit_address') {
-            setSelectedSourceAccount({
-                wallet: defaultWallet,
-                address: defaultWallet.address
-            });
-        }
-    }, [defaultWallet?.address, source_addsress, values.depositMethod, destination_address]);
-    useEffect(() => {
-        if (values.depositMethod === 'deposit_address' || !defaultWallet?.address || (selectedSourceAccount && !availableWallets.some(w => w?.addresses?.some(a => a === selectedSourceAccount.address)))) {
-            setSelectedSourceAccount(undefined);
-        }
-    }, [values.depositMethod, defaultWallet?.address, availableWallets.length]);
     const handleWalletChange = () => {
         setOpenModal(true);
     };
-    const handleSelectWallet = (wallet, address) => {
-        if (wallet && address) {
-            setSelectedSourceAccount({
-                wallet,
-                address
+    const handleSelectWallet = useCallback((props) => {
+        if (props) {
+            selectSourceAccount({
+                id: props.walletId,
+                address: props.address,
+                providerName: props.providerName
             });
             setFieldValue('depositMethod', 'wallet');
         }
         else {
-            setSelectedSourceAccount(undefined);
             setFieldValue('depositMethod', 'deposit_address');
         }
         setOpenModal(false);
-    };
-    if (!walletNetwork || !source_token)
+    }, [provider, setFieldValue, selectSourceAccount]);
+    if (!values.from || !source_token)
         return _jsx(_Fragment, {});
     return _jsxs(_Fragment, { children: [values.depositMethod === 'deposit_address' ?
-                _jsx("div", { className: "flex items-center space-x-2 text-sm leading-4", children: _jsxs("div", { onClick: handleWalletChange, className: "rounded-md bg-secondary-500 flex space-x-1 items-center py-0.5 pl-2 pr-1 cursor-pointer", children: [_jsx("div", { className: "text-secondary-text", children: "Manual Transfer" }), _jsx("div", { className: "w-5 h-5 items-center flex", children: _jsx(ChevronDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }) })
+                (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 bg-secondary-800 pl-2 flex items-center space-x-2 text-sm leading-4", children: selectedWallet && selectedSourceAccount?.address && _jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(Balance, { values: values, direction: "from" }) }), _jsxs("div", { onClick: handleWalletChange, className: "rounded-lg bg-secondary-500 flex space-x-1 items-center py-0.5 pl-2 pr-1 cursor-pointer", children: [_jsx("div", { className: "inline-flex items-center relative p-0.5", children: _jsx(selectedWallet.icon, { className: "w-5 h-5" }) }), _jsx("div", { className: "text-primary-text", children: shortenAddress(selectedSourceAccount.address) }), _jsx("div", { className: "w-5 h-5 items-center flex", 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-6 flex flex-col gap-3", children: [_jsx("div", { className: clsx('w-full order-1', {
+                    _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: walletNetwork, 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", { onClick: () => handleSelectWallet(), className: clsx('w-full relative flex items-center justify-between gap-2 rounded-lg outline-none bg-secondary-700 p-3 py-4 text-secondary-text hover:bg-secondary-600 cursor-pointer order-1', {
+                            }), 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, {}) })] })] })] }) })] });
@@ -75,48 +57,52 @@ const Component = () => {
 export const FormSourceWalletButton = () => {
     const [openModal, setOpenModal] = useState(false);
     const { values, setFieldValue } = useFormikContext();
-    const { setSelectedSourceAccount } = useSwapDataUpdate();
     const [mountWalletPortal, setMounWalletPortal] = useState(false);
     const walletNetwork = values.fromExchange ? undefined : values.from;
     const { provider } = useWallet(walletNetwork, 'withdrawal');
-    const { isWalletModalOpen, cancel, selectedConnector } = useConnectModal();
+    const { isWalletModalOpen, cancel, selectedConnector, connect } = useConnectModal();
+    const selectSourceAccount = useUpdateBalanceAccount("from");
     const handleWalletChange = () => {
         setOpenModal(true);
     };
-    const handleSelectWallet = (wallet, address) => {
-        if (wallet && address) {
-            setSelectedSourceAccount({
-                wallet,
-                address
+    const handleSelectWallet = (props) => {
+        if (props?.address) {
+            selectSourceAccount({
+                address: props.address,
+                id: props.walletId,
+                providerName: props.providerName
             });
             setFieldValue('depositMethod', 'wallet');
         }
         else {
-            setSelectedSourceAccount(undefined);
             setFieldValue('depositMethod', 'deposit_address');
         }
         cancel();
         setOpenModal(false);
     };
-    const connect = async () => {
+    const handleConnect = async () => {
         setMounWalletPortal(true);
-        const result = await provider?.connectWallet();
+        const result = await connect(provider);
         if (result) {
-            handleSelectWallet(result, result.address);
+            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: connect }), mountWalletPortal && values.from?.deposit_methods?.includes('deposit_address') && values.depositMethod !== 'deposit_address' && !selectedConnector &&
-                    _jsx(WalletFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
+        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.fromCurrency) {
-        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.fromCurrency, network: walletNetwork, selectable: true }) }) }), mountWalletPortal && values.from?.deposit_methods?.includes('deposit_address') && values.depositMethod !== 'deposit_address' && !selectedConnector &&
-                    _jsx(WalletFooterPortal, { 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(WalletFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
+                _jsx(ModalFooterPortal, { isWalletModalOpen: isWalletModalOpen, children: _jsx(ContinueWithoutWallet, { onClick: handleSelectWallet }) })] });
 };
 const Connect = ({ connectFn, setMountWalletPortal }) => {
     const { connect } = useConnectModal();
@@ -128,7 +114,7 @@ const Connect = ({ connectFn, setMountWalletPortal }) => {
     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-900 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-900", children: [_jsx("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." }) })] })] }));
+    //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 Component;
+export default SourceWalletPicker;

package/dist/components/Input/TransferCEX.js

@@ -1,5 +1,6 @@
 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;
@@ -7,6 +8,6 @@ const TransferCEX = ({ direction }) => {
     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-placeholder 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-placeholder underline hover:no-underline decoration-primary-text-placeholder ml-1 cursor-pointer', children: "Learn more" })] }) }), _jsxs("div", { className: "relative flex items-center space-x-2 py-2", children: [_jsx("div", { className: "flex-shrink-0 h-6 w-6 relative", children: sourceLogo && _jsx("img", { 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-placeholder my-2 line line-left" }), _jsx("div", { className: "flex-shrink-0 h-8 w-8 relative", children: exchangeNetwork ? _jsx("img", { 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-placeholder text-xl", children: "?" }) }) }), _jsx("div", { className: "w-full h-[2px] bg-primary-text-placeholder my-2 line line-right" }), _jsx("div", { className: "flex-shrink-0 h-6 w-6 relative", children: destinationLogo && _jsx("img", { src: destinationLogo, alt: "Project Logo", height: "40", width: "40", loading: "eager", className: "rounded-md object-contain" }) })] })] }) }));
+    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/components/{LayerswapMenu → Menu}/Feedback.js

@@ -3,18 +3,15 @@ import { Form, Formik } from 'formik';
 import { useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { useIntercom } from 'react-use-intercom';
-import { useAuthState } from '../../context/authContext';
 import { SendFeedbackMessage } from '../../lib/telegram';
 import SubmitButton from '../Buttons/submitButton';
 const SendFeedback = ({ onSend }) => {
-    const { email, userId } = useAuthState();
     const initialValues = { Feedback: '' };
     const { boot, show, update } = useIntercom();
-    const updateWithProps = () => update({ userId, customAttributes: { email: email, } });
     const handleSendFeedback = useCallback(async (values) => {
         try {
             if (values.Feedback.length !== 0) {
-                const sender = email || userId || "No login";
+                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");
@@ -31,7 +28,7 @@ const SendFeedback = ({ onSend }) => {
         catch (e) {
             toast.error(e.message);
         }
-    }, [email, onSend]);
+    }, [onSend]);
     return (_jsx(Formik, { initialValues: initialValues, onSubmit: handleSendFeedback, validateOnMount: true, validate: (values) => {
             const errors = {};
             if (values.Feedback.length === 0) {
@@ -43,7 +40,7 @@ const SendFeedback = ({ onSend }) => {
                             }, 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();
-                                updateWithProps();
-                            }, className: "text-center disabled:text-primary-800 text-primary border-0 font-semibold rounded-md focus:outline-none 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" })] })] })) }));
+                                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/components/{LayerswapMenu → Menu}/Menu.js

@@ -1,21 +1,22 @@
 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-500 rounded-md bg-secondary-700 overflow-hidden", children: 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("a", { href: pathname, target: target, className: "gap-4 flex relative cursor-pointer hover:bg-secondary-600 select-none w-full items-center px-4 py-3 outline-none text-primary-text", children: [_jsx("div", { children: icon }), _jsx("p", { className: "text-primary-text", children: children }), target === '_self' ?
+            _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-600 select-none items-center px-4 py-3 outline-none 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" })] }) }));
+                _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) {
@@ -62,10 +63,11 @@ const Footer = ({ children, hidden, sticky = true }) => {
                         inset-x-0
                         bottom-0 
                         z-30
-                        bg-secondary-900 
+                        bg-secondary-700 
                         shadow-widget-footer 
                         p-4 
-                        px-6 
+                        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 

package/dist/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/components/{LayerswapMenu → Menu}/index.js

@@ -8,8 +8,8 @@ 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 VaulDrawer from "../Modal/vaulModal";
 const Comp = () => {
     const { goBack, currentStepName } = useFormWizardState();
     const { goToStep } = useFormWizardaUpdate();
@@ -18,19 +18,14 @@ const Comp = () => {
         setOpenTopModal(value);
         if (value === false) {
             goToStep(MenuStep.Menu);
-            // clearMenuPath(router)
         }
     };
-    const goBackToMenuStep = () => {
-        goToStep(MenuStep.Menu, "back");
-        //   clearMenuPath(router) 
-    };
-    const handleGoToStep = (step, path) => {
+    const goBackToMenuStep = () => { goToStep(MenuStep.Menu, "back"); };
+    const handleGoToStep = (step) => {
         goToStep(step);
-        // setMenuPath(path, router)
     };
-    return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", children: [_jsx(IconButton, { onClick: () => setOpenTopModal(true), icon: _jsx(MenuIcon, { strokeWidth: "2" }) }), _jsx(VaulDrawer, { show: openTopModal, setShow: handleModalOpenStateChange, header: _jsxs("div", { className: "inline-flex items-center", children: [goBack &&
-                                _jsx("div", { className: "-ml-2", children: _jsx(IconButton, { onClick: goBack, icon: _jsx(ChevronLeft, { strokeWidth: "2" }) }) }), _jsx("h2", { children: currentStepName })] }), modalId: "menuModal", children: _jsx(VaulDrawer.Snap, { id: 'item-1', fullheight: true, 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, {}) })] }) }) })] }) });
+    return _jsx(_Fragment, { children: _jsxs("div", { className: "text-secondary-text cursor-pointer relative", 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("div", { className: "-ml-2", children: _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, {}) })] }) })] }) });
 };
 const LayerswapMenu = () => {
     return (_jsx(FormWizardProvider, { noToolBar: true, hideMenu: true, initialStep: MenuStep.Menu, children: _jsx(Comp, {}) }));

package/dist/components/Modal/leaflet.d.ts

@@ -10,6 +10,7 @@ export interface LeafletProps {
     height?: LeafletHeight;
     position: LeafletPosition;
     onClose?: () => void;
+    walletComp?: React.ReactNode;
 }
 export declare const Leaflet: import("react").ForwardRefExoticComponent<LeafletProps & {
     children?: import("react").ReactNode | undefined;

package/dist/components/Modal/leaflet.js

@@ -6,11 +6,11 @@ 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 }, topmostRef) {
+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 { isMobileWithPortal: isMobile } = useWindowDimensions();
+    const { isMobile } = useWindowDimensions();
     const handleDragEnd = useCallback(async (_, info) => {
         const offset = info.offset.y;
         const velocity = info.velocity.y;
@@ -60,5 +60,5 @@ export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, ti
         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-xl' : ''}  bg-secondary-900 ${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-3 overflow-y-auto flex flex-col h-full z-40 ${height != 'full' ? 'bg-secondary-900 rounded-t-xl ' : ''} pb-6`, children: [_jsxs("div", { className: `px-6 pb-2 flex justify-between items-center ${height != 'full' && 'hover:cursor-grab'}`, children: [_jsx("div", { className: "text-lg text-secondary-text font-semibold", children: _jsx("div", { children: title }) }), _jsx("div", { className: '-mr-2', children: _jsx(IconButton, { onClick: handleCloseModal, icon: _jsx(X, { strokeWidth: 3 }) }) })] }), _jsx("div", { className: 'select-text max-h-full overflow-y-auto overflow-x-hidden styled-scroll px-6 h-full', id: "virtualListContainer", children: children })] }) }, "mobile-modal")] }));
+    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-3 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/components/Modal/modal.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactNode, SetStateAction } from "react";
+import React, { Dispatch, ReactNode, SetStateAction } from "react";
 import { FC } from "react";
 import { LeafletHeight } from "./leaflet";
 export interface ModalProps {
@@ -11,6 +11,7 @@ export interface ModalProps {
     setShow: Dispatch<SetStateAction<boolean>>;
     modalId: string;
     onClose?: () => void;
+    walletComp?: React.ReactNode;
 }
 declare const Modal: FC<ModalProps>;
 export default Modal;

package/dist/components/Modal/modal.js

@@ -1,19 +1,29 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "framer-motion";
 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 }) => {
-    const { isMobileWithPortal, isDesktop } = useWindowDimensions();
+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]);
-    return (_jsxs(_Fragment, { children: [(isDesktop || (!isDesktop && !isMobileWithPortal)) && (_jsx(ReactPortal, { wrapperId: "widget_root", children: _jsx(AnimatePresence, { children: delayedShow &&
-                        _jsx(Leaflet, { position: "absolute", height: height ?? 'full', show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, children: children }, modalId) }) })), isMobileWithPortal && (_jsx(AnimatePresence, { children: 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, children: children }, modalId) }))] }));
+    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/components/Modal/modalWithoutAnimation.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, SetStateAction } from "react";
+type ModalProps = {
+    setIsOpen: (value: SetStateAction<boolean>) => void;
+    isOpen: boolean;
+    shouldFocus: boolean;
+    setShouldFocus: (value: SetStateAction<boolean>) => void;
+};
+export declare const Modal: ({ children }: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useModalState: () => ModalProps;
+type ContentChildProps = {
+    closeModal: () => void;
+    shouldFocus: boolean;
+};
+type ModalContentProps = {
+    header?: ReactNode;
+    children: ((props: ContentChildProps) => JSX.Element) | JSX.Element;
+    className?: string;
+    showCloseButton?: boolean;
+};
+export declare const ModalContent: (props: ModalContentProps) => any;
+type ModalTriggerProps = {
+    disabled?: boolean;
+    children: React.ReactNode | React.ReactNode[];
+    className?: string;
+    onClick?: () => void;
+};
+export declare const ModalTrigger: (props: ModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/components/Modal/vaul/constants.d.ts

@@ -2,8 +2,8 @@ export declare const TRANSITIONS: {
     DURATION: number;
     EASE: number[];
 };
-export declare const VELOCITY_THRESHOLD = 0.4;
-export declare const CLOSE_THRESHOLD = 0.25;
+export declare const VELOCITY_THRESHOLD = 0.1;
+export declare const CLOSE_THRESHOLD = 0.1;
 export declare const SCROLL_LOCK_TIMEOUT = 100;
 export declare const BORDER_RADIUS = 8;
 export declare const NESTED_DISPLACEMENT = 16;