@layerswap/widget 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Input/RoutePicker/Content.js +1 -1
- package/dist/esm/components/Input/Search.js +2 -1
- package/dist/esm/components/Modal/modalWithoutAnimation.js +5 -1
- package/dist/esm/components/WidgetLoading.js +1 -1
- package/dist/esm/components/themeWrapper.js +1 -1
- package/dist/index.css +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/Input/Search.d.ts.map +1 -1
- package/dist/types/components/Modal/modalWithoutAnimation.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -56,7 +56,7 @@ export const Content = ({ searchQuery, setSearchQuery, rowElements, selectedToke
|
|
|
56
56
|
useEffect(() => {
|
|
57
57
|
return () => setSearchQuery('');
|
|
58
58
|
}, []);
|
|
59
|
-
return _jsxs("div", { className: "overflow-y-auto overflow-x-hidden flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, onScroll: handleScroll, className: clsx("select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! pr-0.5 scrollbar-thumb:bg-transparent h-full", {
|
|
59
|
+
return _jsxs("div", { className: "overflow-y-auto overflow-x-hidden flex flex-col h-full z-40 openpicker", children: [_jsx(SearchComponent, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, isOpen: shouldFocus, className: "mb-2" }), _jsx(LayoutGroup, { children: _jsxs(motion.div, { layoutScroll: true, onScroll: handleScroll, className: clsx("select-text in-has-[.hide-main-scrollbar]:overflow-y-hidden overflow-y-auto overflow-x-hidden scrollbar:w-1! scrollbar:h-1! pr-0.5 scrollbar-thumb:bg-transparent h-full", {
|
|
60
60
|
"styled-scroll!": isScrolling
|
|
61
61
|
}), ref: parentRef, children: [wallets.length === 0 && direction === 'from' && !searchQuery &&
|
|
62
62
|
_jsx(ConnectWalletButton, { descriptionText: "Connect your wallet to browse your assets and choose easier", className: "w-full my-2.5" }), _jsx("div", { className: "relative", children: _jsx(Accordion, { type: "multiple", value: openValues, children: _jsx("div", { children: _jsxs("div", { style: {
|
|
@@ -3,6 +3,7 @@ import useWindowDimensions from "../../hooks/useWindowDimensions";
|
|
|
3
3
|
import { useEffect, useRef } from "react";
|
|
4
4
|
import FilledX from "../Icons/FilledX";
|
|
5
5
|
import SearchIcon from "../Icons/SearchIcon";
|
|
6
|
+
import clsx from "clsx";
|
|
6
7
|
export const SearchComponent = ({ searchQuery, setSearchQuery, isOpen, className, placeholder }) => {
|
|
7
8
|
const { isDesktop } = useWindowDimensions();
|
|
8
9
|
const inputRef = useRef(null);
|
|
@@ -11,7 +12,7 @@ export const SearchComponent = ({ searchQuery, setSearchQuery, isOpen, className
|
|
|
11
12
|
inputRef.current.focus();
|
|
12
13
|
}
|
|
13
14
|
}, [isOpen]);
|
|
14
|
-
return _jsxs("div", { className:
|
|
15
|
+
return _jsxs("div", { className: clsx("flex items-center bg-secondary-500 focus-within:bg-secondary-300 rounded-lg px-2 h-10", className), children: [_jsx("div", { className: "w-6 h-6 flex items-center justify-center mr-1", children: _jsx(SearchIcon, { className: "text-primary-text-tertiary" }) }), _jsx("input", { ref: inputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), autoFocus: isDesktop, placeholder: placeholder ?? "Search", autoComplete: "off", className: "placeholder:text-primary-text-tertiary border-0 border-b-0 border-primary-text bg-secondary-500 focus:bg-secondary-300 focus:border-primary-text appearance-none block py-2 px-0 w-full text-base outline-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50" }), searchQuery && (_jsx(FilledX, { className: "w-4 h-4 text-primary-text-tertiary cursor-pointer ml-2", onMouseDown: (e) => {
|
|
15
16
|
e.preventDefault();
|
|
16
17
|
setSearchQuery('');
|
|
17
18
|
} }))] });
|
|
@@ -5,6 +5,7 @@ import useWindowDimensions from "../../hooks/useWindowDimensions";
|
|
|
5
5
|
import IconButton from "../../components/Buttons/iconButton";
|
|
6
6
|
import { X } from 'lucide-react';
|
|
7
7
|
import clsx from "clsx";
|
|
8
|
+
import AppSettings from "../../lib/AppSettings";
|
|
8
9
|
const ModalContext = createContext({ isOpen: false, setIsOpen: () => { }, shouldFocus: false, setShouldFocus: () => { } });
|
|
9
10
|
export const Modal = ({ children, isOpen: _isOpen, setIsOpen: _setIsOpen }) => {
|
|
10
11
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -35,7 +36,10 @@ export const ModalContent = (props) => {
|
|
|
35
36
|
}, [isOpen]);
|
|
36
37
|
if (!isOpen)
|
|
37
38
|
return null;
|
|
38
|
-
const modalElement = (_jsxs("div", { className: clsx("
|
|
39
|
+
const modalElement = (_jsxs("div", { className: clsx("inset-0 z-50 bg-secondary-700 rounded-t-3xl sm:rounded-3xl flex flex-col overscroll-none", className, {
|
|
40
|
+
'fixed sm:absolute': AppSettings.ThemeData?.enablePortal == true,
|
|
41
|
+
'absolute': AppSettings.ThemeData?.enablePortal == false
|
|
42
|
+
}), 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-2 sm: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: 2 }) }))] }) })), _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 })] }));
|
|
39
43
|
const widgetElement = document.getElementById('widget');
|
|
40
44
|
if (!widgetElement) {
|
|
41
45
|
console.warn('Widget element not found, modal will not render');
|
|
@@ -8,7 +8,7 @@ import clsx from "clsx";
|
|
|
8
8
|
export const WidgetLoading = () => {
|
|
9
9
|
const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
|
|
10
10
|
return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: AppSettings.ThemeData }), _jsxs("div", { className: "relative w-fit h-fit max-w-lg mx-auto", children: [AppSettings.ThemeData?.enableWideVersion &&
|
|
11
|
-
_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-24 -translate-x-[100%] z-20 w-12 h-22 rounded-l-xl", children: _jsx("div", { className: "flex flex-col bg-secondary-400 h-full p-1.5 sm:p-2 w-full space-y-2 animate-pulse rounded-l-xl" }) }), _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] sm:pb-4 bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" })] }), _jsx("div", { className: "layerswap-styles w-full sm:pb-4 z-[1] mx-auto rounded-3xl md:shadow-lg
|
|
11
|
+
_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute left-0 top-24 -translate-x-[100%] z-20 w-12 h-22 rounded-l-xl", children: _jsx("div", { className: "flex flex-col bg-secondary-400 h-full p-1.5 sm:p-2 w-full space-y-2 animate-pulse rounded-l-xl" }) }), _jsx("div", { className: "invisible sm:visible absolute inset-0 rounded-[25px] sm:pb-4 bg-gradient-to-t from-secondary-800 to-secondary-300 pointer-events-none" })] }), _jsx("div", { className: "layerswap-styles w-full sm:pb-4 z-[1] mx-auto rounded-3xl md:shadow-lg relative bg-gradient-to-b from-secondary-700 to-secondary-700 ", 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-wit", children: _jsx("div", { className: "w-full overflow-visible 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-fit flex flex-col justify-between text-secondary-500 h-full", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "w-full grid grid-cols-5 px-4 pb-2 mt-2", children: [!AppSettings.ThemeData?.header?.hideTabs && _jsxs("div", { className: "col-start-1 justify-self-start self-center flex items-center w-[76px] h-[40px] bg-secondary-500 rounded-lg p-1.5", children: [_jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md mr-2" }), _jsx("div", { className: "w-7 h-7 bg-secondary-300 rounded-md" })] }), _jsxs("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-2 sm:gap-x-1 sm:mr-2", children: [!AppSettings.ThemeData?.header?.hideWallets && _jsx("div", { className: "p-1.5 max-sm:p-2 ", children: _jsx(WalletIcon, { className: "w-6 h-6", strokeWidth: "2" }) }), !AppSettings.ThemeData?.header?.hideMenu && _jsx("div", { className: "p-1.5 max-sm:p-2 sm:-mr-2 -mr-0", children: _jsx(MenuIcon, { className: "w-6 h-6", strokeWidth: "2" }) })] })] }), _jsxs("div", { className: "px-4 h-full grow flex flex-col flex-1 justify-between w-full gap-3", children: [_jsxs("div", { className: "flex-col relative flex justify-between gap-2 w-full leading-4", children: [_jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] max-sm:w-full h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 rounded-lg w-7 h-7 bg-secondary-400 animate-pulse" }), _jsxs("div", { className: "flex flex-col bg-secondary-500 rounded-2xl p-4 pb-[15px] space-y-[27px] w-[438px] max-sm:w-full h-[156px] group animate-pulse", children: [_jsx("div", { className: "grid grid-cols-9 gap-2 items-center h-7", children: _jsx("div", { className: "block col-span-5 h-5" }) }), _jsx("div", { className: "relative", children: _jsx("div", { className: "justify-self-end self-start", children: _jsx("div", { className: "flex flex-col self-end relative items-center", children: _jsx("div", { className: "rounded-2xl flex items-center relative w-full z-10 self-end", children: _jsx("div", { className: "rounded-2xl relative grow flex items-center justify-bottom px-2 pr-0 bg-secondary-300 py-[6px] h-12 w-40" }) }) }) }) })] })] }), _jsx("div", { className: "", children: _jsx("div", { className: "w-full h-12 bg-primary animate-pulse rounded-xl py-3 px-2 md:px-3" }) }), !AppSettings.ThemeData?.hidePoweredBy &&
|
|
12
12
|
_jsx("div", { className: clsx("flex justify-center text-secondary-text", {
|
|
13
13
|
'mt-3 sm:!mb-0': isFooterSticky,
|
|
14
14
|
'mb-3 sm:!mb-0': !isFooterSticky,
|
|
@@ -13,5 +13,5 @@ export default function ThemeWrapper({ children }) {
|
|
|
13
13
|
error: {
|
|
14
14
|
duration: Infinity,
|
|
15
15
|
},
|
|
16
|
-
}, 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 max-w-[472px] z-auto", children: _jsx("div", { className: "flex h-full content-center items-center justify-center flex-col
|
|
16
|
+
}, 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 sm:max-w-[472px] z-auto", children: _jsx("div", { className: "flex h-full w-full content-center items-center justify-center flex-col", children: _jsx("div", { className: "h-full w-full text-primary-text", children: children }) }) }), _jsx("div", { id: "offset-for-stickyness", className: "block md:hidden" })] }) }) });
|
|
17
17
|
}
|