@lifi/widget 3.0.0-alpha.3 → 3.0.0-alpha.5

package/_esm/components/Select.js

@@ -0,0 +1,28 @@
+import { Select as MuiSelect } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { listItemIconClasses } from '@mui/material/ListItemIcon';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { selectClasses } from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
+export const Select = styled(MuiSelect, {
+    shouldForwardProp: (prop) => prop !== 'dense',
+})(({ theme, dense }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.common.white
+        : theme.palette.background.paper,
+    [`.${inputBaseClasses.input}`]: {
+        padding: dense ? theme.spacing(1.625, 2, 1.5, 2) : theme.spacing(2),
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`.${selectClasses.icon}`]: {
+        right: 10,
+        color: theme.palette.text.primary,
+    },
+    [`.${listItemIconClasses.root}`]: {
+        minWidth: 38,
+    },
+    [`.${outlinedInputClasses.notchedOutline}`]: {
+        display: 'none',
+    },
+}));

package/_esm/components/SelectChainAndToken.d.ts

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

package/_esm/components/SelectChainAndToken.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useWatch } from 'react-hook-form';
+import { ReverseTokensButton } from '../components/ReverseTokensButton';
+import { SelectTokenButton } from '../components/SelectTokenButton';
+import { FormKey, useWidgetConfig } from '../providers';
+import { DisabledUI, HiddenUI } from '../types';
+export const SelectChainAndToken = (props) => {
+    const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+    const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
+    const [fromChain, toChain, fromToken, toToken] = useWatch({
+        name: [
+            FormKey.FromChain,
+            FormKey.ToChain,
+            FormKey.FromToken,
+            FormKey.ToToken,
+        ],
+    });
+    const hiddenReverse = subvariant === 'refuel' ||
+        disabledUI?.includes(DisabledUI.FromToken) ||
+        disabledUI?.includes(DisabledUI.ToToken) ||
+        hiddenUI?.includes(HiddenUI.ToToken);
+    const hiddenToToken = subvariant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken);
+    const isCompact = fromChain &&
+        toChain &&
+        fromToken &&
+        toToken &&
+        !prefersNarrowView &&
+        !hiddenToToken;
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [_jsx(SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? (_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+};

package/_esm/components/SelectTokenButton/SelectTokenButton.d.ts

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

package/_esm/components/SelectTokenButton/SelectTokenButton.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import { useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useChain, useSwapOnly, useToken } from '../../hooks';
+import { FormKeyHelper, useWidgetConfig } from '../../providers';
+import { navigationRoutes } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
+import { SelectTokenCardHeader } from './SelectTokenButton.style';
+export const SelectTokenButton = ({ formType, compact }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { disabledUI, subvariant } = useWidgetConfig();
+    const swapOnly = useSwapOnly();
+    const tokenKey = FormKeyHelper.getTokenKey(formType);
+    const [chainId, tokenAddress] = useWatch({
+        name: [FormKeyHelper.getChainKey(formType), tokenKey],
+    });
+    const { chain, isLoading: isChainLoading } = useChain(chainId);
+    const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
+    const handleClick = () => {
+        navigate(formType === 'from'
+            ? navigationRoutes.fromToken
+            : subvariant === 'refuel'
+                ? navigationRoutes.toTokenNative
+                : navigationRoutes.toToken);
+    };
+    const isSelected = !!(chain && token);
+    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
+    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
+        ? t('main.selectChain')
+        : formType === 'to' && swapOnly
+            ? t('main.selectToken')
+            : t('main.selectChainAndToken');
+    const cardTitle = formType === 'from' && subvariant === 'nft'
+        ? t(`header.payWith`)
+        : t(`main.${formType}`);
+    return (_jsxs(Card, { flex: 1, onClick: onClick, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultPlaceholder, subheader: isSelected ? t(`main.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] }));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const SelectTokenCardHeader: import("@emotion/styled").StyledComponent<import("@mui/material/CardHeader").CardHeaderOwnProps<"span", "span"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "title" | "sx" | "style" | "className" | "action" | "classes" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    selected?: boolean | undefined;
+    compact?: boolean | undefined;
+}, {}, {}>;

package/_esm/components/SelectTokenButton/SelectTokenButton.style.js

@@ -0,0 +1,31 @@
+import { cardHeaderClasses } from '@mui/material/CardHeader';
+import { styled } from '@mui/material/styles';
+import { CardHeader } from '../Card';
+export const SelectTokenCardHeader = styled(CardHeader, {
+    shouldForwardProp: (prop) => !['selected', 'compact'].includes(prop),
+})(({ theme, selected, compact }) => ({
+    height: 64,
+    [`.${cardHeaderClasses.title}`]: {
+        color: selected
+            ? theme.palette.text.primary
+            : theme.palette.text.secondary,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 256,
+        fontWeight: selected ? 500 : 400,
+        fontSize: compact && !selected ? '1rem' : '1.125rem',
+        [theme.breakpoints.down(392)]: {
+            width: compact ? 92 : 224,
+        },
+    },
+    [`.${cardHeaderClasses.subheader}`]: {
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        width: compact ? 92 : 256,
+        [theme.breakpoints.down(392)]: {
+            width: compact ? 92 : 224,
+        },
+    },
+}));

package/_esm/components/SelectTokenButton/index.js

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

package/_esm/components/SendToWallet/SendToWallet.d.ts

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

package/_esm/components/SendToWallet/SendToWallet.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse, FormHelperText } from '@mui/material';
+import { getEnsAddress } from '@wagmi/core';
+import { forwardRef, useEffect, useRef } from 'react';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { isAddress } from 'viem';
+import { normalize } from 'viem/ens';
+import { useConfig } from 'wagmi';
+import { useAccount, useRequiredToAddress } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
+import { isSVMAddress } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { FormControl, Input } from './SendToWallet.style';
+export const SendToWallet = forwardRef((props, ref) => {
+    const { t } = useTranslation();
+    const { trigger, getValues, setValue, clearErrors } = useFormContext();
+    const { account } = useAccount();
+    const config = useConfig();
+    const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+    const { showSendToWallet, showSendToWalletDirty } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+    const requiredToAddress = useRequiredToAddress();
+    const requiredToAddressRef = useRef(requiredToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
+    const showInstantly = Boolean(!showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
+    const { field: { onChange, onBlur, name, value }, } = useController({
+        name: FormKey.ToAddress,
+        rules: {
+            required: requiredToAddress && t('error.title.walletAddressRequired'),
+            onChange: (e) => {
+                setValue(FormKey.ToAddress, e.target.value.trim());
+            },
+            validate: async (value) => {
+                try {
+                    if (!value || isAddress(value) || isSVMAddress(value)) {
+                        return true;
+                    }
+                    const address = await getEnsAddress(config, {
+                        chainId: getValues(FormKey.ToChain),
+                        name: normalize(value),
+                    });
+                    return Boolean(address);
+                }
+                catch (error) {
+                    return t('error.title.walletEnsAddressInvalid');
+                }
+            },
+            onBlur: () => trigger(FormKey.ToAddress),
+        },
+    });
+    useEffect(() => {
+        const value = getValues(FormKey.ToAddress);
+        if (value) {
+            trigger(FormKey.ToAddress);
+            // Trigger validation if we change requiredToAddress in the runtime
+        }
+        else if (requiredToAddressRef.current !== requiredToAddress) {
+            requiredToAddressRef.current = requiredToAddress;
+            trigger(FormKey.ToAddress).then(() => clearErrors(FormKey.ToAddress));
+        }
+    }, [account.chainId, clearErrors, getValues, requiredToAddress, trigger]);
+    if (hiddenToAddress && !requiredToAddress) {
+        return null;
+    }
+    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('main.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('main.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] })] }) }));
+});
+export const SendToWalletFormHelperText = () => {
+    const { errors } = useFormState();
+    return (_jsx(FormHelperText, { error: !!errors.toAddress, children: errors.toAddress?.message }));
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "error" | "color" | "margin" | "children" | "sx" | "style" | "className" | "disabled" | "required" | "size" | "classes" | "variant" | "fullWidth" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/_esm/components/SendToWallet/SendToWallet.style.js

@@ -0,0 +1,18 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+export const Input = styled(InputBase)(({ theme }) => ({
+    [`.${inputBaseClasses.input}`]: {
+        height: 32,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+    [`&.${inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
+}));

package/_esm/components/SendToWallet/SendToWalletButton.d.ts

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

package/_esm/components/SendToWallet/SendToWalletButton.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import WalletIcon from '@mui/icons-material/Wallet';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
+import { FormKey, useWidgetConfig } from '../../providers';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+export const SendToWalletButton = () => {
+    const { t } = useTranslation();
+    const { setValue } = useFormContext();
+    const emitter = useWidgetEvents();
+    const { disabledUI, hiddenUI } = useWidgetConfig();
+    const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const requiredToAddress = useRequiredToAddress();
+    if (!showDestinationWallet ||
+        hiddenUI?.includes(HiddenUI.ToAddress) ||
+        requiredToAddress) {
+        return null;
+    }
+    const handleClick = () => {
+        if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
+            setValue(FormKey.ToAddress, '', { shouldTouch: true });
+        }
+        toggleSendToWallet();
+        emitter.emit(WidgetEvent.SendToWalletToggled, useSendToWalletStore.getState().showSendToWallet);
+    };
+    return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
+                minWidth: 48,
+                marginLeft: 1,
+            }, children: _jsx(WalletIcon, {}) }) }));
+};

