@lifi/widget 1.13.2 → 1.13.5

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

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

package/cjs/components/Card/CardHeader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardHeader = void 0;
+const material_1 = require("@mui/material");
+const CardHeader_1 = require("@mui/material/CardHeader");
+const styles_1 = require("@mui/material/styles");
+exports.CardHeader = (0, styles_1.styled)(material_1.CardHeader)(({ theme }) => ({
+    [`.${CardHeader_1.cardHeaderClasses.action}`]: {
+        marginTop: -2,
+        alignSelf: 'center',
+    },
+    [`.${CardHeader_1.cardHeaderClasses.title}`]: {
+        fontWeight: '500',
+        fontSize: '1.125rem',
+        lineHeight: '1.2778',
+        color: theme.palette.text.primary,
+    },
+    [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
+        fontWeight: '400',
+        fontSize: '0.75rem',
+        color: theme.palette.text.secondary,
+    },
+}));

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

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

package/cjs/components/Card/CardTitle.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardTitle = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.CardTitle = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+    fontSize: '0.875rem',
+    lineHeight: '1.286',
+    letterSpacing: '0.01071em',
+    fontWeight: 700,
+    padding: theme.spacing(1.75, 2, 0, 2),
+}));

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

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

package/cjs/components/Card/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Card"), exports);
+__exportStar(require("./CardHeader"), exports);
+__exportStar(require("./CardTitle"), exports);

package/cjs/components/Dialog.d.ts

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

package/cjs/components/Dialog.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../hooks");
+const Dialog = ({ children, open, onClose, }) => {
+    const containerElement = (0, hooks_1.useScrollableContainer)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, 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 })));
+};
+exports.Dialog = Dialog;

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.d.ts

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

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasSufficiencyMessage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const hooks_1 = require("../../hooks");
+const Card_1 = require("../Card");
+const GasSufficiencyMessage_style_1 = require("./GasSufficiencyMessage.style");
+const GasSufficiencyMessage = (_a) => {
+    var { route } = _a, props = __rest(_a, ["route"]);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
+    if (!insufficientFunds && !insufficientGas.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
+                    marginTop: 2,
+                    marginLeft: 2,
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [insufficientGas.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                            ? t(`swap.warning.message.insufficientFunds`)
+                            : null }))) : null, insufficientGas.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                        ? insufficientGas.map((item, index) => {
+                            var _a, _b;
+                            return ((0, jsx_runtime_1.jsx)(material_1.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] })] })));
+};
+exports.GasSufficiencyMessage = GasSufficiencyMessage;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const MessageCard: 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 | "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>, {}, {}>;

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.style.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCard = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.MessageCard = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.warning.main
+        : (0, styles_1.alpha)(theme.palette.warning.main, 0.42),
+    borderRadius: theme.shape.borderRadius,
+    position: 'relative',
+    display: 'flex',
+    whiteSpace: 'pre-line',
+}));

package/cjs/components/GasSufficiencyMessage/index.d.ts

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

package/cjs/components/GasSufficiencyMessage/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./GasSufficiencyMessage"), exports);

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

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const Header: FC;

package/cjs/components/Header/Header.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const utils_1 = require("../../utils");
+const Header_style_1 = require("./Header.style");
+const NavigationHeader_1 = require("./NavigationHeader");
+const WalletHeader_1 = require("./WalletHeader");
+const stickyHeaderRoutes = [
+    utils_1.navigationRoutes.selectWallet,
+    utils_1.navigationRoutes.settings,
+    utils_1.navigationRoutes.swapRoutes,
+    utils_1.navigationRoutes.swapExecution,
+    utils_1.navigationRoutes.swapHistory,
+    utils_1.navigationRoutes.swapDetails,
+];
+const HeaderContainer = ({ children }) => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: utils_1.ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
+};
+const Header = () => {
+    const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [!walletManagement ? (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.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes" | "color" | "position"> & {
+    classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
+    color?: "inherit" | "transparent" | "default" | "primary" | "secondary" | undefined;
+    enableColorOnDark?: boolean | undefined;
+    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | "key"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | 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" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Container: 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 | "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> & {
+    sticky?: boolean | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = exports.HeaderAppBar = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.HeaderAppBar = (0, styles_1.styled)(material_1.AppBar)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    minHeight: 40,
+    padding: theme.spacing(0, 3, 0, 3),
+    ':first-of-type': {
+        paddingTop: theme.spacing(1.5),
+        paddingBottom: theme.spacing(0.5),
+    },
+}));
+exports.Container = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => prop !== 'sticky',
+})(({ theme, sticky }) => ({
+    backgroundColor: theme.palette.background.default,
+    position: sticky ? 'sticky' : 'relative',
+    top: 0,
+    zIndex: 1200,
+}));

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

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

