@lifi/widget 1.13.2 → 1.13.3

package/cjs/components/Step/StepProcess.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepProcess = 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 CircularProgress_1 = require("./CircularProgress");
+const StepProcess_style_1 = require("./StepProcess.style");
+const utils_1 = require("./utils");
+const StepProcess = ({ step, process }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useChains)();
+    const { title, message } = (0, utils_1.getProcessMessage)(t, getChainById, step, process);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { status: process.status }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400 }, { children: title })), process.txLink ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ ml: 2, sx: {
+                            display: 'flex',
+                            flex: 1,
+                            justifyContent: 'flex-end',
+                        } }, { children: (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, Object.assign({ size: "small", "aria-label": "settings", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Link, {}) })) }))) : null] })), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary" }, { children: message }))) : null] })));
+};
+exports.StepProcess = StepProcess;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkButton = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.LinkButton = (0, styles_1.styled)(material_1.IconButton)(({ theme }) => ({
+    padding: theme.spacing(0.5),
+}));

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

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

package/cjs/components/Step/StepTimer.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepTimer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_timer_hook_1 = require("react-timer-hook");
+const getExpiryTimestamp = (step) => {
+    var _a, _b, _c;
+    return new Date(((_c = (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process[0]) === null || _b === void 0 ? void 0 : _b.startedAt) !== null && _c !== void 0 ? _c : Date.now()) +
+        step.estimate.executionDuration * 1000);
+};
+const StepTimer = ({ step }) => {
+    var _a, _b;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [isExpired, setExpired] = (0, react_1.useState)(false);
+    const [isExecutionStarted, setExecutionStarted] = (0, react_1.useState)(!!step.execution);
+    const [expiryTimestamp] = (0, react_1.useState)(() => getExpiryTimestamp(step));
+    const { seconds, minutes, isRunning, pause, resume, restart } = (0, react_timer_hook_1.useTimer)({
+        autoStart: false,
+        expiryTimestamp,
+        onExpire: () => setExpired(true),
+    });
+    (0, react_1.useEffect)(() => {
+        if (isExpired || !step.execution) {
+            return;
+        }
+        if (!isExecutionStarted) {
+            setExecutionStarted(true);
+            restart(getExpiryTimestamp(step));
+        }
+        const shouldBePaused = step.execution.process.some((process) => process.status === 'ACTION_REQUIRED' ||
+            process.status === 'CHAIN_SWITCH_REQUIRED' ||
+            process.status === 'FAILED');
+        if (isRunning && shouldBePaused) {
+            pause();
+        }
+        else if (!isRunning && !shouldBePaused) {
+            resume();
+        }
+    }, [
+        expiryTimestamp,
+        isExecutionStarted,
+        isExpired,
+        isRunning,
+        pause,
+        restart,
+        resume,
+        step,
+    ]);
+    if (!isExecutionStarted) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.estimatedTime', {
+                value: (step.estimate.executionDuration / 60).toFixed(0),
+            }) }));
+    }
+    if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE' ||
+        ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED') {
+        return null;
+    }
+    return isExpired ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.networkIsBusy') })) : (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
+};
+exports.StepTimer = StepTimer;

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

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

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

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

@@ -0,0 +1,6 @@
+import { EVMChain, Process, Step } from '@lifi/sdk';
+import { TFunction } from 'react-i18next';
+export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+    title?: string;
+    message?: string;
+};

