@lifi/widget 1.17.2 → 1.18.0

package/App.js

@@ -1,96 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRoutes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
-import { AppContainer, FlexContainer } from './components/AppContainer';
+import { AppRoutes } from './AppRoutes';
+import { AppContainer, AppExpandedContainer, FlexContainer, } from './components/AppContainer';
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
-import { NotFound } from './components/NotFound';
 import { PoweredBy } from './components/PoweredBy';
-import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
-import { MainPage } from './pages/MainPage';
-import { SelectChainPage } from './pages/SelectChainPage';
-import { SelectTokenPage } from './pages/SelectTokenPage';
-import { SelectWalletPage } from './pages/SelectWalletPage';
-import { SettingsPage } from './pages/SettingsPage';
-import { SwapDetailsPage } from './pages/SwapDetailsPage';
-import { SwapHistoryPage } from './pages/SwapHistoryPage';
-import { SwapPage } from './pages/SwapPage';
-import { SwapRoutesPage } from './pages/SwapRoutesPage';
-import { navigationRoutes } from './utils';
+import { SwapRoutesExpanded } from './components/SwapRoutes';
+import { useWidgetConfig } from './providers';
 export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }));
-};
-const AppRoutes = () => {
-    const element = useRoutes([
-        {
-            path: '/',
-            element: _jsx(MainPage, {}),
-        },
-        {
-            path: navigationRoutes.settings,
-            element: _jsx(SettingsPage, {}),
-        },
-        {
-            path: navigationRoutes.fromToken,
-            element: _jsx(SelectTokenPage, { formType: "from" }),
-        },
-        {
-            path: navigationRoutes.toToken,
-            element: _jsx(SelectTokenPage, { formType: "to" }),
-        },
-        ...[
-            navigationRoutes.fromChain,
-            `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
-        ].map((path) => ({
-            path,
-            element: _jsx(SelectChainPage, { formType: "from" }),
-        })),
-        ...[
-            navigationRoutes.toChain,
-            `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
-        ].map((path) => ({
-            path,
-            element: _jsx(SelectChainPage, { formType: "to" }),
-        })),
-        {
-            path: navigationRoutes.swapRoutes,
-            element: _jsx(SwapRoutesPage, {}),
-        },
-        {
-            path: navigationRoutes.activeSwaps,
-            element: _jsx(ActiveSwapsPage, {}),
-        },
-        {
-            path: navigationRoutes.swapHistory,
-            element: _jsx(SwapHistoryPage, {}),
-        },
-        {
-            path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
-            element: _jsx(SwapDetailsPage, {}),
-        },
-        ...[
-            navigationRoutes.selectWallet,
-            `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-        ].map((path) => ({
-            path,
-            element: _jsx(SelectWalletPage, {}),
-        })),
-        ...[
-            navigationRoutes.swapExecution,
-            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
-            `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
-        ].map((path) => ({
-            path,
-            element: _jsx(SwapPage, {}),
-        })),
-        {
-            path: '*',
-            element: _jsx(NotFound, {}),
-        },
-    ]);
-    return element;
+    const { variant } = useWidgetConfig();
+    return (_jsxs(AppExpandedContainer, { children: [_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsx(AppRoutes, {}) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }), variant === 'expandable' ? _jsx(SwapRoutesExpanded, {}) : null] }));
 };

package/AppDrawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, } from '@mui/icons-material';
 import { Drawer } from '@mui/material';
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
@@ -26,7 +26,8 @@ export const AppDrawer = forwardRef(({ elementRef, open, config }, ref) => {
         openDrawer,
         closeDrawer,
     }), [closeDrawer, openDrawer, toggleDrawer]);
