@lifi/widget 1.21.0 → 1.22.0

package/cjs/components/Step/CircularProgress.d.ts

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

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" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "default" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -36,4 +36,4 @@ export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
 } & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
     ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses">, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "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" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses">, {}, {}>;

package/cjs/components/Step/StepTimer.js

@@ -48,7 +48,7 @@ const StepTimer = ({ step, hideInProgress, }) => {
     ]);
     if (!isExecutionStarted) {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.estimatedTime', {
-                value: (step.estimate.executionDuration / 60).toFixed(0),
+                value: Math.ceil(step.estimate.executionDuration / 60),
             }) }));
     }
     const isTimerExpired = isExpired || (!minutes && !seconds);

package/cjs/components/StepActions/StepActions.js

@@ -45,7 +45,12 @@ const StepActions = (_a) => {
 exports.StepActions = StepActions;
 const StepDetailsContent = ({ step }) => {
     var _a, _b;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [(0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals), ' ', step.action.toToken.symbol] })));
+    const { t } = (0, react_i18next_1.useTranslation)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
+                value: (0, utils_1.formatTokenAmount)(step.estimate.fromAmount, step.action.fromToken.decimals),
+            }), ' ', step.action.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                value: (0, utils_1.formatTokenAmount)((_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.toAmount) !== null && _b !== void 0 ? _b : step.estimate.toAmount, step.action.toToken.decimals),
+            }), ' ', step.action.toToken.symbol] })));
 };
 exports.StepDetailsContent = StepDetailsContent;
 const CrossStepDetailsLabel = ({ step }) => {

package/cjs/components/SwapInput/FormPriceHelperText.js

@@ -22,10 +22,10 @@ const FormPriceHelperText = ({ formType, selected }) => {
     return ((0, jsx_runtime_1.jsxs)(material_1.FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ color: fromAmountTokenPrice ? 'text.secondary' : 'grey.600', fontWeight: 400, fontSize: 12, marginLeft: selected ? 8 : 2, lineHeight: 1.3334, flex: 1, sx: {
                     wordBreak: 'break-word',
                     overflowWrap: 'break-word',
-                } }, { children: t(`swap.currency`, {
+                } }, { children: t(`format.currency`, {
                     value: fromAmountTokenPrice,
-                }) })), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25 }, { children: t(`swap.maxAmount`, {
-                    amount: token === null || token === void 0 ? void 0 : token.amount,
-                }) }))) : null] })));
+                }) })), isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1.3334, pl: 0.25 }, { children: `/ ${t(`format.number`, {
+                    value: token === null || token === void 0 ? void 0 : token.amount,
+                })}` }))) : null] })));
 };
 exports.FormPriceHelperText = FormPriceHelperText;

package/cjs/components/SwapInput/SwapInput.js

@@ -7,6 +7,7 @@ const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
 const TokenAvatar_1 = require("../TokenAvatar");
@@ -16,6 +17,7 @@ const SwapInputAdornment_1 = require("./SwapInputAdornment");
 const SwapInput = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { disabledUI } = (0, providers_1.useWidgetConfig)();
     const ref = (0, react_1.useRef)(null);
     const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
     const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
@@ -43,8 +45,9 @@ const SwapInput = ({ formType }) => {
     (0, react_1.useLayoutEffect)(() => {
         (0, utils_1.fitInputText)(SwapInput_style_1.maxInputFontSize, SwapInput_style_1.minInputFontSize, ref.current);
     }, [amount]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.amount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginLeft: 2 } })) : null, endAdornment: (0, jsx_runtime_1.jsx)(SwapInputAdornment_1.SwapInputAdornment, { formType: formType }), inputProps: {
+    const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(types_1.DisabledUI.FromAmount);
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.fromAmount') }), (0, jsx_runtime_1.jsxs)(SwapInput_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SwapInput_style_1.Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? ((0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : null, endAdornment: !disabled ? (0, jsx_runtime_1.jsx)(SwapInputAdornment_1.SwapInputAdornment, { formType: formType }) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, disabled: disabled, required: true }), (0, jsx_runtime_1.jsx)(FormPriceHelperText_1.FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
 };
 exports.SwapInput = SwapInput;

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?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

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

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

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" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -17,6 +17,7 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
+const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
 const StepActions_1 = require("../StepActions");
 const Token_1 = require("../Token");
