@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/components/StepActions/StepActions.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-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 { subvariant } = useWidgetConfig();
-    const [cardExpanded, setCardExpanded] = useState(false);
-    const handleExpand = (e) => {
-        e.stopPropagation();
-        setCardExpanded((expanded) => !expanded);
-    };
-    const hasCollapsedSteps = dense && step.includedSteps?.length > 1;
-    // FIXME: step transaction request overrides step tool details, but not included step tool details
-    const toolDetails = subvariant === 'nft'
-        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
-        : step.toolDetails;
-    return (_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: toolDetails.logoURI, alt: toolDetails.name, children: toolDetails.name[0] }) }), _jsx(Typography, { ml: 2, fontSize: 18, fontWeight: "500", flex: 1, children: t(`main.stepDetails`, {
-                            tool: 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, subvariant: subvariant }) })) : (_jsx(IncludedSteps, { step: step, subvariant: subvariant }))] }));
-};
-export const IncludedSteps = ({ step, subvariant }) => {
-    // eslint-disable-next-line react/no-unstable-nested-components
-    const StepIconComponent = ({ icon }) => {
-        const tool = step.includedSteps?.[Number(icon) - 1];
-        return tool ? (_jsx(SmallAvatar, { src: tool.toolDetails.logoURI, alt: tool.toolDetails.name, sx: {
-                boxSizing: 'content-box',
-            }, children: tool.toolDetails.name[0] })) : null;
-    };
-    const StepDetailsLabel = step.tool === 'custom' && subvariant === 'nft'
-        ? 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' && subvariant === 'nft' ? (_jsx(CustomStepDetailsLabel, { step: step, subvariant: subvariant })) : 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, subvariant: subvariant }) })] }, step.id))) }) })) : (_jsxs(Box, { ml: 6, children: [_jsx(StepDetailsLabel, { step: step, subvariant: subvariant === 'nft' ? subvariant : undefined }), _jsx(StepDetailsContent, { step: step, subvariant: subvariant })] }));
-};
-export const StepDetailsContent = ({ step, subvariant }) => {
-    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) {
-        const estimatedFromAmount = Big(step.estimate.fromAmount)
-            .div(10 ** step.action.fromToken.decimals)
-            .minus(Big(step.estimate.toAmount).div(10 ** step.action.toToken.decimals));
-        fromAmount = estimatedFromAmount.gt(0)
-            ? estimatedFromAmount.toString()
-            : Big(step.estimate.fromAmount)
-                .div(10 ** step.action.fromToken.decimals)
-                .toString();
-    }
-    else {
-        fromAmount = formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals);
-    }
-    const showToAmount = step.type !== 'custom' && step.tool !== 'custom' && !sameTokenProtocolStep;
-    return (_jsxs(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex", children: [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] }));
-};
-export const CustomStepDetailsLabel = ({ step, subvariant, }) => {
-    const { t } = useTranslation();
-    if (!subvariant) {
-        return null;
-    }
-    // FIXME: step transaction request overrides step tool details, but not included step tool details
-    const toolDetails = subvariant === 'nft' &&
-        step.includedSteps?.length > 0
-        ? step.includedSteps.find((step) => step.tool === 'custom' && step.toolDetails.key !== 'custom')?.toolDetails || step.toolDetails
-        : step.toolDetails;
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t(`main.${subvariant}StepDetails`, {
-            tool: toolDetails.name,
-        }) }));
-};
-export const CrossStepDetailsLabel = ({ step }) => {
-    const { t } = useTranslation();
-    const { getChainById } = useChains();
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.crossStepDetails', {
-            from: getChainById(step.action.fromChainId)?.name,
-            to: getChainById(step.action.toChainId)?.name,
-            tool: step.toolDetails.name,
-        }) }));
-};
-export const SwapStepDetailsLabel = ({ step }) => {
-    const { t } = useTranslation();
-    const { getChainById } = useChains();
-    return (_jsx(Typography, { fontSize: 12, fontWeight: "500", color: "text.secondary", children: t('main.swapStepDetails', {
-            chain: getChainById(step.action.fromChainId)?.name,
-            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('main.refuelStepDetails', {
-                tool: step.toolDetails.name,
-            })
-            : step.toolDetails.name }));
-};

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

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

package/components/StepActions/StepActions.style.js

@@ -1,56 +0,0 @@
-import { Avatar, StepConnector as MuiStepConnector, StepContent as MuiStepContent, StepLabel as MuiStepLabel, } from '@mui/material';
-import { stepConnectorClasses } from '@mui/material/StepConnector';
-import { stepContentClasses } from '@mui/material/StepContent';
-import { stepLabelClasses } from '@mui/material/StepLabel';
-import { styled } from '@mui/material/styles';
-export const StepIcon = styled('span', {
-    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
-})(({ theme }) => ({
-    width: 12,
-    height: 12,
-    borderRadius: '50%',
-    border: `2px solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-}));
-export const StepConnector = styled(MuiStepConnector, {
-    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
-})(({ theme }) => ({
-    marginLeft: theme.spacing(1.875),
-    [`.${stepConnectorClasses.line}`]: {
-        minHeight: 8,
-        borderLeftWidth: 2,
-        borderColor: theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800],
-    },
-}));
-export const StepLabel = styled(MuiStepLabel, {
-    shouldForwardProp: (prop) => !['active', 'completed', 'error', 'disabled'].includes(prop),
-})(({ theme }) => ({
-    padding: 0,
-    [`.${stepLabelClasses.iconContainer}`]: {
-        paddingLeft: theme.spacing(0.75),
-        paddingRight: theme.spacing(2.75),
-    },
-    [`&.${stepLabelClasses.disabled}`]: {
-        cursor: 'inherit',
-    },
-}));
-export const StepContent = styled(MuiStepContent, {
-    shouldForwardProp: (prop) => !['active', 'completed', 'error'].includes(prop),
-})(({ theme }) => ({
-    borderLeft: `2px solid ${theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800]}`,
-    marginLeft: theme.spacing(1.875),
-    paddingLeft: theme.spacing(3.875),
-    [`&.${stepContentClasses.last}`]: {
-        borderLeft: 'none',
-        paddingLeft: theme.spacing(4.1875),
-    },
-}));
-export const StepAvatar = styled(Avatar)(({ theme, variant }) => ({
-    color: theme.palette.text.primary,
-    backgroundColor: 'transparent',
-}));

package/components/StepActions/index.js

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

package/components/StepActions/types.d.ts

@@ -1,11 +0,0 @@
-import type { LifiStep, Step } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-import type { WidgetSubvariant } from '../../types';
-export interface StepActionsProps extends BoxProps {
-    step: LifiStep;
-    dense?: boolean;
-}
-export interface StepDetailsLabelProps {
-    step: Step;
-    subvariant?: Extract<WidgetSubvariant, 'nft'>;
-}

package/components/StepActions/types.js

@@ -1 +0,0 @@
-export {};

package/components/StepDivider/StepDivider.d.ts

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

package/components/StepDivider/StepDivider.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Divider } from '@mui/material';
-import { Container } from './StepDivider.style';
-export const StepDivider = () => {
-    return (_jsx(Container, { children: _jsx(Divider, { orientation: "vertical", flexItem: true }) }));
-};

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/material").ContainerOwnProps & 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" | "maxWidth" | "fixed" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/StepDivider/StepDivider.style.js

@@ -1,8 +0,0 @@
-import { Container as MuiContainer } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const Container = styled(MuiContainer)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: theme.spacing(2),
-}));

package/components/StepDivider/index.js

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

package/components/Switch.d.ts

@@ -1 +0,0 @@
-export declare const Switch: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Switch.js

@@ -1,53 +0,0 @@
-import { Switch as MuiSwitch } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-import { switchClasses } from '@mui/material/Switch';
-export const Switch = styled(MuiSwitch)(({ theme }) => ({
-    width: 42,
-    height: 24,
-    padding: 0,
-    [`.${switchClasses.switchBase}`]: {
-        padding: 0,
-        margin: theme.spacing(0.25),
-        transitionDuration: theme.transitions.duration.standard,
-        [`&.${switchClasses.checked}`]: {
-            transform: 'translateX(18px)',
-            color: theme.palette.common.white,
-            [`& + .${switchClasses.track}`]: {
-                backgroundColor: theme.palette.primary.main,
-                opacity: 1,
-                border: 0,
-            },
-            [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-                opacity: 0.5,
-            },
-        },
-        [`&.Mui-focusVisible .${switchClasses.thumb}`]: {
-            color: theme.palette.primary.main,
-            border: '6px solid',
-            borderColor: theme.palette.common.white,
-        },
-        [`&.${switchClasses.disabled} .${switchClasses.thumb}`]: {
-            color: theme.palette.mode === 'light'
-                ? alpha(theme.palette.common.black, 0.12)
-                : alpha(theme.palette.common.white, 0.12),
-        },
-        [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
-            opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-        },
-    },
-    [`.${switchClasses.thumb}`]: {
-        boxSizing: 'border-box',
-        width: 20,
-        height: 20,
-    },
-    [`.${switchClasses.track}`]: {
-        borderRadius: 24 / 2,
-        backgroundColor: theme.palette.mode === 'light'
-            ? alpha(theme.palette.common.black, 0.16)
-            : alpha(theme.palette.common.white, 0.16),
-        opacity: 1,
-        transition: theme.transitions.create(['background-color'], {
-            duration: theme.transitions.duration.standard,
-        }),
-    },
-}));

package/components/TextFitter/TextFitter.d.ts

@@ -1,3 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { TextFitterProps } from './types';
-export declare const TextFitter: React.FC<PropsWithChildren<TextFitterProps>>;

package/components/TextFitter/TextFitter.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material/styles';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
-const initialState = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-};
-export const TextFitter = ({ children, width = '100%', height, maxHeight, preserveAspectRatio = 'xMinYMid meet', textStyle, svgStyle, cropTop, cropBottom, onFit, }) => {
-    const theme = useTheme();
-    const textRef = useRef(null);
-    const [viewBox, setViewBox] = useState(initialState);
-    const [ref] = useInView({
-        onChange(inView) {
-            if (inView) {
-                calculateBox();
-            }
-        },
-    });
-    const calculateBox = useCallback(() => {
-        if (!textRef.current) {
-            return;
-        }
-        const box = textRef.current.getBBox();
-        if (cropTop) {
-            box.y += box.height * cropTop;
-            box.height -= box.height * cropTop;
-        }
-        if (cropBottom) {
-            box.height -= box.height * cropBottom;
-        }
-        setViewBox(box);
-        onFit?.();
-    }, [cropBottom, cropTop, onFit]);
-    useLayoutEffect(() => {
-        calculateBox();
-    }, [calculateBox, children]);
-    useLayoutEffect(() => {
-        if (document.fonts) {
-            document.fonts.ready.then(() => {
-                calculateBox();
-            });
-        }
-    }, [calculateBox]);
-    return (_jsx("svg", { style: svgStyle, viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`, width: width, height: height, 
-        // height={
-        //   textRect.height && maxHeight && textRect.height >= maxHeight
-        //     ? maxHeight
-        //     : height
-        // }
-        preserveAspectRatio: preserveAspectRatio, fill: theme.palette.text.primary, ref: ref, children: _jsx("text", { x: 0, y: 0, style: textStyle, ref: textRef, children: children }) }));
-};