package/_esm/components/SendToWallet/index.js

@@ -0,0 +1,2 @@
+export * from './SendToWallet';
+export * from './SendToWalletButton';

package/_esm/components/SettingsListItemButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SettingsListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "alignItems" | "children" | "sx" | "style" | "autoFocus" | "className" | "tabIndex" | "disabled" | "action" | "selected" | "classes" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/_esm/components/SettingsListItemButton.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+import { ListItemButton as ListItemButtonBase } from './ListItemButton';
+export const SettingsListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
+    paddingRight: theme.spacing(1),
+}));

package/_esm/components/SmallAvatar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const SmallAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "style" | "className" | "sizes" | "alt" | "src" | "srcSet" | "classes" | "variant" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledComponent<import("@mui/material").SkeletonOwnProps & 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;
+}, "width" | "height" | "animation" | "children" | "sx" | "style" | "className" | "classes" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SmallAvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/_esm/components/SmallAvatar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Box, Skeleton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const SmallAvatar = styled(Avatar)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+    border: `2px solid ${theme.palette.background.paper}`,
+}));
+export const SmallAvatarSkeletonBase = styled(Skeleton)(({ theme }) => ({
+    border: `2px solid ${theme.palette.background.paper}`,
+    width: 16,
+    height: 16,
+}));
+export const SmallAvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    borderRadius: '50%',
+}));
+export const SmallAvatarSkeleton = () => {
+    return (_jsx(SmallAvatarSkeletonContainer, { children: _jsx(SmallAvatarSkeletonBase, { variant: "circular" }) }));
+};

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

