@layerswap/widget 0.1.16 → 0.1.17-beta.9

package/dist/components/Modal/vaulModal.js

@@ -9,8 +9,9 @@ import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsConte
 import { AnimatePresence, motion } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { Drawer } from './vaul';
+import AppSettings from '../../lib/AppSettings';
 const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd }) => {
-    const { isMobile } = useWindowDimensions();
+    const { isMobileWithPortal: isMobile } = useWindowDimensions();
     let [headerRef, { height }] = useMeasure();
     const { setHeaderHeight } = useSnapPoints();
     const expandRef = useRef(null);
@@ -61,8 +62,9 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
                 expandRef.current?.classList.add('hidden');
         }, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: onAnimationEnd, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
                         ? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
-                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('fixed sm:absolute flex flex-col bg-secondary-900 rounded-t-3xl bottom-0 left-0 right-0 h-full z-50 pb-6 text-primary-text !ring-0 !outline-none ', {
+                        : _jsx(motion.div, { className: 'absolute inset-0 z-50 bg-black/50 block', initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, "backdrop") }), _jsxs(Drawer.Content, { "data-testid": "content", className: clsx('absolute flex flex-col bg-secondary-900 rounded-t-xl bottom-0 left-0 right-0 h-full z-50 pb-6 text-primary-text !ring-0 !outline-none ', {
                         '!border-none !rounded-none': snap === 1,
+                        '!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
                     }), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobile &&
                                     _jsx("div", { className: "absolute top-2 left-[calc(50%-24px)]", children: _jsx(Drawer.Handle, { className: '!w-12 bg-primary-text-muted' }) }), _jsxs("div", { className: 'flex items-center w-full text-left justify-between px-6 pt-3 pb-2', children: [_jsx(Drawer.Title, { className: "text-lg text-secondary-text font-semibold", children: header }), _jsx(Drawer.Close, { asChild: true, children: _jsx("div", { className: '-mr-2', children: _jsx(IconButton, { icon: _jsx(X, { strokeWidth: 3 }) }) }) })] }), description &&
                                     _jsx(Drawer.Description, { className: "text-sm mt-2 text-secondary-text px-6", children: description })] }), _jsxs("div", { className: clsx('flex flex-col w-full h-fit max-h-[90dvh] px-6 styled-scroll overflow-x-hidden relative ', {
@@ -96,10 +98,14 @@ const VaulDrawerSnap = (props) => {
     return (_jsx("div", { ...props, className: props.className ?? 'pb-6', id: props.id, ref: ref, children: props.children }));
 };
 const VaulDrawer = (props) => {
-    const { isMobile } = useWindowDimensions();
-    return (_jsx(SnapPointsProvider, { isMobile: isMobile, children: _jsx(Comp, { ...props, children: props.children }) }));
+    const { isMobileWithPortal } = useWindowDimensions();
+    return (_jsx(SnapPointsProvider, { isMobile: isMobileWithPortal, children: _jsx(Comp, { ...props, children: props.children }) }));
 };
 VaulDrawer.Snap = VaulDrawerSnap;
+// type Props = {
+//     children: React.ReactNode,
+//     isWalletModalOpen?: boolean
+// }
 // export const WalletFooterPortal: FC<Props> = ({ children, isWalletModalOpen }) => {
 export const WalletFooterPortal = ({ children, isWalletModalOpen }) => {
     const ref = useRef(null);

package/dist/components/Pages/SwapPages/Form/FeeDetails/RefuelModal.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Modal from '../../../../Modal/modal';
 import { Fuel } from 'lucide-react';
 import { roundDecimals, truncateDecimals } from '../../../../utils/RoundDecimals';
 import SubmitButton from '../../../../Buttons/submitButton';
@@ -7,6 +6,7 @@ import SecondaryButton from '../../../../Buttons/secondaryButton';
 import { useFormikContext } from 'formik';
 import { useFee } from '../../../../../context/feeContext';
 import useSWRBalance from '../../../../../lib/balances/useSWRBalance';
+import VaulDrawer from '../../../../Modal/vaulModal';
 const RefuelModal = ({ openModal, setOpenModal }) => {
     const { values, setFieldValue } = useFormikContext();
     const { to, toCurrency, refuel, destination_address } = values || {};
@@ -23,10 +23,10 @@ const RefuelModal = ({ openModal, setOpenModal }) => {
         setFieldValue('refuel', true);
         setOpenModal(false);
     };
-    return (_jsx(Modal, { height: "fit", show: openModal, setShow: setOpenModal, modalId: "refuel", children: _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "relative z-10 flex h-28 w-28 items-center justify-center rounded-xl p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-16 w-16 text-primary", "aria-hidden": "true" }) }), _jsxs("div", { className: "text-center max-w-72", children: [_jsx("p", { className: "text-2xl", children: "About Refuel" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "You can get a small amount of" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "that can be used for covering gas fees on" }), " ", _jsxs("span", { children: [to?.display_name, "."] })] })] }), (values.refuel || destNativeTokenBalance) &&
-                    _jsxs("div", { className: "flex flex-col divide-y-2 divide-secondary-900 w-full rounded-lg bg-secondary-700 overflow-hidden", children: [destNativeTokenBalance &&
-                                _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: "Your current balance" }) }), _jsxs("p", { className: 'text-end', children: [_jsxs("span", { children: [truncateDecimals(destNativeTokenBalance.amount, nativeAsset?.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", amountInUsd, ")"] })] })] }) }), toCurrency?.refuel && nativeAsset &&
-                                _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: "You will receive" }), _jsxs("p", { children: [_jsxs("span", { children: [roundDecimals(toCurrency.refuel?.amount, nativeAsset.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", toCurrency.refuel?.amount_in_usd, ")"] })] })] }) })] }), _jsxs("div", { className: 'flex flex-col gap-3 w-full h-full', children: [!refuel &&
-                            _jsx(SubmitButton, { type: "button", onClick: enabldeRefuel, children: "Enable Refuel" }), _jsx(SecondaryButton, { type: "button", className: 'h-full w-full py-3', onClick: closeModal, children: "Close" })] })] }) }));
+    return (_jsx(VaulDrawer, { show: openModal, setShow: setOpenModal, modalId: "refuel", children: _jsx(VaulDrawer.Snap, { id: 'item-1', children: _jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "relative z-10 flex h-28 w-28 items-center justify-center rounded-xl p-2 bg-primary/20", children: _jsx(Fuel, { className: "h-16 w-16 text-primary", "aria-hidden": "true" }) }), _jsxs("div", { className: "text-center max-w-72", children: [_jsx("p", { className: "text-2xl", children: "About Refuel" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "You can get a small amount of" }), " ", _jsx("span", { children: nativeAsset?.symbol }), " ", _jsx("span", { children: "that can be used for covering gas fees on" }), " ", _jsxs("span", { children: [to?.display_name, "."] })] })] }), (values.refuel || destNativeTokenBalance) &&
+                        _jsxs("div", { className: "flex flex-col divide-y-2 divide-secondary-900 w-full rounded-lg bg-secondary-700 overflow-hidden", children: [destNativeTokenBalance &&
+                                    _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: _jsx("span", { children: "Your current balance" }) }), _jsxs("p", { className: 'text-end', children: [_jsxs("span", { children: [truncateDecimals(destNativeTokenBalance.amount, nativeAsset?.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", amountInUsd, ")"] })] })] }) }), toCurrency?.refuel && nativeAsset &&
+                                    _jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("div", { className: "text-secondary-text", children: "You will receive" }), _jsxs("p", { children: [_jsxs("span", { children: [roundDecimals(toCurrency.refuel?.amount, nativeAsset.precision), " ", nativeAsset?.symbol] }), " ", _jsxs("span", { className: "text-secondary-text", children: ["($", toCurrency.refuel?.amount_in_usd, ")"] })] })] }) })] }), _jsxs("div", { className: 'flex flex-col gap-3 w-full h-full', children: [!refuel &&
+                                _jsx(SubmitButton, { type: "button", onClick: enabldeRefuel, children: "Enable Refuel" }), _jsx(SecondaryButton, { type: "button", className: 'h-full w-full py-3', onClick: closeModal, children: "Close" })] })] }) }) }));
 };
 export default RefuelModal;

