@lifi/widget 1.29.2 → 1.29.4

package/cjs/components/AppContainer.js

@@ -50,7 +50,7 @@ exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
 });
 const AppContainer = ({ children }) => {
     // const ref = useRef<HTMLDivElement>(null);
-    const { containerStyle, variant } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsx)(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
+    const { containerStyle, variant, elementId } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsx)(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ id: (0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
 exports.AppContainer = AppContainer;

package/cjs/components/BottomSheet/BottomSheet.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const Dialog_1 = require("../Dialog");
 exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = (0, hooks_1.useGetScrollableContainer)();
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
     const close = (0, react_1.useCallback)(() => {
@@ -22,5 +23,5 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open, onC
         },
         close,
     }), [close]);
-    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ container: hooks_1.getScrollableContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, BackdropProps: Dialog_1.backdropProps, disableAutoFocus: true }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, Object.assign({ container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: Dialog_1.modalProps, PaperProps: Dialog_1.paperProps, BackdropProps: Dialog_1.backdropProps, disableAutoFocus: true }, { children: children })));
 });

package/cjs/components/Dialog.js

@@ -26,6 +26,7 @@ exports.backdropProps = {
     },
 };
 const Dialog = ({ children, open, onClose, }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ container: hooks_1.getScrollableContainer, open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps }, { children: children })));
+    const getContainer = (0, hooks_1.useGetScrollableContainer)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, Object.assign({ container: getContainer, open: open, onClose: onClose, sx: exports.modalProps.sx, PaperProps: exports.paperProps, BackdropProps: exports.backdropProps }, { children: children })));
 };
 exports.Dialog = Dialog;

package/cjs/components/Header/Header.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = exports.HeaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
@@ -10,7 +11,8 @@ const NavigationHeader_1 = require("./NavigationHeader");
 const WalletHeader_1 = require("./WalletHeader");
 const HeaderContainer = ({ children }) => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: utils_1.ElementId.Header, sticky: utils_1.stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
+    const elementId = (0, hooks_1.useDefaultElementId)();
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: (0, utils_1.createElementId)(utils_1.ElementId.Header, elementId), sticky: utils_1.stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 exports.HeaderContainer = HeaderContainer;
 const Header = () => {

package/cjs/components/SwapButton/SwapButton.js

@@ -44,7 +44,7 @@ const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
             }
             return variant !== 'refuel'
                 ? t(`button.reviewSwap`)
-                : t(`button.startGasSwap`);
+                : t(`button.reviewGasSwap`);
         }
         return t(`button.connectWallet`);
     };

package/cjs/config/version.d.ts

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

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.29.2';
+exports.version = '1.29.4';

package/cjs/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/cjs/hooks/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./useChain"), exports);
 __exportStar(require("./useChains"), exports);
 __exportStar(require("./useContentHeight"), exports);
 __exportStar(require("./useDebouncedWatch"), exports);
