@lifi/widget 1.13.2 → 1.13.3

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Link: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").LinkBaseProps, "classes"> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined>);
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
+    underline?: "none" | "always" | "hover" | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "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" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/PoweredBy/PoweredBy.style.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    ':hover': {
+        color: theme.palette.primary.main,
+    },
+}));

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

@@ -0,0 +1 @@
+export { PoweredBy } from './PoweredBy';

package/cjs/components/PoweredBy/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoweredBy = void 0;
+var PoweredBy_1 = require("./PoweredBy");
+Object.defineProperty(exports, "PoweredBy", { enumerable: true, get: function () { return PoweredBy_1.PoweredBy; } });

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IconButtonProps } from '@mui/material';
+export declare const ProgressToNextUpdate: React.FC<{
+    updatedAt: number;
+    timeToUpdate: number;
+    isLoading?: boolean;
+} & IconButtonProps>;

package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js

@@ -0,0 +1,63 @@
+"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.ProgressToNextUpdate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+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);
+const ProgressToNextUpdate = (_a) => {
+    var { updatedAt, timeToUpdate, isLoading, onClick } = _a, other = __rest(_a, ["updatedAt", "timeToUpdate", "isLoading", "onClick"]);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [value, setValue] = (0, react_1.useState)(() => getProgressValue(updatedAt, timeToUpdate));
+    (0, react_1.useEffect)(() => {
+        setValue(getProgressValue(updatedAt, timeToUpdate));
+        const id = setInterval(() => {
+            const time = getProgressValue(updatedAt, timeToUpdate);
+            setValue(time);
+            if (time >= 100) {
+                clearInterval(id);
+            }
+        }, 1000);
+        return () => clearInterval(id);
+    }, [timeToUpdate, updatedAt]);
+    (0, react_1.useEffect)(() => {
+        if (isLoading) {
+            setValue(0);
+        }
+    }, [isLoading]);
+    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: onClick, disabled: isLoading }, other, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t('tooltip.progressToNextUpdate', {
+                value: getSecondsToUpdate(updatedAt, timeToUpdate),
+            }), placement: "top", enterDelay: 250, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'grid',
+                    position: 'relative',
+                    placeItems: 'center',
+                    width: 24,
+                    height: 24,
+                } }, { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: "determinate", size: 24, value: 100, sx: (theme) => ({
+                            position: 'absolute',
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.grey[300]
+                                : theme.palette.grey[800],
+                        }) }), (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { variant: isLoading ? 'indeterminate' : 'determinate', size: 24, value: value, sx: (theme) => ({
+                            opacity: value === 100 && !isLoading ? 0.5 : 1,
+                            color: theme.palette.mode === 'light'
+                                ? theme.palette.primary.main
+                                : theme.palette.primary.light,
+                        }) })] })) })) })));
+};
+exports.ProgressToNextUpdate = ProgressToNextUpdate;

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

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

package/cjs/components/ProgressToNextUpdate/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("./ProgressToNextUpdate"), exports);