package/cjs/components/Step/utils.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProcessMessage = void 0;
+const sdk_1 = require("@lifi/sdk");
+const utils_1 = require("../../utils");
+const formatProcessMessage = (initialMessage, args = {}) => {
+    return Object.keys(args).reduce((message, key) => {
+        return message.replace(`{${key}}`, args[key]);
+    }, initialMessage);
+};
+const processMessages = {
+    TOKEN_ALLOWANCE: {
+        STARTED: (t) => t(`swap.process.tokenAllowance.started`),
+        PENDING: (t) => t(`swap.process.tokenAllowance.pending`),
+        DONE: (t) => t(`swap.process.tokenAllowance.done`),
+    },
+    SWITCH_CHAIN: {
+        PENDING: (t) => t(`swap.process.switchChain.pending`),
+        DONE: (t) => t(`swap.process.switchChain.done`),
+    },
+    SWAP: {
+        STARTED: (t) => t(`swap.process.swap.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.swap.actionRequired`),
+        PENDING: (t) => t(`swap.process.swap.pending`),
+        DONE: (t) => t(`swap.process.swap.done`),
+    },
+    CROSS_CHAIN: {
+        STARTED: (t) => t(`swap.process.crossChain.started`),
+        ACTION_REQUIRED: (t) => t(`swap.process.crossChain.actionRequired`),
+        PENDING: (t) => t(`swap.process.crossChain.pending`),
+        DONE: (t) => t(`swap.process.crossChain.done`),
+    },
+    RECEIVING_CHAIN: {
+        PENDING: (t) => t(`swap.process.receivingChain.pending`),
+        DONE: (t) => t(`swap.process.receivingChain.done`),
+    },
+    TRANSACTION: {},
+};
+function getProcessMessage(t, getChainById, step, process) {
+    var _a, _b, _c, _d;
+    if (process.error && process.status === 'FAILED') {
+        const getTransactionNotSentMessage = () => {
+            var _a, _b;
+            return t(`swap.error.message.transactionNotSent`, {
+                amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
+                tokenSymbol: step.action.fromToken.symbol,
+                chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+            });
+        };
+        let title = '';
+        let message = '';
+        switch (process.error.code) {
+            case sdk_1.LifiErrorCode.ChainSwitchError:
+                title = t(`swap.error.title.chainSwitch`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.TransactionFailed:
+                title = t(`swap.error.title.transactionFailed`);
+                message = t(`swap.error.message.transactionFailed`);
+                break;
+            case sdk_1.LifiErrorCode.TransactionUnderpriced:
+                title = t(`swap.error.title.transactionUnderpriced`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.TransactionUnprepared:
+                title = t(`swap.error.title.transactionUnprepared`);
+                message = getTransactionNotSentMessage();
+                break;
+            case sdk_1.LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageTooLarge`);
+                message = t(`swap.error.message.slippageTooLarge`);
+                break;
+            case sdk_1.MetaMaskProviderErrorCode.userRejectedRequest:
+                title = t(`swap.error.title.userRejectedSignatureRequest`);
+                message = t(`swap.error.message.signatureRequired`, {
+                    amount: (0, utils_1.formatTokenAmount)(step.action.fromAmount, step.action.fromToken.decimals),
+                    tokenSymbol: step.action.fromToken.symbol,
+                    chainName: (_b = (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '',
+                });
+                break;
+            default:
+                title = t(`swap.error.title.unknown`);
+                if (process.txLink) {
+                    message = t(`swap.error.message.transactionFailed`);
+                }
+                break;
+        }
+        return { title, message };
+    }
+    const title = (_d = (_c = processMessages[process.type])[process.status]) === null || _d === void 0 ? void 0 : _d.call(_c, t);
+    return { title };
+}
+exports.getProcessMessage = getProcessMessage;

package/cjs/components/StepActions/StepActions.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Step } from '@lifi/sdk';
+import { StepActionsProps } from './types';
+export declare const StepActions: React.FC<StepActionsProps>;
+export declare const StepDetailsContent: React.FC<{
+    step: Step;
+}>;
+export declare const CrossStepDetailsLabel: React.FC<{
+    step: Step;
+}>;
+export declare const SwapStepDetailsLabel: React.FC<{
+    step: Step;
+}>;

package/cjs/components/StepActions/StepActions.js

@@ -0,0 +1,71 @@
+"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.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.StepDetailsContent = exports.StepActions = 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 icons_1 = require("../../icons");
+const utils_1 = require("../../utils");
+const SmallAvatar_1 = require("../SmallAvatar");
+const StepActions_style_1 = require("./StepActions.style");
+const StepActions = (_a) => {
+    var _b;
+    var { step, dense } = _a, other = __rest(_a, ["step", "dense"]);
+    const StepDetailsLabel = step.type === 'cross' ||
+        (step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross'))
+        ? exports.CrossStepDetailsLabel
+        : exports.SwapStepDetailsLabel;
+    const isFullView = !dense && ((_b = step.includedSteps) === null || _b === void 0 ? void 0 : _b.length) > 1;
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const StepIconComponent = ({ icon }) => {
+        var _a;
+        const tool = (_a = step.includedSteps) === null || _a === void 0 ? void 0 : _a[Number(icon) - 1];
+        return tool ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
+                boxSizing: 'content-box',
+            } }, { children: tool.toolDetails.name[0] }))) : null;
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0 }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, Object.assign({ variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name }, { children: step.type === 'lifi' ? (0, jsx_runtime_1.jsx)(icons_1.LiFiToolLogo, {}) : step.toolDetails.name[0] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize" }, { children: step.type === 'lifi'
+                            ? 'LI.FI Smart Contract'
+                            : step.toolDetails.name }))] })), isFullView ? ((0, jsx_runtime_1.jsx)(material_1.Stepper, Object.assign({ orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1 }, { children: step.includedSteps.map((step) => ((0, jsx_runtime_1.jsxs)(material_1.Step, Object.assign({ expanded: true }, { children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, Object.assign({ StepIconComponent: StepIconComponent }, { children: step.type === 'cross' || step.type === 'lifi' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : ((0, jsx_runtime_1.jsx)(exports.SwapStepDetailsLabel, { step: step })) })), (0, jsx_runtime_1.jsx)(StepActions_style_1.StepContent, { children: (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step }) })] }), step.id))) }))) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6 }, { children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step })] })))] })));
+};
+exports.StepActions = StepActions;
+const StepDetailsContent = ({ step }) => {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [(0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
+};
+exports.StepDetailsContent = StepDetailsContent;
+const CrossStepDetailsLabel = ({ step }) => {
+    var _a, _b;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useChains)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.crossStepDetails', {
+            from: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            to: (_b = getChainById(step.action.toChainId)) === null || _b === void 0 ? void 0 : _b.name,
+            tool: step.toolDetails.name,
+        }) })));
+};
+exports.CrossStepDetailsLabel = CrossStepDetailsLabel;
+const SwapStepDetailsLabel = ({ step }) => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useChains)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary" }, { children: t('swap.swapStepDetails', {
+            chain: (_a = getChainById(step.action.fromChainId)) === null || _a === void 0 ? void 0 : _a.name,
+            tool: step.toolDetails.name,
+        }) })));
+};
+exports.SwapStepDetailsLabel = SwapStepDetailsLabel;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const StepIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StepConnector: import("@emotion/styled").StyledComponent<import("@mui/material").StepConnectorProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepLabel: import("@emotion/styled").StyledComponent<import("@mui/material").StepLabelProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepContent: import("@emotion/styled").StyledComponent<import("@mui/material").StepContentProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StepAvatar: 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/StepActions/StepActions.style.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepAvatar = exports.StepContent = exports.StepLabel = exports.StepConnector = exports.StepIcon = void 0;
+const material_1 = require("@mui/material");
+const StepConnector_1 = require("@mui/material/StepConnector");
+const StepContent_1 = require("@mui/material/StepContent");
+const StepLabel_1 = require("@mui/material/StepLabel");
+const styles_1 = require("@mui/material/styles");
+exports.StepIcon = (0, styles_1.styled)('span', {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    width: 12,
+    height: 12,
+    borderRadius: '50%',
+    border: `2px solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+}));
+exports.StepConnector = (0, styles_1.styled)(material_1.StepConnector, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    marginLeft: theme.spacing(1.875),
+    [`.${StepConnector_1.stepConnectorClasses.line}`]: {
+        minHeight: 8,
+        borderLeftWidth: 2,
+        borderColor: theme.palette.mode === 'light'
+            ? theme.palette.grey[300]
+            : theme.palette.grey[800],
+    },
+}));
+exports.StepLabel = (0, styles_1.styled)(material_1.StepLabel, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error', 'disabled'].includes(prop),
+})(({ theme }) => ({
+    padding: 0,
+    [`.${StepLabel_1.stepLabelClasses.iconContainer}`]: {
+        paddingLeft: theme.spacing(0.75),
+        paddingRight: theme.spacing(2.75),
+    },
+    [`&.${StepLabel_1.stepLabelClasses.disabled}`]: {
+        cursor: 'inherit',
+    },
+}));
+exports.StepContent = (0, styles_1.styled)(material_1.StepContent, {
+    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
+})(({ theme }) => ({
+    borderLeft: `2px solid ${theme.palette.mode === 'light'
+        ? theme.palette.grey[300]
+        : theme.palette.grey[800]}`,
+    marginLeft: theme.spacing(1.875),
+    paddingLeft: theme.spacing(3.875),
+    [`&.${StepContent_1.stepContentClasses.last}`]: {
+        borderLeft: 'none',
+        paddingLeft: theme.spacing(4.1875),
+    },
+}));
+exports.StepAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme, variant }) => ({
+    color: variant === 'square' ? theme.palette.text.primary : theme.palette.grey[900],
+    backgroundColor: 'transparent',
+}));

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

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

