@lifi/widget 2.9.5 → 2.10.0

package/App.js

@@ -11,9 +11,9 @@ import { RoutesExpanded } from './components/Routes';
 import { useExpandableVariant } from './hooks';
 import { useWidgetConfig } from './providers';
 import { ElementId, createElementId } from './utils';
-export const App = forwardRef(({ elementRef, open, integrator, ...other }, ref) => {
+export const App = forwardRef(({ elementRef, open, onClose, integrator, ...other }, ref) => {
     const config = useMemo(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
-    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open, onClose: onClose }));
 });
 export const AppDefault = () => {
     const { elementId } = useWidgetConfig();

package/AppDrawer.js

@@ -1,26 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CloseIcon from '@mui/icons-material/CloseRounded';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { Drawer } from '@mui/material';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
-import { CloseButtonLayout, DrawerButton, DrawerButtonTypography, } from './AppDrawer.style';
+import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
+import { DrawerContext } from './AppDrawerContext';
 import { AppProvider } from './AppProvider';
 import { HiddenUI } from './types';
-export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
-    const openRef = useRef(open);
+export const AppDrawer = forwardRef(({ elementRef, open, onClose, integrator, config }, ref) => {
+    const openRef = useRef(Boolean(open));
     const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
     const toggleDrawer = useCallback(() => {
-        setDrawerOpen((open) => !open);
-    }, []);
+        setDrawerOpen((open) => {
+            openRef.current = !open;
+            return openRef.current;
+        });
+        if (!openRef.current) {
+            onClose?.();
+        }
+    }, [onClose]);
     const openDrawer = useCallback(() => {
         setDrawerOpen(true);
+        openRef.current = true;
     }, []);
     const closeDrawer = useCallback(() => {
         setDrawerOpen(false);
-    }, []);
+        openRef.current = false;
+        onClose?.();
+    }, [onClose]);
     useImperativeHandle(ref, () => ({
         isOpen: () => openRef.current,
         toggleDrawer,
@@ -35,18 +44,21 @@ export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, r
             height: '100%',
         },
     }), [config, integrator]);
-    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsxs(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
-                    sx: {
-                        backgroundColor: 'rgb(0 0 0 / 48%)',
-                        backdropFilter: 'blur(3px)',
-                    },
-                }, PaperProps: {
-                    sx: {
-                        width: config?.containerStyle?.width ?? '100%',
-                        minWidth: config?.containerStyle?.minWidth ?? 360,
-                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
-                    },
-                }, keepMounted: true, children: [_jsx(CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: _jsx(CloseIcon, {}) }), _jsx(AppDefault, {})] })] }));
+    const drawerContext = useMemo(() => ({
+        closeDrawer,
+    }), [closeDrawer]);
+    return (_jsx(DrawerContext.Provider, { value: drawerContext, children: _jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+                        sx: {
+                            backgroundColor: 'rgb(0 0 0 / 48%)',
+                            backdropFilter: 'blur(3px)',
+                        },
+                    }, PaperProps: {
+                        sx: {
+                            width: config?.containerStyle?.width ?? '100%',
+                            minWidth: config?.containerStyle?.minWidth ?? 360,
+                            maxWidth: config?.containerStyle?.maxWidth ?? 392,
+                        },
+                    }, keepMounted: true, children: _jsx(AppDefault, {}) })] }) }));
 });
 export const DrawerButtonText = ({ open, subvariant, }) => {
     const { t } = useTranslation();

package/AppDrawerContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface WidgetDrawerContext {
+    closeDrawer?(): void;
+}
+export declare const DrawerContext: import("react").Context<WidgetDrawerContext>;
+export declare const useDrawer: () => WidgetDrawerContext;

package/AppDrawerContext.js

@@ -0,0 +1,3 @@
+import { createContext, useContext } from 'react';
+export const DrawerContext = createContext({});
+export const useDrawer = () => useContext(DrawerContext);

package/cjs/App.js

@@ -14,9 +14,9 @@ const Routes_1 = require("./components/Routes");
 const hooks_1 = require("./hooks");
 const providers_1 = require("./providers");
 const utils_1 = require("./utils");
-exports.App = (0, react_1.forwardRef)(({ elementRef, open, integrator, ...other }, ref) => {
+exports.App = (0, react_1.forwardRef)(({ elementRef, open, onClose, integrator, ...other }, ref) => {
     const config = (0, react_1.useMemo)(() => ({ integrator, ...other, ...other.config }), [integrator, other]);
-    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open }));
+    return config?.variant !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, { config: config, children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, integrator: integrator, config: config, open: open, onClose: onClose }));
 });
 const AppDefault = () => {
     const { elementId } = (0, providers_1.useWidgetConfig)();

package/cjs/AppDrawer.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrawerButtonText = exports.AppDrawer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CloseRounded_1 = require("@mui/icons-material/CloseRounded");
 const KeyboardArrowLeft_1 = require("@mui/icons-material/KeyboardArrowLeft");
 const KeyboardArrowRight_1 = require("@mui/icons-material/KeyboardArrowRight");
 const material_1 = require("@mui/material");
@@ -10,20 +9,30 @@ const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const App_1 = require("./App");
 const AppDrawer_style_1 = require("./AppDrawer.style");
+const AppDrawerContext_1 = require("./AppDrawerContext");
 const AppProvider_1 = require("./AppProvider");
 const types_1 = require("./types");
-exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, config }, ref) => {
-    const openRef = (0, react_1.useRef)(open);
+exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, onClose, integrator, config }, ref) => {
+    const openRef = (0, react_1.useRef)(Boolean(open));
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
     const toggleDrawer = (0, react_1.useCallback)(() => {
-        setDrawerOpen((open) => !open);
-    }, []);
+        setDrawerOpen((open) => {
+            openRef.current = !open;
+            return openRef.current;
+        });
+        if (!openRef.current) {
+            onClose?.();
+        }
+    }, [onClose]);
     const openDrawer = (0, react_1.useCallback)(() => {
         setDrawerOpen(true);
+        openRef.current = true;
     }, []);
     const closeDrawer = (0, react_1.useCallback)(() => {
         setDrawerOpen(false);
-    }, []);
+        openRef.current = false;
+        onClose?.();
+    }, [onClose]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => openRef.current,
         toggleDrawer,
