@lifi/widget 1.17.2 → 1.18.0

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -14,7 +14,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const wallet_management_1 = require("@lifi/wallet-management");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
-const chains_1 = require("../../stores/chains");
+const stores_1 = require("../../stores");
 const SwapFormProvider_1 = require("../SwapFormProvider");
 const WidgetProvider_1 = require("../WidgetProvider");
 const stub = () => {
@@ -112,7 +112,7 @@ const WalletProvider = ({ children }) => {
         const { isDirty: isToChainDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToChain, methods.formState);
         const { isDirty: isFromTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.FromToken, methods.formState);
         const { isDirty: isToTokenDirty } = methods.getFieldState(SwapFormProvider_1.SwapFormKey.ToToken, methods.formState);
-        const { chainOrder, setChain } = chains_1.useChainOrderStore.getState();
+        const { chainOrder, setChain } = stores_1.useChainOrderStore.getState();
         // Users can switch chains in the wallet.
         // If we don't have a chain in the ordered chain list we should add it.
         setChain(account.chainId);

package/cjs/stores/index.d.ts

@@ -1,2 +1,3 @@
-export * from './route';
+export * from './chains';
+export * from './routes';
 export * from './settings';

package/cjs/stores/index.js

@@ -14,5 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./route"), exports);
+__exportStar(require("./chains"), exports);
+__exportStar(require("./routes"), exports);
 __exportStar(require("./settings"), exports);

package/cjs/stores/{route → routes}/index.d.ts

@@ -1,6 +1,7 @@
 export * from './types';
 export * from './useExecutingRoutesIds';
-export * from './useRouteStore';
+export * from './useRouteExecutionStore';
+export * from './useSelectedRouteStore';
 export * from './useSetExecutableRoute';
 export * from './useSwapHistory';
 export * from './utils';

package/cjs/stores/{route → routes}/index.js

@@ -16,7 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./types"), exports);
 __exportStar(require("./useExecutingRoutesIds"), exports);
-__exportStar(require("./useRouteStore"), exports);
+__exportStar(require("./useRouteExecutionStore"), exports);
+__exportStar(require("./useSelectedRouteStore"), exports);
 __exportStar(require("./useSetExecutableRoute"), exports);
 __exportStar(require("./useSwapHistory"), exports);
 __exportStar(require("./utils"), exports);

package/cjs/stores/{route → routes}/types.d.ts

@@ -12,3 +12,7 @@ export interface RouteExecution {
     route: Route;
     status: RouteExecutionStatus;
 }
+export interface SelectedRouteStore {
+    selectedRoute?: Route;
+    setSelectedRoute: (route?: Route) => void;
+}

package/cjs/stores/routes/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/stores/{route → routes}/useExecutingRoutesIds.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExecutingRoutesIds = void 0;
 const shallow_1 = require("zustand/shallow");
-const useRouteStore_1 = require("./useRouteStore");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useExecutingRoutesIds = (address) => {
-    return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
         .filter((item) => item.route.fromAddress === address &&
         (item.status === 'loading' || item.status === 'error'))
         .sort((a, b) => {

package/cjs/stores/{route/useRouteStore.d.ts → routes/useRouteExecutionStore.d.ts}

@@ -1,5 +1,5 @@
 import type { RouteExecutionStore } from './types';
-export declare const useRouteStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
+export declare const useRouteExecutionStore: import("zustand").UseBoundStore<Omit<Omit<import("zustand").StoreApi<RouteExecutionStore>, "persist"> & {
     persist: {
         setOptions: (options: Partial<import("zustand/middleware").PersistOptions<RouteExecutionStore, {
             routes: Partial<Record<string, import("./types").RouteExecution>>;

package/cjs/stores/{route/useRouteStore.js → routes/useRouteExecutionStore.js}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRouteStore = void 0;
+exports.useRouteExecutionStore = void 0;
 const zustand_1 = require("zustand");
 const middleware_1 = require("zustand/middleware");
 const immer_1 = require("zustand/middleware/immer");
 const utils_1 = require("./utils");
-exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
+exports.useRouteExecutionStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     routes: {},
     setExecutableRoute: (route) => set((state) => {
         if (!state.routes[route.id]) {

package/cjs/stores/routes/useSelectedRouteStore.d.ts

@@ -0,0 +1,4 @@
+import type { SelectedRouteStore } from './types';
+export declare const useSelectedRouteStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SelectedRouteStore>, "setState"> & {
+    setState(nextStateOrUpdater: SelectedRouteStore | Partial<SelectedRouteStore> | ((state: import("immer/dist/internal").WritableDraft<SelectedRouteStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;

package/cjs/stores/routes/useSelectedRouteStore.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedRouteStore = void 0;
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+exports.useSelectedRouteStore = (0, zustand_1.default)()((0, immer_1.immer)((set) => ({
+    setSelectedRoute: (route) => {
+        set((state) => {
+            state.selectedRoute = route;
+        });
+    },
+})));

package/cjs/stores/{route → routes}/useSetExecutableRoute.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetExecutableRoute = void 0;
-const useRouteStore_1 = require("./useRouteStore");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useSetExecutableRoute = () => {
-    return (0, useRouteStore_1.useRouteStore)((state) => state.setExecutableRoute);
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => state.setExecutableRoute);
 };
 exports.useSetExecutableRoute = useSetExecutableRoute;

package/cjs/stores/{route → routes}/useSwapHistory.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSwapHistory = void 0;
 const shallow_1 = require("zustand/shallow");
-const useRouteStore_1 = require("./useRouteStore");
+const useRouteExecutionStore_1 = require("./useRouteExecutionStore");
 const useSwapHistory = (address) => {
-    return (0, useRouteStore_1.useRouteStore)((state) => Object.values(state.routes)
+    return (0, useRouteExecutionStore_1.useRouteExecutionStore)((state) => Object.values(state.routes)
         .filter((item) => (item === null || item === void 0 ? void 0 : item.route.fromAddress) === address && (item === null || item === void 0 ? void 0 : item.status) === 'success')
         .sort((a, b) => {
         var _a, _b, _c, _d;

package/cjs/stores/settings/useSettingsStore.js

@@ -19,7 +19,7 @@ const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
 exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     advancedPreferences: false,
-    showDestinationWallet: false,
+    showDestinationWallet: true,
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',

package/cjs/types/widget.d.ts

@@ -3,6 +3,7 @@ import type { PaletteMode, PaletteOptions, Shape } from '@mui/material';
 import type { TypographyOptions } from '@mui/material/styles/createTypography';
 import type { Signer } from 'ethers';
 import type { CSSProperties } from 'react';
+export declare type WidgetVariant = 'default' | 'expandable' | 'drawer';
 export declare type Appearance = PaletteMode | 'auto';
 export declare type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'primary' | 'secondary'>;
@@ -34,6 +35,7 @@ export interface WidgetConfig {
     /** @deprecated Use tokens.featured instead */
     featuredTokens?: Token[];
     integrator?: string;
+    variant?: WidgetVariant;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: ConfigUpdate;
     bridges?: {

package/cjs/utils/colors.d.ts

@@ -1,3 +1,3 @@
 import type { Theme } from '@mui/material';
 export declare const getContrastAlphaColor: (theme: Theme, alpha: string | number) => string;
-export declare const getContrastTextColor: (theme: Theme, background?: string) => "#000" | "#fff";
+export declare const getContrastTextColor: (theme: Theme, background?: string) => "#fff" | "#000";

package/cjs/utils/navigationRoutes.js

@@ -17,26 +17,26 @@ exports.navigationRoutes = {
 };
 exports.navigationRoutesValues = Object.values(exports.navigationRoutes);
 exports.stickyHeaderRoutes = [
-    exports.navigationRoutes.selectWallet,
+    exports.navigationRoutes.activeSwaps,
     exports.navigationRoutes.fromChain,
-    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.selectWallet,
     exports.navigationRoutes.settings,
-    exports.navigationRoutes.swapRoutes,
+    exports.navigationRoutes.swapDetails,
     exports.navigationRoutes.swapExecution,
     exports.navigationRoutes.swapHistory,
-    exports.navigationRoutes.activeSwaps,
-    exports.navigationRoutes.swapDetails,
+    exports.navigationRoutes.swapRoutes,
+    exports.navigationRoutes.toChain,
 ];
 exports.backButtonRoutes = [
+    exports.navigationRoutes.activeSwaps,
+    exports.navigationRoutes.fromChain,
+    exports.navigationRoutes.fromToken,
     exports.navigationRoutes.selectWallet,
     exports.navigationRoutes.settings,
+    exports.navigationRoutes.swapDetails,
+    exports.navigationRoutes.swapExecution,
     exports.navigationRoutes.swapHistory,
-    exports.navigationRoutes.activeSwaps,
-    exports.navigationRoutes.fromToken,
-    exports.navigationRoutes.toToken,
-    exports.navigationRoutes.fromChain,
-    exports.navigationRoutes.toChain,
     exports.navigationRoutes.swapRoutes,
-    exports.navigationRoutes.swapExecution,
-    exports.navigationRoutes.swapDetails,
+    exports.navigationRoutes.toChain,
+    exports.navigationRoutes.toToken,
 ];

package/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/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/components/AppContainer.js

@@ -1,54 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { useLayoutEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../providers';
 import { ElementId } from '../utils';
-const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
-    // height: '100%',
+export const maxHeight = 680;
+const ExpandedContainer = styled(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' : maxHeight,
 }));
-const RelativeContainer = styled(Box)(({ theme }) => ({
+const RelativeContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ theme, variant }) => ({
     position: 'relative',
     width: '100%',
     minWidth: 375,
     maxWidth: 392,
+    maxHeight: variant === 'drawer' ? 'none' : maxHeight,
     background: theme.palette.background.default,
     overflow: 'auto',
     flex: 1,
     boxSizing: 'border-box',
     zIndex: 0,
 }));
-const ScrollableContainer = styled(Box)({
-    // position: 'fixed',
+const CssBaselineContainer = styled(ScopedCssBaseline, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})(({ variant }) => ({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflowX: 'clip',
+    margin: 0,
+    width: '100%',
+    maxHeight: variant === 'drawer' ? 'none' : maxHeight,
     overflowY: 'auto',
     height: '100%',
-    flex: 1,
-    display: 'flex',
-});
+}));
 export const FlexContainer = styled(Container)({
     display: 'flex',
-    flexBasis: 'auto',
     flexDirection: 'column',
-    flexShrink: 0,
-    flexGrow: 1,
+    flex: 1,
 });
 export const AppContainer = ({ children }) => {
-    const ref = useRef(null);
-    const { containerStyle } = useWidgetConfig();
-    return (_jsxs(RelativeContainer, Object.assign({ sx: containerStyle }, { children: [_jsx(ScrollableContainer, Object.assign({ id: ElementId.ScrollableContainer, ref: ref }, { children: _jsx(CssBaselineContainer, Object.assign({ enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })), _jsx(ScrollToLocation, { elementRef: ref })] })));
+    // const ref = useRef<HTMLDivElement>(null);
+    const { containerStyle, variant } = useWidgetConfig();
+    return (_jsx(RelativeContainer, Object.assign({ sx: containerStyle, variant: variant }, { children: _jsx(CssBaselineContainer, Object.assign({ id: ElementId.ScrollableContainer, variant: variant, enableColorScheme: true }, { children: _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })));
 };
-export const ScrollToLocation = ({ elementRef }) => {
-    const { pathname } = useLocation();
-    useLayoutEffect(() => {
-        var _a;
-        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
-    }, [elementRef, pathname]);
-    return null;
+export const AppExpandedContainer = ({ children, }) => {
+    return _jsx(ExpandedContainer, { children: children });
 };

package/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/components/Card/Card.js

@@ -1,21 +1,25 @@
 import { Box } from '@mui/material';
 import { alpha, darken, lighten, styled } from '@mui/material/styles';
-const getBackgroundColor = (theme, variant) => variant === 'selected'
-    ? theme.palette.mode === 'light'
-        ? alpha(theme.palette.primary.main, 0.04)
-        : alpha(theme.palette.primary.main, 0.42)
+const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
+    ? selectionColor === 'primary'
+        ? theme.palette.mode === 'light'
+            ? alpha(theme.palette.primary.main, 0.04)
+            : alpha(theme.palette.primary.main, 0.42)
+        : alpha(theme.palette.secondary.main, 0.08)
     : theme.palette.background.paper;
 export const Card = styled(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
+                    : alpha(theme.palette.secondary.main, 0.48)
                 : theme.palette.mode === 'light'
                     ? theme.palette.grey[300]
                     : theme.palette.grey[800],
@@ -32,7 +36,7 @@ export const Card = styled(Box, {
                 ? theme.palette.mode === 'light'
                     ? darken(backgroundColor, 0.02)
                     : lighten(backgroundColor, 0.02)
-                : theme.palette.background.paper,
+                : backgroundColor,
         },
         transition: theme.transitions.create(['background-color'], {
             duration: theme.transitions.duration.enteringScreen,

package/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/components/ChainSelect/ChainSelect.js

@@ -3,7 +3,7 @@ import { Avatar, Box, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { SwapFormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores/chains';
+import { maxChainToOrder } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { ChainCard, ChainContainer } from './ChainSelect.style';
 import { useChainSelect } from './useChainSelect';

package/components/ChainSelect/ChainSelect.style.d.ts

@@ -8,6 +8,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     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/components/ChainSelect/ChainSelect.style.js

@@ -4,12 +4,12 @@ import { Card } from '../../components/Card';
 export const ChainCard = styled(Card)({
     display: 'grid',
     placeItems: 'center',
-    minWidth: 56,
+    minWidth: 52,
     height: 56,
 });
 export const ChainContainer = styled(Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/components/ChainSelect/useChainSelect.js

@@ -1,7 +1,7 @@
 import { useFormContext } from 'react-hook-form';
 import { useChains } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
-import { useChainOrder } from '../../stores/chains';
+import { useChainOrder } from '../../stores';
 export const useChainSelect = (formType) => {
     const { setValue } = useFormContext();
     const { chains, isLoading } = useChains();

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -14,12 +14,14 @@ import { WarningAmber as WarningIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useGasSufficiency } from '../../hooks';
+import { useSelectedRouteStore } from '../../stores';
 import { CardTitle } from '../Card';
 import { MessageCard } from './GasSufficiencyMessage.style';
 export const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = useTranslation();
-    const { insufficientFunds, insufficientGas } = useGasSufficiency(route);
+    const selectedRoute = useSelectedRouteStore((state) => state.selectedRoute);
+    const { insufficientFunds, insufficientGas } = useGasSufficiency(route !== null && route !== void 0 ? route : selectedRoute);
     if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
@@ -31,7 +33,9 @@ export const GasSufficiencyMessage = (_a) => {
                             : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
-                            return (_jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
+                            return (_jsx(Typography
+                            // eslint-disable-next-line react/no-array-index-key
+                            , Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {
                                     amount: (_a = item.insufficientAmount) === null || _a === void 0 ? void 0 : _a.toString(),
                                     tokenSymbol: item.token.symbol,
                                     chainName: (_b = item.chain) === null || _b === void 0 ? void 0 : _b.name,

package/components/Header/Header.d.ts

@@ -1,2 +1,3 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+export declare const HeaderContainer: FC<PropsWithChildren<{}>>;
 export declare const Header: FC;

package/components/Header/Header.js

@@ -5,7 +5,7 @@ import { ElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
-const HeaderContainer = ({ children }) => {
+export const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
     return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };

package/components/Header/Header.style.js

@@ -1,7 +1,7 @@
 import { AppBar, Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: 'transparent',
     color: theme.palette.text.primary,
     flexDirection: 'row',
     alignItems: 'center',
@@ -16,7 +16,8 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
 export const Container = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'sticky',
 })(({ theme, sticky }) => ({
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: alpha(theme.palette.background.default, 0.84),
+    backdropFilter: 'blur(12px)',
     position: sticky ? 'sticky' : 'relative',
     top: 0,
     zIndex: 1200,

package/components/Header/NavigationHeader.js

@@ -14,7 +14,10 @@ export const NavigationHeader = () => {
     const { account } = useWallet();
     const { element } = useHeaderActionStore();
     const { pathname } = useLocation();
-    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
+    const cleanedPathname = pathname.endsWith('/')
+        ? pathname.slice(0, -1)
+        : pathname;
+    const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1);
     const hasPath = navigationRoutesValues.includes(path);
     const handleHeaderTitle = () => {
         switch (path) {

package/components/Header/WalletHeader.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AccountBalanceWalletOutlined as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
+import { Logout as LogoutIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -39,5 +39,5 @@ const ConnectButton = () => {
         }
         navigate(navigationRoutes.selectWallet);
     });
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(AccountBalanceWalletIcon, {}) })));
+    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(navigationRoutes.selectWallet) ? connect : undefined }, { children: _jsx(WalletOutlinedIcon, {}) })));
 };

package/components/PoweredBy/PoweredBy.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip, Typography } from '@mui/material';
+import { useLocation } from 'react-router-dom';
 import { version } from '../../config/version';
+import { navigationRoutes } from '../../utils';
 import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 export const PoweredBy = () => {
+    const { pathname } = useLocation();
+    if (pathname.includes(navigationRoutes.fromToken) ||
+        pathname.includes(navigationRoutes.toToken)) {
+        return null;
+    }
     return (_jsx(Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',