@@ -0,0 +1,4 @@
+import type { Process } from '@lifi/sdk';
+export declare function CircularProgress({ process }: {
+    process: Process;
+}): import("react/jsx-runtime").JSX.Element;

package/_esm/components/Step/CircularProgress.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import { darken } from '@mui/material/styles';
+import { CircularIcon, CircularProgressPending, } from './CircularProgress.style';
+export function CircularProgress({ process }) {
+    return (_jsxs(CircularIcon, { status: process.status, substatus: process.substatus, children: [process.status === 'STARTED' || process.status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, process.status === 'ACTION_REQUIRED' ? (_jsx(InfoRoundedIcon, { color: "info", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'DONE' &&
+                (process.substatus === 'PARTIAL' || process.substatus === 'REFUNDED') ? (_jsx(WarningRoundedIcon, { sx: (theme) => ({
+                    position: 'absolute',
+                    fontSize: '1rem',
+                    color: darken(theme.palette.warning.main, 0.32),
+                }) })) : process.status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null, process.status === 'FAILED' ? (_jsx(ErrorRoundedIcon, { color: "error", sx: {
+                    position: 'absolute',
+                    fontSize: '1rem',
+                } })) : null] }));
+}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { Status, Substatus } from '@lifi/sdk';
+import type { Theme } from '@mui/material';
+export declare const CircularIcon: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    status: Status;
+    substatus?: Substatus | undefined;
+}, {}, {}>;
+export declare const CircularProgressPending: import("@emotion/styled").StyledComponent<import("@mui/material").CircularProgressProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

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

@@ -0,0 +1,69 @@
+import { Box, CircularProgress as MuiCircularProgress } from '@mui/material';
+import { circularProgressClasses } from '@mui/material/CircularProgress';
+import { alpha, keyframes, styled } from '@mui/material/styles';
+const getStatusColor = (theme, status, substatus) => {
+    switch (status) {
+        case 'ACTION_REQUIRED':
+            return alpha(theme.palette.info.main, 0.12);
+        case 'DONE':
+            if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
+                return alpha(theme.palette.warning.main, 0.48);
+            }
+            return alpha(theme.palette.success.main, 0.12);
+        case 'FAILED':
+            return alpha(theme.palette.error.main, 0.12);
+        default:
+            return theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800];
+    }
+};
+export const CircularIcon = styled(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 = 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.
+export const CircularProgressPending = styled(MuiCircularProgress) `
+  color: ${({ theme }) => theme.palette.mode === 'light'
+    ? theme.palette.primary.main
+    : theme.palette.primary.light};
+  animation-duration: 3s;
+  position: absolute;
+  left: -2px;
+  .${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/_esm/components/Step/DestinationWalletAddress.d.ts

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

package/_esm/components/Step/DestinationWalletAddress.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
+import WalletIcon from '@mui/icons-material/Wallet';
+import { Box, Link, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+import { LinkButton } from './StepProcess.style';
+export const DestinationWalletAddress = ({ step, toAddress, toAddressLink }) => {
+    const { t } = useTranslation();
+    const isDone = step.execution?.status === 'DONE';
+    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(WalletIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), _jsx(Typography, { mx: 2, flex: 1, fontSize: 14, fontWeight: 400, children: isDone
+                        ? t('main.sentToAddress', {
+                            address: toAddress,
+                        })
+                        : t('main.sendToAddress', {
+                            address: toAddress,
+                        }) }), _jsx(LinkButton, { size: "small", edge: "end", LinkComponent: Link, href: toAddressLink, target: "_blank", rel: "nofollow noreferrer", children: _jsx(LinkRoundedIcon, {}) })] }) }));
+};

package/_esm/components/Step/GasStepProcess.d.ts

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

package/_esm/components/Step/GasStepProcess.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import EvStationIcon from '@mui/icons-material/EvStation';
+import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CircularIcon } from './CircularProgress.style';
+export const GasStepProcess = ({ step }) => {
+    const { t } = useTranslation();
+    const isDone = step.execution?.status === 'DONE';
+    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(EvStationIcon, { color: isDone ? 'success' : 'inherit', sx: {
+                            position: 'absolute',
+                            fontSize: '1rem',
+                        } }) }), _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,
+                        }), ' ', isDone ? t('main.gasFeePaid') : t('main.gasFeeEstimated')] })] }) }));
+};

package/_esm/components/Step/Step.d.ts

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

package/_esm/components/Step/Step.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Card, CardTitle } from '../../components/Card';
+import { StepActions } from '../../components/StepActions';
+import { Token } from '../../components/Token';
+import { useAvailableChains } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import { shortenAddress } from '../../utils';
+import { DestinationWalletAddress } from './DestinationWalletAddress';
+import { GasStepProcess } from './GasStepProcess';
+import { StepProcess } from './StepProcess';
+import { StepTimer } from './StepTimer';
+export const Step = ({ step, fromToken, toToken, toAddress }) => {
+    const { t } = useTranslation();
+    const { getChainById } = useAvailableChains();
+    const { subvariant } = 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 = shortenAddress(toAddress);
+    const toAddressLink = toAddress
+        ? `${getChainById(step.action.toChainId)?.metamask
+            .blockExplorerUrls[0]}address/${toAddress}`
+        : undefined;
+    return (_jsxs(Card, { variant: stepHasError ? 'error' : 'default', children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    flex: 1,
+                }, children: [_jsx(CardTitle, { flex: 1, children: getCardTitle() }), _jsx(CardTitle, { sx: { fontWeight: 500 }, children: _jsx(StepTimer, { step: step }) })] }), _jsxs(Box, { py: 1, children: [fromToken ? _jsx(Token, { token: fromToken, px: 2, py: 1 }) : null, _jsx(StepActions, { step: step, px: 2, py: 1, dense: true }), step.execution?.process.map((process, index) => (_jsx(StepProcess, { step: step, process: process }, index))), _jsx(GasStepProcess, { step: step }), formattedToAddress && toAddressLink ? (_jsx(DestinationWalletAddress, { step: step, toAddress: formattedToAddress, toAddressLink: toAddressLink })) : null, toToken ? _jsx(Token, { token: toToken, px: 2, py: 1 }) : null] })] }));
+};

package/_esm/components/Step/StepList.d.ts

@@ -0,0 +1,3 @@
+import type { RouteExtended } from '@lifi/sdk';
+import type { WidgetSubvariant } from '../../types';
+export declare const getStepList: (route?: RouteExtended, subvariant?: WidgetSubvariant) => import("react/jsx-runtime").JSX.Element[] | undefined;