@lifi/widget 2.0.0-beta.5 → 2.0.0-beta.6

package/AppDrawer.js

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { AppDefault } from './App';
 import { DrawerButton, DrawerButtonTypography } from './AppDrawer.style';
 import { AppProvider } from './AppProvider';
+import { HiddenUI } from './types';
 export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, ref) => {
     const openRef = useRef(open);
     const [drawerOpen, setDrawerOpen] = useState(Boolean(open));
@@ -33,7 +34,7 @@ export const AppDrawer = forwardRef(({ elementRef, open, integrator, config }, r
             height: '100%',
         },
     }), [config, integrator]);
-    return (_jsxs(AppProvider, { config: widgetConfig, children: [_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? _jsx(KeyboardArrowRightIcon, {}) : _jsx(KeyboardArrowLeftIcon, {}), _jsx(DrawerButtonText, { open: drawerOpen })] }), _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return (_jsxs(AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(HiddenUI.DrawerButton) ? (_jsxs(DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (_jsx(KeyboardArrowRightIcon, {})) : (_jsx(KeyboardArrowLeftIcon, {})), _jsx(DrawerButtonText, { open: drawerOpen })] })) : null, _jsx(Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/AppProvider.js

@@ -6,7 +6,7 @@ import { queryClient } from './config/queryClient';
 import { I18nProvider, SDKProvider, SwapFormProvider, ThemeProvider, URLSearchParamsBuilder, WalletProvider, WidgetProvider, useWidgetConfig, } from './providers';
 import { StoreProvider } from './stores';
 export const AppProvider = ({ children, config, }) => {
-    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 }) }) }) }) }) }) }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(StoreProvider, { config: config, 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 { buildSwapUrl } = useWidgetConfig();

package/cjs/AppDrawer.js

@@ -10,6 +10,7 @@ const react_i18next_1 = require("react-i18next");
 const App_1 = require("./App");
 const AppDrawer_style_1 = require("./AppDrawer.style");
 const AppProvider_1 = require("./AppProvider");
+const types_1 = require("./types");
 exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, config }, ref) => {
     const openRef = (0, react_1.useRef)(open);
     const [drawerOpen, setDrawerOpen] = (0, react_1.useState)(Boolean(open));
@@ -36,7 +37,7 @@ exports.AppDrawer = (0, react_1.forwardRef)(({ elementRef, open, integrator, con
             height: '100%',
         },
     }), [config, integrator]);
