@lifi/widget 2.9.4 → 3.0.0-alpha.1

package/components/AmountInput/AmountInputEndAdornment.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { InputAdornment, Skeleton } from '@mui/material';
-import Big from 'big.js';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useChains, useGasRecommendation, useTokenAddressBalance, } from '../../hooks';
-import { FormKeyHelper } from '../../providers';
-import { formatTokenAmount } from '../../utils';
-import { Button } from './AmountInputAdornment.style';
-export const AmountInputEndAdornment = ({ formType }) => {
-    const { t } = useTranslation();
-    const { setValue } = useFormContext();
-    const { getChainById } = useChains();
-    const [chainId, tokenAddress] = useWatch({
-        name: [
-            FormKeyHelper.getChainKey(formType),
-            FormKeyHelper.getTokenKey(formType),
-        ],
-    });
-    const { data } = useGasRecommendation(chainId);
-    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    const handleMax = () => {
-        const chain = getChainById(chainId);
-        let maxAmount = token?.amount;
-        if (chain?.nativeToken.address === tokenAddress &&
-            data?.available &&
-            data?.recommended) {
-            const tokenAmount = Big(token?.amount ?? 0);
-            const recommendedAmount = Big(data.recommended.amount)
-                .div(10 ** data.recommended.token.decimals)
-                .div(2);
-            if (tokenAmount.gt(recommendedAmount)) {
-                maxAmount = formatTokenAmount(tokenAmount.minus(recommendedAmount).toString());
-            }
-        }
-        setValue(FormKeyHelper.getAmountKey(formType), maxAmount || '', {
-            shouldTouch: true,
-        });
-    };
-    return (_jsx(InputAdornment, { position: "end", children: isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "rectangular", width: 46, height: 24, sx: { borderRadius: 0.5 } })) : formType === 'from' && token?.amount ? (_jsx(Button, { onClick: handleMax, children: t('button.max') })) : null }));
-};

package/components/AmountInput/AmountInputStartAdornment.d.ts

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

package/components/AmountInput/AmountInputStartAdornment.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useWatch } from 'react-hook-form';
-import { useChain, useToken } from '../../hooks';
-import { FormKeyHelper } from '../../providers';
-import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
-export const AmountInputStartAdornment = ({ formType, }) => {
-    const [chainId, tokenAddress] = useWatch({
-        name: [
-            FormKeyHelper.getChainKey(formType),
-            FormKeyHelper.getTokenKey(formType),
-        ],
-    });
-    const { chain } = useChain(chainId);
-    const { token } = useToken(chainId, tokenAddress);
-    const isSelected = !!(chain && token);
-    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : (_jsx(TokenAvatarDefault, { sx: { marginLeft: 2 } }));
-};

package/components/AmountInput/FormPriceHelperText.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { TokenAmount } from '@lifi/sdk';
-import type { FormTypeProps } from '../../providers';
-export declare const FormPriceHelperText: React.FC<FormTypeProps>;
-export declare const FormPriceHelperTextBase: React.FC<FormTypeProps & {
-    isLoading?: boolean;
-    tokenAddress?: string;
-    token?: TokenAmount;
-}>;

package/components/AmountInput/FormPriceHelperText.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormHelperText, Skeleton, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import { useTokenAddressBalance } from '../../hooks';
-import { FormKeyHelper } from '../../providers';
-import { formatTokenAmount, formatTokenPrice } from '../../utils';
-export const FormPriceHelperText = ({ formType }) => {
-    const [chainId, tokenAddress] = useWatch({
-        name: [
-            FormKeyHelper.getChainKey(formType),
-            FormKeyHelper.getTokenKey(formType),
-        ],
-    });
-    const { token, isLoading } = useTokenAddressBalance(chainId, tokenAddress);
-    return (_jsx(FormPriceHelperTextBase, { formType: formType, isLoading: isLoading, tokenAddress: tokenAddress, token: token }));
-};
-export const FormPriceHelperTextBase = ({ formType, isLoading, tokenAddress, token }) => {
-    const { t } = useTranslation();
-    const amount = useWatch({
-        name: FormKeyHelper.getAmountKey(formType),
-    });
-    const fromAmountTokenPrice = formatTokenPrice(amount, token?.priceUSD);
-    return (_jsxs(FormHelperText, { component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 }, children: [_jsx(Typography, { color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: 8, lineHeight: 1.3334, flex: 1, sx: {
-                    wordBreak: 'break-word',
-                    overflowWrap: 'break-word',
-                }, children: t(`format.currency`, {
-                    value: fromAmountTokenPrice,
-                }) }), isLoading && tokenAddress ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : token?.amount ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25, children: `/ ${t(`format.number`, {
-                    value: formatTokenAmount(token?.amount),
-                })}` })) : null] }));
-};

