@lifi/widget 1.31.1 → 1.32.0

package/App.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { AppDrawer } from './AppDrawer';
@@ -20,12 +9,11 @@ import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
 import { useExpandableVariant } from './hooks';
-export const App = forwardRef((_a, ref) => {
-    var { elementRef, open } = _a, other = __rest(_a, ["elementRef", "open"]);
-    const config = useMemo(() => (Object.assign(Object.assign({}, other), other.config)), [other]);
-    return (config === null || config === void 0 ? void 0 : config.variant) !== 'drawer' ? (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) }))) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
+export const App = forwardRef(({ elementRef, open, ...other }, ref) => {
+    const config = useMemo(() => ({ ...other, ...other.config }), [other]);
+    return config?.variant !== 'drawer' ? (_jsx(AppProvider, { config: config, children: _jsx(AppDefault, {}) })) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
 });
 export const AppDefault = () => {
     const expandable = useExpandableVariant();
-    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(SwapRoutesExpanded, {}) : null] }));
+    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, { disableGutters: true, children: _jsx(AppRoutes, {}) }), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), expandable ? _jsx(SwapRoutesExpanded, {}) : null] }));
 };

package/AppDrawer.js

@@ -7,7 +7,6 @@ import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
 export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
-    var _a, _b, _c, _d, _e, _f;
     const { t } = useTranslation();
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(open);
@@ -26,17 +25,24 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
         openDrawer,
         closeDrawer,
     }), [closeDrawer, openDrawer, toggleDrawer]);
-    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: {
+    const drawerConfig = useMemo(() => ({
+        ...config,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+        variant: 'drawer',
+    }), [config]);
+    return (_jsxs(AppProvider, { config: drawerConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
                     },
                 }, PaperProps: {
                     sx: {
-                        width: (_b = (_a = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : '100%',
-                        minWidth: (_d = (_c = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _c === void 0 ? void 0 : _c.minWidth) !== null && _d !== void 0 ? _d : 375,
-                        maxWidth: (_f = (_e = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : 392,
+                        width: config?.containerStyle?.width ?? '100%',
+                        minWidth: config?.containerStyle?.minWidth ?? 375,
+                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
                     },
-                }, keepMounted: true }, { children: _jsx(AppDefault, {}) }))] })));
+                }, keepMounted: true, children: _jsx(AppDefault, {}) })] }));
 });

package/AppDrawer.style.d.ts

@@ -29,7 +29,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     open?: boolean | undefined;
@@ -48,6 +48,6 @@ export declare const DrawerButtonTypography: import("@emotion/styled").StyledCom
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/AppDrawer.style.js