package/components/TextFitter/index.js

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

package/components/TextFitter/types.d.ts

@@ -1,12 +0,0 @@
-import type { CSSProperties } from 'react';
-export interface TextFitterProps {
-    textStyle?: CSSProperties;
-    svgStyle?: CSSProperties;
-    onFit?(): void;
-    maxHeight?: string | number;
-    height?: string | number;
-    width?: string | number;
-    preserveAspectRatio?: string;
-    cropTop?: number;
-    cropBottom?: number;
-}

package/components/TextFitter/types.js

@@ -1 +0,0 @@
-export {};

package/components/Token/Token.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { LifiStep, TokenAmount } from '@lifi/sdk';
-import type { BoxProps } from '@mui/material';
-interface TokenProps {
-    token?: TokenAmount;
-    connected?: boolean;
-    step?: LifiStep;
-    disableDescription?: boolean;
-    isLoading?: boolean;
-}
-export declare const Token: React.FC<TokenProps & BoxProps>;
-export declare const TokenFallback: React.FC<TokenProps & BoxProps>;
-export declare const TokenBase: React.FC<TokenProps & BoxProps>;
-export {};

package/components/Token/Token.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Skeleton } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useChain, useToken } from '../../hooks';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
-import { SmallAvatar } from '../SmallAvatar';
-import { TextFitter } from '../TextFitter';
-import { TokenAvatar } from '../TokenAvatar';
-import { TextSecondary, TextSecondaryContainer } from './Token.style';
-export const Token = ({ token, ...other }) => {
-    if (!token?.priceUSD || !token.logoURI) {
-        return _jsx(TokenFallback, { token: token, ...other });
-    }
-    return _jsx(TokenBase, { token: token, ...other });
-};
-export const TokenFallback = ({ token, isLoading, ...other }) => {
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
-    return (_jsx(TokenBase, { token: { ...token, ...chainToken }, isLoading: isLoading || isLoadingToken, ...other }));
-};
-export const TokenBase = ({ token, connected, step, disableDescription, isLoading, ...other }) => {
-    const { t } = useTranslation();
-    const { chain } = useChain(token?.chainId);
-    const formattedTokenAmount = formatTokenAmount(token?.amount, token?.decimals);
-    const formattedTokenPrice = formatTokenPrice(formattedTokenAmount, token?.priceUSD);
-    return (_jsxs(Box, { flex: 1, ...other, children: [_jsxs(Box, { display: "flex", flex: 1, alignItems: "center", children: [_jsx(TokenAvatar, { token: token, chain: chain, isLoading: isLoading, sx: { marginRight: 2 } }), isLoading ? (_jsx(Skeleton, { width: 112, height: 32, variant: "text" })) : (_jsx(TextFitter, { height: 30, textStyle: {
-                            fontWeight: 700,
-                        }, children: t('format.number', {
-                            value: formattedTokenAmount,
-                        }) }))] }), _jsxs(TextSecondaryContainer, { connected: connected, component: "span", children: [isLoading ? (_jsx(Skeleton, { width: 48, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`format.currency`, {
-                            value: formattedTokenPrice,
-                        }) })), !disableDescription ? (_jsx(TextSecondary, { connected: connected, px: 0.5, dot: true, children: "\u2022" })) : null, !step && !disableDescription ? (isLoading ? (_jsx(Skeleton, { width: 96, height: 12, variant: "rounded", sx: { marginTop: 0.5 } })) : (_jsx(TextSecondary, { connected: connected, children: t(`main.tokenOnChain`, {
-                            tokenSymbol: token?.symbol,
-                            chainName: chain?.name,
-                        }) }))) : null, step ? (_jsxs(Box, { display: "flex", alignItems: "flex-end", height: 12, mt: 0.5, children: [_jsx(Box, { pr: 0.75, children: _jsx(SmallAvatar, { src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
-                                        border: 0,
-                                        marginBottom: -0.25,
-                                    }, children: step.toolDetails.name[0] }) }), _jsx(TextSecondary, { connected: true, children: step.toolDetails.name })] })) : null] })] }));
-};

