@lifi/widget 1.18.5 → 1.18.6

package/AppDrawer.js

@@ -26,7 +26,7 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
         openDrawer,
         closeDrawer,
     }), [closeDrawer, openDrawer, toggleDrawer]);
-    const drawerConfig = useMemo(() => (Object.assign(Object.assign({}, config), { variant: 'drawer' })), [config]);
+    const drawerConfig = useMemo(() => (Object.assign(Object.assign({}, config), { containerStyle: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.containerStyle), { height: '100%' }), variant: 'drawer' })), [config]);
     return (_jsxs(AppProvider, Object.assign({ config: drawerConfig }, { children: [_jsxs(DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config === null || config === void 0 ? void 0 : config.containerStyle }, { children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), _jsx(Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',

package/cjs/AppDrawer.js

@@ -29,7 +29,7 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref)
         openDrawer,
         closeDrawer,
     }), [closeDrawer, openDrawer, toggleDrawer]);
-    const drawerConfig = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, config), { variant: 'drawer' })), [config]);
+    const drawerConfig = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, config), { containerStyle: Object.assign(Object.assign({}, config === null || config === void 0 ? void 0 : config.containerStyle), { height: '100%' }), variant: 'drawer' })), [config]);
     return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, Object.assign({ config: drawerConfig }, { children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config === null || config === void 0 ? void 0 : config.containerStyle }, { children: [drawerOpen ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowLeft, {}), (0, jsx_runtime_1.jsx)(AppDrawer_style_1.DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), (0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.5";
+export declare const version = "1.18.6";

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.18.5';
+exports.version = '1.18.6';

package/cjs/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useChain';
 export * from './useChains';
+export * from './useContentHeight';
 export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/cjs/hooks/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChains"), exports);
+__exportStar(require("./useContentHeight"), exports);
 __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);

package/cjs/hooks/useContentHeight.d.ts

@@ -0,0 +1 @@
+export declare const useContentHeight: () => number;

package/cjs/hooks/useContentHeight.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContentHeight = void 0;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const getContentHeight = () => {
+    const headerElement = document.getElementById(utils_1.ElementId.Header);
+    const containerElement = document.getElementById(utils_1.ElementId.ScrollableContainer);
+    if (!containerElement || !headerElement) {
+        console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
+        return 0;
+    }
+    const { height: containerHeight } = containerElement.getBoundingClientRect();
+    const { height: headerHeight } = headerElement.getBoundingClientRect();
+    return containerHeight - headerHeight;
+};
+const useContentHeight = () => {
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(getContentHeight);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!contentHeight) {
+            setContentHeight(getContentHeight());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return contentHeight;
+};
+exports.useContentHeight = useContentHeight;

package/cjs/hooks/useScrollableContainer.d.ts

@@ -1 +1,3 @@
+export declare const getScrollableContainer: () => HTMLElement | null;
 export declare const useScrollableContainer: () => HTMLElement | null;
+export declare const useScrollableOverflowHidden: () => void;

package/cjs/hooks/useScrollableContainer.js

@@ -1,15 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollableContainer = void 0;
+exports.useScrollableOverflowHidden = exports.useScrollableContainer = exports.getScrollableContainer = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const getScrollableContainer = () => document.getElementById(utils_1.ElementId.ScrollableContainer);
+exports.getScrollableContainer = getScrollableContainer;
 const useScrollableContainer = () => {
-    const [containerElement, setContainerElement] = (0, react_1.useState)(() => document.getElementById(utils_1.ElementId.ScrollableContainer));
+    const [containerElement, setContainerElement] = (0, react_1.useState)(exports.getScrollableContainer);
     (0, react_1.useLayoutEffect)(() => {
         if (!containerElement) {
-            setContainerElement(document.getElementById(utils_1.ElementId.ScrollableContainer));
+            setContainerElement((0, exports.getScrollableContainer)());
         }
     }, [containerElement]);
     return containerElement;
 };
 exports.useScrollableContainer = useScrollableContainer;
+const useScrollableOverflowHidden = () => {
+    (0, react_1.useLayoutEffect)(() => {
+        const element = (0, exports.getScrollableContainer)();
+        if (element) {
+            element.style.overflowY = 'hidden';
+        }
+        return () => {
+            if (element) {
+                element.style.overflowY = 'auto';
+            }
+        };
+    }, []);
+};
+exports.useScrollableOverflowHidden = useScrollableOverflowHidden;

package/cjs/pages/SelectTokenPage/SelectTokenPage.js

@@ -3,12 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTokenPage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const ChainSelect_1 = require("../../components/ChainSelect");
 const TokenList_1 = require("../../components/TokenList");
 const hooks_1 = require("../../hooks");
 const SearchTokenInput_1 = require("./SearchTokenInput");
+const minTokenListHeight = 360;
 const SelectTokenPage = ({ formType }) => {
+    (0, hooks_1.useScrollableOverflowHidden)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: 360, onClick: navigateBack, formType: formType })] })));
+    const headerRef = (0, react_1.useRef)(null);
+    const contentHeight = (0, hooks_1.useContentHeight)();
+    const [tokenListHeight, setTokenListHeight] = (0, react_1.useState)(0);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
+    }, [contentHeight]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Container, Object.assign({ disableGutters: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [(0, jsx_runtime_1.jsx)(ChainSelect_1.ChainSelect, { formType: formType }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mt: 2 }, { children: (0, jsx_runtime_1.jsx)(SearchTokenInput_1.SearchTokenInput, {}) }))] })), (0, jsx_runtime_1.jsx)(TokenList_1.TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
 };
 exports.SelectTokenPage = SelectTokenPage;

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.18.5";
+export declare const version = "1.18.6";

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.18.5';
+export const version = '1.18.6';