package/components/AmountInput/index.js

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

package/components/AppContainer.d.ts

@@ -1,12 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { WidgetVariant } from '../types';
-export declare const maxHeight = 680;
-export declare const AppExpandedContainer: 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> & {
-    variant?: WidgetVariant | undefined;
-}, {}, {}>;
-export declare const FlexContainer: 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>, {}, {}>;
-export declare const AppContainer: React.FC<PropsWithChildren<{}>>;

package/components/AppContainer.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Container, ScopedCssBaseline } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { useWidgetConfig } from '../providers';
-import { ElementId, createElementId } from '../utils';
-export const maxHeight = 680;
-export const AppExpandedContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ variant }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'start',
-    flex: 1,
-    height: variant === 'drawer' ? 'none' : maxHeight,
-}));
-const RelativeContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ theme, variant }) => ({
-    position: 'relative',
-    boxSizing: 'content-box',
-    width: '100%',
-    minWidth: 360,
-    maxWidth: 392,
-    maxHeight: variant === 'drawer' ? 'none' : maxHeight,
-    background: theme.palette.background.default,
-    overflow: 'auto',
-    flex: 1,
-    zIndex: 0,
-}));
-const CssBaselineContainer = styled(ScopedCssBaseline, {
-    shouldForwardProp: (prop) => prop !== 'variant',
-})(({ variant }) => ({
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    overflowX: 'clip',
-    margin: 0,
-    width: '100%',
-    maxHeight: variant === 'drawer' ? 'none' : maxHeight,
-    overflowY: 'auto',
-    height: '100%',
-}));
-export const FlexContainer = styled(Container)({
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-});
-export const AppContainer = ({ children }) => {
-    // const ref = useRef<HTMLDivElement>(null);
-    const { containerStyle, variant, elementId } = useWidgetConfig();
-    return (_jsx(RelativeContainer, { sx: containerStyle, variant: variant, id: createElementId(ElementId.RelativeContainer, elementId), children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
-};

package/components/BaseTransactionButton/BaseTransactionButton.d.ts

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

package/components/BaseTransactionButton/BaseTransactionButton.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LoadingButton } from '@mui/lab';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useWallet, useWidgetConfig } from '../../providers';
-import { navigationRoutes } from '../../utils';
-export const BaseTransactionButton = ({ onClick, text, disabled, loading, }) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { walletManagement } = useWidgetConfig();
-    const { account, connect } = useWallet();
-    const handleClick = async () => {
-        if (account.isActive) {
-            onClick?.();
-        }
-        else if (walletManagement) {
-            await connect();
-        }
-        else {
-            navigate(navigationRoutes.selectWallet);
-        }
-    };
-    const getButtonText = () => {
-        if (account.isActive) {
-            if (text) {
-                return text;
-            }
-        }
-        return t(`button.connectWallet`);
-    };
-    return (_jsx(LoadingButton, { variant: "contained", color: "primary", onClick: handleClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true, children: getButtonText() }));
-};

package/components/BaseTransactionButton/index.js

@@ -1,2 +0,0 @@
-export { BaseTransactionButton } from './BaseTransactionButton';
-export * from './types';

package/components/BaseTransactionButton/types.d.ts

@@ -1,6 +0,0 @@
-export interface BaseTransactionButtonProps {
-    onClick?(): void;
-    text?: string;
-    disabled?: boolean;
-    loading?: boolean;
-}

package/components/BaseTransactionButton/types.js

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

package/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { BottomSheetBase, BottomSheetProps } from './types';
-export declare const BottomSheet: import("react").ForwardRefExoticComponent<Omit<BottomSheetProps, "ref"> & import("react").RefAttributes<BottomSheetBase>>;