-    return (_jsxs(AppProvider, Object.assign({ config: config }, { 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(() => (Object.assign(Object.assign({}, config), { variant: 'drawer' })), [config]);
+    return (_jsxs(AppProvider, Object.assign({ config: drawerConfig }, { children: [_jsxs(DrawerButton, Object.assign({ variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config === null || config === void 0 ? void 0 : config.containerStyle }, { children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonTypography, { children: drawerOpen ? t('button.hide') : t('button.lifiSwap') })] })), _jsx(Drawer, Object.assign({ ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/AppRoutes.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AppRoutes: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/AppRoutes.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
+import { MainPage } from './pages/MainPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { SwapDetailsPage } from './pages/SwapDetailsPage';
+import { SwapHistoryPage } from './pages/SwapHistoryPage';
+import { SwapPage } from './pages/SwapPage';
+import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { navigationRoutes } from './utils';
+export const AppRoutes = () => {
+    const element = useRoutes([
+        {
+            path: '/',
+            element: _jsx(MainPage, {}),
+        },
+        {
+            path: navigationRoutes.settings,
+            element: _jsx(SettingsPage, {}),
+        },
+        {
+            path: navigationRoutes.fromToken,
+            element: _jsx(SelectTokenPage, { formType: "from" }),
+        },
+        {
+            path: navigationRoutes.toToken,
+            element: _jsx(SelectTokenPage, { formType: "to" }),
+        },
+        ...[
+            navigationRoutes.fromChain,
+            `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectChainPage, { formType: "from" }),
+        })),
+        ...[
+            navigationRoutes.toChain,
+            `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectChainPage, { formType: "to" }),
+        })),
+        {
+            path: navigationRoutes.swapRoutes,
+            element: _jsx(SwapRoutesPage, {}),
+        },
+        {
+            path: navigationRoutes.activeSwaps,
+            element: _jsx(ActiveSwapsPage, {}),
+        },
+        {
+            path: navigationRoutes.swapHistory,
+            element: _jsx(SwapHistoryPage, {}),
+        },
+        {
+            path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+            element: _jsx(SwapDetailsPage, {}),
+        },
+        ...[
+            navigationRoutes.selectWallet,
+            `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SelectWalletPage, {}),
+        })),
+        ...[
+            navigationRoutes.swapExecution,
+            `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+            `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
+        ].map((path) => ({
+            path,
+            element: _jsx(SwapPage, {}),
+        })),
+        {
+            path: '*',
+            element: _jsx(NotFound, {}),
+        },
+    ]);
+    return element;
+};

package/cjs/App.js

@@ -2,100 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppDefault = exports.App = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_router_dom_1 = require("react-router-dom");
 const AppProvider_1 = require("./AppProvider");
+const AppRoutes_1 = require("./AppRoutes");
 const AppContainer_1 = require("./components/AppContainer");
 const Header_1 = require("./components/Header");
 const Initializer_1 = require("./components/Initializer");
-const NotFound_1 = require("./components/NotFound");
 const PoweredBy_1 = require("./components/PoweredBy");
-const ActiveSwapsPage_1 = require("./pages/ActiveSwapsPage");
-const MainPage_1 = require("./pages/MainPage");
-const SelectChainPage_1 = require("./pages/SelectChainPage");
-const SelectTokenPage_1 = require("./pages/SelectTokenPage");
-const SelectWalletPage_1 = require("./pages/SelectWalletPage");
-const SettingsPage_1 = require("./pages/SettingsPage");
-const SwapDetailsPage_1 = require("./pages/SwapDetailsPage");
-const SwapHistoryPage_1 = require("./pages/SwapHistoryPage");
-const SwapPage_1 = require("./pages/SwapPage");
-const SwapRoutesPage_1 = require("./pages/SwapRoutesPage");
-const utils_1 = require("./utils");
+const SwapRoutes_1 = require("./components/SwapRoutes");
+const providers_1 = require("./providers");
 const App = ({ config }) => {
     return ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) })));
 };
 exports.App = App;
 const AppDefault = () => {
-    return ((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, {}) })), (0, jsx_runtime_1.jsx)(PoweredBy_1.PoweredBy, {}), (0, jsx_runtime_1.jsx)(Initializer_1.Initializer, {})] }));
+    const { variant } = (0, providers_1.useWidgetConfig)();
+    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, {})] }), variant === 'expandable' ? (0, jsx_runtime_1.jsx)(SwapRoutes_1.SwapRoutesExpanded, {}) : null] }));
 };
 exports.AppDefault = AppDefault;
-const AppRoutes = () => {
-    const element = (0, react_router_dom_1.useRoutes)([
-        {
-            path: '/',
-            element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.settings,
-            element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.fromToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
-        },
-        {
-            path: utils_1.navigationRoutes.toToken,
-            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
-        },
-        ...[
-            utils_1.navigationRoutes.fromChain,
-            `${utils_1.navigationRoutes.fromToken}/${utils_1.navigationRoutes.fromChain}`,
-        ].map((path) => ({
-            path,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
-        })),
-        ...[
-            utils_1.navigationRoutes.toChain,
-            `${utils_1.navigationRoutes.toToken}/${utils_1.navigationRoutes.toChain}`,
-        ].map((path) => ({
-            path,
-            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
-        })),
-        {
-            path: utils_1.navigationRoutes.swapRoutes,
-            element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.activeSwaps,
-            element: (0, jsx_runtime_1.jsx)(ActiveSwapsPage_1.ActiveSwapsPage, {}),
-        },
-        {
-            path: utils_1.navigationRoutes.swapHistory,
-            element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
-        },
-        {
-            path: `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
-            element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
-        },
-        ...[
-            utils_1.navigationRoutes.selectWallet,
-            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
-            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
-        ].map((path) => ({
-            path,
-            element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
-        })),
-        ...[
-            utils_1.navigationRoutes.swapExecution,
-            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}`,
-            `${utils_1.navigationRoutes.activeSwaps}/${utils_1.navigationRoutes.swapExecution}`,
-        ].map((path) => ({
-            path,
-            element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),
-        })),
-        {
-            path: '*',
-            element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),
-        },
-    ]);
-    return element;
-};

package/cjs/AppDrawer.js

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

package/cjs/AppRoutes.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AppRoutes: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/cjs/AppRoutes.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppRoutes = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+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 SelectTokenPage_1 = require("./pages/SelectTokenPage");
+const SelectWalletPage_1 = require("./pages/SelectWalletPage");
+const SettingsPage_1 = require("./pages/SettingsPage");
+const SwapDetailsPage_1 = require("./pages/SwapDetailsPage");
+const SwapHistoryPage_1 = require("./pages/SwapHistoryPage");
+const SwapPage_1 = require("./pages/SwapPage");
+const SwapRoutesPage_1 = require("./pages/SwapRoutesPage");
+const utils_1 = require("./utils");
+const AppRoutes = () => {
+    const element = (0, react_router_dom_1.useRoutes)([
+        {
+            path: '/',
+            element: (0, jsx_runtime_1.jsx)(MainPage_1.MainPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.settings,
+            element: (0, jsx_runtime_1.jsx)(SettingsPage_1.SettingsPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.fromToken,
+            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "from" }),
+        },
+        {
+            path: utils_1.navigationRoutes.toToken,
+            element: (0, jsx_runtime_1.jsx)(SelectTokenPage_1.SelectTokenPage, { formType: "to" }),
+        },
+        ...[
+            utils_1.navigationRoutes.fromChain,
+            `${utils_1.navigationRoutes.fromToken}/${utils_1.navigationRoutes.fromChain}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "from" }),
+        })),
+        ...[
+            utils_1.navigationRoutes.toChain,
+            `${utils_1.navigationRoutes.toToken}/${utils_1.navigationRoutes.toChain}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectChainPage_1.SelectChainPage, { formType: "to" }),
+        })),
+        {
+            path: utils_1.navigationRoutes.swapRoutes,
+            element: (0, jsx_runtime_1.jsx)(SwapRoutesPage_1.SwapRoutesPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.activeSwaps,
+            element: (0, jsx_runtime_1.jsx)(ActiveSwapsPage_1.ActiveSwapsPage, {}),
+        },
+        {
+            path: utils_1.navigationRoutes.swapHistory,
+            element: (0, jsx_runtime_1.jsx)(SwapHistoryPage_1.SwapHistoryPage, {}),
+        },
+        {
+            path: `${utils_1.navigationRoutes.swapHistory}/${utils_1.navigationRoutes.swapDetails}`,
+            element: (0, jsx_runtime_1.jsx)(SwapDetailsPage_1.SwapDetailsPage, {}),
+        },
+        ...[
+            utils_1.navigationRoutes.selectWallet,
+            `${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
+            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}/${utils_1.navigationRoutes.selectWallet}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SelectWalletPage_1.SelectWalletPage, {}),
+        })),
+        ...[
+            utils_1.navigationRoutes.swapExecution,
+            `${utils_1.navigationRoutes.swapRoutes}/${utils_1.navigationRoutes.swapExecution}`,
+            `${utils_1.navigationRoutes.activeSwaps}/${utils_1.navigationRoutes.swapExecution}`,
+        ].map((path) => ({
+            path,
+            element: (0, jsx_runtime_1.jsx)(SwapPage_1.SwapPage, {}),
+        })),
+        {
+            path: '*',
+            element: (0, jsx_runtime_1.jsx)(NotFound_1.NotFound, {}),
+        },
+    ]);
+    return element;
+};
+exports.AppRoutes = AppRoutes;

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

