@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/components/SendToWallet/SendToWallet.js

@@ -1,75 +0,0 @@
-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, useRef } from 'react';
-import { useController, useFormContext, useFormState } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { FormKey, useWallet, useWidgetConfig } from '../../providers';
-import { useSendToWalletStore, useSettings } from '../../stores';
-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 { trigger, getValues, setValue, clearErrors } = useFormContext();
-    const { account } = 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(RequiredUI.ToAddress);
-    const requiredToAddressRef = useRef(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) {
-                        return true;
-                    }
-                    const address = await account.signer?.provider?.resolveName(value);
-                    return (isAddress(address || value) ||
-                        t('error.title.walletAddressInvalid'));
-                }
-                catch {
-                    return t('error.title.walletEnsAddressInvalid');
-                }
-            },
-            onBlur: () => trigger(FormKey.ToAddress),
-        },
-    });
-    // We want to show toAddress field if it is set via widget configuration and not hidden
-    const showInstantly = Boolean(!showSendToWalletDirty &&
-        showDestinationWallet &&
-        toAddress &&
-        !hiddenToAddress) || requiredToAddress;
-    useEffect(() => {
-        if (showInstantly) {
-            setSendToWallet(true);
-        }
-    }, [showInstantly, setSendToWallet]);
-    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) {
-        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/components/SendToWallet/SendToWallet.style.d.ts

@@ -1,5 +0,0 @@
-/// <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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "children" | "disabled" | "sx" | "color" | "margin" | "fullWidth" | "size" | "variant" | "error" | "required" | "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/components/SendToWallet/SendToWallet.style.js

@@ -1,18 +0,0 @@
-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/components/SendToWallet/SendToWalletButton.d.ts

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

package/components/SendToWallet/SendToWalletButton.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 { useWidgetEvents } from '../../hooks';
-import { FormKey, useWidgetConfig } from '../../providers';
-import { useSendToWalletStore, useSettings } from '../../stores';
-import { DisabledUI, HiddenUI, RequiredUI, WidgetEvent } from '../../types';
-export const SendToWalletButton = () => {
-    const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const emitter = useWidgetEvents();
-    const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
-    const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
-    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-    if (!showDestinationWallet ||
-        hiddenUI?.includes(HiddenUI.ToAddress) ||
-        requiredUI?.includes(RequiredUI.ToAddress)) {
-        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/components/SendToWallet/index.js

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

package/components/SmallAvatar.d.ts

@@ -1,11 +0,0 @@
-/// <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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "alt" | "imgProps" | "sizes" | "src" | "srcSet"> & 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;
-}, "className" | "style" | "classes" | "children" | "sx" | "height" | "width" | "animation" | "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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | 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/components/SmallAvatar.js

@@ -1,21 +0,0 @@
-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/components/Step/CircularProgress.d.ts

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

package/components/Step/CircularProgress.js

@@ -1,24 +0,0 @@
-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/components/Step/CircularProgress.style.d.ts

@@ -1,10 +0,0 @@
-/// <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?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | 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/components/Step/CircularProgress.style.js

@@ -1,69 +0,0 @@
-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/components/Step/DestinationWalletAddress.d.ts

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

package/components/Step/DestinationWalletAddress.js

@@ -1,24 +0,0 @@
-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/components/Step/GasStepProcess.d.ts

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

package/components/Step/GasStepProcess.js

@@ -1,20 +0,0 @@
-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/components/Step/Step.d.ts

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

package/components/Step/Step.js

@@ -1,52 +0,0 @@
-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 { useChains } 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 } = useChains();
-    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/components/Step/StepList.d.ts

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

package/components/Step/StepList.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { StepDivider } from '../../components/StepDivider';
-import { Step } from './Step';
-export const getStepList = (route, subvariant) => route?.steps.map((step, index, steps) => {
-    const lastIndex = steps.length - 1;
-    const fromToken = index === 0
-        ? { ...step.action.fromToken, amount: step.action.fromAmount }
-        : undefined;
-    const toToken = index === lastIndex
-        ? {
-            ...(step.execution?.toToken ?? step.action?.toToken),
-            amount: step.execution?.toAmount
-                ? step.execution.toAmount
-                : subvariant === 'nft'
-                    ? route.toAmount
-                    : step.estimate.toAmount,
-        }
-        : undefined;
-    const toAddress = index === lastIndex && route.fromAddress !== route.toAddress
-        ? route.toAddress
-        : undefined;
-    return (_jsxs(Fragment, { children: [_jsx(Step, { step: step, fromToken: fromToken, toToken: toToken, toAddress: toAddress }), steps.length > 1 && index !== steps.length - 1 ? (_jsx(StepDivider, {})) : null] }, step.id));
-});

package/components/Step/StepProcess.d.ts

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

package/components/Step/StepProcess.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LinkRoundedIcon from '@mui/icons-material/LinkRounded';
-import { Box, Link, Typography } from '@mui/material';
-import { useProcessMessage } from '../../hooks';
-import { CircularProgress } from './CircularProgress';
-import { LinkButton } from './StepProcess.style';
-export const StepProcess = ({ step, process }) => {
-    const { title, message } = useProcessMessage(step, process);
-    return (_jsxs(Box, { px: 2, py: 1, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                }, 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,3 +0,0 @@
-import type { StyledComponent } from '@emotion/styled';
-import type { IconButtonProps, LinkProps } from '@mui/material';
-export declare const LinkButton: StyledComponent<IconButtonProps & LinkProps>;

package/components/Step/StepProcess.style.js

@@ -1,5 +0,0 @@
-import { IconButton } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const LinkButton = styled(IconButton)(({ theme }) => ({
-    padding: theme.spacing(0.5),
-}));

package/components/Step/StepTimer.d.ts

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

package/components/Step/StepTimer.js

@@ -1,56 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-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 }) => {
-    const { t } = useTranslation();
-    const [isExpired, setExpired] = useState(false);
-    const [isExecutionStarted, setExecutionStarted] = useState(!!step.execution);
-    const [expiryTimestamp] = useState(() => getExpiryTimestamp(step));
-    const { seconds, minutes, isRunning, pause, resume, restart } = useTimer({
-        autoStart: false,
-        expiryTimestamp,
-        onExpire: () => setExpired(true),
-    });
-    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 (_jsx(_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 ? (_jsx(_Fragment, { children: t('main.inProgress') })) : (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    _jsx(_Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
-};

package/components/Step/index.js

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

package/components/StepActions/StepActions.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import type { LifiStep, Step } from '@lifi/sdk';
-import type { WidgetSubvariant } from '../../types';
-import type { StepActionsProps, StepDetailsLabelProps } from './types';
-export declare const StepActions: React.FC<StepActionsProps>;
-export declare const IncludedSteps: React.FC<{
-    step: LifiStep;
-    subvariant?: WidgetSubvariant;
-}>;
-export declare const StepDetailsContent: React.FC<{
-    step: Step;
-    subvariant?: WidgetSubvariant;
-}>;
-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'>>;