package/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useChain';
 export * from './useChains';
+export * from './useContentHeight';
 export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/hooks/index.js

@@ -1,5 +1,6 @@
 export * from './useChain';
 export * from './useChains';
+export * from './useContentHeight';
 export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/hooks/useContentHeight.d.ts

@@ -0,0 +1 @@
+export declare const useContentHeight: () => number;

package/hooks/useContentHeight.js

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useState } from 'react';
+import { ElementId } from '../utils';
+const getContentHeight = () => {
+    const headerElement = document.getElementById(ElementId.Header);
+    const containerElement = document.getElementById(ElementId.ScrollableContainer);
+    if (!containerElement || !headerElement) {
+        console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
+        return 0;
+    }
+    const { height: containerHeight } = containerElement.getBoundingClientRect();
+    const { height: headerHeight } = headerElement.getBoundingClientRect();
+    return containerHeight - headerHeight;
+};
+export const useContentHeight = () => {
+    const [contentHeight, setContentHeight] = useState(getContentHeight);
+    useLayoutEffect(() => {
+        if (!contentHeight) {
+            setContentHeight(getContentHeight());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return contentHeight;
+};

package/hooks/useScrollableContainer.d.ts

@@ -1 +1,3 @@
+export declare const getScrollableContainer: () => HTMLElement | null;
 export declare const useScrollableContainer: () => HTMLElement | null;
+export declare const useScrollableOverflowHidden: () => void;

package/hooks/useScrollableContainer.js

@@ -1,11 +1,25 @@
 import { useLayoutEffect, useState } from 'react';
 import { ElementId } from '../utils';
+export const getScrollableContainer = () => document.getElementById(ElementId.ScrollableContainer);
 export const useScrollableContainer = () => {
-    const [containerElement, setContainerElement] = useState(() => document.getElementById(ElementId.ScrollableContainer));
+    const [containerElement, setContainerElement] = useState(getScrollableContainer);
     useLayoutEffect(() => {
         if (!containerElement) {
-            setContainerElement(document.getElementById(ElementId.ScrollableContainer));
+            setContainerElement(getScrollableContainer());
         }
     }, [containerElement]);
     return containerElement;
 };
+export const useScrollableOverflowHidden = () => {
+    useLayoutEffect(() => {
+        const element = getScrollableContainer();
+        if (element) {
+            element.style.overflowY = 'hidden';
+        }
+        return () => {
+            if (element) {
+                element.style.overflowY = 'auto';
+            }
+        };
+    }, []);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.18.5",
+  "version": "1.18.6",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -50,7 +50,7 @@
     "@sentry/integrations": "^7.13.0",
     "@sentry/react": "^7.13.0",
     "@sentry/tracing": "^7.13.0",
-    "@tanstack/react-query": "^4.6.1",
+    "@tanstack/react-query": "^4.7.1",
     "@tanstack/react-virtual": "^3.0.0-beta.18",
     "big.js": "^6.2.1",
     "i18next": "^21.9.2",

package/pages/SelectTokenPage/SelectTokenPage.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Container } from '@mui/material';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { ChainSelect } from '../../components/ChainSelect';
 import { TokenList } from '../../components/TokenList';
-import { useNavigateBack } from '../../hooks';
+import { useContentHeight, useNavigateBack, useScrollableOverflowHidden, } from '../../hooks';
 import { SearchTokenInput } from './SearchTokenInput';
+const minTokenListHeight = 360;
 export const SelectTokenPage = ({ formType }) => {
+    useScrollableOverflowHidden();
     const { navigateBack } = useNavigateBack();
-    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3 }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: 360, onClick: navigateBack, formType: formType })] })));
+    const headerRef = useRef(null);
+    const contentHeight = useContentHeight();
+    const [tokenListHeight, setTokenListHeight] = useState(0);
+    useLayoutEffect(() => {
+        var _a, _b;
+        setTokenListHeight(Math.max(contentHeight - ((_b = (_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0), minTokenListHeight));
+    }, [contentHeight]);
+    return (_jsxs(Container, Object.assign({ disableGutters: true }, { children: [_jsxs(Box, Object.assign({ pt: 1, pb: 2, px: 3, ref: headerRef }, { children: [_jsx(ChainSelect, { formType: formType }), _jsx(Box, Object.assign({ mt: 2 }, { children: _jsx(SearchTokenInput, {}) }))] })), _jsx(TokenList, { height: tokenListHeight, onClick: navigateBack, formType: formType })] })));
 };