@@ -8,6 +8,7 @@ export declare const ProgressCard: import("@emotion/styled").StyledComponent<imp
     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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: ("default" | "error" | "selected") | undefined;
+    selectionColor?: "primary" | "secondary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;

package/cjs/components/AppContainer.d.ts

@@ -1,4 +1,5 @@
-import type { PropsWithChildren, RefObject } from 'react';
+import type { PropsWithChildren } from 'react';
+export declare const maxHeight = 680;
 export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
@@ -7,9 +8,7 @@ export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     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>> & {
-    ref?: RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    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<{}>>;
-export declare const ScrollToLocation: React.FC<{
-    elementRef: RefObject<HTMLElement>;
-}>;
+export declare const AppExpandedContainer: React.FC<PropsWithChildren<{}>>;

package/cjs/components/AppContainer.js

@@ -1,59 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollToLocation = exports.AppContainer = exports.FlexContainer = void 0;
+exports.AppExpandedContainer = exports.AppContainer = exports.FlexContainer = exports.maxHeight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../providers");
 const utils_1 = require("../utils");
-const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
-    // height: '100%',
+exports.maxHeight = 680;
+const ExpandedContainer = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ variant }) => ({
     display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'start',
     flex: 1,
-    flexDirection: 'column',
-    overflowX: 'clip',
-    marginRight: 0,
-    width: '100%',
+    height: variant === 'drawer' ? 'none' : exports.maxHeight,
 }));