@@ -38,18 +47,21 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, con
             height: '100%',
         },
     }), [config, integrator]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
-                    sx: {
-                        backgroundColor: 'rgb(0 0 0 / 48%)',
-                        backdropFilter: 'blur(3px)',
-                    },
-                }, PaperProps: {
-                    sx: {
-                        width: config?.containerStyle?.width ?? '100%',
-                        minWidth: config?.containerStyle?.minWidth ?? 360,
-                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
-                    },
-                }, keepMounted: true, children: [(0, jsx_runtime_1.jsx)(AppDrawer_style_1.CloseButtonLayout, { onClick: closeDrawer, edge: "end", children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, {}) }), (0, jsx_runtime_1.jsx)(App_1.AppDefault, {})] })] }));
+    const drawerContext = (0, react_1.useMemo)(() => ({
+        closeDrawer,
+    }), [closeDrawer]);
+    return ((0, jsx_runtime_1.jsx)(AppDrawerContext_1.DrawerContext.Provider, { value: drawerContext, children: (0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen, subvariant: config?.subvariant })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+                        sx: {
+                            backgroundColor: 'rgb(0 0 0 / 48%)',
+                            backdropFilter: 'blur(3px)',
+                        },
+                    }, PaperProps: {
+                        sx: {
+                            width: config?.containerStyle?.width ?? '100%',
+                            minWidth: config?.containerStyle?.minWidth ?? 360,
+                            maxWidth: config?.containerStyle?.maxWidth ?? 392,
+                        },
+                    }, keepMounted: true, children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) })] }) }));
 });
 const DrawerButtonText = ({ open, subvariant, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();

package/cjs/AppDrawerContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface WidgetDrawerContext {
+    closeDrawer?(): void;
+}
+export declare const DrawerContext: import("react").Context<WidgetDrawerContext>;
+export declare const useDrawer: () => WidgetDrawerContext;

package/cjs/AppDrawerContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDrawer = exports.DrawerContext = void 0;
+const react_1 = require("react");
+exports.DrawerContext = (0, react_1.createContext)({});
+const useDrawer = () => (0, react_1.useContext)(exports.DrawerContext);
+exports.useDrawer = useDrawer;

package/cjs/components/Header/CloseDrawerButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconButtonProps } from '@mui/material/IconButton';
+export declare const CloseDrawerButton: React.FC<IconButtonProps>;

package/cjs/components/Header/CloseDrawerButton.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseDrawerButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CloseRounded_1 = require("@mui/icons-material/CloseRounded");
+const material_1 = require("@mui/material");
+const IconButton_1 = require("@mui/material/IconButton");
+const react_i18next_1 = require("react-i18next");
+const AppDrawerContext_1 = require("../../AppDrawerContext");
+const CloseDrawerButton = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { closeDrawer } = (0, AppDrawerContext_1.useDrawer)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('button.close'), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "medium", onClick: closeDrawer, ...props, children: (0, jsx_runtime_1.jsx)(CloseRounded_1.default, {}) }) }));
+};
+exports.CloseDrawerButton = CloseDrawerButton;

package/cjs/components/Header/Header.style.js