+__exportStar(require("./useDefaultElementId"), exports);
 __exportStar(require("./useExpandableVariant"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);

package/cjs/hooks/useContentHeight.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetContentHeight = exports.useContentHeight = void 0;
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const useDefaultElementId_1 = require("./useDefaultElementId");
 const useScrollableContainer_1 = require("./useScrollableContainer");
-const getContentHeight = () => {
-    const headerElement = document.getElementById(utils_1.ElementId.Header);
-    const containerElement = document.getElementById(utils_1.ElementId.ScrollableContainer);
+const getContentHeight = (elementId) => {
+    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
+    const containerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
         return 0;
@@ -16,10 +17,11 @@ const getContentHeight = () => {
     return containerHeight - headerHeight;
 };
 const useContentHeight = () => {
-    const [contentHeight, setContentHeight] = (0, react_1.useState)(getContentHeight);
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(() => getContentHeight(elementId));
     (0, react_1.useLayoutEffect)(() => {
         if (!contentHeight) {
-            setContentHeight(getContentHeight());
+            setContentHeight(getContentHeight(elementId));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -27,9 +29,10 @@ const useContentHeight = () => {
 };
 exports.useContentHeight = useContentHeight;
 const useSetContentHeight = (ref) => {
+    const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
     (0, react_1.useLayoutEffect)(() => {
         var _a;
-        const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)();
+        const scrollableContainer = (0, useScrollableContainer_1.getScrollableContainer)(elementId);
         if (!scrollableContainer ||
             !ref.current ||
             ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
@@ -39,6 +42,6 @@ const useSetContentHeight = (ref) => {
         return () => {
             scrollableContainer.style.removeProperty('height');
         };
-    }, [ref]);
+    }, [elementId, ref]);
 };
 exports.useSetContentHeight = useSetContentHeight;

package/cjs/hooks/useDefaultElementId.d.ts

@@ -0,0 +1 @@
+export declare const useDefaultElementId: () => string;

package/cjs/hooks/useDefaultElementId.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDefaultElementId = void 0;
+const providers_1 = require("../providers");
+const useDefaultElementId = () => {
+    const { elementId } = (0, providers_1.useWidgetConfig)();
+    return elementId;
+};
+exports.useDefaultElementId = useDefaultElementId;

package/cjs/hooks/useScrollableContainer.d.ts

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

package/cjs/hooks/useScrollableContainer.js

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

package/cjs/i18n/en.json

@@ -19,6 +19,7 @@
     "okay": "Okay",
     "removeSwap": "Remove swap",
     "restartSwap": "Restart swap",
+    "reviewGasSwap": "Review gas swap",
     "reviewSwap": "Review swap",
     "seeDetails": "See details",
     "showAll": "Show all",

package/cjs/i18n/uk.json

@@ -19,6 +19,7 @@
     "okay": "Добре",
     "removeSwap": "Видалити своп",
     "restartSwap": "Перезапустити своп",
+    "reviewGasSwap": "Переглянути своп газу",
     "reviewSwap": "Переглянути своп",
     "seeDetails": "Детальніше",
     "showAll": "Показати всі",
@@ -29,10 +30,11 @@
   },
   "format": {
     "currency": "{{value, currency(currency: USD)}}",
-    "number": "{{value, number(maximumFractionDigits: 4)}}"
+    "number": "{{value, number(maximumFractionDigits: 9)}}"
   },
   "header": {
     "activeSwaps": "Активні свопи",
+    "checkout": "Розрахунок",
     "from": "Своп з",
     "gas": "Газ",
     "gasSwap": "Своп газу",
@@ -74,8 +76,8 @@
       "message": {
         "slippageThreshold": "Прослизання перевищує визначений поріг. Будь ласка, зробіть запит на новий маршрут, щоб отримати нову пропозицію.",
         "transactionFailed": "Будь ласка, перевірте провідник блоків для отримання додаткової інформації.",
-        "transactionNotSent": "Транзакція не була відправлена, ваші кошти все ще знаходяться у вашому гаманці ({{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} на {{chainName}}).",
-        "transactionRejected": "Для завершення транзакції потрібен ваш підпис. {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} на {{chainName}} залишаються у вашому гаманці.",
+        "transactionNotSent": "Транзакція не була відправлена. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}} все ще знаходяться у вашому гаманці.",
+        "transactionRejected": "Для завершення транзакції потрібен ваш підпис. {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}} залишаються у вашому гаманці.",
         "unknown": "Будь ласка, спробуйте ще раз або зверніться до служби підтримки."
       },
       "title": {
@@ -115,8 +117,11 @@
         "routeNotFound": "Немає доступних маршрутів"
       }
     },
+    "nftStepDetails": "Придбати NFT через {{tool}}",
     "onChain": "на {{chainName}}",
     "otherTokens": "Інші токени",
+    "ownedBy": "Власник",
+    "payWith": "Оплатити з",
     "process": {
       "crossChain": {
         "actionRequired": "Будь ласка, підпишіть транзакцію",
@@ -162,7 +167,7 @@
     "success": {
       "message": {
         "swapPartiallySuccessful": "Ми намагалися завершити своп, але {{tool}} не вистачило ліквідності токену {{tokenSymbol}}.",
-        "swapSuccessful": "Зараз у гаманці {{walletAddress}} на чейні {{chainName}} є {{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}}."
+        "swapSuccessful": "Зараз є {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} у гаманці {{walletAddress}} на чейні {{chainName}}."
       },
       "title": {
         "gasSwapSuccessful": "Своп газу успішний",
@@ -183,7 +188,7 @@
     },
     "to": "До",
     "tokenOnChain": "{{tokenSymbol}} на {{chainName}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} на {{chainName}}",
+    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} на {{chainName}}",
     "tokenSearch": "Знайдіть свій токен",
     "valueLoss": "Втрата вартості",
     "walletAddressOrEns": "Адреса гаманця або ім’я ENS",

package/cjs/pages/SwapPage/SwapPage.js

@@ -30,6 +30,7 @@ const TokenValueBottomSheet_1 = require("./TokenValueBottomSheet");
 const SwapPage = () => {
     var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { variant } = (0, providers_1.useWidgetConfig)();
     const { state } = (0, react_router_dom_1.useLocation)();
     const { navigateBack } = (0, hooks_1.useNavigateBack)();
     const tokenValueBottomSheetRef = (0, react_1.useRef)(null);
@@ -69,7 +70,9 @@ const SwapPage = () => {
     const getSwapButtonText = () => {
         switch (status) {
             case stores_1.RouteExecutionStatus.Idle:
-                return t('button.startSwap');
+                return variant !== 'refuel'
+                    ? t(`button.startSwap`)
+                    : t(`button.startGasSwap`);
             case stores_1.RouteExecutionStatus.Failed:
                 return t('button.tryAgain');
             default:

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -19,6 +19,7 @@ const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const initialContext = {
     disabledChains: [],
+    elementId: '',
 };
 const WidgetContext = (0, react_1.createContext)(initialContext);
 const useWidgetConfig = () => (0, react_1.useContext)(WidgetContext);
@@ -26,6 +27,7 @@ exports.useWidgetConfig = useWidgetConfig;
 const WidgetProvider = (_a) => {
     var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount"]);
     const settingsStoreContext = (0, stores_1.useSettingsStoreContext)();
+    const elementId = (0, react_1.useId)();
     const value = (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d, _e, _f;
         try {
@@ -54,13 +56,13 @@ const WidgetProvider = (_a) => {
                         : undefined, fromToken: ((_e = searchParams.fromToken) === null || _e === void 0 ? void 0 : _e.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_f = searchParams.toToken) === null || _f === void 0 ? void 0 : _f.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
                     !isNaN(parseFloat(searchParams.fromAmount))
                     ? (0, utils_1.formatAmount)(searchParams.fromAmount)
-                    : fromAmount });
+                    : fromAmount, elementId });
         }
         catch (e) {
             console.warn(e);
-            return config;
+            return Object.assign(Object.assign({}, config), { elementId });
         }
-    }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
+    }, [config, elementId, fromAmount, fromChain, fromToken, toChain, toToken]);
     (0, react_1.useEffect)(() => {
         (0, stores_1.setDefaultSettings)(settingsStoreContext, value);
     }, [settingsStoreContext, value]);

package/cjs/providers/WidgetProvider/types.d.ts

@@ -2,6 +2,7 @@ import type { WidgetConfig } from '../../types';
 export type WidgetContextProps = WidgetConfig & {
     fromChain?: number;
     toChain?: number;
+    elementId: string;
 };
 export interface WidgetProviderProps {
     config?: WidgetConfig;

package/cjs/utils/elements.d.ts

@@ -2,3 +2,4 @@ export declare enum ElementId {
     ScrollableContainer = "widget-scrollable-container",
     Header = "widget-header"
 }
+export declare const createElementId: (ElementId: ElementId, elementId: string) => string;

package/cjs/utils/elements.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ElementId = void 0;
+exports.createElementId = exports.ElementId = void 0;
 var ElementId;
 (function (ElementId) {
     ElementId["ScrollableContainer"] = "widget-scrollable-container";
     ElementId["Header"] = "widget-header";
 })(ElementId = exports.ElementId || (exports.ElementId = {}));
+const createElementId = (ElementId, elementId) => `${ElementId}-${elementId}`;
+exports.createElementId = createElementId;

package/components/AppContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useWidgetConfig } from '../providers';
-import { ElementId } from '../utils';
+import { createElementId, ElementId } from '../utils';
 export const maxHeight = 680;
 export const AppExpandedContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'variant',
@@ -47,6 +47,6 @@ export const FlexContainer = styled(Container)({
 });
 export const AppContainer = ({ children }) => {
     // const ref = useRef<HTMLDivElement>(null);
-    const { containerStyle, variant } = useWidgetConfig();
-    return (_jsx(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: _jsx(CssBaselineContainer, Object.assign({ id: ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
+    const { containerStyle, variant, elementId } = useWidgetConfig();
+    return (_jsx(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: _jsx(CssBaselineContainer, Object.assign({ id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };

package/components/BottomSheet/BottomSheet.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { getScrollableContainer } from '../../hooks';
+import { useGetScrollableContainer } from '../../hooks';
 import { backdropProps, modalProps, paperProps } from '../Dialog';
 export const BottomSheet = forwardRef(({ elementRef, children, open, onClose }, ref) => {
+    const getContainer = useGetScrollableContainer();
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
     const close = useCallback(() => {
@@ -19,5 +20,5 @@ export const BottomSheet = forwardRef(({ elementRef, children, open, onClose },
         },
         close,
     }), [close]);
-    return (_jsx(Drawer, Object.assign({ container: getScrollableContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true }, { children: children })));
+    return (_jsx(Drawer, Object.assign({ container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true }, { children: children })));
 });

package/components/Dialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog as MuiDialog } from '@mui/material';
-import { getScrollableContainer } from '../hooks';
+import { useGetScrollableContainer } from '../hooks';
 export const modalProps = {
     sx: {
         position: 'absolute',
@@ -23,5 +23,6 @@ export const backdropProps = {
     },
 };
 export const Dialog = ({ children, open, onClose, }) => {
-    return (_jsx(MuiDialog, Object.assign({ container: getScrollableContainer, open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps }, { children: children })));
+    const getContainer = useGetScrollableContainer();
+    return (_jsx(MuiDialog, Object.assign({ container: getContainer, open: open, onClose: onClose, sx: modalProps.sx, PaperProps: paperProps, BackdropProps: backdropProps }, { children: children })));
 };

package/components/Header/Header.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
+import { useDefaultElementId } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { ElementId, stickyHeaderRoutes } from '../../utils';
+import { createElementId, ElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
 export const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
-    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
+    const elementId = useDefaultElementId();
+    return (_jsx(Container, Object.assign({ id: createElementId(ElementId.Header, elementId), sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 export const Header = () => {
     const { walletManagement } = useWidgetConfig();

package/components/SwapButton/SwapButton.js

@@ -41,7 +41,7 @@ export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, })
             }
             return variant !== 'refuel'
                 ? t(`button.reviewSwap`)
-                : t(`button.startGasSwap`);
+                : t(`button.reviewGasSwap`);
         }
         return t(`button.connectWallet`);
     };

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/hooks/index.js

@@ -2,6 +2,7 @@ export * from './useChain';
 export * from './useChains';
 export * from './useContentHeight';
 export * from './useDebouncedWatch';
+export * from './useDefaultElementId';
 export * from './useExpandableVariant';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';

package/hooks/useContentHeight.js

@@ -1,9 +1,10 @@
 import { useLayoutEffect, useState } from 'react';
-import { ElementId } from '../utils';
+import { createElementId, ElementId } from '../utils';
+import { useDefaultElementId } from './useDefaultElementId';
 import { getScrollableContainer } from './useScrollableContainer';
-const getContentHeight = () => {
-    const headerElement = document.getElementById(ElementId.Header);
-    const containerElement = document.getElementById(ElementId.ScrollableContainer);
+const getContentHeight = (elementId) => {
+    const headerElement = document.getElementById(createElementId(ElementId.Header, elementId));
+    const containerElement = document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${ElementId.ScrollableContainer} or ${ElementId.Header} id.`);
         return 0;
@@ -13,19 +14,21 @@ const getContentHeight = () => {
     return containerHeight - headerHeight;
 };
 export const useContentHeight = () => {
-    const [contentHeight, setContentHeight] = useState(getContentHeight);
+    const elementId = useDefaultElementId();
+    const [contentHeight, setContentHeight] = useState(() => getContentHeight(elementId));
     useLayoutEffect(() => {
         if (!contentHeight) {
-            setContentHeight(getContentHeight());
+            setContentHeight(getContentHeight(elementId));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return contentHeight;
 };
 export const useSetContentHeight = (ref) => {
+    const elementId = useDefaultElementId();
     useLayoutEffect(() => {
         var _a;
-        const scrollableContainer = getScrollableContainer();
+        const scrollableContainer = getScrollableContainer(elementId);
         if (!scrollableContainer ||
             !ref.current ||
             ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight) <= (scrollableContainer === null || scrollableContainer === void 0 ? void 0 : scrollableContainer.clientHeight)) {
@@ -35,5 +38,5 @@ export const useSetContentHeight = (ref) => {
         return () => {
             scrollableContainer.style.removeProperty('height');
         };
-    }, [ref]);
+    }, [elementId, ref]);
 };

package/hooks/useDefaultElementId.d.ts

@@ -0,0 +1 @@
+export declare const useDefaultElementId: () => string;

package/hooks/useDefaultElementId.js

@@ -0,0 +1,5 @@
+import { useWidgetConfig } from '../providers';
+export const useDefaultElementId = () => {
+    const { elementId } = useWidgetConfig();
+    return elementId;
+};

package/hooks/useScrollableContainer.d.ts

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

package/hooks/useScrollableContainer.js

@@ -1,18 +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(getScrollableContainer);
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { createElementId, ElementId } from '../utils';
+import { useDefaultElementId } from './useDefaultElementId';
+export const getScrollableContainer = (elementId) => document.getElementById(createElementId(ElementId.ScrollableContainer, elementId));
+export const useGetScrollableContainer = () => {
+    const elementId = useDefaultElementId();
+    const getContainer = useCallback(() => getScrollableContainer(elementId), [elementId]);
+    return getContainer;
+};
+export const useScrollableContainer = (elementId) => {
+    const [containerElement, setContainerElement] = useState(() => getScrollableContainer(elementId));
     useLayoutEffect(() => {
         if (!containerElement) {
-            setContainerElement(getScrollableContainer());
+            setContainerElement(getScrollableContainer(elementId));
         }
-    }, [containerElement]);
+    }, [containerElement, elementId]);
     return containerElement;
 };
 export const useScrollableOverflowHidden = () => {
+    const elementId = useDefaultElementId();
     useLayoutEffect(() => {
-        const element = getScrollableContainer();
+        const element = getScrollableContainer(elementId);
         if (element) {
             element.style.overflowY = 'hidden';
         }
@@ -21,5 +28,5 @@ export const useScrollableOverflowHidden = () => {
                 element.style.overflowY = 'auto';
             }
         };
-    }, []);
+    }, [elementId]);
 };

package/i18n/en.json

@@ -19,6 +19,7 @@
     "okay": "Okay",
     "removeSwap": "Remove swap",
     "restartSwap": "Restart swap",
+    "reviewGasSwap": "Review gas swap",
     "reviewSwap": "Review swap",
     "seeDetails": "See details",
     "showAll": "Show all",