-const RelativeContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+const RelativeContainer = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme, variant }) => ({
     position: 'relative',
     width: '100%',
     minWidth: 375,
     maxWidth: 392,
+    maxHeight: variant === 'drawer' ? 'none' : exports.maxHeight,
     background: theme.palette.background.default,
     overflow: 'auto',
     flex: 1,
     boxSizing: 'border-box',
     zIndex: 0,
 }));
-const ScrollableContainer = (0, styles_1.styled)(material_1.Box)({
-    // position: 'fixed',
+const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ variant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight: variant === 'drawer' ? 'none' : exports.maxHeight,
     overflowY: 'auto',
     height: '100%',
-    flex: 1,
-    display: 'flex',
-});
+}));
 exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
     display: 'flex',
-    flexBasis: 'auto',
     flexDirection: 'column',
-    flexShrink: 0,
-    flexGrow: 1,
+    flex: 1,
 });
 const AppContainer = ({ children }) => {
-    const ref = (0, react_1.useRef)(null);
-    const { containerStyle } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(RelativeContainer, Object.assign({ sx: containerStyle }, { children: [(0, jsx_runtime_1.jsx)(ScrollableContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, ref: ref }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })), (0, jsx_runtime_1.jsx)(exports.ScrollToLocation, { elementRef: ref })] })));
+    // const ref = useRef<HTMLDivElement>(null);
+    const { containerStyle, variant } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsx)(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
 exports.AppContainer = AppContainer;
-const ScrollToLocation = ({ elementRef }) => {
-    const { pathname } = (0, react_router_dom_1.useLocation)();
-    (0, react_1.useLayoutEffect)(() => {
-        var _a;
-        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
-    }, [elementRef, pathname]);
-    return null;
+const AppExpandedContainer = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(ExpandedContainer, { children: children });
 };
-exports.ScrollToLocation = ScrollToLocation;
+exports.AppExpandedContainer = AppExpandedContainer;

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

@@ -10,6 +10,7 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     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"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant?: CardVariant | undefined;
+    selectionColor?: "primary" | "secondary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;

package/cjs/components/Card/Card.js

@@ -3,22 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-const getBackgroundColor = (theme, variant) => variant === 'selected'
-    ? theme.palette.mode === 'light'
-        ? (0, styles_1.alpha)(theme.palette.primary.main, 0.04)
-        : (0, styles_1.alpha)(theme.palette.primary.main, 0.42)
+const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
+    ? selectionColor === 'primary'
+        ? theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.primary.main, 0.04)
+            : (0, styles_1.alpha)(theme.palette.primary.main, 0.42)
+        : (0, styles_1.alpha)(theme.palette.secondary.main, 0.08)
     : theme.palette.background.paper;
 exports.Card = (0, styles_1.styled)(material_1.Box, {
-    shouldForwardProp: (prop) => !['dense', 'variant', 'indented'].includes(prop),
-})(({ theme, variant, dense, indented, onClick }) => {
-    const backgroundColor = getBackgroundColor(theme, variant);
+    shouldForwardProp: (prop) => !['dense', 'variant', 'indented', 'selectionColor'].includes(prop),
+})(({ theme, variant, selectionColor = 'primary', dense, indented, onClick, }) => {
+    const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
     return {
         backgroundColor,
         border: `1px solid`,
         borderColor: variant === 'error'
             ? theme.palette.error.main
             : variant === 'selected'
-                ? theme.palette.primary.main
+                ? selectionColor === 'primary'
+                    ? theme.palette.primary.main
+                    : (0, styles_1.alpha)(theme.palette.secondary.main, 0.48)
                 : theme.palette.mode === 'light'
                     ? theme.palette.grey[300]
                     : theme.palette.grey[800],
@@ -35,7 +39,7 @@ exports.Card = (0, styles_1.styled)(material_1.Box, {
                 ? theme.palette.mode === 'light'
                     ? (0, styles_1.darken)(backgroundColor, 0.02)
                     : (0, styles_1.lighten)(backgroundColor, 0.02)
-                : theme.palette.background.paper,
+                : backgroundColor,
         },
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.enteringScreen,

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

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

package/cjs/components/ChainSelect/ChainSelect.js

@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_router_dom_1 = require("react-router-dom");
 const providers_1 = require("../../providers");
-const chains_1 = require("../../stores/chains");
+const stores_1 = require("../../stores");
 const utils_1 = require("../../utils");
 const ChainSelect_style_1 = require("./ChainSelect.style");
 const useChainSelect_1 = require("./useChainSelect");
@@ -22,9 +22,9 @@ const ChainSelect = ({ formType }) => {
             state: { formType },
         });
     };
-    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - chains_1.maxChainToOrder;
+    const chainsToHide = ((_a = chains === null || chains === void 0 ? void 0 : chains.length) !== null && _a !== void 0 ? _a : 0) - stores_1.maxChainToOrder;
     return ((0, jsx_runtime_1.jsxs)(ChainSelect_style_1.ChainContainer, { children: [isLoading
-                ? Array.from({ length: chains_1.maxChainToOrder + 1 }).map((_, index) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
+                ? 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)(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: {
                         width: 40,
                         height: 40,