@lifi/widget 3.0.0-alpha.4 → 3.0.0-alpha.6

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgressPending = exports.CircularIcon = void 0;
+const material_1 = require("@mui/material");
+const CircularProgress_1 = require("@mui/material/CircularProgress");
+const styles_1 = require("@mui/material/styles");
+const getStatusColor = (theme, status, substatus) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return (0, styles_1.alpha)(theme.palette.info.main, 0.12);
+        case 'DONE':
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return (0, styles_1.alpha)(theme.palette.warning.main, 0.48);
+            }
+            return (0, styles_1.alpha)(theme.palette.success.main, 0.12);
+        case 'FAILED':
+            return (0, styles_1.alpha)(theme.palette.error.main, 0.12);
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+exports.CircularIcon = (0, styles_1.styled)(material_1.Box, {
+    shouldForwardProp: (prop) => !['status', 'substatus'].includes(prop),
+})(({ theme, status, substatus }) => ({
+    backgroundColor: ['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? getStatusColor(theme, status, substatus)
+        : theme.palette.background.paper,
+    borderStyle: 'solid',
+    borderColor: getStatusColor(theme, status, substatus),
+    borderWidth: !['ACTION_REQUIRED', 'DONE', 'FAILED'].includes(status)
+        ? 2
+        : 0,
+    display: 'grid',
+    position: 'relative',
+    placeItems: 'center',
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+}));
+const circleAnimation = (0, styles_1.keyframes) `
+  0% {
+    stroke-dashoffset: 129;
+    transform: rotate(0);
+  }
+  50% {
+    stroke-dashoffset: 56;
+    transform: rotate(45deg);
+  };
+  100% {
+    stroke-dashoffset: 129;
+    transform: rotate(360deg);
+  }
+`;
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+exports.CircularProgressPending = (0, styles_1.styled)(material_1.CircularProgress) `
+  color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.primary.main
+    : theme.palette.primary.light};
+  animation-duration: 3s;
+  position: absolute;
+  left: -2px;
+  .${CircularProgress_1.circularProgressClasses.circle} {
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-name: ${circleAnimation};
+    stroke-dasharray: 129;
+    stroke-dashoffset: 129;
+    stroke-linecap: round;
+    transform-origin: 100% 100%;
+  }
+`;

package/_cjs/components/Step/DestinationWalletAddress.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DestinationWalletAddress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkRounded_1 = require("@mui/icons-material/LinkRounded");
+const Wallet_1 = require("@mui/icons-material/Wallet");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const CircularProgress_style_1 = require("./CircularProgress.style");
+const StepProcess_style_1 = require("./StepProcess.style");
+const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isDone = step.execution?.status === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(Wallet_1.default, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: 400, children: isDone
+                        ? t('main.sentToAddress', {
+                            address: toAddress,
+                        })
+                        : t('main.sendToAddress', {
+                            address: toAddress,
+                        }) }), (0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) })] }) }));
+};
+exports.DestinationWalletAddress = DestinationWalletAddress;

package/_cjs/components/Step/GasStepProcess.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasStepProcess = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EvStation_1 = require("@mui/icons-material/EvStation");
+const material_1 = require("@mui/material");
+const react_i18next_1 = require("react-i18next");
+const CircularProgress_style_1 = require("./CircularProgress.style");
+const GasStepProcess = ({ step }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isDone = step.execution?.status === 'DONE';
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { px: 2, py: 1, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+            }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: (0, jsx_runtime_1.jsx)(EvStation_1.default, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { ml: 2, flex: 1, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
+                            value: (step.execution?.gasAmountUSD ||
+                                step.estimate.gasCosts?.reduce((amount, gasCost) => amount + parseFloat(gasCost.amountUSD || '0'), 0)) ??
+                                0,
+                        }), ' ', isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')] })] }) }));
+};
+exports.GasStepProcess = GasStepProcess;

package/_cjs/components/Step/Step.js