package/components/Token/Token.style.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const TextSecondaryContainer: 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> & {
-    connected?: boolean | undefined;
-}, {}, {}>;
-export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & 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" | "p" | "color" | "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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    connected?: boolean | undefined;
-    dot?: boolean | undefined;
-}, {}, {}>;
-export declare const TokenDivider: 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>, {}, {}>;

package/components/Token/Token.style.js

@@ -1,41 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-export const TextSecondaryContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'connected',
-})(({ theme, connected }) => ({
-    borderLeftWidth: connected ? 2 : 0,
-    borderLeftStyle: 'solid',
-    borderColor: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    margin: connected
-        ? theme.spacing(0.5, 0, 0, 1.875)
-        : theme.spacing(0, 0, 0, 6),
-    padding: connected
-        ? theme.spacing(0, 0, 0, 3.875)
-        : theme.spacing(0, 0, 0, 0),
-    display: 'flex',
-    alignItems: 'flex-start',
-    flexWrap: 'wrap',
-}));
-export const TextSecondary = styled(Typography, {
-    shouldForwardProp: (prop) => !['connected', 'dot'].includes(prop),
-})(({ theme, connected, dot }) => ({
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: 500,
-    color: dot
-        ? alpha(theme.palette.text.secondary, 0.56)
-        : theme.palette.text.secondary,
-    marginTop: connected ? 0 : theme.spacing(0.5),
-}));
-export const TokenDivider = styled(Box)(({ theme }) => ({
-    height: 12,
-    borderLeftWidth: 2,
-    borderLeftStyle: 'solid',
-    borderColor: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    margin: theme.spacing(0, 0, 0, 3.875),
-    padding: theme.spacing(0, 0, 0, 3.875),
-}));

