@lifi/widget 1.32.8 → 2.0.0-alpha.1

package/components/SendToWallet/SendToWallet.js

@@ -1,24 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isAddress } from '@ethersproject/address';
 import { Collapse, FormHelperText } from '@mui/material';
-import { forwardRef, useEffect } from 'react';
-import { useFormContext, useFormState } from 'react-hook-form';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI } from '../../types';
+import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { register, unregister, trigger, getValues, clearErrors } = useFormContext();
+    const { trigger, getValues, clearErrors } = useFormContext();
     const { account, provider } = useWallet();
     const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
     const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
-    const requiredToAddress = requiredUI?.includes(DisabledUI.ToAddress);
+    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress);
+    const requiredToAddressRef = useRef(requiredToAddress);
+    const { field: { onChange, onBlur, name, value }, } = useController({
+        name: SwapFormKey.ToAddress,
+        rules: {
+            required: requiredToAddress &&
+                t('swap.error.title.walletAddressRequired'),
+            validate: async (value) => {
+                try {
+                    if (!value) {
+                        return true;
+                    }
+                    const address = await provider?.resolveName(value);
+                    return (isAddress(address || value) ||
+                        t('swap.error.title.walletAddressInvalid'));
+                }
+                catch {
+                    return t('swap.error.title.walletEnsAddressInvalid');
+                }
+            },
+            onBlur: () => trigger(SwapFormKey.ToAddress),
+        },
+    });
     // We want to show toAddress field if it is set via widget configuration and not hidden
     const showInstantly = Boolean(!showSendToWalletDirty &&
         showDestinationWallet &&
@@ -33,33 +55,17 @@ export const SendToWallet = forwardRef((props, ref) => {
         const value = getValues(SwapFormKey.ToAddress);
         if (value) {
             trigger(SwapFormKey.ToAddress);
+            // Trigger validation if we change requiredToAddress in the runtime
         }
-    }, [account.chainId, getValues, trigger]);
-    useEffect(() => {
-        unregister(SwapFormKey.ToAddress);
-    }, [requiredToAddress, unregister]);
+        else if (requiredToAddressRef.current !== requiredToAddress) {
+            requiredToAddressRef.current = requiredToAddress;
+            trigger(SwapFormKey.ToAddress).then(() => clearErrors(SwapFormKey.ToAddress));
+        }
+    }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
     if (hiddenToAddress) {
         return null;
     }
-    const { onChange, onBlur, name, ref: inputRef, } = register(SwapFormKey.ToAddress, {
-        required: requiredToAddress &&
-            t('swap.error.title.walletAddressRequired'),
-        validate: async (value) => {
-            try {
-                if (!value) {
-                    return true;
-                }
-                const address = await provider?.resolveName(value);
-                return (isAddress(address || value) ||
-                    t('swap.error.title.walletAddressInvalid'));
-            }
-            catch {
-                return t('swap.error.title.walletEnsAddressInvalid');
-            }
-        },
-        onBlur: () => trigger(SwapFormKey.ToAddress),
-    });
-    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
+    return (_jsx(Collapse, { timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Card, { ...props, ref: ref, children: [_jsx(CardTitle, { required: requiredToAddress, children: t('swap.sendToWallet') }), _jsxs(FormControl, { fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' }, children: [_jsx(Input, { size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, value: value, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
 });
 export const SendToWalletFormHelperText = () => {
     const { errors } = useFormState();

package/components/SendToWallet/SendToWallet.style.d.ts

@@ -2,7 +2,7 @@
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").FormControlPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -10,7 +10,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     hiddenLabel?: boolean | undefined;
     margin?: "normal" | "none" | "dense" | undefined;
     required?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").FormControlPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "outlined" | "filled" | "standard" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/components/SendToWallet/SendToWalletButton.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined';
+import WalletIcon from '@mui/icons-material/Wallet';
 import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI } from '../../types';
+import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
 export const SendToWalletButton = () => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
@@ -16,7 +16,7 @@ export const SendToWalletButton = () => {
     if (!showDestinationWallet ||
         !account.isActive ||
         hiddenUI?.includes(HiddenUI.ToAddress) ||
-        requiredUI?.includes(HiddenUI.ToAddress)) {
+        requiredUI?.includes(RequiredUI.ToAddress)) {
         return null;
     }
     const handleClick = () => {
@@ -28,5 +28,5 @@ export const SendToWalletButton = () => {
     return (_jsx(Tooltip, { title: t('swap.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
                 minWidth: 48,
                 marginLeft: 1,
-            }, children: _jsx(WalletOutlinedIcon, {}) }) }));
+            }, children: _jsx(WalletIcon, {}) }) }));
 };