package/components/BottomSheet/BottomSheet.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Drawer } from '@mui/material';
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
-import { useGetScrollableContainer } from '../../hooks';
-import { backdropProps, modalProps, paperProps } from '../Dialog';
-export const BottomSheet = forwardRef(({ elementRef, children, open, onClose }, ref) => {
-    const getContainer = useGetScrollableContainer();
-    const openRef = useRef(open);
-    const [drawerOpen, setDrawerOpen] = useState(open);
-    const close = useCallback(() => {
-        setDrawerOpen(false);
-        openRef.current = false;
-        onClose?.();
-    }, [onClose]);
-    useImperativeHandle(ref, () => ({
-        isOpen: () => openRef.current,
-        open: () => {
-            setDrawerOpen(true);
-            openRef.current = true;
-        },
-        close,
-    }), [close]);
-    return (_jsx(Drawer, { container: getContainer, ref: elementRef, anchor: "bottom", open: drawerOpen, onClose: close, ModalProps: modalProps, PaperProps: paperProps, BackdropProps: backdropProps, disableAutoFocus: true, children: children }));
-});

package/components/BottomSheet/index.js

@@ -1,2 +0,0 @@
-export * from './BottomSheet';
-export * from './types';

package/components/BottomSheet/types.d.ts

@@ -1,11 +0,0 @@
-import type { DrawerProps } from '@mui/material';
-import type { RefObject } from 'react';
-export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
-    elementRef?: RefObject<HTMLDivElement>;
-    onClose?(): void;
-};
-export interface BottomSheetBase {
-    isOpen(): void;
-    open(): void;
-    close(): void;
-}

package/components/BottomSheet/types.js

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

package/components/Card/Card.d.ts