package/components/Token/index.js

@@ -1,2 +0,0 @@
-export * from './Token';
-export * from './Token.style';

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import type { Chain, StaticToken } from '@lifi/sdk';
-import type { SxProps, Theme } from '@mui/material';
-export declare const TokenAvatarFallback: React.FC<{
-    token?: StaticToken;
-    isLoading?: boolean;
-    sx?: SxProps<Theme>;
-}>;
-export declare const TokenAvatarBase: React.FC<{
-    token?: StaticToken;
-    chain?: Chain;
-    isLoading?: boolean;
-    sx?: SxProps<Theme>;
-}>;
-export declare const TokenAvatar: React.FC<{
-    token?: StaticToken;
-    chain?: Chain;
-    isLoading?: boolean;
-    sx?: SxProps<Theme>;
-}>;
-export declare const TokenAvatarDefault: React.FC<{
-    sx?: SxProps<Theme>;
-}>;

package/components/TokenAvatar/TokenAvatar.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar, Badge, Skeleton } from '@mui/material';
-import { useChain, useToken } from '../../hooks';
-import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
-import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
-export const TokenAvatarFallback = ({ token, isLoading, sx }) => {
-    const { chain } = useChain(token?.chainId);
-    const { token: chainToken, isLoading: isLoadingToken } = useToken(token?.chainId, token?.address);
-    return (_jsx(TokenAvatarBase, { token: chainToken ?? token, isLoading: isLoading || isLoadingToken, chain: chain, sx: sx }));
-};
-export const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
-    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain && !isLoading ? (_jsx(SmallAvatar, { src: chain.logoURI, alt: chain.name, children: chain.name[0] })) : (_jsx(SmallAvatarSkeleton, {})), sx: sx, children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(Avatar, { src: token?.logoURI, alt: token?.symbol, children: token?.symbol?.[0] })) }));
-};
-export const TokenAvatar = ({ token, chain, isLoading, sx }) => {
-    if (!chain || !token?.logoURI) {
-        return _jsx(TokenAvatarFallback, { token: token, isLoading: isLoading, sx: sx });
-    }
-    return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
-};
-export const TokenAvatarDefault = ({ sx }) => {
-    return (_jsx(Badge, { overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx, children: _jsx(AvatarDefault, { width: 32, height: 32 }) }));
-};