package/cjs/components/StepActions/index.js

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

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

@@ -0,0 +1,6 @@
+import { Step } from '@lifi/sdk';
+import { BoxProps } from '@mui/material';
+export interface StepActionsProps extends BoxProps {
+    step: Step;
+    dense?: boolean;
+}

package/cjs/components/StepActions/types.js

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

package/cjs/components/StepDivider/StepDivider.d.ts

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

package/cjs/components/StepDivider/StepDivider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepDivider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const StepDivider_style_1 = require("./StepDivider.style");
+const StepDivider = () => {
+    return ((0, jsx_runtime_1.jsx)(StepDivider_style_1.Container, { children: (0, jsx_runtime_1.jsx)(material_1.Divider, { orientation: "vertical", flexItem: true }) }));
+};
+exports.StepDivider = StepDivider;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Container: 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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/StepDivider/StepDivider.style.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.Container = (0, styles_1.styled)(material_1.Container)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: theme.spacing(2),
+}));

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

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

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

package/cjs/components/SwapButton/ButtonTooltip.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ButtonTooltip: ({ title, children, }: {
+    title?: string | undefined;
+    children: JSX.Element;
+}) => JSX.Element;

package/cjs/components/SwapButton/ButtonTooltip.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ButtonTooltip = ({ title, children, }) => title ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: title, placement: "top", enterDelay: 250, arrow: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: children }) }))) : (children);
+exports.ButtonTooltip = ButtonTooltip;

package/cjs/components/SwapButton/SwapButton.d.ts

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