package/components/SmallAvatar.d.ts

@@ -10,7 +10,7 @@ export declare const SmallAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "circular" | "rounded" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -20,7 +20,7 @@ export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledCo
     classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
     height?: string | number | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "circular" | "rounded" | "rectangular" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"text" | "circular" | "rounded" | "rectangular", import("@mui/material").SkeletonPropsVariantOverrides> | undefined;
     width?: string | number | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Status, Substatus } from '@lifi/sdk';
-import { Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 export declare const CircularIcon: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/components/Step/DestinationWalletAddress.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 export declare const DestinationWalletAddress: React.FC<{
-    step: Step;
+    step: LifiStep;
     toAddress: string;
     toAddressLink: string;
 }>;

package/components/Step/DestinationWalletAddress.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
-import WalletOutlinedIcon from '@mui/icons-material/WalletOutlined';
+import WalletIcon from '@mui/icons-material/Wallet';
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
@@ -11,18 +11,14 @@ export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) =>
     return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(WalletOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(WalletIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) }), _jsx(Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: isDone
+                        } }) }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: 400, children: isDone
                         ? t('swap.sentToAddress', {
                             address: toAddress,
                         })
                         : t('swap.sendToAddress', {
                             address: toAddress,
-                        }) }), _jsx(Box, { ml: 2, sx: {
-                        display: 'flex',
-                        flex: 1,
-                        justifyContent: 'flex-end',
-                    }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) }) })] }) }));
+                        }) }), _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })] }) }));
 };

package/components/Step/GasStepProcess.d.ts

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

