@lifi/widget 1.26.5 → 1.27.0

package/components/ActiveSwaps/ActiveSwaps.style.d.ts

@@ -39,7 +39,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 export declare const ShowAllButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/Card/Card.d.ts

@@ -18,7 +18,7 @@ export declare const Card: import("@emotion/styled").StyledComponent<import("@mu
     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<Theme> & {
     variant?: CardVariant | undefined;
-    selectionColor?: "primary" | "secondary" | undefined;
+    selectionColor?: "secondary" | "primary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: MouseEventHandler<HTMLDivElement> | undefined;

package/components/ChainSelect/ChainSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const ChainSelect: ({ formType }: SwapFormTypeProps) => JSX.Element;

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

@@ -8,7 +8,7 @@ export declare const ChainCard: import("@emotion/styled").StyledComponent<import
     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> & {
     variant?: ("default" | "error" | "selected") | undefined;
-    selectionColor?: "primary" | "secondary" | undefined;
+    selectionColor?: "secondary" | "primary" | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;

package/components/Header/Header.style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps<"div", {}>, "classes" | "color" | "position"> & {
     classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
-    color?: "inherit" | "transparent" | "default" | "primary" | "secondary" | undefined;
+    color?: "inherit" | "transparent" | "default" | "secondary" | "primary" | undefined;
     enableColorOnDark?: boolean | undefined;
     position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
@@ -21,7 +21,7 @@ export declare const Container: import("@emotion/styled").StyledComponent<import
 export declare const WalletButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/Header/WalletHeader.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
+import { ContentCopy as ContentCopyIcon, ExpandMore as ExpandMoreIcon, PowerSettingsNewRounded as PowerSettingsIcon, WalletOutlined as WalletOutlinedIcon, } from '@mui/icons-material';
 import { Avatar, MenuItem } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

package/components/Menu.js

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles';
 import { svgIconClasses } from '@mui/material/SvgIcon';
 export const Menu = styled(MuiMenu)(({ theme }) => ({
     [`& .${menuClasses.paper}`]: {
-        borderRadius: theme.shape.borderRadiusSecondary,
+        borderRadius: theme.shape.borderRadius,
         color: theme.palette.text.primary,
         [`& .${menuClasses.list}`]: {
             padding: theme.spacing(0.5, 0),

package/components/PoweredBy/PoweredBy.js

@@ -2,18 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useLocation } from 'react-router-dom';
 import { version } from '../../config/version';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
 import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 export const PoweredBy = () => {
+    const { hiddenUI } = useWidgetConfig();
     const { pathname } = useLocation();
     if (pathname.includes(navigationRoutes.fromToken) ||
         pathname.includes(navigationRoutes.toToken)) {
         return null;
     }
-    return (_jsx(Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
+    return (_jsx(Box, Object.assign({ px: 3, py: (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.PoweredBy)) ? 1 : 2, sx: {
             display: 'flex',
             alignItems: 'flex-end',
             justifyContent: 'flex-end',
-        } }, { children: _jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })) })));
+        } }, { children: !(hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.PoweredBy)) ? (_jsx(Tooltip, Object.assign({ title: `v${version}`, placement: "top", enterDelay: 3000, arrow: true }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) }))) : null })));
 };

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/SelectTokenButton/SelectTokenButton.js

