@lifi/widget 1.26.4 → 1.27.0

package/App.js

@@ -1,5 +1,16 @@
+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 { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { AppDrawer } from './AppDrawer';
 import { AppProvider } from './AppProvider';
 import { AppRoutes } from './AppRoutes';
@@ -9,7 +20,9 @@ import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
 import { SwapRoutesExpanded } from './components/SwapRoutes';
 import { useExpandableVariant } from './hooks';
-export const App = forwardRef(({ elementRef, open, config }, ref) => {
+export const App = forwardRef((_a, ref) => {
+    var { elementRef, open } = _a, other = __rest(_a, ["elementRef", "open"]);
+    const config = useMemo(() => (Object.assign(Object.assign({}, other), other.config)), [other]);
     return (config === null || config === void 0 ? void 0 : config.variant) !== 'drawer' ? (_jsx(AppProvider, Object.assign({ config: config }, { children: _jsx(AppDefault, {}) }))) : (_jsx(AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
 });
 export const AppDefault = () => {

package/AppDrawer.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import type { WidgetProps } from './types';
+import type { WidgetConfig } from './types';
 export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
     openDrawer(): void;
     closeDrawer(): void;
 }
-export declare const AppDrawer: import("react").ForwardRefExoticComponent<WidgetProps & import("react").RefAttributes<WidgetDrawer>>;
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & {
+    config?: WidgetConfig | undefined;
+} & import("react").RefAttributes<WidgetDrawer>>;

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: 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;
@@ -39,7 +39,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     } | undefined;
 }, {}, {}>;
 export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/cjs/App.js

@@ -1,4 +1,15 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppDefault = exports.App = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -12,7 +23,9 @@ const Initializer_1 = require("./components/Initializer");
 const PoweredBy_1 = require("./components/PoweredBy");
 const SwapRoutes_1 = require("./components/SwapRoutes");
 const hooks_1 = require("./hooks");
-exports.App = (0, react_1.forwardRef)(({ elementRef, open, config }, ref) => {
+exports.App = (0, react_1.forwardRef)((_a, ref) => {
+    var { elementRef, open } = _a, other = __rest(_a, ["elementRef", "open"]);
+    const config = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, other), other.config)), [other]);
     return (config === null || config === void 0 ? void 0 : config.variant) !== 'drawer' ? ((0, jsx_runtime_1.jsx)(AppProvider_1.AppProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(exports.AppDefault, {}) }))) : ((0, jsx_runtime_1.jsx)(AppDrawer_1.AppDrawer, { ref: ref, elementRef: elementRef, config: config, open: open }));
 });
 const AppDefault = () => {

package/cjs/AppDrawer.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import type { WidgetProps } from './types';
+import type { WidgetConfig } from './types';
 export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
     openDrawer(): void;
     closeDrawer(): void;
 }
-export declare const AppDrawer: import("react").ForwardRefExoticComponent<WidgetProps & import("react").RefAttributes<WidgetDrawer>>;
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & {
+    config?: WidgetConfig | undefined;
+} & import("react").RefAttributes<WidgetDrawer>>;

package/cjs/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: 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;
@@ -39,7 +39,7 @@ export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     } | undefined;
 }, {}, {}>;
 export declare const DrawerButtonTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/cjs/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/cjs/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/cjs/components/Card/CardTitle.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const CardTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/cjs/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/cjs/components/ChainSelect/ChainSelect.style.js

@@ -12,7 +12,7 @@ exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
 });
 exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, minmax(52px, 1fr))',
+    gridTemplateColumns: 'repeat(5, 1fr)',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

package/cjs/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/cjs/components/Menu.js