@@ -0,0 +1,56 @@
+"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 hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const DestinationWalletAddress_1 = require("./DestinationWalletAddress");
+const GasStepProcess_1 = require("./GasStepProcess");
+const StepProcess_1 = require("./StepProcess");
+const StepTimer_1 = require("./StepTimer");
+const Step = ({ step, fromToken, toToken, toAddress }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const stepHasError = step.execution?.process.some((process) => process.status === 'FAILED');
+    const getCardTitle = () => {
+        switch (step.type) {
+            case 'lifi':
+                const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
+                const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
+                if (hasCrossStep && hasSwapStep) {
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepSwapAndBridge');
+                }
+                if (hasCrossStep) {
+                    return subvariant === 'nft'
+                        ? t('main.stepBridgeAndBuy')
+                        : t('main.stepBridge');
+                }
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+            default:
+                return subvariant === 'nft'
+                    ? t('main.stepSwapAndBuy')
+                    : t('main.stepSwap');
+        }
+    };
+    const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);
+    const toAddressLink = toAddress
+        ? `${getChainById(step.action.toChainId)?.metamask
+            .blockExplorerUrls[0]}address/${toAddress}`
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: stepHasError ? 'error' : 'default', children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                }, children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { flex: 1, children: getCardTitle() }), (0, jsx_runtime_1.jsx)(Card_1.CardTitle, { sx: { fontWeight: 500 }, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: step }) })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { 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 }), step.execution?.process.map((process, index) => ((0, jsx_runtime_1.jsx)(StepProcess_1.StepProcess, { step: step, process: process }, index))), (0, jsx_runtime_1.jsx)(GasStepProcess_1.GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? ((0, jsx_runtime_1.jsx)(DestinationWalletAddress_1.DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? (0, jsx_runtime_1.jsx)(Token_1.Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
+};
+exports.Step = Step;

package/_cjs/components/Step/StepList.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStepList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const StepDivider_1 = require("../../components/StepDivider");
+const Step_1 = require("./Step");
+const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
+    const lastIndex = steps.length - 1;
+    const fromToken = index === 0
+        ? { ...step.action.fromToken, amount: BigInt(step.action.fromAmount) }
+        : undefined;
+    const toToken = index === lastIndex
+        ? {
+            ...(step.execution?.toToken ?? step.action?.toToken),
+            amount: step.execution?.toAmount
+                ? BigInt(step.execution.toAmount)
+                : subvariant === 'nft'
+                    ? BigInt(route.toAmount)
+                    : BigInt(step.estimate.toAmount),
+        }
+        : undefined;
+    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
+        ? route.toAddress
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Step_1.Step, { step: step, fromToken: fromToken, toToken: toToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? ((0, jsx_runtime_1.jsx)(StepDivider_1.StepDivider, {})) : null] }, step.id));
+});
+exports.getStepList = getStepList;

package/_cjs/components/Step/StepProcess.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepProcess = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkRounded_1 = require("@mui/icons-material/LinkRounded");
+const material_1 = require("@mui/material");
+const hooks_1 = require("../../hooks");
+const CircularProgress_1 = require("./CircularProgress");
+const StepProcess_style_1 = require("./StepProcess.style");
+const StepProcess = ({ step, process }) => {
+    const { title, message } = (0, hooks_1.useProcessMessage)(step, process);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { px: 2, py: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { process: process }), (0, jsx_runtime_1.jsx)(material_1.Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? ((0, jsx_runtime_1.jsx)(StepProcess_style_1.LinkButton, { size: "small", edge: "end", LinkComponent: material_1.Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: (0, jsx_runtime_1.jsx)(LinkRounded_1.default, {}) })) : null] }), message ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { 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,10 @@
+/// <reference types="react" />
+export declare const LinkButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    component?: import("react").ElementType<any> | undefined;
+} & import("@mui/material").LinkOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping" | "TypographyClasses" | "underline"> & {
+    component?: import("react").ElementType<any> | undefined;
+}, {}, {}>;

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.js