-    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [(0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? (0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {}) : (0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {}), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] }), (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
+    return ((0, jsx_runtime_1.jsxs)(AppProvider_1.AppProvider, { config: widgetConfig, children: [!widgetConfig.hiddenUI?.includes(types_1.HiddenUI.DrawerButton) ? ((0, jsx_runtime_1.jsxs)(AppDrawer_style_1.DrawerButton, { variant: "contained", onClick: toggleDrawer, open: drawerOpen, drawerProps: config?.containerStyle, children: [drawerOpen ? ((0, jsx_runtime_1.jsx)(KeyboardArrowRight_1.default, {})) : ((0, jsx_runtime_1.jsx)(KeyboardArrowLeft_1.default, {})), (0, jsx_runtime_1.jsx)(exports.DrawerButtonText, { open: drawerOpen })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Drawer, { ref: elementRef, anchor: "right", open: drawerOpen, onClose: closeDrawer, BackdropProps: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

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, { 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 }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(stores_1.StoreProvider, { config: config, 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/components/ChainSelect/useChainSelect.js

@@ -11,6 +11,7 @@ const useChainSelect = (formType) => {
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { chains, isLoading } = (0, hooks_1.useChains)();
     const [chainOrder, setChainOrder] = (0, stores_1.useChainOrder)();
+    const swapOnly = (0, hooks_1.useSwapOnly)();
     const getChains = () => {
         if (!chains) {
             return [];
@@ -23,6 +24,11 @@ const useChainSelect = (formType) => {
     const setCurrentChain = (chainId) => {
         onChange(chainId);
         onBlur();
+        if (swapOnly) {
+            setValue(providers_1.SwapFormKeyHelper.getChainKey('to'), chainId, {
+                shouldTouch: true,
+            });
+        }
         setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         setValue(providers_1.SwapFormKey.TokenSearchFilter, '');

package/cjs/components/Header/Header.js

@@ -16,7 +16,7 @@ const HeaderContainer = ({ children }) => {
 };
 exports.HeaderContainer = HeaderContainer;
 const Header = () => {
-    const { walletManagement } = (0, providers_1.useWidgetConfig)();
-    return ((0, jsx_runtime_1.jsxs)(exports.HeaderContainer, { children: [!walletManagement ? (0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {}) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
+    const { walletManagement, subvariant } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(exports.HeaderContainer, { children: [!walletManagement && subvariant !== 'split' ? (0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {}) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
 };
 exports.Header = Header;

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

@@ -42,4 +42,7 @@ exports.WalletButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
     [`.${Button_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
         fontSize: '24px',
     },
+    [`.${Button_1.buttonClasses.startIcon} > *:nth-of-type(1)`]: {
+        fontSize: '24px',
+    },
 }));

package/cjs/components/Header/NavigationHeader.js

@@ -13,10 +13,12 @@ const providers_1 = require("../../providers");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
+const NavigationTabs_1 = require("./NavigationTabs");
+const WalletHeader_1 = require("./WalletHeader");
 const useHeaderActionStore_1 = require("./useHeaderActionStore");
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { variant, subvariant, hiddenUI, walletManagement } = (0, providers_1.useWidgetConfig)();
     const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
     const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
@@ -26,6 +28,7 @@ const NavigationHeader = () => {
         : pathname;
     const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = utils_1.navigationRoutesValues.includes(path);
+    const splitSubvariant = subvariant === 'split' && !hasPath;
     const handleHeaderTitle = () => {
         switch (path) {
             case utils_1.navigationRoutes.selectWallet:
@@ -78,8 +81,8 @@ const NavigationHeader = () => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() }), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
-                                            marginRight: -1.25,
-                                        }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, { elevation: 0, children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: navigateBack, children: (0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}) })) : null, splitSubvariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { flex: 1, children: !hiddenUI?.includes(types_1.HiddenUI.WalletMenu) ? ((0, jsx_runtime_1.jsx)(WalletHeader_1.WalletMenuButton, {})) : null })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true, children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive && !hiddenUI?.includes(types_1.HiddenUI.History) ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.swapHistory`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory), children: (0, jsx_runtime_1.jsx)(ReceiptLong_1.default, {}) }) })) : null, (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t(`header.settings`), enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "medium", onClick: () => navigate(utils_1.navigationRoutes.settings), sx: {
+                                                    marginRight: -1.25,
+                                                }, children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] }), splitSubvariant ? (0, jsx_runtime_1.jsx)(NavigationTabs_1.NavigationTabs, {}) : null] }));
 };
 exports.NavigationHeader = NavigationHeader;

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

@@ -0,0 +1 @@
+export declare const NavigationTabs: () => JSX.Element;

package/cjs/components/Header/NavigationTabs.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTabs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const Header_style_1 = require("./Header.style");
+const NavigationTabs_style_1 = require("./NavigationTabs.style");
+const NavigationTabs = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [state, setState] = (0, stores_1.useSplitSubvariantStore)((state) => [
+        state.state,
+        state.setState,
+    ]);
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const handleChange = (_, value) => {
+        setValue(providers_1.SwapFormKey.FromAmount, '');
+        setValue(providers_1.SwapFormKey.FromToken, '');
+        setValue(providers_1.SwapFormKey.ToToken, '');
+        setState(value === 0 ? 'swap' : 'bridge');
+    };
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { py: 1 }, children: (0, jsx_runtime_1.jsxs)(NavigationTabs_style_1.NavbarTabs, { value: state === 'swap' ? 0 : 1, onChange: handleChange, "aria-label": "tabs", indicatorColor: "primary", children: [(0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.swap'), disableRipple: true }), (0, jsx_runtime_1.jsx)(NavigationTabs_style_1.NavbarTab, { label: t('header.bridge'), disableRipple: true })] }) }));
+};
+exports.NavigationTabs = NavigationTabs;

package/cjs/components/Header/NavigationTabs.style.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+export declare const NavbarTabs: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
+    allowScrollButtonsMobile?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    centered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
+    slots?: {
+        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
+        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    slotProps?: {
+        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+    } | undefined;
+    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
+    scrollButtons?: boolean | "auto" | undefined;
+    selectionFollowsFocus?: boolean | undefined;
+    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
+    textColor?: "inherit" | "primary" | "secondary" | undefined;
+    value?: any;
+    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
+    visibleScrollbar?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    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<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" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "sx" | "variant" | "value" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const NavbarTab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    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<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 | "label" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarTab = exports.NavbarTabs = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.NavbarTabs = (0, styles_1.styled)(material_1.Tabs)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : (0, styles_1.alpha)(theme.palette.common.black, 0.04),
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(0.5),
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    height: 56,
+    [`.${material_1.tabsClasses.flexContainer}`]: {
+        alignItems: 'center',
+    },
+    [`.${material_1.tabsClasses.scroller}`]: {
+        overflow: 'initial !important',
+    },
+    [`.${material_1.tabsClasses.indicator}`]: {
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        height: 48,
+        backgroundColor: theme.palette.mode === 'dark'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
+        borderRadius: theme.shape.borderRadiusSecondary,
+        boxShadow: `0px 2px 4px ${(0, styles_1.alpha)(theme.palette.common.black, 0.04)}`,
+    },
+}));
+exports.NavbarTab = (0, styles_1.styled)(material_1.Tab, {
+    shouldForwardProp: (prop) => prop !== 'isDarkMode',
+})(({ theme }) => ({
+    zIndex: 1,
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    textTransform: 'none',
+    height: 48,
+    minHeight: 48,
+    fontSize: '1rem',
+    fontWeight: 700,
+    color: theme.palette.mode === 'dark'
+        ? theme.palette.common.white
+        : theme.palette.common.black,
+    textDecoration: 'none',
+    [`&.${material_1.tabClasses.selected}`]: {
+        color: theme.palette.mode === 'dark'
+            ? theme.palette.common.white
+            : theme.palette.common.black,
+        backgroundColor: 'transparent',
+    },
+    [`.${material_1.tabClasses.iconWrapper}`]: {
+        margin: theme.spacing(0, 1, 0, 0),
+    },
+}));

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

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const WalletHeader: React.FC;
+export declare const WalletMenuButton: React.FC;

package/cjs/components/Header/WalletHeader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WalletHeader = void 0;
+exports.WalletMenuButton = exports.WalletHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentCopyRounded_1 = require("@mui/icons-material/ContentCopyRounded");
 const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
@@ -17,29 +17,35 @@ const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const WalletMenu_1 = require("./WalletMenu");
 const WalletHeader = () => {
-    const { account } = (0, providers_1.useWallet)();
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {}) }));
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsx)(exports.WalletMenuButton, {}) }));
 };
 exports.WalletHeader = WalletHeader;
+const WalletMenuButton = () => {
+    const { account } = (0, providers_1.useWallet)();
+    return account.isActive ? (0, jsx_runtime_1.jsx)(ConnectedButton, {}) : (0, jsx_runtime_1.jsx)(ConnectButton, {});
+};
+exports.WalletMenuButton = WalletMenuButton;
 const ConnectButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const config = (0, providers_1.useWidgetConfig)();
+    const { walletManagement, subvariant } = (0, providers_1.useWidgetConfig)();
     const { connect: connectWallet } = (0, providers_1.useWallet)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const connect = async () => {
-        if (config.walletManagement) {
+        if (walletManagement) {
             await connectWallet();
             return;
         }
         navigate(utils_1.navigationRoutes.selectWallet);
     };
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(Wallet_1.default, {}), onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
-            marginRight: -1.25,
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: subvariant !== 'split' ? (0, jsx_runtime_1.jsx)(Wallet_1.default, {}) : undefined, startIcon: subvariant === 'split' ? (0, jsx_runtime_1.jsx)(Wallet_1.default, {}) : undefined, onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined, sx: {
+            marginRight: subvariant === 'split' ? 0 : -1.25,
+            marginLeft: subvariant === 'split' ? -1.25 : 0,
         }, children: t(`button.connectWallet`) }));
 };
 const ConnectedButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
     const { account, disconnect } = (0, providers_1.useWallet)();
     const walletAddress = (0, utils_1.shortenWalletAddress)(account.address);
     const { chain } = (0, hooks_1.useChain)(account.chainId);
@@ -59,7 +65,8 @@ const ConnectedButton = () => {
         handleClose();
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_style_1.WalletButton, { endIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}), startIcon: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
-                    marginRight: -1.25,
+                    marginRight: subvariant === 'split' ? 0 : -1.25,
+                    marginLeft: subvariant === 'split' ? -1 : 0,
                 }, onClick: handleClick, children: walletAddress }), (0, jsx_runtime_1.jsxs)(WalletMenu_1.WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: handleCopyAddress, children: [(0, jsx_runtime_1.jsx)(ContentCopyRounded_1.default, {}), t(`button.copyAddress`)] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [(0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), t(`button.viewOnExplorer`)] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleDisconnect, fullWidth: true, startIcon: (0, jsx_runtime_1.jsx)(PowerSettingsNewRounded_1.default, {}), sx: {
                             marginTop: 1,
                         }, children: t(`button.disconnect`) })] })] }));