@@ -8,7 +8,7 @@ const styles_1 = require("@mui/material/styles");
 const SvgIcon_1 = require("@mui/material/SvgIcon");
 exports.Menu = (0, styles_1.styled)(material_1.Menu)(({ theme }) => ({
     [`& .${Menu_1.menuClasses.paper}`]: {
-        borderRadius: theme.shape.borderRadiusSecondary,
+        borderRadius: theme.shape.borderRadius,
         color: theme.palette.text.primary,
         [`& .${Menu_1.menuClasses.list}`]: {
             padding: theme.spacing(0.5, 0),

package/cjs/components/PoweredBy/PoweredBy.js

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

package/cjs/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/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -34,6 +34,6 @@ const SelectTokenButton = ({ formType, compact }) => {
     const defaultTitle = formType === 'to' && variant === 'refuel'
         ? t(`header.selectChain`)
         : t(`swap.selectChainAndToken`);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarSkeleton, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ flex: 1, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.${formType}`) }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 24 }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 64, height: 16 }), compact: compact })) : ((0, jsx_runtime_1.jsx)(SelectTokenButton_style_1.SelectTokenCardHeader, { avatar: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, {})), title: isSelected ? token.symbol : defaultTitle, subheader: isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null, selected: isSelected, compact: compact }))] })));
 };
 exports.SelectTokenButton = SelectTokenButton;

package/cjs/components/SendToWallet/SendToWallet.js

@@ -17,20 +17,34 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
 const types_1 = require("../../types");
 const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
-const store_1 = require("./store");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { disabledUI } = (0, providers_1.useWidgetConfig)();
-    const showSendToWallet = (0, store_1.useSendToWalletStore)((state) => state.showSendToWallet);
-    const { account, provider } = (0, providers_1.useWallet)();
     const { register, trigger } = (0, react_hook_form_1.useFormContext)();
+    const { account, provider } = (0, providers_1.useWallet)();
+    const { disabledUI, hiddenUI, toAddress } = (0, providers_1.useWidgetConfig)();
+    const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     (0, react_1.useEffect)(() => {
         trigger(providers_1.SwapFormKey.ToAddress);
     }, [account.chainId, trigger]);
-    if (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress)) {
+    const hiddenToAddress = hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress);
+    const disabledToAddress = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.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);
+    (0, react_1.useEffect)(() => {
+        if (showInstantly) {
+            setSendToWallet(true);
+        }
+    }, [showInstantly, setSendToWallet]);
+    if (hiddenToAddress) {
         return null;
     }
     const { onChange, onBlur, name, ref: inputRef, } = register(providers_1.SwapFormKey.ToAddress, {
@@ -49,7 +63,7 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
         }),
         onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
     });
-    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: showSendToWallet, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: inputRef, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: showInstantly ? 0 : 225, in: showSendToWallet || showInstantly, mountOnEnter: true, unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true, sx: { paddingTop: '6px', paddingBottom: '5px' } }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.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) }), (0, jsx_runtime_1.jsx)(exports.SendToWalletFormHelperText, {})] }))] })) })));
 });
 const SendToWalletFormHelperText = () => {
     var _a;

package/cjs/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/cjs/components/SendToWallet/SendToWallet.style.js

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

package/cjs/components/SendToWallet/SendToWalletButton.js

@@ -9,21 +9,20 @@ const react_i18next_1 = require("react-i18next");
 const providers_1 = require("../../providers");
 const stores_1 = require("../../stores");
 const types_1 = require("../../types");
-const store_1 = require("./store");
 const SendToWalletButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { disabledUI } = (0, providers_1.useWidgetConfig)();
-    const { account } = (0, providers_1.useWallet)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { account } = (0, providers_1.useWallet)();
+    const { disabledUI, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { showSendToWallet, toggleSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
-    const { showSendToWallet, toggleSendToWallet } = (0, store_1.useSendToWalletStore)();
     if (!showDestinationWallet ||
         !account.isActive ||
-        (disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress))) {
+        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress))) {
         return null;
     }
     const handleClick = () => {
-        if (showSendToWallet) {
+        if (showSendToWallet && !(disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.ToAddress))) {
             setValue(providers_1.SwapFormKey.ToAddress, '', { shouldTouch: true });
         }
         toggleSendToWallet();

package/cjs/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/cjs/components/SmallAvatar.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SmallAvatar = void 0;
+exports.SmallAvatarSkeleton = exports.SmallAvatarSkeletonContainer = exports.SmallAvatarSkeletonBase = exports.SmallAvatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 exports.SmallAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
@@ -9,3 +10,16 @@ exports.SmallAvatar = (0, styles_1.styled)(material_1.Avatar)(({ theme }) => ({
     height: 16,
     border: `2px solid ${theme.palette.background.paper}`,
 }));
+exports.SmallAvatarSkeletonBase = (0, styles_1.styled)(material_1.Skeleton)(({ theme }) => ({
+    border: `2px solid ${theme.palette.background.paper}`,
+    width: 16,
+    height: 16,
+}));
+exports.SmallAvatarSkeletonContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    background: theme.palette.background.paper,
+    borderRadius: '50%',
+}));
+const SmallAvatarSkeleton = () => {
+    return ((0, jsx_runtime_1.jsx)(exports.SmallAvatarSkeletonContainer, { children: (0, jsx_runtime_1.jsx)(exports.SmallAvatarSkeletonBase, { variant: "circular" }) }));
+};
+exports.SmallAvatarSkeleton = SmallAvatarSkeleton;

package/cjs/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/cjs/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/cjs/components/SwapButton/SwapButton.js

@@ -12,18 +12,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lab_1 = require("@mui/lab");
-const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
+const SwapButton = ({ onClick, currentRoute, text, disabled, loading, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { variant, walletManagement } = (0, providers_1.useWidgetConfig)();
     const { account, connect } = (0, providers_1.useWallet)();
-    const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = (0, hooks_1.useGasSufficiency)(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (walletManagement) {
@@ -51,5 +48,6 @@ exports.SwapButton = (0, react_1.forwardRef)(({ onClick, currentRoute, text, dis
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(lab_1.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 ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", color: "primary", onClick: handleSwapButtonClick, disabled: disabled, loading: loading, loadingPosition: "center", fullWidth: true }, { children: getButtonText() })));
+};
+exports.SwapButton = SwapButton;

package/cjs/components/SwapButton/index.d.ts

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

package/cjs/components/SwapButton/index.js

@@ -1,5 +1,20 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 var SwapButton_1 = require("./SwapButton");
 Object.defineProperty(exports, "SwapButton", { enumerable: true, get: function () { return SwapButton_1.SwapButton; } });
+__exportStar(require("./types"), exports);

package/cjs/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/cjs/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/cjs/components/SwapInput/SwapInput.style.js

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

package/cjs/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/cjs/components/SwapInput/SwapInputStartAdornment.js

@@ -16,6 +16,6 @@ const SwapInputStartAdornment = ({ formType, }) => {
     const { chain } = (0, hooks_1.useChain)(chainId);
     const { token } = (0, hooks_1.useToken)(chainId, tokenAddress);
     const isSelected = !!(chain && token);
-    return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarSkeleton, { sx: { marginLeft: 2 } }));
+    return isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatarDefault, { sx: { marginLeft: 2 } }));
 };
 exports.SwapInputStartAdornment = SwapInputStartAdornment;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "center" | "left" | "right" | "inherit" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -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/cjs/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 {};