@@ -0,0 +1,60 @@
+"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) => new Date((step.execution?.process[0]?.startedAt ?? Date.now()) +
+    step.estimate.executionDuration * 1000);
+const StepTimer = ({ step, hideInProgress }) => {
+    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 === '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('main.estimatedTime', {
+                value: Math.ceil(step.estimate.executionDuration / 60),
+            }) }));
+    }
+    const isTimerExpired = isExpired || (!minutes && !seconds);
+    if (step.execution?.status === 'DONE' ||
+        step.execution?.status === 'FAILED' ||
+        (isTimerExpired && hideInProgress)) {
+        return null;
+    }
+    return isTimerExpired ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('main.inProgress') })) : (
+    // 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.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("./Step"), exports);
+__exportStar(require("./StepList"), exports);

package/_cjs/components/StepActions/StepActions.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProtocolStepDetailsLabel = exports.SwapStepDetailsLabel = exports.CrossStepDetailsLabel = exports.CustomStepDetailsLabel = exports.StepDetailsContent = exports.IncludedSteps = exports.StepActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
+const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
+const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const viem_1 = require("viem");
+const hooks_1 = require("../../hooks");
+const icons_1 = require("../../icons");
+const providers_1 = require("../../providers");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const SmallAvatar_1 = require("../SmallAvatar");
+const StepActions_style_1 = require("./StepActions.style");
+const StepActions = ({ step, dense, ...other }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { subvariant } = (0, providers_1.useWidgetConfig)();
+    const [cardExpanded, setCardExpanded] = (0, react_1.useState)(false);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
+    const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
+    // FIXME: step transaction request overrides step tool details, but not included step tool details
+    const toolDetails = subvariant === 'nft'
+        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
+        : step.toolDetails;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...other, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: icons_1.LiFiToolLogo }), children: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepAvatar, { variant: "circular", src: toolDetails.logoURI ?? icons_1.LiFiToolLogo, alt: toolDetails.name, children: toolDetails.name[0] }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
+                            tool: toolDetails.name,
+                        }) }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) })) : null] }), hasCollapsedSteps ? ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, subvariant: subvariant }) })) : ((0, jsx_runtime_1.jsx)(exports.IncludedSteps, { step: step, subvariant: subvariant }))] }));
+};
+exports.StepActions = StepActions;
+const IncludedSteps = ({ step, subvariant }) => {
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const StepIconComponent = ({ icon }) => {
+        const tool = step.includedSteps?.[Number(icon) - 1];
+        return tool ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, { src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
+                boxSizing: 'content-box',
+            }, children: tool.toolDetails.name[0] })) : null;
+    };
+    const StepDetailsLabel = step.tool === 'custom' && subvariant === 'nft'
+        ? exports.CustomStepDetailsLabel
+        : step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross')
+            ? exports.CrossStepDetailsLabel
+            : exports.SwapStepDetailsLabel;
+    return step.includedSteps.length > 1 ? ((0, jsx_runtime_1.jsx)(material_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(material_1.Stepper, { orientation: "vertical", connector: (0, jsx_runtime_1.jsx)(StepActions_style_1.StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => ((0, jsx_runtime_1.jsxs)(material_1.Step, { expanded: true, children: [(0, jsx_runtime_1.jsx)(StepActions_style_1.StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && subvariant === 'nft' ? ((0, jsx_runtime_1.jsx)(exports.CustomStepDetailsLabel, { step: step, subvariant: subvariant })) : step.type === 'cross' ? ((0, jsx_runtime_1.jsx)(exports.CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? ((0, jsx_runtime_1.jsx)(exports.ProtocolStepDetailsLabel, { 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, subvariant: subvariant }) })] }, step.id))) }) })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { ml: 6, children: [(0, jsx_runtime_1.jsx)(StepDetailsLabel, { step: step, subvariant: subvariant === 'nft' ? subvariant : undefined }), (0, jsx_runtime_1.jsx)(exports.StepDetailsContent, { step: step, subvariant: subvariant })] }));
+};
+exports.IncludedSteps = IncludedSteps;
+const StepDetailsContent = ({ step, subvariant }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId &&
+        step.action.fromToken.address === step.action.toToken.address;
+    let fromAmount;
+    if (sameTokenProtocolStep) {
+        const estimatedFromAmount = BigInt(step.estimate.fromAmount) - BigInt(step.estimate.toAmount);
+        fromAmount =
+            estimatedFromAmount > 0n
+                ? (0, viem_1.formatUnits)(estimatedFromAmount, step.action.fromToken.decimals)
+                : (0, viem_1.formatUnits)(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+    }
+    else {
+        fromAmount = (0, utils_1.formatTokenAmount)(BigInt(step.estimate.fromAmount), step.action.fromToken.decimals);
+    }
+    const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
+                value: fromAmount,
+            }), ' ', step.action.fromToken.symbol, showToAmount ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                        value: (0, utils_1.formatTokenAmount)(BigInt(step.execution?.toAmount ?? step.estimate.toAmount), step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
+                    }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
+};
+exports.StepDetailsContent = StepDetailsContent;
+const CustomStepDetailsLabel = ({ step, subvariant, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    if (!subvariant) {
+        return null;
+    }
+    // FIXME: step transaction request overrides step tool details, but not included step tool details
+    const toolDetails = subvariant === 'nft' &&
+        step.includedSteps?.length > 0
+        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
+        : step.toolDetails;
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`main.${subvariant}StepDetails`, {
+            tool: toolDetails.name,
+        }) }));
+};
+exports.CustomStepDetailsLabel = CustomStepDetailsLabel;
+const CrossStepDetailsLabel = ({ step }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.crossStepDetails', {
+            from: getChainById(step.action.fromChainId)?.name,
+            to: getChainById(step.action.toChainId)?.name,
+            tool: step.toolDetails.name,
+        }) }));
+};
+exports.CrossStepDetailsLabel = CrossStepDetailsLabel;
+const SwapStepDetailsLabel = ({ step }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { getChainById } = (0, hooks_1.useAvailableChains)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.swapStepDetails', {
+            chain: getChainById(step.action.fromChainId)?.name,
+            tool: step.toolDetails.name,
+        }) }));
+};
+exports.SwapStepDetailsLabel = SwapStepDetailsLabel;
+const ProtocolStepDetailsLabel = ({ step }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: step.toolDetails.key === 'lifuelProtocol'
+            ? t('main.refuelStepDetails', {
+                tool: step.toolDetails.name,
+            })
+            : step.toolDetails.name }));
+};
+exports.ProtocolStepDetailsLabel = ProtocolStepDetailsLabel;

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: theme.palette.text.primary,
+    backgroundColor: 'transparent',
+}));

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.js

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

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.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.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/Switch.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Switch_1 = require("@mui/material/Switch");
+exports.Switch = (0, styles_1.styled)(material_1.Switch)(({ theme }) => ({
+    width: 42,
+    height: 24,
+    padding: 0,
+    [`.${Switch_1.switchClasses.switchBase}`]: {
+        padding: 0,
+        margin: theme.spacing(0.25),
+        transitionDuration: theme.transitions.duration.standard,
+        [`&.${Switch_1.switchClasses.checked}`]: {
+            transform: 'translateX(18px)',
+            color: theme.palette.common.white,
+            [`& + .${Switch_1.switchClasses.track}`]: {
+                backgroundColor: theme.palette.primary.main,
+                opacity: 1,
+                border: 0,
+            },
+            [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
+                opacity: 0.5,
+            },
+        },
+        [`&.Mui-focusVisible .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.primary.main,
+            border: '6px solid',
+            borderColor: theme.palette.common.white,
+        },
+        [`&.${Switch_1.switchClasses.disabled} .${Switch_1.switchClasses.thumb}`]: {
+            color: theme.palette.mode === 'light'
+                ? (0, styles_1.alpha)(theme.palette.common.black, 0.12)
+                : (0, styles_1.alpha)(theme.palette.common.white, 0.12),
+        },
+        [`&.${Switch_1.switchClasses.disabled} + .${Switch_1.switchClasses.track}`]: {
+            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+        },
+    },
+    [`.${Switch_1.switchClasses.thumb}`]: {
+        boxSizing: 'border-box',
+        width: 20,
+        height: 20,
+    },
+    [`.${Switch_1.switchClasses.track}`]: {
+        borderRadius: 24 / 2,
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.16)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.16),
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: theme.transitions.duration.standard,
+        }),
+    },
+}));