@@ -26,6 +27,7 @@ const SwapRouteCard = (_a) => {
     var _b;
     var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const [cardExpanded, setCardExpanded] = (0, react_1.useState)(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
@@ -35,7 +37,7 @@ const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route })) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}) }))) : null] })), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsx)(exports.SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 exports.SwapRouteCard = SwapRouteCard;
 const SwapRouteCardEssentials = ({ route, dense }) => {
@@ -48,8 +50,8 @@ const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCosts = (0, utils_1.getGasCostsBreakdown)(route);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
                             var _a;
-                            return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`swap.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
-                        })] })), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                            return ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ fontSize: 11 }, { children: [(_a = gas.amount) === null || _a === void 0 ? void 0 : _a.toFixed(6), " ", gas.token.symbol, " (", t(`format.currency`, { value: gas.amountUSD }), ")"] }), `${gas.token.address}${gas.token.symbol}`));
+                        })] })), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.EvStationOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`format.currency`, { value: gasCostUSD }) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.AccessTime, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
                             }) }))] })) })), !dense ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.LayersOutlined, { fontSize: dense ? 'medium' : 'small' }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };

package/cjs/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" | "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    color?: "inherit" | "default" | "error" | "success" | "warning" | "primary" | "secondary" | "info" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/cjs/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -14,9 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapRouteCardSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const providers_1 = require("../../providers");
 const Card_1 = require("../Card");
 const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
+    const { variant: widgetVariant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] }))) : null, (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ mr: 2 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32 }) })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 32 })] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] }), variant !== 'stretched' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };
 exports.SwapRouteCardSkeleton = SwapRouteCardSkeleton;

package/cjs/components/SwapRoutes/SwapRoutes.js

@@ -11,11 +11,13 @@ const Card_1 = require("../../components/Card");
 const ProgressToNextUpdate_1 = require("../../components/ProgressToNextUpdate");
 const SwapRouteCard_1 = require("../../components/SwapRouteCard");
 const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const SwapRoutes_style_1 = require("./SwapRoutes.style");
 const useSetRecommendedRoute_1 = require("./useSetRecommendedRoute");
 const SwapRoutes = (props) => {
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = (0, hooks_1.useSwapRoutes)();
@@ -28,14 +30,17 @@ const SwapRoutes = (props) => {
         navigate(utils_1.navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
     return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.routes') }), (0, jsx_runtime_1.jsx)(ProgressToNextUpdate_1.ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                            borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(SwapRoutes_style_1.Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: onlyRecommendedRoute || routeNotFound ? 2 : 1, sx: {
+                            borderRightWidth: !onlyRecommendedRoute &&
+                                !routeNotFound &&
+                                (isFetching || (routes && routes.length > 1))
                                 ? 1
                                 : 0,
-                        } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), (0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteNotFoundCard, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? ((0, jsx_runtime_1.jsx)(SwapRouteCard_1.SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !onlyRecommendedRoute && !routeNotFound ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ py: 1, pr: 1 }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}) })) }))) : null }))] }))] })));
 };
 exports.SwapRoutes = SwapRoutes;

package/cjs/components/SwapRoutes/SwapRoutesExpanded.d.ts

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

package/cjs/components/Token/Token.js

@@ -22,15 +22,16 @@ const TextFitter_1 = require("../TextFitter");
 const TokenAvatar_1 = require("../TokenAvatar");
 const Token_style_1 = require("./Token.style");
 const Token = (_a) => {
-    var _b;
     var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { getChainById } = (0, hooks_1.useChains)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = (0, hooks_1.useChain)(token.chainId);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ flex: 1 }, other, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), (0, jsx_runtime_1.jsx)(TextFitter_1.TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: (0, utils_1.formatTokenAmount)(token.amount, token.decimals) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                        } }, { children: t('format.number', {
+                            value: (0, utils_1.formatTokenAmount)(token.amount, token.decimals),
+                        }) }))] })), (0, jsx_runtime_1.jsxs)(Token_style_1.TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [(0, jsx_runtime_1.jsx)(Token_style_1.TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
-                            chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                            chainName: chain === null || chain === void 0 ? void 0 : chain.name,
                         }) })), step ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ pr: 0.75 }, { children: (0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                                 border: 0,
                                                 marginBottom: -0.25,

package/cjs/components/TokenAvatar/TokenAvatar.d.ts

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

package/cjs/components/TokenAvatar/TokenAvatar.js

@@ -1,13 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAvatar = void 0;
+exports.TokenAvatar = exports.TokenAvatarFallback = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const hooks_1 = require("../../hooks");
 const SmallAvatar_1 = require("../SmallAvatar");
-const TokenAvatar = ({ token, sx }) => {
+const TokenAvatarFallback = ({ token, sx }) => {
     const { chain } = (0, hooks_1.useChain)(token.chainId);
     const { token: chainToken } = (0, hooks_1.useToken)(token.chainId, token.address);
-    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI || (chainToken === null || chainToken === void 0 ? void 0 : chainToken.logoURI), alt: token.symbol }, { children: token.symbol[0] })) })));
+    return (0, jsx_runtime_1.jsx)(exports.TokenAvatar, { token: chainToken !== null && chainToken !== void 0 ? chainToken : token, chain: chain, sx: sx });
+};
+exports.TokenAvatarFallback = TokenAvatarFallback;
+const TokenAvatar = ({ token, chain, sx }) => {
+    if (!chain || !token.logoURI) {
+        return (0, jsx_runtime_1.jsx)(exports.TokenAvatarFallback, { token: token, sx: sx });
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: chain ? ((0, jsx_runtime_1.jsx)(SmallAvatar_1.SmallAvatar, Object.assign({ src: chain.logoURI, alt: chain.name }, { children: chain.name[0] }))) : null, sx: sx }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) })));
 };
 exports.TokenAvatar = TokenAvatar;

package/cjs/components/TokenList/TokenList.js

@@ -8,12 +8,12 @@ const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const TokenNotFound_1 = require("./TokenNotFound");
+const useTokenSelect_1 = require("./useTokenSelect");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
 const TokenList = ({ formType, height, onClick, }) => {
     var _a, _b;
     const parentRef = (0, react_1.useRef)(null);
     const { account } = (0, providers_1.useWallet)();
-    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
@@ -37,28 +37,7 @@ const TokenList = ({ formType, height, onClick, }) => {
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
-    const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
-        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldTouch: true,
-        });
-        // Set chain again to trigger URL builder update
-        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldTouch: true,
-        });
-        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
-        const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
-            providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
-        ]);
-        if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChainId === selectedChainId) {
-            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
-                shouldTouch: true,
-            });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, selectedChainId, setValue]);
+    const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };
 exports.TokenList = TokenList;

package/cjs/components/TokenList/TokenListItem.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { TokenListItemProps } from './types';
+import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 export declare const TokenListItem: React.FC<TokenListItemProps>;
+export declare const TokenListItemButton: React.FC<TokenListItemButtonProps>;
 export declare const TokenListItemSkeleton: () => JSX.Element;
 export declare const TokenAmountSkeleton: React.FC;

package/cjs/components/TokenList/TokenListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TokenAmountSkeleton = exports.TokenListItemSkeleton = exports.TokenListItem = void 0;
+exports.TokenAmountSkeleton = exports.TokenListItemSkeleton = exports.TokenListItemButton = exports.TokenListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
@@ -8,16 +8,22 @@ const react_i18next_1 = require("react-i18next");
 const utils_1 = require("../../utils");
 const TokenList_style_1 = require("./TokenList.style");
 exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
     const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
-    const tokenPrice = (0, utils_1.formatTokenPrice)(token.amount, token.priceUSD);
     return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: [startAdornment, (0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", noWrap: true }, { children: token.amount }))) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`swap.currency`, {
-                                    value: tokenPrice,
-                                }) }))) : null] })))) : null] })), endAdornment] })));
+        } }, { children: [startAdornment, (0, jsx_runtime_1.jsx)(exports.TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] })));
 });
+const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const tokenPrice = (0, utils_1.formatTokenPrice)(token.amount, token.priceUSD);
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, Object.assign({ onClick: onClick, dense: true, disableRipple: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", noWrap: true }, { children: t('format.number', {
+                            value: token.amount,
+                        }) }))) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`format.currency`, {
+                            value: tokenPrice,
+                        }) }))) : null] })))) : null] })));
+};
+exports.TokenListItemButton = TokenListItemButton;
 const TokenListItemSkeleton = () => {
     return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };

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

@@ -1 +1,2 @@
 export * from './TokenList';
+export * from './useTokenSelect';

package/cjs/components/TokenList/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./TokenList"), exports);
+__exportStar(require("./useTokenSelect"), exports);

package/cjs/components/TokenList/types.d.ts

@@ -30,3 +30,9 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
 }
+export interface TokenListItemButtonProps {
+    onClick?(): void;
+    showBalance?: boolean;
+    token: TokenAmount;
+    isBalanceLoading?: boolean;
+}

package/cjs/components/TokenList/useTokenSelect.d.ts

@@ -0,0 +1,2 @@
+import type { SwapFormType } from '../../providers';
+export declare const useTokenSelect: (formType: SwapFormType, onClick?: () => void) => (tokenAddress: string, chainId?: number) => void;

package/cjs/components/TokenList/useTokenSelect.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTokenSelect = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../../providers");
+const useTokenSelect = (formType, onClick) => {
+    const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
+    return (0, react_1.useCallback)((tokenAddress, chainId) => {
+        const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(providers_1.SwapFormKeyHelper.getChainKey(formType));
+        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(providers_1.SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
+        });
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
+            providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
+        ]);
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChainId === selectedChainId) {
+            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldTouch: true,
+            });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [formType, getValues, onClick, setValue]);
+};
+exports.useTokenSelect = useTokenSelect;

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "1.21.0";
+export declare const version = "1.22.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.21.0';
+exports.version = '1.22.0';

package/cjs/hooks/useChain.d.ts

@@ -1,4 +1,4 @@
-export declare const useChain: (chainId: number) => {
-    chain: import("@lifi/types").EVMChain | undefined;
+export declare const useChain: (chainId?: number) => {
+    chain: import("@lifi/types").ExtendedChain | undefined;
     isLoading: boolean;
 };

package/cjs/hooks/useChains.d.ts

@@ -1,5 +1,5 @@
 export declare const useChains: () => {
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+    chains: import("@lifi/types").ExtendedChain[] | undefined;
+    getChainById: (chainId: number) => import("@lifi/types").ExtendedChain | undefined;
     isLoading: boolean;
 };

package/cjs/hooks/useExpandableVariant.js

@@ -5,10 +5,8 @@ const material_1 = require("@mui/material");
 const providers_1 = require("../providers");
 const defaultExpandableWidth = 852;
 const useExpandableVariant = () => {
-    const { variant } = (0, providers_1.useWidgetConfig)();
-    const expandableAllowed = (0, material_1.useMediaQuery)((theme) => {
-        return theme.breakpoints.up(defaultExpandableWidth);
-    });
-    return variant === 'expandable' && expandableAllowed;
+    const { variant, useRecommendedRoute } = (0, providers_1.useWidgetConfig)();
+    const expandableAllowed = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.up(defaultExpandableWidth));
+    return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
 };
 exports.useExpandableVariant = useExpandableVariant;

package/cjs/hooks/useProcessMessage.d.ts

@@ -1,10 +1,10 @@
 import type { EVMChain, Process, Step } from '@lifi/sdk';
-import type { TFunction } from 'react-i18next';
+import type { TFunction } from 'i18next';
 export declare const useProcessMessage: (step?: Step, process?: Process) => {
     title?: string | undefined;
     message?: string | undefined;
 };
-export declare function getProcessMessage(t: TFunction<'translation', undefined>, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
+export declare function getProcessMessage(t: TFunction, getChainById: (chainId: number) => EVMChain | undefined, step: Step, process: Process): {
     title?: string;
     message?: string;
 };