@lifi/widget 1.10.3 → 1.11.1

package/components/SwapInProgress/SwapInProgress.style.d.ts

@@ -1,13 +1,16 @@
 /// <reference types="react" />
-export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    isError?: boolean | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    variant?: "default" | "error" | undefined;
+    dense?: boolean | undefined;
+    indented?: boolean | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
 }, {}, {}>;
 export declare const RouteCard: import("@emotion/styled").StyledComponent<{
     action?: import("react").ReactNode;
@@ -18,26 +21,11 @@ export declare const RouteCard: import("@emotion/styled").StyledComponent<{
     subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
     title?: import("react").ReactNode;
     titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
         component?: "span" | undefined;
     }> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const RouteAvatar: import("@emotion/styled").StyledComponent<{
-    alt?: string | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
-    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
-        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    sizes?: string | undefined;
-    src?: string | undefined;
-    srcSet?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "circular" | "rounded" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/SwapInProgress/SwapInProgress.style.js

@@ -1,15 +1,14 @@
-import { Avatar } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { CardContainer, CardHeader } from '../Card';
-export const Card = styled(CardContainer)(({ theme }) => ({
+import { Card, CardHeader } from '../Card';
+export const ProgressCard = styled(Card)(({ theme }) => ({
     borderColor: alpha(theme.palette.secondary.main, 0.48),
     background: alpha(theme.palette.secondary.main, 0.2),
+    '&:hover': {
+        background: alpha(theme.palette.secondary.main, 0.2),
+    },
 }));
 export const RouteCard = styled(CardHeader)(({ theme }) => ({
     cursor: 'pointer',
     paddingTop: 0,
     paddingBottom: 0,
 }));
-export const RouteAvatar = styled(Avatar)(({ theme }) => ({
-    backgroundColor: theme.palette.background.paper,
-}));

package/components/SwapInput/FormPriceHelperText.js

@@ -4,7 +4,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { formatTokenPrice } from '../../utils/format';
+import { formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, selected }) => {
     const { t } = useTranslation();
     const [amount, chainId, tokenAddress] = useWatch({

package/components/SwapInput/SwapInput.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar } from '@mui/material';
 import { useLayoutEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { formatAmount } from '../../utils/format';
-import { fitInputText } from '../../utils/input';
-import { CardContainer, CardTitle } from '../Card';
+import { fitInputText, formatAmount } from '../../utils';
+import { Card, CardTitle } from '../Card';
+import { TokenAvatar } from '../TokenAvatar';
 import { FormPriceHelperText } from './FormPriceHelperText';
 import { FormControl, Input, maxInputFontSize, minInputFontSize, } from './SwapInput.style';
 import { SwapInputAdornment } from './SwapInputAdornment';
@@ -37,7 +36,7 @@ export const SwapInput = ({ formType }) => {
     useLayoutEffect(() => {
         fitInputText(maxInputFontSize, minInputFontSize, ref.current);
     }, [amount]);
-    return (_jsxs(CardContainer, { children: [_jsx(CardTitle, { children: t('swap.amount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol, sx: { marginLeft: 2 } }, { children: token.symbol[0] }))) : null, endAdornment: _jsx(SwapInputAdornment, { formType: formType }), inputProps: {
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.amount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(TokenAvatar, { token: token, sx: { marginLeft: 2 } })) : null, endAdornment: _jsx(SwapInputAdornment, { formType: formType }), inputProps: {
                             inputMode: 'decimal',
                         }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, required: true }), _jsx(FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
 };

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

@@ -9,7 +9,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
     endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "small" | "large" | "medium" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
     startIcon?: import("react").ReactNode;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;

package/components/SwapInput/SwapInputAdornment.style.js

@@ -1,8 +1,6 @@
 import { Button as MuiButton } from '@mui/material';
 import { lighten, styled } from '@mui/material/styles';
 export const Button = styled(MuiButton)(({ theme }) => ({
-    textTransform: 'none',
-    borderRadius: theme.shape.borderRadiusSecondary,
     borderColor: theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[800],

package/components/SwapRouteCard/SwapRouteCard.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check as CheckIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { Card } from '../Card';
 import { StepActions } from '../StepActions';
-import { StepToken } from '../StepToken';
-import { Card, Check, Label } from './SwapRouteCard.style';
+import { Token } from '../Token';
+import { Label } from './SwapRouteCard.style';
 export const SwapRouteCard = (_a) => {
     var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
@@ -23,16 +23,16 @@ export const SwapRouteCard = (_a) => {
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
         ? t(`swap.tags.${route.tags[0].toLowerCase()}`).toUpperCase()
         : t(`swap.tags.general`).toUpperCase();
-    return (_jsx(Card, Object.assign({ active: active, dense: dense }, other, { children: _jsxs(Box, { children: [_jsxs(Box, Object.assign({ sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }, mb: 2 }, { children: [_jsx(Label, { children: label }), active ? (_jsx(Check, { children: _jsx(CheckIcon, { fontSize: "inherit" }) })) : null] })), _jsx(StepToken, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
-                    ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
-                    : null, _jsxs(Box, Object.assign({ sx: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                    } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
-                                            .map((step) => step.estimate.executionDuration)
-                                            .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] }) })));
+    return (_jsxs(Card, Object.assign({ dense: dense, indented: true }, other, { children: [_jsx(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, mb: 2 }, { children: _jsx(Label, Object.assign({ active: active }, { children: label })) })), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
+                : null, _jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500" }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary" }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end" }, { children: ["~", (route.steps
+                                        .map((step) => step.estimate.executionDuration)
+                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end" }, { children: t(`swap.minutes`) }))] })] }))] })));
 };

package/components/SwapRouteCard/SwapRouteCard.style.d.ts

@@ -1,16 +1,4 @@
 /// <reference types="react" />
-export declare const Card: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    active?: boolean | undefined;
-    blur?: boolean | undefined;
-    dense?: boolean | undefined;
-}, {}, {}>;
 export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
@@ -26,11 +14,3 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     active?: boolean | undefined;
 }, {}, {}>;
-export declare const Check: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType<any> | undefined;
-    ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SwapRouteCard/SwapRouteCard.style.js

@@ -1,54 +1,17 @@
-import { Box, Typography } from '@mui/material';
-import { darken, styled } from '@mui/material/styles';
-export const Card = styled(Box, {
-    shouldForwardProp: (prop) => !['dense', 'active', 'blur'].includes(prop),
-})(({ theme, active, blur, dense }) => ({
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(2),
-    border: `1px solid ${active
-        ? theme.palette.mode === 'light'
-            ? theme.palette.common.black
-            : theme.palette.grey[700]
-        : theme.palette.mode === 'light'
-            ? theme.palette.grey[300]
-            : theme.palette.grey[800]}`,
-    borderRadius: dense
-        ? theme.shape.borderRadiusSecondary
-        : theme.shape.borderRadius,
-    boxSizing: 'border-box',
-    userSelect: blur ? 'none' : 'auto',
-    '&:hover': {
-        cursor: blur || !dense ? 'pointer' : 'default',
-        backgroundColor: blur || !dense
-            ? darken(theme.palette.background.paper, 0.02)
-            : theme.palette.background.paper,
-    },
-    '& > div': {
-        filter: blur ? 'blur(3px)' : 'none',
-    },
-    transition: theme.transitions.create(['background-color'], {
-        duration: theme.transitions.duration.enteringScreen,
-        easing: theme.transitions.easing.easeOut,
-    }),
-}));
+import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 export const Label = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'active',
 })(({ theme, active }) => ({
-    backgroundColor: active
-        ? theme.palette.primary.main
-        : theme.palette.background.paper,
+    backgroundColor: active ? theme.palette.primary.main : 'transparent',
     border: '1px solid',
     borderColor: active
         ? theme.palette.primary.main
         : theme.palette.mode === 'light'
-            ? theme.palette.common.black
-            : theme.palette.grey[300],
-    borderRadius: theme.shape.borderRadius / 2,
-    color: active
-        ? theme.palette.common.white
-        : theme.palette.mode === 'light'
-            ? theme.palette.common.black
-            : theme.palette.grey[300],
+            ? theme.palette.grey[500]
+            : theme.palette.grey[600],
+    borderRadius: theme.shape.borderRadiusSecondary,
+    color: active ? theme.palette.common.white : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,
     lineHeight: 1,
@@ -59,13 +22,3 @@ export const Label = styled(Typography, {
     display: 'inline-flex',
     userSelect: 'none',
 }));
-export const Check = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.primary.main,
-    borderRadius: '50%',
-    color: theme.palette.common.white,
-    width: 24,
-    height: 24,
-    display: 'grid',
-    placeItems: 'center',
-    fontSize: '1rem',
-}));

package/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -11,22 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
-import { Card } from './SwapRouteCard.style';
+import { Card } from '../Card';
 export const SwapRouteCardSkeleton = (_a) => {
-    var { active, dense } = _a, other = __rest(_a, ["active", "dense"]);
-    return (_jsxs(Card, Object.assign({ dense: dense }, other, { children: [_jsxs(Box, Object.assign({ sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                } }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 120, height: 24, sx: { borderRadius: 0.5 } }), active ? _jsx(Skeleton, { variant: "circular", width: 24, height: 24 }) : null] })), _jsxs(Box, Object.assign({ my: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
+    var { dense } = _a, other = __rest(_a, ["dense"]);
+    return (_jsxs(Card, Object.assign({ dense: dense, indented: true }, other, { children: [_jsx(Skeleton, { variant: "rectangular", width: 120, height: 24, sx: { borderRadius: 0.5 } }), _jsxs(Box, Object.assign({ my: 2 }, { children: [_jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             alignItems: 'center',
-                        } }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 56, height: 22 }) }))] })), _jsxs(Box, Object.assign({ sx: {
+                        } }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsx(Box, Object.assign({ ml: 6 }, { children: _jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }) }))] })), _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 22 }), _jsx(Skeleton, { variant: "text", width: 52, height: 15 })] }), _jsxs(Box, Object.assign({ sx: {
+                } }, { children: [_jsxs(Box, { children: [_jsx(Skeleton, { variant: "text", width: 56, height: 27 }), _jsx(Skeleton, { variant: "text", width: 52, height: 18 })] }), _jsxs(Box, Object.assign({ sx: {
                             display: 'flex',
                             alignItems: 'flex-end',
                             flexDirection: 'column',
-                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 22 }), _jsx(Skeleton, { variant: "text", width: 48, height: 15 })] }))] }))] })));
+                        } }, { children: [_jsx(Skeleton, { variant: "text", width: 40, height: 27 }), _jsx(Skeleton, { variant: "text", width: 48, height: 18 })] }))] }))] })));
 };