package/cjs/components/ReverseTokensButton/ReverseTokensButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ReverseTokensButton: React.FC<{
+    vertical?: boolean;
+}>;

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReverseTokensButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const react_hook_form_1 = require("react-hook-form");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const ReverseTokensButton_style_1 = require("./ReverseTokensButton.style");
+const ReverseTokensButton = ({ vertical, }) => {
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    const handleClick = () => {
+        const [fromChain, fromToken, toChain, toToken] = getValues([
+            SwapFormProvider_1.SwapFormKey.FromChain,
+            SwapFormProvider_1.SwapFormKey.FromToken,
+            SwapFormProvider_1.SwapFormKey.ToChain,
+            SwapFormProvider_1.SwapFormKey.ToToken,
+        ]);
+        setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
+        setValue(SwapFormProvider_1.SwapFormKey.FromChain, toChain);
+        setValue(SwapFormProvider_1.SwapFormKey.FromToken, toToken);
+        setValue(SwapFormProvider_1.SwapFormKey.ToChain, fromChain);
+        setValue(SwapFormProvider_1.SwapFormKey.ToToken, fromToken);
+    };
+    return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? (0, jsx_runtime_1.jsx)(icons_material_1.SwapVert, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, {}) })));
+};
+exports.ReverseTokensButton = ReverseTokensButton;

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const IconButton: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/ReverseTokensButton/ReverseTokensButton.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.IconButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid`,
+    borderColor: theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800],
+    zIndex: 1200,
+    padding: theme.spacing(0.5),
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.darken)(theme.palette.background.paper, 0.02)
+            : (0, styles_1.lighten)(theme.palette.background.paper, 0.02),
+    },
+}));

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

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

package/cjs/components/ReverseTokensButton/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("./ReverseTokensButton"), exports);

package/cjs/components/Select.d.ts

@@ -0,0 +1,3 @@
+export declare const Select: import("@emotion/styled").StyledComponent<import("@mui/material").SelectProps<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    dense?: boolean | undefined;
+}, {}, {}>;

package/cjs/components/Select.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const ListItemIcon_1 = require("@mui/material/ListItemIcon");
+const OutlinedInput_1 = require("@mui/material/OutlinedInput");
+const Select_1 = require("@mui/material/Select");
+const styles_1 = require("@mui/material/styles");
+exports.Select = (0, styles_1.styled)(material_1.Select, {
+    shouldForwardProp: (prop) => prop !== 'dense',
+})(({ theme, dense }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    [`.${InputBase_1.inputBaseClasses.input}`]: {
+        padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`.${Select_1.selectClasses.icon}`]: {
+        right: 10,
+    },
+    [`.${ListItemIcon_1.listItemIconClasses.root}`]: {
+        minWidth: 38,
+    },
+    [`.${OutlinedInput_1.outlinedInputClasses.notchedOutline}`]: {
+        display: 'none',
+    },
+}));

package/cjs/components/SelectChainAndToken.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export declare const SelectChainAndToken: React.FC<BoxProps>;

package/cjs/components/SelectChainAndToken.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectChainAndToken = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
+const ReverseTokensButton_1 = require("../components/ReverseTokensButton");
+const SelectTokenButton_1 = require("../components/SelectTokenButton");
+const SwapFormProvider_1 = require("../providers/SwapFormProvider");
+const SelectChainAndToken = (props) => {
+    const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
+    const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
+        name: [
+            SwapFormProvider_1.SwapFormKey.FromChain,
+            SwapFormProvider_1.SwapFormKey.ToChain,
+            SwapFormProvider_1.SwapFormKey.FromToken,
+            SwapFormProvider_1.SwapFormKey.ToToken,
+        ],
+    });
+    const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' } }, props, { children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, m: -1.25 }, { children: (0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact }) })), (0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })] })));
+};
+exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SelectTokenButton/SelectTokenButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+export declare const SelectTokenButton: React.FC<SwapFormTypeProps & {
+    compact: boolean;
+}>;

package/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectTokenButton = 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_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../../hooks");
+const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const TokenAvatar_1 = require("../TokenAvatar");
+const SelectTokenButton_style_1 = require("./SelectTokenButton.style");
+const SelectTokenButton = ({ formType, compact }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
+        name: [
+            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+        ],
+    });
+    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);
+    const { token, isLoading: isTokenLoading } = (0, hooks_1.useToken)(chainId, tokenAddress);
+    const handleClick = () => {
+        navigate(formType === 'from'
+            ? utils_1.navigationRoutes.fromToken
+            : utils_1.navigationRoutes.toToken);
+    };
+    const isSelected = !!(chain && token);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: handleClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token }) : null, action: !compact ? (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) : null, title: isSelected ? token.symbol : t(`swap.selectChainAndToken`), subheader: isSelected ? `on ${chain.name}` : null, selected: isSelected, compact: compact }))] })));
+};
+exports.SelectTokenButton = SelectTokenButton;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComponent<{
+    action?: import("react").ReactNode;
+    avatar?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material/CardHeader").CardHeaderClasses> | undefined;
+    disableTypography?: boolean | undefined;
+    subheader?: import("react").ReactNode;
+    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
+        component?: "span" | undefined;
+    }> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").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/styles").Theme> & {
+    selected?: boolean | undefined;
+    compact?: boolean | undefined;
+}, {}, {}>;

package/cjs/components/SelectTokenButton/SelectTokenButton.style.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectTokenCardHeader = void 0;
+const CardHeader_1 = require("@mui/material/CardHeader");
+const styles_1 = require("@mui/material/styles");
+const Card_1 = require("../Card");
+exports.SelectTokenCardHeader = (0, styles_1.styled)(Card_1.CardHeader, {
+    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
+})(({ theme, selected, compact }) => ({
+    height: 64,
+    [`.${CardHeader_1.cardHeaderClasses.title}`]: {
+        color: selected
+            ? theme.palette.text.primary
+            : theme.palette.text.secondary,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 224,
+        fontWeight: selected ? 500 : 400,
+    },
+    [`.${CardHeader_1.cardHeaderClasses.subheader}`]: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 224,
+    },
+}));

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

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

package/cjs/components/SelectTokenButton/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("./SelectTokenButton"), exports);

package/cjs/components/SmallAvatar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const SmallAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "square" | "circular" | "rounded" | 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" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/SmallAvatar.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmallAvatar = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.SmallAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+    border: `2px solid ${theme.palette.background.paper}`,
+}));

package/cjs/components/Step/CircularProgress.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Status } from '@lifi/sdk';
+export declare function CircularProgress({ status }: {
+    status: Status;
+}): JSX.Element;

package/cjs/components/Step/CircularProgress.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = 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 CircularProgress_style_1 = require("./CircularProgress.style");
+function CircularProgress({ status }) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+            display: 'grid',
+            position: 'relative',
+            placeItems: 'center',
+        } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgress, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, status === 'DONE' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, status === 'FAILED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "error", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null] })));
+}
+exports.CircularProgress = CircularProgress;

package/cjs/components/Step/CircularProgress.style.d.ts

@@ -0,0 +1,6 @@
+import { Status } from '@lifi/sdk';
+import { Theme } from '@mui/material';
+export declare const CircularProgress: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: Status;
+}, {}, {}>;
+export declare const CircularProgressPending: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/cjs/components/Step/CircularProgress.style.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressPending = exports.CircularProgress = void 0;
+const material_1 = require("@mui/material");
+const CircularProgress_1 = require("@mui/material/CircularProgress");
+const styles_1 = require("@mui/material/styles");
+const circleAnimation = (0, styles_1.keyframes)({
+    '0%': {
+        strokeDashoffset: 129,
+        transform: 'rotate(0)',
+    },
+    '50%': {
+        strokeDashoffset: 56,
+        transform: 'rotate(45deg)',
+    },
+    '100%': {
+        strokeDashoffset: 129,
+        transform: 'rotate(360deg)',
+    },
+});
+const getStatusColor = (status, theme) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return theme.palette.primary.main;
+        case 'DONE':
+            return theme.palette.success.main;
+        case 'FAILED':
+            return theme.palette.error.main;
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+exports.CircularProgress = (0, styles_1.styled)(material_1.CircularProgress, {
+    shouldForwardProp: (prop) => prop !== 'status',
+})(({ theme, status }) => ({
+    color: getStatusColor(status, theme),
+}));
+exports.CircularProgressPending = (0, styles_1.styled)(material_1.CircularProgress)(({ theme }) => ({
+    color: theme.palette.mode === 'light'
+        ? theme.palette.primary.main
+        : theme.palette.primary.light,
+    animationDuration: '3s',
+    position: 'absolute',
+    left: 0,
+    [`.${CircularProgress_1.circularProgressClasses.circle}`]: {
+        animationDuration: '2s',
+        animationTimingFunction: 'linear',
+        animationName: circleAnimation,
+        strokeDasharray: 129,
+        strokeDashoffset: 129,
+        strokeLinecap: 'round',
+        transformOrigin: '100% 100%',
+    },
+}));

package/cjs/components/Step/Step.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Step as StepType, TokenAmount } from '@lifi/sdk';
+export declare const Step: React.FC<{
+    step: StepType;
+    fromToken?: TokenAmount;
+    toToken?: TokenAmount;
+}>;

package/cjs/components/Step/Step.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Step = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const Card_1 = require("../../components/Card");
+const StepActions_1 = require("../../components/StepActions");
+const Token_1 = require("../../components/Token");
+const StepProcess_1 = require("./StepProcess");
+const StepTimer_1 = require("./StepTimer");
+const Step = ({ step, fromToken, toToken }) => {
+    var _a, _b;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const stepHasError = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process.some((process) => process.status === 'FAILED');
+    const getCardTitle = () => {
+        switch (step.type) {
+            case 'lifi':
+                if (step.includedSteps.some((step) => step.type === 'cross')) {
+                    return t('swap.stepSwapAndBridge');
+                }
+                return t('swap.stepSwap');
+            case 'swap':
+                return t('swap.stepSwap');
+            case 'cross':
+                return t('swap.stepBridge');
+            default:
+                return t('swap.stepSwap');
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ variant: stepHasError ? 'error' : 'default' }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    flex: 1,
+                } }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ flex: 1 }, { children: getCardTitle() })), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, Object.assign({ sx: { fontWeight: 500 } }, { children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ py: 1 }, { children: [fromToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: fromToken, px: 2, py: 1 }) : null, (0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, px: 2, py: 1, dense: true }), (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] }))] })));
+};
+exports.Step = Step;

package/cjs/components/Step/StepProcess.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Process, Step } from '@lifi/sdk';
+export declare const StepProcess: React.FC<{
+    step: Step;
+    process: Process;
+}>;