package/dist/components/Pages/SwapPages/Form/Form.js

@@ -126,7 +126,7 @@ const SwapForm = ({ partner }) => {
     }, [values.amount]);
     const sourceWalletNetwork = values.fromExchange ? undefined : values.from;
     const shouldConnectWallet = (sourceWalletNetwork && values.from?.deposit_methods?.includes('wallet') && values.depositMethod !== 'deposit_address' && !selectedSourceAccount) || (!values.from && !values.fromExchange && !wallets.length && values.depositMethod !== 'deposit_address' && !(!values.from && values.to));
-    return _jsx(Widget, { className: "sm:min-h-[450px] h-full", children: _jsxs(Form, { className: `h-full grow flex flex-col justify-between ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`, children: [_jsxs(Widget.Content, { children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full mb-3.5 leading-4 bg-secondary-700 rounded-xl', children: [!(query?.hideFrom && values?.from) && _jsx("div", { className: "flex flex-col w-full", children: _jsx(NetworkFormField, { direction: "from", label: "From", className: "rounded-t-lg pt-2.5", partner: partner }) }), !query?.hideFrom && !query?.hideTo &&
+    return _jsx(Widget, { className: "sm:min-h-[450px] h-full", children: _jsxs(Form, { className: `h-full grow flex flex-col justify-between space-y-3 ${(isSubmitting) ? 'pointer-events-none' : 'pointer-events-auto'}`, children: [_jsxs(Widget.Content, { children: [_jsxs("div", { className: 'flex-col relative flex justify-between gap-1.5 w-full mb-3.5 leading-4 bg-secondary-700 rounded-xl', children: [!(query?.hideFrom && values?.from) && _jsx("div", { className: "flex flex-col w-full", children: _jsx(NetworkFormField, { direction: "from", label: "From", className: "rounded-t-lg pt-2.5", partner: partner }) }), !query?.hideFrom && !query?.hideTo &&
                                     _jsx("button", { type: "button", "aria-label": "Reverse the source and destination", disabled: valuesSwapperDisabled, onClick: valuesSwapper, className: `hover:text-primary absolute right-[calc(50%-16px)] top-[122px] z-10 border-2 border-secondary-700 bg-secondary-600 rounded-lg disabled:cursor-not-allowed disabled:text-secondary-text duration-200 transition disabled:pointer-events-none`, children: _jsx(motion.div, { animate: animate, transition: { duration: 0.3 }, onTap: () => !valuesSwapperDisabled && cycle(), children: _jsx(ArrowUpDown, { className: classNames(valuesSwapperDisabled && 'opacity-50', "w-7 h-auto p-1 bg-secondary-500 rounded-lg disabled:opacity-30") }) }) }), !(query?.hideTo && values?.to) && _jsx("div", { className: "flex flex-col w-full", children: _jsx(NetworkFormField, { direction: "to", label: "To", className: "rounded-b-lg", partner: partner }) })] }), (((fromExchange && destination) || (toExchange && source)) && currencyGroup) ?
                             _jsx("div", { className: "mb-6 leading-4", children: _jsx(ResizablePanel, { children: _jsx(CEXNetworkFormField, { direction: fromExchange ? 'from' : 'to', partner: partner }) }) })
                             : _jsx(_Fragment, {}), _jsx("div", { className: "mb-6 leading-4", children: _jsx(AmountField, {}) }), _jsxs("div", { className: "w-full", children: [validationMessage ?

package/dist/components/Pages/SwapPages/Form/SecondaryComponents/FormButton.js

@@ -11,7 +11,7 @@ const FormButton = ({ shouldConnectWallet, values, isValid, errors, isSubmitting
         return _jsx(FormSourceWalletButton, {});
     }
     if (values?.to && !values?.destination_address) {
-        return (_jsx("div", { children: _jsx(Address, { partner: partner, children: () => (_jsxs("div", { className: "border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out bg-primary text-primary-actionButtonText py-3 px-2 md:px-3 plausible-event-name=Swap+initiated", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(PlusIcon, { className: "stroke-1" }) }), _jsx("span", { className: "grow text-center", children: "Enter destination address" })] })) }) }));
+        return (_jsx("div", { children: _jsx(Address, { partner: partner, children: () => (_jsxs("div", { className: "border border-primary disabled:border-primary-900 items-center space-x-1 disabled:text-opacity-40 disabled:bg-primary-900 disabled:cursor-not-allowed relative w-full flex justify-center font-semibold rounded-md transform hover:brightness-125 transition duration-200 ease-in-out bg-primary text-primary-actionButtonText py-3 px-2 md:px-3", children: [_jsx("span", { className: "order-first absolute left-0 inset-y-0 flex items-center pl-3", children: _jsx(PlusIcon, { className: "stroke-1" }) }), _jsx("span", { className: "grow text-center", children: "Enter destination address" })] })) }) }));
     }
     return (_jsx(SwapButton, { className: "plausible-event-name=Swap+initiated", type: "submit", isDisabled: !isValid, isSubmitting: isSubmitting, children: ActionText(errors, actionDisplayName) }));
 };

package/dist/components/Pages/SwapPages/Form/Select/Command/commandSelect.js

@@ -11,14 +11,14 @@ export class SelectMenuItemGroup {
     }
 }
 export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper, isLoading, modalHeight = 'full', modalContent, header }) {
-    const { isDesktop, isMobile, windowSize } = useWindowDimensions();
+    const { isDesktop, isMobileWithPortal, windowSize } = useWindowDimensions();
     let groups = valueGrouper(values);
     const handleSelectValue = useCallback((item) => {
         setValue(item);
         setShow(false);
     }, [setValue, setShow]);
     const inputRef = React.useRef(null);
-    return (_jsx(VaulDrawer, { header: header, show: show, setShow: setShow, modalId: 'comandSelect', onAnimationEnd: () => { isDesktop && show && inputRef.current?.focus(); }, children: _jsx(VaulDrawer.Snap, { id: 'item-1', style: { height: isMobile && windowSize.height ? `${(windowSize.height * 0.8).toFixed()}px` : '' }, fullheight: isDesktop, children: _jsxs(CommandWrapper, { children: [searchHint &&
+    return (_jsx(VaulDrawer, { header: header, show: show, setShow: setShow, modalId: 'comandSelect', onAnimationEnd: () => { isDesktop && show && inputRef.current?.focus(); }, children: _jsx(VaulDrawer.Snap, { id: 'item-1', style: { height: isMobileWithPortal && windowSize.height ? `${(windowSize.height * 0.8).toFixed()}px` : '' }, fullheight: isDesktop, children: _jsxs(CommandWrapper, { children: [searchHint &&
                         _jsx(CommandInput, { ref: inputRef, placeholder: searchHint }), modalContent, !isLoading ?
                         _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), groups.filter(g => g.items?.length > 0).map((group) => {
                                     return (_jsx(CommandGroup, { heading: group.name, children: group.items.map(item => {

package/dist/components/Wallet/WalletModal/ConnectorsList.js

@@ -16,7 +16,7 @@ import VaulDrawer from "../../Modal/vaulModal";
 import CopyButton from "../../Buttons/copyButton";
 import LayerSwapLogoSmall from "../../Icons/layerSwapLogoSmall";
 const ConnectorsLsit = ({ onFinish }) => {
-    const { isMobile } = useWindowDimensions();
+    const { isMobileWithPortal: isMobile } = useWindowDimensions();
     const { providers } = useWallet();
     const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector } = useConnectModal();
     let [recentConnectors, setRecentConnectors] = usePersistedState([], 'recentConnectors', 'localStorage');

package/dist/components/Widget/Footer.js

@@ -30,7 +30,7 @@ const Comp = ({ children, hidden, sticky = true }) => {
     return (sticky ?
         _jsxs(_Fragment, { children: [_jsx(motion.div, { ref: footerRef, transition: {
                         duration: 0.15,
-                    }, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base mt-3        
+                    }, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base        
                         max-sm:fixed
                         max-sm:inset-x-0
                         max-sm:bottom-0 
@@ -49,7 +49,7 @@ const Comp = ({ children, hidden, sticky = true }) => {
 const Footer = ({ children, hidden, sticky }) => {
     const isFooterVisible = LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['mainnet'] &&
         LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['testnet'];
-    const isFooterSticky = AppSettings.ThemeData?.footerSticky ?? false;
+    const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
     return (_jsxs(Comp, { hidden: hidden, sticky: isFooterSticky ? sticky : false, children: [children, isFooterVisible &&
                 _jsxs("a", { target: "_blank", href: 'https://layerswap.io/', className: "flex justify-center text-primary-text-placeholder mt-3 -mb-1.5 sm:-mb-3", children: [_jsx("span", { className: "text-xs content-center", children: "Powered by" }), " ", _jsx(GoHomeButton, { className: 'ml-1 fill-primary-text-placeholder h-5 w-auto cursor-pointer' })] })] }));
 };

package/dist/components/WidgetLoading.d.ts

@@ -1 +1,2 @@
-export default function WidgetLoading(): import("react/jsx-runtime").JSX.Element;
+import { FC } from "react";
+export declare const WidgetLoading: FC;

package/dist/components/WidgetLoading.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { MenuIcon } from "lucide-react";
-export default function WidgetLoading() {
-    return (_jsx("div", { className: "w-full h-full z-[1] sm:mb-6 mx-auto", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-full", children: _jsx("div", { className: "bg-secondary-900 rounded-lg w-full sm:overflow-hidden relative text-left", children: _jsx("div", { className: "relative", children: _jsx("div", { className: "flex items-start", children: _jsx("div", { className: "flex flex-nowrap grow w-full", children: _jsx("div", { className: "w-full pb-6 flex flex-col justify-between text-secondary-500 sm:min-h-[500px] h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "w-full grid grid-cols-5 px-6 mt-3 pb-2", children: _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "mx-2 space-y-1 py-1.5", children: _jsx(MenuIcon, { strokeWidth: "2" }) }) }) }), _jsxs("div", { className: "px-6", children: [_jsxs("div", { className: "bg-secondary-700 pt-8 grid grid-cols-6 gap-2 space-y-1 items-end p-3 rounded-xl my-4 mb-12", children: [_jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-start-4 col-span-1 flex justify-start items-center py-2", children: _jsx("div", { className: "w-8 h-8 bg-secondary-600 rounded-lg animate-pulse" }) }), _jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" })] }), _jsx("div", { className: "w-full h-12 bg-secondary-600 rounded-lg animate-pulse mt-2", children: "\u00A0" }), _jsx("div", { className: "mt-10", children: _jsx("div", { className: "w-full h-[50px] bg-primary animate-pulse rounded-lg" }) })] })] }) }) }) }) }) }) }) }) }));
-}
+import ColorSchema from "./ColorSchema";
+import AppSettings from "../lib/AppSettings";
+export const WidgetLoading = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: AppSettings.ThemeData }), _jsx("div", { className: "layerswap-styles w-full h-full z-[1] sm:mb-6 mx-auto", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-full", children: _jsx("div", { className: "bg-secondary-900 rounded-lg w-full sm:overflow-hidden relative text-left", children: _jsx("div", { className: "relative", children: _jsx("div", { className: "flex items-start", children: _jsx("div", { className: "flex flex-nowrap grow w-full", children: _jsx("div", { className: "w-full pb-6 flex flex-col justify-between text-secondary-500 sm:min-h-[500px] h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "w-full grid grid-cols-5 px-6 mt-3 pb-1", children: _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "mx-2 space-y-1 py-1.5", children: _jsx(MenuIcon, { strokeWidth: "2" }) }) }) }), _jsxs("div", { className: "px-6", children: [_jsxs("div", { className: "bg-secondary-700 pt-8 grid grid-cols-6 gap-2 space-y-1 items-end p-3 rounded-xl my-4 mb-12", children: [_jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse mt-6", children: "\u00A0" }), _jsx("div", { className: "col-start-4 col-span-1 flex justify-start items-center py-2", children: _jsx("div", { className: "w-8 h-8 bg-secondary-600 rounded-lg animate-pulse" }) }), _jsx("div", { className: "col-span-4 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" }), _jsx("div", { className: "col-span-2 h-12 bg-secondary-600 rounded-lg animate-pulse", children: "\u00A0" })] }), _jsx("div", { className: "w-full h-12 bg-secondary-600 rounded-lg animate-pulse mt-2", children: "\u00A0" }), _jsx("div", { className: "mt-10", children: _jsx("div", { className: "w-full h-[50px] bg-primary animate-pulse rounded-lg" }) })] })] }) }) }) }) }) }) }) }) })] }));
+};

package/dist/components/themeWrapper.js

@@ -2,16 +2,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { X } from "lucide-react";
 import toast, { ToastBar, Toaster } from "react-hot-toast";
 export default function ThemeWrapper({ children }) {
-    return _jsx("div", { className: 'styled-scroll', children: _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: `flex flex-col items-center overflow-hidden relative font-robo`, children: [_jsx(Toaster, { containerStyle: {
-                            position: 'absolute',
-                        }, toastOptions: {
-                            duration: 5000,
-                            style: {
-                                background: '#131E36',
-                                color: '#a4afc8'
-                            },
-                            error: {
-                                duration: Infinity,
-                            },
-                        }, children: (t) => (_jsx(ToastBar, { toast: t, children: ({ icon, message }) => (_jsxs(_Fragment, { children: [icon, message, t.type !== 'loading' && (_jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), children: _jsx(X, { className: "h-5" }) }))] })) })) }), _jsx("div", { className: "w-full h-full z-[1] sm:mb-6", children: _jsx("div", { className: "flex h-full content-center items-center justify-center space-y-5 flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-full text-primary-text", children: children }) }) }), _jsx("div", { id: "offset-for-stickyness", className: "block md:hidden" })] }) }) });
+    return _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: `flex flex-col items-center overflow-hidden relative font-robo`, children: [_jsx(Toaster, { containerStyle: {
+                        position: 'absolute',
+                    }, toastOptions: {
+                        duration: 5000,
+                        style: {
+                            background: '#131E36',
+                            color: '#a4afc8'
+                        },
+                        error: {
+                            duration: Infinity,
+                        },
+                    }, children: (t) => (_jsx(ToastBar, { toast: t, children: ({ icon, message }) => (_jsxs(_Fragment, { children: [icon, message, t.type !== 'loading' && (_jsx("button", { type: "button", onClick: () => toast.dismiss(t.id), children: _jsx(X, { className: "h-5" }) }))] })) })) }), _jsx("div", { className: "w-full h-full z-[1]", children: _jsx("div", { className: "flex h-full content-center items-center justify-center space-y-5 flex-col container mx-auto", children: _jsx("div", { className: "flex h-full flex-col w-full text-primary-text", children: children }) }) }), _jsx("div", { id: "offset-for-stickyness", className: "block md:hidden" })] }) });
 }

package/dist/context/LayerswapProvider.d.ts

@@ -16,4 +16,6 @@ export type LayerswapContextProps = {
         icons?: string[];
     };
 };
-export declare const LayerswapProvider: FC<LayerswapContextProps>;
+declare const LayerswapProviderComponent: FC<LayerswapContextProps>;
+export declare const LayerswapProvider: typeof LayerswapProviderComponent;
+export {};

package/dist/context/LayerswapProvider.js

@@ -10,20 +10,20 @@ import ErrorFallback from "../components/ErrorFallback";
 import QueryProvider from "./query";
 import { THEME_COLORS } from "../Models/Theme";
 import { TooltipProvider } from "../components/shadcn/tooltip";
-import ColorSchema from "../components/ColorSchema";
 import { AsyncModalProvider } from "./asyncModal";
 import WalletsProviders from "../components/Wallet/WalletProviders";
 import { IntercomProvider } from 'react-use-intercom';
 import AppSettings from "../lib/AppSettings";
 import { getSettings } from "../helpers/getSettings";
-import WidgetLoading from "../components/WidgetLoading";
+import { WidgetLoading } from "../components/WidgetLoading";
 import LayerSwapApiClient from "../lib/layerSwapApiClient";
+import ColorSchema from "../components/ColorSchema";
 const INTERCOM_APP_ID = 'h5zisg78';
-export const LayerswapProvider = ({ children, settings: _settings, themeData, apiKey, integrator, version, walletConnect }) => {
+const LayerswapProviderComponent = ({ children, settings: _settings, themeData, apiKey, integrator, version, walletConnect }) => {
     const [fetchedSettings, setFetchedSettings] = useState(null);
     AppSettings.ApiVersion = version;
     AppSettings.Integrator = integrator;
-    AppSettings.ThemeData = themeData;
+    AppSettings.ThemeData = { ...THEME_COLORS['default'], ...themeData };
     LayerSwapApiClient.apiKey = apiKey;
     useEffect(() => {
         if (!_settings) {
@@ -36,12 +36,12 @@ export const LayerswapProvider = ({ children, settings: _settings, themeData, ap
         }
     }, []);
     const settings = _settings || fetchedSettings;
-    if (!settings) {
-        return _jsxs(_Fragment, { children: [themeData &&
-                    _jsx(ColorSchema, { themeData: themeData }), _jsx(WidgetLoading, {})] });
-    }
+    if (!settings)
+        return _jsx(WidgetLoading, {});
     let appSettings = new LayerSwapAppSettings(settings);
-    themeData = themeData || THEME_COLORS.default;
-    return (_jsxs(_Fragment, { children: [themeData &&
-                _jsx(ColorSchema, { themeData: themeData }), _jsx(IntercomProvider, { appId: INTERCOM_APP_ID, initializeDelay: 2500, children: _jsx(QueryProvider, { query: {}, children: _jsx(SettingsProvider, { data: appSettings, children: _jsx(AuthProvider, { children: _jsx(TooltipProvider, { delayDuration: 500, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _jsx(ThemeWrapper, { children: _jsx(WalletsProviders, { themeData: themeData, children: _jsx(AsyncModalProvider, { children: children }) }) }) }) }) }) }) }) })] }));
+    themeData = { ...THEME_COLORS['default'], ...themeData };
+    return (_jsx(IntercomProvider, { appId: INTERCOM_APP_ID, initializeDelay: 2500, children: _jsx(QueryProvider, { query: {}, children: _jsx(SettingsProvider, { data: appSettings, children: _jsx(AuthProvider, { children: _jsx(TooltipProvider, { delayDuration: 500, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _jsx(ThemeWrapper, { children: _jsx(WalletsProviders, { themeData: themeData, children: _jsx(AsyncModalProvider, { children: children }) }) }) }) }) }) }) }) }));
+};
+export const LayerswapProvider = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: props.themeData }), _jsx("div", { style: { backgroundColor: 'transparent' }, className: "layerswap-styles", children: _jsx(LayerswapProviderComponent, { ...props, children: props.children }) })] }));
 };

package/dist/hooks/useWindowDimensions.d.ts

@@ -4,5 +4,6 @@ export default function useWindowDimensions(): {
         height: number | undefined;
     };
     isMobile: boolean;
+    isMobileWithPortal: boolean;
     isDesktop: boolean;
 };

package/dist/hooks/useWindowDimensions.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import AppSettings from "../lib/AppSettings";
 export default function useWindowDimensions() {
     const [windowSize, setWindowSize] = useState({
         width: undefined,
@@ -20,9 +21,12 @@ export default function useWindowDimensions() {
         // Remove event listener on cleanup
         return () => window.removeEventListener("resize", handleResize);
     }, []); // Empty array ensures that effect is only run on mount
+    const isMobile = typeof windowSize?.width === "number" && windowSize?.width < 768;
+    const isDesktop = typeof windowSize?.width === "number" && windowSize?.width >= 768;
     return {
         windowSize,
-        isMobile: typeof windowSize?.width === "number" && windowSize?.width < 768,
-        isDesktop: typeof windowSize?.width === "number" && windowSize?.width >= 768,
+        isMobile,
+        isMobileWithPortal: isMobile && AppSettings.ThemeData?.enablePortal == true,
+        isDesktop
     };
 }