package/components/TokenAvatar/TokenAvatar.style.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export declare const TokenAvatarGroup: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarGroupProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const AvatarDefault: 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 AvatarDefaultBadge: 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>, {}, {}>;

package/components/TokenAvatar/TokenAvatar.style.js

@@ -1,26 +0,0 @@
-import { AvatarGroup, Box } from '@mui/material';
-import { avatarClasses } from '@mui/material/Avatar';
-import { badgeClasses } from '@mui/material/Badge';
-import { styled } from '@mui/material/styles';
-export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-    [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
-        marginLeft: theme.spacing(-1),
-        boxSizing: 'border-box',
-    },
-    [`& .${badgeClasses.root}:last-child`]: {
-        marginLeft: theme.spacing(1),
-    },
-}));
-export const AvatarDefault = styled(Box)(({ theme }) => ({
-    background: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    borderRadius: '50%',
-}));
-export const AvatarDefaultBadge = styled(Box)(({ theme }) => ({
-    background: theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[800],
-    border: `2px solid ${theme.palette.background.paper}`,
-    borderRadius: '50%',
-}));

package/components/TokenAvatar/index.js

@@ -1,2 +0,0 @@
-export * from './TokenAvatar';
-export * from './TokenAvatar.style';

package/components/TokenList/TokenList.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-import type { TokenListProps } from './types';
-export declare const TokenList: FC<TokenListProps>;

package/components/TokenList/TokenList.js

@@ -1,43 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { useRef } from 'react';
-import { useWatch } from 'react-hook-form';
-import { useChain, useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
-import { FormKey, FormKeyHelper, useWallet } from '../../providers';
-import { TokenNotFound } from './TokenNotFound';
-import { VirtualizedTokenList } from './VirtualizedTokenList';
-import { useTokenSelect } from './useTokenSelect';
-export const TokenList = ({ formType, height, onClick, }) => {
-    const parentRef = useRef(null);
-    const { account } = useWallet();
-    const [selectedChainId] = useWatch({
-        name: [FormKeyHelper.getChainKey(formType)],
-    });
-    const [tokenSearchFilter] = useDebouncedWatch([FormKey.TokenSearchFilter], 320);
-    const { chain, isLoading: isChainLoading } = useChain(selectedChainId);
-    const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = useTokenBalances(selectedChainId);
-    let filteredTokens = (tokensWithBalance ??
-        chainTokens ??
-        []);
-    const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
-    filteredTokens = tokenSearchFilter
-        ? filteredTokens.filter((token) => token.name.toUpperCase().includes(searchFilter) ||
-            token.symbol.toUpperCase().includes(searchFilter) ||
-            token.address.toUpperCase().includes(searchFilter))
-        : filteredTokens;
-    const tokenSearchEnabled = !isTokensLoading &&
-        !filteredTokens.length &&
-        !!tokenSearchFilter &&
-        !!selectedChainId;
-    const { token: searchedToken, isLoading: isSearchedTokenLoading } = useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-    const isLoading = isTokensLoading ||
-        isChainLoading ||
-        (tokenSearchEnabled && isSearchedTokenLoading);
-    const tokens = filteredTokens.length
-        ? filteredTokens
-        : searchedToken
-            ? [searchedToken]
-            : filteredTokens;
-    const handleTokenClick = useTokenSelect(formType, onClick);
-    return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
-};