@lifi/widget 1.29.6 → 1.30.0

package/cjs/components/Card/CardTitle.d.ts

@@ -11,4 +11,6 @@ export declare const CardTitle: import("@emotion/styled").StyledComponent<import
     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>, {}, {}>;
+}, 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> & {
+    required?: boolean | undefined;
+}, {}, {}>;

package/cjs/components/Card/CardTitle.js

@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardTitle = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
-exports.CardTitle = (0, styles_1.styled)(material_1.Typography)(({ theme }) => ({
+exports.CardTitle = (0, styles_1.styled)(material_1.Typography, {
+    shouldForwardProp: (prop) => !['required'].includes(prop),
+})(({ theme, required }) => ({
     fontSize: '0.875rem',
     lineHeight: '1.286',
     letterSpacing: '0.01071em',
     fontWeight: 700,
     padding: theme.spacing(1.75, 2, 0, 2),
+    '&:after': {
+        content: required ? '" *"' : 'none',
+        color: theme.palette.error.main,
+    },
 }));

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

@@ -30,11 +30,11 @@ const ConnectButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const config = (0, providers_1.useWidgetConfig)();
-    const { connect: walletConnect } = (0, providers_1.useWallet)();
+    const { connect: connectWallet } = (0, providers_1.useWallet)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const connect = () => __awaiter(void 0, void 0, void 0, function* () {
         if (config.walletManagement) {
-            yield walletConnect();
+            yield connectWallet();
             return;
         }
         navigate(utils_1.navigationRoutes.selectWallet);

package/cjs/components/SendToWallet/SendToWallet.js

@@ -23,31 +23,39 @@ const Card_1 = require("../Card");
 const SendToWallet_style_1 = require("./SendToWallet.style");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { register, trigger } = (0, react_hook_form_1.useFormContext)();
+    const { register, unregister, trigger, getValues, clearErrors } = (0, react_hook_form_1.useFormContext)();
     const { account, provider } = (0, providers_1.useWallet)();
-    const { disabledUI, hiddenUI, toAddress } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI, requiredUI, 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]);
     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 requiredToAddress = requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(types_1.DisabledUI.ToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
     const showInstantly = Boolean(!showSendToWalletDirty &&
-        toAddress &&
-        disabledToAddress &&
         showDestinationWallet &&
-        !hiddenToAddress);
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
     (0, react_1.useEffect)(() => {
         if (showInstantly) {
             setSendToWallet(true);
         }
     }, [showInstantly, setSendToWallet]);
+    (0, react_1.useEffect)(() => {
+        const value = getValues(providers_1.SwapFormKey.ToAddress);
+        if (value) {
+            trigger(providers_1.SwapFormKey.ToAddress);
+        }
+    }, [account.chainId, getValues, trigger]);
+    (0, react_1.useEffect)(() => {
+        unregister(providers_1.SwapFormKey.ToAddress);
+    }, [requiredToAddress, unregister]);
     if (hiddenToAddress) {
         return null;
     }
     const { onChange, onBlur, name, ref: inputRef, } = register(providers_1.SwapFormKey.ToAddress, {
+        required: requiredToAddress &&
+            t('swap.error.title.walletAddressRequired'),
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {
                 if (!value) {
@@ -63,7 +71,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: 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, {})] }))] })) })));
+    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, Object.assign({ required: requiredToAddress }, { 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/SendToWalletButton.js

@@ -13,12 +13,13 @@ const SendToWalletButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const { account } = (0, providers_1.useWallet)();
-    const { disabledUI, hiddenUI } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI, requiredUI } = (0, providers_1.useWidgetConfig)();
     const { showSendToWallet, toggleSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
     if (!showDestinationWallet ||
         !account.isActive ||
-        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress))) {
+        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(types_1.HiddenUI.ToAddress)) ||
+        (requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(types_1.HiddenUI.ToAddress))) {
         return null;
     }
     const handleClick = () => {

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.29.6';
+exports.version = '1.30.0';

package/cjs/i18n/en.json

@@ -93,6 +93,7 @@
         "transactionUnprepared": "Unable to prepare transaction",
         "unknown": "Something went wrong",
         "walletAddressInvalid": "Wallet address is invalid.",
+        "walletAddressRequired": "Wallet address is required.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       }
     },

package/cjs/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/cjs/pages/MainPage/MainSwapButton.js

@@ -31,6 +31,6 @@ const MainSwapButton = () => {
             });
         }
     });