@@ -36,7 +36,7 @@ export const DrawerButton = styled(Button, {
     right: 0,
     top: 'calc(50% - 74px)',
     transform: `translate3d(calc(${open
-        ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
+        ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
         : '0px'} * -1), 0, 0)`,
     transition: theme.transitions.create(['transform'], {
         duration: open

package/AppProvider.js

@@ -6,7 +6,7 @@ import { queryClient } from './config/queryClient';
 import { I18nProvider, SDKProvider, SwapFormProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 import { StoreProvider } from './stores';
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryClientProvider, Object.assign({ client: queryClient }, { children: _jsx(StoreProvider, Object.assign({ namePrefix: config === null || config === void 0 ? void 0 : config.localStorageKeyPrefix }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) })) })) })));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: _jsx(WidgetProvider, { config: config, children: _jsx(SDKProvider, { children: _jsx(ThemeProvider, { children: _jsx(I18nProvider, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();

package/AppRoutes.js

@@ -4,6 +4,7 @@ import { NotFound } from './components/NotFound';
 import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
 import { MainPage } from './pages/MainPage';
 import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
@@ -22,6 +23,14 @@ export const AppRoutes = () => {
             path: navigationRoutes.settings,
             element: _jsx(SettingsPage, {}),
         },
+        {
+            path: `${navigationRoutes.settings}/${navigationRoutes.bridges}`,
+            element: _jsx(SelectEnabledToolsPage, { type: "Bridges" }),
+        },
+        {
+            path: `${navigationRoutes.settings}/${navigationRoutes.exchanges}`,
+            element: _jsx(SelectEnabledToolsPage, { type: "Exchanges" }),
+        },
         {
             path: navigationRoutes.fromToken,
             element: _jsx(SelectTokenPage, { formType: "from" }),

package/cjs/App.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppDefault = exports.App = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -23,13 +12,12 @@ const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
 const SwapRoutes_1 = require("./components/SwapRoutes");
 const hooks_1 = require("./hooks");
-exports.App = (0, react_1.forwardRef)((_a, ref) => {
-    var { elementRef, open } = _a, other = __rest(_a, ["elementRef", "open"]);
-    const config = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, other), other.config)), [other]);
-    return (config === null || config === void 0 ? void 0 : config.variant) !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) }))) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
+exports.App = (0, react_1.forwardRef)(({ elementRef, open, ...other }, ref) => {
+    const config = (0, react_1.useMemo)(() => ({ ...other, ...other.config }), [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, config: config, open: open }));
 });
 const AppDefault = () => {
     const expandable = (0, hooks_1.useExpandableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, Object.assign({ disableGutters: true }, { children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) })), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(AppContainer_1.AppExpandedContainer, { children: [(0, jsx_runtime_1.jsxs)(AppContainer_1.AppContainer, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(AppContainer_1.FlexContainer, { disableGutters: true, children: (0, jsx_runtime_1.jsx)(AppRoutes_1.AppRoutes, {}) }), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }), expandable ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
 };
 exports.AppDefault = AppDefault;

package/cjs/AppDrawer.js

@@ -10,7 +10,6 @@ const App_1 = require("./App");
 const AppDrawer_style_1 = require("./AppDrawer.style");
 const AppProvider_1 = require("./AppProvider");
 exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, config }, ref) => {
-    var _a, _b, _c, _d, _e, _f;
     const { t } = (0, react_i18next_1.useTranslation)();
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(open);
@@ -29,17 +28,24 @@ 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), { 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: {
+    const drawerConfig = (0, react_1.useMemo)(() => ({
+        ...config,
+        containerStyle: {
+            ...config?.containerStyle,
+            height: '100%',
+        },
+        variant: 'drawer',
+    }), [config]);
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: drawerConfig, children: [(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)(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, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',
                     },
                 }, PaperProps: {
                     sx: {
-                        width: (_b = (_a = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : '100%',
-                        minWidth: (_d = (_c = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _c === void 0 ? void 0 : _c.minWidth) !== null && _d !== void 0 ? _d : 375,
-                        maxWidth: (_f = (_e = config === null || config === void 0 ? void 0 : config.containerStyle) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : 392,
+                        width: config?.containerStyle?.width ?? '100%',
+                        minWidth: config?.containerStyle?.minWidth ?? 375,
+                        maxWidth: config?.containerStyle?.maxWidth ?? 392,
                     },
-                }, keepMounted: true }, { children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) }))] })));
+                }, keepMounted: true, children: (0, jsx_runtime_1.jsx)(App_1.AppDefault, {}) })] }));
 });

package/cjs/AppDrawer.style.d.ts

@@ -29,7 +29,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     open?: boolean | undefined;
@@ -48,6 +48,6 @@ export declare const DrawerButtonTypography: import("@emotion/styled").StyledCom
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/AppDrawer.style.js