package/cjs/components/Header/NavigationHeader.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const utils_1 = require("../../utils");
+const Header_style_1 = require("./Header.style");
+const useHeaderActionStore_1 = require("./useHeaderActionStore");
+const backButtonRoutes = [
+    utils_1.navigationRoutes.selectWallet,
+    utils_1.navigationRoutes.settings,
+    utils_1.navigationRoutes.swapHistory,
+    utils_1.navigationRoutes.fromToken,
+    utils_1.navigationRoutes.toToken,
+    utils_1.navigationRoutes.swapRoutes,
+    utils_1.navigationRoutes.swapExecution,
+    utils_1.navigationRoutes.swapDetails,
+];
+const NavigationHeader = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { account } = (0, WalletProvider_1.useWallet)();
+    const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const path = pathname.substring(pathname.lastIndexOf('/') + 1);
+    const hasPath = utils_1.navigationRoutesValues.includes(path);
+    const handleBack = () => {
+        navigate(-1);
+    };
+    const handleHeaderTitle = () => {
+        switch (path) {
+            case utils_1.navigationRoutes.selectWallet:
+                return t(`header.selectWallet`);
+            case utils_1.navigationRoutes.settings:
+                return t(`header.settings`);
+            case utils_1.navigationRoutes.swapHistory:
+                return t(`header.swapHistory`);
+            case utils_1.navigationRoutes.fromToken:
+                return t(`header.from`);
+            case utils_1.navigationRoutes.toToken:
+                return t(`header.to`);
+            case utils_1.navigationRoutes.swapRoutes:
+                return t(`header.routes`);
+            case utils_1.navigationRoutes.swapExecution:
+                return t(`header.swap`);
+            case utils_1.navigationRoutes.swapDetails:
+                return t(`header.swapDetails`);
+            default:
+                return t(`header.swap`);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ 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 ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) }))] }) }), (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 }) })] })] })));
+};
+exports.NavigationHeader = NavigationHeader;

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

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

package/cjs/components/Header/WalletHeader.js

@@ -0,0 +1,48 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const WalletProvider_1 = require("../../providers/WalletProvider");
+const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const utils_1 = require("../../utils");
+const Header_style_1 = require("./Header.style");
+const WalletHeader = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { account, disconnect } = (0, WalletProvider_1.useWallet)();
+    const walletAddress = account.address
+        ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
+        : null;
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'column',
+                    }, mr: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption", align: "right" }, { children: t(`header.walletConnected`) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600" }, { children: walletAddress }))] })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: disconnect }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Logout, {}) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "right", fontWeight: "600", flex: 1, mr: 0.5 }, { children: t(`header.connectWallet`) })), (0, jsx_runtime_1.jsx)(ConnectButton, {})] })) })));
+};
+exports.WalletHeader = WalletHeader;
+const ConnectButton = () => {
+    const { pathname } = (0, react_router_dom_1.useLocation)();
+    const config = (0, WidgetProvider_1.useWidgetConfig)();
+    const { connect: walletConnect } = (0, WalletProvider_1.useWallet)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (config.walletManagement) {
+            yield walletConnect();
+            return;
+        }
+        navigate(utils_1.navigationRoutes.selectWallet);
+    });
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "disconnect", edge: "end", onClick: !pathname.includes(utils_1.navigationRoutes.selectWallet) ? connect : undefined }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccountBalanceWalletOutlined, {}) })));
+};

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

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

package/cjs/components/Header/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Header"), exports);
+__exportStar(require("./useHeaderActionStore"), exports);

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

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

package/cjs/components/Header/types.js

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { 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: () => (element?: import("react").ReactNode) => () => void;

package/cjs/components/Header/useHeaderActionStore.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetHeaderAction = exports.useHeaderActionStore = void 0;
+/* eslint-disable no-underscore-dangle */
+const zustand_1 = __importDefault(require("zustand"));
+const immer_1 = require("zustand/middleware/immer");
+exports.useHeaderActionStore = (0, zustand_1.default)()((0, immer_1.immer)((set, get) => ({
+    setAction: (element) => {
+        set((state) => {
+            state.element = element;
+        });
+        return get().removeAction;
+    },
+    removeAction: () => {
+        set((state) => {
+            state.element = null;
+        });
+    },
+})));
+const useSetHeaderAction = () => {
+    return (0, exports.useHeaderActionStore)((state) => state.setAction);
+};
+exports.useSetHeaderAction = useSetHeaderAction;

package/cjs/components/Initializer.d.ts

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

package/cjs/components/Initializer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Initializer = void 0;
+const hooks_1 = require("../hooks");
+const Initializer = () => {
+    (0, hooks_1.useInitializer)();
+    return null;
+};
+exports.Initializer = Initializer;

package/cjs/components/Input.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/Input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const styles_1 = require("@mui/material/styles");
+exports.Input = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    paddingRight: theme.spacing(2),
+    [`.${InputBase_1.inputBaseClasses.input}`]: {
+        padding: theme.spacing(1.5, 1, 1.5, 2),
+        height: '2.875em',
+        boxSizing: 'inherit',
+    },
+}));

package/cjs/components/LiFiLogo.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from 'react';
+export declare const LiFiLogo: React.FC<{
+    variant?: 'icon' | 'full';
+    style?: CSSProperties;
+}>;

package/cjs/components/LiFiLogo.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiFiLogo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("../icons");
+const LiFiLogo = ({ variant = 'icon', style }) => {
+    const Component = variant === 'icon' ? icons_1.LiFiLogo : icons_1.LiFiFullLogo;
+    return (0, jsx_runtime_1.jsx)(Component, { style: style, fill: "currentColor", color: "currentColor" });
+};
+exports.LiFiLogo = LiFiLogo;

package/cjs/components/NotFound.d.ts

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

package/cjs/components/NotFound.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotFound = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const NotFound = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            flex: 1,
+            padding: 3,
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Block, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 18, fontWeight: 700 }, { children: t('tooltip.notFound.title') })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2 }, { children: t('tooltip.notFound.text') }))] })));
+};
+exports.NotFound = NotFound;