package/components/SwapRouteCard/SwapRouteNotFoundCard.js

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Route as RouteIcon } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Card } from './SwapRouteCard.style';
+import { Card } from '../Card';
 export const SwapRouteNotFoundCard = (_a) => {
-    var { active, dense } = _a, other = __rest(_a, ["active", "dense"]);
+    var { dense } = _a, other = __rest(_a, ["dense"]);
     const { t } = useTranslation();
-    return (_jsx(Card, Object.assign({ active: active, dense: dense }, other, { children: _jsxs(Box, Object.assign({ sx: {
+    return (_jsx(Card, Object.assign({ dense: dense, indented: true }, other, { children: _jsxs(Box, Object.assign({ sx: {
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',

package/components/SwapRouteCard/types.d.ts

@@ -3,10 +3,7 @@ export interface SwapRouteCardProps {
     route: Route;
     dense?: boolean;
     active?: boolean;
-    blur?: boolean;
 }
 export interface SwapRouteCardSkeletonProps {
     dense?: boolean;
-    active?: boolean;
-    blur?: boolean;
 }

package/components/{StepToken.d.ts → Token/Token.d.ts}

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TokenAmount } from '@lifi/sdk';
 import { BoxProps } from '@mui/material';
-export declare const StepToken: React.FC<{
+export declare const Token: React.FC<{
     token: TokenAmount;
+    connected?: boolean;
 } & BoxProps>;

package/components/Token/Token.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useChains } from '../../hooks';
+import { formatTokenAmount } from '../../utils';
+import { TextFitter } from '../TextFitter';
+import { TokenAvatar } from '../TokenAvatar';
+import { TextSecondary } from './Token.style';
+export const Token = (_a) => {
+    var _b;
+    var { token, connected } = _a, other = __rest(_a, ["token", "connected"]);
+    const { t } = useTranslation();
+    const { getChainById } = useChains();
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1 }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 32, textStyle: {
+                            fontWeight: 700,
+                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                    tokenSymbol: token.symbol,
+                    chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                }) }))] })));
+};

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const TextSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    connected?: boolean | undefined;
+}, {}, {}>;
+export declare const TokenDivider: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("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" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/Token/Token.style.js

@@ -0,0 +1,31 @@
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const TextSecondary = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'connected',
+})(({ theme, connected }) => ({
+    fontSize: 12,
+    lineHeight: 1,
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    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.5, 0, 0, 6),
+    padding: connected
+        ? theme.spacing(0, 0, 0, 3.875)
+        : theme.spacing(0, 0, 0, 0),
+}));
+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.d.ts

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

package/components/Token/index.js

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

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Token } from '@lifi/sdk';
+import { SxProps, Theme } from '@mui/material';
+export declare const TokenAvatar: React.FC<{
+    token: Token;
+    sx?: SxProps<Theme>;
+}>;

package/components/TokenAvatar/TokenAvatar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, Badge } from '@mui/material';
+import { useChain } from '../../hooks';
+import { SmallAvatar } from '../SmallAvatar';
+export const TokenAvatar = ({ token, sx }) => {
+    const { chain } = useChain(token.chainId);
+    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? (_jsx(SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) })));
+};

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

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