@@ -46,11 +46,14 @@ exports.WalletButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
         fontSize: '24px',
     },
 }));
-exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(() => ({
+exports.DrawerWalletContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     width: '100%',
     display: 'flex',
-    justifyItems: 'start',
-    '& > button': {
-        marginLeft: '-0.5rem',
+    justifyContent: 'space-between',
+    '& button:first-of-type': {
+        marginLeft: theme.spacing(-1),
+    },
+    '& button:last-of-type': {
+        marginRight: theme.spacing(-1.25),
     },
 }));

package/cjs/components/Header/NavigationHeader.js

@@ -13,6 +13,7 @@ const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
+const CloseDrawerButton_1 = require("./CloseDrawerButton");
 const Header_style_1 = require("./Header.style");
 const NavigationTabs_1 = require("./NavigationTabs");
 const WalletHeader_1 = require("./WalletHeader");
@@ -81,8 +82,13 @@ const NavigationHeader = () => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(material_1.Box, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.transactionHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
-                                                    marginRight: -1.25,
-                                                }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
+    const showDrawerCloseButton = variant === 'drawer' &&
+        subvariant === 'split' &&
+        !hiddenUI?.includes(types_1.HiddenUI.DrawerCloseButton);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.transactionHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+                                                    marginRight: showDrawerCloseButton ? 0 : -1.25,
+                                                }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) }), showDrawerCloseButton ? ((0, jsx_runtime_1.jsx)(CloseDrawerButton_1.CloseDrawerButton, { sx: {
+                                                marginRight: -1.25,
+                                            } })) : null] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/WalletHeader.js

@@ -13,7 +13,9 @@ const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils");
+const CloseDrawerButton_1 = require("./CloseDrawerButton");
 const Header_style_1 = require("./Header.style");
 const WalletMenu_1 = require("./WalletMenu");
 const WalletHeader = () => {
@@ -22,9 +24,10 @@ const WalletHeader = () => {
 exports.WalletHeader = WalletHeader;
 const WalletMenuButton = () => {
     const { account } = (0, providers_1.useWallet)();
-    const { variant } = (0, providers_1.useWidgetConfig)();
+    const { variant, subvariant, hiddenUI } = (0, providers_1.useWidgetConfig)();
     if (variant === 'drawer') {
-        return ((0, jsx_runtime_1.jsx)(Header_style_1.DrawerWalletContainer, { children: account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}) }));
+        return ((0, jsx_runtime_1.jsxs)(Header_style_1.DrawerWalletContainer, { children: [account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}), subvariant !== 'split' &&
+                    !hiddenUI?.includes(types_1.HiddenUI.DrawerCloseButton) ? ((0, jsx_runtime_1.jsx)(CloseDrawerButton_1.CloseDrawerButton, {})) : null] }));
     }
     return account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {});
 };

package/cjs/config/version.d.ts

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

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 = '2.9.5';
+exports.version = '2.10.0';

package/cjs/i18n/en.json

@@ -13,6 +13,7 @@
     "buy": "Buy",
     "buyNow": "Buy now",
     "cancel": "Cancel",
+    "close": "Close",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",

package/cjs/types/widget.d.ts