@@ -7,7 +7,7 @@ import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
-import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
 import { SelectTokenCardHeader } from './SelectTokenButton.style';
 export const SelectTokenButton = ({ formType, compact }) => {
     const { t } = useTranslation();
@@ -31,5 +31,5 @@ export const SelectTokenButton = ({ formType, compact }) => {
     const defaultTitle = formType === 'to' && variant === 'refuel'
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
-    return (_jsxs(Card, Object.assign({ flex: 1, onClick: onClick }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarSkeleton, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    return (_jsxs(Card, Object.assign({ flex: 1, onClick: onClick }, { children: [_jsx(CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };

package/components/SendToWallet/SendToWallet.js

@@ -14,20 +14,34 @@ import { forwardRef, useEffect } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
-import { DisabledUI } from '../../types';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
-import { useSendToWalletStore } from './store';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { disabledUI } = useWidgetConfig();
-    const showSendToWallet = useSendToWalletStore((state) => state.showSendToWallet);
-    const { account, provider } = useWallet();
     const { register, trigger } = useFormContext();
+    const { account, provider } = useWallet();
+    const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+    const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     useEffect(() => {
         trigger(SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
-    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress)) {
+    const hiddenToAddress = hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress);
+    // We want to show toAddress field if it is set via widget configuration, disabled for changes, but not hidden
+    const showInstantly = Boolean(!showSendToWalletDirty &&
+        toAddress &&
+        disabledToAddress &&
+        showDestinationWallet &&
+        !hiddenToAddress);
+    useEffect(() => {
+        if (showInstantly) {
+            setSendToWallet(true);
+        }
+    }, [showInstantly, setSendToWallet]);
+    if (hiddenToAddress) {
         return null;
     }
     const { onChange, onBlur, name, ref: inputRef, } = register(SwapFormKey.ToAddress, {
@@ -46,7 +60,7 @@ export const SendToWallet = forwardRef((props, ref) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    return (_jsx(Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
+    return (_jsx(Collapse, Object.assign({ timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true }, { children: _jsxs(Card, Object.assign({}, props, { ref: ref }, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [_jsx(Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns'), disabled: Boolean(toAddress && disabledToAddress) }), _jsx(SendToWalletFormHelperText, {})] }))] })) })));
 });
 export const SendToWalletFormHelperText = () => {
     var _a;

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

@@ -2,7 +2,7 @@
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/components/SendToWallet/SendToWallet.style.js

@@ -9,4 +9,10 @@ export const Input = styled(InputBase)(({ theme }) => ({
         height: 32,
         padding: theme.spacing(0, 0, 0, 2),
     },
+    [`&.${inputBaseClasses.disabled}`]: {
+        color: 'inherit',
+    },
+    [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+        WebkitTextFillColor: 'unset',
+    },
 }));

package/components/SendToWallet/SendToWalletButton.js

@@ -4,23 +4,22 @@ import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
-import { useSettings } from '../../stores';
-import { DisabledUI } from '../../types';
-import { useSendToWalletStore } from './store';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
 export const SendToWalletButton = () => {
     const { t } = useTranslation();
-    const { disabledUI } = useWidgetConfig();
-    const { account } = useWallet();
     const { setValue } = useFormContext();
-    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+    const { account } = useWallet();
+    const { disabledUI, hiddenUI } = useWidgetConfig();
     const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+    const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     if (!showDestinationWallet ||
         !account.isActive ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress))) {
+        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress))) {
         return null;
     }
     const handleClick = () => {
-        if (showSendToWallet) {
+        if (showSendToWallet && !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.ToAddress))) {
             setValue(SwapFormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();

package/components/SmallAvatar.d.ts

@@ -14,3 +14,23 @@ export declare const SmallAvatar: import("@emotion/styled").StyledComponent<{
 } & 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>, {}, {}>;
+export declare const SmallAvatarSkeletonBase: import("@emotion/styled").StyledComponent<{
+    animation?: false | "pulse" | "wave" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SkeletonClasses> | undefined;
+    height?: string | number | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "text" | "circular" | "rounded" | "rectangular" | undefined;
+    width?: string | number | 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" | "height" | "width" | "animation" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SmallAvatarSkeletonContainer: 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>, {}, {}>;
+export declare const SmallAvatarSkeleton: () => JSX.Element;

package/components/SmallAvatar.js

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

package/components/Step/CircularProgress.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;

package/components/Step/StepList.d.ts

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

package/components/Step/StepProcess.style.d.ts

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/SwapButton/SwapButton.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { SwapButtonProps } from './types';
-export declare const SwapButton: import("react").ForwardRefExoticComponent<SwapButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SwapButton: React.FC<SwapButtonProps>;

package/components/SwapButton/SwapButton.js

@@ -9,18 +9,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LoadingButton } from '@mui/lab';
-import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useGasSufficiency } from '../../hooks';
 import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
+export const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { variant, walletManagement } = useWidgetConfig();
     const { account, connect } = useWallet();
-    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = useGasSufficiency(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (walletManagement) {
@@ -48,5 +45,5 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, en
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, loading: enableLoading && (loading || isGasSufficiencyLoading), loadingPosition: "center", fullWidth: true, ref: ref }, { children: getButtonText() })));
-});
+    return (_jsx(LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true }, { children: getButtonText() })));
+};

package/components/SwapButton/index.d.ts

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

package/components/SwapButton/index.js

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

package/components/SwapButton/types.d.ts

@@ -3,7 +3,6 @@ export interface SwapButtonProps {
     onClick?(): void;
     currentRoute?: Route;
     text?: string;
-    disable?: boolean;
+    disabled?: boolean;
     loading?: boolean;
-    enableLoading?: boolean;
 }

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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/components/SwapInput/SwapInput.style.js

@@ -9,6 +9,7 @@ export const FormControl = styled(MuiFormControl)(({ theme }) => ({
 export const Input = styled(InputBase)(({ theme }) => ({
     fontSize: 24,
     fontWeight: 700,
+    boxShadow: 'none',
     // padding: theme.spacing(2, 2, 2, 0),
     [`.${inputBaseClasses.input}`]: {
         height: 32,

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

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/SwapInput/SwapInputEndAdornment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SwapFormTypeProps } from '../../providers';
 export declare const SwapInputEndAdornment: ({ formType }: SwapFormTypeProps) => JSX.Element;

package/components/SwapInput/SwapInputStartAdornment.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useWatch } from 'react-hook-form';
 import { useChain, useToken } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers';
-import { TokenAvatar, TokenAvatarSkeleton } from '../TokenAvatar';
+import { TokenAvatar, TokenAvatarDefault } from '../TokenAvatar';
 export const SwapInputStartAdornment = ({ formType, }) => {
     const [chainId, tokenAddress] = useWatch({
         name: [
@@ -13,5 +13,5 @@ export const SwapInputStartAdornment = ({ 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(TokenAvatarSkeleton, { sx: { marginLeft: 2 } }));
+    return isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : (_jsx(TokenAvatarDefault, { sx: { marginLeft: 2 } }));
 };

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

@@ -17,7 +17,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "warning" | "error" | "primary" | "secondary" | "info" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "secondary" | "primary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/SwapRoutes/SwapRoutesExpanded.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const SwapRoutesExpanded: () => JSX.Element;
 export declare const SwapRoutesExpandedElement: () => JSX.Element;

package/components/Token/Token.d.ts

@@ -6,6 +6,9 @@ interface TokenProps {
     connected?: boolean;
     step?: Step;
     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

@@ -12,14 +12,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useChain } from '../../hooks';
+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 = (_a) => {
+    var { token } = _a, other = __rest(_a, ["token"]);
+    if (!token.priceUSD || !token.logoURI) {
+        return _jsx(TokenFallback, Object.assign({ token: token }, other));
+    }
+    return _jsx(TokenBase, Object.assign({ token: token }, other));
+};
+export const TokenFallback = (_a) => {
     var { token, connected, step, disableDescription } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription"]);
+    const { token: chainToken, isLoading } = useToken(token.chainId, token.address);
+    return (_jsx(TokenBase, Object.assign({ token: Object.assign(Object.assign({}, token), chainToken), isLoading: isLoading }, other)));
+};
+export const TokenBase = (_a) => {
+    var { token, connected, step, disableDescription, isLoading } = _a, other = __rest(_a, ["token", "connected", "step", "disableDescription", "isLoading"]);
     const { t } = useTranslation();
     const { chain } = useChain(token.chainId);
     const formattedTokenAmount = formatTokenAmount(token.amount, token.decimals);

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -8,6 +8,7 @@ export declare const TokenAvatarFallback: React.FC<{
 export declare const TokenAvatarBase: React.FC<{
     token: Token;
     chain?: Chain;
+    isLoading?: boolean;
     sx?: SxProps<Theme>;
 }>;
 export declare const TokenAvatar: React.FC<{
@@ -15,6 +16,6 @@ export declare const TokenAvatar: React.FC<{
     chain?: Chain;
     sx?: SxProps<Theme>;
 }>;
-export declare const TokenAvatarSkeleton: React.FC<{
+export declare const TokenAvatarDefault: React.FC<{
     sx?: SxProps<Theme>;
 }>;

package/components/TokenAvatar/TokenAvatar.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar, Badge } from '@mui/material';
+import { Avatar, Badge, Skeleton } from '@mui/material';
 import { useChain, useToken } from '../../hooks';
-import { SmallAvatar } from '../SmallAvatar';
-import { AvatarSkeleton, AvatarSkeletonContainer } from './TokenAvatar.style';
+import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
+import { AvatarDefault, AvatarDefaultContainer } from './TokenAvatar.style';
 export const TokenAvatarFallback = ({ token, sx }) => {
     const { chain } = useChain(token.chainId);
-    const { token: chainToken } = useToken(token.chainId, token.address);
-    return _jsx(TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, chain: chain, sx: sx });
+    const { token: chainToken, isLoading } = useToken(token.chainId, token.address);
+    return (_jsx(TokenAvatarBase, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, isLoading: isLoading, chain: chain, sx: sx }));
 };
-export const TokenAvatarBase = ({ token, chain, sx }) => {
-    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] })) })));
+export const TokenAvatarBase = ({ token, chain, isLoading, sx }) => {
+    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] }))) : (_jsx(SmallAvatarSkeleton, {})), sx: sx }, { children: isLoading ? (_jsx(Skeleton, { width: 32, height: 32, variant: "circular" })) : (_jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] }))) })));
 };
 export const TokenAvatar = ({ token, chain, sx }) => {
     if (!chain || !token.logoURI) {
@@ -17,6 +17,6 @@ export const TokenAvatar = ({ token, chain, sx }) => {
     }
     return _jsx(TokenAvatarBase, { token: token, chain: chain, sx: sx });
 };
-export const TokenAvatarSkeleton = ({ sx }) => {
-    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarSkeleton, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarSkeletonContainer, { children: _jsx(AvatarSkeleton, { width: 28, height: 28 }) }) })));
+export const TokenAvatarDefault = ({ sx }) => {
+    return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefault, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarDefaultContainer, { children: _jsx(AvatarDefault, { width: 28, height: 28 }) }) })));
 };

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