-    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: isLoading || isFetching || isValidating || !isValid }));
+    return ((0, jsx_runtime_1.jsx)(SwapButton_1.SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: currentRoute && (isLoading || isFetching || isValidating || !isValid) }));
 };
 exports.MainSwapButton = MainSwapButton;

package/cjs/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/cjs/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/cjs/pages/SettingsPage/AdvancedPreferences.d.ts

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

package/cjs/pages/SettingsPage/GasPriceSelect.d.ts

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

package/cjs/pages/SettingsPage/SettingsPage.d.ts

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

package/cjs/pages/SettingsPage/ShowDestinationWallet.d.ts

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

package/cjs/pages/SettingsPage/SlippageInput.d.ts

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

package/cjs/pages/SwapPage/ExchangeRateBottomSheet.js

@@ -53,9 +53,9 @@ const ExchangeRateBottomSheetContent = ({ data, onCancel, onContinue }) => {
     const ref = (0, react_1.useRef)();
     (0, hooks_1.useSetContentHeight)(ref);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ p: 3, ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(StatusBottomSheet_style_1.IconContainer, { children: [(0, jsx_runtime_1.jsx)(StatusBottomSheet_style_1.IconCircle, Object.assign({ status: "warning", mb: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.WarningRounded, { color: "warning" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1, fontSize: 18, fontWeight: 700 }, { children: t('swap.warning.title.rateChanged') }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ py: 1 }, { children: t('swap.warning.message.rateChanged') })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 1 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.quotedAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.oldToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals),
+                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.oldToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals, 5),
                             }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.currentAmount') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [t('format.number', {
-                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.newToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals),
+                                value: (0, utils_1.formatTokenAmount)(data === null || data === void 0 ? void 0 : data.newToAmount, data === null || data === void 0 ? void 0 : data.toToken.decimals, 5),
                             }), ' ', data === null || data === void 0 ? void 0 : data.toToken.symbol] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", mt: 0.25 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: t('swap.rateChange') }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontWeight: 600 }, { children: [(0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.newToAmount) || 0)
                                 .div((0, big_js_1.default)((data === null || data === void 0 ? void 0 : data.oldToAmount) || 0))
                                 .minus(1)

package/cjs/providers/SwapFormProvider/FormUpdater.js

@@ -47,6 +47,8 @@ const FormUpdater = ({ defaultValues }) => {
         setValue,
         toChain,
     ]);
+    // Makes widget config options reactive to changes
+    // Acts similar to values property from useForm, but includes additional logic for chains
     (0, react_1.useEffect)(() => {
         Object.keys(defaultValues).forEach((key) => {
             if (previousDefaultValues.current[key] !== defaultValues[key]) {

package/cjs/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -3,5 +3,10 @@ export declare const formDefaultValues: {
     fromAmount: string;
     toAddress: string;
     tokenSearchFilter: string;
+    contractOutputsToken: string;
+    toContractAddress: string;
+    toContractCallData: string;
+    ToContractGasLimit: string;
+    toAmount: string;
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/cjs/providers/SwapFormProvider/SwapFormProvider.js

@@ -12,6 +12,11 @@ exports.formDefaultValues = {
     [types_1.SwapFormKey.FromAmount]: '',
     [types_1.SwapFormKey.ToAddress]: '',
     [types_1.SwapFormKey.TokenSearchFilter]: '',
+    [types_1.SwapFormKey.ContractOutputsToken]: '',
+    [types_1.SwapFormKey.ToContractAddress]: '',
+    [types_1.SwapFormKey.ToContractCallData]: '',
+    [types_1.SwapFormKey.ToContractGasLimit]: '',
+    [types_1.SwapFormKey.ToAmount]: '',
 };
 const SwapFormProvider = ({ children, }) => {
     const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress, buildSwapUrl, } = (0, WidgetProvider_1.useWidgetConfig)();
@@ -19,10 +24,8 @@ const SwapFormProvider = ({ children, }) => {
         fromToken, fromAmount: (typeof fromAmount === 'number'
             ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
             : fromAmount) || exports.formDefaultValues.fromAmount, toChain,
-        toToken,
-        toAddress })), [fromAmount, fromChain, fromToken, toAddress, toChain, toToken]);
+        toToken, toAddress: toAddress || exports.formDefaultValues.toAddress })), [fromAmount, fromChain, fromToken, toAddress, toChain, toToken]);
     const methods = (0, react_hook_form_1.useForm)({
-        // TODO: revisit after RHF release values support
         // values,
         defaultValues,
     });