@@ -39,7 +39,7 @@ exports.DrawerButton = (0, styles_1.styled)(material_1.Button, {
     right: 0,
     top: 'calc(50% - 74px)',
     transform: `translate3d(calc(${open
-        ? getButtonTransformWidth(drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.width, drawerProps === null || drawerProps === void 0 ? void 0 : drawerProps.maxWidth)
+        ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
         : '0px'} * -1), 0, 0)`,
     transition: theme.transitions.create(['transform'], {
         duration: open

package/cjs/AppProvider.js

@@ -9,7 +9,7 @@ const queryClient_1 = require("./config/queryClient");
 const providers_1 = require("./providers");
 const stores_1 = require("./stores");
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, Object.assign({ namePrefix: config === null || config === void 0 ? void 0 : config.localStorageKeyPrefix }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) })) })) })));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { namePrefix: config?.localStorageKeyPrefix, children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, { config: config, children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.I18nProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {

package/cjs/AppRoutes.js

@@ -7,6 +7,7 @@ const NotFound_1 = require("./components/NotFound");
 const ActiveSwapsPage_1 = require("./pages/ActiveSwapsPage");
 const MainPage_1 = require("./pages/MainPage");
 const SelectChainPage_1 = require("./pages/SelectChainPage");
+const SelectEnabledToolsPage_1 = require("./pages/SelectEnabledToolsPage");
 const SelectTokenPage_1 = require("./pages/SelectTokenPage");
 const SelectWalletPage_1 = require("./pages/SelectWalletPage");
 const SettingsPage_1 = require("./pages/SettingsPage");
@@ -25,6 +26,14 @@ const AppRoutes = () => {
             path: utils_1.navigationRoutes.settings,
             element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
         },
+        {
+            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.bridges}`,
+            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Bridges" }),
+        },
+        {
+            path: `${utils_1.navigationRoutes.settings}/${utils_1.navigationRoutes.exchanges}`,
+            element: (0, jsx_runtime_1.jsx)(SelectEnabledToolsPage_1.SelectEnabledToolsPage, { type: "Exchanges" }),
+        },
         {
             path: utils_1.navigationRoutes.fromToken,
             element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),

package/cjs/components/ActiveSwaps/ActiveSwapItem.js

@@ -12,15 +12,17 @@ const StepTimer_1 = require("../Step/StepTimer");
 const TokenAvatar_1 = require("../TokenAvatar");
 const ActiveSwaps_style_1 = require("./ActiveSwaps.style");
 const ActiveSwapItem = ({ routeId, dense }) => {
-    var _a;
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { route, status } = (0, hooks_1.useRouteExecution)({
         routeId,
         executeInBackground: true,
     });
     // TODO: replace with ES2023 findLast
-    const lastActiveStep = route === null || route === void 0 ? void 0 : route.steps.slice().reverse().find((step) => step.execution);
-    const lastActiveProcess = (_a = lastActiveStep === null || lastActiveStep === void 0 ? void 0 : lastActiveStep.execution) === null || _a === void 0 ? void 0 : _a.process.at(-1);
+    const lastActiveStep = route?.steps
+        .slice()
+        .reverse()
+        .find((step) => step.execution);
+    const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
     const { title } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
     if (!route || !lastActiveStep) {
         return null;
@@ -29,21 +31,21 @@ const ActiveSwapItem = ({ routeId, dense }) => {
         navigate(utils_1.navigationRoutes.swapExecution, { state: { routeId } });
     };
     const getStatusComponent = () => {
-        switch (lastActiveProcess === null || lastActiveProcess === void 0 ? void 0 : lastActiveProcess.status) {
+        switch (lastActiveProcess?.status) {
             case 'ACTION_REQUIRED':
                 return (0, jsx_runtime_1.jsx)(icons_material_1.InfoRounded, { color: "info", fontSize: "small" });
             case 'FAILED':
                 return (0, jsx_runtime_1.jsx)(icons_material_1.ErrorRounded, { color: "error", fontSize: "small" });
             default:
-                return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, fontWeight: 500 }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) })));
+                return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
         }
     };
     const ListItemComponent = dense ? ActiveSwaps_style_1.ListItem : ActiveSwaps_style_1.ListItemButton;
-    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, Object.assign({ total: 2 }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 500, lineHeight: 1, sx: {
+    return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
                         display: 'flex',
                         alignItems: 'center',
                         marginLeft: 2,
                         height: 16,
-                    } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] })), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2 }, { children: title }))) : null }), getStatusComponent()] })));
+                    }, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
 };
 exports.ActiveSwapItem = ActiveSwapItem;

package/cjs/components/ActiveSwaps/ActiveSwaps.js

@@ -16,13 +16,13 @@ const ActiveSwaps = (props) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { account } = (0, providers_1.useWallet)();
     const executingRoutes = (0, stores_1.useExecutingRoutesIds)(account.address);
-    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+    if (!executingRoutes?.length) {
         return null;
     }
     const handleShowAll = () => {
         navigate(utils_1.navigationRoutes.activeSwaps);
     };
-    const hasShowAll = (executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length) > 2;
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: "selected", selectionColor: "secondary" }, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2 }, { children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) })), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, Object.assign({ disableRipple: true, fullWidth: true, onClick: handleShowAll }, { children: t('button.showAll') }))) : null] })));
+    const hasShowAll = executingRoutes?.length > 2;
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: "selected", selectionColor: "secondary", ...props, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('header.activeSwaps') }), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1.5, pt: 1.5, pb: hasShowAll ? 0 : 2, children: executingRoutes.slice(0, 2).map((routeId) => ((0, jsx_runtime_1.jsx)(ActiveSwapItem_1.ActiveSwapItem, { routeId: routeId, dense: true }, routeId))) }), hasShowAll ? ((0, jsx_runtime_1.jsx)(ActiveSwaps_style_1.ShowAllButton, { disableRipple: true, fullWidth: true, onClick: handleShowAll, children: t('button.showAll') })) : null] }));
 };
 exports.ActiveSwaps = ActiveSwaps;

package/cjs/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -15,7 +15,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
@@ -33,7 +33,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     slots?: {
         root?: import("react").ElementType<any> | undefined;
     } | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "slotProps" | "slots" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
@@ -66,6 +66,6 @@ export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/AppContainer.d.ts

@@ -6,7 +6,7 @@ export declare const AppExpandedContainer: import("@emotion/styled").StyledCompo
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: WidgetVariant | undefined;
@@ -18,7 +18,7 @@ export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     fixed?: boolean | undefined;
     maxWidth?: false | import("@mui/material").Breakpoint | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const AppContainer: React.FC<PropsWithChildren<{}>>;

package/cjs/components/AppContainer.js

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

package/cjs/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { BottomSheetBase, BottomSheetProps } from './types';
-export declare const BottomSheet: import("react").ForwardRefExoticComponent<Pick<BottomSheetProps, "className" | "style" | "classes" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "transitionDuration" | "variant" | "open" | "anchor" | "components" | "componentsProps" | "slotProps" | "slots" | "elevation" | "onClose" | "elementRef" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "BackdropComponent" | "BackdropProps" | "PaperProps" | "ModalProps" | "SlideProps"> & import("react").RefAttributes<BottomSheetBase>>;
+export declare const BottomSheet: import("react").ForwardRefExoticComponent<Omit<BottomSheetProps, "ref"> & import("react").RefAttributes<BottomSheetBase>>;

package/cjs/components/BottomSheet/BottomSheet.js

@@ -13,7 +13,7 @@ exports.BottomSheet = (0, react_1.forwardRef)(({ elementRef, children, open, onC
     const close = (0, react_1.useCallback)(() => {
         setDrawerOpen(false);
         openRef.current = false;
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     }, [onClose]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         isOpen: () => openRef.current,
@@ -23,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: 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 })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { 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/Card/Card.d.ts

@@ -14,7 +14,7 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
     sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant?: CardVariant | undefined;
@@ -23,7 +23,7 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;
     pointerEvents?: "none" | "auto" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component">, {}, {}>;
 export {};

package/cjs/components/Card/CardHeader.d.ts

@@ -13,6 +13,6 @@ export declare const CardHeader: import("@emotion/styled").StyledComponent<{
     titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Card/CardTitle.d.ts

@@ -9,7 +9,7 @@ export declare const CardTitle: import("@emotion/styled").StyledComponent<import
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     required?: boolean | undefined;

package/cjs/components/ChainSelect/ChainSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/cjs/components/ChainSelect/ChainSelect.js

@@ -11,7 +11,6 @@ const utils_1 = require("../../utils");
 const ChainSelect_style_1 = require("./ChainSelect.style");
 const useChainSelect_1 = require("./useChainSelect");
 const ChainSelect = ({ formType }) => {
-    var _a;
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = (0, useChainSelect_1.useChainSelect)(formType);
     const [chainId] = (0, react_hook_form_1.useWatch)({
@@ -25,14 +24,14 @@ const ChainSelect = ({ formType }) => {
     const showAllChains = () => {
         navigate(utils_1.navigationRoutes[`${formType}Chain`]);
     };
-    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
+    const chainsToHide = (chains?.length ?? 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
                 ? Array.from({ length: stores_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: chain.name, placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default' }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 } }, { children: chain.name[0] })) })) }), chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, Object.assign({ onClick: showAllChains }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
+                : getChains().map((chain) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: chain.name, placement: "top", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, { onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default', children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 }, children: chain.name[0] }) }) }, chain.id))), chainsToHide > 0 ? ((0, jsx_runtime_1.jsx)(ChainSelect_style_1.ChainCard, { onClick: showAllChains, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                         width: 40,
                         height: 40,
                         display: 'grid',
                         placeItems: 'center',
-                    } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 500 }, { children: ["+", chainsToHide] })) })) }))) : null] }));
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, children: ["+", chainsToHide] }) }) })) : null] }));
 };
 exports.ChainSelect = ChainSelect;