@@ -1,6 +1,6 @@
 /// <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 AvatarSkeleton: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const AvatarDefault: 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;
@@ -8,7 +8,7 @@ export declare const AvatarSkeleton: import("@emotion/styled").StyledComponent<i
 } & 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>, {}, {}>;
-export declare const AvatarSkeletonContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+export declare const AvatarDefaultContainer: 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;

package/components/TokenAvatar/TokenAvatar.style.js

@@ -11,14 +11,14 @@ export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
         marginLeft: theme.spacing(1),
     },
 }));
-export const AvatarSkeleton = styled(Box)(({ theme }) => ({
+export const AvatarDefault = 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%',
 }));
-export const AvatarSkeletonContainer = styled(Box)(({ theme }) => ({
+export const AvatarDefaultContainer = styled(Box)(({ theme }) => ({
     border: `2px solid ${theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[800]}`,

package/config/theme.js

@@ -51,7 +51,7 @@ export const createTheme = (mode, theme = {}) => {
         : common.black;
     return createMuiTheme({
         typography: Object.assign({ fontFamily: 'Inter var, Inter, sans-serif' }, theme.typography),
-        palette: Object.assign(Object.assign(Object.assign({ mode }, palette), { primary: {
+        palette: Object.assign(Object.assign(Object.assign(Object.assign({ mode }, palette), (mode === 'light' ? paletteLight : paletteDark)), theme.palette), { primary: {
                 main: primaryMainColor,
                 light: primaryLightColor,
                 dark: primaryDarkColor,
@@ -59,7 +59,7 @@ export const createTheme = (mode, theme = {}) => {
                 main: (_m = (_l = (_k = theme.palette) === null || _k === void 0 ? void 0 : _k.secondary) === null || _l === void 0 ? void 0 : _l.main) !== null && _m !== void 0 ? _m : palette.secondary.main,
                 light: lighten((_q = (_p = (_o = theme.palette) === null || _o === void 0 ? void 0 : _o.secondary) === null || _p === void 0 ? void 0 : _p.main) !== null && _q !== void 0 ? _q : palette.secondary.main, 0.5),
                 dark: darken((_t = (_s = (_r = theme.palette) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s.main) !== null && _t !== void 0 ? _t : palette.secondary.main, 0.2),
-            } }), (mode === 'light' ? paletteLight : paletteDark)),
+            } }),
         shape: Object.assign(Object.assign({}, shape), theme.shape),
         breakpoints: {
             values: {

package/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.26.5";
+export declare const version = "1.27.0";