package/cjs/types/widget.d.ts

@@ -19,6 +19,10 @@ export declare enum HiddenUI {
     ToAddress = "toAddress"
 }
 export type HiddenUIType = `${HiddenUI}`;
+export declare enum RequiredUI {
+    ToAddress = "toAddress"
+}
+export type RequiredUIType = `${RequiredUI}`;
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
     palette?: Pick<PaletteOptions, 'background' | 'grey' | 'primary' | 'secondary' | 'text'>;
@@ -73,6 +77,7 @@ export interface WidgetConfig {
     disableTelemetry?: boolean;
     disabledUI?: DisabledUIType[];
     hiddenUI?: HiddenUIType[];
+    requiredUI?: RequiredUIType[];
     useRecommendedRoute?: boolean;
     walletManagement?: WidgetWalletManagement;
     sdkConfig?: SDKConfig;

package/cjs/types/widget.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HiddenUI = exports.DisabledUI = void 0;
+exports.RequiredUI = exports.HiddenUI = exports.DisabledUI = void 0;
 var DisabledUI;
 (function (DisabledUI) {
     DisabledUI["FromAmount"] = "fromAmount";
@@ -17,3 +17,7 @@ var HiddenUI;
     HiddenUI["ToAddress"] = "toAddress";
     // ToToken = 'toToken',
 })(HiddenUI = exports.HiddenUI || (exports.HiddenUI = {}));
+var RequiredUI;
+(function (RequiredUI) {
+    RequiredUI["ToAddress"] = "toAddress";
+})(RequiredUI = exports.RequiredUI || (exports.RequiredUI = {}));

package/cjs/utils/format.d.ts

@@ -3,7 +3,7 @@
  * @param amount amount to format.
  * @returns formatted amount.
  */
-export declare const formatTokenAmount: (amount?: string, decimals?: number) => string;
+export declare const formatTokenAmount: (amount?: string, decimals?: number, decimalPlaces?: number) => string;
 export declare const formatSlippage: (slippage?: string, defaultValue?: string, returnInitial?: boolean) => string;
 export declare const formatAmount: (amount?: string, returnInitial?: boolean) => string;
 export declare const formatTokenPrice: (amount?: string, price?: string) => number;

package/cjs/utils/format.js

@@ -11,7 +11,7 @@ big_js_1.default.NE = -42;
  * @param amount amount to format.
  * @returns formatted amount.
  */
-const formatTokenAmount = (amount = '0', decimals = 0) => {
+const formatTokenAmount = (amount = '0', decimals = 0, decimalPlaces = 3) => {
     let shiftedAmount = amount;
     if (decimals) {
         shiftedAmount = (Number(amount) / Math.pow(10, decimals)).toString();
@@ -20,7 +20,6 @@ const formatTokenAmount = (amount = '0', decimals = 0) => {
     if (parsedAmount === 0 || isNaN(Number(shiftedAmount))) {
         return '0';
     }
-    let decimalPlaces = 3;
     const absAmount = Math.abs(parsedAmount);
     while (absAmount < 1 / Math.pow(10, decimalPlaces)) {
         decimalPlaces++;

package/components/Card/CardTitle.d.ts

@@ -11,4 +11,6 @@ export declare const CardTitle: import("@emotion/styled").StyledComponent<import
     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>, {}, {}>;
+}, 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> & {
+    required?: boolean | undefined;
+}, {}, {}>;

package/components/Card/CardTitle.js

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

package/components/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/Header/WalletHeader.js

@@ -26,11 +26,11 @@ const ConnectButton = () => {
     const { t } = useTranslation();
     const { pathname } = useLocation();
     const config = useWidgetConfig();
-    const { connect: walletConnect } = useWallet();
+    const { connect: connectWallet } = useWallet();
     const navigate = useNavigate();
     const connect = () => __awaiter(void 0, void 0, void 0, function* () {
         if (config.walletManagement) {
-            yield walletConnect();
+            yield connectWallet();
             return;
         }
         navigate(navigationRoutes.selectWallet);

package/components/SendToWallet/SendToWallet.js

@@ -20,31 +20,39 @@ import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
 export const SendToWallet = forwardRef((props, ref) => {
     const { t } = useTranslation();
-    const { register, trigger } = useFormContext();
+    const { register, unregister, trigger, getValues, clearErrors } = useFormContext();
     const { account, provider } = useWallet();
-    const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+    const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
-    useEffect(() => {
-        trigger(SwapFormKey.ToAddress);
-    }, [account.chainId, trigger]);
     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 requiredToAddress = requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(DisabledUI.ToAddress);
+    // We want to show toAddress field if it is set via widget configuration and not hidden
     const showInstantly = Boolean(!showSendToWalletDirty &&
-        toAddress &&
-        disabledToAddress &&
         showDestinationWallet &&
-        !hiddenToAddress);
+        toAddress &&
+        !hiddenToAddress) || requiredToAddress;
     useEffect(() => {
         if (showInstantly) {
             setSendToWallet(true);
         }
     }, [showInstantly, setSendToWallet]);
+    useEffect(() => {
+        const value = getValues(SwapFormKey.ToAddress);
+        if (value) {
+            trigger(SwapFormKey.ToAddress);
+        }
+    }, [account.chainId, getValues, trigger]);
+    useEffect(() => {
+        unregister(SwapFormKey.ToAddress);
+    }, [requiredToAddress, unregister]);
     if (hiddenToAddress) {
         return null;
     }
     const { onChange, onBlur, name, ref: inputRef, } = register(SwapFormKey.ToAddress, {
+        required: requiredToAddress &&
+            t('swap.error.title.walletAddressRequired'),
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {
                 if (!value) {
@@ -60,7 +68,7 @@ export const SendToWallet = forwardRef((props, ref) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    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, {})] }))] })) })));
+    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, Object.assign({ required: requiredToAddress }, { 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/SendToWalletButton.js

@@ -10,12 +10,13 @@ export const SendToWalletButton = () => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
     const { account } = useWallet();
-    const { disabledUI, hiddenUI } = useWidgetConfig();
+    const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
     const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     if (!showDestinationWallet ||
         !account.isActive ||
-        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress))) {
+        (hiddenUI === null || hiddenUI === void 0 ? void 0 : hiddenUI.includes(HiddenUI.ToAddress)) ||
+        (requiredUI === null || requiredUI === void 0 ? void 0 : requiredUI.includes(HiddenUI.ToAddress))) {
         return null;
     }
     const handleClick = () => {

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/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/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/config/version.d.ts

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

package/config/version.js

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '1.29.6';
+export const version = '1.30.0';

package/i18n/en.json

@@ -93,6 +93,7 @@
         "transactionUnprepared": "Unable to prepare transaction",
         "unknown": "Something went wrong",
         "walletAddressInvalid": "Wallet address is invalid.",
+        "walletAddressRequired": "Wallet address is required.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.29.6",
+  "version": "1.30.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -44,15 +44,15 @@
     "@ethersproject/experimental": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@lifi/sdk": "^1.7.2",
-    "@lifi/wallet-management": "^1.2.5",
+    "@lifi/wallet-management": "^1.2.6",
     "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.117",
-    "@mui/material": "^5.11.6",
-    "@sentry/integrations": "^7.33.0",
-    "@sentry/react": "^7.33.0",
-    "@sentry/tracing": "^7.33.0",
-    "@tanstack/react-query": "^4.23.0",
-    "@tanstack/react-virtual": "^3.0.0-beta.39",
+    "@mui/lab": "^5.0.0-alpha.118",
+    "@mui/material": "^5.11.7",
+    "@sentry/integrations": "^7.35.0",
+    "@sentry/react": "^7.35.0",
+    "@sentry/tracing": "^7.35.0",
+    "@tanstack/react-query": "^4.24.4",
+    "@tanstack/react-virtual": "^3.0.0-beta.41",
     "big.js": "^6.2.1",
     "i18next": "^22.4.9",
     "i18next-browser-languagedetector": "^7.0.1",
@@ -60,9 +60,9 @@
     "mitt": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.42.1",
+    "react-hook-form": "^7.43.0",
     "react-i18next": "^12.1.4",
-    "react-router-dom": "^6.7.0",
+    "react-router-dom": "^6.8.0",
     "react-timer-hook": "^3.0.5",
     "uuid": "^9.0.0",
     "zustand": "^4.3.2"

package/pages/ActiveSwapsPage/ActiveSwapsPage.d.ts

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

package/pages/MainPage/MainSwapButton.js

@@ -28,5 +28,5 @@ export const MainSwapButton = () => {
             });
         }
     });
-    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: isLoading || isFetching || isValidating || !isValid }));
+    return (_jsx(SwapButton, { onClick: handleClick, currentRoute: currentRoute, disabled: currentRoute && (isLoading || isFetching || isValidating || !isValid) }));
 };

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SettingsPage/AdvancedPreferences.d.ts

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

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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