@lifi/widget 1.10.2 → 1.11.0

package/App.js

@@ -1,27 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppProvider } from './AppProvider';
-import { AppContainer } from './components/AppContainer';
+import { AppContainer, 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 { MainPage } from './pages/MainPage';
 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 { useWallet } from './providers/WalletProvider';
-import { routes } from './utils/routes';
+import { navigationRoutes } from './utils';
 export const App = ({ config }) => {
     return (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) })));
 };
 export const AppDefault = () => {
-    const { attemptEagerConnect } = useWallet();
-    useEffect(() => {
-        attemptEagerConnect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsxs(Routes, { children: [_jsx(Route, { path: routes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: routes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}/${routes.selectWallet}`, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: routes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: routes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: routes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: `${routes.swapRoutes}/${routes.swap}`, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: routes.swap, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }), _jsx(Initializer, {})] }));
+    return (_jsxs(AppContainer, { children: [_jsx(Header, {}), _jsx(FlexContainer, Object.assign({ disableGutters: true }, { children: _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsx(MainPage, {}) }), _jsx(Route, { path: navigationRoutes.selectWallet, element: _jsx(SelectWalletPage, {}) }), _jsx(Route, { path: navigationRoutes.settings, element: _jsx(SettingsPage, {}) }), _jsx(Route, { path: navigationRoutes.swapHistory, element: _jsx(SwapHistoryPage, {}) }), _jsx(Route, { path: navigationRoutes.swapDetails, element: _jsx(SwapDetailsPage, {}) }), _jsx(Route, { path: navigationRoutes.fromToken, element: _jsx(SelectTokenPage, { formType: "from" }) }), _jsx(Route, { path: navigationRoutes.toToken, element: _jsx(SelectTokenPage, { formType: "to" }) }), _jsx(Route, { path: navigationRoutes.swapRoutes, element: _jsx(SwapRoutesPage, {}) }), _jsx(Route, { path: navigationRoutes.swap, element: _jsx(SwapPage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }) })), _jsx(PoweredBy, {}), _jsx(Initializer, {})] }));
 };

package/AppDrawer.js

@@ -26,7 +26,7 @@ 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, disableElevation: true }, { 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: {
+    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: {
                     sx: {
                         backgroundColor: 'rgb(0 0 0 / 48%)',
                         backdropFilter: 'blur(3px)',

package/AppDrawer.style.d.ts

@@ -9,7 +9,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;

package/AppDrawer.style.js

@@ -60,7 +60,6 @@ export const DrawerButtonTypography = styled(Typography)(({ theme }) => ({
     cursor: 'pointer',
     display: 'flex',
     flexDirection: 'row',
-    fontSize: '18px',
     padding: theme.spacing(1),
     position: 'relative',
     textTransform: 'none',

package/AppProvider.d.ts

@@ -4,3 +4,4 @@ export interface AppProps {
     config?: WidgetConfig;
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
+export declare const AppRouter: React.FC<PropsWithChildren<{}>>;

package/AppProvider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable camelcase */
 /* eslint-disable react/jsx-pascal-case */
+import { QueryClientProvider, } from '@tanstack/react-query';
 import { Fragment } from 'react';
-import { QueryClientProvider } from 'react-query';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
 import { useTelemetry } from './hooks';
@@ -13,7 +13,10 @@ import { WidgetProvider } from './providers/WidgetProvider';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
     useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
+    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) }) })));
+};
+export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
-    return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(Router, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: children }) }) }) })) }) })));
+    return _jsx(Router, { children: children });
 };

package/components/AppContainer.d.ts

@@ -1,4 +1,14 @@
 import { PropsWithChildren, RefObject } from 'react';
+export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material").Breakpoint | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: 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>;

package/components/AppContainer.js

@@ -4,8 +4,7 @@ import { styled } from '@mui/material/styles';
 import { useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../providers/WidgetProvider';
-import { ElementId } from '../utils/elements';
-import { PoweredBy } from './PoweredBy';
+import { ElementId } from '../utils';
 const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',
     display: 'flex',
@@ -13,9 +12,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline)(({ theme }) => ({
     flexDirection: 'column',
     overflowX: 'clip',
     marginRight: 0,
-    [theme.breakpoints.up('xs')]: {
-        maxWidth: 392,
-    },
+    width: '100%',
 }));
 const RelativeContainer = styled(Box)(({ theme }) => ({
     position: 'relative',
@@ -35,7 +32,7 @@ const ScrollableContainer = styled(Box)({
     flex: 1,
     display: 'flex',
 });
-const FlexContainer = styled(Container)({
+export const FlexContainer = styled(Container)({
     display: 'flex',
     flexBasis: 'auto',
     flexDirection: 'column',
@@ -45,7 +42,7 @@ const FlexContainer = styled(Container)({
 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: _jsxs(FlexContainer, Object.assign({ disableGutters: true }, { children: [children, _jsx(PoweredBy, {})] })) })) })), _jsx(ScrollToLocation, { elementRef: ref })] })));
+    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 })] })));
 };
 export const ScrollToLocation = ({ elementRef }) => {
     const { pathname } = useLocation();

package/components/Card/Card.d.ts

@@ -1,8 +1,14 @@
-/// <reference types="react" />
-export declare const Card: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes"> & {
-    classes?: Partial<import("@mui/material").CardClasses> | undefined;
-    raised?: boolean | undefined;
+import { MouseEventHandler } from 'react';
+export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | 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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "ref" | "key" | "variant" | "square" | "elevation" | "raised"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, 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" | undefined;
+    dense?: boolean | undefined;
+    indented?: boolean | undefined;
+    onClick?: MouseEventHandler<HTMLDivElement> | undefined;
+}, {}, {}>;

package/components/Card/Card.js

@@ -1,8 +1,32 @@
-import { Card as MuiCard } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const Card = styled(MuiCard)(({ theme }) => ({
-    borderRadius: 0,
+import { Box } from '@mui/material';
+import { darken, lighten, styled } from '@mui/material/styles';
+export const Card = styled(Box, {
+    shouldForwardProp: (prop) => !['dense', 'variant', 'indented'].includes(prop),
+})(({ theme, variant, dense, indented, onClick }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid`,
+    borderColor: variant === 'error'
+        ? theme.palette.error.main
+        : theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    borderRadius: dense
+        ? theme.shape.borderRadiusSecondary
+        : theme.shape.borderRadius,
+    overflow: 'hidden',
+    position: 'relative',
+    padding: indented ? theme.spacing(2) : 0,
+    boxSizing: 'border-box',
     '&:hover': {
-        cursor: 'pointer',
+        cursor: onClick ? 'pointer' : 'default',
+        backgroundColor: onClick
+            ? theme.palette.mode === 'light'
+                ? darken(theme.palette.background.paper, 0.02)
+                : lighten(theme.palette.background.paper, 0.02)
+            : theme.palette.background.paper,
     },
+    transition: theme.transitions.create(['background-color'], {
+        duration: theme.transitions.duration.enteringScreen,
+        easing: theme.transitions.easing.easeOut,
+    }),
 }));

package/components/Card/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Card';
-export * from './CardContainer';
 export * from './CardHeader';
 export * from './CardTitle';

package/components/Card/index.js

@@ -1,4 +1,3 @@
 export * from './Card';
-export * from './CardContainer';
 export * from './CardHeader';
 export * from './CardTitle';

package/components/Dialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export declare const Dialog: React.FC<PropsWithChildren<DialogProps>>;

package/components/Dialog.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as MuiDialog } from '@mui/material';
+import { useScrollableContainer } from '../hooks';
+export const Dialog = ({ children, open, onClose, }) => {
+    const containerElement = useScrollableContainer();
+    return (_jsx(MuiDialog, Object.assign({ open: open, onClose: onClose, container: containerElement, sx: {
+            position: 'absolute',
+            overflow: 'hidden',
+        }, PaperProps: {
+            sx: (theme) => ({
+                position: 'absolute',
+                backgroundImage: 'none',
+                borderTopLeftRadius: theme.shape.borderRadius,
+                borderTopRightRadius: theme.shape.borderRadius,
+            }),
+        }, BackdropProps: {
+            sx: {
+                position: 'absolute',
+                backgroundColor: 'rgb(0 0 0 / 32%)',
+                backdropFilter: 'blur(3px)',
+            },
+        } }, { children: children })));
+};

package/components/GasSufficiencyMessage/GasSufficiencyMessage.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Route } from '@lifi/sdk';
+import { BoxProps } from '@mui/material';
+export declare const GasSufficiencyMessage: React.FC<{
+    route?: Route;
+} & BoxProps>;

package/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { WarningAmber as WarningIcon } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useGasSufficiency } from '../../hooks';
+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);
+    if (!insufficientFunds || !insufficientGas.length) {
+        return null;
+    }
+    let title;
+    let message;
+    if (insufficientFunds) {
+        message = t(`swap.warning.message.insufficientFunds`);
+    }
+    else if (insufficientGas.length) {
+        title = t(`swap.warning.title.insufficientGas`);
+        message = t(`swap.warning.message.insufficientGas`);
+    }
+    return (_jsxs(MessageCard, Object.assign({}, props, { children: [_jsx(WarningIcon, { sx: {
+                    marginTop: 2,
+                    marginLeft: 2,
+                } }), _jsxs(Box, { children: [title ? _jsx(CardTitle, { children: title }) : null, _jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: !insufficientFunds && insufficientGas.length ? 0 : 2, pt: title ? 1 : 2 }, { children: message })), !insufficientFunds && 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`, {
+                                    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,
+                                }) }), index));
+                        })
+                        : null] })] })));
+};

package/components/{InsufficientGasOrFundsMessage/InsufficientGasOrFundsMessage.style.js → GasSufficiencyMessage/GasSufficiencyMessage.style.js}

@@ -7,4 +7,5 @@ export const MessageCard = styled(Box)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     position: 'relative',
     display: 'flex',
+    whiteSpace: 'pre-line',
 }));

package/components/GasSufficiencyMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './GasSufficiencyMessage';

package/components/GasSufficiencyMessage/index.js

@@ -0,0 +1 @@
+export * from './GasSufficiencyMessage';

package/components/Header/Header.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { ElementId } from '../../utils/elements';
-import { routes } from '../../utils/routes';
+import { ElementId, navigationRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
 const stickyHeaderRoutes = [
-    routes.selectWallet,
-    routes.settings,
-    routes.swapRoutes,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.swapRoutes,
 ];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
-    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
+    return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.includes(pathname) }, { children: children })));
 };
 export const Header = () => {
     const { walletManagement } = useWidgetConfig();

package/components/Header/Header.style.js

@@ -6,10 +6,11 @@ export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
     flexDirection: 'row',
     alignItems: 'center',
     position: 'relative',
-    minHeight: 48,
+    minHeight: 40,
     padding: theme.spacing(0, 3, 0, 3),
     ':first-of-type': {
         paddingTop: theme.spacing(1.5),
+        paddingBottom: theme.spacing(0.5),
     },
 }));
 export const Container = styled(Box, {

package/components/Header/NavigationHeader.js

@@ -1,48 +1,52 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowBack as ArrowBackIcon, Settings as SettingsIcon, } from '@mui/icons-material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowBack as ArrowBackIcon, History as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { routes, routesValues } from '../../utils/routes';
-import { SwapRoutesUpdateProgress } from '../SwapRoutes/SwapRoutesUpdateProgress';
+import { useWallet } from '../../providers/WalletProvider';
+import { navigationRoutes } from '../../utils';
 import { HeaderAppBar } from './Header.style';
+import { useHeaderActionStore } from './useHeaderActionStore';
 const backButtonRoutes = [
-    routes.selectWallet,
-    routes.settings,
-    routes.fromToken,
-    routes.toToken,
-    routes.swapRoutes,
-    routes.swap,
+    navigationRoutes.selectWallet,
+    navigationRoutes.settings,
+    navigationRoutes.swapHistory,
+    navigationRoutes.fromToken,
+    navigationRoutes.toToken,
+    navigationRoutes.swapRoutes,
+    navigationRoutes.swap,
+    navigationRoutes.swapDetails,
 ];
 export const NavigationHeader = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
-    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
-    const hasPath = routesValues.includes(path);
     const navigate = useNavigate();
-    const handleSettings = () => {
-        navigate(routes.settings);
-    };
+    const { account } = useWallet();
+    const { path: actionPath, element } = useHeaderActionStore();
     const handleBack = () => {
         navigate(-1);
     };
     const handleHeaderTitle = () => {
-        switch (path) {
-            case routes.selectWallet:
+        switch (pathname) {
+            case navigationRoutes.selectWallet:
                 return t(`header.selectWallet`);
-            case routes.settings:
+            case navigationRoutes.settings:
                 return t(`header.settings`);
-            case routes.fromToken:
+            case navigationRoutes.swapHistory:
+                return t(`header.swapHistory`);
+            case navigationRoutes.fromToken:
                 return t(`header.from`);
-            case routes.toToken:
+            case navigationRoutes.toToken:
                 return t(`header.to`);
-            case routes.swapRoutes:
+            case navigationRoutes.swapRoutes:
                 return t(`header.routes`);
-            case routes.swap:
+            case navigationRoutes.swap:
                 return t(`header.swap`);
+            case navigationRoutes.swapDetails:
+                return t(`header.swapDetails`);
             default:
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 24 : 32, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: routes.swapRoutes, element: _jsx(SwapRoutesUpdateProgress, { size: "medium", edge: "end", sx: { marginRight: -1 } }) }), _jsx(Route, { path: routes.home, element: _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: handleSettings }, { children: _jsx(SettingsIcon, {}) })) }), _jsx(Route, { path: "*", element: _jsx(Box, { width: 28, height: 48 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(pathname) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: pathname === '/' ? 24 : 18, align: pathname === '/' ? 'left' : 'center', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: actionPath !== null && actionPath !== void 0 ? actionPath : '*', element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

package/components/Header/WalletHeader.js

@@ -8,13 +8,13 @@ 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 { AccountBalanceWallet as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
+import { AccountBalanceWalletOutlined as AccountBalanceWalletIcon, Logout as LogoutIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
-import { routes } from '../../utils/routes';
+import { navigationRoutes } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {
     const { t } = useTranslation();
@@ -38,7 +38,7 @@ const ConnectButton = () => {
             yield walletConnect();
             return;
         }
-        navigate(routes.selectWallet);
+        navigate(navigationRoutes.selectWallet);
     });
-    return (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(routes.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(AccountBalanceWalletIcon, {}) })));
 };

package/components/Header/index.d.ts

@@ -1 +1,2 @@
 export * from './Header';
+export * from './useHeaderActionStore';

package/components/Header/index.js

@@ -1 +1,2 @@
 export * from './Header';
+export * from './useHeaderActionStore';

package/components/Header/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface HeaderActionState {
+    path?: string | null;
+    element?: React.ReactNode | null;
+}
+export interface HeaderActionStore extends HeaderActionState {
+    setAction(path?: string, element?: React.ReactNode | null): () => void;
+    removeAction(): void;
+}

package/components/Header/types.js

@@ -0,0 +1 @@
+export {};

package/components/Header/useHeaderActionStore.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HeaderActionStore } from './types';
+export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
+    setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
+}>;
+export declare const useSetHeaderAction: () => (path?: string | undefined, element?: import("react").ReactNode) => () => void;

package/components/Header/useHeaderActionStore.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-underscore-dangle */
+import create from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+export const useHeaderActionStore = create()(immer((set, get) => ({
+    setAction: (path, element) => {
+        set((state) => {
+            state.path = path;
+            state.element = element;
+        });
+        return get().removeAction;
+    },
+    removeAction: () => {
+        set((state) => {
+            state.path = null;
+            state.element = null;
+        });
+    },
+})));
+export const useSetHeaderAction = () => {
+    return useHeaderActionStore((state) => state.setAction);
+};

package/components/PoweredBy/PoweredBy.js

@@ -7,6 +7,5 @@ export const PoweredBy = () => {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-            flex: 1,
         } }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })));
 };

package/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, IconButton, Tooltip, } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -6,7 +17,8 @@ const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
     ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
     : 0;
 const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
-export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, sx }) => {
+export const ProgressToNextUpdate = (_a) => {
+    var { updatedAt, timeToUpdate, isLoading, onClick } = _a, other = __rest(_a, ["updatedAt", "timeToUpdate", "isLoading", "onClick"]);
     const { t } = useTranslation();
     const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
     useEffect(() => {
@@ -25,7 +37,7 @@ export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onCli
             setValue(0);
         }
     }, [isLoading]);
-    return (_jsx(IconButton, Object.assign({ onClick: onClick, sx: sx, disabled: isLoading }, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
+    return (_jsx(IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: _jsx(Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
                 value: getSecondsToUpdate(updatedAt, timeToUpdate),
             }), placement: "top", enterDelay: 250, arrow: true }, { children: _jsxs(Box, Object.assign({ sx: {
                     display: 'grid',

package/components/ReverseTokensButton/ReverseTokensButton.js

@@ -12,13 +12,11 @@ export const ReverseTokensButton = ({ vertical, }) => {
             SwapFormKey.ToChain,
             SwapFormKey.ToToken,
         ]);
-        if (fromChain && fromToken && toChain && toToken) {
-            setValue(SwapFormKey.FromAmount, '');
-            setValue(SwapFormKey.FromChain, toChain);
-            setValue(SwapFormKey.FromToken, toToken);
-            setValue(SwapFormKey.ToChain, fromChain);
-            setValue(SwapFormKey.ToToken, fromToken);
-        }
+        setValue(SwapFormKey.FromAmount, '');
+        setValue(SwapFormKey.FromChain, toChain);
+        setValue(SwapFormKey.FromToken, toToken);
+        setValue(SwapFormKey.ToChain, fromChain);
+        setValue(SwapFormKey.ToToken, fromToken);
     };
     return (_jsx(IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? _jsx(SwapVertIcon, {}) : _jsx(SwapHorizIcon, {}) })));
 };