package/components/TokenAvatar/TokenAvatar.style.js

@@ -0,0 +1,16 @@
+import { AvatarGroup } 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 }) => ({
+    [`& .${avatarClasses.root}`]: {
+        background: theme.palette.background.paper,
+    },
+    [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
+        marginLeft: theme.spacing(-1),
+        boxSizing: 'border-box',
+    },
+    [`& .${badgeClasses.root}:last-child`]: {
+        marginLeft: theme.spacing(1),
+    },
+}));

package/components/TokenAvatar/index.d.ts

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

package/components/TokenAvatar/index.js

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

package/components/TokenList/TokenList.js

@@ -17,7 +17,7 @@ export const TokenList = ({ formType, height, onClick, }) => {
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
     const [searchTokensFilter] = useDebouncedWatch([SwapFormKey.SearchTokensFilter], 250);
-    const { tokens, isLoading } = useTokenBalances(selectedChainId);
+    const { tokens, isLoading, isBalanceLoading } = useTokenBalances(selectedChainId);
     const chainTokens = useMemo(() => {
         var _a;
         let chainTokens = tokens !== null && tokens !== void 0 ? tokens : [];
@@ -63,6 +63,6 @@ export const TokenList = ({ formType, height, onClick, }) => {
                     if (token.name.includes(skeletonKey)) {
                         return (_jsx(TokenListItemSkeleton, { size: item.size, start: item.start }, item.key));
                     }
-                    return (_jsx(TokenListItem, { onClick: handleTokenClick, size: item.size, start: item.start, token: token, showBalance: account.isActive }, item.key));
+                    return (_jsx(TokenListItem, { onClick: handleTokenClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: account.isActive }, item.key));
                 }) }))] })));
 };

package/components/TokenList/TokenList.style.js

@@ -1,7 +1,7 @@
 import { ListItem as MuiListItem, ListItemButton as MuiListItemButton, } from '@mui/material';
 import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
 import { styled } from '@mui/material/styles';
-import { getContrastAlphaColor } from '../../utils/colors';
+import { getContrastAlphaColor } from '../../utils';
 export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
     paddingLeft: theme.spacing(2),

package/components/TokenList/TokenListItem.d.ts

@@ -2,3 +2,4 @@
 import { TokenListItemBaseProps, TokenListItemProps } from './types';
 export declare const TokenListItem: React.FC<TokenListItemProps>;
 export declare const TokenListItemSkeleton: React.FC<TokenListItemBaseProps>;
+export declare const TokenAmountSkeleton: React.FC;