@layerswap/widget 0.1.16 → 0.1.17-beta.6
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/Models/Theme.d.ts +1 -1
- package/dist/Models/Theme.js +75 -75
- package/dist/components/ColorSchema.js +1 -0
- package/dist/components/HeaderWithMenu/index.js +1 -1
- package/dist/components/Input/Address/AddressNote.js +1 -1
- package/dist/components/Modal/leaflet.js +2 -2
- package/dist/components/Modal/modal.js +3 -3
- package/dist/components/Modal/vaulModal.js +10 -4
- package/dist/components/Pages/SwapPages/Form/FeeDetails/RefuelModal.js +6 -6
- package/dist/components/Pages/SwapPages/Form/Form.js +1 -1
- package/dist/components/Pages/SwapPages/Form/Select/Command/commandSelect.js +2 -2
- package/dist/components/Wallet/WalletModal/ConnectorsList.js +1 -1
- package/dist/components/Widget/Footer.js +2 -2
- package/dist/components/WidgetLoading.d.ts +2 -1
- package/dist/components/WidgetLoading.js +6 -4
- package/dist/components/themeWrapper.js +12 -12
- package/dist/context/LayerswapProvider.d.ts +3 -1
- package/dist/context/LayerswapProvider.js +11 -11
- package/dist/hooks/useWindowDimensions.d.ts +1 -0
- package/dist/hooks/useWindowDimensions.js +6 -2
- package/dist/index.css +5325 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +1 -0
- package/package.json +5 -3
package/dist/Models/Theme.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export type ThemeData = {
|
|
|
8
8
|
secondary?: ThemeColor;
|
|
9
9
|
headerLogo?: string;
|
|
10
10
|
footerLogoHeight?: string;
|
|
11
|
-
|
|
11
|
+
enablePortal?: boolean;
|
|
12
12
|
borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'extraLarge' | 'default';
|
|
13
13
|
};
|
|
14
14
|
export type ThemeColor = {
|
package/dist/Models/Theme.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
export const THEME_COLORS = {
|
|
2
|
-
"
|
|
3
|
-
backdrop: "
|
|
4
|
-
actionButtonText: '0, 0, 0',
|
|
5
|
-
buttonTextColor: '255, 255, 255',
|
|
2
|
+
"default": {
|
|
3
|
+
backdrop: "62, 18, 64",
|
|
6
4
|
placeholderText: '140, 152, 192',
|
|
7
|
-
|
|
5
|
+
actionButtonText: '254, 255, 254',
|
|
6
|
+
buttonTextColor: '228, 229, 240',
|
|
7
|
+
logo: '255, 0, 147',
|
|
8
8
|
borderRadius: 'small',
|
|
9
9
|
primary: {
|
|
10
|
-
DEFAULT: '
|
|
11
|
-
'50': '
|
|
12
|
-
'100': '
|
|
13
|
-
'200': '
|
|
14
|
-
'300': '
|
|
15
|
-
'400': '
|
|
16
|
-
'500': '
|
|
17
|
-
'600': '
|
|
18
|
-
'700': '
|
|
19
|
-
'800': '
|
|
20
|
-
'900': '
|
|
21
|
-
'text': '
|
|
10
|
+
DEFAULT: '228, 37, 117',
|
|
11
|
+
'50': '248, 200, 220',
|
|
12
|
+
'100': '246, 182, 209',
|
|
13
|
+
'200': '241, 146, 186',
|
|
14
|
+
'300': '237, 110, 163',
|
|
15
|
+
'400': '232, 73, 140',
|
|
16
|
+
'500': '228, 37, 117',
|
|
17
|
+
'600': '166, 51, 94',
|
|
18
|
+
'700': '136, 17, 67',
|
|
19
|
+
'800': '147, 8, 99',
|
|
20
|
+
'900': '110, 0, 64',
|
|
21
|
+
'text': '254, 255, 254',
|
|
22
22
|
'textMuted': '86, 97, 123',
|
|
23
23
|
},
|
|
24
24
|
secondary: {
|
|
@@ -34,47 +34,8 @@ export const THEME_COLORS = {
|
|
|
34
34
|
'800': '15, 25, 47',
|
|
35
35
|
'900': '12, 21, 39',
|
|
36
36
|
'950': '11, 17, 35',
|
|
37
|
-
'text': '
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
"ea7df14a1597407f9f755f05e25bab42": {
|
|
41
|
-
backdrop: "0, 121, 133",
|
|
42
|
-
placeholderText: '198, 242, 246',
|
|
43
|
-
actionButtonText: '0, 0, 0',
|
|
44
|
-
buttonTextColor: '255, 255, 255',
|
|
45
|
-
logo: '255, 255, 255',
|
|
46
|
-
borderRadius: 'small',
|
|
47
|
-
primary: {
|
|
48
|
-
DEFAULT: '128, 226, 235',
|
|
49
|
-
'50': '255, 255, 255',
|
|
50
|
-
'100': '255, 255, 255',
|
|
51
|
-
'200': '234, 250, 252',
|
|
52
|
-
'300': '198, 242, 246',
|
|
53
|
-
'400': '163, 234, 241',
|
|
54
|
-
'500': '128, 226, 235',
|
|
55
|
-
'600': '80, 215, 227',
|
|
56
|
-
'700': '34, 201, 217',
|
|
57
|
-
'800': '26, 156, 168',
|
|
58
|
-
'900': '19, 111, 120',
|
|
59
|
-
'950': '15, 89, 96',
|
|
60
|
-
'text': '255, 255, 255',
|
|
61
|
-
'textMuted': '86, 97, 123',
|
|
37
|
+
'text': '171, 181, 209',
|
|
62
38
|
},
|
|
63
|
-
secondary: {
|
|
64
|
-
DEFAULT: '46, 89, 112',
|
|
65
|
-
'50': '193, 217, 230',
|
|
66
|
-
'100': '179, 208, 224',
|
|
67
|
-
'200': '150, 191, 212',
|
|
68
|
-
'300': '121, 173, 200',
|
|
69
|
-
'400': '92, 155, 188',
|
|
70
|
-
'500': '34, 66, 83',
|
|
71
|
-
'600': '16, 35, 49',
|
|
72
|
-
'700': '15, 29, 39',
|
|
73
|
-
'800': '34, 66, 83',
|
|
74
|
-
'900': '22, 43, 54',
|
|
75
|
-
'950': '14, 27, 34',
|
|
76
|
-
'text': '209, 251, 255',
|
|
77
|
-
}
|
|
78
39
|
},
|
|
79
40
|
"light": {
|
|
80
41
|
placeholderText: '134, 134, 134',
|
|
@@ -113,26 +74,26 @@ export const THEME_COLORS = {
|
|
|
113
74
|
'text': '108, 108, 108',
|
|
114
75
|
},
|
|
115
76
|
},
|
|
116
|
-
"
|
|
117
|
-
backdrop: "
|
|
77
|
+
"imxMarketplace": {
|
|
78
|
+
backdrop: "0, 121, 133",
|
|
79
|
+
actionButtonText: '0, 0, 0',
|
|
80
|
+
buttonTextColor: '255, 255, 255',
|
|
118
81
|
placeholderText: '140, 152, 192',
|
|
119
|
-
|
|
120
|
-
buttonTextColor: '228, 229, 240',
|
|
121
|
-
logo: '255, 0, 147',
|
|
82
|
+
logo: '255, 255, 255',
|
|
122
83
|
borderRadius: 'small',
|
|
123
84
|
primary: {
|
|
124
|
-
DEFAULT: '
|
|
125
|
-
'50': '
|
|
126
|
-
'100': '
|
|
127
|
-
'200': '
|
|
128
|
-
'300': '
|
|
129
|
-
'400': '
|
|
130
|
-
'500': '
|
|
131
|
-
'600': '
|
|
132
|
-
'700': '
|
|
133
|
-
'800': '
|
|
134
|
-
'900': '
|
|
135
|
-
'text': '
|
|
85
|
+
DEFAULT: '46, 236, 255',
|
|
86
|
+
'50': '230, 253, 255',
|
|
87
|
+
'100': '209, 251, 255',
|
|
88
|
+
'200': '168, 247, 255',
|
|
89
|
+
'300': '128, 243, 255',
|
|
90
|
+
'400': '87, 240, 255',
|
|
91
|
+
'500': '46, 236, 255',
|
|
92
|
+
'600': '0, 232, 255',
|
|
93
|
+
'700': '0, 172, 189',
|
|
94
|
+
'800': '0, 121, 133',
|
|
95
|
+
'900': '0, 70, 77',
|
|
96
|
+
'text': '255, 255, 255',
|
|
136
97
|
'textMuted': '86, 97, 123',
|
|
137
98
|
},
|
|
138
99
|
secondary: {
|
|
@@ -148,9 +109,48 @@ export const THEME_COLORS = {
|
|
|
148
109
|
'800': '15, 25, 47',
|
|
149
110
|
'900': '12, 21, 39',
|
|
150
111
|
'950': '11, 17, 35',
|
|
151
|
-
'text': '
|
|
112
|
+
'text': '209, 251, 255',
|
|
152
113
|
},
|
|
153
114
|
},
|
|
115
|
+
"ea7df14a1597407f9f755f05e25bab42": {
|
|
116
|
+
backdrop: "0, 121, 133",
|
|
117
|
+
placeholderText: '198, 242, 246',
|
|
118
|
+
actionButtonText: '0, 0, 0',
|
|
119
|
+
buttonTextColor: '255, 255, 255',
|
|
120
|
+
logo: '255, 255, 255',
|
|
121
|
+
borderRadius: 'small',
|
|
122
|
+
primary: {
|
|
123
|
+
DEFAULT: '128, 226, 235',
|
|
124
|
+
'50': '255, 255, 255',
|
|
125
|
+
'100': '255, 255, 255',
|
|
126
|
+
'200': '234, 250, 252',
|
|
127
|
+
'300': '198, 242, 246',
|
|
128
|
+
'400': '163, 234, 241',
|
|
129
|
+
'500': '128, 226, 235',
|
|
130
|
+
'600': '80, 215, 227',
|
|
131
|
+
'700': '34, 201, 217',
|
|
132
|
+
'800': '26, 156, 168',
|
|
133
|
+
'900': '19, 111, 120',
|
|
134
|
+
'950': '15, 89, 96',
|
|
135
|
+
'text': '255, 255, 255',
|
|
136
|
+
'textMuted': '86, 97, 123',
|
|
137
|
+
},
|
|
138
|
+
secondary: {
|
|
139
|
+
DEFAULT: '46, 89, 112',
|
|
140
|
+
'50': '193, 217, 230',
|
|
141
|
+
'100': '179, 208, 224',
|
|
142
|
+
'200': '150, 191, 212',
|
|
143
|
+
'300': '121, 173, 200',
|
|
144
|
+
'400': '92, 155, 188',
|
|
145
|
+
'500': '34, 66, 83',
|
|
146
|
+
'600': '16, 35, 49',
|
|
147
|
+
'700': '15, 29, 39',
|
|
148
|
+
'800': '34, 66, 83',
|
|
149
|
+
'900': '22, 43, 54',
|
|
150
|
+
'950': '14, 27, 34',
|
|
151
|
+
'text': '209, 251, 255',
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
154
|
"evmos": {
|
|
155
155
|
placeholderText: '128, 110, 107',
|
|
156
156
|
actionButtonText: '254, 255, 254',
|
|
@@ -39,6 +39,7 @@ const ColorSchema = ({ themeData }) => {
|
|
|
39
39
|
--ls-border-radius-md: ${adjustBorderRadius('medium', borderRadius)};
|
|
40
40
|
--ls-border-radius-lg: ${adjustBorderRadius('large', borderRadius)};
|
|
41
41
|
--ls-border-radius-xl: ${adjustBorderRadius('extraLarge', borderRadius)};
|
|
42
|
+
--ls-border-radius-full: 9999px;
|
|
42
43
|
--ls-border-radius-default: ${adjustBorderRadius('small', borderRadius)};
|
|
43
44
|
|
|
44
45
|
--ls-colors-backdrop: ${backdrop};
|
|
@@ -13,7 +13,7 @@ function HeaderWithMenu({ goBack }) {
|
|
|
13
13
|
const { boot, show, update } = useIntercom();
|
|
14
14
|
const updateWithProps = () => update({ userId, customAttributes: { email: email, } });
|
|
15
15
|
const query = useQueryState();
|
|
16
|
-
return (_jsxs("div", { className: "w-full grid grid-cols-5 px-6
|
|
16
|
+
return (_jsxs("div", { className: "w-full grid grid-cols-5 px-6 pt-3 pb-2", children: [goBack &&
|
|
17
17
|
_jsx(IconButton, { onClick: goBack, "aria-label": "Go back", className: "-ml-2", icon: _jsx(ArrowLeft, { strokeWidth: "2" }) }), _jsx("div", { className: "col-start-5 justify-self-end self-center flex items-center gap-x-1 -mr-2", children: _jsx("div", { className: "fixed-width-container", children: _jsx(LayerswapMenu, {}) }) })] }));
|
|
18
18
|
}
|
|
19
19
|
export default HeaderWithMenu;
|
|
@@ -5,7 +5,7 @@ import AddressIcon from "../../Common/AddressIcon";
|
|
|
5
5
|
const AddressNote = ({ partner, values }) => {
|
|
6
6
|
const { to: destination, destination_address } = values;
|
|
7
7
|
return (destination && destination_address ?
|
|
8
|
-
_jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-
|
|
8
|
+
_jsxs("div", { className: "flex flex-col items-center gap-6 mt-2", children: [_jsx("div", { className: "h-24 w-24 rounded-xl overflow-hidden", children: _jsx(AddressIcon, { className: "scale-150 h-24 w-24 blur-[1.5px]", address: destination_address, size: 96 }) }), _jsxs("div", { className: "text-center max-w-xs space-y-1", children: [_jsx("p", { className: "text-2xl", children: "Address Confirmation" }), _jsxs("p", { className: "text-secondary-text", children: [_jsx("span", { children: "Destination address was autofilled from URL" }), " ", partner && _jsxs(_Fragment, { children: [_jsx("span", { children: "by" }), " ", _jsxs("span", { children: [partner.display_name, "."] })] }), " ", _jsx("span", { children: "Please double-check its correctness." })] })] }), _jsxs("div", { className: "w-full rounded-lg bg-secondary-700 overflow-hidden px-4 py-3 space-y-2", children: [_jsx("div", { className: "gap-4 flex relative items-center outline-none w-full text-primary-text", children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "text-secondary-text", children: [_jsx("span", { children: destination?.display_name }), " ", _jsx("span", { children: "address" })] }), _jsxs("div", { className: "flex items-center gap-4 text-secondary-text", children: [_jsx(CopyButton, { toCopy: destination_address }), _jsx("a", { href: destination?.account_explorer_template?.replace('{0}', destination_address) || '', target: "_blank", children: _jsx(ExternalLink, { className: "h-4 w-4" }) })] })] }) }), _jsxs("div", { className: 'flex gap-3 text-sm items-center', children: [_jsx("div", { className: 'flex flex-shrink-0 bg-secondary-400 text-primary-text items-center justify-center rounded-md h-9 overflow-hidden w-9', children: _jsx(AddressIcon, { className: "scale-150 h-9 w-9", address: destination_address, size: 36 }) }), _jsx("p", { className: "break-all text-sm", children: destination_address })] })] })] })
|
|
9
9
|
: null);
|
|
10
10
|
};
|
|
11
11
|
export default AddressNote;
|
|
@@ -10,7 +10,7 @@ export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, ti
|
|
|
10
10
|
const mobileModalRef = useRef(null);
|
|
11
11
|
const controls = useAnimation();
|
|
12
12
|
const transitionProps = { type: "spring", stiffness: 500, damping: 40 };
|
|
13
|
-
const { isMobile } = useWindowDimensions();
|
|
13
|
+
const { isMobileWithPortal: isMobile } = useWindowDimensions();
|
|
14
14
|
const handleDragEnd = useCallback(async (_, info) => {
|
|
15
15
|
const offset = info.offset.y;
|
|
16
16
|
const velocity = info.velocity.y;
|
|
@@ -60,5 +60,5 @@ export const Leaflet = forwardRef(function Leaflet({ show, setShow, children, ti
|
|
|
60
60
|
default:
|
|
61
61
|
wrapperHeightClass = '';
|
|
62
62
|
}
|
|
63
|
-
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-
|
|
63
|
+
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")] }));
|
|
64
64
|
});
|
|
@@ -5,15 +5,15 @@ import useWindowDimensions from "../../hooks/useWindowDimensions";
|
|
|
5
5
|
import { Leaflet } from "./leaflet";
|
|
6
6
|
import ReactPortal from "../Common/ReactPortal";
|
|
7
7
|
const Modal = (({ header, height, className, children, subHeader, show, setShow, modalId, onClose }) => {
|
|
8
|
-
const {
|
|
8
|
+
const { isMobileWithPortal, isDesktop } = useWindowDimensions();
|
|
9
9
|
const mobileModalRef = useRef(null);
|
|
10
10
|
//Fixes draggebles closing
|
|
11
11
|
const [delayedShow, setDelayedShow] = useState();
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
setDelayedShow(show);
|
|
14
14
|
}, [show]);
|
|
15
|
-
return (_jsxs(_Fragment, { children: [isDesktop && (_jsx(ReactPortal, { wrapperId: "widget_root", children: _jsx(AnimatePresence, { children: delayedShow &&
|
|
16
|
-
_jsx(Leaflet, { position: "absolute", height: height ?? 'full', show: delayedShow, setShow: setShow, title: header, description: subHeader, className: className, onClose: onClose, children: children }, modalId) }) })),
|
|
15
|
+
return (_jsxs(_Fragment, { children: [(isDesktop || (!isDesktop && !isMobileWithPortal)) && (_jsx(ReactPortal, { wrapperId: "widget_root", children: _jsx(AnimatePresence, { children: delayedShow &&
|
|
16
|
+
_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 &&
|
|
17
17
|
_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) }))] }));
|
|
18
18
|
});
|
|
19
19
|
export default Modal;
|
|
@@ -9,8 +9,9 @@ import { SnapPointsProvider, useSnapPoints } from '../../context/snapPointsConte
|
|
|
9
9
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
10
10
|
import { createPortal } from 'react-dom';
|
|
11
11
|
import { Drawer } from './vaul';
|
|
12
|
+
import AppSettings from '../../lib/AppSettings';
|
|
12
13
|
const Comp = ({ children, show, setShow, header, description, onClose, onAnimationEnd }) => {
|
|
13
|
-
const { isMobile } = useWindowDimensions();
|
|
14
|
+
const { isMobileWithPortal: isMobile } = useWindowDimensions();
|
|
14
15
|
let [headerRef, { height }] = useMeasure();
|
|
15
16
|
const { setHeaderHeight } = useSnapPoints();
|
|
16
17
|
const expandRef = useRef(null);
|
|
@@ -61,8 +62,9 @@ const Comp = ({ children, show, setShow, header, description, onClose, onAnimati
|
|
|
61
62
|
expandRef.current?.classList.add('hidden');
|
|
62
63
|
}, modal: isMobile ? true : false, repositionInputs: false, onAnimationEnd: onAnimationEnd, handleOnly: isMobile, children: _jsxs(Drawer.Portal, { children: [_jsx(Drawer.Close, { asChild: true, children: isMobile
|
|
63
64
|
? _jsx(Drawer.Overlay, { className: 'fixed inset-0 z-50 bg-black/50 block' })
|
|
64
|
-
: _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('
|
|
65
|
+
: _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 ', {
|
|
65
66
|
'!border-none !rounded-none': snap === 1,
|
|
67
|
+
'!fixed sm:!absolute': AppSettings.ThemeData?.enablePortal == true,
|
|
66
68
|
}), children: [_jsxs("div", { ref: headerRef, className: 'w-full relative', children: [isMobile &&
|
|
67
69
|
_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 &&
|
|
68
70
|
_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) => {
|
|
|
96
98
|
return (_jsx("div", { ...props, className: props.className ?? 'pb-6', id: props.id, ref: ref, children: props.children }));
|
|
97
99
|
};
|
|
98
100
|
const VaulDrawer = (props) => {
|
|
99
|
-
const {
|
|
100
|
-
return (_jsx(SnapPointsProvider, { isMobile:
|
|
101
|
+
const { isMobileWithPortal } = useWindowDimensions();
|
|
102
|
+
return (_jsx(SnapPointsProvider, { isMobile: isMobileWithPortal, children: _jsx(Comp, { ...props, children: props.children }) }));
|
|
101
103
|
};
|
|
102
104
|
VaulDrawer.Snap = VaulDrawerSnap;
|
|
105
|
+
// type Props = {
|
|
106
|
+
// children: React.ReactNode,
|
|
107
|
+
// isWalletModalOpen?: boolean
|
|
108
|
+
// }
|
|
103
109
|
// export const WalletFooterPortal: FC<Props> = ({ children, isWalletModalOpen }) => {
|
|
104
110
|
export const WalletFooterPortal = ({ children, isWalletModalOpen }) => {
|
|
105
111
|
const ref = useRef(null);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Modal from '../../../../Modal/modal';
|
|
3
2
|
import { Fuel } from 'lucide-react';
|
|
4
3
|
import { roundDecimals, truncateDecimals } from '../../../../utils/RoundDecimals';
|
|
5
4
|
import SubmitButton from '../../../../Buttons/submitButton';
|
|
@@ -7,6 +6,7 @@ import SecondaryButton from '../../../../Buttons/secondaryButton';
|
|
|
7
6
|
import { useFormikContext } from 'formik';
|
|
8
7
|
import { useFee } from '../../../../../context/feeContext';
|
|
9
8
|
import useSWRBalance from '../../../../../lib/balances/useSWRBalance';
|
|
9
|
+
import VaulDrawer from '../../../../Modal/vaulModal';
|
|
10
10
|
const RefuelModal = ({ openModal, setOpenModal }) => {
|
|
11
11
|
const { values, setFieldValue } = useFormikContext();
|
|
12
12
|
const { to, toCurrency, refuel, destination_address } = values || {};
|
|
@@ -23,10 +23,10 @@ const RefuelModal = ({ openModal, setOpenModal }) => {
|
|
|
23
23
|
setFieldValue('refuel', true);
|
|
24
24
|
setOpenModal(false);
|
|
25
25
|
};
|
|
26
|
-
return (_jsx(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
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) &&
|
|
27
|
+
_jsxs("div", { className: "flex flex-col divide-y-2 divide-secondary-900 w-full rounded-lg bg-secondary-700 overflow-hidden", children: [destNativeTokenBalance &&
|
|
28
|
+
_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 &&
|
|
29
|
+
_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 &&
|
|
30
|
+
_jsx(SubmitButton, { type: "button", onClick: enabldeRefuel, children: "Enable Refuel" }), _jsx(SecondaryButton, { type: "button", className: 'h-full w-full py-3', onClick: closeModal, children: "Close" })] })] }) }) }));
|
|
31
31
|
};
|
|
32
32
|
export default RefuelModal;
|
|
@@ -126,7 +126,7 @@ const SwapForm = ({ partner }) => {
|
|
|
126
126
|
}, [values.amount]);
|
|
127
127
|
const sourceWalletNetwork = values.fromExchange ? undefined : values.from;
|
|
128
128
|
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));
|
|
129
|
-
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 &&
|
|
129
|
+
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 &&
|
|
130
130
|
_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) ?
|
|
131
131
|
_jsx("div", { className: "mb-6 leading-4", children: _jsx(ResizablePanel, { children: _jsx(CEXNetworkFormField, { direction: fromExchange ? 'from' : 'to', partner: partner }) }) })
|
|
132
132
|
: _jsx(_Fragment, {}), _jsx("div", { className: "mb-6 leading-4", children: _jsx(AmountField, {}) }), _jsxs("div", { className: "w-full", children: [validationMessage ?
|
|
@@ -11,14 +11,14 @@ export class SelectMenuItemGroup {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
export default function CommandSelect({ values, setValue, show, setShow, searchHint, valueGrouper, isLoading, modalHeight = 'full', modalContent, header }) {
|
|
14
|
-
const { isDesktop,
|
|
14
|
+
const { isDesktop, isMobileWithPortal, windowSize } = useWindowDimensions();
|
|
15
15
|
let groups = valueGrouper(values);
|
|
16
16
|
const handleSelectValue = useCallback((item) => {
|
|
17
17
|
setValue(item);
|
|
18
18
|
setShow(false);
|
|
19
19
|
}, [setValue, setShow]);
|
|
20
20
|
const inputRef = React.useRef(null);
|
|
21
|
-
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:
|
|
21
|
+
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 &&
|
|
22
22
|
_jsx(CommandInput, { ref: inputRef, placeholder: searchHint }), modalContent, !isLoading ?
|
|
23
23
|
_jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), groups.filter(g => g.items?.length > 0).map((group) => {
|
|
24
24
|
return (_jsx(CommandGroup, { heading: group.name, children: group.items.map(item => {
|
|
@@ -16,7 +16,7 @@ import VaulDrawer from "../../Modal/vaulModal";
|
|
|
16
16
|
import CopyButton from "../../Buttons/copyButton";
|
|
17
17
|
import LayerSwapLogoSmall from "../../Icons/layerSwapLogoSmall";
|
|
18
18
|
const ConnectorsLsit = ({ onFinish }) => {
|
|
19
|
-
const { isMobile } = useWindowDimensions();
|
|
19
|
+
const { isMobileWithPortal: isMobile } = useWindowDimensions();
|
|
20
20
|
const { providers } = useWallet();
|
|
21
21
|
const { setSelectedConnector, selectedProvider, setSelectedProvider, selectedConnector } = useConnectModal();
|
|
22
22
|
let [recentConnectors, setRecentConnectors] = usePersistedState([], 'recentConnectors', 'localStorage');
|
|
@@ -30,7 +30,7 @@ const Comp = ({ children, hidden, sticky = true }) => {
|
|
|
30
30
|
return (sticky ?
|
|
31
31
|
_jsxs(_Fragment, { children: [_jsx(motion.div, { ref: footerRef, transition: {
|
|
32
32
|
duration: 0.15,
|
|
33
|
-
}, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base
|
|
33
|
+
}, custom: { direction: -1, width: 100 }, variants: variants, className: `text-primary-text text-base
|
|
34
34
|
max-sm:fixed
|
|
35
35
|
max-sm:inset-x-0
|
|
36
36
|
max-sm:bottom-0
|
|
@@ -49,7 +49,7 @@ const Comp = ({ children, hidden, sticky = true }) => {
|
|
|
49
49
|
const Footer = ({ children, hidden, sticky }) => {
|
|
50
50
|
const isFooterVisible = LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['mainnet'] &&
|
|
51
51
|
LayerSwapApiClient.apiKey !== AppSettings.LayerswapApiKeys['testnet'];
|
|
52
|
-
const isFooterSticky = AppSettings.ThemeData?.
|
|
52
|
+
const isFooterSticky = (AppSettings.ThemeData?.enablePortal && AppSettings.ThemeData?.enablePortal == true) ?? false;
|
|
53
53
|
return (_jsxs(Comp, { hidden: hidden, sticky: isFooterSticky ? sticky : false, children: [children, isFooterVisible &&
|
|
54
54
|
_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' })] })] }));
|
|
55
55
|
};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
export declare const WidgetLoading: FC;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { MenuIcon } from "lucide-react";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import ColorSchema from "./ColorSchema";
|
|
4
|
+
import AppSettings from "../lib/AppSettings";
|
|
5
|
+
export const WidgetLoading = () => {
|
|
6
|
+
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" }) })] })] }) }) }) }) }) }) }) }) })] }));
|
|
7
|
+
};
|
|
@@ -2,16 +2,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { X } from "lucide-react";
|
|
3
3
|
import toast, { ToastBar, Toaster } from "react-hot-toast";
|
|
4
4
|
export default function ThemeWrapper({ children }) {
|
|
5
|
-
return _jsx("
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
5
|
+
return _jsx("main", { className: "styled-scroll", children: _jsxs("div", { className: `flex flex-col items-center overflow-hidden relative font-robo`, children: [_jsx(Toaster, { containerStyle: {
|
|
6
|
+
position: 'absolute',
|
|
7
|
+
}, toastOptions: {
|
|
8
|
+
duration: 5000,
|
|
9
|
+
style: {
|
|
10
|
+
background: '#131E36',
|
|
11
|
+
color: '#a4afc8'
|
|
12
|
+
},
|
|
13
|
+
error: {
|
|
14
|
+
duration: Infinity,
|
|
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 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" })] }) });
|
|
17
17
|
}
|
|
@@ -16,4 +16,6 @@ export type LayerswapContextProps = {
|
|
|
16
16
|
icons?: string[];
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
declare const LayerswapProviderComponent: FC<LayerswapContextProps>;
|
|
20
|
+
export declare const LayerswapProvider: typeof LayerswapProviderComponent;
|
|
21
|
+
export {};
|
|
@@ -10,20 +10,20 @@ import ErrorFallback from "../components/ErrorFallback";
|
|
|
10
10
|
import QueryProvider from "./query";
|
|
11
11
|
import { THEME_COLORS } from "../Models/Theme";
|
|
12
12
|
import { TooltipProvider } from "../components/shadcn/tooltip";
|
|
13
|
-
import ColorSchema from "../components/ColorSchema";
|
|
14
13
|
import { AsyncModalProvider } from "./asyncModal";
|
|
15
14
|
import WalletsProviders from "../components/Wallet/WalletProviders";
|
|
16
15
|
import { IntercomProvider } from 'react-use-intercom';
|
|
17
16
|
import AppSettings from "../lib/AppSettings";
|
|
18
17
|
import { getSettings } from "../helpers/getSettings";
|
|
19
|
-
import WidgetLoading from "../components/WidgetLoading";
|
|
18
|
+
import { WidgetLoading } from "../components/WidgetLoading";
|
|
20
19
|
import LayerSwapApiClient from "../lib/layerSwapApiClient";
|
|
20
|
+
import ColorSchema from "../components/ColorSchema";
|
|
21
21
|
const INTERCOM_APP_ID = 'h5zisg78';
|
|
22
|
-
|
|
22
|
+
const LayerswapProviderComponent = ({ children, settings: _settings, themeData, apiKey, integrator, version, walletConnect }) => {
|
|
23
23
|
const [fetchedSettings, setFetchedSettings] = useState(null);
|
|
24
24
|
AppSettings.ApiVersion = version;
|
|
25
25
|
AppSettings.Integrator = integrator;
|
|
26
|
-
AppSettings.ThemeData = themeData;
|
|
26
|
+
AppSettings.ThemeData = { ...THEME_COLORS['default'], ...themeData };
|
|
27
27
|
LayerSwapApiClient.apiKey = apiKey;
|
|
28
28
|
useEffect(() => {
|
|
29
29
|
if (!_settings) {
|
|
@@ -36,12 +36,12 @@ export const LayerswapProvider = ({ children, settings: _settings, themeData, ap
|
|
|
36
36
|
}
|
|
37
37
|
}, []);
|
|
38
38
|
const settings = _settings || fetchedSettings;
|
|
39
|
-
if (!settings)
|
|
40
|
-
return
|
|
41
|
-
_jsx(ColorSchema, { themeData: themeData }), _jsx(WidgetLoading, {})] });
|
|
42
|
-
}
|
|
39
|
+
if (!settings)
|
|
40
|
+
return _jsx(WidgetLoading, {});
|
|
43
41
|
let appSettings = new LayerSwapAppSettings(settings);
|
|
44
|
-
themeData =
|
|
45
|
-
return (
|
|
46
|
-
|
|
42
|
+
themeData = { ...THEME_COLORS['default'], ...themeData };
|
|
43
|
+
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 }) }) }) }) }) }) }) }) }));
|
|
44
|
+
};
|
|
45
|
+
export const LayerswapProvider = (props) => {
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsx(ColorSchema, { themeData: props.themeData }), _jsx("div", { style: { backgroundColor: 'transparent' }, className: "layerswap-styles", children: _jsx(LayerswapProviderComponent, { ...props, children: props.children }) })] }));
|
|
47
47
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useEffect, useState } from "react";
|
|
2
|
+
import AppSettings from "../lib/AppSettings";
|
|
2
3
|
export default function useWindowDimensions() {
|
|
3
4
|
const [windowSize, setWindowSize] = useState({
|
|
4
5
|
width: undefined,
|
|
@@ -20,9 +21,12 @@ export default function useWindowDimensions() {
|
|
|
20
21
|
// Remove event listener on cleanup
|
|
21
22
|
return () => window.removeEventListener("resize", handleResize);
|
|
22
23
|
}, []); // Empty array ensures that effect is only run on mount
|
|
24
|
+
const isMobile = typeof windowSize?.width === "number" && windowSize?.width < 768;
|
|
25
|
+
const isDesktop = typeof windowSize?.width === "number" && windowSize?.width >= 768;
|
|
23
26
|
return {
|
|
24
27
|
windowSize,
|
|
25
|
-
isMobile
|
|
26
|
-
|
|
28
|
+
isMobile,
|
|
29
|
+
isMobileWithPortal: isMobile && AppSettings.ThemeData?.enablePortal == true,
|
|
30
|
+
isDesktop
|
|
27
31
|
};
|
|
28
32
|
}
|