package/cjs/components/Header/useHeaderActionStore.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHeaderActionStore = void 0;
-/* eslint-disable no-underscore-dangle */
 const zustand_1 = require("zustand");
 exports.useHeaderActionStore = (0, zustand_1.create)((set, get) => ({
     setAction: (element) => {

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -16,6 +16,7 @@ const SelectTokenButton = ({ formType, compact }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const swapOnly = (0, hooks_1.useSwapOnly)();
     const tokenKey = providers_1.SwapFormKeyHelper.getTokenKey(formType);
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType), tokenKey],
@@ -32,8 +33,10 @@ const SelectTokenButton = ({ formType, compact }) => {
     const isSelected = !!(chain && token);
     const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
     const defaultPlaceholder = formType === 'to' && variant === 'refuel'
-        ? t(`header.selectChain`)
-        : t(`swap.selectChainAndToken`);
+        ? t('swap.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('swap.selectToken')
+            : t('swap.selectChainAndToken');
     const cardTitle = formType === 'from' && variant === 'nft'
         ? t(`header.payWith`)
         : t(`swap.${formType}`);

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.5";
+export declare const version = "2.0.0-beta.6";

package/cjs/config/version.js

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

package/cjs/hooks/index.d.ts

@@ -15,12 +15,13 @@ export * from './useNavigateBack';
 export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
+export * from './useSwapOnly';
 export * from './useSwapRoutes';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';
 export * from './useTokenBalances';
-export * from './useTokens';
 export * from './useTokenSearch';
+export * from './useTokens';
 export * from './useTools';
 export * from './useWidgetEvents';

package/cjs/hooks/index.js

@@ -31,12 +31,13 @@ __exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useProcessMessage"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
+__exportStar(require("./useSwapOnly"), exports);
 __exportStar(require("./useSwapRoutes"), exports);
 __exportStar(require("./useToken"), exports);
 __exportStar(require("./useTokenAddressBalance"), exports);
 __exportStar(require("./useTokenBalance"), exports);
 __exportStar(require("./useTokenBalances"), exports);
-__exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTokenSearch"), exports);
+__exportStar(require("./useTokens"), exports);
 __exportStar(require("./useTools"), exports);
 __exportStar(require("./useWidgetEvents"), exports);

package/cjs/hooks/useContentHeight.js

@@ -6,8 +6,8 @@ const utils_1 = require("../utils");
 const useDefaultElementId_1 = require("./useDefaultElementId");
 const useScrollableContainer_1 = require("./useScrollableContainer");
 const getContentHeight = (elementId) => {
-    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
     const containerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.ScrollableContainer, elementId));
+    const headerElement = document.getElementById((0, utils_1.createElementId)(utils_1.ElementId.Header, elementId));
     if (!containerElement || !headerElement) {
         console.warn(`Can't find ${utils_1.ElementId.ScrollableContainer} or ${utils_1.ElementId.Header} id.`);
         return 0;
@@ -18,11 +18,9 @@ const getContentHeight = (elementId) => {
 };
 const useContentHeight = () => {
     const elementId = (0, useDefaultElementId_1.useDefaultElementId)();
-    const [contentHeight, setContentHeight] = (0, react_1.useState)(() => getContentHeight(elementId));
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
     (0, react_1.useLayoutEffect)(() => {
-        if (!contentHeight) {
-            setContentHeight(getContentHeight(elementId));
-        }
+        setContentHeight(getContentHeight(elementId));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return contentHeight;

package/cjs/hooks/useInitializer.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInitializer = void 0;
-/* eslint-disable no-underscore-dangle */
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const version_1 = require("../config/version");

package/cjs/hooks/useSwapOnly.d.ts

@@ -0,0 +1 @@
+export declare const useSwapOnly: () => boolean;

package/cjs/hooks/useSwapOnly.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSwapOnly = void 0;
+const stores_1 = require("../stores");
+const useSwapOnly = () => {
+    const state = (0, stores_1.useSplitSubvariantStore)((state) => state.state);
+    return state === 'swap';
+};
+exports.useSwapOnly = useSwapOnly;

package/cjs/hooks/useSwapRoutes.js

@@ -10,12 +10,14 @@ const uuid_1 = require("uuid");
 const _1 = require(".");
 const providers_1 = require("../providers");
 const stores_1 = require("../stores");
+const useSwapOnly_1 = require("./useSwapOnly");
 const refetchTime = 60000;
 const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
     const lifi = (0, providers_1.useLiFi)();
     const { variant, sdkConfig, insurance, contractTool } = (0, providers_1.useWidgetConfig)();
     const { account, provider } = (0, providers_1.useWallet)();
     const queryClient = (0, react_query_1.useQueryClient)();
+    const swapOnly = (0, useSwapOnly_1.useSwapOnly)();
     const { slippage, enabledBridges, enabledAutoRefuel, enabledExchanges, routePriority, } = (0, stores_1.useSettings)([
         'slippage',
         'routePriority',
@@ -66,7 +68,7 @@ const useSwapRoutes = ({ onSettled, insurableRoute, } = {}) => {
         toContractCallData,
         toContractGasLimit,
         slippage,
-        enabledBridges,
+        swapOnly ? [] : enabledBridges,
         enabledExchanges,
         routePriority,
         variant,

package/cjs/i18n/en.json

@@ -176,9 +176,9 @@
     "rateChange": "Rate change",
     "receiving": "Receiving",
     "refuelStepDetails": "Get gas via {{tool}}",
-    "selectChain": "Chain",
+    "selectChain": "Select chain",
     "selectChainAndToken": "Select chain and token",
-    "selectToken": "Token",
+    "selectToken": "Select token",
     "sendToAddress": "Send to {{address}}",
     "sendToWallet": "Send to a different wallet",
     "sentToAddress": "Sent to {{address}}",