package/components/Step/GasStepProcess.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import EvStationOutlinedIcon from '@mui/icons-material/EvStationOutlined';
+import EvStationIcon from '@mui/icons-material/EvStation';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CircularIcon } from './CircularProgress.style';
@@ -9,10 +9,10 @@ export const GasStepProcess = ({ step }) => {
     return (_jsx(Box, { px: 2, py: 1, children: _jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
-            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationOutlinedIcon, { color: isDone ? 'success' : 'inherit', sx: {
+            }, children: [_jsx(CircularIcon, { status: isDone ? 'DONE' : 'NOT_STARTED', children: _jsx(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
                             position: 'absolute',
                             fontSize: '1rem',
-                        } }) }), _jsxs(Typography, { ml: 2, fontSize: 14, fontWeight: 400, children: [t('format.currency', {
+                        } }) }), _jsxs(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,

package/components/Step/Step.d.ts

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

package/components/Step/Step.js

@@ -17,17 +17,15 @@ export const Step = ({ step, fromToken, toToken, toAddress }) => {
     const getCardTitle = () => {
         switch (step.type) {
             case 'lifi':
-                if (step.includedSteps.every((step) => step.type === 'cross')) {
-                    return t('swap.stepBridge');
+                const hasCrossStep = step.includedSteps.some((step) => step.type === 'cross');
+                const hasSwapStep = step.includedSteps.some((step) => step.type === 'swap');
+                if (hasCrossStep && hasSwapStep) {
+                    return t('swap.stepSwapAndBridge');
                 }
-                if (step.includedSteps.every((step) => step.type === 'swap')) {
-                    return t('swap.stepSwap');
+                if (hasCrossStep) {
+                    return t('swap.stepBridge');
                 }
-                return t('swap.stepSwapAndBridge');
-            case 'swap':
                 return t('swap.stepSwap');
-            case 'cross':
-                return t('swap.stepBridge');
             default:
                 return t('swap.stepSwap');
         }

package/components/Step/StepList.d.ts

@@ -1,2 +1,2 @@
-import { Route } from '@lifi/sdk';
+import type { Route } from '@lifi/sdk';
 export declare const getStepList: (route?: Route) => JSX.Element[] | undefined;

package/components/Step/StepProcess.d.ts

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

package/components/Step/StepProcess.js

@@ -9,9 +9,5 @@ export const StepProcess = ({ step, process }) => {
     return (_jsxs(Box, { px: 2, py: 1, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
-                }, children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, { ml: 2, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? (_jsx(Box, { ml: 2, sx: {
-                            display: 'flex',
-                            flex: 1,
-                            justifyContent: 'flex-end',
-                        }, children: _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) }) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
+                }, children: [_jsx(CircularProgress, { process: process }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: process.error ? 600 : 400, children: title }), process.txLink ? (_jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: process.txLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })) : null] }), message ? (_jsx(Typography, { ml: 6, fontSize: 14, fontWeight: 500, color: "text.secondary", children: message })) : null] }));
 };

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

@@ -1,39 +1,3 @@
-/// <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" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | 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<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    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<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | 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<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    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" | "nonce" | "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" | "onResize" | "onResizeCapture" | "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 type { StyledComponent } from '@emotion/styled';
+import type { IconButtonProps, LinkProps } from '@mui/material';
+export declare const LinkButton: StyledComponent<IconButtonProps & LinkProps>;

package/components/Step/StepTimer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { Step } from '@lifi/sdk';
+import type { LifiStep } from '@lifi/sdk';
 export declare const StepTimer: React.FC<{
-    step: Step;
+    step: LifiStep;
     hideInProgress?: boolean;
 }>;

package/components/Step/StepTimer.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useTimer } from 'react-timer-hook';
 const getExpiryTimestamp = (step) => new Date((step.execution?.process[0]?.startedAt ?? Date.now()) +
     step.estimate.executionDuration * 1000);
-export const StepTimer = ({ step, hideInProgress, }) => {
+export const StepTimer = ({ step, hideInProgress }) => {
     const { t } = useTranslation();
     const [isExpired, setExpired] = useState(false);
     const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);

package/components/StepActions/StepActions.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
-import type { Step } from '@lifi/sdk';
+import type { LifiStep, Step } from '@lifi/sdk';
 import type { WidgetVariant } from '../../types';
 import type { StepActionsProps, StepDetailsLabelProps } from './types';
 export declare const StepActions: React.FC<StepActionsProps>;
+export declare const IncludedSteps: React.FC<{
+    step: LifiStep;
+    variant?: WidgetVariant;
+}>;
 export declare const StepDetailsContent: React.FC<{
     step: Step;
     variant?: WidgetVariant;
@@ -10,3 +14,4 @@ export declare const StepDetailsContent: React.FC<{
 export declare const CustomStepDetailsLabel: React.FC<StepDetailsLabelProps>;
 export declare const CrossStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;
 export declare const SwapStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;
+export declare const ProtocolStepDetailsLabel: React.FC<Omit<StepDetailsLabelProps, 'variant'>>;

package/components/StepActions/StepActions.js

@@ -1,26 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { Box, Step as MuiStep, Stepper, Typography } from '@mui/material';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Badge, Box, Collapse, Step as MuiStep, Stepper, Typography, } from '@mui/material';
+import Big from 'big.js';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useChains } from '../../hooks';
 import { LiFiToolLogo } from '../../icons';
 import { useWidgetConfig } from '../../providers';
 import { formatTokenAmount } from '../../utils';
+import { CardIconButton } from '../Card';
 import { SmallAvatar } from '../SmallAvatar';
 import { StepAvatar, StepConnector, StepContent, StepLabel, } from './StepActions.style';
 export const StepActions = ({ step, dense, ...other }) => {
+    const { t } = useTranslation();
     const { variant, contractTool } = useWidgetConfig();
-    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
-        ? CustomStepDetailsLabel
-        : step.type === 'cross' ||
-            (step.type === 'lifi' &&
-                step.includedSteps.some((step) => step.type === 'cross'))
-            ? CrossStepDetailsLabel
-            : SwapStepDetailsLabel;
-    const isFullView = !dense && step.includedSteps?.length > 1;
+    const [cardExpanded, setCardExpanded] = useState(false);
+    const handleExpand = (e) => {
+        e.stopPropagation();
+        setCardExpanded((expanded) => !expanded);
+    };
     const customStep = variant === 'nft'
         ? step.includedSteps?.find((step) => step.type === 'custom')
         : undefined;
+    const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
     if (customStep && contractTool) {
         const toolDetails = {
             key: contractTool.name,
@@ -28,10 +32,15 @@ export const StepActions = ({ step, dense, ...other }) => {
             logoURI: contractTool.logoURI,
         };
         customStep.toolDetails = toolDetails;
-        if (!isFullView) {
+        if (dense) {
             step.toolDetails = toolDetails;
         }
     }
+    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(SmallAvatar, { children: _jsx(LiFiToolLogo, {}) }), children: _jsx(StepAvatar, { variant: "circular", src: step.toolDetails.logoURI, alt: step.toolDetails.name, children: step.toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`swap.stepDetails`, {
+                            tool: step.toolDetails.name,
+                        }) }), hasCollapsedSteps ? (_jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) })) : null] }), hasCollapsedSteps ? (_jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsx(IncludedSteps, { step: step, variant: variant }) })) : (_jsx(IncludedSteps, { step: step, variant: variant }))] }));
+};
+export const IncludedSteps = ({ step, variant }) => {
     // eslint-disable-next-line react/no-unstable-nested-components
     const StepIconComponent = ({ icon }) => {
         const tool = step.includedSteps?.[Number(icon) - 1];
@@ -39,16 +48,34 @@ export const StepActions = ({ step, dense, ...other }) => {
                 boxSizing: 'content-box',
             }, children: tool.toolDetails.name[0] })) : null;
     };