@@ -17,6 +17,7 @@ export type DisabledUIType = `${DisabledUI}`;
 export declare enum HiddenUI {
     Appearance = "appearance",
     DrawerButton = "drawerButton",
+    DrawerCloseButton = "drawerCloseButton",
     History = "history",
     Language = "language",
     PoweredBy = "poweredBy",
@@ -122,6 +123,10 @@ export interface WidgetConfig {
 export type WidgetDrawerProps = {
     elementRef?: RefObject<HTMLDivElement>;
     open?: boolean;
+    /**
+     * Make sure to make the onClose callback stable (e.g. using useCallback) to avoid causing re-renders of the entire widget
+     */
+    onClose?(): void;
 };
 export interface WidgetConfigProps {
     config: WidgetConfig;

package/cjs/types/widget.js

@@ -12,6 +12,7 @@ var HiddenUI;
 (function (HiddenUI) {
     HiddenUI["Appearance"] = "appearance";
     HiddenUI["DrawerButton"] = "drawerButton";
+    HiddenUI["DrawerCloseButton"] = "drawerCloseButton";
     HiddenUI["History"] = "history";
     HiddenUI["Language"] = "language";
     HiddenUI["PoweredBy"] = "poweredBy";

package/components/Header/CloseDrawerButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconButtonProps } from '@mui/material/IconButton';
+export declare const CloseDrawerButton: React.FC<IconButtonProps>;

package/components/Header/CloseDrawerButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import { Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { useDrawer } from '../../AppDrawerContext';
+export const CloseDrawerButton = (props) => {
+    const { t } = useTranslation();
+    const { closeDrawer } = useDrawer();
+    return (_jsx(Tooltip, { title: t('button.close'), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: closeDrawer, ...props, children: _jsx(CloseIcon, {}) }) }));
+};

package/components/Header/Header.style.js

@@ -43,11 +43,14 @@ export const WalletButton = styled(Button)(({ theme }) => ({
         fontSize: '24px',
     },
 }));
-export const DrawerWalletContainer = styled(Box)(() => ({
+export const DrawerWalletContainer = styled(Box)(({ theme }) => ({
     width: '100%',
     display: 'flex',
-    justifyItems: 'start',
-    '& > button': {
-        marginLeft: '-0.5rem',
+    justifyContent: 'space-between',
+    '& button:first-of-type': {
+        marginLeft: theme.spacing(-1),
+    },
+    '& button:last-of-type': {
+        marginRight: theme.spacing(-1.25),
     },
 }));

package/components/Header/NavigationHeader.js

@@ -10,6 +10,7 @@ import { useWallet, useWidgetConfig } from '../../providers';
 import { useHeaderStore } from '../../stores';
 import { HiddenUI } from '../../types';
 import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
+import { CloseDrawerButton } from './CloseDrawerButton';
 import { HeaderAppBar } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
@@ -78,7 +79,12 @@ export const NavigationHeader = () => {
             }
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(Box, { paddingRight: variant === 'drawer' && subvariant === 'split' ? 5 : 0, children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
-                                                    marginRight: -1.25,
-                                                }, children: _jsx(SettingsIcon, {}) }) })] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
+    const showDrawerCloseButton = variant === 'drawer' &&
+        subvariant === 'split' &&
+        !hiddenUI?.includes(HiddenUI.DrawerCloseButton);
+    return (_jsxs(_Fragment, { children: [_jsxs(HeaderAppBar, { elevation: 0, children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: _jsx(ArrowBackIcon, {}) })) : null, splitSubvariant ? (_jsx(Box, { flex: 1, children: !hiddenUI?.includes(HiddenUI.WalletMenu) ? (_jsx(WalletMenuButton, {})) : null })) : (_jsx(Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: title || handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(Box, { children: [account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (_jsx(Tooltip, { title: t(`header.transactionHistory`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", edge: "start", onClick: () => navigate(navigationRoutes.transactionHistory), children: _jsx(ReceiptLongIcon, {}) }) })) : null, _jsx(Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: _jsx(IconButton, { size: "medium", onClick: () => navigate(navigationRoutes.settings), sx: {
+                                                    marginRight: showDrawerCloseButton ? 0 : -1.25,
+                                                }, children: _jsx(SettingsIcon, {}) }) }), showDrawerCloseButton ? (_jsx(CloseDrawerButton, { sx: {
+                                                marginRight: -1.25,
+                                            } })) : null] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? _jsx(NavigationTabs, {}) : null] }));
 };

package/components/Header/WalletHeader.js

@@ -10,7 +10,9 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useChain } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { navigationRoutes, shortenAddress } from '../../utils';
+import { CloseDrawerButton } from './CloseDrawerButton';
 import { DrawerWalletContainer, HeaderAppBar, WalletButton, } from './Header.style';
 import { WalletMenu } from './WalletMenu';
 export const WalletHeader = () => {
@@ -18,9 +20,10 @@ export const WalletHeader = () => {
 };
 export const WalletMenuButton = () => {
     const { account } = useWallet();
-    const { variant } = useWidgetConfig();
+    const { variant, subvariant, hiddenUI } = useWidgetConfig();
     if (variant === 'drawer') {
-        return (_jsx(DrawerWalletContainer, { children: account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}) }));
+        return (_jsxs(DrawerWalletContainer, { children: [account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {}), subvariant !== 'split' &&
+                    !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (_jsx(CloseDrawerButton, {})) : null] }));
     }
     return account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {});
 };

package/config/version.d.ts

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

package/config/version.js

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

package/i18n/en.json

@@ -13,6 +13,7 @@
     "buy": "Buy",
     "buyNow": "Buy now",
     "cancel": "Cancel",
+    "close": "Close",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "2.9.5",
+  "version": "2.10.0",
   "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",
@@ -43,8 +43,8 @@
     "@ethersproject/address": "^5.7.0",
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
-    "@lifi/sdk": "^2.4.3",
-    "@lifi/wallet-management": "^2.5.2",
+    "@lifi/sdk": "^2.5.0",
+    "@lifi/wallet-management": "^2.6.0",
     "@mui/icons-material": "^5.14.14",
     "@mui/lab": "^5.0.0-alpha.149",
     "@mui/material": "^5.14.14",