@@ -1,22 +0,0 @@
-import type { BoxProps, Theme } from '@mui/material';
-import type { MouseEventHandler } from 'react';
-type CardVariant = 'default' | 'selected' | 'error';
-export type CardProps = {
-    variant?: CardVariant;
-    selectionColor?: 'primary' | 'secondary';
-    indented?: boolean;
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    pointerEvents?: 'auto' | 'none';
-} & BoxProps;
-export declare const Card: 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> & {
-    variant?: CardVariant | undefined;
-    selectionColor?: "primary" | "secondary" | undefined;
-    indented?: boolean | undefined;
-    onClick?: MouseEventHandler<HTMLDivElement> | undefined;
-    pointerEvents?: "none" | "auto" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<Theme>>, {}, {}>;
-export {};

package/components/Card/Card.js

@@ -1,50 +0,0 @@
-import { Box } from '@mui/material';
-import { badgeClasses } from '@mui/material/Badge';
-import { alpha, darken, lighten, styled } from '@mui/material/styles';
-const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
-    ? selectionColor === 'primary'
-        ? theme.palette.mode === 'light'
-            ? alpha(theme.palette.primary.main, 0.04)
-            : alpha(theme.palette.primary.main, 0.42)
-        : alpha(theme.palette.secondary.main, theme.palette.mode === 'light' ? 0.08 : 0.12)
-    : theme.palette.background.paper;
-export const Card = styled(Box, {
-    shouldForwardProp: (prop) => !['variant', 'indented', 'selectionColor', 'pointerEvents'].includes(prop),
-})(({ theme, variant, selectionColor = 'primary', indented, pointerEvents, onClick, }) => {
-    const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
-    const backgroundHoverColor = onClick
-        ? theme.palette.mode === 'light'
-            ? darken(backgroundColor, 0.02)
-            : lighten(backgroundColor, 0.02)
-        : backgroundColor;
-    return {
-        backgroundColor,
-        border: `1px solid`,
-        borderColor: variant === 'error'
-            ? theme.palette.error.main
-            : variant === 'selected'
-                ? selectionColor === 'primary'
-                    ? theme.palette.primary.main
-                    : alpha(theme.palette.secondary.main, 0.48)
-                : theme.palette.mode === 'light'
-                    ? theme.palette.grey[300]
-                    : theme.palette.grey[800],
-        borderRadius: theme.shape.borderRadius,
-        overflow: 'hidden',
-        position: 'relative',
-        padding: indented ? theme.spacing(2) : 0,
-        boxSizing: 'border-box',
-        '&:hover': {
-            cursor: onClick ? 'pointer' : 'default',
-            backgroundColor: backgroundHoverColor,
-        },
-        [`&:hover .${badgeClasses.badge} > div`]: {
-            borderColor: backgroundHoverColor,
-        },
-        transition: theme.transitions.create(['background-color'], {
-            duration: theme.transitions.duration.enteringScreen,
-            easing: theme.transitions.easing.easeOut,
-        }),
-        pointerEvents,
-    };
-});

package/components/Card/CardHeader.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const CardHeader: import("@emotion/styled").StyledComponent<import("@mui/material").CardHeaderOwnProps<"span", "span"> & 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" | "action" | "sx" | "title" | "disableTypography" | "avatar" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Card/CardHeader.js

@@ -1,20 +0,0 @@
-import { CardHeader as MuiCardHeader } from '@mui/material';
-import { cardHeaderClasses } from '@mui/material/CardHeader';
-import { styled } from '@mui/material/styles';
-export const CardHeader = styled(MuiCardHeader)(({ theme }) => ({
-    [`.${cardHeaderClasses.action}`]: {
-        marginTop: -2,
-        alignSelf: 'center',
-    },
-    [`.${cardHeaderClasses.title}`]: {
-        fontWeight: '500',
-        fontSize: '1.125rem',
-        lineHeight: '1.2778',
-        color: theme.palette.text.primary,
-    },
-    [`.${cardHeaderClasses.subheader}`]: {
-        fontWeight: '400',
-        fontSize: '0.75rem',
-        color: theme.palette.text.secondary,
-    },
-}));

package/components/Card/CardIconButton.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const CardIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Card/CardIconButton.js

@@ -1,14 +0,0 @@
-import { IconButton as MuiIconButton } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
-export const CardIconButton = styled(MuiIconButton)(({ theme }) => {
-    const backgroundColor = theme.palette.mode === 'light'
-        ? theme.palette.common.black
-        : theme.palette.common.white;
-    return {
-        padding: theme.spacing(0.5),
-        backgroundColor: alpha(backgroundColor, 0.04),
-        '&:hover': {
-            backgroundColor: alpha(backgroundColor, 0.08),
-        },
-    };
-});

package/components/Card/CardLabel.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export declare const CardLabel: 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> & {
-    type?: "insurance" | "active" | "insurance-icon" | undefined;
-}, {}, {}>;
-export declare const CardLabelTypography: 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> & {
-    type?: "icon" | undefined;
-}, {}, {}>;

package/components/Card/CardLabel.js

@@ -1,42 +0,0 @@
-import { Box, Typography } from '@mui/material';
-import { alpha, lighten, styled } from '@mui/material/styles';
-export const CardLabel = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'type',
-})(({ theme, type }) => ({
-    backgroundColor: type === 'active'
-        ? theme.palette.mode === 'light'
-            ? theme.palette.secondary.main
-            : alpha(theme.palette.secondary.main, 0.32)
-        : type?.includes('insurance')
-            ? alpha(theme.palette.success.main, theme.palette.mode === 'light' ? 0.12 : 0.24)
-            : theme.palette.mode === 'light'
-                ? alpha(theme.palette.common.black, 0.12)
-                : alpha(theme.palette.common.white, 0.16),
-    borderRadius: theme.shape.borderRadius,
-    color: type?.includes('insurance')
-        ? lighten(theme.palette.success.main, theme.palette.mode === 'light' ? 0 : 0.24)
-        : theme.palette.text.primary,
-    padding: type === 'insurance' ? theme.spacing(0, 1.5) : 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 24,
-    minWidth: 24,
-    userSelect: 'none',
-    fontSize: '1rem',
-    marginRight: theme.spacing(1),
-}));
-export const CardLabelTypography = styled(Typography, {
-    shouldForwardProp: (prop) => prop !== 'type',
-})(({ theme, type }) => ({
-    padding: type === 'icon'
-        ? theme.spacing(0.75, 0, 0.75, 0.75)
-        : theme.spacing(0.75, 1.5),
-    fontSize: 12,
-    lineHeight: 1,
-    fontWeight: '600',
-    textTransform: 'lowercase',
-    '&::first-letter': {
-        textTransform: 'uppercase',
-    },
-}));

package/components/Card/CardTitle.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const CardTitle: 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> & {
-    required?: boolean | undefined;
-}, {}, {}>;

package/components/Card/CardTitle.js