-    return (_jsxs(Box, { ...other, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, mb: isFullView ? 1.5 : 0, children: [_jsx(StepAvatar, { variant: "circular", src: step.type !== 'lifi' ? step.toolDetails.logoURI : undefined, alt: step.toolDetails.name, children: step.type === 'lifi' ? _jsx(LiFiToolLogo, {}) : step.toolDetails.name[0] }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", textTransform: "capitalize", children: step.type === 'lifi'
-                            ? 'LI.FI Smart Contract'
-                            : step.toolDetails.name })] }), isFullView ? (_jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' || step.type === 'lifi' ? (_jsx(CrossStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] }))] }));
+    const StepDetailsLabel = step.tool === 'custom' && variant === 'nft'
+        ? CustomStepDetailsLabel
+        : step.type === 'lifi' &&
+            step.includedSteps.some((step) => step.type === 'cross')
+            ? CrossStepDetailsLabel
+            : SwapStepDetailsLabel;
+    return step.includedSteps.length > 1 ? (_jsx(Box, { mt: 1.5, children: _jsx(Stepper, { orientation: "vertical", connector: _jsx(StepConnector, {}), activeStep: -1, children: step.includedSteps.map((step, i) => (_jsxs(MuiStep, { expanded: true, children: [_jsx(StepLabel, { StepIconComponent: StepIconComponent, children: step.type === 'custom' && variant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, variant: variant })) : step.type === 'cross' ? (_jsx(CrossStepDetailsLabel, { step: step })) : step.type === 'protocol' ? (_jsx(ProtocolStepDetailsLabel, { step: step })) : (_jsx(SwapStepDetailsLabel, { step: step })) }), _jsx(StepContent, { children: _jsx(StepDetailsContent, { step: step, variant: variant }) })] }, step.id))) }) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, variant: variant === 'nft' ? variant : undefined }), _jsx(StepDetailsContent, { step: step, variant: variant })] }));
 };
 export const StepDetailsContent = ({ step, variant }) => {
     const { t } = useTranslation();
+    const sameTokenProtocolStep = step.action.fromToken.chainId === step.action.toToken.chainId &&
+        step.action.fromToken.address === step.action.toToken.address;
+    let fromAmount;
+    if (sameTokenProtocolStep) {
+        fromAmount = Big(step.estimate.fromAmount)
+            .div(10 ** step.action.fromToken.decimals)
+            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
+    }
+    else {
+        fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);
+    }
+    const showToAmount = step.type !== 'custom' &&
+        step.tool !== 'custom' &&
+        variant !== 'nft' &&
+        !sameTokenProtocolStep;
     return (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [t('format.number', {
-                value: formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals),
-            }), ' ', step.action.fromToken.symbol, !((step.type === 'custom' || step.tool === 'custom') &&
-                variant === 'nft') ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                value: fromAmount,
+            }), ' ', step.action.fromToken.symbol, showToAmount ? (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
                         value: formatTokenAmount(step.execution?.toAmount ?? step.estimate.toAmount, step.execution?.toToken?.decimals ?? step.action.toToken.decimals),
                     }), ' ', step.execution?.toToken?.symbol ?? step.action.toToken.symbol] })) : null] }));
 };