@@ -1,15 +0,0 @@
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-export const CardTitle = styled(Typography, {
-    shouldForwardProp: (prop) => !['required'].includes(prop),
-})(({ theme, required }) => ({
-    fontSize: '0.875rem',
-    lineHeight: '1.286',
-    letterSpacing: '0.01071em',
-    fontWeight: 700,
-    padding: theme.spacing(1.75, 2, 0, 2),
-    '&:after': {
-        content: required ? '" *"' : 'none',
-        color: theme.palette.error.main,
-    },
-}));

package/components/Card/index.js

@@ -1,5 +0,0 @@
-export * from './Card';
-export * from './CardHeader';
-export * from './CardIconButton';
-export * from './CardLabel';
-export * from './CardTitle';

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,2 +0,0 @@
-import type { FormTypeProps } from '../../providers';
-export declare const ChainSelect: ({ formType }: FormTypeProps) => import("react/jsx-runtime").JSX.Element;

package/components/ChainSelect/ChainSelect.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Box, Skeleton, Tooltip, Typography } from '@mui/material';
-import { useWatch } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { FormKeyHelper } from '../../providers';
-import { maxChainToOrder } from '../../stores';
-import { navigationRoutes } from '../../utils';
-import { ChainCard, ChainContainer } from './ChainSelect.style';
-import { useChainSelect } from './useChainSelect';
-export const ChainSelect = ({ formType }) => {
-    const navigate = useNavigate();
-    const { chainOrder, chains, getChains, isLoading, setChainOrder, setCurrentChain, } = useChainSelect(formType);
-    const [chainId] = useWatch({
-        name: [FormKeyHelper.getChainKey(formType)],
-    });
-    const hasChainInOrderedList = chainOrder.includes(chainId);
-    // If we don't have a chain in the ordered chain list we should add it.
-    if (!hasChainInOrderedList) {
-        setChainOrder(chainId);
-    }
-    const showAllChains = () => {
-        navigate(navigationRoutes[`${formType}Chain`]);
-    };
-    const chainsToHide = (chains?.length ?? 0) - maxChainToOrder;
-    return (_jsxs(ChainContainer, { children: [isLoading
-                ? Array.from({ length: maxChainToOrder + 1 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: 56, sx: { borderRadius: 1 } }, index)))
-                : getChains().map((chain) => (_jsx(Tooltip, { title: chain.name, placement: "top", enterDelay: 400, arrow: true, children: _jsx(ChainCard, { onClick: () => setCurrentChain(chain.id), variant: chainId === chain.id ? 'selected' : 'default', children: _jsx(Avatar, { src: chain.logoURI, alt: chain.key, sx: { width: 40, height: 40 }, children: chain.name[0] }) }) }, chain.id))), chainsToHide > 0 ? (_jsx(ChainCard, { onClick: showAllChains, children: _jsx(Box, { sx: {
-                        width: 40,
-                        height: 40,
-                        display: 'grid',
-                        placeItems: 'center',
-                    }, children: _jsxs(Typography, { fontWeight: 500, children: ["+", chainsToHide] }) }) })) : null] }));
-};

package/components/ChainSelect/ChainSelect.style.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const ChainCard: 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> & {
-    variant?: ("default" | "error" | "selected") | undefined;
-    selectionColor?: "primary" | "secondary" | undefined;
-    indented?: boolean | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-    pointerEvents?: "none" | "auto" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>>, {}, {}>;
-export declare const ChainContainer: 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/ChainSelect/ChainSelect.style.js

@@ -1,16 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { Card } from '../../components/Card';
-export const ChainCard = styled(Card)({
-    display: 'grid',
-    placeItems: 'center',
-    minWidth: 52,
-    height: 56,
-});
-export const ChainContainer = styled(Box)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
-    gridAutoRows: '56px',
-    justifyContent: 'space-between',
-    gap: theme.spacing(1.5),
-}));

package/components/ChainSelect/index.js

@@ -1,2 +0,0 @@
-export * from './ChainSelect';
-export * from './useChainSelect';

package/components/ChainSelect/useChainSelect.d.ts

@@ -1,10 +0,0 @@
-import type { EVMChain } from '@lifi/sdk';
-import type { FormType } from '../../providers';
-export declare const useChainSelect: (formType: FormType) => {
-    chainOrder: number[];
-    chains: import("@lifi/sdk").ExtendedChain[] | undefined;
-    getChains: () => EVMChain[];
-    isLoading: boolean;
-    setChainOrder: (chainId: number) => void;
-    setCurrentChain: (chainId: number) => void;
-};