@@ -78,3 +105,11 @@ export const SwapStepDetailsLabel = ({ step }) => {
             tool: step.toolDetails.name,
         }) }));
 };
+export const ProtocolStepDetailsLabel = ({ step }) => {
+    const { t } = useTranslation();
+    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: step.toolDetails.key === 'lifuelProtocol'
+            ? t('swap.refuelStepDetails', {
+                tool: step.toolDetails.name,
+            })
+            : step.toolDetails.name }));
+};

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

@@ -14,7 +14,7 @@ export declare const StepAvatar: import("@emotion/styled").StyledComponent<{
     src?: string | undefined;
     srcSet?: string | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "circular" | "rounded" | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"square" | "circular" | "rounded", import("@mui/material").AvatarPropsVariantOverrides> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/StepActions/types.d.ts

@@ -1,8 +1,8 @@
-import type { Step } from '@lifi/sdk';
+import type { LifiStep, Step } from '@lifi/sdk';
 import type { BoxProps } from '@mui/material';
 import type { WidgetVariant } from '../../types';
 export interface StepActionsProps extends BoxProps {
-    step: Step;
+    step: LifiStep;
     dense?: boolean;
 }
 export interface StepDetailsLabelProps {

package/components/SwapButton/SwapButton.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
+export const SwapButton = ({ onClick, hasRoute, text, disabled, loading, }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { variant, walletManagement } = useWidgetConfig();
@@ -24,7 +24,7 @@ export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, })
     };
     const getButtonText = () => {
         if (account.isActive) {
-            if (!currentRoute) {
+            if (!hasRoute) {
                 return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
             }
             if (text) {

package/components/SwapButton/types.d.ts

@@ -1,7 +1,6 @@
-import type { Route } from '@lifi/sdk';
 export interface SwapButtonProps {
     onClick?(): void;
-    currentRoute?: Route;
+    hasRoute?: boolean;
     text?: string;
     disabled?: boolean;
     loading?: boolean;

package/components/SwapInput/SwapInput.style.d.ts

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"success" | "warning" | "error" | "primary" | "secondary" | "info", import("@mui/material").FormControlPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;
@@ -12,7 +12,7 @@ export declare const FormControl: import("@emotion/styled").StyledComponent<{
     hiddenLabel?: boolean | undefined;
     margin?: "normal" | "none" | "dense" | undefined;
     required?: boolean | undefined;
-    size?: "small" | "medium" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material").FormControlPropsSizeOverrides> | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "outlined" | "filled" | "standard" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {